52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T51f0,"use client" import { useCallback, useRef, useState } from "react" import { Compass, Mountain, Sun, Thermometer } from "lucide-react" import { AnimatePresence, LayoutGroup, motion, useReducedMotion, } from "motion/react" import { cn } from "@/lib/utils" const DETAIL_HOLD_MS = 2000 const CENTER_CROSSFADE = { duration: 0.2, ease: [0.23, 1, 0.32, 1] as const } const LAYOUT_SPRING = { type: "spring" as const, duration: 0.34, bounce: 0.22, } export function AppleWatchUltra() { const [compassRotation, setCompassRotation] = useState(0) const [actionFlash, setActionFlash] = useState(false) const [centerDetailKey, setCenterDetailKey] = useState(null) const [centerDetailOpen, setCenterDetailOpen] = useState(false) const detailHoldTimerRef = useRef | null>(null) const reduceMotion = useReducedMotion() const layoutTransition = reduceMotion ? { duration: 0.01 } : LAYOUT_SPRING const handleCrownClick = useCallback(() => { setCompassRotation((prev) => prev + 15) }, []) const handleActionButtonClick = useCallback(() => { setActionFlash(true) setTimeout(() => setActionFlash(false), 200) }, []) const handleComplicationClick = useCallback((complication: string) => { setCenterDetailKey(complication) requestAnimationFrame(() => setCenterDetailOpen(true)) if (detailHoldTimerRef.current) { clearTimeout(detailHoldTimerRef.current) } detailHoldTimerRef.current = setTimeout(() => { setCenterDetailOpen(false) detailHoldTimerRef.current = null }, DETAIL_HOLD_MS) }, []) const complications = { uv: { label: "UV Index", value: "3", sublabel: "Moderate" }, temp: { label: "Temperature", value: "72", sublabel: "Partly Cloudy" }, compass: { label: "Heading", value: "NW", sublabel: "315" }, altitude: { label: "Altitude", value: "1,247", sublabel: "ft" }, } const degreeSymbol = "\u00B0" const bandIndices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] const crownIndices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] const dotIndices = [0, 1, 2, 3, 4] const compassIndices = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, ] const cardinals = ["N", "E", "S", "W"] const activeDetail = centerDetailOpen && centerDetailKey ? complications[centerDetailKey as keyof typeof complications] : null return (

{bandIndices.map((i) => (

))}

{bandIndices.map((i) => (

))}

{bandIndices.slice(0, 10).map((i) => (

))}

{bandIndices.slice(0, 10).map((i) => (

))}

{compassIndices.map((i) => { const degree = i * 10 const isMajor = degree % 30 === 0 const isCardinal = degree % 90 === 0 const tickColor = isCardinal ? "#FF6D0A" : "rgba(255,255,255,0.5)" const textColor = isCardinal ? "#FF6D0A" : "rgba(255,255,255,0.6)" return (

{isMajor && (

{isCardinal ? cardinals[degree / 90] : degree}

)}

) })}

{ if (!centerDetailOpen) { setCenterDetailKey(null) } }} > {activeDetail ? (

{activeDetail.label}

{activeDetail.value}

{activeDetail.sublabel}

) : ( 10:09

TUESDAY, APR 1

)}

} isActive={centerDetailKey === "uv"} label="UV" onClick={() => handleComplicationClick("uv")} position="top-left" value={complications.uv.value} /> } isActive={centerDetailKey === "temp"} label="" onClick={() => handleComplicationClick("temp")} position="top-right" value={complications.temp.value + degreeSymbol} /> } isActive={centerDetailKey === "compass"} label={complications.compass.sublabel + degreeSymbol} onClick={() => handleComplicationClick("compass")} position="bottom-left" value={complications.compass.value} /> } isActive={centerDetailKey === "altitude"} label={complications.altitude.sublabel} onClick={() => handleComplicationClick("altitude")} position="bottom-right" value={complications.altitude.value} />

) } function ComplicationItem({ position, icon, value, label, isActive, onClick, ariaLabel, }: { position: "top-left" | "top-right" | "bottom-left" | "bottom-right" icon: React.ReactNode value: string label: string isActive: boolean onClick: () => void ariaLabel: string }) { const positions: Record = { "top-left": "top-6 left-6", "top-right": "top-6 right-6", "bottom-left": "bottom-6 left-6", "bottom-right": "bottom-6 right-6", } const posClass = positions[position] return ( ) } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/apple-watch-ultra.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]