@krizaka/charts 0.3.0 → 0.4.0

package/dist/{chunk-3CJHBJXA.js → chunk-OVASCEGF.js}

@@ -1,72 +1,7 @@
 "use client";
-
-// src/core/labels.ts
-var DEFAULT_LABELS = {
-  showData: "Show data",
-  hideData: "Hide data",
-  tableCaption: "{title} \u2014 data",
-  exportPng: "PNG",
-  exportSvg: "SVG",
-  exportCsv: "CSV",
-  loading: "Loading chart\u2026",
-  empty: "No data for this period yet.",
-  error: "The chart could not be loaded.",
-  keyboardHint: "Use the arrow keys to move between points, Home and End to jump to the ends.",
-  roleDescription: "chart",
-  summaryIntro: "{kind}, {count}.",
-  summarySeries: "{label}: from {first} to {last}",
-  summaryRange: "lowest {min} ({minAt}), highest {max} ({maxAt})",
-  summaryTrendUp: "up {change}",
-  summaryTrendDown: "down {change}",
-  summaryTrendFlat: "stable",
-  summaryTotal: "total {total}",
-  summaryThreshold: "{label} at {value}",
-  summaryShare: "{label} {value} ({share})",
-  summaryCorrelation: "correlation {r}",
-  summaryConversion: "{from} \u2192 {to} {rate}",
-  summaryOverall: "overall {rate}",
-  summaryPeak: "peak {value} ({at})",
-  summaryActive: "{count} with a value",
-  summaryOhlc: "opened at {open}, closed at {close}, low {low}, high {high}",
-  kinds: {
-    line: "Line chart",
-    area: "Area chart",
-    bar: "Bar chart",
-    pie: "Pie chart",
-    donut: "Donut chart",
-    gauge: "Gauge",
-    sparkline: "Sparkline",
-    radar: "Radar chart",
-    heatmap: "Heatmap",
-    calendar: "Calendar heatmap",
-    sankey: "Flow diagram",
-    funnel: "Funnel",
-    candlestick: "Candlestick chart",
-    treemap: "Treemap",
-    scatter: "Scatter chart",
-    map: "Map",
-    globe: "Globe",
-    chart: "Chart"
-  },
-  category: "Category",
-  value: "Value",
-  total: "Total",
-  noValue: "\u2014"
-};
-function mergeLabels(...layers) {
-  let out = DEFAULT_LABELS;
-  for (const layer of layers) {
-    if (!layer) continue;
-    out = { ...out, ...layer, kinds: { ...out.kinds, ...layer.kinds } };
-  }
-  return out;
-}
-function capitalize(text) {
-  return text.charAt(0).toLocaleUpperCase() + text.slice(1);
-}
-function fill(template, values) {
-  return template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
-}
+import {
+  mergeLabels
+} from "./chunk-GRRFPI27.js";
 
 // src/web/context.tsx
 import { createContext, useContext, useMemo } from "react";
@@ -88,6 +23,11 @@ function useChartSettings(own) {
     [own.locale, own.brand, own.labels, shared]
   );
 }
+var CardContext = createContext(null);
+var ChartCardProvider = CardContext.Provider;
+function useChartCard() {
+  return useContext(CardContext);
+}
 
 // src/core/palette.ts
 var HUES = {
@@ -102,7 +42,7 @@ var HUES = {
 };
 var ORDERS = {
   krizaka: ["blue", "green", "magenta", "yellow", "aqua", "orange", "violet", "red"],
-  orazaka: ["orange", "aqua", "blue", "yellow", "magenta", "green", "violet", "red"],
+  orazaka: ["orange", "blue", "aqua", "yellow", "magenta", "green", "violet", "red"],
   orochia: ["violet", "magenta", "yellow", "aqua", "orange", "blue", "green", "red"]
 };
 function palette(brand, mode) {
@@ -171,11 +111,10 @@ function contrast(a, b) {
 }
 
 export {
-  DEFAULT_LABELS,
-  capitalize,
-  fill,
   ChartsProvider,
   useChartSettings,
+  ChartCardProvider,
+  useChartCard,
   HUES,
   ORDERS,
   palette,
@@ -183,4 +122,4 @@ export {
   sequential,
   contrast
 };
-//# sourceMappingURL=chunk-3CJHBJXA.js.map
+//# sourceMappingURL=chunk-OVASCEGF.js.map

package/dist/chunk-OVASCEGF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/web/context.tsx","../src/core/palette.ts"],"sourcesContent":["\"use client\";\n// One place for what every chart of an app shares: the locale its figures are written in, the brand its palette\n// leads with, and the words it says (translated once, from the app's catalogue). Each chart may still override them.\nimport { createContext, type ReactNode, useContext, useMemo } from \"react\";\n\nimport { type ChartLabels, type ChartLabelsInput, mergeLabels } from \"../core/labels\";\nimport type { BrandId, Locale } from \"../core/types\";\n\nexport interface ChartsSettings {\n  /** The locale of every figure and date (`\"fr-FR\"`). Default `\"en-US\"`. */\n  locale?: Locale;\n  /**\n   * The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it\n   * when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).\n   */\n  brand?: BrandId;\n  /** The words, translated: the buttons, the states, the written summary. */\n  labels?: ChartLabelsInput;\n}\n\ninterface ResolvedSettings {\n  readonly locale: Locale;\n  readonly brand?: BrandId;\n  readonly labels: ChartLabels;\n  readonly raw?: ChartLabelsInput;\n}\n\nconst DEFAULTS: ResolvedSettings = { locale: \"en-US\", labels: mergeLabels() };\nconst Context = createContext<ResolvedSettings>(DEFAULTS);\n\nexport interface ChartsProviderProps extends ChartsSettings {\n  children: ReactNode;\n}\n\n/** Sets the locale, the brand and the words of every chart below it. */\nexport function ChartsProvider({ locale, brand, labels, children }: ChartsProviderProps) {\n  const parent = useContext(Context);\n  const value = useMemo<ResolvedSettings>(() => {\n    const raw: ChartLabelsInput | undefined = labels ? { ...parent.raw, ...labels, kinds: { ...parent.raw?.kinds, ...labels.kinds } } : parent.raw;\n    return { locale: locale ?? parent.locale, brand: brand ?? parent.brand, labels: mergeLabels(raw), raw };\n  }, [locale, brand, labels, parent]);\n  return <Context.Provider value={value}>{children}</Context.Provider>;\n}\n\n/** The settings of a chart: its own props over the provider's over the defaults. */\nexport function useChartSettings(own: ChartsSettings): { locale: Locale; brand?: BrandId; labels: ChartLabels } {\n  const shared = useContext(Context);\n  return useMemo(\n    () => ({ locale: own.locale ?? shared.locale, brand: own.brand ?? shared.brand, labels: own.labels ? mergeLabels(shared.raw, own.labels) : shared.labels }),\n    [own.locale, own.brand, own.labels, shared],\n  );\n}\n\n/**\n * What a `ChartCard` hands the chart inside it: the heading (title, insight, description) the card shows once, and the\n * extra controls (a period switch) that sit beside the chart's actions menu. A chart outside a card has none.\n */\nexport interface ChartCardContextValue {\n  readonly title?: string;\n  readonly insight?: ReactNode;\n  readonly description?: ReactNode;\n  readonly extra?: ReactNode;\n}\n\nconst CardContext = createContext<ChartCardContextValue | null>(null);\n\nexport const ChartCardProvider = CardContext.Provider;\n\n/** The card the chart is drawn in, or null. */\nexport function useChartCard(): ChartCardContextValue | null {\n  return useContext(CardContext);\n}\n","// The data palettes. One categorical set of eight hues, stepped for each theme (the dark steps are chosen for the\n// dark surface, not flipped), ordered per brand so that the first series wears the brand's own hue — Krizaka blue,\n// Orazaka orange, Orochia violet then magenta, its gradient. Every order was chosen among the ones that pass the\n// colour-vision checks (scripts/palette.test: lightness band, chroma floor, adjacent ΔE under protan/deutan ≥ 8 —\n// Orochia light 7.2, inside the 6–8 band that requires the secondary encoding every chart carries: legend, direct\n// labels, data table —, normal-vision ΔE ≥ 15, ≥ 3:1 on the surface, the first three slots distinct all-pairs).\n// A 9th series never gets a generated hue: it folds into “Other” or a second chart.\nimport type { BrandId } from \"./types\";\n\nexport type Mode = \"dark\" | \"light\";\n\n/** The eight hues, light and dark steps. */\nexport const HUES = {\n  blue: { light: \"#2a78d6\", dark: \"#3987e5\" },\n  orange: { light: \"#eb6834\", dark: \"#d95926\" },\n  aqua: { light: \"#1baf7a\", dark: \"#199e70\" },\n  yellow: { light: \"#eda100\", dark: \"#c98500\" },\n  magenta: { light: \"#e87ba4\", dark: \"#d55181\" },\n  green: { light: \"#008300\", dark: \"#008300\" },\n  violet: { light: \"#6250d6\", dark: \"#9085e9\" },\n  red: { light: \"#e34948\", dark: \"#e66767\" },\n} as const;\n\nexport type Hue = keyof typeof HUES;\n\n/** The order of the hues for each brand: slot 1 is the brand. */\nexport const ORDERS: Record<BrandId, readonly Hue[]> = {\n  krizaka: [\"blue\", \"green\", \"magenta\", \"yellow\", \"aqua\", \"orange\", \"violet\", \"red\"],\n  orazaka: [\"orange\", \"blue\", \"aqua\", \"yellow\", \"magenta\", \"green\", \"violet\", \"red\"],\n  orochia: [\"violet\", \"magenta\", \"yellow\", \"aqua\", \"orange\", \"blue\", \"green\", \"red\"],\n};\n\n/** The categorical palette of a brand in a theme: eight hex colours, slot 1 first. */\nexport function palette(brand: BrandId, mode: Mode): string[] {\n  return ORDERS[brand].map((hue) => HUES[hue][mode]);\n}\n\n/** The diverging poles (below / above the midpoint): blue ↔ red, a neutral grey between them. */\nexport const DIVERGING = {\n  light: { low: HUES.blue.light, high: HUES.red.light },\n  dark: { low: HUES.blue.dark, high: HUES.red.dark },\n} as const;\n\n// --- Colour arithmetic (OKLab), for the sequential ramps the canvas engine needs as plain colours. ---------------\n\ntype Rgb = [number, number, number];\n\n/** `#rrggbb`, `#rgb`, `rgb(r, g, b)` / `rgba(…)` or `rgb(r g b / a)` → [r, g, b] in 0–255; null otherwise. */\nexport function parseColor(color: string): Rgb | null {\n  const hex = color.trim().match(/^#([\\da-f]{3}|[\\da-f]{6})$/i);\n  if (hex) {\n    const h = hex[1]!.length === 3 ? [...hex[1]!].map((c) => c + c).join(\"\") : hex[1]!;\n    return [0, 2, 4].map((i) => Number.parseInt(h.slice(i, i + 2), 16)) as Rgb;\n  }\n  const rgb = color.trim().match(/^rgba?\\(\\s*([\\d.]+)[\\s,]+([\\d.]+)[\\s,]+([\\d.]+)/i);\n  if (rgb) return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];\n  return null;\n}\n\nconst toLinear = (c: number) => {\n  const v = c / 255;\n  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n};\nconst fromLinear = (v: number) => {\n  const c = v <= 0.0031308 ? v * 12.92 : 1.055 * v ** (1 / 2.4) - 0.055;\n  return Math.round(Math.min(1, Math.max(0, c)) * 255);\n};\n\nfunction toOklab([r8, g8, b8]: Rgb): Rgb {\n  const [r, g, b] = [toLinear(r8), toLinear(g8), toLinear(b8)];\n  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);\n  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);\n  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);\n  return [0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s];\n}\n\nfunction fromOklab([L, a, b]: Rgb): Rgb {\n  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;\n  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;\n  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;\n  return [\n    fromLinear(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),\n    fromLinear(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),\n    fromLinear(-0.0041960863 * l - 0.7034186147 * m + 1.707614031 * s),\n  ];\n}\n\nconst hex = ([r, g, b]: Rgb) => `#${[r, g, b].map((c) => c.toString(16).padStart(2, \"0\")).join(\"\")}`;\n\n/** `a` → `b` at `t` (0–1), interpolated in OKLab (even steps to the eye). Unparseable colours return `b`. */\nexport function mix(a: string, b: string, t: number): string {\n  const ca = parseColor(a);\n  const cb = parseColor(b);\n  if (!ca || !cb) return b;\n  const la = toOklab(ca);\n  const lb = toOklab(cb);\n  return hex(fromOklab([0, 1, 2].map((i) => la[i]! + (lb[i]! - la[i]!) * t) as Rgb));\n}\n\n/**\n * A sequential ramp of `steps` colours, one hue from near the surface (`0`, “almost nothing”) to the full hue: the\n * magnitude of a heatmap, a calendar or a choropleth. The first step is still distinct from the surface.\n */\nexport function sequential(hue: string, surface: string, steps = 5): string[] {\n  return Array.from({ length: steps }, (_, i) => mix(surface, hue, 0.22 + (0.78 * i) / Math.max(1, steps - 1)));\n}\n\n/** WCAG contrast ratio between two colours (for the tests and the labels drawn inside a mark). */\nexport function contrast(a: string, b: string): number {\n  const lum = (c: string) => {\n    const rgb = parseColor(c);\n    if (!rgb) return 0;\n    const [r, g, bl] = rgb.map(toLinear) as Rgb;\n    return 0.2126 * r + 0.7152 * g + 0.0722 * bl;\n  };\n  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x) as [number, number];\n  return (hi + 0.05) / (lo + 0.05);\n}\n"],"mappings":"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","names":["hex"]}

package/dist/{chunk-EQLC2QVN.js → chunk-OZOAKP5F.js}

@@ -10,10 +10,10 @@ import {
   ChartFrame,
   colorOf,
   useSettings
-} from "./chunk-JTKR7ZWP.js";
+} from "./chunk-P6RS2L23.js";
 import {
   fill
-} from "./chunk-3CJHBJXA.js";
+} from "./chunk-GRRFPI27.js";
 
 // src/gauge/gauge.tsx
 import { useMemo } from "react";
@@ -33,7 +33,7 @@ function Gauge(props) {
     `${labels.kinds.gauge}: ${text} (${min === 0 ? "" : `${fmt(min)} \u2013 `}${fmt(max)})${zone?.label ? `, ${zone.label}` : ""}.`,
     target ? `${fill(labels.summaryThreshold, { label: target.label, value: fmt(target.value) })}.` : ""
   ].filter(Boolean).join(" ");
-  const table = { columns: [labels.category, labels.value], rows: [[props.title, text], ["min", fmt(min)], ["max", fmt(max)], ...target ? [[target.label, fmt(target.value)]] : []] };
+  const table = { columns: [labels.category, labels.value], rows: [[props.title ?? "", text], ["min", fmt(min)], ["max", fmt(max)], ...target ? [[target.label, fmt(target.value)]] : []] };
   const at = (v) => START + (Math.min(max, Math.max(min, v)) - min) / (max - min || 1) * (END - START);
   return /* @__PURE__ */ jsx(ChartFrame, { kind: "gauge", frame: { ...props, dataTable: false }, defaultHeight: 180, table, summary, isEmpty: false, navigable: false, children: (width, height) => {
     const radius = Math.max(20, Math.min(width / 2 - 12, (height - 30) / 1.58));
@@ -70,4 +70,4 @@ function Gauge(props) {
 export {
   Gauge
 };
-//# sourceMappingURL=chunk-EQLC2QVN.js.map
+//# sourceMappingURL=chunk-OZOAKP5F.js.map

package/dist/chunk-OZOAKP5F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/gauge/gauge.tsx"],"sourcesContent":["\"use client\";\n// One value against its range: a 240° arc, the value written in the middle, an optional target tick and coloured\n// zones (a quota that turns to warning, then danger). Plain SVG; exposed as a `meter` (value, range and its words).\nimport { useMemo } from \"react\";\n\nimport { valueFormatter } from \"../core/format\";\nimport { fill } from \"../core/labels\";\nimport { polar, strokeArcPath } from \"../core/shape\";\nimport type { Threshold, Tone, ValueFormat } from \"../core/types\";\nimport { ChartFrame, type ChartFrameProps, useSettings } from \"../web/frame\";\nimport { colorOf } from \"../web/parts\";\n\nexport interface GaugeZone {\n  /** The zone runs from the previous one's end (or `min`) to this value. */\n  readonly to: number;\n  readonly tone: Tone;\n  /** Its name, in the summary and the table (“Over quota”). */\n  readonly label?: string;\n}\n\nexport interface GaugeProps extends Omit<ChartFrameProps, \"dataTable\" | \"exportable\"> {\n  /** The value. */\n/** The value. */\n  value: number;\n  /** The start of the range. Default 0. */\n/** The start of the range. Default 0. */\n  min?: number;\n  /** The end of the range. Default 100. */\n/** The end of the range. Default 100. */\n  max?: number;\n  /** How the value is written. */\n/** How the value and the range are written. */\n  format?: ValueFormat;\n  /** The words under the value (“of 50 000 credits”). */\n  caption?: string;\n  /** A tick on the arc: the objective. */\n  target?: Threshold;\n  /** Coloured zones along the arc: the value takes the tone of the zone it is in. */\n  zones?: readonly GaugeZone[];\n  /** The tone of the value without zones. Default `\"accent\"`. */\n/** The tone of the value without zones. Default `\"accent\"`. */\n  tone?: Tone;\n}\n\nconst START = (-120 * Math.PI) / 180;\nconst END = (120 * Math.PI) / 180;\n\n/** One figure against its range — credits used of a plan, a challenge's progress, a load. */\nexport function Gauge(props: GaugeProps) {\n  const { value, min = 0, max = 100, format, caption, target, zones = [], tone = \"accent\" } = props;\n  const { locale, labels } = useSettings(props);\n  const fmt = useMemo(() => valueFormatter(format, locale, labels.noValue), [format, locale, labels.noValue]);\n  const clamped = Math.min(max, Math.max(min, value));\n  const ratio = max > min ? (clamped - min) / (max - min) : 0;\n  const zone = zones.find((z) => clamped <= z.to) ?? zones[zones.length - 1];\n  const color = colorOf(zone?.tone ?? tone, 1);\n  const text = fmt(value);\n  const summary = [\n    `${labels.kinds.gauge}: ${text} (${min === 0 ? \"\" : `${fmt(min)} – `}${fmt(max)})${zone?.label ? `, ${zone.label}` : \"\"}.`,\n    target ? `${fill(labels.summaryThreshold, { label: target.label, value: fmt(target.value) })}.` : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n  const table = { columns: [labels.category, labels.value], rows: [[props.title ?? \"\", text], [\"min\", fmt(min)], [\"max\", fmt(max)], ...(target ? [[target.label, fmt(target.value)]] : [])] };\n  const at = (v: number) => START + ((Math.min(max, Math.max(min, v)) - min) / (max - min || 1)) * (END - START);\n\n  return (\n    <ChartFrame kind=\"gauge\" frame={{ ...props, dataTable: false }} defaultHeight={180} table={table} summary={summary} isEmpty={false} navigable={false}>\n      {(width, height) => {\n        // The arc spans 240°: its lowest points sit at half the radius below the centre, the range labels under them.\n        const radius = Math.max(20, Math.min(width / 2 - 12, (height - 30) / 1.58));\n        const cx = width / 2;\n        const cy = 8 + radius;\n        const stroke = Math.max(8, radius * 0.16);\n        let from = min;\n        return (\n          <div role=\"meter\" aria-label={props.title} aria-valuemin={min} aria-valuemax={max} aria-valuenow={clamped} aria-valuetext={caption ? `${text} ${caption}` : text} style={{ height: \"100%\" }}>\n            <svg className=\"kzc-svg\" width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden>\n              <path d={strokeArcPath(cx, cy, radius, START, END)} style={{ fill: \"none\", stroke: \"var(--kz-surface-3)\", strokeWidth: stroke, strokeLinecap: \"round\" }} />\n              {zones.map((z, i) => {\n                const d = strokeArcPath(cx, cy, radius + stroke / 2 + 4, at(from), at(z.to));\n                from = z.to;\n                return <path key={i} d={d} data-tone={z.tone} style={{ fill: \"none\", stroke: \"var(--kzc-tone)\", strokeWidth: 3, opacity: 0.7 }} />;\n              })}\n              {ratio > 0 && (\n                <path d={strokeArcPath(cx, cy, radius, START, at(clamped))} pathLength={1} className=\"kzc-line kzc-enter-line\" style={{ stroke: color, strokeWidth: stroke }} />\n              )}\n              {target && (\n                <g data-tone={target.tone ?? \"neutral\"}>\n                  <line\n                    x1={polar(cx, cy, radius - stroke, at(target.value))[0]}\n                    y1={polar(cx, cy, radius - stroke, at(target.value))[1]}\n                    x2={polar(cx, cy, radius + stroke, at(target.value))[0]}\n                    y2={polar(cx, cy, radius + stroke, at(target.value))[1]}\n                    style={{ stroke: \"var(--kzc-text)\", strokeWidth: 2, strokeLinecap: \"round\" }}\n                  />\n                </g>\n              )}\n              <text x={cx} y={cy} textAnchor=\"middle\" dominantBaseline=\"central\" className=\"kzc-strong\" style={{ fontSize: Math.max(12, Math.min(32, radius / 2.6, (radius * 1.45) / (text.length * 0.58))) }}>\n                {text}\n              </text>\n              {caption && (\n                <text x={cx} y={cy + Math.max(16, radius / 3.2)} textAnchor=\"middle\" dominantBaseline=\"central\">\n                  {caption}\n                </text>\n              )}\n              <text x={polar(cx, cy, radius, START)[0]} y={polar(cx, cy, radius, START)[1] + stroke + 6} textAnchor=\"middle\">\n                {fmt(min)}\n              </text>\n              <text x={polar(cx, cy, radius, END)[0]} y={polar(cx, cy, radius, END)[1] + stroke + 6} textAnchor=\"middle\">\n                {fmt(max)}\n              </text>\n            </svg>\n          </div>\n        );\n      }}\n    </ChartFrame>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-KNDHO67X.js → chunk-P2NK5L3B.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   LineChart
-} from "./chunk-C4MFZLJM.js";
+} from "./chunk-Z4T3JFNU.js";
 import {
   Kpi,
   toneOf
@@ -17,7 +17,7 @@ import {
 } from "./chunk-XLLYNNC6.js";
 import {
   useSettings
-} from "./chunk-JTKR7ZWP.js";
+} from "./chunk-P6RS2L23.js";
 
 // src/needs/ticker.ts
 function tickerModel(bids, opening, openedAt) {
@@ -75,4 +75,4 @@ function PriceTicker({ bids, opening, openedAt, currency, reserve, timeFormat =
 export {
   PriceTicker
 };
-//# sourceMappingURL=chunk-KNDHO67X.js.map
+//# sourceMappingURL=chunk-P2NK5L3B.js.map

package/dist/{chunk-JTKR7ZWP.js → chunk-P6RS2L23.js}

@@ -2,9 +2,12 @@
 import {
   HUES,
   ORDERS,
-  fill,
+  useChartCard,
   useChartSettings
-} from "./chunk-3CJHBJXA.js";
+} from "./chunk-OVASCEGF.js";
+import {
+  fill
+} from "./chunk-GRRFPI27.js";
 
 // src/web/hooks.ts
 import { useEffect, useState, useSyncExternalStore } from "react";
@@ -89,14 +92,16 @@ function useMounted() {
 }
 
 // src/web/parts.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState as useState2 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var cx = (...names) => names.filter(Boolean).join(" ");
 var TONES = {
   neutral: "var(--kz-text-secondary)",
   accent: "var(--kz-accent)",
   success: "var(--kz-success)",
   warning: "var(--kz-warning)",
-  danger: "var(--kz-danger)",
+  // A failure is stated, not shouted: the danger hue eased toward the muted text so a block of it stays calm.
+  danger: "color-mix(in oklab, var(--kz-danger) 78%, var(--kz-text-muted))",
   info: "var(--kz-info)"
 };
 function colorOf(color, slot) {
@@ -105,19 +110,54 @@ function colorOf(color, slot) {
   if (color in TONES) return TONES[color];
   return color;
 }
-function Legend({ items }) {
-  if (items.length < 2) return null;
-  return /* @__PURE__ */ jsx("ul", { className: "kzc-legend", "aria-hidden": true, children: items.map((item) => /* @__PURE__ */ jsxs("li", { children: [
-    /* @__PURE__ */ jsx(
+function Legend({ items, off, onToggle, toggleName, always }) {
+  if (items.length < 2 && !always) return null;
+  const live = items.filter((item) => !off?.has(item.label)).length;
+  return /* @__PURE__ */ jsx("ul", { className: "kzc-legend", "aria-hidden": onToggle ? void 0 : true, children: items.map((item) => {
+    const isOff = off?.has(item.label) ?? false;
+    const key = /* @__PURE__ */ jsx(
       "span",
       {
         className: "kzc-key",
         "data-shape": item.shape,
         style: { background: item.dashed ? `repeating-linear-gradient(90deg, ${item.color} 0 4px, transparent 4px 7px)` : item.color }
       }
-    ),
-    item.label
-  ] }, item.label)) });
+    );
+    const text = /* @__PURE__ */ jsxs(Fragment, { children: [
+      item.label,
+      item.detail && /* @__PURE__ */ jsx("span", { className: "kzc-legend-detail", children: item.detail })
+    ] });
+    return /* @__PURE__ */ jsx("li", { children: onToggle ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "kzc-chip",
+        "aria-pressed": !isOff,
+        title: toggleName?.(item.label),
+        disabled: !isOff && live <= 1,
+        onClick: () => onToggle(item.label),
+        children: [
+          key,
+          text
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      key,
+      text
+    ] }) }, item.label);
+  }) });
+}
+function useToggles() {
+  const [off, setOff] = useState2(() => /* @__PURE__ */ new Set());
+  const toggle = useCallback((label) => {
+    setOff((current) => {
+      const next = new Set(current);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  }, []);
+  return { off, toggle };
 }
 function Tooltip({ x, y, width, title, rows, note }) {
   const flip = x > width / 2;
@@ -152,11 +192,19 @@ var tone = (name, value) => `.kzc [data-tone=${name}]{--kzc-tone:${value}}`;
 var CSS = `${PALETTE}
 .kzc{--kzc-text:var(--kz-text-primary);--kzc-text-2:var(--kz-text-secondary);--kzc-text-3:var(--kz-text-muted);--kzc-grid:var(--kz-border-subtle);--kzc-axis:var(--kz-border-default);--kzc-surface:var(--kz-surface-1);--kzc-tone:var(--kz-text-secondary);margin:0;min-width:0;display:flex;flex-direction:column;gap:8px;color:var(--kzc-text);font-family:var(--kz-font-sans,system-ui,sans-serif);font-variant-numeric:tabular-nums}
 ${tone("neutral", "var(--kz-text-secondary)")}${tone("accent", "var(--kz-accent)")}${tone("success", "var(--kz-success)")}${tone("warning", "var(--kz-warning)")}${tone("danger", "var(--kz-danger)")}${tone("info", "var(--kz-info)")}
-.kzc-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 12px}
-.kzc-heading{display:flex;flex-direction:column;gap:2px;min-width:0}
+.kzc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:4px 12px}
+.kzc-heading{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
 .kzc-title{margin:0;font-family:var(--kz-font-display,inherit);font-size:14px;font-weight:600;line-height:20px;color:var(--kzc-text)}
+.kzc-heading[data-insight] .kzc-title{font-family:var(--kz-font-sans,inherit);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--kzc-text-2)}
+.kzc-insight{margin:2px 0 0;font-family:var(--kz-font-display,inherit);font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em;color:var(--kzc-text);font-variant-numeric:tabular-nums}
+.kzc-note{margin:0;font-size:12px;line-height:18px;color:var(--kzc-text-2)}
 .kzc-desc{margin:0;font-size:13px;line-height:18px;color:var(--kzc-text-2)}
-.kzc-tools{display:flex;flex-wrap:wrap;gap:4px}
+.kzc-tools{display:flex;flex-wrap:wrap;flex:none;align-items:center;justify-content:flex-end;gap:4px;max-width:100%}
+.kzc-more{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:-4px -4px 0 0;padding:0;border:0;border-radius:var(--kz-radius-md,8px);background:transparent;color:var(--kzc-text-2);cursor:pointer;transition:background-color .15s,color .15s}
+.kzc-more:hover:not(:disabled){background:var(--kz-surface-2);color:var(--kzc-text)}
+.kzc-more:disabled{cursor:default;opacity:.7}
+.kzc-more:focus-visible{outline:2px solid var(--kz-ring);outline-offset:2px}
+.kzc-more svg{width:18px;height:18px}
 .kzc-btn{appearance:none;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid var(--kz-border-default);border-radius:var(--kz-radius-md,8px);background:transparent;color:var(--kzc-text-2);font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background-color .15s,color .15s}
 .kzc-btn:hover{background:var(--kz-surface-2);color:var(--kzc-text)}
 .kzc-btn:focus-visible,.kzc-plot:focus-visible{outline:2px solid var(--kz-ring);outline-offset:2px}
@@ -177,9 +225,16 @@ ${tone("neutral", "var(--kz-text-secondary)")}${tone("accent", "var(--kz-accent)
 .kzc[data-active] .kzc-mark[data-dim]{opacity:.35}
 .kzc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--kzc-text-2)}
 .kzc-legend li{display:inline-flex;align-items:center;gap:6px}
+.kzc-legend-detail{margin-left:2px;color:var(--kzc-text-2)}
+.kzc-chip{appearance:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--kz-border-default);border-radius:999px;background:transparent;color:var(--kzc-text);font:inherit;font-size:12px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,opacity .15s}
+.kzc-chip:hover:not(:disabled){background:var(--kz-surface-2)}
+.kzc-chip[aria-pressed=false]{color:var(--kzc-text-2);border-style:dashed}
+.kzc-chip[aria-pressed=false] .kzc-key{opacity:.35}
+.kzc-chip:disabled{cursor:default}
+.kzc-chip:focus-visible{outline:2px solid var(--kz-ring);outline-offset:2px}
 .kzc-key{width:10px;height:10px;border-radius:3px;flex:none}
 .kzc-key[data-shape=line]{height:3px;border-radius:2px;width:14px}
-.kzc-tip{position:absolute;z-index:2;pointer-events:none;min-width:140px;max-width:260px;padding:8px 10px;border:1px solid var(--kz-border-default);border-radius:var(--kz-radius-lg,10px);background:var(--kz-surface-2);color:var(--kzc-text);box-shadow:var(--kz-shadow-lg);font-size:12px;line-height:18px}
+.kzc-tip{animation:none;position:absolute;z-index:2;pointer-events:none;min-width:140px;max-width:260px;padding:8px 10px;border:1px solid var(--kz-border-default);border-radius:var(--kz-radius-lg,10px);background:var(--kz-surface-2);color:var(--kzc-text);box-shadow:var(--kz-shadow-lg);font-size:12px;line-height:18px}
 .kzc-tip-title{margin:0 0 4px;font-weight:600;color:var(--kzc-text)}
 .kzc-tip-row{display:flex;align-items:center;gap:8px;margin:0}
 .kzc-tip-row span:nth-child(2){flex:1;color:var(--kzc-text-2)}
@@ -193,7 +248,8 @@ ${tone("neutral", "var(--kz-text-secondary)")}${tone("accent", "var(--kz-accent)
 .kzc-table th,.kzc-table td{padding:6px 10px;border-top:1px solid var(--kz-border-subtle);text-align:right;white-space:nowrap}
 .kzc-table th[scope=row],.kzc-table thead th:first-child{text-align:left;font-weight:500;color:var(--kzc-text)}
 .kzc-table thead th{position:sticky;top:0;background:var(--kz-surface-1);color:var(--kzc-text-2);font-weight:500}
-.kzc-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;font-size:13px;color:var(--kzc-text-2);border:1px dashed var(--kz-border-default);border-radius:var(--kz-radius-lg,10px)}
+.kzc-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;font-size:13px;line-height:18px;color:var(--kzc-text-2);background:color-mix(in oklab,var(--kz-surface-2) 55%,transparent);border-radius:var(--kz-radius-lg,10px)}
+.kzc-state svg{width:28px;height:28px;color:var(--kzc-text-3)}
 .kzc-state[data-state=error]{color:var(--kz-danger-text,var(--kzc-text))}
 .kzc-skeleton{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6%;padding:12px 4% 24px;border-radius:var(--kz-radius-lg,10px);overflow:hidden}
 .kzc-skeleton i{flex:1;border-radius:4px 4px 0 0;background:var(--kz-surface-2)}
@@ -205,6 +261,11 @@ ${tone("neutral", "var(--kz-text-secondary)")}${tone("accent", "var(--kz-accent)
 .kzc-kpi-label{font-size:13px;color:var(--kzc-text-2)}
 .kzc-kpi-delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--kzc-text)}
 .kzc-kpi-delta svg{width:12px;height:12px;flex:none;color:var(--kzc-tone)}
+.kzc-kpistat{min-width:0}
+.kzc-kpistat[data-good=down] [data-trend=up] svg{color:var(--kz-danger)}
+.kzc-kpistat[data-good=down] [data-trend=down] svg{color:var(--kz-success)}
+.kzc-card{min-width:0}
+.kzc-card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--kz-border-subtle);font-size:12px;line-height:18px;color:var(--kzc-text-3)}
 .kzc-meter{position:relative;height:10px;border-radius:999px;background:var(--kz-surface-3);overflow:hidden;--kzc-tone:var(--kz-accent)}
 .kzc-meter>i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--kzc-tone);transition:width .6s var(--kz-ease,ease-out)}
 .kzc-meter[data-tone=warning]{--kzc-tone:var(--kz-warning)}.kzc-meter[data-tone=danger]{--kzc-tone:var(--kz-danger)}
@@ -214,9 +275,9 @@ ${tone("neutral", "var(--kz-text-secondary)")}${tone("accent", "var(--kz-accent)
 .kzc-skeleton i{animation:kzc-pulse 1.6s ease-in-out infinite}
 .kzc[data-inview] .kzc-enter-line{stroke-dasharray:1;stroke-dashoffset:1;animation:kzc-draw .9s var(--kz-ease,ease-out) forwards}
 .kzc[data-inview] .kzc-enter-fade{opacity:0;animation:kzc-fade .6s .3s var(--kz-ease,ease-out) forwards}
-.kzc[data-inview] .kzc-enter-grow{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;animation:kzc-grow .6s var(--kz-ease,ease-out) forwards}
+.kzc[data-inview] .kzc-enter-grow{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;animation:kzc-grow .6s calc(min(var(--kzc-i,0),24)*22ms) var(--kz-ease,ease-out) forwards}
 .kzc[data-inview] .kzc-enter-grow[data-negative]{transform-origin:top}
-.kzc[data-inview] .kzc-enter-growx{transform:scaleX(0);transform-box:fill-box;transform-origin:left;animation:kzc-growx .6s var(--kz-ease,ease-out) forwards}
+.kzc[data-inview] .kzc-enter-growx{transform:scaleX(0);transform-box:fill-box;transform-origin:left;animation:kzc-growx .6s calc(min(var(--kzc-i,0),24)*22ms) var(--kz-ease,ease-out) forwards}
 .kzc[data-inview] .kzc-enter-growx[data-negative]{transform-origin:right}
 .kzc[data-inview] .kzc-enter-pop{opacity:0;transform:scale(.92);transform-box:view-box;transform-origin:center;animation:kzc-pop .6s var(--kz-ease,ease-out) forwards}
 .kzc:not([data-inview]) .kzc-enter-line,.kzc:not([data-inview]) .kzc-enter-fade,.kzc:not([data-inview]) .kzc-enter-grow,.kzc:not([data-inview]) .kzc-enter-growx,.kzc:not([data-inview]) .kzc-enter-pop{visibility:hidden}
@@ -237,7 +298,7 @@ function ChartStyles() {
 }
 
 // src/web/frame.tsx
-import { useCallback, useId, useMemo, useRef, useState as useState2 } from "react";
+import { lazy, Suspense, useCallback as useCallback2, useId, useMemo, useRef, useState as useState3 } from "react";
 
 // src/web/export.ts
 function toCsv(rows) {
@@ -297,6 +358,7 @@ function svgToPng(markup, width, height, background, scale = 2) {
 
 // src/web/frame.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChartActions = lazy(() => import("./actions-5VG352VZ.js"));
 function useSettings(frame) {
   return useChartSettings(frame);
 }
@@ -309,6 +371,7 @@ function ChartFrame({
   isEmpty,
   children,
   legend,
+  note,
   tooltip,
   announcement,
   handlers,
@@ -320,8 +383,12 @@ function ChartFrame({
   compact,
   pending
 }) {
-  const { title, description, hideTitle, height = defaultHeight, loading, error, empty, summaryText, dataTable = true, exportable, live, id, className, style } = frame;
+  const card = useChartCard();
+  const { hideTitle, height = defaultHeight, loading, error, empty, summaryText, dataTable = true, exportable, actionsMenu = true, live, id, className, style } = frame;
   const { brand, labels } = useChartSettings(frame);
+  const title = frame.title ?? card?.title ?? labels.kinds[kind];
+  const insight = frame.insight ?? card?.insight;
+  const description = frame.description ?? card?.description;
   const uid = useId();
   const ids = { title: `${uid}-t`, summary: `${uid}-s`, hint: `${uid}-h`, table: `${uid}-d` };
   const ownRef = useRef(null);
@@ -331,10 +398,15 @@ function ChartFrame({
   const measured = useWidth(ref);
   const width = mounted ? measured : 0;
   const inView = useInView(figureRef, { once: true });
-  const [showTable, setShowTable] = useState2(false);
-  const formats = useMemo(() => exportable === true ? ["png", "svg", "csv"] : exportable || [], [exportable]);
+  const [showTable, setShowTable] = useState3(false);
+  const [copied, setCopied] = useState3(false);
+  const formats = useMemo(() => {
+    const all = actionsMenu ? ["csv", "png", "svg"] : ["png", "svg", "csv"];
+    if (exportable === void 0) return actionsMenu ? all : [];
+    return exportable === true ? all : exportable || [];
+  }, [exportable, actionsMenu]);
   const state = error ? "error" : loading ? "loading" : isEmpty ? "empty" : "ready";
-  const doExport = useCallback(
+  const doExport = useCallback2(
     async (format) => {
       if (format === "csv") {
         download(fileName(title, "csv"), new Blob([`\uFEFF${toCsv([table.columns, ...table.rows])}`], { type: "text/csv;charset=utf-8" }));
@@ -358,6 +430,16 @@ function ChartFrame({
     },
     [exportImage, ref, table, title]
   );
+  const doCopy = useCallback2(async () => {
+    const text = [table.columns, ...table.rows].map((row) => row.join("	")).join("\n");
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2500);
+    } catch {
+      setCopied(false);
+    }
+  }, [table]);
   const drawWidth = width || ssrWidth || 0;
   let plot;
   if (state === "loading") {
@@ -368,7 +450,10 @@ function ChartFrame({
   } else if (state === "error") {
     plot = /* @__PURE__ */ jsx3("div", { className: "kzc-state", "data-state": "error", role: "alert", children: error === true ? labels.error : error });
   } else if (state === "empty") {
-    plot = empty ?? /* @__PURE__ */ jsx3("div", { className: "kzc-state", "data-state": "empty", role: "status", children: labels.empty });
+    plot = empty ?? /* @__PURE__ */ jsxs2("div", { className: "kzc-state", "data-state": "empty", role: "status", children: [
+      /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d: "M4 20V10M10 20V4M16 20v-7M22 20H2" }) }),
+      labels.empty
+    ] });
   } else if (drawWidth > 0) {
     plot = children(drawWidth, height);
   } else {
@@ -393,16 +478,26 @@ function ChartFrame({
       "aria-labelledby": ids.title,
       children: [
         /* @__PURE__ */ jsx3(ChartStyles, {}),
-        /* @__PURE__ */ jsxs2("div", { className: !hideTitle || description || !compact && (dataTable || formats.length > 0) ? "kzc-head" : "kzc-sr", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "kzc-heading", children: [
-            /* @__PURE__ */ jsx3("p", { id: ids.title, className: hideTitle ? "kzc-sr" : "kzc-title", children: title }),
-            description && /* @__PURE__ */ jsx3("p", { className: "kzc-desc", children: description })
-          ] }),
-          (dataTable || formats.length > 0) && !compact && state !== "loading" && state !== "error" && /* @__PURE__ */ jsxs2("div", { className: "kzc-tools", children: [
-            dataTable && !isEmpty && /* @__PURE__ */ jsx3("button", { type: "button", className: "kzc-btn", "aria-expanded": showTable, "aria-controls": ids.table, onClick: () => setShowTable((v) => !v), children: showTable ? labels.hideData : labels.showData }),
-            !isEmpty && formats.map((format) => /* @__PURE__ */ jsx3("button", { type: "button", className: "kzc-btn", onClick: () => void doExport(format), "aria-label": `${title} \u2014 ${format.toUpperCase()}`, children: format === "png" ? labels.exportPng : format === "svg" ? labels.exportSvg : labels.exportCsv }, format))
-          ] })
-        ] }),
+        (() => {
+          const tools = !compact && state !== "loading" && state !== "error";
+          const menu = actionsMenu && tools && !isEmpty && (dataTable || formats.length > 0);
+          const legacy = !actionsMenu && tools && (dataTable || formats.length > 0);
+          const visible = !hideTitle || description || insight || menu || legacy || card?.extra;
+          return /* @__PURE__ */ jsxs2("div", { className: visible ? "kzc-head" : "kzc-sr", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "kzc-heading", "data-insight": insight ? "" : void 0, children: [
+              /* @__PURE__ */ jsx3("p", { id: ids.title, className: hideTitle ? "kzc-sr" : "kzc-title", children: title }),
+              insight && /* @__PURE__ */ jsx3("p", { className: "kzc-insight", children: insight }),
+              description && /* @__PURE__ */ jsx3("p", { className: "kzc-desc", children: description })
+            ] }),
+            (menu || legacy || card?.extra) && /* @__PURE__ */ jsxs2("div", { className: "kzc-tools", children: [
+              card?.extra,
+              menu && mounted && /* @__PURE__ */ jsx3(Suspense, { fallback: /* @__PURE__ */ jsx3(MoreButton, { label: labels.actions }), children: /* @__PURE__ */ jsx3(ChartActions, { title, table, labels, formats, viewTable: dataTable, onExport: (format) => void doExport(format), onCopy: () => void doCopy() }) }),
+              menu && !mounted && /* @__PURE__ */ jsx3(MoreButton, { label: labels.actions }),
+              legacy && !isEmpty && dataTable && /* @__PURE__ */ jsx3("button", { type: "button", className: "kzc-btn", "aria-expanded": showTable, "aria-controls": ids.table, onClick: () => setShowTable((v) => !v), children: showTable ? labels.hideData : labels.showData }),
+              legacy && !isEmpty && formats.map((format) => /* @__PURE__ */ jsx3("button", { type: "button", className: "kzc-btn", onClick: () => void doExport(format), "aria-label": `${title} \u2014 ${format.toUpperCase()}`, children: format === "png" ? labels.exportPng : format === "svg" ? labels.exportSvg : labels.exportCsv }, format))
+            ] })
+          ] });
+        })(),
         legend,
         /* @__PURE__ */ jsxs2(
           "div",
@@ -424,9 +519,10 @@ function ChartFrame({
             ]
           }
         ),
+        ready && note && /* @__PURE__ */ jsx3("p", { className: "kzc-note", children: note }),
         /* @__PURE__ */ jsx3("p", { id: ids.summary, className: frame.summary === "visible" ? "kzc-summary" : "kzc-sr", children: summaryText ?? summary }),
         ready && navigable && /* @__PURE__ */ jsx3("span", { id: ids.hint, className: "kzc-sr", children: labels.keyboardHint }),
-        /* @__PURE__ */ jsx3("div", { className: "kzc-live", "aria-live": "polite", "aria-atomic": "true", children: live ? "" : announcement }),
+        /* @__PURE__ */ jsx3("div", { className: "kzc-live", "aria-live": "polite", "aria-atomic": "true", children: copied ? labels.copied : live ? "" : announcement }),
         !isEmpty && /* @__PURE__ */ jsx3("div", { id: ids.table, className: showTable ? "kzc-table-wrap" : "kzc-sr", children: /* @__PURE__ */ jsxs2("table", { className: "kzc-table", children: [
           /* @__PURE__ */ jsx3("caption", { children: fill(labels.tableCaption, { title }) }),
           /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: table.columns.map((column, i) => /* @__PURE__ */ jsx3("th", { scope: "col", children: column }, i)) }) }),
@@ -438,6 +534,13 @@ function ChartFrame({
     }
   );
 }
+function MoreButton({ label }) {
+  return /* @__PURE__ */ jsx3("button", { type: "button", className: "kzc-more", "aria-label": label, disabled: true, children: /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, width: "16", height: "16", children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "5", cy: "12", r: "1.8" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "1.8" }),
+    /* @__PURE__ */ jsx3("circle", { cx: "19", cy: "12", r: "1.8" })
+  ] }) });
+}
 function resolveColor(color, scope) {
   if (typeof document === "undefined") return color;
   const probe = document.createElement("span");
@@ -457,6 +560,7 @@ export {
   cx,
   colorOf,
   Legend,
+  useToggles,
   Tooltip,
   stepColor,
   RampLegend,
@@ -465,4 +569,4 @@ export {
   ChartFrame,
   resolveColor
 };
-//# sourceMappingURL=chunk-JTKR7ZWP.js.map
+//# sourceMappingURL=chunk-P6RS2L23.js.map