{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "deployment-card",
  "title": "Deployment card",
  "description": "Deployment 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/deployment-card.tsx",
      "content": "\"use client\";\n\nimport { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { ArrowDown, ArrowUpRight, ChevronDown, GitBranch, RotateCw, X } from \"lucide-react\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport {\n  CardButton,\n  CardFrame,\n  Pill,\n  focusRing,\n  useCardTheme,\n  useReducedMotionSafe,\n  type CardTheme,\n  type PillTone,\n} from \"@/components/bjork-ui/cards/card-kit\";\nimport { cn } from \"@/lib/utils\";\n\nexport type DeployStage = \"queued\" | \"build\" | \"checks\" | \"deploy\";\nexport type DeployStatus = \"queued\" | \"building\" | \"ready\" | \"error\" | \"canceled\";\n\nexport interface DeployLogLine {\n  /** Seconds since the deployment started. */\n  t: number;\n  text: string;\n  level?: \"info\" | \"warn\" | \"error\";\n  stage: DeployStage;\n}\n\nexport interface DeployCommit {\n  sha: string;\n  message: string;\n  branch: string;\n  author: string;\n}\n\nexport interface DeploymentCardProps {\n  project?: string;\n  environment?: \"Production\" | \"Preview\";\n  commit?: DeployCommit;\n  url?: string;\n  /** Controlled status. Pair with `logs` and `stage`. Omit both to run the built-in simulation. */\n  status?: DeployStatus;\n  stage?: DeployStage;\n  logs?: DeployLogLine[];\n  /** Seconds elapsed, for the controlled mode. */\n  elapsed?: number;\n  /** Simulation outcome. Default \"ready\". */\n  simulateOutcome?: \"ready\" | \"error\";\n  /** Start the simulation finished, e.g. for a static preview. */\n  simulateFinished?: boolean;\n  onCancel?: () => void;\n  onRedeploy?: () => void;\n  defaultLogsOpen?: boolean;\n  theme?: CardTheme;\n  className?: string;\n}\n\nexport const DEPLOYMENT_SAMPLE = {\n  project: \"atlas-web\",\n  environment: \"Production\" as const,\n  url: \"atlas-web.fieldwork.app\",\n  commit: {\n    sha: \"a41f9c2\",\n    message: \"Cache route segments and trim the hero bundle\",\n    branch: \"main\",\n    author: \"Rowan Ellis\",\n  } satisfies DeployCommit,\n};\n\nconst STAGES: { id: DeployStage; label: string }[] = [\n  { id: \"queued\", label: \"Queue\" },\n  { id: \"build\", label: \"Build\" },\n  { id: \"checks\", label: \"Checks\" },\n  { id: \"deploy\", label: \"Deploy\" },\n];\n\nconst SCRIPT: DeployLogLine[] = [\n  { t: 0.0, stage: \"queued\", text: \"Queued in iad1 behind 1 build\" },\n  { t: 1.1, stage: \"queued\", text: \"Assigned builder 8 vCPU / 16 GB\" },\n  { t: 1.6, stage: \"build\", text: \"Cloning github.com/fieldwork/atlas-web (main @ a41f9c2)\" },\n  { t: 2.4, stage: \"build\", text: \"Restored build cache from previous deployment (412 MB)\" },\n  { t: 3.2, stage: \"build\", text: \"Running \\\"pnpm install --frozen-lockfile\\\"\" },\n  { t: 4.6, stage: \"build\", text: \"Packages: +1,284 resolved, 0 downloaded\" },\n  { t: 5.3, stage: \"build\", text: \"Running \\\"pnpm build\\\"\" },\n  { t: 6.4, stage: \"build\", text: \"Compiled 214 modules in 3.8s\" },\n  { t: 7.2, stage: \"build\", level: \"warn\", text: \"Warning: /pricing exceeds the 250 kB first-load budget (268 kB)\" },\n  { t: 8.1, stage: \"build\", text: \"Generated 46 static pages\" },\n  { t: 8.8, stage: \"checks\", text: \"Running checks: types, lint, e2e smoke (3)\" },\n  { t: 10.2, stage: \"checks\", text: \"✓ types  ✓ lint\" },\n  { t: 11.4, stage: \"checks\", text: \"✓ e2e smoke — 18 passed\" },\n  { t: 12.0, stage: \"deploy\", text: \"Uploading 1,932 files (38.4 MB)\" },\n  { t: 13.1, stage: \"deploy\", text: \"Assigning domains\" },\n  { t: 13.6, stage: \"deploy\", text: \"Ready — atlas-web.fieldwork.app\" },\n];\n\nconst FAIL_AT = 11.4;\nconst FAIL_LINES: DeployLogLine[] = [\n  { t: 11.0, stage: \"checks\", level: \"error\", text: \"✗ e2e smoke — checkout.spec.ts › applies a promo code\" },\n  { t: 11.2, stage: \"checks\", level: \"error\", text: \"  Expected total $42.00, received $46.20\" },\n  { t: 11.4, stage: \"checks\", level: \"error\", text: \"Error: Command \\\"pnpm test:smoke\\\" exited with 1\" },\n];\nconst END_AT = SCRIPT[SCRIPT.length - 1].t;\n\nfunction mmss(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\nconst STATUS: Record<DeployStatus, { label: string; tone: PillTone }> = {\n  queued: { label: \"Queued\", tone: \"neutral\" },\n  building: { label: \"Building\", tone: \"accent\" },\n  ready: { label: \"Ready\", tone: \"success\" },\n  error: { label: \"Failed\", tone: \"error\" },\n  canceled: { label: \"Canceled\", tone: \"neutral\" },\n};\n\n/**\n * A deployment as it happens: commit, a four-stage pipeline with a live timer, streaming logs that\n * follow the tail until you scroll away, and the right action for every outcome.\n */\nexport function DeploymentCard({\n  project = DEPLOYMENT_SAMPLE.project,\n  environment = DEPLOYMENT_SAMPLE.environment,\n  commit = DEPLOYMENT_SAMPLE.commit,\n  url = DEPLOYMENT_SAMPLE.url,\n  status: statusProp,\n  stage: stageProp,\n  logs: logsProp,\n  elapsed: elapsedProp,\n  simulateOutcome = \"ready\",\n  simulateFinished = false,\n  onCancel,\n  onRedeploy,\n  defaultLogsOpen = false,\n  theme = \"auto\",\n  className,\n}: DeploymentCardProps) {\n  const { style } = useCardTheme(theme);\n  const reduce = useReducedMotionSafe();\n  const titleId = useId();\n  const logId = useId();\n  const controlled = statusProp !== undefined;\n\n  // Simulation clock, in seconds. Only the interval writes it.\n  const [simT, setSimT] = useState(simulateFinished ? 99 : 0);\n  const [canceled, setCanceled] = useState(false);\n  const [run, setRun] = useState(0);\n  const endAt = simulateOutcome === \"error\" ? FAIL_AT : END_AT;\n  const simRunning = !controlled && !canceled && simT < endAt;\n\n  useEffect(() => {\n    if (!simRunning) return;\n    const started = performance.now() - simT * 1000;\n    const id = window.setInterval(() => setSimT((performance.now() - started) / 1000), 100);\n    return () => window.clearInterval(id);\n    // simT is read once per run; the interval owns it afterwards.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [simRunning, run]);\n\n  const simLogs = useMemo(() => {\n    const base = simulateOutcome === \"error\" ? [...SCRIPT.filter((l) => l.t < 11), ...FAIL_LINES] : SCRIPT;\n    return base.filter((l) => l.t <= simT);\n  }, [simT, simulateOutcome]);\n\n  const logs = controlled ? (logsProp ?? []) : simLogs;\n  const elapsed = controlled ? (elapsedProp ?? 0) : Math.min(simT, endAt);\n  const status: DeployStatus = controlled\n    ? statusProp\n    : canceled\n      ? \"canceled\"\n      : simT >= endAt\n        ? simulateOutcome\n        : simT < 1.6\n          ? \"queued\"\n          : \"building\";\n  const stage: DeployStage = stageProp ?? logs[logs.length - 1]?.stage ?? \"queued\";\n  const stageIndex = STAGES.findIndex((s) => s.id === stage);\n  const active = status === \"queued\" || status === \"building\";\n\n  const [logsOpen, setLogsOpen] = useState(defaultLogsOpen);\n  const [message, setMessage] = useState(\"\");\n  const lastStatus = useRef(status);\n  useEffect(() => {\n    if (lastStatus.current === status) return;\n    lastStatus.current = status;\n    const words: Record<DeployStatus, string> = {\n      queued: \"Deployment queued\",\n      building: \"Building\",\n      ready: `Deployment ready at ${url}`,\n      error: \"Deployment failed during checks\",\n      canceled: \"Deployment canceled\",\n    };\n    const id = requestAnimationFrame(() => setMessage(words[status]));\n    return () => cancelAnimationFrame(id);\n  }, [status, url]);\n\n  // Follow the tail unless the reader scrolled up.\n  const scroller = useRef<HTMLDivElement>(null);\n  const [follow, setFollow] = useState(true);\n  useLayoutEffect(() => {\n    const el = scroller.current;\n    if (el && follow && logsOpen) el.scrollTop = el.scrollHeight;\n  }, [logs.length, follow, logsOpen]);\n  const onScroll = useCallback(() => {\n    const el = scroller.current;\n    if (!el) return;\n    setFollow(el.scrollHeight - el.scrollTop - el.clientHeight < 12);\n  }, []);\n\n  const cancel = () => {\n    onCancel?.();\n    if (!controlled) setCanceled(true);\n  };\n  const redeploy = () => {\n    onRedeploy?.();\n    if (!controlled) {\n      setCanceled(false);\n      setSimT(0);\n      setFollow(true);\n      setRun((r) => r + 1);\n    }\n  };\n\n  const meta = STATUS[status];\n  const failedStage = status === \"error\" ? stageIndex : -1;\n\n  return (\n    <CardFrame aria-labelledby={titleId} aria-busy={active || undefined} className={className} style={style} maxWidth={460}>\n      <div className=\"px-5 pt-5\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <h3 id={titleId} className=\"truncate text-[15px] font-semibold leading-5\">\n              {project}\n            </h3>\n            <span className=\"rounded-[5px] border border-[color:var(--bjork-border)] px-1.5 text-[11px] leading-[18px] text-[color:var(--bjork-text-muted)]\">\n              {environment}\n            </span>\n          </div>\n          <Pill tone={meta.tone} dot pulse={active}>\n            {meta.label}\n          </Pill>\n        </div>\n\n        <div className=\"mt-3 flex items-start gap-2.5\">\n          <span\n            aria-hidden=\"true\"\n            className=\"mt-0.5 grid size-6 shrink-0 place-items-center rounded-full bg-[color:var(--bjork-card-raised)] text-[11px] font-semibold text-[color:var(--bjork-text-medium)] ring-1 ring-[color:var(--bjork-border)]\"\n          >\n            {commit.author\n              .split(\" \")\n              .map((p) => p[0])\n              .join(\"\")\n              .slice(0, 2)}\n          </span>\n          <div className=\"min-w-0\">\n            <p className=\"line-clamp-2 text-[13px] leading-5\">{commit.message}</p>\n            <p className=\"mt-0.5 flex flex-wrap items-center gap-x-2 text-[12px] leading-4 text-[color:var(--bjork-text-muted)]\">\n              <span className=\"inline-flex items-center gap-1\">\n                <GitBranch aria-hidden=\"true\" className=\"size-3\" />\n                {commit.branch}\n              </span>\n              <span className=\"font-mono\">{commit.sha}</span>\n              <span>{commit.author}</span>\n            </p>\n          </div>\n        </div>\n      </div>\n\n      {/* Pipeline */}\n      <div className=\"px-5 pt-4\">\n        <ol className=\"grid grid-cols-4 gap-1.5\" aria-label=\"Pipeline\">\n          {STAGES.map((s, i) => {\n            const done = i < stageIndex || status === \"ready\";\n            const current = i === stageIndex && active;\n            const failed = i === failedStage;\n            const halted = status === \"canceled\" && i === stageIndex;\n            const state = failed ? \"failed\" : halted ? \"canceled\" : done ? \"done\" : current ? \"running\" : \"pending\";\n            return (\n              <li key={s.id} className=\"min-w-0\">\n                <span className=\"relative block h-1 overflow-hidden rounded-full bg-[color:var(--bjork-track)]\">\n                  <span\n                    className=\"absolute inset-0 origin-left rounded-full\"\n                    style={{\n                      background: failed\n                        ? \"var(--bjork-error)\"\n                        : halted\n                          ? \"var(--bjork-text-soft)\"\n                          : status === \"ready\"\n                            ? \"var(--bjork-success)\"\n                            : \"var(--bjork-accent)\",\n                      transform: `scaleX(${done || failed || halted ? 1 : current ? (reduce ? 0.5 : 0) : 0})`,\n                      transition: reduce ? \"none\" : \"transform 360ms cubic-bezier(0.23,1,0.32,1), background-color 300ms\",\n                    }}\n                  />\n                  {current && !reduce && (\n                    <span\n                      className=\"absolute inset-y-0 w-1/2 rounded-full\"\n                      style={{\n                        background: \"linear-gradient(90deg, transparent, var(--bjork-accent), transparent)\",\n                        animation: \"bjork-deploy-sweep 1.2s linear infinite\",\n                      }}\n                    />\n                  )}\n                </span>\n                <span\n                  className={cn(\n                    \"mt-1.5 block truncate text-[11px] leading-4\",\n                    failed\n                      ? \"text-[color:var(--bjork-error)]\"\n                      : current\n                        ? \"text-[color:var(--bjork-text)]\"\n                        : done\n                          ? \"text-[color:var(--bjork-text-medium)]\"\n                          : \"text-[color:var(--bjork-text-muted)]\",\n                  )}\n                >\n                  {s.label}\n                  <span className=\"sr-only\">, {state}</span>\n                </span>\n              </li>\n            );\n          })}\n        </ol>\n        <style href=\"bjork-deploy-sweep\" precedence=\"default\">\n          {\"@keyframes bjork-deploy-sweep { from { transform: translateX(-100%); } to { transform: translateX(200%); } }\"}\n        </style>\n      </div>\n\n      <div className=\"flex items-center justify-between gap-3 px-5 pt-3 text-[12px] leading-4\">\n        <span className=\"text-[color:var(--bjork-text-muted)]\">\n          {status === \"ready\" ? \"Deployed in\" : status === \"error\" ? \"Failed after\" : status === \"canceled\" ? \"Stopped after\" : \"Elapsed\"}{\" \"}\n          <span className=\"text-[color:var(--bjork-text)]\">{mmss(elapsed)}</span>\n        </span>\n        {status === \"ready\" && (\n          <a\n            href={`https://${url}`}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className={cn(\n              \"inline-flex min-w-0 items-center gap-1 truncate rounded-[4px] text-[color:var(--bjork-text-medium)] underline-offset-2 hover:text-[color:var(--bjork-text)] hover:underline\",\n              focusRing,\n            )}\n          >\n            <span className=\"truncate\">{url}</span>\n            <ArrowUpRight aria-hidden=\"true\" className=\"size-3 shrink-0\" />\n          </a>\n        )}\n      </div>\n\n      {/* Logs */}\n      <div className=\"mt-4 border-t border-[color:var(--bjork-border)]\">\n        <button\n          type=\"button\"\n          aria-expanded={logsOpen}\n          aria-controls={logId}\n          onClick={() => setLogsOpen((o) => !o)}\n          className={cn(\n            \"flex w-full cursor-pointer items-center justify-between px-5 py-3 text-[12px] text-[color:var(--bjork-text-medium)] transition-colors hover:bg-[color:var(--bjork-card-hover)] hover:text-[color:var(--bjork-text)]\",\n            focusRing,\n            \"focus-visible:ring-inset focus-visible:ring-offset-0\",\n          )}\n        >\n          <span>\n            Build logs <span className=\"text-[color:var(--bjork-text-muted)]\">· {logs.length} lines</span>\n            {logs.some((l) => l.level === \"error\") && <span className=\"ml-2 text-[color:var(--bjork-error)]\">errors</span>}\n            {!logs.some((l) => l.level === \"error\") && logs.some((l) => l.level === \"warn\") && (\n              <span className=\"ml-2 text-[color:var(--bjork-warning)]\">\n                {logs.filter((l) => l.level === \"warn\").length === 1\n                  ? \"1 warning\"\n                  : `${logs.filter((l) => l.level === \"warn\").length} warnings`}\n              </span>\n            )}\n          </span>\n          <ChevronDown aria-hidden=\"true\" className={cn(\"size-4 transition-transform motion-reduce:transition-none\", logsOpen && \"rotate-180\")} />\n        </button>\n        {logsOpen && (\n          <div className=\"relative px-3 pb-3\">\n            <div\n              id={logId}\n              ref={scroller}\n              onScroll={onScroll}\n              role=\"log\"\n              aria-live=\"off\"\n              aria-label=\"Build log\"\n              tabIndex={0}\n              className={cn(\n                \"h-[168px] overflow-y-auto overscroll-contain rounded-[10px] border border-[color:var(--bjork-border)] bg-[color:var(--bjork-card-inset)] shadow-[var(--bjork-shadow-inset)] py-2 font-mono text-[11px] leading-[18px]\",\n                focusRing,\n              )}\n            >\n              {logs.map((l, i) => (\n                <div\n                  key={`${l.t}-${i}`}\n                  className={cn(\n                    \"flex gap-3 px-3\",\n                    l.level === \"error\" && \"bg-[color:var(--bjork-error-soft)] text-[color:var(--bjork-error)]\",\n                    l.level === \"warn\" && \"text-[color:var(--bjork-warning)]\",\n                  )}\n                >\n                  <span className=\"w-9 shrink-0 select-none text-right text-[color:var(--bjork-text-soft)]\">{l.t.toFixed(1)}s</span>\n                  <span className=\"min-w-0 whitespace-pre-wrap break-words\">{l.text}</span>\n                </div>\n              ))}\n              {active && (\n                <div className=\"flex gap-3 px-3 text-[color:var(--bjork-text-soft)]\">\n                  <span className=\"w-9 shrink-0\" />\n                  <span className=\"motion-safe:animate-pulse\">▍</span>\n                </div>\n              )}\n            </div>\n            {!follow && (\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setFollow(true);\n                  scroller.current?.scrollTo({ top: scroller.current.scrollHeight, behavior: reduce ? \"auto\" : \"smooth\" });\n                }}\n                className={cn(\n                  \"absolute bottom-5 left-1/2 inline-flex -translate-x-1/2 cursor-pointer items-center gap-1 rounded-full border border-[color:var(--bjork-border)] bg-[color:var(--bjork-card-raised)] px-2.5 py-1 text-[11px] shadow-[0_6px_16px_-8px_rgba(0,0,0,0.5)]\",\n                  focusRing,\n                )}\n              >\n                <ArrowDown aria-hidden=\"true\" className=\"size-3\" />\n                Latest\n              </button>\n            )}\n          </div>\n        )}\n      </div>\n\n      <div className=\"flex items-center justify-end gap-2 border-t border-[color:var(--bjork-border)] bg-[color:var(--bjork-card-raised)] px-5 py-3\">\n        {active && (\n          <CardButton size=\"sm\" variant=\"ghost\" onClick={cancel} icon={<X aria-hidden=\"true\" className=\"size-3.5\" />}>\n            Cancel\n          </CardButton>\n        )}\n        {!active && (\n          <CardButton size=\"sm\" variant={status === \"ready\" ? \"ghost\" : \"primary\"} onClick={redeploy} icon={<RotateCw aria-hidden=\"true\" className=\"size-3.5\" />}>\n            Redeploy\n          </CardButton>\n        )}\n        {status === \"error\" && !logsOpen && (\n          <CardButton size=\"sm\" onClick={() => setLogsOpen(true)}>\n            View error\n          </CardButton>\n        )}\n        {status === \"ready\" && (\n          <a\n            href={`https://${url}`}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className={cn(\n              \"inline-flex h-8 items-center gap-1.5 rounded-[10px] bg-[color:var(--bjork-accent-fill)] px-2.5 text-[12px] font-medium text-[color:var(--bjork-accent-foreground)] transition-[background-color,transform] hover:bg-[color:var(--bjork-accent-fill-hover)] active:scale-[0.97] motion-reduce:transition-none\",\n              focusRing,\n            )}\n          >\n            Visit\n            <ArrowUpRight aria-hidden=\"true\" className=\"size-3.5\" />\n          </a>\n        )}\n      </div>\n      <LiveRegion message={message} />\n    </CardFrame>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/cards/deployment-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/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/deployment-card.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/deployment-card.json"
  },
  "type": "registry:component"
}