@krizaka/charts 0.1.0 → 0.2.0

package/registry/radar-chart.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "web",
   "engine": "echarts",
+  "tier": "advanced",
   "whenToUse": [
     "Two or three entities compared on five to eight measures of the same scale (scores out of 100)."
   ],

package/registry/sankey.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "web",
   "engine": "echarts",
+  "tier": "advanced",
   "whenToUse": [
     "Where an amount goes, in two or three steps: credits by plan, then by model, then by outcome.",
     "A journey with branches: viewers from sources to subscriptions."

package/registry/scatter-chart.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "web",
   "engine": "echarts",
+  "tier": "advanced",
   "whenToUse": [
     "Whether two measures move together: a video's length and its watch time, a job's input and its duration.",
     "Outliers in a population."

package/registry/sparkline.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "both",
   "engine": "svg",
+  "tier": "core",
   "whenToUse": [
     "Beside a key figure: the last 30 days of a stat.",
     "In a table, one per row: each model's throughput, each video's views."

package/registry/treemap.json

@@ -9,6 +9,7 @@
   "category": "charts",
   "platforms": "web",
   "engine": "echarts",
+  "tier": "advanced",
   "whenToUse": [
     "A hierarchy of amounts: storage by project and kind, credits by team and model."
   ],

package/dist/chunk-DWJPPEMC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/web/hooks.ts","../src/web/parts.tsx","../src/web/frame.tsx","../src/web/export.ts","../src/web/styles.tsx"],"sourcesContent":["\"use client\";\n// The browser facts a chart reacts to: its width (ResizeObserver), whether it is on screen (IntersectionObserver),\n// the reader's motion preference, the theme, and whether it runs in the browser at all (SSR renders a placeholder).\nimport { type RefObject, useEffect, useState, useSyncExternalStore } from \"react\";\n\n/** The element's content width, rounded; 0 until measured (on the server, before the first layout). */\nexport function useWidth(ref: RefObject<HTMLElement | null>): number {\n  const [width, setWidth] = useState(0);\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return undefined;\n    const measure = () => setWidth(Math.round(el.getBoundingClientRect().width));\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return undefined;\n    // Coalesced to one frame: a drag of a window does not redraw the chart a hundred times.\n    let frame = 0;\n    const observer = new ResizeObserver(() => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    });\n    observer.observe(el);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n    };\n  }, [ref]);\n  return width;\n}\n\n/**\n * Whether the element is on screen (with a margin): an entrance waits for it, a loop pauses outside it. `once` keeps\n * `true` after the first sight (entrances); otherwise it follows the element (loops). True where it cannot be known.\n */\nexport function useInView(ref: RefObject<HTMLElement | null>, { once = false, margin = \"120px\" } = {}): boolean {\n  // Without IntersectionObserver (an old runtime, a test DOM), everything counts as on screen.\n  const [inView, setInView] = useState(() => typeof window !== \"undefined\" && typeof IntersectionObserver === \"undefined\");\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof IntersectionObserver === \"undefined\") return undefined;\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        const visible = Boolean(entry?.isIntersecting);\n        setInView(visible);\n        if (visible && once) observer.disconnect();\n      },\n      { rootMargin: margin },\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [ref, once, margin]);\n  return inView;\n}\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\nconst subscribeMotion = (notify: () => void) => {\n  if (typeof matchMedia === \"undefined\") return () => {};\n  const query = matchMedia(REDUCE);\n  query.addEventListener(\"change\", notify);\n  return () => query.removeEventListener(\"change\", notify);\n};\n\n/** Whether the reader asked for reduced motion (false on the server: the CSS guards the entrances anyway). */\nexport function useReducedMotion(): boolean {\n  return useSyncExternalStore(\n    subscribeMotion,\n    () => typeof matchMedia !== \"undefined\" && matchMedia(REDUCE).matches,\n    () => false,\n  );\n}\n\n/** Increments on every theme change (`html` class, style or `data-theme`, and the OS scheme): canvas charts re-read their colours. */\nexport function useThemeVersion(): number {\n  const [version, setVersion] = useState(0);\n  useEffect(() => {\n    const bump = () => setVersion((v) => v + 1);\n    const observer = new MutationObserver(bump);\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\", \"style\", \"data-theme\"] });\n    observer.observe(document.body, { attributes: true, attributeFilter: [\"class\", \"style\", \"data-theme\"] });\n    const query = typeof matchMedia === \"undefined\" ? null : matchMedia(\"(prefers-color-scheme: dark)\");\n    query?.addEventListener(\"change\", bump);\n    return () => {\n      observer.disconnect();\n      query?.removeEventListener(\"change\", bump);\n    };\n  }, []);\n  return version;\n}\n\nconst noop = () => () => {};\n/** False during the server render and the hydration pass, true after: what only the browser can draw waits for it. */\nexport function useMounted(): boolean {\n  return useSyncExternalStore(\n    noop,\n    () => true,\n    () => false,\n  );\n}\n","// The small pieces every chart shares: a series' colour, the legend and the tooltip (the surface of @krizaka/ui's\n// floating elements: raised surface, border, large shadow; text in the text roles, the colour on a key beside it).\nimport type { ReactNode } from \"react\";\n\nimport type { SeriesColor, Tone } from \"../core/types\";\n\n/** Joins class names, skipping the empty ones. */\nexport const cx = (...names: (string | false | null | undefined)[]) => names.filter(Boolean).join(\" \");\n\nconst TONES: Record<Tone, string> = {\n  neutral: \"var(--kz-text-secondary)\",\n  accent: \"var(--kz-accent)\",\n  success: \"var(--kz-success)\",\n  warning: \"var(--kz-warning)\",\n  danger: \"var(--kz-danger)\",\n  info: \"var(--kz-info)\",\n};\n\n/** The CSS colour of a series: its own (`color`), else its palette slot, `var(--kzc-<slot>)`. */\nexport function colorOf(color: SeriesColor | undefined, slot: number): string {\n  if (color === undefined) return `var(--kzc-${((slot - 1) % 8) + 1})`;\n  if (typeof color === \"number\") return `var(--kzc-${color})`;\n  if (color in TONES) return TONES[color as Tone];\n  return color;\n}\n\nexport interface LegendItem {\n  readonly label: string;\n  readonly color: string;\n  readonly shape?: \"square\" | \"line\";\n  readonly dashed?: boolean;\n}\n\n/** The legend: a key in the series' colour beside its name in the text colour. Shown from two series. */\nexport function Legend({ items }: { items: readonly LegendItem[] }) {\n  if (items.length < 2) return null;\n  return (\n    <ul className=\"kzc-legend\" aria-hidden>\n      {items.map((item) => (\n        <li key={item.label}>\n          <span\n            className=\"kzc-key\"\n            data-shape={item.shape}\n            style={{ background: item.dashed ? `repeating-linear-gradient(90deg, ${item.color} 0 4px, transparent 4px 7px)` : item.color }}\n          />\n          {item.label}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\nexport interface TooltipRow {\n  readonly label: string;\n  readonly value: string;\n  readonly color?: string;\n  readonly shape?: \"square\" | \"line\";\n}\n\nexport interface TooltipProps {\n  /** Where the pointer or the active point is, in the plot's pixels. */\n  readonly x: number;\n  readonly y: number;\n  /** The plot's width: the tooltip flips to the left of the point past the middle. */\n  readonly width: number;\n  readonly title?: string;\n  readonly rows: readonly TooltipRow[];\n  readonly note?: ReactNode;\n}\n\n/** The rich tooltip: a title (the category), one row per series (key, name, value), an optional note. */\nexport function Tooltip({ x, y, width, title, rows, note }: TooltipProps) {\n  const flip = x > width / 2;\n  return (\n    <div className=\"kzc-tip\" aria-hidden style={{ left: flip ? x - 12 : x + 12, top: Math.max(0, y - 12), transform: flip ? \"translateX(-100%)\" : undefined }}>\n      {title && <p className=\"kzc-tip-title\">{title}</p>}\n      {rows.map((row, i) => (\n        <p key={i} className=\"kzc-tip-row\">\n          {row.color ? <span className=\"kzc-key\" data-shape={row.shape} style={{ background: row.color }} /> : <span />}\n          <span>{row.label}</span>\n          <b>{row.value}</b>\n        </p>\n      ))}\n      {note && <p className=\"kzc-tip-note\">{note}</p>}\n    </div>\n  );\n}\n\n/**\n * The colour of step `i` of `n` of a sequential scale: the brand hue (slot 1) mixed into the surface in OKLab, from\n * 22 % (still distinct from the surface) to 100 % — the same steps as `sequential()` for the canvas engine.\n */\nexport const stepColor = (i: number, n: number) => `color-mix(in oklab, var(--kzc-1) ${Math.round(22 + (78 * i) / Math.max(1, n - 1))}%, var(--kz-surface-1))`;\n\n/** The legend of a sequential scale: its lowest value, the steps from near the surface to the full hue, its highest. */\nexport function RampLegend({ min, max, steps, write }: { min: number; max: number; steps: number; write: (v: number) => string }) {\n  return (\n    <div className=\"kzc-legend\" aria-hidden>\n      <span>{write(min)}</span>\n      <span style={{ display: \"inline-flex\", gap: 2 }}>\n        {Array.from({ length: steps }, (_, i) => (\n          <span key={i} className=\"kzc-key\" style={{ background: stepColor(i, steps), width: 14 }} />\n        ))}\n      </span>\n      <span>{write(max)}</span>\n    </div>\n  );\n}\n","\"use client\";\n// The frame every web chart is drawn in — where the \"better than the industry\" promises live, once for all of them:\n// - a title (the accessible name) and a description; a written summary (min, max, trend) read by screen readers, or\n//   shown (`summary=\"visible\"`);\n// - the data table, always in the page for assistive technology (visually hidden), shown by \"Show data\";\n// - one tab stop on the plot (`role=\"group\"`, roledescription \"chart\"), the arrow keys walking its points, each one\n//   announced in a polite live region;\n// - loading (a chart skeleton), empty and error states, at the chart's own height;\n// - responsive (ResizeObserver) and SSR without layout shift: the server renders the frame, the summary, the table and\n//   a placeholder of the exact height; the browser draws once it knows the width;\n// - an entrance once on screen, none under reduced motion, none for live data;\n// - export to PNG, SVG and CSV.\nimport { type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode, type RefObject, useCallback, useId, useMemo, useRef, useState } from \"react\";\n\nimport type { ChartKind, ChartLabels } from \"../core/labels\";\nimport { fill } from \"../core/labels\";\nimport type { BrandId, Locale } from \"../core/types\";\nimport { type ChartsSettings, useChartSettings } from \"./context\";\nimport { download, fileName, serializeSvg, svgToPng, toCsv } from \"./export\";\nimport { useInView, useMounted, useWidth } from \"./hooks\";\nimport { cx } from \"./parts\";\nimport { ChartStyles } from \"./styles\";\n\nexport type ExportFormat = \"png\" | \"svg\" | \"csv\";\n\n/** The props every web chart takes, on top of its data. */\nexport interface ChartFrameProps extends ChartsSettings {\n  /** What the chart shows, in a few words: its accessible name, and its heading unless `hideTitle`. */\n  title: string;\n  /** A sentence under the title: the period, the unit, the source. */\n  description?: ReactNode;\n  /** Visually hide the title (it stays the chart's accessible name): a card that already has its heading. */\n  hideTitle?: boolean;\n  /** The height of the plot in pixels. Default 280 (a sparkline: 32). */\n  height?: number;\n  /** The data is on its way: a skeleton of the chart, announced once. */\n  loading?: boolean;\n  /** The data could not be loaded: `true` says the default words, a node says yours (a retry button…). */\n  error?: boolean | ReactNode;\n  /** What to show when there is nothing to draw (default: the `empty` label). An `EmptyState` of @krizaka/ui fits. */\n  empty?: ReactNode;\n  /** The written summary: read by screen readers only (`\"hidden\"`, default), or shown under the chart (`\"visible\"`). */\n  summary?: \"hidden\" | \"visible\";\n  /** Your own summary instead of the generated one (still read first by screen readers). */\n  summaryText?: string;\n  /** The \"Show data\" button (the table is in the page for screen readers either way). Default true. */\n  dataTable?: boolean;\n  /** Export buttons: `true` for PNG, SVG and CSV, or the formats you want. */\n  exportable?: boolean | readonly ExportFormat[];\n  /** Streaming data (a job queue, an auction): no entrance on updates, no announcement of every new point. */\n  live?: boolean;\n  /** The id of the figure. */\n  id?: string;\n  /** A class on the figure (layout: margins, grid placement). */\n  className?: string;\n  /** Inline style on the figure (layout only: colours come from the tokens). */\n  style?: CSSProperties;\n}\n\nexport interface TableModel {\n  /** The header of each column; the first one names the categories. */\n  readonly columns: readonly string[];\n  /** The rows, already written (formatted values). The first cell is the row's header. */\n  readonly rows: readonly (readonly string[])[];\n}\n\nexport interface PlotHandlers {\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n  onPointerMove?: (event: PointerEvent<HTMLDivElement>) => void;\n  onPointerLeave?: () => void;\n  onBlur?: () => void;\n}\n\ninterface FrameInternals {\n  readonly kind: ChartKind;\n  readonly frame: ChartFrameProps;\n  readonly defaultHeight?: number;\n  readonly table: TableModel;\n  readonly summary: string;\n  readonly isEmpty: boolean;\n  /** Draws the plot at the measured width (browser only). */\n  readonly children: (width: number, height: number) => ReactNode;\n  readonly legend?: ReactNode;\n  readonly tooltip?: ReactNode;\n  readonly announcement?: string;\n  readonly handlers?: PlotHandlers;\n  /** Whether the plot has points to walk with the keyboard. */\n  readonly navigable?: boolean;\n  /** A canvas engine exports its own image; the SVG charts are serialised. */\n  readonly exportImage?: (format: \"png\" | \"svg\") => Promise<string | null> | string | null;\n  /** Draw on the server too (a sparkline of a known width). */\n  readonly ssrWidth?: number;\n  /** Whether something is drawn on top of the plot (an active point): dims the other marks. */\n  readonly active?: boolean;\n  readonly plotRef?: RefObject<HTMLDivElement | null>;\n  readonly compact?: boolean;\n  /** Something the chart needs is still loading (the world's countries): `data-pending` until it is there. */\n  readonly pending?: boolean;\n}\n\n/** The settings of a chart (`useChartSettings` re-exported for the charts). */\nexport function useSettings(frame: ChartFrameProps): { locale: Locale; brand?: BrandId; labels: ChartLabels } {\n  return useChartSettings(frame);\n}\n\nexport function ChartFrame({\n  kind,\n  frame,\n  defaultHeight = 280,\n  table,\n  summary,\n  isEmpty,\n  children,\n  legend,\n  tooltip,\n  announcement,\n  handlers,\n  navigable = true,\n  exportImage,\n  ssrWidth,\n  active,\n  plotRef,\n  compact,\n  pending,\n}: FrameInternals) {\n  const { title, description, hideTitle, height = defaultHeight, loading, error, empty, summaryText, dataTable = true, exportable, live, id, className, style } = frame;\n  const { brand, labels } = useChartSettings(frame);\n  const uid = useId();\n  const ids = { title: `${uid}-t`, summary: `${uid}-s`, hint: `${uid}-h`, table: `${uid}-d` };\n  const ownRef = useRef<HTMLDivElement | null>(null);\n  const ref = plotRef ?? ownRef;\n  const figureRef = useRef<HTMLElement | null>(null);\n  const mounted = useMounted();\n  const measured = useWidth(ref);\n  const width = mounted ? measured : 0;\n  const inView = useInView(figureRef, { once: true });\n  const [showTable, setShowTable] = useState(false);\n\n  const formats = useMemo<readonly ExportFormat[]>(() => (exportable === true ? [\"png\", \"svg\", \"csv\"] : exportable || []), [exportable]);\n  const state = error ? \"error\" : loading ? \"loading\" : isEmpty ? \"empty\" : \"ready\";\n\n  const doExport = useCallback(\n    async (format: ExportFormat) => {\n      if (format === \"csv\") {\n        download(fileName(title, \"csv\"), new Blob([`\\uFEFF${toCsv([table.columns, ...table.rows])}`], { type: \"text/csv;charset=utf-8\" }));\n        return;\n      }\n      if (exportImage) {\n        const url = await exportImage(format);\n        if (url) download(fileName(title, format), url);\n        return;\n      }\n      const svg = ref.current?.querySelector<SVGSVGElement>(\"svg.kzc-svg\");\n      if (!svg) return;\n      const background = getComputedStyle(figureRef.current ?? document.body).getPropertyValue(\"--kz-surface-1\").trim() || \"#fff\";\n      const surface = resolveColor(background, figureRef.current);\n      const markup = serializeSvg(svg, surface);\n      if (format === \"svg\") download(fileName(title, \"svg\"), new Blob([markup], { type: \"image/svg+xml\" }));\n      else {\n        const box = svg.getBoundingClientRect();\n        download(fileName(title, \"png\"), await svgToPng(markup, box.width, box.height, surface));\n      }\n    },\n    [exportImage, ref, table, title],\n  );\n\n  const drawWidth = width || ssrWidth || 0;\n  let plot: ReactNode;\n  if (state === \"loading\") {\n    plot = (\n      <div className=\"kzc-skeleton\" role=\"status\">\n        <span className=\"kzc-sr\">{labels.loading}</span>\n        {!compact && [0.55, 0.8, 0.45, 0.95, 0.7, 0.6].map((h, i) => <i key={i} aria-hidden style={{ height: `${h * 100}%` }} />)}\n      </div>\n    );\n  } else if (state === \"error\") {\n    plot = (\n      <div className=\"kzc-state\" data-state=\"error\" role=\"alert\">\n        {error === true ? labels.error : error}\n      </div>\n    );\n  } else if (state === \"empty\") {\n    plot = empty ?? (\n      <div className=\"kzc-state\" data-state=\"empty\" role=\"status\">\n        {labels.empty}\n      </div>\n    );\n  } else if (drawWidth > 0) {\n    plot = children(drawWidth, height);\n  } else {\n    // SSR and the first browser pass: a placeholder of the exact height (no layout shift), the data already in the table.\n    plot = !compact && (\n      <div className=\"kzc-skeleton\" aria-hidden>\n        {[0.55, 0.8, 0.45, 0.95, 0.7, 0.6].map((h, i) => (\n          <i key={i} style={{ height: `${h * 100}%` }} />\n        ))}\n      </div>\n    );\n  }\n\n  const ready = state === \"ready\" && drawWidth > 0;\n  return (\n    <figure\n      ref={figureRef}\n      id={id}\n      className={cx(\"kzc\", className)}\n      style={style}\n      data-kzc=\"\"\n      data-kind={kind}\n      data-state={state}\n      data-brand={brand}\n      data-inview={inView || undefined}\n      data-live={live || undefined}\n      data-active={active || undefined}\n      data-pending={pending || (state === \"ready\" && drawWidth === 0) || undefined}\n      aria-labelledby={ids.title}\n    >\n      <ChartStyles />\n      {(\n        <div className={!hideTitle || description || (!compact && (dataTable || formats.length > 0)) ? \"kzc-head\" : \"kzc-sr\"}>\n          <div className=\"kzc-heading\">\n            <p id={ids.title} className={hideTitle ? \"kzc-sr\" : \"kzc-title\"}>\n              {title}\n            </p>\n            {description && <p className=\"kzc-desc\">{description}</p>}\n          </div>\n          {(dataTable || formats.length > 0) && !compact && state !== \"loading\" && state !== \"error\" && (\n            <div className=\"kzc-tools\">\n              {dataTable && !isEmpty && (\n                <button type=\"button\" className=\"kzc-btn\" aria-expanded={showTable} aria-controls={ids.table} onClick={() => setShowTable((v) => !v)}>\n                  {showTable ? labels.hideData : labels.showData}\n                </button>\n              )}\n              {!isEmpty &&\n                formats.map((format) => (\n                  <button key={format} type=\"button\" className=\"kzc-btn\" onClick={() => void doExport(format)} aria-label={`${title} — ${format.toUpperCase()}`}>\n                    {format === \"png\" ? labels.exportPng : format === \"svg\" ? labels.exportSvg : labels.exportCsv}\n                  </button>\n                ))}\n            </div>\n          )}\n        </div>\n      )}\n      {legend}\n      <div\n        ref={ref}\n        className=\"kzc-plot\"\n        style={{ height }}\n        {...(ready\n          ? {\n              role: \"group\",\n              \"aria-roledescription\": labels.roleDescription,\n              \"aria-labelledby\": ids.title,\n              \"aria-describedby\": navigable ? `${ids.summary} ${ids.hint}` : ids.summary,\n              tabIndex: navigable ? 0 : undefined,\n              ...handlers,\n            }\n          : {})}\n      >\n        {plot}\n        {ready && tooltip}\n      </div>\n      <p id={ids.summary} className={frame.summary === \"visible\" ? \"kzc-summary\" : \"kzc-sr\"}>\n        {summaryText ?? summary}\n      </p>\n      {ready && navigable && (\n        <span id={ids.hint} className=\"kzc-sr\">\n          {labels.keyboardHint}\n        </span>\n      )}\n      <div className=\"kzc-live\" aria-live=\"polite\" aria-atomic=\"true\">\n        {live ? \"\" : announcement}\n      </div>\n      {!isEmpty && (\n        <div id={ids.table} className={showTable ? \"kzc-table-wrap\" : \"kzc-sr\"}>\n          <table className=\"kzc-table\">\n            <caption>{fill(labels.tableCaption, { title })}</caption>\n            <thead>\n              <tr>\n                {table.columns.map((column, i) => (\n                  <th key={i} scope=\"col\">\n                    {column}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {table.rows.map((row, r) => (\n                <tr key={r}>\n                  {row.map((cell, c) =>\n                    c === 0 ? (\n                      <th key={c} scope=\"row\">\n                        {cell}\n                      </th>\n                    ) : (\n                      <td key={c}>{cell}</td>\n                    ),\n                  )}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </figure>\n  );\n}\n\n/** A CSS colour (a `var(--…)`, `light-dark()`, `hsl()`…) as the browser resolves it on `scope`: `rgb(r, g, b)`. */\nexport function resolveColor(color: string, scope: Element | null): string {\n  if (typeof document === \"undefined\") return color;\n  const probe = document.createElement(\"span\");\n  probe.style.color = color;\n  probe.style.display = \"none\";\n  (scope ?? document.body).appendChild(probe);\n  const resolved = getComputedStyle(probe).color;\n  probe.remove();\n  return resolved || color;\n}\n","// Export a chart as a file: CSV (the data table, as the reader sees it), SVG (the drawing, its colours resolved — a\n// file has no --kz-* variables) and PNG (the SVG rasterised at twice the size).\n\n/** One CSV line per row; cells quoted when they hold a separator, a quote or a line break. */\nexport function toCsv(rows: readonly (readonly string[])[]): string {\n  const cell = (value: string) => (/[\",\\n;]/.test(value) ? `\"${value.replace(/\"/g, '\"\"')}\"` : value);\n  return rows.map((row) => row.map(cell).join(\",\")).join(\"\\n\");\n}\n\n/** A file name from a title: `Earnings, last 6 months` → `earnings-last-6-months`. */\nexport function fileName(title: string | undefined, extension: string): string {\n  const base =\n    (title ?? \"chart\")\n      .normalize(\"NFKD\")\n      .replace(/[̀-ͯ]/g, \"\")\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, \"-\")\n      .replace(/^-|-$/g, \"\") || \"chart\";\n  return `${base}.${extension}`;\n}\n\nexport function download(name: string, content: Blob | string): void {\n  const url = typeof content === \"string\" ? content : URL.createObjectURL(content);\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.download = name;\n  link.click();\n  if (typeof content !== \"string\") setTimeout(() => URL.revokeObjectURL(url), 1000);\n}\n\nconst PROPS = [\"fill\", \"stroke\", \"stroke-width\", \"stroke-dasharray\", \"opacity\", \"fill-opacity\", \"font-size\", \"font-weight\", \"font-family\"] as const;\n\n/** A standalone copy of a drawn SVG: every colour and text style the CSS gave it, written on the element. */\nexport function serializeSvg(svg: SVGSVGElement, background?: string): string {\n  const clone = svg.cloneNode(true) as SVGSVGElement;\n  const source = [svg, ...svg.querySelectorAll(\"*\")];\n  const target = [clone, ...clone.querySelectorAll(\"*\")];\n  source.forEach((el, i) => {\n    const style = getComputedStyle(el);\n    const out = target[i] as SVGElement;\n    for (const prop of PROPS) {\n      const value = style.getPropertyValue(prop);\n      if (value) out.style.setProperty(prop, value);\n    }\n    // The entrance animation's dash would export a line half drawn.\n    out.style.removeProperty(\"stroke-dasharray\");\n    if (el.getAttribute(\"stroke-dasharray\")) out.style.setProperty(\"stroke-dasharray\", el.getAttribute(\"stroke-dasharray\")!);\n  });\n  clone.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n  if (background) clone.style.setProperty(\"background\", background);\n  return new XMLSerializer().serializeToString(clone);\n}\n\n/** The SVG drawn on a canvas at `scale` × its size, as a PNG data URL. */\nexport function svgToPng(markup: string, width: number, height: number, background: string, scale = 2): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.onload = () => {\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = width * scale;\n      canvas.height = height * scale;\n      const context = canvas.getContext(\"2d\");\n      if (!context) return reject(new Error(\"No 2D canvas\"));\n      context.fillStyle = background;\n      context.fillRect(0, 0, canvas.width, canvas.height);\n      context.drawImage(image, 0, 0, canvas.width, canvas.height);\n      resolve(canvas.toDataURL(\"image/png\"));\n      return undefined;\n    };\n    image.onerror = () => reject(new Error(\"The SVG could not be rasterised\"));\n    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;\n  });\n}\n","// The charts' own stylesheet: plain CSS with `kzc-` classes on the --kz-* roles, so a chart needs nothing but the\n// tokens an app already loads (no Tailwind source to declare, no CSS import). Rendered once per document through\n// React 19's stylesheet hoisting (`<style href precedence>`, deduplicated, server-rendered in <head>).\n//\n// The palette is `light-dark()`: it follows the `color-scheme` the tokens set (`:root`/`.theme-dark` dark,\n// `html.light`/`.theme-light` light) — a theme switch repaints every chart with no JavaScript. The brand's order comes\n// from a `.brand-<id>` ancestor or the chart's own `data-brand`.\nimport { HUES, ORDERS } from \"../core/palette\";\nimport type { BrandId } from \"../core/types\";\n\nconst slots = (brand: BrandId) =>\n  ORDERS[brand].map((hue, i) => `--kzc-${i + 1}:light-dark(${HUES[hue].light},${HUES[hue].dark});`).join(\"\");\n\nconst PALETTE = [\n  `[data-kzc]{${slots(\"krizaka\")}--kzc-low:light-dark(${HUES.blue.light},${HUES.blue.dark});--kzc-high:light-dark(${HUES.red.light},${HUES.red.dark});}`,\n  ...([\"orazaka\", \"orochia\", \"krizaka\"] as const).map((brand) => `:where(.brand-${brand}) [data-kzc]{${slots(brand)}}`),\n  ...([\"orazaka\", \"orochia\", \"krizaka\"] as const).map((brand) => `[data-kzc][data-brand=${brand}]{${slots(brand)}}`),\n].join(\"\");\n\nconst tone = (name: string, value: string) => `.kzc [data-tone=${name}]{--kzc-tone:${value}}`;\n\nexport const CSS = `${PALETTE}\n.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}\n${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)\")}\n.kzc-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:4px 12px}\n.kzc-heading{display:flex;flex-direction:column;gap:2px;min-width:0}\n.kzc-title{margin:0;font-family:var(--kz-font-display,inherit);font-size:14px;font-weight:600;line-height:20px;color:var(--kzc-text)}\n.kzc-desc{margin:0;font-size:13px;line-height:18px;color:var(--kzc-text-2)}\n.kzc-tools{display:flex;flex-wrap:wrap;gap:4px}\n.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}\n.kzc-btn:hover{background:var(--kz-surface-2);color:var(--kzc-text)}\n.kzc-btn:focus-visible,.kzc-plot:focus-visible{outline:2px solid var(--kz-ring);outline-offset:2px}\n.kzc-btn[aria-pressed=true]{background:var(--kz-surface-3);color:var(--kzc-text)}\n.kzc-plot{position:relative;width:100%;border-radius:var(--kz-radius-md,8px);outline:none}\n.kzc-plot svg{display:block;overflow:visible}\n.kzc-svg text{fill:var(--kzc-text-2);font-size:11px;font-family:inherit}\n.kzc-svg .kzc-strong{fill:var(--kzc-text);font-weight:600}\n.kzc-grid{stroke:var(--kzc-grid);stroke-width:1;shape-rendering:crispEdges}\n.kzc-axis{stroke:var(--kzc-axis);stroke-width:1;shape-rendering:crispEdges}\n.kzc-threshold{stroke:var(--kzc-tone);stroke-width:1.5;stroke-dasharray:6 4}\n.kzc-threshold-label{fill:var(--kzc-text)!important;font-weight:600;paint-order:stroke;stroke:var(--kzc-surface);stroke-width:3px;stroke-linejoin:round}\n.kzc-cursor{stroke:var(--kzc-axis);stroke-width:1}\n.kzc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}\n.kzc-area{stroke:none;opacity:.14}\n.kzc-dot{stroke:var(--kzc-surface);stroke-width:2}\n.kzc-mark{transition:opacity .15s}\n.kzc[data-active] .kzc-mark[data-dim]{opacity:.35}\n.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)}\n.kzc-legend li{display:inline-flex;align-items:center;gap:6px}\n.kzc-key{width:10px;height:10px;border-radius:3px;flex:none}\n.kzc-key[data-shape=line]{height:3px;border-radius:2px;width:14px}\n.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}\n.kzc-tip-title{margin:0 0 4px;font-weight:600;color:var(--kzc-text)}\n.kzc-tip-row{display:flex;align-items:center;gap:8px;margin:0}\n.kzc-tip-row span:nth-child(2){flex:1;color:var(--kzc-text-2)}\n.kzc-tip-row b{font-weight:600}\n.kzc-tip-note{margin:4px 0 0;color:var(--kzc-text-3)}\n.kzc-summary{margin:0;font-size:12px;line-height:18px;color:var(--kzc-text-2)}\n.kzc-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n.kzc-table-wrap{max-height:320px;overflow:auto;border:1px solid var(--kz-border-subtle);border-radius:var(--kz-radius-md,8px)}\n.kzc-table{width:100%;border-collapse:collapse;font-size:12px}\n.kzc-table caption{padding:8px 10px;text-align:left;font-weight:600;color:var(--kzc-text)}\n.kzc-table th,.kzc-table td{padding:6px 10px;border-top:1px solid var(--kz-border-subtle);text-align:right;white-space:nowrap}\n.kzc-table th[scope=row],.kzc-table thead th:first-child{text-align:left;font-weight:500;color:var(--kzc-text)}\n.kzc-table thead th{position:sticky;top:0;background:var(--kz-surface-1);color:var(--kzc-text-2);font-weight:500}\n.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)}\n.kzc-state[data-state=error]{color:var(--kz-danger-text,var(--kzc-text))}\n.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}\n.kzc-skeleton i{flex:1;border-radius:4px 4px 0 0;background:var(--kz-surface-2)}\n.kzc-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}\n.kzc-host{position:absolute;inset:0}\n.kzc-host>div{border-radius:inherit}\n@media (prefers-reduced-motion:no-preference){\n.kzc-skeleton i{animation:kzc-pulse 1.6s ease-in-out infinite}\n.kzc[data-inview] .kzc-enter-line{stroke-dasharray:1;stroke-dashoffset:1;animation:kzc-draw .9s var(--kz-ease,ease-out) forwards}\n.kzc[data-inview] .kzc-enter-fade{opacity:0;animation:kzc-fade .6s .3s var(--kz-ease,ease-out) forwards}\n.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}\n.kzc[data-inview] .kzc-enter-grow[data-negative]{transform-origin:top}\n.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}\n.kzc[data-inview] .kzc-enter-growx[data-negative]{transform-origin:right}\n.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}\n.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}\n.kzc[data-live] *{animation:none!important}\n}\n@keyframes kzc-draw{to{stroke-dashoffset:0}}\n@keyframes kzc-fade{to{opacity:1}}\n@keyframes kzc-grow{to{transform:scaleY(1)}}\n@keyframes kzc-growx{to{transform:scaleX(1)}}\n@keyframes kzc-pop{to{opacity:1;transform:none}}\n@keyframes kzc-pulse{50%{opacity:.5}}\n@media (forced-colors:active){.kzc-line{stroke:CanvasText}.kzc-key{forced-color-adjust:none}}\n`.replace(/\\n/g, \"\");\n\n/** The stylesheet, once per document (React 19 hoists and deduplicates it, on the server too). */\nexport function ChartStyles() {\n  return (\n    <style href=\"krizaka-charts\" precedence=\"default\">\n      {CSS}\n    </style>\n  );\n}\n"],"mappings":"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","names":["useState","jsx","jsx","jsxs","useState"]}