{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "apple-watch-ultra",
  "type": "registry:ui",
  "description": "Watch Ultra–style case, complications, crown, and action button",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/apple-watch-ultra.tsx",
      "content": "\"use client\"\n\nimport { useCallback, useRef, useState } from \"react\"\nimport { Compass, Mountain, Sun, Thermometer } from \"lucide-react\"\nimport {\n  AnimatePresence,\n  LayoutGroup,\n  motion,\n  useReducedMotion,\n} from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DETAIL_HOLD_MS = 2000\nconst CENTER_CROSSFADE = { duration: 0.2, ease: [0.23, 1, 0.32, 1] as const }\nconst LAYOUT_SPRING = {\n  type: \"spring\" as const,\n  duration: 0.34,\n  bounce: 0.22,\n}\n\nexport function AppleWatchUltra() {\n  const [compassRotation, setCompassRotation] = useState(0)\n  const [actionFlash, setActionFlash] = useState(false)\n  const [centerDetailKey, setCenterDetailKey] = useState<string | null>(null)\n  const [centerDetailOpen, setCenterDetailOpen] = useState(false)\n  const detailHoldTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const reduceMotion = useReducedMotion()\n\n  const layoutTransition = reduceMotion ? { duration: 0.01 } : LAYOUT_SPRING\n\n  const handleCrownClick = useCallback(() => {\n    setCompassRotation((prev) => prev + 15)\n  }, [])\n\n  const handleActionButtonClick = useCallback(() => {\n    setActionFlash(true)\n    setTimeout(() => setActionFlash(false), 200)\n  }, [])\n\n  const handleComplicationClick = useCallback((complication: string) => {\n    setCenterDetailKey(complication)\n    requestAnimationFrame(() => setCenterDetailOpen(true))\n    if (detailHoldTimerRef.current) {\n      clearTimeout(detailHoldTimerRef.current)\n    }\n    detailHoldTimerRef.current = setTimeout(() => {\n      setCenterDetailOpen(false)\n      detailHoldTimerRef.current = null\n    }, DETAIL_HOLD_MS)\n  }, [])\n\n  const complications = {\n    uv: { label: \"UV Index\", value: \"3\", sublabel: \"Moderate\" },\n    temp: { label: \"Temperature\", value: \"72\", sublabel: \"Partly Cloudy\" },\n    compass: { label: \"Heading\", value: \"NW\", sublabel: \"315\" },\n    altitude: { label: \"Altitude\", value: \"1,247\", sublabel: \"ft\" },\n  }\n\n  const degreeSymbol = \"\\u00B0\"\n  const bandIndices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]\n  const crownIndices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\n  const dotIndices = [0, 1, 2, 3, 4]\n  const compassIndices = [\n    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,\n    21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,\n  ]\n  const cardinals = [\"N\", \"E\", \"S\", \"W\"]\n\n  const activeDetail =\n    centerDetailOpen && centerDetailKey\n      ? complications[centerDetailKey as keyof typeof complications]\n      : null\n\n  return (\n    <div className=\"flex min-h-screen items-center justify-center bg-background p-8\">\n      <div\n        className=\"relative scale-100 cursor-pointer select-none transition-all duration-200 ease-out\"\n        style={{\n          width: \"min(380px, 85vw)\",\n        }}\n      >\n        <div className=\"-top-20 -translate-x-1/2 absolute left-1/2 z-0 h-24 w-48\">\n          <div\n            className=\"h-full w-full rounded-t-[38px]\"\n            style={{\n              background:\n                \"linear-gradient(180deg, #3d5a80 0%, #4a6fa5 30%, #3d5a80 100%)\",\n              boxShadow: \"inset 0 0 20px rgba(0,0,0,0.3)\",\n            }}\n          >\n            <div className=\"absolute inset-x-4 top-2 bottom-0 flex flex-col gap-1\">\n              {bandIndices.map((i) => (\n                <div className=\"flex justify-between\" key={i}>\n                  <div className=\"h-1.5 w-[2px] bg-white/40\" />\n                  <div className=\"h-1.5 w-[2px] bg-white/40\" />\n                </div>\n              ))}\n            </div>\n            <div className=\"absolute inset-x-7 top-0 bottom-0 flex h-full flex-col gap-1 bg-blue-950\" />\n            <div className=\"absolute inset-x-6 top-1 bottom-0 flex flex-col gap-1\">\n              {bandIndices.map((i) => (\n                <div className=\"flex justify-between\" key={i}>\n                  <div className=\"h-1.5 w-[2px] bg-white/40\" />\n                  <div className=\"h-1.5 w-[2px] bg-white/40\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        <div className=\"-bottom-20 -translate-x-1/2 absolute left-1/2 z-0 h-26 w-48\">\n          <div\n            className=\"h-full w-full rounded-b-[38px]\"\n            style={{\n              background:\n                \"linear-gradient(0deg, #3d5a80 0%, #4a6fa5 30%, #3d5a80 100%)\",\n              boxShadow: \"inset 0 0 20px rgba(0,0,0,0.3)\",\n            }}\n          >\n            <div className=\"absolute inset-x-4 top-0 bottom-2 flex flex-col gap-1\">\n              {bandIndices.slice(0, 10).map((i) => (\n                <div className=\"flex justify-between\" key={i}>\n                  <div className=\"h-1.5 w-[2px] bg-white/40\" />\n                  <div className=\"h-1.5 w-[2px] bg-white/40\" />\n                </div>\n              ))}\n            </div>\n            <div className=\"absolute inset-x-7 top-0 bottom-0 flex h-full flex-col gap-1 bg-blue-950\" />\n            <div className=\"absolute inset-x-6 top-0 bottom-0 flex flex-col gap-1\">\n              {bandIndices.slice(0, 10).map((i) => (\n                <div className=\"flex justify-between\" key={i}>\n                  <div className=\"h-1.5 w-[2px] bg-white/40\" />\n                  <div className=\"h-1.5 w-[2px] bg-white/40\" />\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        <div\n          className=\"absolute inset-0 z-10 rounded-[86px]\"\n          style={{\n            boxShadow:\n              \"0 4px 8px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.4), 0 32px 64px rgba(0,0,0,0.3)\",\n          }}\n        />\n\n        <div\n          className=\"relative z-10 rounded-[86px]\"\n          style={{\n            aspectRatio: \"0.88\",\n            background:\n              \"linear-gradient(145deg, #c9c5bf 0%, #b5b0a8 15%, #a39e96 35%, #918c84 55%, #7d7870 75%, #696560 100%)\",\n            boxShadow:\n              \"inset 0 2px 0 rgba(255,255,255,0.35), inset -2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.15), inset 2px 0 0 rgba(255,255,255,0.15)\",\n          }}\n        >\n          <div\n            className=\"pointer-events-none absolute inset-[2px] rounded-[82px]\"\n            style={{\n              boxShadow:\n                \"inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.15)\",\n            }}\n          />\n\n          <div\n            className=\"-right-5 -translate-y-1/2 absolute top-1/2 z-20 h-48 w-5 rounded-r-2xl\"\n            style={{\n              background:\n                \"linear-gradient(145deg, #b5b0a8 0%, #9a958d 30%, #7d7870 70%, #696560 100%)\",\n              boxShadow:\n                \"3px 0 6px rgba(0,0,0,0.35), inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.15)\",\n            }}\n          />\n\n          <button\n            className=\"-right-5 absolute top-[calc(50%-58px)] z-30 h-14 w-6 cursor-pointer rounded-md transition-all hover:brightness-110 active:brightness-90\"\n            onClick={handleCrownClick}\n            style={{\n              background:\n                \"linear-gradient(90deg, #858078 0%, #97928a 30%, #a9a49c 50%, #97928a 70%, #858078 100%)\",\n              boxShadow:\n                \"2px 0 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.35)\",\n            }}\n            title=\"Click to rotate compass\"\n            type=\"button\"\n          >\n            <div className=\"absolute inset-x-0.5 inset-y-1 flex flex-col justify-between\">\n              {crownIndices.map((i) => (\n                <div\n                  className=\"h-px w-full\"\n                  key={i}\n                  style={{\n                    background:\n                      \"linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.4) 70%, transparent 100%)\",\n                  }}\n                />\n              ))}\n            </div>\n            <div className=\"-translate-y-1/2 absolute top-1/2 right-0 flex flex-col gap-0.5 pr-0.5\">\n              {dotIndices.map((i) => (\n                <div className=\"h-1 w-1 rounded-full bg-black/30\" key={i} />\n              ))}\n            </div>\n          </button>\n\n          <div\n            className=\"-right-3.5 absolute top-[calc(50%+14px)] z-30 h-5 w-4 rounded-md\"\n            style={{\n              background:\n                \"linear-gradient(90deg, #7d7870 0%, #918c84 50%, #7d7870 100%)\",\n              boxShadow:\n                \"2px 0 3px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25)\",\n            }}\n          />\n\n          <button\n            className=\"-left-1.5 absolute top-[calc(50%+8px)] z-30 h-20 w-2 cursor-pointer rounded-full transition-all hover:brightness-110 active:brightness-90\"\n            onClick={handleActionButtonClick}\n            style={{\n              background:\n                \"radial-gradient(circle at 35% 35%, #ff8c42 0%, #ff6d0a 45%, #e55d00 100%)\",\n              boxShadow:\n                \"-2px 0 4px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.2)\",\n            }}\n            title=\"Action Button\"\n            type=\"button\"\n          >\n            <div className=\"absolute inset-1.5 rounded-sm border border-white/50\" />\n          </button>\n\n          <div\n            className=\"-top-2 -translate-x-1/2 absolute left-1/2 h-4 w-14 rounded-t-lg\"\n            style={{\n              background:\n                \"linear-gradient(180deg, #b5b0a8 0%, #a39e96 50%, #918c84 100%)\",\n              boxShadow:\n                \"0 -2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.25)\",\n            }}\n          >\n            <div className=\"-translate-x-1/2 absolute bottom-0.5 left-1/2 h-1 w-10 rounded-full bg-black/30\" />\n          </div>\n\n          <div\n            className=\"-bottom-2 -translate-x-1/2 absolute left-1/2 h-4 w-14 rounded-b-lg\"\n            style={{\n              background:\n                \"linear-gradient(0deg, #918c84 0%, #a39e96 50%, #b5b0a8 100%)\",\n              boxShadow:\n                \"0 2px 4px rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.15)\",\n            }}\n          >\n            <div className=\"-translate-x-1/2 absolute top-0.5 left-1/2 h-1 w-10 rounded-full bg-black/30\" />\n          </div>\n\n          <div\n            className=\"absolute inset-3 overflow-hidden rounded-[72px]\"\n            style={{\n              background: \"#1c1c1e\",\n              boxShadow:\n                \"inset 0 0 0 3px rgba(0,0,0,0.6), inset 0 4px 8px rgba(0,0,0,0.6)\",\n            }}\n          >\n            <div\n              className=\"absolute inset-1 overflow-hidden rounded-[68px] transition-colors duration-200\"\n              style={{\n                backgroundColor: actionFlash ? \"#FF6D0A\" : \"#000000\",\n                boxShadow: \"inset 0 0 12px rgba(0,0,0,0.9)\",\n              }}\n            >\n              <div className=\"relative h-full w-full p-3\">\n                <div className=\"absolute top-2 right-0 left-0 z-20 flex items-center justify-center\">\n                  <div className=\"h-1.5 w-1.5 rounded-full bg-[#30D158]\" />\n                </div>\n\n                <div\n                  className=\"absolute inset-8 rounded-full transition-transform duration-300 ease-out\"\n                  style={{ transform: `rotate(${compassRotation}deg)` }}\n                >\n                  {compassIndices.map((i) => {\n                    const degree = i * 10\n                    const isMajor = degree % 30 === 0\n                    const isCardinal = degree % 90 === 0\n                    const tickColor = isCardinal\n                      ? \"#FF6D0A\"\n                      : \"rgba(255,255,255,0.5)\"\n                    const textColor = isCardinal\n                      ? \"#FF6D0A\"\n                      : \"rgba(255,255,255,0.6)\"\n\n                    return (\n                      <div\n                        className=\"absolute top-0 left-1/2 origin-bottom\"\n                        key={i}\n                        style={{\n                          transform: `translateX(-50%) rotate(${degree}deg)`,\n                          height: \"50%\",\n                        }}\n                      >\n                        <div\n                          className=\"-translate-x-1/2 absolute top-0 left-1/2\"\n                          style={{\n                            width: isMajor ? \"2px\" : \"1px\",\n                            height: isMajor ? \"10px\" : \"5px\",\n                            background: tickColor,\n                          }}\n                        />\n                        {isMajor && (\n                          <div\n                            className=\"absolute top-3 left-1/2 font-semibold text-[9px]\"\n                            style={{\n                              color: textColor,\n                              transform: `translateX(-50%) rotate(-${degree + compassRotation}deg)`,\n                            }}\n                          >\n                            {isCardinal ? cardinals[degree / 90] : degree}\n                          </div>\n                        )}\n                      </div>\n                    )\n                  })}\n                </div>\n\n                <div className=\"absolute inset-0 flex flex-col items-center justify-center\">\n                  <LayoutGroup>\n                    <AnimatePresence\n                      initial={false}\n                      mode=\"popLayout\"\n                      onExitComplete={() => {\n                        if (!centerDetailOpen) {\n                          setCenterDetailKey(null)\n                        }\n                      }}\n                    >\n                      {activeDetail ? (\n                        <motion.div\n                          animate={{\n                            opacity: 1,\n                            scale: 1,\n                            filter: \"blur(0px)\",\n                          }}\n                          className=\"flex w-full max-w-[min(220px,72%)] flex-col items-center justify-center px-2\"\n                          exit={{\n                            opacity: 0,\n                            scale: 0.97,\n                            filter: reduceMotion ? \"blur(0px)\" : \"blur(3px)\",\n                          }}\n                          initial={{\n                            opacity: 0,\n                            scale: 0.97,\n                            filter: reduceMotion ? \"blur(0px)\" : \"blur(3px)\",\n                          }}\n                          key=\"center-detail\"\n                          transition={CENTER_CROSSFADE}\n                        >\n                          <div className=\"text-center font-medium text-[#8E8E93] text-[11px] leading-tight tracking-wide\">\n                            {activeDetail.label}\n                          </div>\n                          <motion.div\n                            className=\"mt-1 text-center font-bold text-white leading-none tracking-tight\"\n                            layoutId=\"center-text\"\n                            style={{\n                              fontSize: \"40px\",\n                              fontFamily:\n                                \"system-ui, -apple-system, sans-serif\",\n                            }}\n                            transition={layoutTransition}\n                          >\n                            {activeDetail.value}\n                          </motion.div>\n                          <div className=\"mt-1 text-center font-medium text-[#8E8E93] text-[12px] leading-tight\">\n                            {activeDetail.sublabel}\n                          </div>\n                        </motion.div>\n                      ) : (\n                        <motion.div\n                          animate={{\n                            opacity: 1,\n                            scale: 1,\n                            filter: \"blur(0px)\",\n                          }}\n                          className=\"flex flex-col items-center\"\n                          exit={{\n                            opacity: 0,\n                            scale: 0.97,\n                            filter: reduceMotion ? \"blur(0px)\" : \"blur(3px)\",\n                          }}\n                          initial={{\n                            opacity: 0,\n                            scale: 0.97,\n                            filter: reduceMotion ? \"blur(0px)\" : \"blur(3px)\",\n                          }}\n                          key=\"center-time\"\n                          transition={CENTER_CROSSFADE}\n                        >\n                          <motion.div\n                            className=\"font-bold text-white leading-none tracking-tight\"\n                            layoutId=\"center-text\"\n                            style={{\n                              fontSize: \"48px\",\n                              fontFamily:\n                                \"system-ui, -apple-system, sans-serif\",\n                            }}\n                            transition={layoutTransition}\n                          >\n                            10:09\n                          </motion.div>\n                          <div className=\"mt-1 font-medium text-[#8E8E93] text-[11px] tracking-wide\">\n                            TUESDAY, APR 1\n                          </div>\n                        </motion.div>\n                      )}\n                    </AnimatePresence>\n                  </LayoutGroup>\n                </div>\n\n                <ComplicationItem\n                  ariaLabel={complications.uv.label}\n                  icon={<Sun size={16} strokeWidth={1.5} />}\n                  isActive={centerDetailKey === \"uv\"}\n                  label=\"UV\"\n                  onClick={() => handleComplicationClick(\"uv\")}\n                  position=\"top-left\"\n                  value={complications.uv.value}\n                />\n\n                <ComplicationItem\n                  ariaLabel={complications.temp.label}\n                  icon={<Thermometer size={16} strokeWidth={1.5} />}\n                  isActive={centerDetailKey === \"temp\"}\n                  label=\"\"\n                  onClick={() => handleComplicationClick(\"temp\")}\n                  position=\"top-right\"\n                  value={complications.temp.value + degreeSymbol}\n                />\n\n                <ComplicationItem\n                  ariaLabel={complications.compass.label}\n                  icon={<Compass size={16} strokeWidth={1.5} />}\n                  isActive={centerDetailKey === \"compass\"}\n                  label={complications.compass.sublabel + degreeSymbol}\n                  onClick={() => handleComplicationClick(\"compass\")}\n                  position=\"bottom-left\"\n                  value={complications.compass.value}\n                />\n\n                <ComplicationItem\n                  ariaLabel={complications.altitude.label}\n                  icon={<Mountain size={16} strokeWidth={1.5} />}\n                  isActive={centerDetailKey === \"altitude\"}\n                  label={complications.altitude.sublabel}\n                  onClick={() => handleComplicationClick(\"altitude\")}\n                  position=\"bottom-right\"\n                  value={complications.altitude.value}\n                />\n\n                <div className=\"pointer-events-none absolute inset-0\">\n                  <div className=\"absolute top-1/2 right-[22%] left-[22%] h-px bg-white/15\" />\n                  <div className=\"absolute top-[22%] bottom-[22%] left-1/2 w-px bg-white/15\" />\n                </div>\n\n                <div\n                  className=\"pointer-events-none absolute inset-0 rounded-[40px]\"\n                  style={{\n                    background:\n                      \"linear-gradient(35deg, transparent 0%, transparent 42%, rgba(255,255,255,0.04) 46%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 54%, transparent 58%, transparent 100%)\",\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction ComplicationItem({\n  position,\n  icon,\n  value,\n  label,\n  isActive,\n  onClick,\n  ariaLabel,\n}: {\n  position: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\"\n  icon: React.ReactNode\n  value: string\n  label: string\n  isActive: boolean\n  onClick: () => void\n  ariaLabel: string\n}) {\n  const positions: Record<string, string> = {\n    \"top-left\": \"top-6 left-6\",\n    \"top-right\": \"top-6 right-6\",\n    \"bottom-left\": \"bottom-6 left-6\",\n    \"bottom-right\": \"bottom-6 right-6\",\n  }\n\n  const posClass = positions[position]\n\n  return (\n    <button\n      aria-label={ariaLabel}\n      className={cn(\n        \"absolute z-10 flex cursor-pointer flex-col items-center gap-0.5 transition-transform duration-200 ease-out active:scale-[0.97]\",\n        posClass,\n        isActive ? \"scale-125\" : \"hover:scale-110\"\n      )}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <div className=\"text-[#FF6D0A]\">{icon}</div>\n      <div className=\"font-semibold text-white text-xs leading-none\">\n        {value}\n      </div>\n      {label ? (\n        <div className=\"font-medium text-[#8E8E93] text-[9px] leading-none\">\n          {label}\n        </div>\n      ) : null}\n    </button>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}