{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "streak-card",
  "title": "Streak card",
  "description": "Streak 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/streak-card.tsx",
      "content": "\"use client\";\n\nimport { useId, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { Check, Flame, Snowflake } from \"lucide-react\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { ease } from \"@/components/bjork-ui/_core/motion\";\nimport {\n  CardButton,\n  CardFrame,\n  Pill,\n  focusRing,\n  seeded,\n  useCardTheme,\n  useReducedMotionSafe,\n  type CardTheme,\n} from \"@/components/bjork-ui/cards/card-kit\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface StreakDay {\n  /** \"YYYY-MM-DD\". */\n  date: string;\n  /** Activity count that day. 0 or missing means nothing logged. */\n  count: number;\n}\n\nexport interface StreakCardProps {\n  title?: string;\n  /** Noun for one unit of activity, e.g. \"session\". */\n  unit?: string;\n  days?: StreakDay[];\n  /** Days covered by a streak freeze (\"YYYY-MM-DD\"). */\n  frozen?: string[];\n  freezesLeft?: number;\n  /** \"YYYY-MM-DD\" in the user's zone. */\n  today?: string;\n  best?: number;\n  milestones?: number[];\n  /** Weeks in the heatmap. Default 18. */\n  weeks?: number;\n  onCheckIn?: (date: string) => void;\n  locale?: string;\n  theme?: CardTheme;\n  className?: string;\n}\n\nconst DAY = 86_400_000;\nconst toKey = (ms: number) => new Date(ms).toISOString().slice(0, 10);\nconst fromKey = (k: string) => Date.parse(`${k}T00:00:00Z`);\n\nfunction makeSample() {\n  const today = \"2026-10-08\";\n  const t = fromKey(today);\n  const rnd = seeded(2026);\n  const days: StreakDay[] = [];\n  const frozen = [toKey(t - 9 * DAY)];\n  for (let i = 120; i >= 1; i--) {\n    const k = toKey(t - i * DAY);\n    if (frozen.includes(k)) continue;\n    // A 23-day run up to yesterday, patchier before it.\n    const inRun = i <= 23;\n    const active = inRun || rnd() > 0.38;\n    if (active) days.push({ date: k, count: 1 + Math.floor(rnd() * (inRun ? 4 : 3)) });\n  }\n  return { today, days, frozen };\n}\n\nconst SAMPLE = makeSample();\n\nexport const STREAK_SAMPLE = {\n  title: \"Writing streak\",\n  unit: \"session\",\n  today: SAMPLE.today,\n  days: SAMPLE.days,\n  frozen: SAMPLE.frozen,\n  freezesLeft: 2,\n  best: 41,\n  milestones: [7, 30, 100, 365],\n};\n\nfunction currentStreak(today: string, active: Set<string>, frozen: Set<string>) {\n  let n = 0;\n  let k = today;\n  // Today counts if done; if not, the streak is still alive from yesterday.\n  if (!active.has(k)) k = toKey(fromKey(k) - DAY);\n  while (active.has(k) || frozen.has(k)) {\n    if (active.has(k)) n += 1;\n    k = toKey(fromKey(k) - DAY);\n  }\n  return n;\n}\n\n/**\n * A habit streak: the current run, this week at a glance, a heatmap you can walk with the arrow keys,\n * the next milestone and a check-in that celebrates once.\n */\nexport function StreakCard({\n  title = STREAK_SAMPLE.title,\n  unit = STREAK_SAMPLE.unit,\n  days = STREAK_SAMPLE.days,\n  frozen = STREAK_SAMPLE.frozen,\n  freezesLeft = STREAK_SAMPLE.freezesLeft,\n  today = STREAK_SAMPLE.today,\n  best = STREAK_SAMPLE.best,\n  milestones = STREAK_SAMPLE.milestones,\n  weeks = 18,\n  onCheckIn,\n  locale = \"en-US\",\n  theme = \"auto\",\n  className,\n}: StreakCardProps) {\n  const { style } = useCardTheme(theme);\n  const reduce = useReducedMotionSafe();\n  const titleId = useId();\n  const readoutId = useId();\n\n  const [extra, setExtra] = useState<StreakDay[]>([]);\n  const [burst, setBurst] = useState(0);\n  const [message, setMessage] = useState(\"\");\n\n  const counts = useMemo(() => {\n    const m = new Map<string, number>();\n    for (const d of [...days, ...extra]) m.set(d.date, (m.get(d.date) ?? 0) + d.count);\n    return m;\n  }, [days, extra]);\n  const active = useMemo(() => new Set([...counts].filter(([, c]) => c > 0).map(([k]) => k)), [counts]);\n  const frozenSet = useMemo(() => new Set(frozen), [frozen]);\n\n  const streak = currentStreak(today, active, frozenSet);\n  const doneToday = active.has(today);\n  const bestShown = Math.max(best, streak);\n  const next = milestones.find((m) => m > streak);\n  const prevMilestone = [...milestones].reverse().find((m) => m <= streak) ?? 0;\n\n  const fmtDay = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: \"narrow\", timeZone: \"UTC\" }), [locale]);\n  const fmtLong = useMemo(\n    () => new Intl.DateTimeFormat(locale, { weekday: \"short\", month: \"short\", day: \"numeric\", timeZone: \"UTC\" }),\n    [locale],\n  );\n\n  // Week strip: Monday-start week containing today.\n  const t0 = fromKey(today);\n  const dow = (new Date(t0).getUTCDay() + 6) % 7;\n  const week = Array.from({ length: 7 }, (_, i) => toKey(t0 + (i - dow) * DAY));\n\n  // Heatmap columns are weeks (oldest left), rows Monday..Sunday.\n  const start = t0 - (dow + (weeks - 1) * 7) * DAY;\n  const grid = Array.from({ length: 7 }, (_, r) =>\n    Array.from({ length: weeks }, (_, c) => toKey(start + (c * 7 + r) * DAY)),\n  );\n  const [focus, setFocus] = useState<[number, number]>([dow, weeks - 1]);\n  const [hover, setHover] = useState<string | null>(null);\n  const cellRefs = useRef(new Map<string, HTMLSpanElement>());\n  const readKey = hover ?? grid[focus[0]][focus[1]];\n\n  const level = (k: string) => {\n    const c = counts.get(k) ?? 0;\n    if (c <= 0) return 0;\n    return Math.min(4, c);\n  };\n\n  const describe = (k: string) => {\n    if (fromKey(k) > t0) return `${fmtLong.format(fromKey(k))}: upcoming`;\n    const c = counts.get(k) ?? 0;\n    if (frozenSet.has(k)) return `${fmtLong.format(fromKey(k))}: streak freeze used`;\n    return `${fmtLong.format(fromKey(k))}: ${c === 0 ? `no ${unit}s` : `${c} ${unit}${c === 1 ? \"\" : \"s\"}`}`;\n  };\n\n  const onGridKey = (e: ReactKeyboardEvent) => {\n    let [r, c] = focus;\n    if (e.key === \"ArrowUp\") r = Math.max(0, r - 1);\n    else if (e.key === \"ArrowDown\") r = Math.min(6, r + 1);\n    else if (e.key === \"ArrowLeft\") c = Math.max(0, c - 1);\n    else if (e.key === \"ArrowRight\") c = Math.min(weeks - 1, c + 1);\n    else if (e.key === \"Home\") c = 0;\n    else if (e.key === \"End\") c = weeks - 1;\n    else return;\n    e.preventDefault();\n    setFocus([r, c]);\n    setHover(null);\n    cellRefs.current.get(grid[r][c])?.focus();\n  };\n\n  const checkIn = () => {\n    if (doneToday) return;\n    setExtra((x) => [...x, { date: today, count: 1 }]);\n    setBurst((b) => b + 1);\n    onCheckIn?.(today);\n    const n = streak + 1;\n    setMessage(\n      milestones.includes(n) ? `Checked in. ${n}-day milestone reached!` : `Checked in. Streak is ${n} days.`,\n    );\n  };\n\n  const fill = [\"var(--bjork-track)\", \"color-mix(in oklab, var(--bjork-accent) 30%, var(--bjork-track))\", \"color-mix(in oklab, var(--bjork-accent) 55%, var(--bjork-track))\", \"color-mix(in oklab, var(--bjork-accent) 80%, var(--bjork-track))\", \"var(--bjork-accent)\"];\n\n  return (\n    <CardFrame aria-labelledby={titleId} className={className} style={style} maxWidth={400}>\n      <div className=\"flex items-start justify-between gap-3 px-5 pt-5\">\n        <div>\n          <h3 id={titleId} className=\"text-[13px] font-medium leading-5 text-[color:var(--bjork-text-medium)]\">\n            {title}\n          </h3>\n          <div className=\"relative mt-1 flex items-center gap-2\">\n            <span className=\"relative grid size-9 place-items-center\">\n              <Flame\n                aria-hidden=\"true\"\n                className={cn(\"size-7 transition-colors duration-300\", streak > 0 ? \"text-[color:var(--bjork-accent)]\" : \"text-[color:var(--bjork-text-faint)]\")}\n                fill={doneToday ? \"currentColor\" : \"none\"}\n                strokeWidth={1.75}\n              />\n              <AnimatePresence>\n                {burst > 0 && !reduce && (\n                  <motion.span key={burst} aria-hidden=\"true\" className=\"pointer-events-none absolute inset-0\">\n                    {Array.from({ length: 10 }, (_, i) => {\n                      const a = (i / 10) * Math.PI * 2;\n                      return (\n                        <motion.span\n                          key={i}\n                          className=\"absolute left-1/2 top-1/2 size-1.5 rounded-full bg-[color:var(--bjork-accent)]\"\n                          initial={{ x: \"-50%\", y: \"-50%\", opacity: 1, scale: 1 }}\n                          animate={{ x: `calc(-50% + ${Math.cos(a) * 30}px)`, y: `calc(-50% + ${Math.sin(a) * 30}px)`, opacity: 0, scale: 0.4 }}\n                          transition={{ duration: 0.7, ease: ease.out }}\n                        />\n                      );\n                    })}\n                    <motion.span\n                      className=\"absolute inset-0 rounded-full border-2 border-[color:var(--bjork-accent)]\"\n                      initial={{ scale: 0.6, opacity: 0.8 }}\n                      animate={{ scale: 2.2, opacity: 0 }}\n                      transition={{ duration: 0.6, ease: ease.out }}\n                    />\n                  </motion.span>\n                )}\n              </AnimatePresence>\n            </span>\n            <p className=\"flex items-baseline gap-1.5\">\n              <span className=\"relative inline-flex h-10 overflow-hidden text-[36px] font-semibold leading-10 tracking-[-0.03em]\">\n                <AnimatePresence initial={false} mode=\"popLayout\">\n                  <motion.span\n                    key={streak}\n                    initial={reduce ? { opacity: 0 } : { y: \"100%\", opacity: 0 }}\n                    animate={{ y: 0, opacity: 1 }}\n                    exit={reduce ? { opacity: 0 } : { y: \"-100%\", opacity: 0 }}\n                    transition={{ duration: 0.36, ease: ease.out }}\n                  >\n                    {streak}\n                  </motion.span>\n                </AnimatePresence>\n              </span>\n              <span className=\"text-[14px] text-[color:var(--bjork-text-medium)]\">{streak === 1 ? \"day\" : \"days\"}</span>\n            </p>\n          </div>\n        </div>\n        <div className=\"flex flex-col items-end gap-1.5 pt-0.5\">\n          <span className=\"text-[12px] leading-4 text-[color:var(--bjork-text-muted)]\">\n            Best <span className=\"text-[color:var(--bjork-text)]\">{bestShown}</span>\n          </span>\n          <Pill tone=\"neutral\">\n            <Snowflake aria-hidden=\"true\" className=\"size-3\" />\n            {freezesLeft} {freezesLeft === 1 ? \"freeze\" : \"freezes\"}\n          </Pill>\n        </div>\n      </div>\n\n      {/* This week */}\n      <ol className=\"mt-4 grid grid-cols-7 gap-1.5 px-5\" aria-label=\"This week\">\n        {week.map((k) => {\n          const isToday = k === today;\n          const future = fromKey(k) > t0;\n          const done = active.has(k);\n          const froze = frozenSet.has(k);\n          const word = future ? \"upcoming\" : done ? \"done\" : froze ? \"freeze used\" : isToday ? \"not yet\" : \"missed\";\n          return (\n            <li key={k} className=\"flex flex-col items-center gap-1.5\">\n              <span className={cn(\"text-[11px] leading-4\", isToday ? \"font-semibold text-[color:var(--bjork-text)]\" : \"text-[color:var(--bjork-text-muted)]\")}>\n                {fmtDay.format(fromKey(k))}\n              </span>\n              <span\n                className={cn(\n                  \"grid size-8 place-items-center rounded-full border transition-[background-color,border-color,color] duration-300 motion-reduce:transition-none\",\n                  done\n                    ? \"border-transparent bg-[color:var(--bjork-accent-fill)] text-[color:var(--bjork-accent-foreground)]\"\n                    : froze\n                      ? \"border-transparent bg-[color:var(--bjork-hair)] text-[color:var(--bjork-text-medium)]\"\n                      : isToday\n                        ? \"border-dashed border-[color:var(--bjork-accent)] text-[color:var(--bjork-accent-ink)]\"\n                        : future\n                          ? \"border-[color:var(--bjork-border)]\"\n                          : \"border-[color:var(--bjork-border)] text-[color:var(--bjork-text-faint)]\",\n                )}\n              >\n                {done ? (\n                  <Check aria-hidden=\"true\" className=\"size-3.5\" strokeWidth={3} />\n                ) : froze ? (\n                  <Snowflake aria-hidden=\"true\" className=\"size-3.5\" />\n                ) : !future && !isToday ? (\n                  <span aria-hidden=\"true\" className=\"h-px w-2.5 bg-current\" />\n                ) : null}\n                <span className=\"sr-only\">\n                  {fmtLong.format(fromKey(k))}, {word}\n                </span>\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n\n      {/* Heatmap */}\n      <div className=\"px-5 pt-5\">\n        <div\n          role=\"grid\"\n          aria-label={`Last ${weeks} weeks`}\n          aria-describedby={readoutId}\n          onKeyDown={onGridKey}\n          className=\"grid gap-[3px]\"\n          style={{ gridTemplateColumns: `repeat(${weeks}, minmax(0, 1fr))` }}\n          onPointerLeave={() => setHover(null)}\n        >\n          {grid.map((row, r) => (\n            <div role=\"row\" key={r} className=\"contents\">\n              {row.map((k, c) => {\n                const future = fromKey(k) > t0;\n                const isFocus = focus[0] === r && focus[1] === c;\n                return (\n                  <span\n                    key={k}\n                    role=\"gridcell\"\n                    ref={(el) => {\n                      if (el) cellRefs.current.set(k, el);\n                      else cellRefs.current.delete(k);\n                    }}\n                    tabIndex={isFocus ? 0 : -1}\n                    aria-label={describe(k)}\n                    aria-selected={isFocus}\n                    onFocus={() => setFocus([r, c])}\n                    onPointerEnter={() => setHover(k)}\n                    className={cn(\n                      \"aspect-square rounded-[3px] transition-colors duration-300\",\n                      future && \"opacity-30\",\n                      k === today && \"ring-1 ring-[color:var(--bjork-text-soft)] ring-offset-1 ring-offset-[color:var(--bjork-card)]\",\n                      focusRing,\n                      \"focus-visible:ring-offset-1\",\n                    )}\n                    style={{\n                      background: frozenSet.has(k)\n                        ? \"repeating-linear-gradient(135deg, var(--bjork-text-soft) 0 1.5px, var(--bjork-track) 1.5px 4px)\"\n                        : fill[future ? 0 : level(k)],\n                    }}\n                  />\n                );\n              })}\n            </div>\n          ))}\n        </div>\n        <div className=\"mt-2 flex items-center justify-between gap-3 text-[11px] leading-4 text-[color:var(--bjork-text-muted)]\">\n          <span id={readoutId} aria-live=\"off\" className=\"truncate\">\n            {describe(readKey)}\n          </span>\n          <span aria-hidden=\"true\" className=\"flex shrink-0 items-center gap-1\">\n            Less\n            {fill.map((f, i) => (\n              <span key={i} className=\"size-2 rounded-[2px]\" style={{ background: f }} />\n            ))}\n            More\n          </span>\n        </div>\n      </div>\n\n      {/* Milestone + check-in */}\n      <div className=\"mt-4 flex items-center gap-4 border-t border-[color:var(--bjork-border)] bg-[color:var(--bjork-card-raised)] px-5 py-3.5\">\n        <div className=\"min-w-0 flex-1\">\n          {next ? (\n            <>\n              <p className=\"text-[12px] leading-4\">\n                <span className=\"text-[color:var(--bjork-text)]\">{next - streak}</span>\n                <span className=\"text-[color:var(--bjork-text-muted)]\"> {next - streak === 1 ? \"day\" : \"days\"} to the {next}-day badge</span>\n              </p>\n              <div\n                role=\"progressbar\"\n                aria-label={`Progress to the ${next}-day badge`}\n                aria-valuemin={prevMilestone}\n                aria-valuemax={next}\n                aria-valuenow={streak}\n                className=\"mt-2 h-1 overflow-hidden rounded-full bg-[color:var(--bjork-track)]\"\n              >\n                <span\n                  className=\"block h-full rounded-full bg-[color:var(--bjork-accent)] transition-[width] duration-500 motion-reduce:transition-none\"\n                  style={{ width: `${((streak - prevMilestone) / (next - prevMilestone)) * 100}%` }}\n                />\n              </div>\n            </>\n          ) : (\n            <p className=\"text-[12px] text-[color:var(--bjork-text-medium)]\">Every badge earned.</p>\n          )}\n        </div>\n        <CardButton\n          variant={doneToday ? \"secondary\" : \"primary\"}\n          onClick={checkIn}\n          disabled={doneToday}\n          icon={doneToday ? <Check aria-hidden=\"true\" className=\"size-3.5\" /> : undefined}\n        >\n          {doneToday ? \"Done today\" : \"Check in\"}\n        </CardButton>\n      </div>\n      <LiveRegion message={message} />\n    </CardFrame>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/cards/streak-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/streak-card.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/streak-card.json"
  },
  "type": "registry:component"
}