{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "now-playing-card",
  "title": "Now playing card",
  "description": "Now playing card is a production-ready cards component from BJORK UI, packaged for shadcn registries.",
  "dependencies": [
    "clsx",
    "framer-motion",
    "lucide-react",
    "next-themes",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/bjork-ui/cards/now-playing-card.tsx",
      "content": "\"use client\";\n\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Heart, Pause, Play, SkipBack, SkipForward, Speaker } from \"lucide-react\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { ease } from \"@/components/bjork-ui/_core/motion\";\nimport {\n  CardFrame,\n  focusRing,\n  useCardTheme,\n  useReducedMotionSafe,\n  type CardTheme,\n} from \"@/components/bjork-ui/cards/card-kit\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface Track {\n  id: string;\n  title: string;\n  artist: string;\n  album?: string;\n  /** Seconds. */\n  duration: number;\n  /** Two colours for the generated cover. */\n  colors?: [string, string];\n  artworkUrl?: string;\n}\n\nexport interface NowPlayingCardProps {\n  tracks?: Track[];\n  defaultIndex?: number;\n  defaultPlaying?: boolean;\n  /** Seconds into the first track. */\n  defaultPosition?: number;\n  /** Output device label, e.g. \"Studio speakers\". Omit to hide the row. */\n  device?: string;\n  onPlayingChange?: (playing: boolean) => void;\n  onTrackChange?: (track: Track, index: number) => void;\n  onSeek?: (seconds: number) => void;\n  onLikeChange?: (trackId: string, liked: boolean) => void;\n  /** Ids of liked tracks at mount. */\n  defaultLiked?: string[];\n  theme?: CardTheme;\n  className?: string;\n}\n\nexport const NOW_PLAYING_SAMPLE: Track[] = [\n  { id: \"t1\", title: \"Low Tide Radio\", artist: \"Marisol Vane\", album: \"Saltwater Hours\", duration: 214, colors: [\"#ec5c13\", \"#3b1d6e\"] },\n  { id: \"t2\", title: \"Glasshouse\", artist: \"The Quiet Engines\", album: \"Glasshouse\", duration: 187, colors: [\"#2f6f5e\", \"#d9c89f\"] },\n  { id: \"t3\", title: \"Northbound, 4 a.m.\", artist: \"Iko Brandt\", album: \"Night Freight\", duration: 246, colors: [\"#24324a\", \"#e86e6e\"] },\n  { id: \"t4\", title: \"Paper Lanterns\", artist: \"Marisol Vane\", album: \"Saltwater Hours\", duration: 198, colors: [\"#f2b544\", \"#7a4b2a\"] },\n];\n\nconst EQ_KEYFRAMES =\n  \"@keyframes bjork-eq { 0%,100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }\";\n\nfunction clock(s: number) {\n  const t = Math.max(0, Math.floor(s));\n  return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, \"0\")}`;\n}\n\n/**\n * A now-playing card: generated cover, scrubbable progress, transport controls, like and the next\n * track. Playback is simulated with a clock; wire the callbacks to your player.\n */\nexport function NowPlayingCard({\n  tracks = NOW_PLAYING_SAMPLE,\n  defaultIndex = 0,\n  defaultPlaying = false,\n  defaultPosition = 0,\n  device = \"Studio speakers\",\n  onPlayingChange,\n  onTrackChange,\n  onSeek,\n  onLikeChange,\n  defaultLiked = [],\n  theme = \"auto\",\n  className,\n}: NowPlayingCardProps) {\n  const { style } = useCardTheme(theme);\n  const reduce = useReducedMotionSafe();\n  const titleId = useId();\n\n  const [index, setIndex] = useState(defaultIndex);\n  const [playing, setPlaying] = useState(defaultPlaying);\n  const [position, setPosition] = useState(defaultPosition);\n  const [liked, setLiked] = useState(() => new Set(defaultLiked));\n  const [direction, setDirection] = useState(1);\n  const [message, setMessage] = useState(\"\");\n  const [dragging, setDragging] = useState(false);\n\n  const track = tracks[index];\n  const next = tracks[(index + 1) % tracks.length];\n\n  const goTo = (i: number, dir: number, announce = true) => {\n    const n = ((i % tracks.length) + tracks.length) % tracks.length;\n    setIndex(n);\n    setPosition(0);\n    setDirection(dir);\n    onTrackChange?.(tracks[n], n);\n    if (announce) setMessage(`Now playing ${tracks[n].title} by ${tracks[n].artist}`);\n  };\n\n  // Simulated playback clock. Paused while scrubbing.\n  const indexRef = useRef(index);\n  useEffect(() => {\n    indexRef.current = index;\n  }, [index]);\n  useEffect(() => {\n    if (!playing || dragging || !track) return;\n    let last = performance.now();\n    const id = window.setInterval(() => {\n      const now = performance.now();\n      const dt = (now - last) / 1000;\n      last = now;\n      setPosition((p) => p + dt);\n    }, 250);\n    return () => window.clearInterval(id);\n  }, [playing, dragging, track]);\n\n  // Roll over to the next track at the end.\n  useEffect(() => {\n    if (track && position >= track.duration) {\n      const n = (indexRef.current + 1) % tracks.length;\n      const id = requestAnimationFrame(() => {\n        setIndex(n);\n        setPosition(0);\n        setDirection(1);\n        onTrackChange?.(tracks[n], n);\n        setMessage(`Now playing ${tracks[n].title} by ${tracks[n].artist}`);\n      });\n      return () => cancelAnimationFrame(id);\n    }\n  }, [position, track, tracks, onTrackChange]);\n\n  if (!track) {\n    return (\n      <CardFrame aria-label=\"Nothing playing\" className={className} style={style}>\n        <div className=\"flex items-center gap-4 p-5\">\n          <span className=\"grid size-16 place-items-center rounded-[12px] border border-dashed border-[color:var(--bjork-border-strong)] text-[color:var(--bjork-text-soft)]\">\n            <Play aria-hidden=\"true\" className=\"size-5\" />\n          </span>\n          <div>\n            <p className=\"text-[14px] font-medium\">Nothing playing</p>\n            <p className=\"text-[12px] text-[color:var(--bjork-text-muted)]\">Pick something to start a session.</p>\n          </div>\n        </div>\n      </CardFrame>\n    );\n  }\n\n  const togglePlay = () => {\n    setPlaying(!playing);\n    onPlayingChange?.(!playing);\n  };\n\n  const seek = (s: number) => {\n    const v = Math.max(0, Math.min(track.duration - 0.5, s));\n    setPosition(v);\n    onSeek?.(v);\n  };\n\n  const prev = () => {\n    if (position > 3) seek(0);\n    else goTo(index - 1, -1);\n  };\n\n  const isLiked = liked.has(track.id);\n  const toggleLike = () => {\n    const n = new Set(liked);\n    if (isLiked) n.delete(track.id);\n    else n.add(track.id);\n    setLiked(n);\n    onLikeChange?.(track.id, !isLiked);\n  };\n\n  const pct = Math.min(1, position / track.duration);\n\n  const seekFromPointer = (e: ReactPointerEvent<HTMLDivElement>) => {\n    const r = e.currentTarget.getBoundingClientRect();\n    seek(((e.clientX - r.left) / r.width) * track.duration);\n  };\n\n  const onSliderKey = (e: ReactKeyboardEvent) => {\n    const map: Record<string, number> = {\n      ArrowRight: position + 5,\n      ArrowUp: position + 5,\n      ArrowLeft: position - 5,\n      ArrowDown: position - 5,\n      PageUp: position + 30,\n      PageDown: position - 30,\n      Home: 0,\n      End: track.duration - 1,\n    };\n    if (e.key in map) {\n      e.preventDefault();\n      seek(map[e.key]);\n    }\n  };\n\n  const iconBtn = cn(\n    \"grid size-9 cursor-pointer place-items-center rounded-full text-[color:var(--bjork-text-medium)] transition-[color,background-color,transform] duration-150 hover:bg-[color:var(--bjork-card-hover)] hover:text-[color:var(--bjork-text)] active:scale-[0.92] motion-reduce:transition-none motion-reduce:active:scale-100\",\n    focusRing,\n  );\n\n  return (\n    <CardFrame aria-labelledby={titleId} aria-roledescription=\"media player\" className={className} style={style} maxWidth={380}>\n      <style href=\"bjork-now-playing-eq\" precedence=\"default\">\n        {EQ_KEYFRAMES}\n      </style>\n      <div className=\"flex items-center gap-4 p-5 pb-4\">\n        <div className=\"relative size-[72px] shrink-0 overflow-hidden rounded-[12px] shadow-[0_10px_24px_-12px_rgba(0,0,0,0.6)]\">\n          <AnimatePresence initial={false} custom={direction}>\n            <motion.div\n              key={track.id}\n              className=\"absolute inset-0\"\n              custom={direction}\n              initial={reduce ? { opacity: 0 } : { opacity: 0, x: direction * 24, scale: 0.92 }}\n              animate={{ opacity: 1, x: 0, scale: 1 }}\n              exit={reduce ? { opacity: 0 } : { opacity: 0, x: direction * -24, scale: 0.92 }}\n              transition={{ duration: 0.32, ease: ease.out }}\n            >\n              <Cover track={track} />\n            </motion.div>\n          </AnimatePresence>\n        </div>\n        <div className=\"min-w-0 flex-1\">\n          <AnimatePresence initial={false} mode=\"popLayout\">\n            <motion.div\n              key={track.id}\n              initial={{ opacity: 0, y: reduce ? 0 : 6 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: reduce ? 0 : -6 }}\n              transition={{ duration: 0.22, ease: ease.out }}\n            >\n              <h3 id={titleId} className=\"truncate text-[15px] font-semibold leading-5\">\n                {track.title}\n              </h3>\n              <p className=\"truncate text-[13px] leading-5 text-[color:var(--bjork-text-medium)]\">{track.artist}</p>\n              {track.album && (\n                <p className=\"truncate text-[12px] leading-4 text-[color:var(--bjork-text-muted)]\">{track.album}</p>\n              )}\n            </motion.div>\n          </AnimatePresence>\n        </div>\n        <button\n          type=\"button\"\n          aria-pressed={isLiked}\n          aria-label={isLiked ? `Remove ${track.title} from liked songs` : `Like ${track.title}`}\n          onClick={toggleLike}\n          className={cn(iconBtn, \"self-start\", isLiked && \"text-[color:var(--bjork-accent)] hover:text-[color:var(--bjork-accent)]\")}\n        >\n          <motion.span\n            key={String(isLiked)}\n            initial={reduce || !isLiked ? false : { scale: 0.6 }}\n            animate={{ scale: 1 }}\n            transition={{ type: \"spring\", stiffness: 500, damping: 14 }}\n            className=\"grid place-items-center\"\n          >\n            <Heart aria-hidden=\"true\" className=\"size-[18px]\" fill={isLiked ? \"currentColor\" : \"none\"} />\n          </motion.span>\n        </button>\n      </div>\n\n      {/* Scrubber */}\n      <div className=\"px-5\">\n        <div\n          role=\"slider\"\n          tabIndex={0}\n          aria-label=\"Seek\"\n          aria-valuemin={0}\n          aria-valuemax={Math.round(track.duration)}\n          aria-valuenow={Math.round(position)}\n          aria-valuetext={`${clock(position)} of ${clock(track.duration)}`}\n          onKeyDown={onSliderKey}\n          onPointerDown={(e) => {\n            e.currentTarget.setPointerCapture(e.pointerId);\n            setDragging(true);\n            seekFromPointer(e);\n          }}\n          onPointerMove={(e) => dragging && seekFromPointer(e)}\n          onPointerUp={() => setDragging(false)}\n          onPointerCancel={() => setDragging(false)}\n          className={cn(\"group relative flex h-5 cursor-pointer touch-none items-center rounded-full\", focusRing)}\n        >\n          <span className=\"relative h-1 w-full overflow-hidden rounded-full bg-[color:var(--bjork-track)] transition-[height] duration-150 group-hover:h-1.5 motion-reduce:transition-none\">\n            <span\n              className=\"absolute inset-y-0 left-0 rounded-full bg-[color:var(--bjork-text)]\"\n              style={{ width: `${pct * 100}%` }}\n            />\n          </span>\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              \"absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[color:var(--bjork-text)] shadow-[0_1px_3px_rgba(0,0,0,0.4)] transition-[opacity,transform] duration-150 motion-reduce:transition-none\",\n              dragging ? \"scale-100\" : \"scale-90 opacity-0 group-hover:scale-100 group-hover:opacity-100 group-focus-visible:scale-100 group-focus-visible:opacity-100\",\n            )}\n            style={{ left: `${pct * 100}%` }}\n          />\n        </div>\n        <div className=\"mt-0.5 flex justify-between text-[11px] leading-4 text-[color:var(--bjork-text-muted)]\">\n          <span>{clock(position)}</span>\n          <span>-{clock(track.duration - position)}</span>\n        </div>\n      </div>\n\n      {/* Transport */}\n      <div className=\"flex items-center justify-center gap-3 px-5 pb-4 pt-2\">\n        <button type=\"button\" aria-label=\"Previous track\" onClick={prev} className={iconBtn}>\n          <SkipBack aria-hidden=\"true\" className=\"size-[18px]\" fill=\"currentColor\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label={playing ? \"Pause\" : \"Play\"}\n          onClick={togglePlay}\n          className={cn(\n            \"grid size-12 cursor-pointer place-items-center rounded-full bg-[color:var(--bjork-text)] text-[color:var(--bjork-card)] shadow-[0_8px_18px_-10px_rgba(0,0,0,0.6)] transition-transform duration-150 active:scale-[0.94] motion-reduce:transition-none motion-reduce:active:scale-100\",\n            focusRing,\n          )}\n        >\n          {playing ? (\n            <Pause aria-hidden=\"true\" className=\"size-5\" fill=\"currentColor\" />\n          ) : (\n            <Play aria-hidden=\"true\" className=\"ml-0.5 size-5\" fill=\"currentColor\" />\n          )}\n        </button>\n        <button type=\"button\" aria-label=\"Next track\" onClick={() => goTo(index + 1, 1)} className={iconBtn}>\n          <SkipForward aria-hidden=\"true\" className=\"size-[18px]\" fill=\"currentColor\" />\n        </button>\n      </div>\n\n      <div className=\"flex items-center gap-3 border-t border-[color:var(--bjork-border)] px-5 py-3 text-[12px] leading-4\">\n        {device && (\n          <span className=\"flex min-w-0 items-center gap-1.5 text-[color:var(--bjork-text-medium)]\">\n            <Equalizer playing={playing} reduce={reduce} />\n            <Speaker aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n            <span className=\"truncate\">{device}</span>\n          </span>\n        )}\n        {next && tracks.length > 1 && (\n          <button\n            type=\"button\"\n            onClick={() => goTo(index + 1, 1)}\n            className={cn(\n              \"ml-auto flex min-w-0 cursor-pointer items-center gap-2 rounded-[6px] text-right text-[color:var(--bjork-text-muted)] transition-colors hover:text-[color:var(--bjork-text)]\",\n              focusRing,\n            )}\n          >\n            <span className=\"truncate\">\n              Next: <span className=\"text-[color:var(--bjork-text-medium)]\">{next.title}</span>\n            </span>\n            <span aria-hidden=\"true\" className=\"size-5 shrink-0 overflow-hidden rounded-[4px]\">\n              <Cover track={next} />\n            </span>\n          </button>\n        )}\n      </div>\n      <LiveRegion message={message} />\n    </CardFrame>\n  );\n}\n\nfunction Cover({ track }: { track: Track }) {\n  if (track.artworkUrl) {\n    // eslint-disable-next-line @next/next/no-img-element\n    return <img src={track.artworkUrl} alt=\"\" className=\"size-full object-cover\" />;\n  }\n  const [a, b] = track.colors ?? [\"#ec5c13\", \"#1b1b1b\"];\n  return (\n    <span\n      aria-hidden=\"true\"\n      className=\"block size-full\"\n      style={{\n        background: `radial-gradient(circle at 30% 75%, ${a} 0 18%, transparent 19%), radial-gradient(circle at 30% 75%, transparent 0 30%, color-mix(in oklab, ${a} 60%, transparent) 31% 33%, transparent 34%), linear-gradient(150deg, ${b}, color-mix(in oklab, ${b} 55%, black))`,\n      }}\n    />\n  );\n}\n\nfunction Equalizer({ playing, reduce }: { playing: boolean; reduce: boolean }) {\n  const heights = [0.6, 1, 0.45, 0.8];\n  return (\n    <span aria-hidden=\"true\" className=\"flex h-3 items-end gap-[2px]\">\n      {heights.map((h, i) => (\n        <span\n          key={i}\n          className=\"w-[2px] origin-bottom rounded-full bg-[color:var(--bjork-accent)]\"\n          style={{\n            height: \"100%\",\n            transform: `scaleY(${playing ? h : 0.25})`,\n            animation: playing && !reduce ? `bjork-eq ${0.7 + i * 0.13}s ease-in-out ${i * -0.2}s infinite` : \"none\",\n          }}\n        />\n      ))}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/cards/now-playing-card.tsx"
    },
    {
      "path": "components/bjork-ui/_core/a11y.tsx",
      "content": "import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n  return <span className=\"sr-only\">{children}</span>;\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n  message,\n  politeness = \"polite\",\n}: {\n  message: string;\n  politeness?: \"polite\" | \"assertive\";\n}) {\n  return (\n    <span role=\"status\" aria-live={politeness} aria-atomic=\"true\" className=\"sr-only\">\n      {message}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/a11y.tsx"
    },
    {
      "path": "components/bjork-ui/_core/motion.ts",
      "content": "// Shared springs, easings and durations. Components import these instead of inventing values.\n\nexport const springs = {\n  press: { type: \"spring\", stiffness: 500, damping: 30, mass: 0.6 },\n  snappy: { type: \"spring\", stiffness: 400, damping: 25, mass: 1 },\n  standard: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n  soft: { type: \"spring\", stiffness: 200, damping: 25, mass: 1.2 },\n  settle: { type: \"spring\", stiffness: 380, damping: 30, mass: 0.8 },\n  blurIn: { type: \"spring\", stiffness: 400, damping: 28, mass: 0.6 },\n} as const;\n\nexport const ease = {\n  out: [0.23, 1, 0.32, 1],\n  inOut: [0.77, 0, 0.175, 1],\n  drawer: [0.32, 0.72, 0, 1],\n} as const;\n\nexport const easeCss = {\n  out: \"cubic-bezier(0.23,1,0.32,1)\",\n  inOut: \"cubic-bezier(0.77,0,0.175,1)\",\n  drawer: \"cubic-bezier(0.32,0.72,0,1)\",\n} as const;\n\nexport const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms\n\n// Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1].\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {\n  const cx = 3 * x1;\n  const bx = 3 * (x2 - x1) - cx;\n  const ax = 1 - cx - bx;\n  const cy = 3 * y1;\n  const by = 3 * (y2 - y1) - cy;\n  const ay = 1 - cy - by;\n  const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s;\n  const sampleY = (s: number) => ((ay * s + by) * s + cy) * s;\n  const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx;\n\n  const solveX = (x: number) => {\n    let s = x;\n    for (let i = 0; i < 8; i++) {\n      const err = sampleX(s) - x;\n      if (Math.abs(err) < 1e-6) return s;\n      const d = sampleDX(s);\n      if (Math.abs(d) < 1e-6) break;\n      s -= err / d;\n    }\n    let lo = 0;\n    let hi = 1;\n    s = x;\n    while (lo < hi) {\n      const v = sampleX(s);\n      if (Math.abs(v - x) < 1e-6) return s;\n      if (x > v) lo = s;\n      else hi = s;\n      s = (lo + hi) / 2;\n      if (hi - lo < 1e-7) break;\n    }\n    return s;\n  };\n\n  return (t: number) => {\n    if (t <= 0) return 0;\n    if (t >= 1) return 1;\n    return sampleY(solveX(t));\n  };\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/motion.ts"
    },
    {
      "path": "components/bjork-ui/cards/card-kit.tsx",
      "content": "\"use client\";\n\nimport {\n  forwardRef,\n  useSyncExternalStore,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport type { BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { surfaceVars } from \"@/components/bjork-ui/_core/surface\";\nimport { useBjorkTone } from \"@/components/bjork-ui/_core/tone\";\nimport { cn } from \"@/lib/utils\";\n\n/** \"auto\" follows the site theme (next-themes). \"light\" and \"dark\" pin the card. */\nexport type CardTheme = \"light\" | \"dark\" | \"auto\";\n\n/**\n * Card tokens. They are written onto the card root as the library's `--bjork-*` custom properties,\n * so a pinned theme wins over the page theme, and the status colours the global sheet lacks\n * (success, warning, error) are always defined.\n */\nexport const CARD_TOKENS = {\n  dark: {\n    card: \"#141414\",\n    raised: \"#1b1b1b\",\n    inset: \"#0d0d0d\",\n    hover: \"#1f1f1f\",\n    border: \"#242424\",\n    borderStrong: \"#363636\",\n    hair: \"rgba(237,237,237,0.08)\",\n    text: \"#ededed\",\n    textMedium: \"rgba(237,237,237,0.74)\",\n    textMuted: \"rgba(237,237,237,0.56)\",\n    textSoft: \"rgba(237,237,237,0.4)\",\n    textFaint: \"rgba(237,237,237,0.22)\",\n    accent: \"#ec5c13\",\n    accentInk: \"#f27a3c\",\n    accentFill: \"#b84a12\",\n    accentFillHover: \"#c95517\",\n    accentFg: \"#fff2ea\",\n    accentSoft: \"rgba(236,92,19,0.13)\",\n    accentMuted: \"rgba(236,92,19,0.26)\",\n    success: \"#4cc38a\",\n    successSoft: \"rgba(76,195,138,0.13)\",\n    warning: \"#f2b544\",\n    warningSoft: \"rgba(242,181,68,0.13)\",\n    error: \"#ff6b5c\",\n    errorSoft: \"rgba(255,107,92,0.13)\",\n    track: \"#262626\",\n    shadow:\n      \"inset 0 1px 0 rgba(255,255,255,0.045), 0 1px 0 rgba(0,0,0,0.5), 0 24px 48px -28px rgba(0,0,0,0.9)\",\n    raisedShadow: \"inset 0 1px 0 rgba(255,255,255,0.04)\",\n  },\n  light: {\n    card: \"#fffcf6\",\n    raised: \"#f7f1e6\",\n    inset: \"#f1eadd\",\n    hover: \"#f3ecdf\",\n    border: \"#ebe2d4\",\n    borderStrong: \"#dbcfbd\",\n    hair: \"rgba(23,23,23,0.07)\",\n    text: \"#171717\",\n    textMedium: \"rgba(23,23,23,0.76)\",\n    textMuted: \"rgba(23,23,23,0.62)\",\n    textSoft: \"rgba(23,23,23,0.46)\",\n    textFaint: \"rgba(23,23,23,0.2)\",\n    accent: \"#ec7d43\",\n    accentInk: \"#a84a19\",\n    accentFill: \"#ec7d43\",\n    accentFillHover: \"#f0935f\",\n    accentFg: \"#3f2112\",\n    accentSoft: \"rgba(236,125,67,0.12)\",\n    accentMuted: \"rgba(236,125,67,0.24)\",\n    success: \"#1b7f4d\",\n    successSoft: \"rgba(31,138,85,0.11)\",\n    warning: \"#966000\",\n    warningSoft: \"rgba(168,107,0,0.11)\",\n    error: \"#c0331d\",\n    errorSoft: \"rgba(200,54,31,0.1)\",\n    track: \"#ebe3d6\",\n    shadow:\n      \"inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(66,52,33,0.06), 0 22px 44px -28px rgba(66,52,33,0.26)\",\n    raisedShadow: \"inset 0 1px 0 rgba(255,255,255,0.7)\",\n  },\n} as const;\n\nexport type CardTokens = (typeof CARD_TOKENS)[BjorkTone];\n\nexport function cardVars(tone: BjorkTone): CSSProperties {\n  const t = CARD_TOKENS[tone];\n  return {\n    colorScheme: tone,\n    ...surfaceVars(tone),\n    \"--bjork-card\": t.card,\n    \"--bjork-card-raised\": t.raised,\n    \"--bjork-card-inset\": t.inset,\n    \"--bjork-card-hover\": t.hover,\n    \"--bjork-border\": t.border,\n    \"--bjork-border-strong\": t.borderStrong,\n    \"--bjork-hair\": t.hair,\n    \"--bjork-text\": t.text,\n    \"--bjork-text-medium\": t.textMedium,\n    \"--bjork-text-muted\": t.textMuted,\n    \"--bjork-text-soft\": t.textSoft,\n    \"--bjork-text-faint\": t.textFaint,\n    \"--bjork-accent\": t.accent,\n    \"--bjork-accent-ink\": t.accentInk,\n    \"--bjork-accent-fill\": t.accentFill,\n    \"--bjork-accent-fill-hover\": t.accentFillHover,\n    \"--bjork-accent-foreground\": t.accentFg,\n    \"--bjork-accent-soft\": t.accentSoft,\n    \"--bjork-accent-muted\": t.accentMuted,\n    \"--bjork-success\": t.success,\n    \"--bjork-success-soft\": t.successSoft,\n    \"--bjork-warning\": t.warning,\n    \"--bjork-warning-soft\": t.warningSoft,\n    \"--bjork-error\": t.error,\n    \"--bjork-error-soft\": t.errorSoft,\n    \"--bjork-track\": t.track,\n    \"--bjork-card-shadow\": t.shadow,\n    \"--bjork-raised-shadow\": t.raisedShadow,\n    \"--bjork-ring-offset\": t.card,\n  } as CSSProperties;\n}\n\n/** Resolves the card tone and the CSS variables for it. */\nexport function useCardTheme(theme: CardTheme = \"auto\") {\n  const tone = useBjorkTone(theme === \"auto\" ? undefined : theme);\n  return { tone, tokens: CARD_TOKENS[tone], style: cardVars(tone) };\n}\n\nconst noopSubscribe = () => () => {};\n\n/** True after hydration. The server render and the first client render both see false. */\nexport function useHydrated() {\n  return useSyncExternalStore(\n    noopSubscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/** Reduced-motion preference, hydration-safe: false until mounted. */\nexport function useReducedMotionSafe() {\n  const hydrated = useHydrated();\n  const reduced = useReducedMotion();\n  return hydrated && reduced === true;\n}\n\nconst clockStores = new Map<number, { subscribe: (cb: () => void) => () => void; get: () => number }>();\n\nfunction clockStore(stepMs: number) {\n  let store = clockStores.get(stepMs);\n  if (!store) {\n    store = {\n      subscribe: (cb) => {\n        const id = window.setInterval(cb, Math.min(stepMs, 1000));\n        return () => window.clearInterval(id);\n      },\n      get: () => Math.floor(Date.now() / stepMs) * stepMs,\n    };\n    clockStores.set(stepMs, store);\n  }\n  return store;\n}\n\n/**\n * Wall clock rounded to `stepMs`. A fixed `now` (previews, tests) wins. Returns null during SSR and\n * hydration so server and client text agree; callers render a neutral fallback for that frame.\n */\nexport function useClock(now: number | undefined, stepMs = 60_000): number | null {\n  const store = clockStore(stepMs);\n  const live = useSyncExternalStore(store.subscribe, store.get, () => null);\n  return now ?? live;\n}\n\nexport const focusRing =\n  \"outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]\";\n\nexport interface CardFrameProps extends HTMLAttributes<HTMLElement> {\n  style?: CSSProperties;\n  /** Width in px, capped at the container width. Default 420. */\n  maxWidth?: number;\n  as?: \"section\" | \"article\" | \"div\";\n}\n\n/** The shared card surface: tokens, radius, border, shadow and a container query root. */\nexport const CardFrame = forwardRef<HTMLElement, CardFrameProps>(function CardFrame(\n  { as: Tag = \"section\", maxWidth = 420, className, style, children, ...rest },\n  ref,\n) {\n  return (\n    <Tag\n      ref={ref as never}\n      className={cn(\n        \"@container relative max-w-full overflow-hidden rounded-[20px] border border-[color:var(--bjork-border-muted)] bg-[color:var(--bjork-card)] font-bjork-alpha text-[color:var(--bjork-text)] shadow-[var(--bjork-shadow-surface)] [font-variant-numeric:tabular-nums]\",\n        className,\n      )}\n      // A fixed width capped at the container: fills narrow columns, and keeps its size inside\n      // shrink-to-fit parents (flex centring, popovers) where a percentage width would collapse.\n      style={{ width: maxWidth, ...style }}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n});\n\ntype ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\n\nexport interface CardButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: \"sm\" | \"md\";\n  icon?: ReactNode;\n}\n\nconst buttonVariants: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-[color:var(--bjork-accent-fill)] text-[color:var(--bjork-accent-foreground)] hover:bg-[color:var(--bjork-accent-fill-hover)] shadow-[inset_0_1px_0_rgba(255,255,255,0.16)]\",\n  secondary:\n    \"border border-[color:var(--bjork-border)] bg-[color:var(--bjork-card-raised)] text-[color:var(--bjork-text)] shadow-[var(--bjork-raised-shadow)] hover:bg-[color:var(--bjork-card-hover)] hover:border-[color:var(--bjork-border-strong)]\",\n  ghost:\n    \"text-[color:var(--bjork-text-medium)] hover:bg-[color:var(--bjork-card-hover)] hover:text-[color:var(--bjork-text)]\",\n  danger:\n    \"border border-[color:var(--bjork-border)] bg-[color:var(--bjork-error-soft)] text-[color:var(--bjork-error)] hover:border-[color:var(--bjork-error)]\",\n};\n\nexport const CardButton = forwardRef<HTMLButtonElement, CardButtonProps>(function CardButton(\n  { variant = \"secondary\", size = \"md\", icon, className, children, type = \"button\", ...rest },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cn(\n        \"inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[10px] font-medium transition-[background-color,border-color,color,transform,opacity] duration-150 ease-out active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-45 disabled:active:scale-100 motion-reduce:transition-none motion-reduce:active:scale-100\",\n        size === \"sm\" ? \"h-8 px-2.5 text-[12px]\" : \"h-9 px-3.5 text-[13px]\",\n        buttonVariants[variant],\n        focusRing,\n        className,\n      )}\n      {...rest}\n    >\n      {icon}\n      {children}\n    </button>\n  );\n});\n\nexport type PillTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"error\";\n\nconst pillTones: Record<PillTone, string> = {\n  neutral: \"bg-[color:var(--bjork-hair)] text-[color:var(--bjork-text-medium)]\",\n  accent: \"bg-[color:var(--bjork-accent-soft)] text-[color:var(--bjork-accent-ink)]\",\n  success: \"bg-[color:var(--bjork-success-soft)] text-[color:var(--bjork-success)]\",\n  warning: \"bg-[color:var(--bjork-warning-soft)] text-[color:var(--bjork-warning)]\",\n  error: \"bg-[color:var(--bjork-error-soft)] text-[color:var(--bjork-error)]\",\n};\n\n/** Small status label. `dot` adds a leading status dot; `pulse` animates it (not under reduced motion). */\nexport function Pill({\n  tone = \"neutral\",\n  dot = false,\n  pulse = false,\n  className,\n  children,\n}: {\n  tone?: PillTone;\n  dot?: boolean;\n  pulse?: boolean;\n  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex h-[22px] shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-2 text-[11px] font-medium leading-none\",\n        pillTones[tone],\n        className,\n      )}\n    >\n      {dot && (\n        <span aria-hidden=\"true\" className=\"relative inline-flex size-1.5\">\n          {pulse && (\n            <span className=\"absolute inset-0 rounded-full bg-current opacity-60 motion-safe:animate-ping\" />\n          )}\n          <span className=\"relative inline-flex size-1.5 rounded-full bg-current\" />\n        </span>\n      )}\n      {children}\n    </span>\n  );\n}\n\n/** Loading placeholder. Shimmers unless reduced motion is on. */\nexport function Skeleton({ className, style }: { className?: string; style?: CSSProperties }) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\"block rounded-[6px] bg-[color:var(--bjork-hair)] motion-safe:animate-pulse\", className)}\n      style={style}\n    />\n  );\n}\n\n/** Deterministic pseudo-random generator for sample data, so server and client agree. */\nexport function seeded(seed: number) {\n  let s = seed >>> 0 || 1;\n  return () => {\n    s ^= s << 13;\n    s ^= s >>> 17;\n    s ^= s << 5;\n    return ((s >>> 0) % 100_000) / 100_000;\n  };\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/cards/card-kit.tsx"
    },
    {
      "path": "components/bjork-ui/_core/palette.ts",
      "content": "export type BjorkTone = \"dark\" | \"light\";\n\n// Canvas, WebGL and SVG attribute colours. DOM code uses the CSS tokens with these as fallbacks.\nexport const BJORK_PALETTE = {\n  dark: {\n    bg: \"#050505\", stage: \"#111111\", surface: \"#121212\", raised: \"#161616\", active: \"#202020\",\n    border: \"#232323\", borderStrong: \"#343434\",\n    text: \"#ededed\", textMedium: \"rgba(237,237,237,0.72)\", textMuted: \"rgba(237,237,237,0.6)\",\n    textSoft: \"rgba(237,237,237,0.5)\", textFaint: \"rgba(237,237,237,0.22)\", hair: \"rgba(237,237,237,0.12)\",\n    accent: \"#ec5c13\", accentInk: \"#ec5c13\", accentFill: \"#b84a12\", accentSoft: \"rgba(236,92,19,0.12)\", accentMuted: \"rgba(236,92,19,0.24)\",\n    accentFg: \"#fff2ea\", success: \"#4cc38a\", warning: \"#f2b544\", error: \"#ff5c4d\",\n  },\n  light: {\n    bg: \"#f7f5ef\", stage: \"#f7f5ef\", surface: \"#fffcf6\", raised: \"#f5efe3\", active: \"#efe7d8\",\n    border: \"#eee6db\", borderStrong: \"#e1d7c8\",\n    text: \"#171717\", textMedium: \"rgba(23,23,23,0.78)\", textMuted: \"rgba(23,23,23,0.68)\",\n    textSoft: \"rgba(23,23,23,0.62)\", textFaint: \"rgba(23,23,23,0.22)\", hair: \"rgba(23,23,23,0.10)\",\n    accent: \"#ec7d43\", accentInk: \"#b4531f\", accentFill: \"#ec7d43\", accentSoft: \"rgba(236,125,67,0.10)\", accentMuted: \"rgba(236,125,67,0.20)\",\n    accentFg: \"#3f2112\", success: \"#1f8a55\", warning: \"#a86b00\", error: \"#c8361f\",\n  },\n} as const;\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/palette.ts"
    },
    {
      "path": "components/bjork-ui/_core/surface.ts",
      "content": "import type { CSSProperties } from \"react\";\nimport type { BjorkTone } from \"./palette\";\n\n// The library surface (CANON.md §1). Values mirror app/globals.css :root and .dark. Change both together.\nexport const BJORK_SURFACE = {\n  light: {\n    surface: \"#fffcf6\", surfaceMuted: \"rgba(250, 246, 237, 0.94)\", surfaceHover: \"#f5efe3\", surfaceActive: \"#efe7d8\",\n    panel: \"#f8f2e7\", menu: \"rgba(255, 252, 246, 0.98)\", field: \"rgba(255, 252, 246, 0.96)\",\n    fieldMuted: \"rgba(248, 242, 231, 0.82)\", fieldInset: \"rgba(239, 231, 216, 0.72)\",\n    border: \"#eee6db\", borderMuted: \"#f5ede2\", borderStrong: \"#e1d7c8\",\n    shadowSurface: \"inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)\",\n    shadowSoft: \"inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)\",\n    shadowPanel: \"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)\",\n    shadowMenu: \"inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)\",\n    shadowInset: \"inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)\",\n  },\n  dark: {\n    surface: \"#121212\", surfaceMuted: \"rgba(22, 22, 22, 0.92)\", surfaceHover: \"#161616\", surfaceActive: \"#202020\",\n    panel: \"#0d0d0d\", menu: \"rgba(18, 18, 18, 0.98)\", field: \"rgba(18, 18, 18, 0.95)\",\n    fieldMuted: \"rgba(18, 18, 18, 0.55)\", fieldInset: \"rgba(9, 9, 9, 0.75)\",\n    border: \"#232323\", borderMuted: \"#1c1c1c\", borderStrong: \"#343434\",\n    shadowSurface: \"inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)\",\n    shadowSoft: \"inset 0 1px 0 rgba(255, 255, 255, 0.045)\",\n    shadowPanel: \"inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)\",\n    shadowMenu: \"inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)\",\n    shadowInset: \"inset 0 1px 10px rgba(0, 0, 0, 0.45)\",\n  },\n} as const;\n\n/** Writes the surface tokens for a pinned tone as --bjork-* custom properties. Spread first; kit-specific keys may override. */\nexport function surfaceVars(tone: BjorkTone): CSSProperties {\n  const s = BJORK_SURFACE[tone];\n  return {\n    \"--bjork-surface\": s.surface, \"--bjork-surface-muted\": s.surfaceMuted, \"--bjork-surface-hover\": s.surfaceHover,\n    \"--bjork-surface-active\": s.surfaceActive, \"--bjork-panel\": s.panel, \"--bjork-menu\": s.menu, \"--bjork-field\": s.field,\n    \"--bjork-field-muted\": s.fieldMuted, \"--bjork-field-inset\": s.fieldInset, \"--bjork-border\": s.border,\n    \"--bjork-border-muted\": s.borderMuted, \"--bjork-border-strong\": s.borderStrong,\n    \"--bjork-shadow-surface\": s.shadowSurface, \"--bjork-shadow-soft\": s.shadowSoft, \"--bjork-shadow-panel\": s.shadowPanel,\n    \"--bjork-shadow-menu\": s.shadowMenu, \"--bjork-shadow-inset\": s.shadowInset,\n  } as CSSProperties;\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/surface.ts"
    },
    {
      "path": "components/bjork-ui/_core/tone.ts",
      "content": "\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\nimport { useTheme } from \"next-themes\";\nimport type { BjorkTone } from \"./palette\";\n\nconst subscribeNoop = () => () => {};\nconst getMounted = () => true;\nconst getServerMounted = () => false;\n\n/**\n * Resolves the tone for a component. An explicit `tone` always wins.\n * Otherwise it follows next-themes' resolved theme, but only after mount,\n * so the server render and first client render agree on dark.\n */\nexport function useBjorkTone(tone?: BjorkTone): BjorkTone {\n  const { resolvedTheme } = useTheme();\n  const mounted = useSyncExternalStore(subscribeNoop, getMounted, getServerMounted);\n  if (tone) return tone;\n  if (!mounted) return \"dark\";\n  return resolvedTheme === \"light\" ? \"light\" : \"dark\";\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/tone.ts"
    },
    {
      "path": "lib/utils.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": "@lib/utils.ts"
    }
  ],
  "cssVars": {
    "light": {
      "bjork-bg": "#f7f3ea",
      "bjork-surface": "#fffcf6",
      "bjork-surface-muted": "rgba(250, 246, 237, 0.94)",
      "bjork-surface-hover": "#f5efe3",
      "bjork-surface-active": "#efe7d8",
      "bjork-panel": "#f8f2e7",
      "bjork-menu": "rgba(255, 252, 246, 0.98)",
      "bjork-field": "rgba(255, 252, 246, 0.96)",
      "bjork-field-muted": "rgba(248, 242, 231, 0.82)",
      "bjork-field-inset": "rgba(239, 231, 216, 0.72)",
      "bjork-error-bg": "#fff0e8",
      "bjork-text": "#171717",
      "bjork-text-strong": "rgba(23, 23, 23, 0.9)",
      "bjork-text-medium": "rgba(23, 23, 23, 0.78)",
      "bjork-text-muted": "rgba(23, 23, 23, 0.68)",
      "bjork-text-soft": "rgba(23, 23, 23, 0.62)",
      "bjork-text-faint": "rgba(23, 23, 23, 0.22)",
      "bjork-inverted-text": "#fff8f0",
      "bjork-border": "#eee6db",
      "bjork-border-muted": "#f5ede2",
      "bjork-border-strong": "#e1d7c8",
      "bjork-thumb": "#a49b8e",
      "bjork-track": "#ded6ca",
      "bjork-accent": "#ec7d43",
      "bjork-accent-hover": "#f0935f",
      "bjork-accent-soft": "rgba(236, 125, 67, 0.1)",
      "bjork-accent-muted": "rgba(236, 125, 67, 0.2)",
      "bjork-accent-badge": "rgba(236, 125, 67, 0.16)",
      "bjork-accent-badge-foreground": "#8d421d",
      "bjork-accent-foreground": "#3f2112",
      "bjork-accent-fill": "#ec7d43",
      "bjork-accent-fill-hover": "#f0935f",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.92), inset 1px 0 0 rgba(88, 72, 49, 0.026), inset -1px 0 0 rgba(255, 255, 255, 0.68), 0 14px 22px -9px rgba(66, 52, 33, 0.11)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(88, 72, 49, 0.045), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.86)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.64), 0 18px 38px -30px rgba(66, 52, 33, 0.2)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(88, 72, 49, 0.04), inset 0 12px 24px rgba(88, 72, 49, 0.022), inset 1px 0 0 rgba(88, 72, 49, 0.024), inset -1px 0 0 rgba(255, 255, 255, 0.62), 0 22px 44px -26px rgba(66, 52, 33, 0.22)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(88, 72, 49, 0.12), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.72)",
      "bjork-ring-offset": "#f7f3ea"
    },
    "dark": {
      "bjork-bg": "#111111",
      "bjork-surface": "#121212",
      "bjork-surface-muted": "rgba(22, 22, 22, 0.92)",
      "bjork-surface-hover": "#161616",
      "bjork-surface-active": "#202020",
      "bjork-panel": "#0d0d0d",
      "bjork-menu": "rgba(18, 18, 18, 0.98)",
      "bjork-field": "rgba(18, 18, 18, 0.95)",
      "bjork-field-muted": "rgba(18, 18, 18, 0.55)",
      "bjork-field-inset": "rgba(9, 9, 9, 0.75)",
      "bjork-error-bg": "#130d0a",
      "bjork-text": "#ededed",
      "bjork-text-strong": "rgba(237, 237, 237, 0.9)",
      "bjork-text-medium": "rgba(237, 237, 237, 0.72)",
      "bjork-text-muted": "rgba(237, 237, 237, 0.6)",
      "bjork-text-soft": "rgba(237, 237, 237, 0.5)",
      "bjork-text-faint": "rgba(237, 237, 237, 0.22)",
      "bjork-inverted-text": "#080808",
      "bjork-border": "#232323",
      "bjork-border-muted": "#1c1c1c",
      "bjork-border-strong": "#343434",
      "bjork-thumb": "#626262",
      "bjork-track": "#090909",
      "bjork-accent": "#ec5c13",
      "bjork-accent-hover": "#f07832",
      "bjork-accent-soft": "rgba(236, 92, 19, 0.12)",
      "bjork-accent-muted": "rgba(236, 92, 19, 0.24)",
      "bjork-accent-badge": "#b84a12",
      "bjork-accent-badge-foreground": "#fff2ea",
      "bjork-accent-foreground": "#fff2ea",
      "bjork-accent-fill": "#b84a12",
      "bjork-accent-fill-hover": "#a84a14",
      "bjork-shadow-surface": "inset 0 7px 14px rgba(255, 255, 255, 0.03), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.06), 0 14px 20px -6px rgba(0, 0, 0, 0.45)",
      "bjork-shadow-soft": "inset 0 1px 0 rgba(255, 255, 255, 0.045)",
      "bjork-shadow-panel": "inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 36px -28px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-menu": "inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 12px 24px rgba(255, 255, 255, 0.018), inset 0 -18px 26px rgba(0, 0, 0, 0.24), 0 22px 42px -22px rgba(0, 0, 0, 0.9)",
      "bjork-shadow-inset": "inset 0 1px 10px rgba(0, 0, 0, 0.45)",
      "bjork-ring-offset": "#080808"
    }
  },
  "css": {
    ".bjork-range": {
      "box-shadow": "inset 0 1px 1px rgba(255, 255, 255, 0.04), 0 0 14px rgba(189, 69, 20, 0.06)"
    },
    ".bjork-range::-webkit-slider-thumb": {
      "appearance": "none",
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-range::-moz-range-thumb": {
      "width": "16px",
      "height": "8px",
      "border": "0",
      "border-radius": "999px",
      "background": "var(--bjork-thumb)",
      "box-shadow": "inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.42)"
    },
    ".bjork-layered-button-accent, .bjork-layered-button-raised": {
      "position": "relative",
      "isolation": "isolate",
      "appearance": "none",
      "overflow": "hidden",
      "border": "0",
      "border-radius": "13px",
      "box-shadow": "inset 0 1px 0 #ffffff38, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
      "transition": "filter 150ms ease-out, box-shadow 150ms ease-out"
    },
    ".bjork-layered-button-accent::after, .bjork-layered-button-raised::after": {
      "position": "absolute",
      "inset": "0",
      "pointer-events": "none",
      "content": "\"\"",
      "border": "1.5px solid transparent",
      "border-radius": "inherit",
      "background": "linear-gradient(#ffffffb8, #0000003d 41% 75%, #ffffff47) border-box",
      "mix-blend-mode": "overlay",
      "-webkit-mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "mask-image": "linear-gradient(#000, #000), linear-gradient(#000, #000)",
      "-webkit-mask-clip": "padding-box, border-box",
      "mask-clip": "padding-box, border-box",
      "-webkit-mask-origin": "padding-box, border-box",
      "mask-origin": "padding-box, border-box",
      "-webkit-mask-composite": "xor",
      "mask-composite": "exclude"
    },
    ".bjork-layered-button-accent": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000040",
      "background": "radial-gradient(ellipse at -20px top, rgba(255, 255, 255, 0.14), transparent), linear-gradient(180deg, #ec5c13 0%, #ec5c13 62%, color-mix(in oklab, #ec5c13 84%, black 16%) 100%)"
    },
    ".bjork-layered-button-raised": {
      "color": "oklch(100% 0 0)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, oklch(0.1881 0.006 265), oklch(0.5493 0.0081 265))"
    },
    ".dark .bjork-layered-button-raised": {
      "color": "oklch(0.2574 0.0056 265)",
      "text-shadow": "0 -1px #00000026",
      "background": "radial-gradient(ellipse at -20px top, #ffffff38, #fff0), linear-gradient(180deg, color-mix(in oklab, oklch(0.9674 0.0013 265) 80%, oklch(0.2574 0.0056 265) 20%), color-mix(in oklab, oklch(0.669 0.0107 265) 80%, oklch(0.2574 0.0056 265) 20%))"
    },
    "@media (hover: hover)": {
      ".bjork-layered-button-accent:hover": {
        "filter": "brightness(1.08) saturate(1.04)"
      },
      ".bjork-layered-button-raised:hover": {
        "filter": "brightness(1.08) contrast(0.9)"
      }
    }
  },
  "meta": {
    "collection": "Cards",
    "registryUrl": "https://ui.isaiahbjork.com/now-playing-card.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/now-playing-card.json"
  },
  "type": "registry:component"
}