@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-KAAJL2HA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/color-scale.ts"],"sourcesContent":["/**\n * color-scale.ts — `colorScaleFor(values, spec)`: the one value → colour\n * decision behind every thematic encoding (RM-124). A choropleth fill\n * (`charts`), a DataTable heatmap cell (`data`) and a map symbol or legend ramp\n * (`maps`) all ask the same question, and those three packages depend on `ui`\n * but never on each other — so the answer lives here, once.\n *\n * Pure: no React, no DOM. It returns data a renderer paints.\n *\n * ## Colours are token REFERENCES\n *\n * Every colour this module hands back is a `var(--chart-…)` reference — the\n * `--chart-seq-*` ramp, the `--chart-div-*` ramp or the `--chart-1…12`\n * categorical set — never a literal. The result re-colours on a theme flip with\n * no re-render, and the on-mark ink seam (`charts`' `on-mark-ink.ts`) can\n * resolve every step it paints.\n *\n * The price: nothing here can MIX two steps, because their values are unknown\n * until the browser resolves the active theme. So:\n *\n * - a **continuous** scale snaps each value to the nearest ramp step (7\n *   sequential, 5 diverging). {@link ColorScale.positionOf} gives the exact,\n *   unsnapped ramp position (a legend marker) and {@link ColorScale.stops} the\n *   value at which each step is exact (a gradient's colour stops);\n * - a **stepped** scale is CLAMPED to its ramp: ask for more classes than the\n *   ramp has tokens (7 sequential, 5 diverging) and you get the ramp's length,\n *   because two classes painted the same colour are one class. `steps` is a\n *   ceiling, never a promise; read `scale.steps.length` for what was painted.\n *   (`method: \"custom\"` keeps every break the host named.)\n *\n * ## Step membership\n *\n * A step is `(from, to]`: the upper bound is inclusive and the first step also\n * includes its `from`. Jenks breaks are class UPPER bounds, so a published\n * break list reads straight across. Values outside the domain clamp into the\n * end steps, the way a map never shows a hole for an outlier.\n */\n\n/** A smooth ramp, or countable classes. */\nexport type ColorScaleType = \"continuous\" | \"stepped\";\n\n/**\n * Where a continuous ramp's stops sit. `linear` spreads them evenly from min\n * to max; `median`, `quartiles`, `quintiles` and `deciles` pin them to those\n * quantiles of the data; `natural` pins them to the Jenks breaks.\n */\nexport type ContinuousColorScaleMethod =\n  | \"linear\"\n  | \"median\"\n  | \"quartiles\"\n  | \"quintiles\"\n  | \"deciles\"\n  | \"natural\";\n\n/**\n * How a stepped scale cuts its classes. `equidistant` makes equal widths;\n * `rounded` makes equal widths whose inner breaks round to the step's leading\n * power of ten; `quantile` makes equal counts; `jenks` minimises the variance\n * inside each class; `custom` uses {@link SteppedColorScaleSpec.breaks}.\n */\nexport type SteppedColorScaleMethod = \"equidistant\" | \"rounded\" | \"quantile\" | \"jenks\" | \"custom\";\n\nexport type ColorScaleMethod = ContinuousColorScaleMethod | SteppedColorScaleMethod;\n\n/**\n * Which token set paints the scale. `sequential` answers \"how much\",\n * `diverging` answers \"how far from the centre, and on which side\", and\n * `categorical` gives each distinct value its own colour.\n */\nexport type ColorScalePalette = \"sequential\" | \"diverging\" | \"categorical\";\n\n/** `[min, max]`, or `[min, center, max]` to pin the ramp's middle colour. */\nexport type ColorScaleDomain =\n  | readonly [min: number, max: number]\n  | readonly [min: number, center: number, max: number];\n\ninterface ColorScaleSpecBase {\n  /**\n   * Fixed ends instead of the data's own min / max, so two maps share one\n   * scale. A middle entry is the CENTRE: the value that paints the ramp's\n   * middle colour.\n   */\n  domain?: ColorScaleDomain;\n  /**\n   * Default: `\"diverging\"` when `domain` has a centre, else `\"sequential\"`. A\n   * diverging scale without a centre centres on 0 when the domain spans 0, and\n   * on the domain's midpoint otherwise.\n   */\n  palette?: ColorScalePalette;\n}\n\nexport interface ContinuousColorScaleSpec extends ColorScaleSpecBase {\n  type: \"continuous\";\n  /** Default `\"linear\"`. */\n  method?: ContinuousColorScaleMethod;\n  /** `method: \"natural\"` only: how many Jenks classes place the stops. Default 5. */\n  steps?: number;\n}\n\nexport interface SteppedColorScaleSpec extends ColorScaleSpecBase {\n  type: \"stepped\";\n  /** Default `\"equidistant\"`. */\n  method?: SteppedColorScaleMethod;\n  /**\n   * How many classes. Default 5. Ignored by `custom`. `quantile` and `jenks`\n   * can return fewer when the data has fewer distinct values.\n   */\n  steps?: number;\n  /**\n   * `method: \"custom\"` only: the inner thresholds, ascending. The scale's ends\n   * widen to include them, so the same breaks give the same colours on every\n   * dataset.\n   */\n  breaks?: readonly number[];\n}\n\n/** What to build. The feature / column the values come from is the caller's business. */\nexport type ColorScaleSpec = ContinuousColorScaleSpec | SteppedColorScaleSpec;\n\n/**\n * One input value. Numeric scales read finite numbers only; categorical scales\n * read non-empty strings and finite numbers. Everything else is \"no data\".\n */\nexport type ColorScaleValue = number | string | null | undefined;\n\n/** One class of the scale, low → high. See the module docblock for membership. */\nexport interface ColorScaleStep {\n  from: number;\n  to: number;\n  /** A `var(--chart-…)` reference. */\n  color: string;\n}\n\n/** The value at which one ramp token is exact: a gradient's colour stop. */\nexport interface ColorScaleStop {\n  value: number;\n  /** A `var(--chart-…)` reference. */\n  color: string;\n}\n\n/** One category of a categorical scale, in first-seen order. */\nexport interface ColorScaleCategory {\n  value: string | number;\n  /** A `var(--chart-…)` reference. */\n  color: string;\n}\n\n/** The resolved scale. Every colour in it is a `var(--chart-…)` reference. */\nexport interface ColorScale {\n  type: ColorScaleType;\n  /** The method actually used (a data-driven method with no data falls back to linear / equidistant). */\n  method: ColorScaleMethod;\n  palette: ColorScalePalette;\n  /** The resolved `[lo, hi]`; `null` for a categorical scale or when there is nothing to scale. */\n  domain: readonly [number, number] | null;\n  /** The value that paints the ramp's middle colour, or `null` when none applies. */\n  center: number | null;\n  /**\n   * The classes a value can land in, low → high. Continuous: one per ramp\n   * token (the value band that snaps to it). Categorical: empty.\n   */\n  steps: readonly ColorScaleStep[];\n  /** Continuous only: one per ramp token. Stepped and categorical: empty. */\n  stops: readonly ColorScaleStop[];\n  /** Categorical only: one per distinct value. Otherwise empty. */\n  categories: readonly ColorScaleCategory[];\n  /** The colour for a value, or `null` for no data (and for an unseen category). */\n  colorOf(value: ColorScaleValue): string | null;\n  /** The index into `steps` (or `categories`) a value lands in; `-1` for no data. */\n  indexOf(value: ColorScaleValue): number;\n  /**\n   * Where a value sits on a key whose tokens (continuous) or swatches (stepped)\n   * are drawn evenly: `0` = the start of the strip, `1` = the end. `null` for\n   * no data and for categorical scales.\n   */\n  positionOf(value: ColorScaleValue): number | null;\n}\n\n/** `--chart-seq-1` (quietest) … `--chart-seq-7` (boldest), in every theme. */\nconst SEQUENTIAL_RAMP = [\n  \"var(--chart-seq-1)\",\n  \"var(--chart-seq-2)\",\n  \"var(--chart-seq-3)\",\n  \"var(--chart-seq-4)\",\n  \"var(--chart-seq-5)\",\n  \"var(--chart-seq-6)\",\n  \"var(--chart-seq-7)\",\n] as const;\n\n/** Far-negative → neutral → far-positive. */\nconst DIVERGING_RAMP = [\n  \"var(--chart-div-neg-2)\",\n  \"var(--chart-div-neg-1)\",\n  \"var(--chart-div-mid)\",\n  \"var(--chart-div-pos-1)\",\n  \"var(--chart-div-pos-2)\",\n] as const;\n\n/** The twelve series colours. Past twelve categories they repeat. */\nconst CATEGORICAL_SET = Array.from({ length: 12 }, (_, i) => `var(--chart-${i + 1})`);\n\nconst DEFAULT_STEPS = 5;\n\nconst CONTINUOUS_METHODS: ReadonlySet<string> = new Set<ContinuousColorScaleMethod>([\n  \"linear\",\n  \"median\",\n  \"quartiles\",\n  \"quintiles\",\n  \"deciles\",\n  \"natural\",\n]);\n\nconst STEPPED_METHODS: ReadonlySet<string> = new Set<SteppedColorScaleMethod>([\n  \"equidistant\",\n  \"rounded\",\n  \"quantile\",\n  \"jenks\",\n  \"custom\",\n]);\n\n/** How many equal-count intervals each quantile-based continuous method cuts the data into. */\nconst QUANTILE_STOPS: Partial<Record<ContinuousColorScaleMethod, number>> = {\n  median: 2,\n  quartiles: 4,\n  quintiles: 5,\n  deciles: 10,\n};\n\nfunction isFiniteNumber(value: unknown): value is number {\n  return typeof value === \"number\" && Number.isFinite(value);\n}\n\nfunction clamp(value: number, lo: number, hi: number): number {\n  return Math.min(hi, Math.max(lo, value));\n}\n\nfunction stepCount(steps: number | undefined, fallback: number): number {\n  return isFiniteNumber(steps) && steps >= 1 ? Math.floor(steps) : fallback;\n}\n\n/**\n * `n` entries spread evenly across `ramp`, INCLUDING both ends, so two scales\n * with different step counts still start quiet and end bold. `n === 1` is the\n * boldest step: one class means \"the value\", and a lone pale fill reads as no\n * data. Past the ramp's length, entries repeat (see the module docblock).\n */\nfunction spread(ramp: readonly string[], n: number): string[] {\n  if (n <= 0) return [];\n  const last = ramp.length - 1;\n  if (n === 1) return [ramp[last] as string];\n  return Array.from({ length: n }, (_, i) => ramp[Math.round((i * last) / (n - 1))] as string);\n}\n\n/** The `p`-quantile of an ascending array, linearly interpolated (R type 7, as d3). */\nfunction quantileSorted(sorted: readonly number[], p: number): number {\n  const h = (sorted.length - 1) * p;\n  const below = Math.floor(h);\n  const lower = sorted[below] as number;\n  const upper = sorted[Math.min(sorted.length - 1, below + 1)] as number;\n  return lower + (upper - lower) * (h - below);\n}\n\n/**\n * Jenks natural breaks: the partition of `values` into `classes` contiguous\n * classes with the smallest summed squared deviation from each class mean.\n *\n * Returns `[min, upper bound of class 1, …, upper bound of class k − 1, max]`\n * — the format published implementations (jenkspy, geostats) return. Runs on\n * the distinct values weighted by their counts, so equal values never split\n * across two classes; `classes` is capped at the distinct-value count. The\n * dynamic programme uses the divide-and-conquer speed-up that the monotone\n * split points of 1-D least squares allow (Wang & Song, Ckmeans.1d.dp), so a\n * 10 000-row column stays fast.\n */\nexport function jenksBreaks(values: readonly number[], classes: number): number[] {\n  const sorted = values.filter(isFiniteNumber).sort((a, b) => a - b);\n  if (sorted.length === 0) return [];\n  const xs: number[] = [];\n  const counts: number[] = [];\n  for (const value of sorted) {\n    if (xs.length > 0 && xs[xs.length - 1] === value) counts[counts.length - 1]! += 1;\n    else {\n      xs.push(value);\n      counts.push(1);\n    }\n  }\n  const d = xs.length;\n  const first = xs[0] as number;\n  const last = xs[d - 1] as number;\n  const k = Math.min(stepCount(classes, 1), d);\n  if (k === 1) return [first, last];\n\n  // Prefix sums of weight, value and value², shifted by a middle value so the\n  // subtraction below stays well-conditioned for large magnitudes.\n  const shift = xs[Math.floor(d / 2)] as number;\n  const w = new Float64Array(d + 1);\n  const s1 = new Float64Array(d + 1);\n  const s2 = new Float64Array(d + 1);\n  for (let i = 0; i < d; i++) {\n    const x = (xs[i] as number) - shift;\n    const c = counts[i] as number;\n    w[i + 1] = (w[i] as number) + c;\n    s1[i + 1] = (s1[i] as number) + c * x;\n    s2[i + 1] = (s2[i] as number) + c * x * x;\n  }\n  /** Summed squared deviation of distinct values `a..b` (inclusive). */\n  const ssd = (a: number, b: number): number => {\n    const weight = (w[b + 1] as number) - (w[a] as number);\n    const sum = (s1[b + 1] as number) - (s1[a] as number);\n    return Math.max(0, (s2[b + 1] as number) - (s2[a] as number) - (sum * sum) / weight);\n  };\n\n  let previous = Float64Array.from({ length: d }, (_, i) => ssd(0, i));\n  const splits: Int32Array[] = [];\n  for (let j = 1; j < k; j++) {\n    const prior = previous;\n    const current = new Float64Array(d).fill(Number.POSITIVE_INFINITY);\n    const split = new Int32Array(d);\n    // Class `j` covers distinct values `m..i`; the best `m` never moves left\n    // as `i` grows, so each half only searches its side of the middle's `m`.\n    const solve = (lo: number, hi: number, optLo: number, optHi: number): void => {\n      if (lo > hi) return;\n      const mid = (lo + hi) >> 1;\n      let best = Number.POSITIVE_INFINITY;\n      let bestM = Math.max(optLo, j);\n      for (let m = Math.max(optLo, j); m <= Math.min(mid, optHi); m++) {\n        const cost = (prior[m - 1] as number) + ssd(m, mid);\n        if (cost < best) {\n          best = cost;\n          bestM = m;\n        }\n      }\n      current[mid] = best;\n      split[mid] = bestM;\n      solve(lo, mid - 1, optLo, bestM);\n      solve(mid + 1, hi, bestM, optHi);\n    };\n    solve(j, d - 1, j, d - 1);\n    splits.push(split);\n    previous = current;\n  }\n\n  const uppers: number[] = [];\n  let end = d - 1;\n  for (let j = k - 1; j >= 1; j--) {\n    const start = (splits[j - 1] as Int32Array)[end] as number;\n    uppers.push(xs[start - 1] as number);\n    end = start - 1;\n  }\n  return [first, ...uppers.reverse(), last];\n}\n\n/** Linear interpolation through ascending `[x, y]` knots, clamped at both ends. */\nfunction interpolate(knots: readonly (readonly [number, number])[], x: number): number {\n  const head = knots[0] as readonly [number, number];\n  if (x <= head[0]) return head[1];\n  for (let i = 1; i < knots.length; i++) {\n    const [x1, y1] = knots[i] as readonly [number, number];\n    if (x <= x1) {\n      const [x0, y0] = knots[i - 1] as readonly [number, number];\n      return x1 === x0 ? y0 : y0 + ((y1 - y0) * (x - x0)) / (x1 - x0);\n    }\n  }\n  return (knots[knots.length - 1] as readonly [number, number])[1];\n}\n\n/** Drop interior breaks that repeat, so no class is empty by construction. */\nfunction uniqueBreaks(breaks: readonly number[]): number[] {\n  const out: number[] = [];\n  for (const b of breaks) if (out.length === 0 || b > (out[out.length - 1] as number)) out.push(b);\n  return out.length === 1 ? [out[0] as number, out[0] as number] : out;\n}\n\nfunction roundedBreaks(lo: number, hi: number, n: number): number[] {\n  const width = (hi - lo) / n;\n  const exponent = Math.floor(Math.log10(width));\n  // Divide by an integer power of ten below 1, so 0.3 stays 0.3 rather than 0.30000000000000004.\n  const round = (x: number) =>\n    exponent >= 0\n      ? Math.round(x / 10 ** exponent) * 10 ** exponent\n      : Math.round(x * 10 ** -exponent) / 10 ** -exponent;\n  return [lo, ...Array.from({ length: n - 1 }, (_, i) => round(lo + width * (i + 1))), hi];\n}\n\n/**\n * Colours for stepped classes. No centre: spread the whole ramp. A centre:\n * classes wholly at or below it take the ramp's lower arm, classes wholly\n * above it the upper arm (each spread from the centre outwards), and a class\n * that straddles it takes the middle token — so sign never changes hue\n * inside one class.\n */\nfunction stepColors(\n  bounds: readonly (readonly [number, number])[],\n  ramp: readonly string[],\n  center: number | null,\n): string[] {\n  if (center === null) return spread(ramp, bounds.length);\n  const middle = (ramp.length - 1) / 2;\n  const side = bounds.map(([from, to]) =>\n    from === to && from === center ? 0 : to <= center ? -1 : from >= center ? 1 : 0,\n  );\n  const lower = spread(ramp.slice(0, middle).reverse(), side.filter((s) => s < 0).length).reverse();\n  const upper = spread(ramp.slice(middle + 1), side.filter((s) => s > 0).length);\n  let l = 0;\n  let u = 0;\n  return side.map((s) =>\n    s < 0 ? (lower[l++] as string) : s > 0 ? (upper[u++] as string) : (ramp[middle] as string),\n  );\n}\n\n/** Index of the step `value` lands in: the first whose `to` is ≥ the clamped value. */\nfunction stepIndex(steps: readonly ColorScaleStep[], value: number): number {\n  for (let i = 0; i < steps.length; i++) if (value <= (steps[i] as ColorScaleStep).to) return i;\n  return steps.length - 1;\n}\n\nfunction categoricalScale(\n  values: readonly ColorScaleValue[],\n  spec: ColorScaleSpec,\n  method: ColorScaleMethod,\n): ColorScale {\n  const order = new Map<string | number, number>();\n  for (const value of values) {\n    const usable = (typeof value === \"string\" && value !== \"\") || isFiniteNumber(value);\n    if (usable && !order.has(value)) order.set(value, order.size);\n  }\n  const categories = [...order.keys()].map((value, i) => ({\n    value,\n    color: CATEGORICAL_SET[i % CATEGORICAL_SET.length] as string,\n  }));\n  const indexOf = (value: ColorScaleValue) =>\n    value === null || value === undefined ? -1 : (order.get(value) ?? -1);\n  return {\n    type: spec.type,\n    method,\n    palette: \"categorical\",\n    domain: null,\n    center: null,\n    steps: [],\n    stops: [],\n    categories,\n    colorOf: (value) => categories[indexOf(value)]?.color ?? null,\n    indexOf,\n    positionOf: () => null,\n  };\n}\n\n/**\n * Build a colour scale over `values`.\n *\n * ```ts\n * const scale = colorScaleFor(rows.map((r) => r.share), {\n *   type: \"stepped\",\n *   method: \"quantile\",\n *   steps: 5,\n * });\n * scale.colorOf(0.42); // \"var(--chart-seq-4)\"\n * scale.steps;         // five { from, to, color } classes for the legend\n * ```\n */\nexport function colorScaleFor(\n  values: readonly ColorScaleValue[],\n  spec: ColorScaleSpec,\n): ColorScale {\n  const continuous = spec.type === \"continuous\";\n  let method: ColorScaleMethod =\n    spec.method !== undefined &&\n    (continuous ? CONTINUOUS_METHODS : STEPPED_METHODS).has(spec.method)\n      ? spec.method\n      : continuous\n        ? \"linear\"\n        : \"equidistant\";\n  const domain = spec.domain?.every(isFiniteNumber) ? spec.domain : undefined;\n  const palette: ColorScalePalette =\n    spec.palette ?? (domain?.length === 3 ? \"diverging\" : \"sequential\");\n  if (palette === \"categorical\") return categoricalScale(values, spec, method);\n\n  const data = values.filter(isFiniteNumber);\n  // A loop, not `Math.min(...data)`: a spread of a 100k-row column overflows the call stack.\n  let lo = Number.POSITIVE_INFINITY;\n  let hi = Number.NEGATIVE_INFINITY;\n  for (const v of domain ? [domain[0], domain[domain.length - 1] as number] : data) {\n    if (v < lo) lo = v;\n    if (v > hi) hi = v;\n  }\n  const thresholds =\n    !continuous && method === \"custom\"\n      ? [...new Set((spec.breaks ?? []).filter(isFiniteNumber))].sort((a, b) => a - b)\n      : [];\n  if (method === \"custom\" && thresholds.length === 0) method = \"equidistant\";\n  if (thresholds.length > 0) {\n    lo = Math.min(lo, thresholds[0] as number);\n    hi = Math.max(hi, thresholds.at(-1) as number);\n  }\n\n  const noData = (): ColorScale => ({\n    type: spec.type,\n    method,\n    palette,\n    domain: null,\n    center: null,\n    steps: [],\n    stops: [],\n    categories: [],\n    colorOf: () => null,\n    indexOf: () => -1,\n    positionOf: () => null,\n  });\n  if (!Number.isFinite(lo) || !Number.isFinite(hi)) return noData();\n\n  const center =\n    domain?.length === 3\n      ? (domain[1] as number)\n      : palette === \"diverging\"\n        ? lo < 0 && hi > 0\n          ? 0\n          : (lo + hi) / 2\n        : null;\n  const ramp: readonly string[] = palette === \"diverging\" ? DIVERGING_RAMP : SEQUENTIAL_RAMP;\n  const sorted = data.map((v) => clamp(v, lo, hi)).sort((a, b) => a - b);\n  const needsData =\n    method === \"quantile\" || method === \"jenks\" || (continuous && method !== \"linear\");\n  if (needsData && sorted.length === 0) method = continuous ? \"linear\" : \"equidistant\";\n\n  let steps: ColorScaleStep[];\n  let stops: ColorScaleStop[] = [];\n  let positionOf: (value: number) => number;\n\n  if (lo === hi) {\n    // One value (or a zero-width domain): one class, painted as \"the value\".\n    const color = stepColors([[lo, hi]], ramp, center)[0] as string;\n    steps = [{ from: lo, to: hi, color }];\n    if (continuous) stops = [{ value: lo, color }];\n    const position = ramp.indexOf(color) / (ramp.length - 1);\n    positionOf = () => position;\n  } else if (continuous) {\n    // Knots map a value to its position on the ramp: the method's stops sit at\n    // evenly spaced positions, then a centre bends the map so it lands at 0.5.\n    let cuts: number[];\n    const quantiles = QUANTILE_STOPS[method as ContinuousColorScaleMethod];\n    if (quantiles !== undefined) {\n      cuts = Array.from({ length: quantiles + 1 }, (_, i) =>\n        i === 0 ? lo : i === quantiles ? hi : quantileSorted(sorted, i / quantiles),\n      );\n    } else if (method === \"natural\") {\n      const breaks = jenksBreaks(sorted, stepCount(spec.steps, DEFAULT_STEPS));\n      cuts = breaks.length > 2 ? [lo, ...breaks.slice(1, -1), hi] : [lo, hi];\n    } else {\n      cuts = [lo, hi];\n    }\n    let knots: [number, number][] = cuts.map((v, i) => [v, i / (cuts.length - 1)]);\n    if (center !== null) {\n      const pc = interpolate(knots, clamp(center, lo, hi));\n      const bend = (p: number) =>\n        pc <= 0\n          ? 0.5 + p / 2\n          : pc >= 1\n            ? p / 2\n            : p <= pc\n              ? (0.5 * p) / pc\n              : 0.5 + (0.5 * (p - pc)) / (1 - pc);\n      knots = knots.map(([v, p]) => [v, bend(p)]);\n      if (center > lo && center < hi) {\n        knots.push([center, 0.5]);\n        knots.sort((a, b) => a[0] - b[0] || a[1] - b[1]);\n      }\n    }\n    const inverse = knots.map(([v, p]) => [p, v] as [number, number]);\n    const last = ramp.length - 1;\n    const valueAt = (position: number) => interpolate(inverse, position);\n    steps = ramp.map((color, j) => ({\n      from: j === 0 ? lo : valueAt((j - 0.5) / last),\n      to: j === last ? hi : valueAt((j + 0.5) / last),\n      color,\n    }));\n    stops = ramp.map((color, j) => ({ value: valueAt(j / last), color }));\n    positionOf = (value) => interpolate(knots, value);\n  } else {\n    // Clamped to the ramp: a class the reader cannot tell from its neighbour is\n    // not a class. Nothing here can MIX two tokens (their values are only known\n    // once the browser resolves the theme), so the ramp's length IS the largest\n    // honest class count — 7 sequential, 5 diverging. `spec.steps` above that\n    // used to paint identical pairs and a legend that claimed the difference.\n    // `method: \"custom\"` is the one exception: the host named those breaks, so\n    // they are kept even when two of them land on one colour.\n    const n = Math.min(stepCount(spec.steps, DEFAULT_STEPS), ramp.length);\n    let breaks: number[];\n    if (method === \"custom\") breaks = [lo, ...thresholds, hi];\n    else if (method === \"quantile\")\n      breaks = Array.from({ length: n + 1 }, (_, i) =>\n        i === 0 ? lo : i === n ? hi : quantileSorted(sorted, i / n),\n      );\n    else if (method === \"jenks\") {\n      const natural = jenksBreaks(sorted, n);\n      breaks = [lo, ...natural.slice(1, -1), hi];\n    } else if (method === \"rounded\") breaks = roundedBreaks(lo, hi, n);\n    else\n      breaks = Array.from({ length: n + 1 }, (_, i) => (i === n ? hi : lo + ((hi - lo) * i) / n));\n    const unique = uniqueBreaks(breaks);\n    const bounds = unique\n      .slice(1)\n      .map((to, i): readonly [number, number] => [unique[i] as number, to]);\n    const colors = stepColors(bounds, ramp, center);\n    steps = bounds.map(([from, to], i) => ({ from, to, color: colors[i] as string }));\n    positionOf = (value) => {\n      const i = stepIndex(steps, value);\n      const { from, to } = steps[i] as ColorScaleStep;\n      const within = to === from ? 0.5 : (value - from) / (to - from);\n      return (i + clamp(within, 0, 1)) / steps.length;\n    };\n  }\n\n  const indexOf = (value: ColorScaleValue) =>\n    isFiniteNumber(value) ? stepIndex(steps, clamp(value, lo, hi)) : -1;\n  return {\n    type: spec.type,\n    method,\n    palette,\n    domain: [lo, hi],\n    center,\n    steps,\n    stops,\n    categories: [],\n    colorOf: (value) => steps[indexOf(value)]?.color ?? null,\n    indexOf,\n    positionOf: (value) => (isFiniteNumber(value) ? positionOf(clamp(value, lo, hi)) : null),\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-KBWHHAI3.js

@@ -0,0 +1,246 @@
+"use client";
+import {
+  useThemeTransition
+} from "./chunk-YIFB24WW.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "./chunk-ZSYT5H6U.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-36SY7TID.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+
+// src/components/theme-switcher/theme-switcher.tsx
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Check, Monitor, Moon, Sun } from "lucide-react";
+import {
+  groupThemeFamilies,
+  resolveThemeVariant,
+  themeFamilyIdOf,
+  themeSchemeOf,
+  useTheme
+} from "@elabs-ai/components-tokens";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SYSTEM_STORAGE_KEY = "brand-ui-theme-system";
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var ICON_SIZE = {
+  sm: "icon-sm",
+  default: "icon",
+  lg: "icon-lg"
+};
+function prefersDark() {
+  return typeof window !== "undefined" && window.matchMedia(DARK_QUERY).matches;
+}
+function pickByDarkness(list, dark) {
+  return (list.find((t) => t.dark === dark) ?? list[0])?.value;
+}
+var ThemeSwitcher = forwardRef(
+  function ThemeSwitcher2({
+    themes,
+    mode = "auto",
+    showSystem = true,
+    effect = "polygon",
+    size = "default",
+    variant,
+    preference,
+    onPreferenceChange,
+    className,
+    ...props
+  }, ref) {
+    const { theme, themeDefinitions, setTheme } = useTheme();
+    const { t } = useLocale();
+    const switchTheme = useThemeTransition(effect);
+    const isControlled = preference !== void 0;
+    const [uncontrolledIsSystem, setUncontrolledIsSystem] = useState(false);
+    const isSystem = isControlled ? preference === "system" : uncontrolledIsSystem;
+    const narrowed = themes ? themes.map((name) => themeDefinitions.find((d) => d.value === name)).filter((d) => d !== void 0) : themeDefinitions;
+    const offered = narrowed.length > 0 ? narrowed : themeDefinitions;
+    const safeThemes = offered.map((d) => d.value);
+    const labelOf = (name) => offered.find((d) => d.value === name)?.label ?? name;
+    const isDark = (name) => offered.find((d) => d.value === name)?.dark ?? false;
+    const resolvedTheme = isControlled && preference !== void 0 && preference !== "system" ? preference : theme;
+    const families = groupThemeFamilies(offered);
+    const useFamilies = mode === "auto" && families.filter((f) => f.declared).length >= 2;
+    const activeDefinition = offered.find((d) => d.value === resolvedTheme);
+    const activeFamily = useFamilies ? (activeDefinition && families.find((f) => f.id === themeFamilyIdOf(activeDefinition))) ?? families[0] : void 0;
+    const scope = activeFamily ? [activeFamily.light, activeFamily.dark].filter((d) => d !== void 0) : offered;
+    const lightTheme = pickByDarkness(scope, false) ?? theme;
+    const darkTheme = pickByDarkness(scope, true) ?? theme;
+    const intendedSchemeRef = useRef(
+      void 0
+    );
+    useEffect(() => {
+      if (isControlled) return;
+      if (typeof window === "undefined") return;
+      const active = window.localStorage.getItem(SYSTEM_STORAGE_KEY) === "1";
+      setUncontrolledIsSystem(active);
+      if (active) setTheme(prefersDark() ? darkTheme : lightTheme);
+    }, []);
+    useEffect(() => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+      const mql = window.matchMedia(DARK_QUERY);
+      const onChange = () => {
+        const active = isControlled ? preference === "system" : window.localStorage.getItem(SYSTEM_STORAGE_KEY) === "1";
+        if (active) setTheme(prefersDark() ? darkTheme : lightTheme);
+      };
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    }, [isControlled, preference, darkTheme, lightTheme, setTheme]);
+    const pickTheme = useCallback(
+      (next2) => {
+        if (isControlled) {
+          onPreferenceChange?.(next2);
+        } else {
+          setUncontrolledIsSystem(false);
+          if (typeof window !== "undefined") window.localStorage.setItem(SYSTEM_STORAGE_KEY, "0");
+        }
+        switchTheme(next2);
+      },
+      [switchTheme, isControlled, onPreferenceChange]
+    );
+    const pickSystem = useCallback(() => {
+      if (isControlled) {
+        onPreferenceChange?.("system");
+      } else {
+        setUncontrolledIsSystem(true);
+        if (typeof window !== "undefined") window.localStorage.setItem(SYSTEM_STORAGE_KEY, "1");
+      }
+      switchTheme(prefersDark() ? darkTheme : lightTheme);
+    }, [switchTheme, darkTheme, lightTheme, isControlled, onPreferenceChange]);
+    const TriggerIcon = isSystem ? Monitor : isDark(resolvedTheme) ? Moon : Sun;
+    if (activeFamily) {
+      const activeScheme = activeDefinition;
+      const remembered = intendedSchemeRef.current;
+      const intended = remembered && remembered.theme === resolvedTheme ? remembered.scheme : activeScheme ? themeSchemeOf(activeScheme) : "light";
+      const pickFamily = (familyId) => {
+        const scheme = isSystem ? prefersDark() ? "dark" : "light" : intended;
+        const next2 = resolveThemeVariant(families, familyId, scheme);
+        if (next2 === void 0) return;
+        intendedSchemeRef.current = { scheme: intended, theme: next2 };
+        if (isSystem) switchTheme(next2);
+        else pickTheme(next2);
+      };
+      const pickScheme = (value) => {
+        if (value === "system") {
+          pickSystem();
+          return;
+        }
+        const scheme = value;
+        const next2 = activeFamily[scheme]?.value;
+        if (next2 === void 0) return;
+        intendedSchemeRef.current = { scheme, theme: next2 };
+        pickTheme(next2);
+      };
+      const schemeValue = isSystem ? "system" : activeScheme ? themeSchemeOf(activeScheme) : "";
+      return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            variant: variant ?? "outline",
+            size: ICON_SIZE[size],
+            "aria-label": t("ui.themeSwitcher.theme"),
+            className,
+            ...props,
+            children: /* @__PURE__ */ jsx(TriggerIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("ui.themeSwitcher.theme") }),
+          /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: activeFamily.id, onValueChange: pickFamily, children: families.map((f) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: f.id, children: f.label }, f.id)) }),
+          activeFamily.schemes.length === 2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("ui.themeSwitcher.mode") }),
+            /* @__PURE__ */ jsxs(DropdownMenuRadioGroup, { value: schemeValue, onValueChange: pickScheme, children: [
+              /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "light", children: [
+                /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" }),
+                t("ui.themeSwitcher.light")
+              ] }),
+              /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "dark", children: [
+                /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" }),
+                t("ui.themeSwitcher.dark")
+              ] }),
+              showSystem ? /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: "system", children: [
+                /* @__PURE__ */ jsx(Monitor, { "aria-hidden": "true" }),
+                t("ui.themeSwitcher.system")
+              ] }) : null
+            ] })
+          ] }) : null
+        ] })
+      ] });
+    }
+    const useDropdown = mode === "dropdown" || mode === "auto" && safeThemes.length > 2;
+    if (useDropdown) {
+      return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            variant: variant ?? "outline",
+            size: ICON_SIZE[size],
+            "aria-label": t("ui.themeSwitcher.theme"),
+            className,
+            ...props,
+            children: /* @__PURE__ */ jsx(TriggerIcon, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+          showSystem ? /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => pickSystem(), children: [
+            /* @__PURE__ */ jsx(Monitor, {}),
+            /* @__PURE__ */ jsx("span", { children: t("ui.themeSwitcher.system") }),
+            isSystem ? /* @__PURE__ */ jsx(Check, { className: "ms-auto" }) : null
+          ] }) : null,
+          offered.map((d) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => pickTheme(d.value), children: [
+            d.dark ? /* @__PURE__ */ jsx(Moon, {}) : /* @__PURE__ */ jsx(Sun, {}),
+            /* @__PURE__ */ jsx("span", { children: d.label }),
+            !isSystem && resolvedTheme === d.value ? /* @__PURE__ */ jsx(Check, { className: "ms-auto" }) : null
+          ] }, d.value))
+        ] })
+      ] });
+    }
+    const order = showSystem ? ["light", "dark", "system"] : ["light", "dark"];
+    const current = isSystem ? "system" : resolvedTheme === darkTheme ? "dark" : "light";
+    const next = order[(order.indexOf(current) + 1) % order.length];
+    const apply = () => {
+      if (next === "system") pickSystem();
+      else pickTheme(next === "dark" ? darkTheme : lightTheme);
+    };
+    const roleLabel = (role) => role === "system" ? t("ui.themeSwitcher.system") : labelOf(role === "dark" ? darkTheme : lightTheme);
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          variant: variant ?? "ghost",
+          size: ICON_SIZE[size],
+          "aria-label": `Theme: ${roleLabel(current)}. Activate to switch to ${roleLabel(next)}.`,
+          onClick: apply,
+          className,
+          ...props,
+          children: /* @__PURE__ */ jsx(TriggerIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: roleLabel(current) })
+    ] }) });
+  }
+);
+
+export {
+  ThemeSwitcher
+};
+//# sourceMappingURL=chunk-KBWHHAI3.js.map

package/dist/chunk-KBWHHAI3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/theme-switcher/theme-switcher.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useEffect, useRef, useState, type HTMLAttributes } from \"react\";\nimport { Check, Monitor, Moon, Sun } from \"lucide-react\";\nimport {\n  groupThemeFamilies,\n  resolveThemeVariant,\n  themeFamilyIdOf,\n  themeSchemeOf,\n  useTheme,\n  type ThemeDefinition,\n  type ThemeName,\n  type ThemeScheme,\n} from \"@elabs-ai/components-tokens\";\n\nimport { Button, type ButtonProps } from \"../button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../tooltip\";\nimport { useLocale } from \"../locale-provider\";\nimport { useThemeTransition, type ThemeTransitionEffect } from \"./use-theme-transition\";\n\nconst SYSTEM_STORAGE_KEY = \"brand-ui-theme-system\";\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\ntype ButtonSize = \"sm\" | \"default\" | \"lg\";\nconst ICON_SIZE: Record<ButtonSize, \"icon-sm\" | \"icon\" | \"icon-lg\"> = {\n  sm: \"icon-sm\",\n  default: \"icon\",\n  lg: \"icon-lg\",\n};\n\n/** A theme choice, or \"system\" to follow the OS color scheme. */\nexport type ThemePreference = ThemeName | \"system\";\n\nexport interface ThemeSwitcherProps extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  /**\n   * Themes to offer, as names. ≤2 → toggle; >2 → dropdown.\n   *\n   * Defaults to the PROVIDER's registry (ADR 0029) — so an app that registers\n   * its own themes gets a working switcher with no prop at all. Pass this only\n   * to offer a subset, or to fix the order; names the provider doesn't know are\n   * dropped.\n   */\n  themes?: ThemeName[];\n  /** Force presentation; \"auto\" (default) picks toggle vs dropdown by theme count. */\n  mode?: \"auto\" | \"toggle\" | \"dropdown\";\n  /** Offer a \"System\" option that follows the OS color scheme. Default true. */\n  showSystem?: boolean;\n  /** Whole-screen reveal effect for the animated switch. Default \"polygon\". */\n  effect?: ThemeTransitionEffect;\n  /** Control size. Default \"default\". */\n  size?: ButtonSize;\n  /**\n   * The trigger button's variant. Default: `\"outline\"` for the dropdown forms and `\"ghost\"` for\n   * the two-theme toggle (today's behaviour). Pass `\"ghost\"` when the switcher sits in a row of\n   * borderless icon buttons — an app top bar — so it reads as one of them.\n   */\n  variant?: ButtonProps[\"variant\"];\n  /**\n   * Controlled preference (#366). When set, the switcher derives its \"current\"\n   * state — including \"system\" — from this prop instead of its own internal,\n   * `localStorage`-backed state, and reports every user pick via\n   * `onPreferenceChange` instead of writing its own storage key. Pass this pair\n   * when your app's actual source of truth is a different persisted preference\n   * (a settings API, a different storage key, a server-synced setting). Omit\n   * both for the default, uncontrolled behavior (unchanged).\n   */\n  preference?: ThemePreference;\n  /** Called with the new preference on every user pick, when `preference` is controlled. */\n  onPreferenceChange?: (preference: ThemePreference) => void;\n}\n\nfunction prefersDark(): boolean {\n  return typeof window !== \"undefined\" && window.matchMedia(DARK_QUERY).matches;\n}\n\n/** First theme in `list` matching `dark`, or the list's own first entry as a last resort. */\nfunction pickByDarkness(list: readonly ThemeDefinition[], dark: boolean): ThemeName | undefined {\n  return (list.find((t) => t.dark === dark) ?? list[0])?.value;\n}\n\n/**\n * Adaptive theme control. With ≤2 themes it renders a light/dark/system toggle\n * (a single icon button that cycles); with >2 it auto-upgrades to a dropdown\n * over the offered themes. Every switch animates the whole screen via\n * `useThemeTransition` (respecting reduced motion). Icons follow each theme's\n * `dark` flag, so it works for any theme — including one you authored.\n *\n * Uncontrolled by default (tracks its own \"system\" choice via `localStorage`).\n * Pass `preference`/`onPreferenceChange` to drive it from an external store\n * instead (#366) — see the `Controlled` story.\n *\n * **It renders the PROVIDER's registry** (ADR 0029). Register your themes on\n * `<ThemeProvider themes={…}>` and this switcher offers them with no prop —\n * which is also why `allowedThemes` (#355) is honoured for free: the provider\n * has already narrowed what it exposes. The `themes` prop is now purely an\n * additional, optional narrowing on top; a name the provider does not offer is\n * dropped rather than rendered, so a disallowed or unregistered theme is never\n * reachable via a menu item, the toggle, \"System\", or the OS\n * `prefers-color-scheme` listener.\n *\n * The pre-ADR-0029 hard-coded `[\"light\",\"dark\"]` default is gone. Behaviour for\n * an app on the default provider is unchanged — that registry IS light + dark.\n */\nexport const ThemeSwitcher = forwardRef<HTMLButtonElement, ThemeSwitcherProps>(\n  function ThemeSwitcher(\n    {\n      themes,\n      mode = \"auto\",\n      showSystem = true,\n      effect = \"polygon\",\n      size = \"default\",\n      variant,\n      preference,\n      onPreferenceChange,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const { theme, themeDefinitions, setTheme } = useTheme();\n    const { t } = useLocale();\n    const switchTheme = useThemeTransition(effect);\n    const isControlled = preference !== undefined;\n    const [uncontrolledIsSystem, setUncontrolledIsSystem] = useState(false);\n    const isSystem = isControlled ? preference === \"system\" : uncontrolledIsSystem;\n\n    // The provider's registry is the universe; the prop only narrows it, in the\n    // prop's own order. A name the provider doesn't offer is DROPPED (it has no\n    // CSS block here and no label to render), and an empty intersection falls\n    // back to the whole registry rather than to a hard-coded pair — falling back\n    // to literals is what could resurrect a theme the provider disallowed.\n    const narrowed = themes\n      ? themes\n          .map((name) => themeDefinitions.find((d) => d.value === name))\n          .filter((d): d is ThemeDefinition => d !== undefined)\n      : themeDefinitions;\n    const offered: readonly ThemeDefinition[] = narrowed.length > 0 ? narrowed : themeDefinitions;\n    const safeThemes: ThemeName[] = offered.map((d) => d.value);\n    const labelOf = (name: ThemeName) => offered.find((d) => d.value === name)?.label ?? name;\n    const isDark = (name: ThemeName) => offered.find((d) => d.value === name)?.dark ?? false;\n\n    // The concrete theme to DISPLAY as current: the controlled preference when\n    // it names one, otherwise the theme actually applied via the provider.\n    const resolvedTheme: ThemeName =\n      isControlled && preference !== undefined && preference !== \"system\" ? preference : theme;\n\n    // ADR 0036 — the family layout is OPT-IN: only when the offered list (not the\n    // provider's `families`, so the `themes` prop still narrows) holds two or\n    // more DECLARED families. An undeclared `[daylight, midnight]` pair keeps\n    // today's toggle byte-for-byte.\n    const families = groupThemeFamilies(offered);\n    const useFamilies = mode === \"auto\" && families.filter((f) => f.declared).length >= 2;\n    // Match by the active definition's declared family, not the retained\n    // light/dark slots: a second same-scheme variant is still reachable via\n    // `setTheme` but is not in either slot.\n    const activeDefinition = offered.find((d) => d.value === resolvedTheme);\n    const activeFamily = useFamilies\n      ? ((activeDefinition && families.find((f) => f.id === themeFamilyIdOf(activeDefinition))) ??\n        families[0])\n      : undefined;\n    // \"System\" is scoped to the active family in the family layout.\n    const scope: readonly ThemeDefinition[] = activeFamily\n      ? [activeFamily.light, activeFamily.dark].filter((d): d is ThemeDefinition => d !== undefined)\n      : offered;\n\n    // `?? theme` (the active theme), never a \"light\"/\"dark\" literal: with an open\n    // registry those names may not exist at all in this app.\n    const lightTheme: ThemeName = pickByDarkness(scope, false) ?? theme;\n    const darkTheme: ThemeName = pickByDarkness(scope, true) ?? theme;\n\n    // The scheme the user last chose, so dark → a light-only family → a\n    // two-scheme family lands on dark again (mirrors the provider's `setFamily`).\n    // Remembered together with the theme it produced: once something else changes\n    // the theme (another control calling `setTheme`), the memory no longer applies.\n    const intendedSchemeRef = useRef<{ scheme: ThemeScheme; theme: ThemeName } | undefined>(\n      undefined,\n    );\n\n    // Hydrate the \"system\" choice from localStorage and apply it on mount —\n    // uncontrolled mode only. Controlled mode's \"system\" state comes from the\n    // `preference` prop and never touches this component's own storage key.\n    useEffect(() => {\n      if (isControlled) return;\n      if (typeof window === \"undefined\") return;\n      const active = window.localStorage.getItem(SYSTEM_STORAGE_KEY) === \"1\";\n      setUncontrolledIsSystem(active);\n      if (active) setTheme(prefersDark() ? darkTheme : lightTheme);\n      // Mount-once hydration by design (mirrors the pre-#366 behavior); a\n      // component must not flip controlled/uncontrolled mid-lifecycle\n      // (.claude/rules/component-api.md), so `isControlled` cannot change here.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Keep the applied theme tracking the OS scheme while \"system\" is active —\n    // controlled or not. Depends on every value it reads (unlike the effect\n    // above) so it never captures a stale `lightTheme`/`darkTheme` once those\n    // become provider-derived (the staleness risk #384 flags).\n    useEffect(() => {\n      if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") return;\n      const mql = window.matchMedia(DARK_QUERY);\n      const onChange = () => {\n        const active = isControlled\n          ? preference === \"system\"\n          : window.localStorage.getItem(SYSTEM_STORAGE_KEY) === \"1\";\n        if (active) setTheme(prefersDark() ? darkTheme : lightTheme);\n      };\n      mql.addEventListener(\"change\", onChange);\n      return () => mql.removeEventListener(\"change\", onChange);\n    }, [isControlled, preference, darkTheme, lightTheme, setTheme]);\n\n    const pickTheme = useCallback(\n      (next: ThemeName) => {\n        if (isControlled) {\n          onPreferenceChange?.(next);\n        } else {\n          setUncontrolledIsSystem(false);\n          if (typeof window !== \"undefined\") window.localStorage.setItem(SYSTEM_STORAGE_KEY, \"0\");\n        }\n        switchTheme(next);\n      },\n      [switchTheme, isControlled, onPreferenceChange],\n    );\n\n    const pickSystem = useCallback(() => {\n      if (isControlled) {\n        onPreferenceChange?.(\"system\");\n      } else {\n        setUncontrolledIsSystem(true);\n        if (typeof window !== \"undefined\") window.localStorage.setItem(SYSTEM_STORAGE_KEY, \"1\");\n      }\n      switchTheme(prefersDark() ? darkTheme : lightTheme);\n    }, [switchTheme, darkTheme, lightTheme, isControlled, onPreferenceChange]);\n\n    const TriggerIcon = isSystem ? Monitor : isDark(resolvedTheme) ? Moon : Sun;\n\n    // ---- Family layout (≥2 declared families): family group + scheme group ----\n    if (activeFamily) {\n      const activeScheme = activeDefinition;\n      const remembered = intendedSchemeRef.current;\n      const intended =\n        remembered && remembered.theme === resolvedTheme\n          ? remembered.scheme\n          : activeScheme\n            ? themeSchemeOf(activeScheme)\n            : \"light\";\n      const pickFamily = (familyId: string) => {\n        // System re-resolves against the OS immediately on a family change\n        // instead of waiting for the next `change` event.\n        const scheme: ThemeScheme = isSystem ? (prefersDark() ? \"dark\" : \"light\") : intended;\n        const next = resolveThemeVariant(families, familyId, scheme);\n        if (next === undefined) return;\n        intendedSchemeRef.current = { scheme: intended, theme: next };\n        if (isSystem) switchTheme(next);\n        else pickTheme(next);\n      };\n      const pickScheme = (value: string) => {\n        if (value === \"system\") {\n          pickSystem();\n          return;\n        }\n        const scheme = value as ThemeScheme;\n        const next = activeFamily[scheme]?.value;\n        if (next === undefined) return;\n        intendedSchemeRef.current = { scheme, theme: next };\n        pickTheme(next);\n      };\n      const schemeValue = isSystem ? \"system\" : activeScheme ? themeSchemeOf(activeScheme) : \"\";\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              ref={ref}\n              variant={variant ?? \"outline\"}\n              size={ICON_SIZE[size]}\n              aria-label={t(\"ui.themeSwitcher.theme\")}\n              className={className}\n              {...props}\n            >\n              <TriggerIcon />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>{t(\"ui.themeSwitcher.theme\")}</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={activeFamily.id} onValueChange={pickFamily}>\n              {families.map((f) => (\n                <DropdownMenuRadioItem key={f.id} value={f.id}>\n                  {f.label}\n                </DropdownMenuRadioItem>\n              ))}\n            </DropdownMenuRadioGroup>\n            {activeFamily.schemes.length === 2 ? (\n              <>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>{t(\"ui.themeSwitcher.mode\")}</DropdownMenuLabel>\n                <DropdownMenuRadioGroup value={schemeValue} onValueChange={pickScheme}>\n                  <DropdownMenuRadioItem value=\"light\">\n                    <Sun aria-hidden=\"true\" />\n                    {t(\"ui.themeSwitcher.light\")}\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"dark\">\n                    <Moon aria-hidden=\"true\" />\n                    {t(\"ui.themeSwitcher.dark\")}\n                  </DropdownMenuRadioItem>\n                  {showSystem ? (\n                    <DropdownMenuRadioItem value=\"system\">\n                      <Monitor aria-hidden=\"true\" />\n                      {t(\"ui.themeSwitcher.system\")}\n                    </DropdownMenuRadioItem>\n                  ) : null}\n                </DropdownMenuRadioGroup>\n              </>\n            ) : null}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      );\n    }\n\n    const useDropdown = mode === \"dropdown\" || (mode === \"auto\" && safeThemes.length > 2);\n\n    // ---- Dropdown mode (>2 themes) ----\n    if (useDropdown) {\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              ref={ref}\n              variant={variant ?? \"outline\"}\n              size={ICON_SIZE[size]}\n              aria-label={t(\"ui.themeSwitcher.theme\")}\n              className={className}\n              {...props}\n            >\n              <TriggerIcon />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {showSystem ? (\n              <DropdownMenuItem onSelect={() => pickSystem()}>\n                <Monitor />\n                <span>{t(\"ui.themeSwitcher.system\")}</span>\n                {isSystem ? <Check className=\"ms-auto\" /> : null}\n              </DropdownMenuItem>\n            ) : null}\n            {offered.map((d) => (\n              <DropdownMenuItem key={d.value} onSelect={() => pickTheme(d.value)}>\n                {d.dark ? <Moon /> : <Sun />}\n                <span>{d.label}</span>\n                {!isSystem && resolvedTheme === d.value ? <Check className=\"ms-auto\" /> : null}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      );\n    }\n\n    // ---- Toggle mode (≤2 themes): cycle light → dark → (system) ----\n    // These three are ROLES in the cycle, not theme names — `lightTheme` and\n    // `darkTheme` resolve each role to whatever this app actually registered.\n    const order: Array<\"light\" | \"dark\" | \"system\"> = showSystem\n      ? [\"light\", \"dark\", \"system\"]\n      : [\"light\", \"dark\"];\n    const current: \"light\" | \"dark\" | \"system\" = isSystem\n      ? \"system\"\n      : resolvedTheme === darkTheme\n        ? \"dark\"\n        : \"light\";\n    const next = order[(order.indexOf(current) + 1) % order.length];\n    const apply = () => {\n      if (next === \"system\") pickSystem();\n      else pickTheme(next === \"dark\" ? darkTheme : lightTheme);\n    };\n\n    // Announce the THEME'S OWN label, not the role: an app whose themes are\n    // \"Daylight\"/\"Midnight\" would otherwise announce \"Theme: light\" — naming a\n    // theme that does not exist in that app.\n    // `role` is optional only because `order[i]` is an indexed read under\n    // `noUncheckedIndexedAccess`; the modulo above makes it always present.\n    const roleLabel = (role: \"light\" | \"dark\" | \"system\" | undefined) =>\n      role === \"system\"\n        ? t(\"ui.themeSwitcher.system\")\n        : labelOf(role === \"dark\" ? darkTheme : lightTheme);\n\n    return (\n      <TooltipProvider>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button\n              ref={ref}\n              variant={variant ?? \"ghost\"}\n              size={ICON_SIZE[size]}\n              aria-label={`Theme: ${roleLabel(current)}. Activate to switch to ${roleLabel(next)}.`}\n              onClick={apply}\n              className={className}\n              {...props}\n            >\n              <TriggerIcon />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>{roleLabel(current)}</TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    );\n  },\n);\n"],"mappings":"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","names":["ThemeSwitcher","next"]}

package/dist/chunk-KK2TIWTF.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  illustrationAccent,
+  illustrationSvgProps
+} from "./chunk-CEQ3YKHR.js";
+
+// src/illustrations/no-access-illustration.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NoAccessIllustration = forwardRef(
+  function NoAccessIllustration2({ size, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        ...illustrationSvgProps(size, className),
+        "data-slot": "no-access-illustration",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M50,72 V52 A30,20 0 0 1 110,52 V72" }),
+          /* @__PURE__ */ jsx("rect", { x: "36", y: "72", width: "88", height: "48", rx: "10" }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "80",
+              cy: "92",
+              r: "6",
+              style: { stroke: illustrationAccent("var(--primary-text)") },
+              strokeWidth: 3
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "77",
+              y: "98",
+              width: "6",
+              height: "12",
+              rx: "2",
+              style: { stroke: illustrationAccent("var(--primary-text)") },
+              strokeWidth: 3
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+NoAccessIllustration.displayName = "NoAccessIllustration";
+
+export {
+  NoAccessIllustration
+};
+//# sourceMappingURL=chunk-KK2TIWTF.js.map

package/dist/chunk-KK2TIWTF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/illustrations/no-access-illustration.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  illustrationSvgProps,\n  illustrationAccent,\n  type IllustrationProps,\n} from \"./illustration-base\";\n\n/**\n * Permission / access-denied state. A line-art padlock with a `--primary-text`\n * keyhole — reads as \"restricted\", not \"broken\". The keyhole is meaning-bearing\n * (per the accent-semantics convention in `illustration-base.tsx`, #48\n * finding 1) — it's what distinguishes a padlock from a generic rounded box.\n */\nexport const NoAccessIllustration = forwardRef<SVGSVGElement, IllustrationProps>(\n  function NoAccessIllustration({ size, className, ...props }, ref) {\n    return (\n      <svg\n        ref={ref}\n        {...illustrationSvgProps(size, className)}\n        data-slot=\"no-access-illustration\"\n        {...props}\n      >\n        <path d=\"M50,72 V52 A30,20 0 0 1 110,52 V72\" />\n        <rect x=\"36\" y=\"72\" width=\"88\" height=\"48\" rx=\"10\" />\n        <circle\n          cx=\"80\"\n          cy=\"92\"\n          r=\"6\"\n          style={{ stroke: illustrationAccent(\"var(--primary-text)\") }}\n          strokeWidth={3}\n        />\n        <rect\n          x=\"77\"\n          y=\"98\"\n          width=\"6\"\n          height=\"12\"\n          rx=\"2\"\n          style={{ stroke: illustrationAccent(\"var(--primary-text)\") }}\n          strokeWidth={3}\n        />\n      </svg>\n    );\n  },\n);\nNoAccessIllustration.displayName = \"NoAccessIllustration\";\n"],"mappings":";;;;;;;AAAA,SAAS,kBAAkB;AAgBrB,SAME,KANF;AAHC,IAAM,uBAAuB;AAAA,EAClC,SAASA,sBAAqB,EAAE,MAAM,WAAW,GAAG,MAAM,GAAG,KAAK;AAChE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,qBAAqB,MAAM,SAAS;AAAA,QACxC,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,8BAAC,UAAK,GAAE,sCAAqC;AAAA,UAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,MAAK;AAAA,UACnD;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,IAAG;AAAA,cACH,GAAE;AAAA,cACF,OAAO,EAAE,QAAQ,mBAAmB,qBAAqB,EAAE;AAAA,cAC3D,aAAa;AAAA;AAAA,UACf;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,GAAE;AAAA,cACF,OAAM;AAAA,cACN,QAAO;AAAA,cACP,IAAG;AAAA,cACH,OAAO,EAAE,QAAQ,mBAAmB,qBAAqB,EAAE;AAAA,cAC3D,aAAa;AAAA;AAAA,UACf;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,qBAAqB,cAAc;","names":["NoAccessIllustration"]}

package/dist/chunk-KPZFLTZ2.js

@@ -0,0 +1,61 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/accordion/accordion.tsx
+import { forwardRef } from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = forwardRef(function AccordionItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      ref,
+      "data-slot": "accordion-item",
+      className: cn("border-b", className),
+      ...props
+    }
+  );
+});
+var AccordionTrigger = forwardRef(function AccordionTrigger2({ className, children, headingLevel = 3, ...props }, ref) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { className: "flex", "data-slot": "accordion-header", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "flex flex-1 items-center justify-between py-4 text-body font-medium transition-all hover:underline focus-ring [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground transition-transform duration-base ease-standard" })
+      ]
+    }
+  ) }) });
+});
+var AccordionContent = forwardRef(function AccordionContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      "data-slot": "accordion-content",
+      className: "overflow-hidden text-body data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0 text-muted-foreground", className), children })
+    }
+  );
+});
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+};
+//# sourceMappingURL=chunk-KPZFLTZ2.js.map

package/dist/chunk-KPZFLTZ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/accordion/accordion.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\n\nexport const Accordion = AccordionPrimitive.Root;\n\nexport const AccordionItem = forwardRef<\n  ElementRef<typeof AccordionPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(function AccordionItem({ className, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Item\n      ref={ref}\n      data-slot=\"accordion-item\"\n      className={cn(\"border-b\", className)}\n      {...props}\n    />\n  );\n});\n\nexport interface AccordionTriggerProps extends ComponentPropsWithoutRef<\n  typeof AccordionPrimitive.Trigger\n> {\n  /**\n   * The heading level Radix's `Accordion.Header` renders. Radix hardcodes `h3`,\n   * which skips a level whenever the accordion sits directly under the page\n   * `h1` — so the level is the caller's to set. Visually identical at every\n   * level: the type comes from the trigger, not the heading.\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\nexport const AccordionTrigger = forwardRef<\n  ElementRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerProps\n>(function AccordionTrigger({ className, children, headingLevel = 3, ...props }, ref) {\n  const Heading = `h${headingLevel}` as const;\n  return (\n    <AccordionPrimitive.Header asChild>\n      <Heading className=\"flex\" data-slot=\"accordion-header\">\n        <AccordionPrimitive.Trigger\n          ref={ref}\n          data-slot=\"accordion-trigger\"\n          className={cn(\n            \"flex flex-1 items-center justify-between py-4 text-body font-medium transition-all hover:underline focus-ring [&[data-state=open]>svg]:rotate-180\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <ChevronDown className=\"size-4 shrink-0 text-muted-foreground transition-transform duration-base ease-standard\" />\n        </AccordionPrimitive.Trigger>\n      </Heading>\n    </AccordionPrimitive.Header>\n  );\n});\n\nexport const AccordionContent = forwardRef<\n  ElementRef<typeof AccordionPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(function AccordionContent({ className, children, ...props }, ref) {\n  return (\n    <AccordionPrimitive.Content\n      ref={ref}\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-body data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn(\"pb-4 pt-0 text-muted-foreground\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,wBAAwB;AACpC,SAAS,mBAAmB;AAUxB,cA8BI,YA9BJ;AAPG,IAAM,YAA+B;AAErC,IAAM,gBAAgB,WAG3B,SAASA,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACrD,SACE;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAeM,IAAM,mBAAmB,WAG9B,SAASC,kBAAiB,EAAE,WAAW,UAAU,eAAe,GAAG,GAAG,MAAM,GAAG,KAAK;AACpF,QAAM,UAAU,IAAI,YAAY;AAChC,SACE,oBAAoB,2BAAnB,EAA0B,SAAO,MAChC,8BAAC,WAAQ,WAAU,QAAO,aAAU,oBAClC;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,eAAY,WAAU,0FAAyF;AAAA;AAAA;AAAA,EAClH,GACF,GACF;AAEJ,CAAC;AAEM,IAAM,mBAAmB,WAG9B,SAASC,kBAAiB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAClE,SACE;AAAA,IAAoB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ,8BAAC,SAAI,WAAW,GAAG,mCAAmC,SAAS,GAAI,UAAS;AAAA;AAAA,EAC9E;AAEJ,CAAC;","names":["AccordionItem","AccordionTrigger","AccordionContent"]}

package/dist/chunk-KRVSD4OK.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-KRVSD4OK.js.map

package/dist/chunk-KRVSD4OK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-KXYL3CUS.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/split-panel/split-panel.tsx
+import "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var splitPaneVariants = cva("min-h-0 min-w-0 overflow-auto", {
+  variants: {
+    tone: {
+      plain: "",
+      muted: "bg-surface-muted",
+      card: "bg-card shadow-sm"
+    }
+  },
+  defaultVariants: { tone: "plain" }
+});
+function SplitPanel({
+  start,
+  end,
+  direction = "horizontal",
+  startSize = "1fr",
+  divider = true,
+  startTone = "plain",
+  endTone = "plain",
+  className,
+  startClassName,
+  endClassName
+}) {
+  const isHorizontal = direction === "horizontal";
+  const style = isHorizontal ? { gridTemplateColumns: `${startSize} minmax(0, 1fr)` } : { gridTemplateRows: `${startSize} minmax(0, 1fr)` };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid h-full w-full",
+        isHorizontal ? "grid-flow-col" : "grid-flow-row",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn(splitPaneVariants({ tone: startTone }), startClassName), children: start }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              splitPaneVariants({ tone: endTone }),
+              divider && (isHorizontal ? "border-s" : "border-t") + // #163 — with both panes "plain" there is no fill/elevation
+              // difference between them, so the hairline is the ONLY cue and
+              // must clear the 3:1 non-text bar (WCAG 1.4.11):
+              // `border-border-strong` (`border-strong ≥ 3:1 on --card/
+              // --background` is proven for every theme in
+              // @elabs-ai/components-tokens's themes-contrast.test.ts).
+              // With either tone "muted"/"card" the fill change already
+              // carries the boundary, so the subtle default rung stays —
+              // the redundant-cue exemption in styling-and-tokens.md.
+              (startTone === "plain" && endTone === "plain" ? " border-border-strong" : ""),
+              endClassName
+            ),
+            children: end
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  splitPaneVariants,
+  SplitPanel
+};
+//# sourceMappingURL=chunk-KXYL3CUS.js.map

package/dist/chunk-KXYL3CUS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/split-panel/split-panel.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Per-pane surface tone — the ground-offset tiering axis (research 08 §H, #193).\n * `plain` keeps the ambient ground (default; non-breaking). `card` RAISES the pane as\n * a white `bg-card` + `shadow-sm` and is robust across every theme — a card is\n * lighter than the page ground in BOTH light and dark, so it always reads as raised.\n * `muted` (`bg-surface-muted`) reads as a recessed well ONLY in light themes; in dark\n * themes `--surface-muted` is lighter than `--card`, so a `muted` pane reads as a faint\n * raised tint, not a recess (dark-mode layering only goes UP — there is no surface below\n * the page ground). For a guaranteed cross-theme raise/recess contrast, raise the focus\n * pane with `card` and leave the other `plain`.\n *\n * Exported so the same tone system reaches a `Layout/Resizable` pane — a draggable\n * `ResizablePanel` composes `splitPaneVariants({ tone })` for the identical ground-offset\n * tiering `SplitPanel` gives its `startTone`/`endTone`, instead of a hand-rolled second\n * copy of these three classes. See `Layout/Resizable`'s `Tiered` story.\n */\nexport const splitPaneVariants = cva(\"min-h-0 min-w-0 overflow-auto\", {\n  variants: {\n    tone: {\n      plain: \"\",\n      muted: \"bg-surface-muted\",\n      card: \"bg-card shadow-sm\",\n    },\n  },\n  defaultVariants: { tone: \"plain\" },\n});\n\nexport type SplitPanelTone = NonNullable<VariantProps<typeof splitPaneVariants>[\"tone\"]>;\n\nexport interface SplitPanelProps {\n  start: ReactNode;\n  end: ReactNode;\n  /** Layout axis. Defaults to \"horizontal\" (side-by-side). */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Size of the START pane as a CSS grid track (e.g. \"320px\", \"40%\", \"1fr\").\n   * The END pane fills the remainder. Defaults to \"1fr\" (equal split).\n   */\n  startSize?: string;\n  /** Show a thin divider between panes. Defaults to true. */\n  divider?: boolean;\n  /** Surface tone of the START pane (ground-offset tiering). Defaults to \"plain\". */\n  startTone?: SplitPanelTone;\n  /** Surface tone of the END pane (ground-offset tiering). Defaults to \"plain\". */\n  endTone?: SplitPanelTone;\n  className?: string;\n  startClassName?: string;\n  endClassName?: string;\n}\n\n/**\n * Two-pane layout for master/detail, editor/preview and inspector workflows.\n * Static sizing by design (predictable in tests/SSR) — `startSize` is a CSS grid\n * track (`\"320px\"`, `\"40%\"`, `\"1fr\"`), not a percentage. For panes the user can\n * drag to resize, reach for `Layout/Resizable`'s `ResizablePanelGroup`/\n * `ResizablePanel`/`ResizableHandle` instead and apply `splitPaneVariants({ tone })`\n * to a panel for the same ground-offset tiering. See\n * [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs).\n *\n * For a master/detail surface where the detail should read as a raised card on a\n * recessed list, use `startTone=\"muted\" endTone=\"card\"` (ground-offset tiering).\n */\nexport function SplitPanel({\n  start,\n  end,\n  direction = \"horizontal\",\n  startSize = \"1fr\",\n  divider = true,\n  startTone = \"plain\",\n  endTone = \"plain\",\n  className,\n  startClassName,\n  endClassName,\n}: SplitPanelProps) {\n  const isHorizontal = direction === \"horizontal\";\n  const style = isHorizontal\n    ? { gridTemplateColumns: `${startSize} minmax(0, 1fr)` }\n    : { gridTemplateRows: `${startSize} minmax(0, 1fr)` };\n  return (\n    <div\n      className={cn(\n        \"grid h-full w-full\",\n        isHorizontal ? \"grid-flow-col\" : \"grid-flow-row\",\n        className,\n      )}\n      style={style}\n    >\n      <div className={cn(splitPaneVariants({ tone: startTone }), startClassName)}>{start}</div>\n      <div\n        className={cn(\n          splitPaneVariants({ tone: endTone }),\n          divider &&\n            (isHorizontal ? \"border-s\" : \"border-t\") +\n              // #163 — with both panes \"plain\" there is no fill/elevation\n              // difference between them, so the hairline is the ONLY cue and\n              // must clear the 3:1 non-text bar (WCAG 1.4.11):\n              // `border-border-strong` (`border-strong ≥ 3:1 on --card/\n              // --background` is proven for every theme in\n              // @elabs-ai/components-tokens's themes-contrast.test.ts).\n              // With either tone \"muted\"/\"card\" the fill change already\n              // carries the boundary, so the subtle default rung stays —\n              // the redundant-cue exemption in styling-and-tokens.md.\n              (startTone === \"plain\" && endTone === \"plain\" ? \" border-border-strong\" : \"\"),\n          endClassName,\n        )}\n      >\n        {end}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAAA,OAA+B;AAC/B,SAAS,WAA8B;AAkFnC,SAQE,KARF;AA/DG,IAAM,oBAAoB,IAAI,iCAAiC;AAAA,EACpE,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,QAAQ;AACnC,CAAC;AAqCM,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,eAAe,cAAc;AACnC,QAAM,QAAQ,eACV,EAAE,qBAAqB,GAAG,SAAS,kBAAkB,IACrD,EAAE,kBAAkB,GAAG,SAAS,kBAAkB;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,eAAe,kBAAkB;AAAA,QACjC;AAAA,MACF;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAW,GAAG,kBAAkB,EAAE,MAAM,UAAU,CAAC,GAAG,cAAc,GAAI,iBAAM;AAAA,QACnF;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAAA,cACnC,YACG,eAAe,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU1B,cAAc,WAAW,YAAY,UAAU,0BAA0B;AAAA,cAC9E;AAAA,YACF;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-L37QZALU.js

@@ -0,0 +1,17 @@
+"use client";
+
+// src/lib/merge-refs.ts
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+
+export {
+  mergeRefs
+};
+//# sourceMappingURL=chunk-L37QZALU.js.map