{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "candlestick-chart",
  "title": "Candlestick chart",
  "description": "Candlestick chart is a production-ready charts component from BJORK UI, packaged for shadcn registries.",
  "dependencies": [
    "clsx",
    "framer-motion",
    "next-themes",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/bjork-ui/charts/candlestick-chart.tsx",
      "content": "\"use client\";\n\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport type { BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { useChartCanvas, easeOut } from \"@/components/bjork-ui/charts/_kit/canvas\";\nimport { useChartTheme, chartFocusRing, ChartTable, ChartAnnouncer, chartTagEdge, type AnnouncerHandle } from \"@/components/bjork-ui/charts/_kit/chrome\";\nimport { clamp, crisp, damp, niceTicks, withAlpha, formatPercent, formatCompact, formatFixed, formatSigned } from \"@/components/bjork-ui/charts/_kit/scale\";\n\nexport interface Candle {\n  t: number;\n  o: number;\n  h: number;\n  l: number;\n  c: number;\n  v?: number;\n}\n\nexport interface CandlestickChartProps {\n  data: Candle[];\n  /** \"ink\": hollow rising, solid falling. \"semantic\": success and error fills. */\n  palette?: \"ink\" | \"semantic\";\n  /** Index window [start, end) to show. Uncontrolled by default. */\n  visible?: [number, number];\n  defaultVisibleCount?: number;\n  onVisibleChange?: (range: [number, number]) => void;\n  /** Posed crosshair index. `null` hides it. Pointer and keys take over when they move. */\n  cursor?: number | null;\n  onCursorChange?: (index: number | null, candle: Candle | null) => void;\n  showVolume?: boolean;\n  formatPrice?: (v: number) => string;\n  formatTime?: (t: number, detail: \"axis\" | \"full\") => string;\n  formatVolume?: (v: number) => string;\n  height?: number;\n  ariaLabel?: string;\n  tone?: BjorkTone;\n  attract?: boolean;\n  className?: string;\n}\n\nconst PAD_TOP = 30; // readout row\nconst PAD_BOTTOM = 24; // time labels\nconst PAD_LEFT = 8;\nconst GUTTER = 64; // price labels and the last-price badge\nconst VOL_FRAC = 0.2;\nconst VOL_GAP = 8;\nconst MIN_CANDLES = 12;\nconst ENTER_MS = 900;\nconst CANDLE_ENTER_MS = 320;\nconst RANGE_TAU = 0.4;\nconst CONTRACT_PX = 2;\nconst VIEW_TAU = 0.12;\nconst HEAD_EASING = 0.12;\nconst ATTRACT_STEP_MS = 240;\nconst ATTRACT_IDLE_MS = 4000;\nconst PRICE_LABELS = 6;\nconst TABLE_COLUMNS = [\"Date\", \"Open\", \"High\", \"Low\", \"Close\", \"Volume\"];\nconst TIME_LABELS = 10;\n\n// Cached formatter: this runs for every price label on every frame of a zoom.\nconst defaultFormatPrice = (v: number) => formatFixed(v, 2);\n\nconst defaultFormatVolume = (v: number) => formatCompact(v);\n// UTC like the rest of the kit, so a midnight-UTC candle never shows as the previous day.\nconst axisDate = new Intl.DateTimeFormat(\"en-US\", { month: \"short\", day: \"numeric\", timeZone: \"UTC\" });\nconst fullDate = new Intl.DateTimeFormat(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\", year: \"numeric\", timeZone: \"UTC\" });\nconst defaultFormatTime = (t: number, detail: \"axis\" | \"full\") => (detail === \"axis\" ? axisDate : fullDate).format(t);\n\ninterface RunState {\n  vs: number;\n  ve: number;\n  ts: number;\n  te: number;\n  range: { lo: number; hi: number } | null;\n  volMax: number;\n  enter: number;\n  head: { c: number; h: number; l: number } | null;\n  cursor: number | null;\n  cursorSource: \"pointer\" | \"keyboard\" | \"prop\" | \"attract\" | null;\n  pointerY: number | null;\n  plot: { l: number; r: number; t: number; b: number; vb: number };\n  cw: number;\n  readoutKey: string;\n  priceText: string[];\n  timeText: string[];\n  badgeText: string;\n  lastInput: number;\n  attractAt: number;\n  follow: boolean;\n  autoFit: boolean;\n  drag: { x: number; vs: number; ve: number; id: number; moved: boolean } | null;\n}\n\nexport function CandlestickChart({\n  data,\n  palette = \"ink\",\n  visible,\n  defaultVisibleCount = 80,\n  onVisibleChange,\n  cursor,\n  onCursorChange,\n  showVolume = true,\n  formatPrice = defaultFormatPrice,\n  formatTime = defaultFormatTime,\n  formatVolume = defaultFormatVolume,\n  height = 360,\n  ariaLabel = \"Candlestick chart\",\n  tone: toneProp,\n  attract = false,\n  className,\n}: CandlestickChartProps) {\n  const { pal, reduce, vars } = useChartTheme(toneProp);\n  const announcer = useRef<AnnouncerHandle>(null);\n  const say = (m: string) => announcer.current?.say(m);\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const readoutRef = useRef<HTMLDivElement>(null);\n  const badgeRef = useRef<HTMLSpanElement>(null);\n  const priceTagRef = useRef<HTMLSpanElement>(null);\n  const timeTagRef = useRef<HTMLSpanElement>(null);\n  const priceLabelRefs = useRef<(HTMLSpanElement | null)[]>([]);\n  const timeLabelRefs = useRef<(HTMLSpanElement | null)[]>([]);\n  const rectRef = useRef<DOMRect | null>(null);\n\n  const n = data.length;\n  const initialCount = Math.min(n, defaultVisibleCount);\n  const init: [number, number] = visible ?? [Math.max(0, n - initialCount), n];\n\n  const cfg = useRef({ defaultVisibleCount, data, palette, showVolume, formatPrice, formatTime, formatVolume, reduce, attract, pal, onCursorChange, onVisibleChange, ariaLabel });\n  useEffect(() => {\n    cfg.current = { defaultVisibleCount, data, palette, showVolume, formatPrice, formatTime, formatVolume, reduce, attract, pal, onCursorChange, onVisibleChange, ariaLabel };\n  });\n\n  const st = useRef<RunState>({\n    vs: init[0],\n    ve: init[1],\n    ts: init[0],\n    te: init[1],\n    range: null,\n    volMax: 0,\n    enter: 0,\n    head: null,\n    cursor: cursor ?? null,\n    cursorSource: cursor != null ? \"prop\" : null,\n    pointerY: null,\n    plot: { l: 0, r: 0, t: 0, b: 0, vb: 0 },\n    cw: 1,\n    readoutKey: \"\",\n    priceText: [],\n    timeText: [],\n    badgeText: \"\",\n    lastInput: 0,\n    attractAt: 0,\n    follow: !visible,\n    autoFit: !visible,\n    drag: null,\n  });\n\n  const clampView = (s: number, e: number, len: number): [number, number] => {\n    const maxW = Math.max(MIN_CANDLES, len + 4);\n    let w = clamp(e - s, Math.min(MIN_CANDLES, Math.max(len, 1)), maxW);\n    if (!Number.isFinite(w)) w = MIN_CANDLES;\n    let a = s;\n    let b = s + w;\n    const lo = -2;\n    const hi = len + 3;\n    if (a < lo) {\n      a = lo;\n      b = a + w;\n    }\n    if (b > hi) {\n      b = hi;\n      a = b - w;\n    }\n    return [a, b];\n  };\n\n  const { rootRef, hostRef, canvasRef, wake } = useChartCanvas(({ ctx, w, h, dt }) => {\n    const s = st.current;\n    const c = cfg.current;\n    const p = c.pal;\n    const rows = c.data;\n    const len = rows.length;\n    if (!len) return false;\n\n    // Attract: a slow scrub across the window while nobody is touching the chart.\n    if (c.attract && !c.reduce) {\n      const now = performance.now();\n      const idle = !s.lastInput || now - s.lastInput > ATTRACT_IDLE_MS;\n      if (idle && (s.cursorSource === null || s.cursorSource === \"attract\") && now - s.attractAt > ATTRACT_STEP_MS) {\n        s.attractAt = now;\n        const a = Math.max(0, Math.ceil(s.vs));\n        const b = Math.min(len - 1, Math.floor(s.ve - 1));\n        const next = s.cursor === null || s.cursor >= b ? a : s.cursor + 1;\n        s.cursor = next;\n        s.cursorSource = \"attract\";\n      }\n    }\n\n    // Until the reader zooms, the window fits the width: candles stay at least 7px apart.\n    if (s.autoFit) {\n      const want = Math.min(len, cfg.current.defaultVisibleCount, Math.max(MIN_CANDLES, Math.floor((w - GUTTER - PAD_LEFT) / 7)));\n      if (Math.abs(s.te - s.ts - want) > 0.5 || s.te !== len) {\n        const first = s.enter === 0;\n        s.ts = len - want;\n        s.te = len;\n        if (first) {\n          s.vs = s.ts;\n          s.ve = s.te;\n        }\n      }\n    }\n\n    // View window: damped toward its target, so zoom and pan glide.\n    if (c.reduce || s.drag) {\n      s.vs = s.ts;\n      s.ve = s.te;\n    } else {\n      s.vs = damp(s.vs, s.ts, VIEW_TAU, dt);\n      s.ve = damp(s.ve, s.te, VIEW_TAU, dt);\n    }\n    const viewSettled = Math.abs(s.vs - s.ts) < 1e-3 && Math.abs(s.ve - s.te) < 1e-3;\n    if (viewSettled) {\n      s.vs = s.ts;\n      s.ve = s.te;\n    }\n\n    const volH = c.showVolume ? Math.round((h - PAD_TOP - PAD_BOTTOM) * VOL_FRAC) : 0;\n    const plot = {\n      l: PAD_LEFT,\n      r: Math.max(PAD_LEFT + 40, w - GUTTER),\n      t: PAD_TOP,\n      b: h - PAD_BOTTOM - (volH ? volH + VOL_GAP : 0),\n      vb: h - PAD_BOTTOM,\n    };\n    s.plot = plot;\n    const pW = plot.r - plot.l;\n    const pH = plot.b - plot.t;\n    const span = Math.max(1e-6, s.ve - s.vs);\n    const cw = pW / span;\n    s.cw = cw;\n    const xOf = (i: number) => plot.l + (i + 0.5 - s.vs) * cw;\n\n    // Forming candle: the last close, high and low approach their new values with a damped step.\n    const last = rows[len - 1];\n    if (!s.head || c.reduce) s.head = { c: last.c, h: last.h, l: last.l };\n    else {\n      const a = 1 - Math.pow(1 - HEAD_EASING, dt * 60);\n      s.head.c += (last.c - s.head.c) * a;\n      s.head.h += (last.h - s.head.h) * a;\n      s.head.l += (last.l - s.head.l) * a;\n    }\n    const headSettled = Math.abs(s.head.c - last.c) + Math.abs(s.head.h - last.h) + Math.abs(s.head.l - last.l) < 1e-6 * Math.max(1, Math.abs(last.c));\n    const valueAt = (i: number) => {\n      const r = rows[i];\n      if (i === len - 1 && s.head) return { o: r.o, h: Math.max(s.head.h, r.o, s.head.c), l: Math.min(s.head.l, r.o, s.head.c), c: s.head.c };\n      return r;\n    };\n\n    // Entrance: candles rise out of their open price, left to right.\n    if (c.reduce) s.enter = 1;\n    else s.enter = Math.min(1, s.enter + (dt * 1000) / ENTER_MS);\n    const i0 = Math.max(0, Math.floor(s.vs) - 1);\n    const i1 = Math.min(len - 1, Math.ceil(s.ve) + 1);\n    const visCount = Math.max(1, i1 - i0 + 1);\n    const growOf = (i: number) => {\n      if (s.enter >= 1) return 1;\n      const delay = ((i - i0) / visCount) * (ENTER_MS - CANDLE_ENTER_MS);\n      return easeOut(clamp((s.enter * ENTER_MS - delay) / CANDLE_ENTER_MS, 0, 1));\n    };\n\n    // Y range over the visible candles: expands the same frame, contracts slowly (never clips).\n    let lo = Infinity;\n    let hi = -Infinity;\n    let vMax = 0;\n    for (let i = Math.max(0, Math.floor(s.vs)); i <= Math.min(len - 1, Math.ceil(s.ve) - 1); i++) {\n      const r = valueAt(i);\n      if (r.l < lo) lo = r.l;\n      if (r.h > hi) hi = r.h;\n      if ((rows[i].v ?? 0) > vMax) vMax = rows[i].v ?? 0;\n    }\n    if (!Number.isFinite(lo)) {\n      lo = last.l;\n      hi = last.h;\n    }\n    const padY = Math.max((hi - lo) * 0.08, Math.abs(hi) * 1e-4, 1e-6);\n    const tLo = lo - padY;\n    const tHi = hi + padY;\n    if (!s.range) s.range = { lo: tLo, hi: tHi };\n    const range = s.range;\n    if (tLo < range.lo) range.lo = tLo;\n    if (tHi > range.hi) range.hi = tHi;\n    if (c.reduce) {\n      range.lo = tLo;\n      range.hi = tHi;\n    } else {\n      const pxPer = pH / Math.max(1e-9, range.hi - range.lo);\n      const cap = CONTRACT_PX / pxPer;\n      const k = 1 - Math.exp(-dt / RANGE_TAU);\n      if (tLo > range.lo) range.lo += Math.min(cap, (tLo - range.lo) * k);\n      if (tHi < range.hi) range.hi -= Math.min(cap, (range.hi - tHi) * k);\n    }\n    const rangeSettled = Math.abs(range.lo - tLo) + Math.abs(range.hi - tHi) < 1e-4 * (tHi - tLo);\n    if (rangeSettled) {\n      range.lo = tLo;\n      range.hi = tHi;\n    }\n    const yOf = (v: number) => plot.t + ((range.hi - v) / Math.max(1e-9, range.hi - range.lo)) * pH;\n    s.volMax = c.reduce || !s.volMax ? vMax : damp(s.volMax, vMax, RANGE_TAU, dt);\n    const volSettled = Math.abs(s.volMax - vMax) < 1e-6 * Math.max(1, vMax);\n\n    // Badge and crosshair tags own their rows: grid labels within 14px of them hide.\n    const lastY = yOf(valueAt(len - 1).c);\n    const tagY = s.cursor !== null && s.cursorSource === \"pointer\" && s.pointerY !== null ? s.pointerY : null;\n    const tagX = s.cursor !== null && s.cursor >= 0 && s.cursor < len ? xOf(s.cursor) : null;\n\n    // Grid and price labels.\n    const ticks = niceTicks(range.lo, range.hi, 5).filter((v) => v > range.lo && v < range.hi);\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = p.hair;\n    ctx.beginPath();\n    for (const v of ticks) {\n      const y = crisp(yOf(v));\n      ctx.moveTo(plot.l, y);\n      ctx.lineTo(plot.r, y);\n    }\n    if (volH) {\n      const y = crisp(plot.vb);\n      ctx.moveTo(plot.l, y);\n      ctx.lineTo(plot.r, y);\n    }\n    ctx.stroke();\n    for (let k = 0; k < PRICE_LABELS; k++) {\n      const el = priceLabelRefs.current[k];\n      if (!el) continue;\n      if (k < ticks.length) {\n        const text = c.formatPrice(ticks[k]);\n        if (s.priceText[k] !== text) {\n          s.priceText[k] = text;\n          el.textContent = text;\n        }\n        const ty = yOf(ticks[k]);\n        const covered = Math.abs(ty - clamp(lastY, plot.t, plot.b)) < 20 || (tagY !== null && Math.abs(ty - tagY) < 20);\n        el.style.opacity = covered ? \"0\" : \"1\";\n        el.style.transform = `translate3d(${(plot.r + 8).toFixed(1)}px, ${yOf(ticks[k]).toFixed(2)}px, 0) translateY(-50%)`;\n      } else el.style.opacity = \"0\";\n    }\n\n    // Time labels: every k candles, with k a nice step that keeps labels at least 64px apart.\n    const steps = [1, 2, 3, 5, 7, 10, 14, 15, 20, 25, 30, 50, 100, 200, 500, 1000];\n    const every = steps.find((k) => k * cw >= 64) ?? 1000;\n    let slot = 0;\n    const firstLabel = Math.ceil(Math.max(0, s.vs) / every) * every;\n    for (let i = firstLabel; i < Math.min(len, Math.ceil(s.ve)) && slot < TIME_LABELS; i += every) {\n      const x = xOf(i);\n      if (x < plot.l + 18 || x > plot.r - 18) continue;\n      if (tagX !== null && Math.abs(x - tagX) < 56) continue;\n      const el = timeLabelRefs.current[slot++];\n      if (!el) continue;\n      const text = c.formatTime(rows[i].t, \"axis\");\n      if (s.timeText[slot - 1] !== text) {\n        s.timeText[slot - 1] = text;\n        el.textContent = text;\n      }\n      el.style.opacity = \"1\";\n      el.style.transform = `translate3d(${x.toFixed(2)}px, ${(h - PAD_BOTTOM + 8).toFixed(1)}px, 0) translateX(-50%)`;\n    }\n    for (let k = slot; k < TIME_LABELS; k++) {\n      const el = timeLabelRefs.current[k];\n      if (el) el.style.opacity = \"0\";\n    }\n\n    // Candles.\n    const up = c.palette === \"semantic\" ? p.success : p.textMedium;\n    const down = c.palette === \"semantic\" ? p.error : p.text;\n    const bodyW = Math.max(1, Math.min(18, Math.round(cw * 0.64)));\n    const thin = bodyW < 3;\n    const hover = s.cursor;\n    ctx.save();\n    ctx.beginPath();\n    ctx.rect(plot.l, 0, pW, h);\n    ctx.clip();\n\n    // Volume first, so the crosshair sits over it.\n    if (volH && s.volMax > 0) {\n      for (let i = i0; i <= i1; i++) {\n        const r = rows[i];\n        if (r.v === undefined) continue;\n        const g = growOf(i);\n        const vh = (r.v / s.volMax) * (volH - 2) * g;\n        const x = Math.round(xOf(i) - bodyW / 2);\n        const rising = valueAt(i).c >= r.o;\n        const base = c.palette === \"semantic\" ? (rising ? p.success : p.error) : p.text;\n        ctx.fillStyle = withAlpha(base, (hover === i ? 0.4 : rising ? 0.1 : 0.18) * (c.palette === \"semantic\" ? 1.3 : 1));\n        ctx.fillRect(x, Math.round(plot.vb - vh), bodyW, Math.round(vh));\n      }\n    }\n\n    // The last close: a dashed accent hairline across the plot.\n    const lastV = valueAt(len - 1).c;\n    ctx.save();\n    ctx.setLineDash([2, 3]);\n    ctx.strokeStyle = withAlpha(p.accent, 0.7);\n    ctx.beginPath();\n    ctx.moveTo(plot.l, crisp(lastY));\n    ctx.lineTo(plot.r, crisp(lastY));\n    ctx.stroke();\n    ctx.restore();\n\n    for (let i = i0; i <= i1; i++) {\n      const g = growOf(i);\n      if (g <= 0) continue;\n      const r = valueAt(i);\n      const o = r.o;\n      const cl = o + (r.c - o) * g;\n      const hh = o + (r.h - o) * g;\n      const ll = o + (r.l - o) * g;\n      const rising = r.c >= r.o;\n      const color = rising ? up : down;\n      const xc = xOf(i);\n      const dim = hover !== null && hover !== i ? 0.55 : 1;\n      ctx.globalAlpha = g < 1 ? Math.min(1, 0.25 + g) * dim : dim;\n      const xw = crisp(xc - 0.5);\n      const yH = yOf(hh);\n      const yL = yOf(ll);\n      const yO = yOf(o);\n      const yC = yOf(cl);\n      const top = Math.min(yO, yC);\n      const bot = Math.max(yO, yC);\n      ctx.strokeStyle = color;\n      ctx.lineWidth = 1;\n      if (thin) {\n        ctx.beginPath();\n        ctx.moveTo(xw, yH);\n        ctx.lineTo(xw, yL);\n        ctx.stroke();\n        continue;\n      }\n      // Wick, broken around a hollow body so it never shows through.\n      const hollow = c.palette === \"ink\" && rising;\n      ctx.beginPath();\n      ctx.moveTo(xw, yH);\n      ctx.lineTo(xw, hollow ? top : yL);\n      if (hollow) {\n        ctx.moveTo(xw, bot);\n        ctx.lineTo(xw, yL);\n      }\n      ctx.stroke();\n      const bx = Math.round(xc - bodyW / 2);\n      const bh = Math.max(1, Math.round(bot - top));\n      const by = Math.round(top);\n      if (hollow) {\n        ctx.strokeRect(bx + 0.5, by + 0.5, bodyW - 1, Math.max(0, bh - 1));\n      } else {\n        ctx.fillStyle = color;\n        ctx.fillRect(bx, by, bodyW, bh);\n      }\n    }\n    ctx.globalAlpha = 1;\n    ctx.restore();\n\n    // Last-close badge in the gutter.\n    const badge = badgeRef.current;\n    if (badge) {\n      const text = c.formatPrice(lastV);\n      if (s.badgeText !== text) {\n        s.badgeText = text;\n        badge.textContent = text;\n      }\n      badge.style.transform = `translate3d(${(plot.r + 4).toFixed(1)}px, ${(clamp(lastY, plot.t, plot.b) - 11).toFixed(2)}px, 0)`;\n      badge.style.opacity = \"1\";\n    }\n\n    // Crosshair, price tag, time tag and the readout row.\n    const cur = s.cursor !== null && s.cursor >= 0 && s.cursor < len ? s.cursor : null;\n    const priceTag = priceTagRef.current;\n    const timeTag = timeTagRef.current;\n    if (cur !== null) {\n      const x = crisp(xOf(cur) - 0.5);\n      ctx.strokeStyle = p.textSoft;\n      ctx.beginPath();\n      ctx.moveTo(x, plot.t);\n      ctx.lineTo(x, plot.vb);\n      ctx.stroke();\n      if (s.pointerY !== null && s.cursorSource === \"pointer\" && s.pointerY >= plot.t && s.pointerY <= plot.b) {\n        const y = crisp(s.pointerY);\n        ctx.strokeStyle = p.textFaint;\n        ctx.beginPath();\n        ctx.moveTo(plot.l, y);\n        ctx.lineTo(plot.r, y);\n        ctx.stroke();\n        if (priceTag) {\n          const v = range.hi - ((s.pointerY - plot.t) / pH) * (range.hi - range.lo);\n          const pt = c.formatPrice(v);\n          if (priceTag.textContent !== pt) priceTag.textContent = pt;\n          priceTag.style.transform = `translate3d(${(plot.r + 4).toFixed(1)}px, ${(s.pointerY - 11).toFixed(2)}px, 0)`;\n          priceTag.style.opacity = \"1\";\n        }\n      } else if (priceTag) priceTag.style.opacity = \"0\";\n      if (timeTag) {\n        // Write only on change, so the width read below doesn't force a layout every frame.\n        const tt = c.formatTime(rows[cur].t, \"axis\");\n        if (timeTag.textContent !== tt) timeTag.textContent = tt;\n        const tw = timeTag.offsetWidth;\n        const tx = clamp(xOf(cur) - tw / 2, plot.l, plot.r - tw);\n        timeTag.style.transform = `translate3d(${tx.toFixed(1)}px, ${(h - PAD_BOTTOM + 2).toFixed(1)}px, 0)`;\n        timeTag.style.opacity = \"1\";\n      }\n    } else {\n      if (priceTag) priceTag.style.opacity = \"0\";\n      if (timeTag) timeTag.style.opacity = \"0\";\n    }\n\n    const ri = cur ?? len - 1;\n    const rr = valueAt(ri);\n    const key = `${ri}|${rr.c.toFixed(6)}|${cur === null ? \"live\" : \"cur\"}`;\n    if (key !== s.readoutKey && readoutRef.current) {\n      s.readoutKey = key;\n      const prev = ri > 0 ? rows[ri - 1].c : rr.o;\n      const chg = prev ? (rr.c - prev) / prev : 0;\n      const spans = readoutRef.current.querySelectorAll<HTMLSpanElement>(\"[data-v]\");\n      const vals = [\n        c.formatTime(rows[ri].t, \"axis\"),\n        c.formatPrice(rr.o),\n        c.formatPrice(rr.h),\n        c.formatPrice(rr.l),\n        c.formatPrice(rr.c),\n        formatSigned(chg, (v) => formatPercent(v, 2)),\n        rows[ri].v !== undefined ? c.formatVolume(rows[ri].v!) : \"\",\n      ];\n      spans.forEach((el, k) => {\n        el.textContent = vals[k] ?? \"\";\n      });\n      const dir = readoutRef.current.querySelector<HTMLSpanElement>(\"[data-dir]\");\n      if (dir) {\n        dir.textContent = chg >= 0 ? \"▲\" : \"▼\";\n        dir.style.color = chg >= 0 ? (c.palette === \"semantic\" ? p.success : p.accentInk) : c.palette === \"semantic\" ? p.error : p.textMuted;\n      }\n    }\n\n    const keep =\n      !viewSettled || !rangeSettled || !headSettled || !volSettled || s.enter < 1 || (c.attract && !c.reduce) || s.drag !== null;\n    return keep;\n  });\n\n  // Prop sync: data, posed window and posed cursor.\n  useEffect(() => {\n    const s = st.current;\n    const len = data.length;\n    if (s.follow && !visible && len) {\n      // Following the live edge: slide the window so the newest candle stays in view.\n      const w = s.te - s.ts;\n      if (s.te >= len - 1) {\n        const [a, b] = clampView(len - w + 0.0, len, len);\n        s.ts = a;\n        s.te = b;\n      }\n    }\n    wake();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, wake]);\n\n  useEffect(() => {\n    if (!visible) return;\n    const s = st.current;\n    const [a, b] = clampView(visible[0], visible[1], data.length);\n    s.ts = a;\n    s.te = b;\n    s.follow = false;\n    s.autoFit = false;\n    wake();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible?.[0], visible?.[1], wake]);\n\n  useEffect(() => {\n    if (cursor === undefined) return;\n    const s = st.current;\n    s.cursor = cursor;\n    s.cursorSource = cursor === null ? null : \"prop\";\n    wake();\n  }, [cursor, wake]);\n\n  useEffect(() => {\n    wake();\n  }, [pal, palette, showVolume, reduce, attract, wake]);\n\n  const markInput = () => {\n    st.current.lastInput = performance.now();\n    if (st.current.cursorSource === \"attract\") {\n      st.current.cursor = null;\n      st.current.cursorSource = null;\n    }\n  };\n\n  const setTarget = (a: number, b: number, source: \"user\" | \"follow\" = \"user\") => {\n    const s = st.current;\n    const [x, y] = clampView(a, b, data.length);\n    s.ts = x;\n    s.te = y;\n    if (source === \"user\") s.autoFit = false;\n    if (source === \"user\") s.follow = y >= data.length - 0.5;\n    onVisibleChange?.([x, y]);\n    wake();\n  };\n\n  const describe = (i: number) => {\n    const r = data[i];\n    if (!r) return \"\";\n    const prev = i > 0 ? data[i - 1].c : r.o;\n    const chg = prev ? (r.c - prev) / prev : 0;\n    return `${formatTime(r.t, \"full\")}, open ${formatPrice(r.o)}, high ${formatPrice(r.h)}, low ${formatPrice(r.l)}, close ${formatPrice(r.c)}, ${chg >= 0 ? \"up\" : \"down\"} ${formatPercent(Math.abs(chg), 2)}`;\n  };\n\n  const setCursor = (i: number | null, source: RunState[\"cursorSource\"]) => {\n    const s = st.current;\n    if (i === s.cursor && source === s.cursorSource) return;\n    s.cursor = i;\n    s.cursorSource = i === null ? null : source;\n    onCursorChange?.(i, i === null ? null : data[i] ?? null);\n    // Speak keyboard moves only; a pointer sweep would flood the live region.\n    if (i !== null && source === \"keyboard\") say(describe(i));\n    wake();\n  };\n\n  const localX = (e: PointerEvent<HTMLDivElement>) => {\n    const rect = rectRef.current ?? wrapperRef.current?.getBoundingClientRect() ?? null;\n    if (!rect) return null;\n    return { x: e.clientX - rect.left, y: e.clientY - rect.top };\n  };\n\n  const indexAt = (x: number) => {\n    const s = st.current;\n    const i = Math.floor(s.vs + (x - s.plot.l) / s.cw);\n    return clamp(i, 0, data.length - 1);\n  };\n\n  const onPointerEnter = () => {\n    markInput();\n    if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect();\n  };\n\n  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {\n    markInput();\n    if (wrapperRef.current) rectRef.current = wrapperRef.current.getBoundingClientRect();\n    const pt = localX(e);\n    if (!pt) return;\n    const s = st.current;\n    s.drag = { x: pt.x, vs: s.ts, ve: s.te, id: e.pointerId, moved: false };\n    e.currentTarget.setPointerCapture(e.pointerId);\n    // A tap on touch has no hover, so it places the crosshair itself.\n    if (e.pointerType === \"touch\" && pt.x >= s.plot.l && pt.x <= s.plot.r && pt.y >= s.plot.t && pt.y <= s.plot.vb) {\n      s.pointerY = pt.y;\n      setCursor(indexAt(pt.x), \"pointer\");\n    }\n  };\n\n  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {\n    markInput();\n    const pt = localX(e);\n    if (!pt) return;\n    const s = st.current;\n    if (s.drag && s.drag.id === e.pointerId) {\n      const dx = pt.x - s.drag.x;\n      if (Math.abs(dx) > 3) s.drag.moved = true;\n      if (s.drag.moved) {\n        const shift = -dx / s.cw;\n        setTarget(s.drag.vs + shift, s.drag.ve + shift);\n      }\n    }\n    if (pt.x < s.plot.l || pt.x > s.plot.r || pt.y < s.plot.t || pt.y > s.plot.vb) {\n      if (s.cursorSource === \"pointer\") setCursor(null, null);\n      return;\n    }\n    s.pointerY = pt.y;\n    setCursor(indexAt(pt.x), \"pointer\");\n    wake();\n  };\n\n  const endDrag = (e: PointerEvent<HTMLDivElement>) => {\n    const s = st.current;\n    if (s.drag && s.drag.id === e.pointerId) {\n      s.drag = null;\n      wake();\n    }\n  };\n\n  const onPointerLeave = () => {\n    const s = st.current;\n    s.pointerY = null;\n    if (s.cursorSource === \"pointer\") setCursor(null, null);\n  };\n\n  // Wheel: pinch (ctrl+wheel) always zooms; plain wheel zooms once the chart has focus, so the page\n  // still scrolls past an unfocused chart. Horizontal wheel pans.\n  useEffect(() => {\n    const el = wrapperRef.current;\n    if (!el) return;\n    const onWheel = (e: WheelEvent) => {\n      const s = st.current;\n      const focused = el.contains(document.activeElement);\n      const horizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY);\n      if (!e.ctrlKey && !focused && !horizontal) return;\n      e.preventDefault();\n      s.lastInput = performance.now();\n      s.autoFit = false;\n      const rect = el.getBoundingClientRect();\n      const x = e.clientX - rect.left;\n      const len = cfg.current.data.length;\n      if (horizontal && !e.ctrlKey) {\n        const shift = e.deltaX / Math.max(1, s.cw);\n        const [a, b] = clampView(s.ts + shift, s.te + shift, len);\n        s.ts = a;\n        s.te = b;\n        s.follow = b >= len - 0.5;\n      } else {\n        const k = Math.exp(e.deltaY * (e.ctrlKey ? 0.01 : 0.0015));\n        const anchor = s.vs + (clamp(x, s.plot.l, s.plot.r) - s.plot.l) / Math.max(1e-6, s.cw);\n        const frac = (anchor - s.ts) / Math.max(1e-6, s.te - s.ts);\n        const w = clamp((s.te - s.ts) * k, Math.min(MIN_CANDLES, len), len + 4);\n        const a0 = anchor - frac * w;\n        const [a, b] = clampView(a0, a0 + w, len);\n        s.ts = a;\n        s.te = b;\n        s.follow = b >= len - 0.5;\n      }\n      cfg.current.onVisibleChange?.([s.ts, s.te]);\n      wake();\n    };\n    el.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => el.removeEventListener(\"wheel\", onWheel);\n  }, [wake]);\n\n  const zoomBy = (k: number) => {\n    const s = st.current;\n    const len = data.length;\n    const anchor = s.cursor ?? s.te - 1;\n    const frac = (anchor + 0.5 - s.ts) / Math.max(1e-6, s.te - s.ts);\n    const w = clamp((s.te - s.ts) * k, Math.min(MIN_CANDLES, len), len + 4);\n    const a0 = anchor + 0.5 - frac * w;\n    setTarget(a0, a0 + w);\n  };\n\n  const ensureVisible = (i: number) => {\n    const s = st.current;\n    const w = s.te - s.ts;\n    if (i < s.ts + 1) setTarget(i - 1, i - 1 + w);\n    else if (i > s.te - 2) setTarget(i + 2 - w, i + 2);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    markInput();\n    const s = st.current;\n    const len = data.length;\n    if (!len) return;\n    const cur = s.cursor ?? len - 1;\n    let next: number | null = null;\n    if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n      const step = (e.key === \"ArrowLeft\" ? -1 : 1) * (e.shiftKey ? 10 : 1);\n      // The first press lands on the newest candle; later presses step from there.\n      next = s.cursor === null ? len - 1 : clamp(cur + step, 0, len - 1);\n    } else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = len - 1;\n    else if (e.key === \"+\" || e.key === \"=\") {\n      e.preventDefault();\n      zoomBy(0.8);\n      return;\n    } else if (e.key === \"-\" || e.key === \"_\") {\n      e.preventDefault();\n      zoomBy(1.25);\n      return;\n    } else if (e.key === \"0\") {\n      e.preventDefault();\n      s.autoFit = true;\n      s.follow = true;\n      wake();\n      return;\n    } else if (e.key === \"Escape\") {\n      if (s.cursor === null) return;\n      e.preventDefault();\n      setCursor(null, null);\n      return;\n    }\n    if (next === null) return;\n    e.preventDefault();\n    s.pointerY = null;\n    ensureVisible(next);\n    setCursor(next, \"keyboard\");\n  };\n\n  const tableRows = useMemo(\n    () => data.map((r) => [formatTime(r.t, \"full\"), formatPrice(r.o), formatPrice(r.h), formatPrice(r.l), formatPrice(r.c), r.v !== undefined ? formatVolume(r.v) : \"\"]),\n    [data, formatTime, formatPrice, formatVolume],\n  );\n  const last = data[data.length - 1];\n  const summary = last\n    ? `${ariaLabel}, ${data.length} candles, last close ${formatPrice(last.c)} on ${formatTime(last.t, \"full\")}`\n    : `${ariaLabel}, no data`;\n\n  return (\n    <div\n      ref={rootRef}\n      data-loop=\"idle\"\n      className={cn(\"@container relative w-full select-none text-[color:var(--bjork-text)]\", className)}\n      style={{ ...vars, height }}\n    >\n      <div\n        ref={wrapperRef}\n        role=\"group\"\n        aria-label={`${ariaLabel}. Arrow keys move between candles, plus and minus zoom, 0 resets.`}\n        aria-roledescription=\"chart\"\n        tabIndex={0}\n        onPointerEnter={onPointerEnter}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={endDrag}\n        onPointerCancel={endDrag}\n        onPointerLeave={onPointerLeave}\n        onDoubleClick={() => {\n          st.current.autoFit = true;\n          st.current.follow = true;\n          wake();\n        }}\n        onKeyDown={onKeyDown}\n        onFocus={markInput}\n        className={cn(\"absolute inset-0 cursor-crosshair touch-pan-y rounded-[10px]\", chartFocusRing)}\n      >\n        <div ref={hostRef} className=\"absolute inset-0\">\n          <canvas ref={canvasRef} role=\"img\" aria-label={summary} className=\"pointer-events-none absolute left-0 top-0\" />\n        </div>\n\n        {/* Readout: date, OHLC, change, volume. Text is written from the loop. */}\n        <div\n          ref={readoutRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2 right-2 top-1 flex h-5 items-center gap-3 overflow-hidden whitespace-nowrap font-mono text-[11px] leading-none tabular-nums text-[color:var(--bjork-text-soft)] @max-[420px]:gap-2\"\n        >\n          <span data-v className=\"text-[color:var(--bjork-text-medium)] @max-[460px]:hidden\" />\n          <span>\n            O <span data-v className=\"text-[color:var(--bjork-text)]\" />\n          </span>\n          <span>\n            H <span data-v className=\"text-[color:var(--bjork-text)]\" />\n          </span>\n          <span>\n            L <span data-v className=\"text-[color:var(--bjork-text)]\" />\n          </span>\n          <span>\n            C <span data-v className=\"text-[color:var(--bjork-text)]\" />\n          </span>\n          <span className=\"inline-flex items-center gap-1\">\n            {/* The triangles sit low on the cap line; 0.5px up centres them on the digits (blur test). */}\n            <span data-dir className=\"-translate-y-[0.5px] text-[10px]\" />\n            <span data-v className=\"text-[color:var(--bjork-text)]\" />\n          </span>\n          {showVolume && (\n            <span className=\"@max-[600px]:hidden\">\n              Vol <span data-v className=\"text-[color:var(--bjork-text-medium)]\" />\n            </span>\n          )}\n        </div>\n\n        {Array.from({ length: PRICE_LABELS }).map((_, i) => (\n          <span\n            key={`p${i}`}\n            ref={(el) => {\n              priceLabelRefs.current[i] = el;\n            }}\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute left-0 top-0 whitespace-nowrap font-mono text-[10px] leading-none tabular-nums text-[color:var(--bjork-text-faint)] opacity-0 [text-box:trim-both_cap_alphabetic]\"\n          />\n        ))}\n        {Array.from({ length: TIME_LABELS }).map((_, i) => (\n          <span\n            key={`t${i}`}\n            ref={(el) => {\n              timeLabelRefs.current[i] = el;\n            }}\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute left-0 top-0 whitespace-nowrap font-mono text-[10px] leading-none tabular-nums text-[color:var(--bjork-text-faint)] opacity-0 [text-box:trim-both_cap_alphabetic]\"\n          />\n        ))}\n\n        <span\n          ref={badgeRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-0 top-0 inline-flex h-[22px] items-center rounded-[6px] bg-[color:var(--bjork-accent-fill)] px-1.5 font-mono text-[11px] leading-none tabular-nums text-[color:var(--bjork-accent-foreground)] opacity-0 [text-box:trim-both_cap_alphabetic]\"\n        />\n        <span\n          ref={priceTagRef}\n          aria-hidden=\"true\"\n          className={`pointer-events-none absolute left-0 top-0 inline-flex h-[22px] items-center rounded-[6px] ${chartTagEdge} bg-[color:var(--bjork-surface-hover)] px-1.5 font-mono text-[11px] leading-none tabular-nums text-[color:var(--bjork-text)] opacity-0 [text-box:trim-both_cap_alphabetic]`}\n        />\n        <span\n          ref={timeTagRef}\n          aria-hidden=\"true\"\n          className={`pointer-events-none absolute left-0 top-0 inline-flex h-5 items-center rounded-[6px] ${chartTagEdge} bg-[color:var(--bjork-surface-hover)] px-1.5 font-mono text-[10px] leading-none tabular-nums text-[color:var(--bjork-text)] opacity-0 [text-box:trim-both_cap_alphabetic]`}\n        />\n      </div>\n\n      <ChartTable caption={ariaLabel} columns={TABLE_COLUMNS} rows={tableRows} />\n      <ChartAnnouncer ref={announcer} />\n    </div>\n  );\n}\n\n// Seeded OHLC series for demos: a drifting walk with volatility clustering.\nexport function createCandles(seed: number, count: number, opts?: { start?: number; base?: number; stepMs?: number; vol?: number }): Candle[] {\n  let a = seed >>> 0;\n  const rnd = () => {\n    a = (a + 0x6d2b79f5) >>> 0;\n    let t = a;\n    t = Math.imul(t ^ (t >>> 15), t | 1);\n    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n  };\n  const gauss = () => Math.sqrt(-2 * Math.log(Math.max(rnd(), 1e-9))) * Math.cos(2 * Math.PI * rnd());\n  const start = opts?.start ?? Date.UTC(2025, 0, 2);\n  const stepMs = opts?.stepMs ?? 86400000;\n  let price = opts?.base ?? 100;\n  let sigma = opts?.vol ?? 0.016;\n  const out: Candle[] = [];\n  for (let i = 0; i < count; i++) {\n    sigma = Math.max(0.006, Math.min(0.05, sigma * (0.92 + 0.16 * rnd()) + (rnd() < 0.04 ? 0.01 : 0)));\n    const o = price;\n    const drift = 0.0006 + Math.sin(i / 23) * 0.002;\n    const c = o * (1 + drift + gauss() * sigma);\n    const h = Math.max(o, c) * (1 + Math.abs(gauss()) * sigma * 0.55);\n    const l = Math.min(o, c) * (1 - Math.abs(gauss()) * sigma * 0.55);\n    const v = Math.round((0.6 + rnd() * 0.8) * 1_200_000 * (1 + (sigma - 0.012) * 30));\n    out.push({ t: start + i * stepMs, o, h, l, c, v });\n    price = c;\n  }\n  return out;\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/charts/candlestick-chart.tsx"
    },
    {
      "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"
    },
    {
      "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/charts/_kit/canvas.ts",
      "content": "\"use client\";\n\n// Canvas plumbing shared by the Charts collection. One hook gives a chart a measured host, a\n// DPR-capped canvas that follows it, and a draw loop that pauses offscreen and idles when settled.\n\nimport { useCallback, useEffect, useRef, type RefObject } from \"react\";\nimport { useVisibleLoop } from \"@/components/bjork-ui/_core/loop\";\nimport { sizeCanvas, useElementSize } from \"@/components/bjork-ui/_core/canvas\";\nimport { cubicBezier, ease } from \"@/components/bjork-ui/_core/motion\";\n\nexport interface ChartFrame {\n  ctx: CanvasRenderingContext2D;\n  w: number;\n  h: number;\n  dt: number;\n  t: number;\n}\n\n/**\n * `draw` runs inside `useVisibleLoop`. Return true to keep animating, false to go idle until `wake()`.\n * The loop root is `rootRef` (gets `data-loop`). The canvas is sized to `hostRef`.\n */\nexport function useChartCanvas(draw: (f: ChartFrame) => boolean) {\n  const rootRef = useRef<HTMLDivElement>(null);\n  const hostRef = useRef<HTMLDivElement>(null);\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const size = useElementSize(hostRef);\n  const sizeRef = useRef({ w: 0, h: 0, dpr: 1 });\n  const drawRef = useRef(draw);\n  useEffect(() => {\n    drawRef.current = draw;\n  });\n\n  const frame = useCallback((dt: number, t: number) => {\n    const canvas = canvasRef.current;\n    const { w, h, dpr } = sizeRef.current;\n    if (!canvas || !w || !h) return true;\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return false;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.clearRect(0, 0, w, h);\n    return drawRef.current({ ctx, w, h, dt, t });\n  }, []);\n\n  const { wake } = useVisibleLoop(rootRef as RefObject<HTMLElement | null>, frame);\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    if (!canvas || !size.width || !size.height) return;\n    sizeRef.current = { w: size.width, h: size.height, dpr: sizeCanvas(canvas, size.width, size.height) };\n    wake();\n  }, [size.width, size.height, wake]);\n\n  return { rootRef, hostRef, canvasRef, size, wake };\n}\n\n// The house ease-out for entrances, usable in rAF code.\nexport const easeOut = cubicBezier(...(ease.out as unknown as [number, number, number, number]));\nexport const easeInOut = cubicBezier(...(ease.inOut as unknown as [number, number, number, number]));\n\n// A 45 degree hatch pattern in `color`, for counterfactual and loss regions.\nconst hatchCache = new Map<string, CanvasPattern | null>();\nexport function hatchPattern(ctx: CanvasRenderingContext2D, color: string, gap = 5, width = 1): CanvasPattern | null {\n  const key = `${color}|${gap}|${width}`;\n  if (hatchCache.has(key)) return hatchCache.get(key)!;\n  if (typeof document === \"undefined\") return null;\n  const tile = document.createElement(\"canvas\");\n  const s = gap * 2;\n  tile.width = s * 2;\n  tile.height = s * 2;\n  const c = tile.getContext(\"2d\");\n  if (!c) return null;\n  c.scale(2, 2);\n  c.strokeStyle = color;\n  c.lineWidth = width;\n  c.beginPath();\n  for (let k = -s; k <= s * 2; k += gap) {\n    c.moveTo(k, s);\n    c.lineTo(k + s, 0);\n  }\n  c.stroke();\n  const pattern = ctx.createPattern(tile, \"repeat\");\n  pattern?.setTransform(new DOMMatrix().scale(0.5, 0.5));\n  hatchCache.set(key, pattern);\n  return pattern;\n}\n\n// Rounded rect path with independent top and bottom radii (bars: round data end, square baseline).\nexport function roundRectPath(\n  ctx: CanvasRenderingContext2D,\n  x: number,\n  y: number,\n  w: number,\n  h: number,\n  rTop: number,\n  rBottom = 0,\n) {\n  if (w <= 0 || h <= 0) return;\n  const rt = Math.min(rTop, w / 2, h / 2);\n  const rb = Math.min(rBottom, w / 2, h / 2);\n  ctx.moveTo(x + rt, y);\n  ctx.lineTo(x + w - rt, y);\n  if (rt) ctx.arcTo(x + w, y, x + w, y + rt, rt);\n  ctx.lineTo(x + w, y + h - rb);\n  if (rb) ctx.arcTo(x + w, y + h, x + w - rb, y + h, rb);\n  ctx.lineTo(x + rb, y + h);\n  if (rb) ctx.arcTo(x, y + h, x, y + h - rb, rb);\n  ctx.lineTo(x, y + rt);\n  if (rt) ctx.arcTo(x, y, x + rt, y, rt);\n  ctx.closePath();\n}\n\nexport interface PlacedLabel {\n  text: string;\n  x: number;\n  y: number;\n  /** translate percentages applied after the position, e.g. -50 to centre. */\n  ax?: number;\n  ay?: number;\n  opacity?: number;\n}\n\n// Writes a pool of absolutely positioned label spans from the loop: text only when it changes,\n// position by transform only. Unused spans hide.\nexport function writeLabels(els: (HTMLElement | null)[], cache: string[], items: PlacedLabel[]) {\n  for (let i = 0; i < els.length; i++) {\n    const el = els[i];\n    if (!el) continue;\n    const it = items[i];\n    if (!it) {\n      if (el.style.opacity !== \"0\") el.style.opacity = \"0\";\n      continue;\n    }\n    if (cache[i] !== it.text) {\n      cache[i] = it.text;\n      el.textContent = it.text;\n    }\n    el.style.opacity = String(it.opacity ?? 1);\n    el.style.transform = `translate3d(${it.x.toFixed(2)}px, ${it.y.toFixed(2)}px, 0) translate(${it.ax ?? 0}%, ${it.ay ?? -50}%)`;\n  }\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/charts/_kit/canvas.ts"
    },
    {
      "path": "components/bjork-ui/_core/loop.ts",
      "content": "\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, type RefObject } from \"react\";\n\nexport interface VisibleLoopOptions {\n  enabled?: boolean;\n  fpsCap?: number;\n  rootMargin?: string;\n}\n\n/**\n * Runs `frame(dt, t)` on requestAnimationFrame while the element is near the viewport,\n * the tab is visible and `enabled` is not false. Return `false` from `frame` to go idle\n * until `wake()` is called. Writes `data-loop` on the element: running, idle or paused.\n */\nexport function useVisibleLoop(\n  ref: RefObject<HTMLElement | null>,\n  frame: (dt: number, t: number) => boolean | void,\n  opts?: VisibleLoopOptions,\n): { wake: () => void } {\n  const enabled = opts?.enabled !== false;\n  const fpsCap = opts?.fpsCap ?? 0;\n  const rootMargin = opts?.rootMargin ?? \"96px\";\n\n  const frameRef = useRef(frame);\n  useEffect(() => {\n    frameRef.current = frame;\n  }, [frame]);\n\n  const wakeRef = useRef<() => void>(() => {});\n  const wake = useCallback(() => wakeRef.current(), []);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof window === \"undefined\") return;\n\n    let wants = true; // false once the frame callback returns false\n    let inView = false;\n    let raf = 0;\n    let last = 0;\n    let t = 0;\n    const minFrame = fpsCap > 0 ? 1000 / fpsCap : 0;\n\n    const canRun = () => enabled && inView && document.visibilityState === \"visible\";\n    const stop = () => {\n      if (raf) cancelAnimationFrame(raf);\n      raf = 0;\n    };\n\n    const update = () => {\n      if (!enabled) {\n        stop();\n        el.dataset.loop = \"paused\";\n        return;\n      }\n      if (!wants) {\n        stop();\n        el.dataset.loop = \"idle\";\n        return;\n      }\n      if (!canRun()) {\n        stop();\n        el.dataset.loop = \"paused\";\n        return;\n      }\n      el.dataset.loop = \"running\";\n      if (!raf) {\n        last = performance.now();\n        raf = requestAnimationFrame(tick);\n      }\n    };\n\n    const tick = (now: number) => {\n      raf = 0;\n      if (!canRun() || !wants) {\n        update();\n        return;\n      }\n      const elapsed = now - last;\n      if (minFrame && elapsed < minFrame - 0.5) {\n        raf = requestAnimationFrame(tick);\n        return;\n      }\n      last = now;\n      const dt = Math.min(0.05, Math.max(0, elapsed / 1000));\n      t += dt;\n      const keep = frameRef.current(dt, t);\n      if (keep === false) {\n        wants = false;\n        update();\n        return;\n      }\n      raf = requestAnimationFrame(tick);\n    };\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        inView = entry.isIntersecting;\n        update();\n      },\n      { rootMargin },\n    );\n    observer.observe(el);\n\n    const onVisibility = () => update();\n    document.addEventListener(\"visibilitychange\", onVisibility);\n\n    wakeRef.current = () => {\n      wants = true;\n      update();\n    };\n\n    update();\n\n    return () => {\n      stop();\n      observer.disconnect();\n      document.removeEventListener(\"visibilitychange\", onVisibility);\n      wakeRef.current = () => {};\n    };\n  }, [ref, enabled, fpsCap, rootMargin]);\n\n  return useMemo(() => ({ wake }), [wake]);\n}\n\n// matchMedia based check. False on the server.\nexport function isCoarsePointer(): boolean {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return false;\n  return window.matchMedia(\"(pointer: coarse)\").matches;\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/loop.ts"
    },
    {
      "path": "components/bjork-ui/_core/canvas.ts",
      "content": "\"use client\";\n\nimport { useEffect, useState, type RefObject } from \"react\";\nimport { isCoarsePointer } from \"./loop\";\n\n// Caps DPR at 1.5 on coarse pointers and 2 otherwise.\nexport function defaultMaxDpr(): number {\n  return isCoarsePointer() ? 1.5 : 2;\n}\n\n// Sets the backing size for a CSS box and returns the DPR used.\nexport function sizeCanvas(\n  canvas: HTMLCanvasElement,\n  cssW: number,\n  cssH: number,\n  maxDpr: number = defaultMaxDpr(),\n): number {\n  const dpr = Math.min(typeof window !== \"undefined\" ? window.devicePixelRatio || 1 : 1, maxDpr);\n  canvas.width = Math.max(1, Math.round(cssW * dpr));\n  canvas.height = Math.max(1, Math.round(cssH * dpr));\n  canvas.style.width = `${cssW}px`;\n  canvas.style.height = `${cssH}px`;\n  return dpr;\n}\n\n// Rounded size of an element, kept current with a ResizeObserver.\nexport function useElementSize(ref: RefObject<HTMLElement | null>): { width: number; height: number } {\n  const [size, setSize] = useState({ width: 0, height: 0 });\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver((entries) => {\n      const box = entries[0]?.contentRect;\n      if (!box) return;\n      const width = Math.round(box.width);\n      const height = Math.round(box.height);\n      setSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  return size;\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/_core/canvas.ts"
    },
    {
      "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/charts/_kit/chrome.tsx",
      "content": "\"use client\";\n\n// Shared chart chrome for the Charts collection: theme vars, the hover tooltip, legend keys and the\n// screen-reader table twin every chart ships with.\n\nimport { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\nimport { BJORK_PALETTE, type BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { useBjorkTone } from \"@/components/bjork-ui/_core/tone\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { surfaceVars } from \"@/components/bjork-ui/_core/surface\";\n\nexport type ChartPalette = (typeof BJORK_PALETTE)[BjorkTone];\n\n// Tokens a chart root writes so DOM overlays follow `tone` even outside a themed page.\nexport function chartVars(pal: ChartPalette): CSSProperties {\n  return {\n    ...surfaceVars(pal === BJORK_PALETTE.light ? \"light\" : \"dark\"),\n    \"--bjork-accent\": pal.accent,\n    \"--bjork-accent-ink\": pal.accentInk,\n    \"--bjork-accent-fill\": pal.accentFill,\n    \"--bjork-accent-soft\": pal.accentSoft,\n    \"--bjork-accent-foreground\": pal.accentFg,\n    \"--bjork-text\": pal.text,\n    \"--bjork-text-medium\": pal.textMedium,\n    \"--bjork-text-muted\": pal.textMuted,\n    \"--bjork-text-soft\": pal.textSoft,\n    \"--bjork-text-faint\": pal.textFaint,\n    \"--bjork-hair\": pal.hair,\n    \"--bjork-border\": pal.border,\n    \"--bjork-border-strong\": pal.borderStrong,\n    \"--bjork-surface\": pal.surface,\n    \"--bjork-surface-hover\": pal.raised,\n    \"--bjork-ring-offset\": pal.bg,\n    // The surface a chart sits on, for label halos and cut-outs. Override it on the root if needed.\n    \"--bjork-chart-bg\": pal.stage,\n    \"--bjork-success\": pal.success,\n    \"--bjork-warning\": pal.warning,\n    \"--bjork-error\": pal.error,\n  } as CSSProperties;\n}\n\n// Tone, palette, reduced motion and root vars in one call.\nexport function useChartTheme(toneProp?: BjorkTone) {\n  const tone = useBjorkTone(toneProp);\n  const pal = BJORK_PALETTE[tone];\n  const reduce = !!useReducedMotion();\n  return { tone, pal, reduce, vars: chartVars(pal) };\n}\n\n// Focus ring shared by every focusable plot surface.\nexport const chartFocusRing =\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\n// Mono label style: 10px Geist Mono, tabular, cap-trimmed.\nexport const chartMono = \"font-mono text-[10px] leading-none tabular-nums [text-box:trim-both_cap_alphabetic]\";\n\n// Floating chart surfaces follow the library canon (_core/surface.ts): a 1px border plus the inset light\n// shadow. Hover cards take the full surface shadow; small readout tags take the soft one. Colours come\n// from chartVars, so light and dark both follow the tone.\nexport const chartCardEdge = \"border border-[color:var(--bjork-border)] shadow-[var(--bjork-shadow-surface)]\";\nexport const chartTagEdge = \"border border-[color:var(--bjork-border)] shadow-[var(--bjork-shadow-soft)]\";\n\nexport interface TooltipRow {\n  key?: string;\n  label: ReactNode;\n  value: ReactNode;\n  color?: string;\n  dashed?: boolean;\n  strong?: boolean;\n}\n\n// The hover card. Values lead, labels follow, series keyed with a short line in the series colour.\n// Position it with `style.transform` from the caller; it never takes pointer events.\nexport const ChartTooltip = forwardRef<\n  HTMLDivElement,\n  { title?: ReactNode; rows: TooltipRow[]; visible: boolean; className?: string; style?: CSSProperties; tipKey?: string }\n>(function ChartTooltip({ title, rows, visible, className, style, tipKey }, ref) {\n  return (\n    <div\n      ref={ref}\n      data-key={tipKey}\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        `pointer-events-none absolute left-0 top-0 z-10 min-w-[120px] rounded-[10px] ${chartCardEdge} bg-[color:var(--bjork-surface)] px-2.5 py-2 transition-opacity duration-150 ease-out`,\n        visible ? \"opacity-100\" : \"opacity-0\",\n        className,\n      )}\n      style={style}\n    >\n      {title !== undefined && (\n        <div className=\"mb-1.5 whitespace-nowrap font-mono text-[10px] uppercase leading-none tracking-[0.08em] text-[color:var(--bjork-text-soft)] [text-box:trim-both_cap_alphabetic]\">\n          {title}\n        </div>\n      )}\n      <div className=\"flex flex-col gap-[7px]\">\n        {rows.map((r, i) => (\n          <div key={r.key ?? i} className=\"flex items-center gap-2 whitespace-nowrap leading-none\">\n            {r.color && (\n              <span\n                aria-hidden=\"true\"\n                className=\"inline-block w-2.5 shrink-0\"\n                style={\n                  r.dashed\n                    ? { borderTop: `1.5px dashed ${r.color}`, height: 0 }\n                    : { background: r.color, height: 2, borderRadius: 1 }\n                }\n              />\n            )}\n            <span\n              className={cn(\n                \"font-mono text-[12px] tabular-nums [text-box:trim-both_cap_alphabetic]\",\n                r.strong === false ? \"text-[color:var(--bjork-text-medium)]\" : \"text-[color:var(--bjork-text)]\",\n              )}\n            >\n              {r.value}\n            </span>\n            <span className=\"ml-auto pl-3 font-bjork-alpha text-[11px] text-[color:var(--bjork-text-muted)] [text-box:trim-both_cap_alphabetic]\">\n              {r.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n\n// Places a tooltip of size (tw, th) next to (x, y) inside a (w, h) box, flipping away from edges.\nexport function placeTooltip(\n  x: number,\n  y: number,\n  tw: number,\n  th: number,\n  w: number,\n  h: number,\n  gap = 12,\n): { x: number; y: number } {\n  let tx = x + gap;\n  if (tx + tw > w) tx = x - gap - tw;\n  if (tx < 0) tx = Math.max(0, Math.min(w - tw, x - tw / 2));\n  let ty = y - th - gap;\n  if (ty < 0) ty = Math.min(h - th, y + gap);\n  return { x: Math.round(tx), y: Math.round(Math.max(0, ty)) };\n}\n\nexport interface LegendItem {\n  id: string;\n  label: string;\n  color: string;\n  shape?: \"line\" | \"dash\" | \"rect\" | \"dot\";\n  muted?: boolean;\n}\n\n// A legend row. Keys mirror the mark: line for lines, rect for areas and bars.\nexport function ChartLegend({\n  items,\n  className,\n  onHover,\n  activeId,\n}: {\n  items: LegendItem[];\n  className?: string;\n  onHover?: (id: string | null) => void;\n  activeId?: string | null;\n}) {\n  return (\n    <div className={cn(\"flex flex-wrap items-center gap-x-4 gap-y-2\", className)}>\n      {items.map((it) => {\n        const dim = (activeId && activeId !== it.id) || it.muted;\n        return (\n          <span\n            key={it.id}\n            onPointerEnter={onHover ? () => onHover(it.id) : undefined}\n            onPointerLeave={onHover ? () => onHover(null) : undefined}\n            className={cn(\n              \"inline-flex items-center gap-1.5 font-bjork-alpha text-[11px] font-medium leading-3 transition-opacity duration-150 ease-out\",\n              dim ? \"opacity-45\" : \"opacity-100\",\n              \"text-[color:var(--bjork-text-medium)]\",\n            )}\n          >\n            <LegendKey color={it.color} shape={it.shape} />\n            {it.label}\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function LegendKey({ color, shape = \"rect\" }: { color: string; shape?: LegendItem[\"shape\"] }) {\n  if (shape === \"line\") return <span aria-hidden=\"true\" className=\"inline-block h-[2px] w-2.5 rounded-[1px]\" style={{ background: color }} />;\n  if (shape === \"dash\") return <span aria-hidden=\"true\" className=\"inline-block h-0 w-2.5\" style={{ borderTop: `1.5px dashed ${color}` }} />;\n  if (shape === \"dot\") return <span aria-hidden=\"true\" className=\"inline-block size-2 rounded-full\" style={{ background: color }} />;\n  return <span aria-hidden=\"true\" className=\"inline-block size-2 rounded-[2px]\" style={{ background: color }} />;\n}\n\n// The table twin. Every value the chart shows is reachable here without hovering.\n// Memoised: hover state re-renders the chart, never the table. Pass memoised rows.\nexport const ChartTable = memo(function ChartTable({\n  caption,\n  columns,\n  rows,\n}: {\n  caption: string;\n  columns: string[];\n  rows: (string | number)[][];\n}) {\n  return (\n    <table className=\"sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {columns.map((c) => (\n            <th key={c} scope=\"col\">\n              {c}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((r, i) => (\n          <tr key={i}>\n            {r.map((cell, j) =>\n              j === 0 ? (\n                <th key={j} scope=\"row\">\n                  {cell}\n                </th>\n              ) : (\n                <td key={j}>{cell}</td>\n              ),\n            )}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n});\n\n// A pool of absolutely positioned spans the draw loop fills through `writeLabels`.\nexport function LabelPool({\n  count,\n  pool,\n  className,\n}: {\n  count: number;\n  pool: { current: (HTMLSpanElement | null)[] };\n  className?: string;\n}) {\n  return (\n    <>\n      {Array.from({ length: count }).map((_, i) => (\n        <span\n          key={i}\n          ref={(el) => {\n            pool.current[i] = el;\n          }}\n          aria-hidden=\"true\"\n          className={cn(\n            \"pointer-events-none absolute left-0 top-0 whitespace-nowrap opacity-0\",\n            className ?? \"font-mono text-[10px] leading-none tabular-nums text-[color:var(--bjork-text-faint)] [text-box:trim-both_cap_alphabetic]\",\n          )}\n        />\n      ))}\n    </>\n  );\n}\n\nexport interface TooltipContent {\n  key: string;\n  title?: ReactNode;\n  rows: TooltipRow[];\n}\n\nexport interface TooltipHandle {\n  /** Shows `content`, or hides with `null`. Same key is a no-op. */\n  set: (content: TooltipContent | null) => void;\n  readonly el: HTMLDivElement | null;\n  /** Measured size of the current content. */\n  readonly size: { w: number; h: number };\n}\n\n// A tooltip that owns its state, so hovering re-renders only the tooltip, never the chart.\n// The chart positions it from its draw loop through `handle.el.style.transform`.\nexport const HoverTooltip = forwardRef<TooltipHandle, { onMeasure?: () => void; className?: string }>(function HoverTooltip(\n  { onMeasure, className },\n  ref,\n) {\n  const [state, setState] = useState<{ content: TooltipContent | null; last: TooltipContent | null }>({ content: null, last: null });\n  const elRef = useRef<HTMLDivElement>(null);\n  const size = useRef({ w: 0, h: 0 });\n  const onMeasureRef = useRef(onMeasure);\n  useEffect(() => {\n    onMeasureRef.current = onMeasure;\n  });\n  useImperativeHandle(\n    ref,\n    () => ({\n      set: (content) =>\n        setState((prev) => {\n          if ((prev.content?.key ?? null) === (content?.key ?? null)) return prev;\n          return { content, last: content ?? prev.last };\n        }),\n      get el() {\n        return elRef.current;\n      },\n      get size() {\n        return size.current;\n      },\n    }),\n    [],\n  );\n  useLayoutEffect(() => {\n    const el = elRef.current;\n    if (!el) return;\n    size.current = { w: el.offsetWidth, h: el.offsetHeight };\n    onMeasureRef.current?.();\n  }, [state.last]);\n  const shown = state.content ?? state.last;\n  return <ChartTooltip ref={elRef} title={shown?.title} rows={shown?.rows ?? []} visible={!!state.content} className={className} />;\n});\n\nexport interface AnnouncerHandle {\n  say: (message: string) => void;\n}\n\n// Polite live region with a 250ms trailing throttle, isolated from the chart's renders.\nexport const ChartAnnouncer = forwardRef<AnnouncerHandle, { ms?: number }>(function ChartAnnouncer({ ms = 250 }, ref) {\n  const [message, setMessage] = useState(\"\");\n  const at = useRef(0);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n  useImperativeHandle(\n    ref,\n    () => ({\n      say: (text: string) => {\n        const now = performance.now();\n        if (timer.current) clearTimeout(timer.current);\n        if (now - at.current >= ms) {\n          at.current = now;\n          setMessage(text);\n        } else {\n          timer.current = setTimeout(() => {\n            at.current = performance.now();\n            setMessage(text);\n          }, ms);\n        }\n      },\n    }),\n    [ms],\n  );\n  return <LiveRegion message={message} />;\n});\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/charts/_kit/chrome.tsx"
    },
    {
      "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": "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/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/charts/_kit/scale.ts",
      "content": "// Shared chart math for the Charts collection: nice ticks, scales, damping, colour and number formatting.\n// Pure functions only. Every chart imports what it needs by path.\n\nexport function clamp(v: number, lo: number, hi: number): number {\n  return v < lo ? lo : v > hi ? hi : v;\n}\n\nexport function lerp(a: number, b: number, t: number): number {\n  return a + (b - a) * t;\n}\n\n// Maps v from [d0, d1] to [r0, r1]. Degenerate domains map to the range midpoint.\nexport function scaleLinear(d0: number, d1: number, r0: number, r1: number): (v: number) => number {\n  const span = d1 - d0;\n  if (!(Math.abs(span) > 1e-12)) return () => (r0 + r1) / 2;\n  const k = (r1 - r0) / span;\n  return (v: number) => r0 + (v - d0) * k;\n}\n\n// Frame-rate independent approach: moves `cur` toward `target` with time constant `tau` seconds.\nexport function damp(cur: number, target: number, tau: number, dt: number): number {\n  if (tau <= 0) return target;\n  return target + (cur - target) * Math.exp(-dt / tau);\n}\n\n// A \"nice\" step (1, 2, 2.5 or 5 x 10^k) that splits `span` into roughly `count` intervals.\nexport function niceStep(span: number, count = 5): number {\n  if (!(span > 0) || !Number.isFinite(span)) return 1;\n  const raw = span / Math.max(1, count);\n  const mag = 10 ** Math.floor(Math.log10(raw));\n  const r = raw / mag;\n  const m = r <= 1 ? 1 : r <= 2 ? 2 : r <= 2.5 ? 2.5 : r <= 5 ? 5 : 10;\n  return m * mag;\n}\n\n// Tick values at a nice step, inclusive of the domain ends when they land on the step.\nexport function niceTicks(lo: number, hi: number, count = 5): number[] {\n  if (!(hi > lo)) return [lo];\n  const step = niceStep(hi - lo, count);\n  const first = Math.ceil(lo / step - 1e-9);\n  const last = Math.floor(hi / step + 1e-9);\n  const out: number[] = [];\n  for (let n = first; n <= last; n++) out.push(Number((n * step).toFixed(12)));\n  return out;\n}\n\n// Expands [lo, hi] outward to the nearest nice step, so the outer gridlines sit on round values.\nexport function niceDomain(lo: number, hi: number, count = 5): [number, number] {\n  if (!(hi > lo)) {\n    const pad = Math.max(Math.abs(hi) * 0.1, 1);\n    return [lo - pad, hi + pad];\n  }\n  const step = niceStep(hi - lo, count);\n  return [Math.floor(lo / step + 1e-9) * step, Math.ceil(hi / step - 1e-9) * step];\n}\n\n// Half-pixel snap for crisp 1px hairlines.\nexport function crisp(v: number): number {\n  return Math.round(v) + 0.5;\n}\n\n// --- Colour -------------------------------------------------------------------------------------\n\nconst rgbCache = new Map<string, [number, number, number, number]>();\n\n// Parses #rgb, #rrggbb and rgba()/rgb() strings. Returns [r, g, b, a].\nexport function parseColor(c: string): [number, number, number, number] {\n  const hit = rgbCache.get(c);\n  if (hit) return hit;\n  let out: [number, number, number, number] = [0, 0, 0, 1];\n  const s = c.trim();\n  if (s.startsWith(\"#\")) {\n    let h = s.slice(1);\n    if (h.length === 3) h = h.split(\"\").map((ch) => ch + ch).join(\"\");\n    const n = parseInt(h.slice(0, 6), 16);\n    out = [(n >> 16) & 255, (n >> 8) & 255, n & 255, 1];\n  } else {\n    const m = s.match(/rgba?\\(([^)]+)\\)/);\n    if (m) {\n      const p = m[1].split(\",\").map((x) => parseFloat(x));\n      out = [p[0] ?? 0, p[1] ?? 0, p[2] ?? 0, p[3] ?? 1];\n    }\n  }\n  rgbCache.set(c, out);\n  return out;\n}\n\n// The colour at alpha `a`, multiplied with any alpha the colour already has.\nexport function withAlpha(c: string, a: number): string {\n  const [r, g, b, a0] = parseColor(c);\n  return `rgba(${r},${g},${b},${+(a0 * a).toFixed(4)})`;\n}\n\n// Mixes two opaque colours in sRGB. t = 0 gives `a`.\nexport function mixColor(a: string, b: string, t: number): string {\n  const ca = parseColor(a);\n  const cb = parseColor(b);\n  const r = Math.round(lerp(ca[0], cb[0], t));\n  const g = Math.round(lerp(ca[1], cb[1], t));\n  const bl = Math.round(lerp(ca[2], cb[2], t));\n  return `rgb(${r},${g},${bl})`;\n}\n\n// --- Numbers ------------------------------------------------------------------------------------\n\nconst fmtCache = new Map<string, Intl.NumberFormat>();\nfunction nf(opts: Intl.NumberFormatOptions): Intl.NumberFormat {\n  const key = JSON.stringify(opts);\n  let f = fmtCache.get(key);\n  if (!f) {\n    f = new Intl.NumberFormat(\"en-US\", opts);\n    fmtCache.set(key, f);\n  }\n  return f;\n}\n\nexport function formatNumber(v: number, digits = 1): string {\n  if (!Number.isFinite(v)) return \"–\";\n  return nf({ maximumFractionDigits: digits, minimumFractionDigits: 0 }).format(v);\n}\n\nexport function formatFixed(v: number, digits = 2): string {\n  if (!Number.isFinite(v)) return \"–\";\n  return nf({ maximumFractionDigits: digits, minimumFractionDigits: digits }).format(v);\n}\n\n// 1,284 / 12.9K / 4.2M. Uses a true minus sign.\nexport function formatCompact(v: number, digits = 1): string {\n  if (!Number.isFinite(v)) return \"–\";\n  const s = nf({ notation: \"compact\", maximumFractionDigits: digits }).format(Math.abs(v));\n  return v < 0 ? `−${s}` : s;\n}\n\nexport function formatPercent(v: number, digits = 0): string {\n  if (!Number.isFinite(v)) return \"–\";\n  const s = nf({ maximumFractionDigits: digits, minimumFractionDigits: digits }).format(Math.abs(v * 100));\n  return `${v < 0 ? \"−\" : \"\"}${s}%`;\n}\n\n// +1.2 / −0.8 / 0. Signed numbers use a true minus and an explicit plus.\nexport function formatSigned(v: number, format: (n: number) => string = (n) => formatNumber(n)): string {\n  if (!Number.isFinite(v)) return \"–\";\n  const body = format(Math.abs(v));\n  // A value that rounds to zero carries no sign.\n  if (Math.abs(v) < 1e-12 || !/[1-9]/.test(body)) return body;\n  return `${v > 0 ? \"+\" : \"−\"}${body}`;\n}\n\n// Gaussian kernel density at x for a sorted sample, bandwidth h.\nexport function kde(sample: number[], x: number, h: number): number {\n  const n = sample.length;\n  if (!n || !(h > 0)) return 0;\n  let s = 0;\n  const inv = 1 / h;\n  for (let i = 0; i < n; i++) {\n    const u = (x - sample[i]) * inv;\n    if (u > 4 || u < -4) continue;\n    s += Math.exp(-0.5 * u * u);\n  }\n  return s / (n * h * Math.sqrt(2 * Math.PI));\n}\n\n// Silverman's rule of thumb bandwidth.\nexport function silverman(sample: number[]): number {\n  const n = sample.length;\n  if (n < 2) return 1;\n  const mean = sample.reduce((a, b) => a + b, 0) / n;\n  const sd = Math.sqrt(sample.reduce((a, b) => a + (b - mean) ** 2, 0) / (n - 1));\n  const sorted = [...sample].sort((a, b) => a - b);\n  const iqr = quantile(sorted, 0.75) - quantile(sorted, 0.25);\n  const spread = Math.min(sd, iqr / 1.34) || sd || 1;\n  return 0.9 * spread * n ** -0.2;\n}\n\n// Linear-interpolated quantile of a sorted array.\nexport function quantile(sorted: number[], q: number): number {\n  const n = sorted.length;\n  if (!n) return NaN;\n  if (n === 1) return sorted[0];\n  const pos = clamp(q, 0, 1) * (n - 1);\n  const lo = Math.floor(pos);\n  const hi = Math.min(n - 1, lo + 1);\n  return sorted[lo] + (sorted[hi] - sorted[lo]) * (pos - lo);\n}\n\n// Standard normal sample from a uniform source (Box-Muller).\nexport function gaussian(rnd: () => number): number {\n  const u = Math.max(rnd(), 1e-9);\n  const v = rnd();\n  return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);\n}\n\n// --- Time ---------------------------------------------------------------------------------------\n\nconst HOUR = 3600000;\nconst DAY = 86400000;\nconst timeFmt = {\n  hour: new Intl.DateTimeFormat(\"en-US\", { hour: \"numeric\", timeZone: \"UTC\" }),\n  day: new Intl.DateTimeFormat(\"en-US\", { month: \"short\", day: \"numeric\", timeZone: \"UTC\" }),\n  month: new Intl.DateTimeFormat(\"en-US\", { month: \"short\", timeZone: \"UTC\" }),\n  monthYear: new Intl.DateTimeFormat(\"en-US\", { month: \"short\", year: \"2-digit\", timeZone: \"UTC\" }),\n  year: new Intl.DateTimeFormat(\"en-US\", { year: \"numeric\", timeZone: \"UTC\" }),\n};\n\nexport interface TimeTick {\n  t: number;\n  label: string;\n}\n\n// Calendar-aligned ticks (UTC) for [t0, t1] drawn across `px` pixels, at least `minPx` apart.\nexport function timeTicks(t0: number, t1: number, px: number, minPx = 64): TimeTick[] {\n  const span = t1 - t0;\n  if (!(span > 0) || !(px > 0)) return [];\n  const maxTicks = Math.max(1, Math.floor(px / minPx));\n  const perTick = span / maxTicks;\n  const out: TimeTick[] = [];\n  const hourSteps = [1, 2, 3, 6, 12];\n  for (const k of hourSteps) {\n    if (k * HOUR >= perTick) {\n      const step = k * HOUR;\n      for (let t = Math.ceil(t0 / step) * step; t <= t1; t += step) {\n        const d = new Date(t);\n        out.push({ t, label: d.getUTCHours() === 0 ? timeFmt.day.format(t) : timeFmt.hour.format(t) });\n      }\n      return out;\n    }\n  }\n  const daySteps = [1, 2, 3, 7, 14];\n  for (const k of daySteps) {\n    if (k * DAY >= perTick) {\n      const step = k * DAY;\n      // Weekly steps land on Mondays.\n      const offset = k === 7 || k === 14 ? 4 * DAY : 0;\n      for (let t = Math.ceil((t0 - offset) / step) * step + offset; t <= t1; t += step) out.push({ t, label: timeFmt.day.format(t) });\n      return out;\n    }\n  }\n  const monthSteps = [1, 2, 3, 6, 12, 24, 60];\n  for (const k of monthSteps) {\n    if (k * 30.44 * DAY >= perTick) {\n      const d0 = new Date(t0);\n      let y = d0.getUTCFullYear();\n      let m = d0.getUTCMonth();\n      // First boundary at or after t0 that is a multiple of k months.\n      m = Math.ceil(m / k) * k;\n      for (;;) {\n        y += Math.floor(m / 12);\n        m %= 12;\n        const t = Date.UTC(y, m, 1);\n        if (t > t1) break;\n        if (t >= t0) {\n          const label = k >= 12 ? timeFmt.year.format(t) : m === 0 ? timeFmt.monthYear.format(t) : timeFmt.month.format(t);\n          out.push({ t, label });\n        }\n        m += k;\n      }\n      return out;\n    }\n  }\n  return out;\n}\n\nexport function formatDateUTC(t: number, style: \"day\" | \"full\" = \"day\"): string {\n  if (style === \"full\") return new Date(t).toLocaleDateString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\", year: \"numeric\", timeZone: \"UTC\" });\n  return timeFmt.day.format(t);\n}\n",
      "type": "registry:component",
      "target": "@components/bjork-ui/charts/_kit/scale.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": "Charts",
    "registryUrl": "https://ui.isaiahbjork.com/candlestick-chart.json",
    "installCommand": "npx shadcn@latest add https://ui.isaiahbjork.com/candlestick-chart.json"
  },
  "type": "registry:component"
}