@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/chart/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","sources":["../../../src/components/chart/LineChart.tsx"],"sourcesContent":["import { useMemo, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { dateFormat, numberFormat } from \"../../lib/intl-cache\";\nimport { CHART_SERIES_COUNT, chartSeriesColor } from \"../../lib/chart-palette\";\nimport { lineSeriesPaint, type LineSeriesPaint, type LineSeriesStyle } from \"./line-series-style\";\nimport { Tooltip } from \"../Popover\";\nimport {\n  ChartEmpty,\n  ChartTable,\n  ChartTip,\n  LegendItem,\n  LegendList,\n  LegendSwatch,\n  LegendToggle,\n  TipBody,\n  ValueGrid,\n  XTickLabel,\n  defaultFormatValue,\n  plotLayout,\n  useElementWidth,\n  useHiddenSeries,\n} from \"./shared\";\nimport { axisTicks } from \"./line-chart-axis\";\nimport { decimate, mergeInstants, nearestIndex, summarize, timeBounds, valueAt, type LinePoint } from \"./line-chart-scale\";\nimport { niceTicks } from \"./time-series-scale\";\n\n/* ============================================================================\n   LINE CHART — non-stacked lines over real timestamps (DX-4933).\n\n   THE FORM. A quantity that moves over time, one line per thing measured, where\n   the question is \"what was it at this moment\", not \"how much was there in this\n   span\". A session's context size per API call is the case it was made for. It\n   is NOT `TimeSeriesChart`: that one takes values already summed into buckets and\n   stacks them into a total, which is the wrong picture for anything that is not\n   additive (two contexts do not add up to a context) and has no place for a\n   point at an arbitrary instant.\n\n   THE CALLER SUPPLIES INSTANTS. Each series is `{t, value}` points in strictly\n   ascending epoch ms; nothing is bucketed, resampled, smoothed or interpolated\n   between points when drawing, and a gap in time is a long segment, not a hole.\n   This component fetches nothing and knows nothing about what the values are:\n   `formatValue` is how a value reads and `formatTime` how an instant reads.\n\n   COLOUR FOLLOWS POSITION, never rank: series take the categorical chart\n   palette in input order, and hiding one never repaints the others. There is no\n   \"Other\" fold on a line chart (nothing to sum into it), so a ninth series\n   throws. Text wears ink tokens, never the series colour.\n\n   THE VALUE AXIS starts at zero and is rounded up over what is visible plus every\n   reference line, so a limit the data is approaching is always on the chart.\n\n   REFERENCE LINES are horizontal, dashed, in a neutral ink and labelled in\n   words at their right end: a line is never told apart from a series by colour.\n\n   MARKERS are diamonds on a series at an instant, with the caller's label and\n   content in a tooltip. A marker whose time falls between two points sits on the\n   straight line between them. Each is its own keyboard stop.\n\n   READING A VALUE. The plot is one tab stop. Hover moves a cursor to the nearest\n   instant any visible series has a point at; the arrow keys, Home and End move it\n   by instant and PageUp/PageDown by a tenth of them. The cursor's readout (each\n   visible series' nearest point, with that point's own instant when it differs)\n   is a tooltip and a polite live region. The accessible name of the plot is a\n   stable summary, and a visually hidden table gives every series' count, first\n   and last instant, lowest and highest value.\n\n   MANY POINTS cost no DOM: a series is one path (thinned to the pixel columns by\n   `decimate`, which keeps each column's extremes), and there is one hover surface\n   however many points there are. Points are dotted only while there are few\n   enough to count.\n\n   NO MOTION. Nothing here animates.\n   ========================================================================= */\n\nexport type { LinePoint } from \"./line-chart-scale\";\nexport type { LineSeriesStyle } from \"./line-series-style\";\n\nexport interface LineSeries {\n  /** Unique within the chart. */\n  key: string;\n  label: string;\n  /**\n   * DXUI-43: a line style in place of the palette colour. `\"striped\"` is a black-and-white striped line (ink over surface, so it reads in\n   * light and dark); `\"danger\"` is the danger (red) token; `\"dashed\"` is a long-dash line in the accent token (DXUI-50). Unset keeps the palette colour for the series' position.\n   */\n  style?: LineSeriesStyle;\n  /** Strictly ascending `t` (epoch ms), finite `value` >= 0 — anything else throws. May be empty. */\n  points: readonly LinePoint[];\n}\n\n/** A horizontal line at a value, e.g. the model's context window. */\nexport interface LineReference {\n  /** Unique within the chart. */\n  id: string;\n  /** Finite and >= 0, in the same unit as the series' values. */\n  value: number;\n  /** Said beside the line and in the hidden list. */\n  label: string;\n}\n\n/** A point of interest on a series, e.g. a compaction. */\nexport interface LineMarker {\n  /** Unique within the chart. */\n  id: string;\n  /** A `LineSeries.key`. */\n  series: string;\n  /** Epoch ms; must fall within that series' first and last point. */\n  t: number;\n  /** Names the marker in its tooltip, its accessible name and the hidden list. */\n  label: string;\n  /** Shown under the label and the time in the marker's tooltip. */\n  content?: ReactNode;\n}\n\nexport interface LineChartProps {\n  /** What the chart measures, e.g. \"Context size\". Names the group and captions the table. */\n  label: string;\n  /** At most 8, in palette order. */\n  series: readonly LineSeries[];\n  referenceLines?: readonly LineReference[];\n  markers?: readonly LineMarker[];\n  /** How a raw value reads in the tooltip, the readout and the table. @default locale-formatted number */\n  formatValue?: (value: number) => string;\n  /** How a value reads on the y axis; use a compact form here. @default `formatValue` */\n  formatAxis?: (value: number) => string;\n  /** How an instant reads in the tooltip, the readout and the table. @default medium date and time in the viewer's locale */\n  formatTime?: (t: number) => string;\n  /** How an instant reads on the x axis, on one line. @default a time of day, with the date where the day changes */\n  formatAxisTime?: (t: number) => string;\n  /** IANA zone instants are labelled in, e.g. \"UTC\". @default the viewer's */\n  timeZone?: string;\n  /** Plot height in px. @default 240 */\n  height?: number;\n  /** Said when there is nothing to draw. @default the built-in \"No data\" */\n  emptyLabel?: string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst MARGIN = { top: 12, right: 12, bottom: 36 };\nconst LINE_WIDTH = 2;\nconst DOT_RADIUS = 2.5;\n/** A series of one point is only its dot, so the dot is larger. */\nconst LONE_DOT_RADIUS = 4;\n/** Past this many points a series is a line only: dots would be a texture, and a DOM node each. */\nconst DOT_MAX = 60;\nconst MARKER_RADIUS = 6;\nconst MARKER_HIT_RADIUS = 12;\nconst REFERENCE_DASH = \"6 4\";\n/** A reference label that would sit above the plot's top edge is set under its line instead. */\nconst REFERENCE_LABEL_ROOM = 14;\n/** How many instants PageUp / PageDown skip: a tenth of them, at least one. */\nconst PAGE_DIVISOR = 10;\n\ninterface Shown {\n  series: LineSeries;\n  color: string;\n  paint: LineSeriesPaint;\n}\n\nfunction validate(props: LineChartProps): void {\n  const { series, referenceLines = [], markers = [] } = props;\n  if (series.length > CHART_SERIES_COUNT) {\n    throw new Error(`LineChart: at most ${CHART_SERIES_COUNT} series (the categorical hues); got ${series.length}.`);\n  }\n  const keys = new Set<string>();\n  for (const s of series) {\n    if (keys.has(s.key)) throw new Error(`LineChart: duplicate series key \"${s.key}\".`);\n    keys.add(s.key);\n    s.points.forEach((p, i) => {\n      if (!Number.isFinite(p.t)) throw new Error(`LineChart: \"${s.key}\" point ${i} has t ${p.t}; instants are finite epoch ms.`);\n      if (i > 0 && p.t <= s.points[i - 1]!.t) throw new Error(`LineChart: \"${s.key}\" instants must be strictly ascending (point ${i}).`);\n      if (!Number.isFinite(p.value) || p.value < 0) throw new Error(`LineChart: \"${s.key}\" has value ${p.value}; values must be finite and >= 0.`);\n    });\n  }\n  const refs = new Set<string>();\n  for (const r of referenceLines) {\n    if (refs.has(r.id)) throw new Error(`LineChart: duplicate reference line id \"${r.id}\".`);\n    refs.add(r.id);\n    if (!Number.isFinite(r.value) || r.value < 0) throw new Error(`LineChart: reference line \"${r.id}\" has value ${r.value}; values must be finite and >= 0.`);\n  }\n  const ids = new Set<string>();\n  for (const m of markers) {\n    if (ids.has(m.id)) throw new Error(`LineChart: duplicate marker id \"${m.id}\".`);\n    ids.add(m.id);\n    const target = series.find((s) => s.key === m.series);\n    if (!target) throw new Error(`LineChart: marker \"${m.id}\" names series \"${m.series}\", which is not in series.`);\n    const first = target.points[0]?.t;\n    const last = target.points[target.points.length - 1]?.t;\n    if (first === undefined || last === undefined || !Number.isFinite(m.t) || m.t < first || m.t > last) {\n      throw new Error(`LineChart: marker \"${m.id}\" at ${m.t} is outside series \"${m.series}\" (${first} to ${last}).`);\n    }\n  }\n}\n\n/** A path through `points` as `M x,y L x,y ...` with the numbers rounded to a hundredth of a pixel. */\nfunction pathThrough(points: readonly LinePoint[], x: (t: number) => number, y: (v: number) => number): string {\n  return points.map((p, i) => `${i === 0 ? \"M\" : \"L\"}${x(p.t).toFixed(2)},${y(p.value).toFixed(2)}`).join(\"\");\n}\n\n/** A diamond centred on (cx, cy): the one mark shape that is not a circle, so a marker is never mistaken for a data point. */\nfunction diamond(cx: number, cy: number, r: number): string {\n  return `M${cx},${cy - r}L${cx + r},${cy}L${cx},${cy + r}L${cx - r},${cy}Z`;\n}\n\n/** The highest value among the given series' points and the reference lines, 0 when there are none. */\nfunction highest(series: readonly LineSeries[], referenceLines: readonly LineReference[]): number {\n  let max = 0;\n  for (const s of series) for (const p of s.points) max = Math.max(max, p.value);\n  for (const r of referenceLines) max = Math.max(max, r.value);\n  return max;\n}\n\nexport function LineChart(props: LineChartProps) {\n  validate(props);\n  const { label, series, height = 240, emptyLabel, className, ref } = props;\n  const words = useUiStrings().chart.lineChart;\n  if (series.every((s) => s.points.length === 0)) {\n    return <ChartEmpty ref={ref} label={label} text={emptyLabel ?? words.empty} height={height} className={className} />;\n  }\n  return <LinePlot {...props} />;\n}\n\n/** The chart itself, for a chart that has at least one point. Hooks live here so the empty state costs none. */\nfunction LinePlot(props: LineChartProps) {\n  const {\n    label,\n    series,\n    referenceLines = [],\n    markers = [],\n    formatValue: formatCaller,\n    formatTime: formatTimeCaller,\n    formatAxisTime,\n    timeZone,\n    height = 240,\n    className,\n    ref,\n  } = props;\n  const locale = useUiLocale();\n  const words = useUiStrings().chart.lineChart;\n  const formatValue = formatCaller ?? ((value: number) => defaultFormatValue(value, locale));\n  const formatAxis = props.formatAxis ?? formatValue;\n  const formatTime = formatTimeCaller ?? ((t: number) => dateFormat(locale, { dateStyle: \"medium\", timeStyle: \"medium\", timeZone }).format(t));\n  const formatCount = (n: number) => numberFormat(locale, {}).format(n);\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const measured = useElementWidth(measureRef);\n  const [hidden, toggle] = useHiddenSeries();\n  const [cursor, setCursor] = useState<number | null>(null);\n  const [focused, setFocused] = useState(false);\n  const [markerStop, setMarkerStop] = useState(0);\n\n  const colored: Shown[] = series.map((s, index) => {\n    const paint = lineSeriesPaint(s.style, chartSeriesColor(index));\n    return { series: s, color: paint.color, paint };\n  });\n  const shown = colored.filter((c) => !hidden.has(c.series.key));\n\n  /* Everything that costs a pass over the points is computed when the data or the visible set changes, never on a cursor move. */\n  const instants = useMemo(() => mergeInstants(series.filter((s) => !hidden.has(s.key)).map((s) => s.points)), [series, hidden]);\n  const bounds = useMemo(() => timeBounds(series.map((s) => s.points))!, [series]);\n  const dataMax = useMemo(() => highest(series.filter((s) => !hidden.has(s.key)), referenceLines), [series, hidden, referenceLines]);\n  const summaries = useMemo(() => series.map((s) => summarize(s.points)), [series]);\n\n  /* ---- scales ---- */\n  const { min: minT, max: maxT } = bounds;\n  const span = maxT - minT;\n  const zero = dataMax === 0;\n  const nice = niceTicks(dataMax);\n  // Nothing to scale: the axis is its zero line alone, never an invented \"1 token\" top tick.\n  const yTicks = zero ? [0] : nice.ticks;\n  const yMax = nice.max;\n\n  const axisLabels = yTicks.map(formatAxis);\n  const { left, W, plotW, plotH } = plotLayout(measured, height, MARGIN, axisLabels);\n  const x = (t: number) => (span === 0 ? left + plotW / 2 : left + (plotW * (t - minT)) / span);\n  const y = (v: number) => MARGIN.top + plotH * (1 - v / yMax);\n  const base = y(0);\n\n  const xTicks = useMemo(() => axisTicks(minT, maxT, plotW, timeZone, locale, formatAxisTime), [minT, maxT, plotW, timeZone, locale, formatAxisTime]);\n\n  /* ---- the cursor ---- */\n  const cursorAt = (t: number): number | null => (instants.length === 0 ? null : instants[nearestIndex(instants, t)]!);\n  const readoutParts =\n    cursor === null\n      ? []\n      : shown.flatMap((c) => {\n          if (c.series.points.length === 0) return [];\n          const p = c.series.points[nearestIndex(c.series.points, cursor)]!;\n          return [{ shown: c, point: p, at: p.t === cursor ? null : formatTime(p.t) }];\n        });\n  const readout =\n    cursor === null ? \"\" : words.readout(formatTime(cursor), readoutParts.map((r) => words.readoutPart(r.shown.series.label, formatValue(r.point.value), r.at)));\n\n  /** Pointer move, and a tap or click: the cursor goes to the instant under the pointer. */\n  const readAt = (e: PointerEvent<SVGRectElement>) => {\n    if (instants.length === 0) return;\n    const rect = e.currentTarget.getBoundingClientRect();\n    setCursor(cursorAt(minT + ((e.clientX - rect.left) / plotW) * span));\n  };\n\n  const onKeyDown = (e: KeyboardEvent<SVGGElement>) => {\n    if (e.key === \"Escape\") {\n      setCursor(null);\n      return;\n    }\n    if (instants.length === 0) return;\n    const i = cursor === null ? 0 : nearestIndex(instants, cursor);\n    const page = Math.max(1, Math.ceil(instants.length / PAGE_DIVISOR));\n    const to =\n      e.key === \"ArrowRight\" ? i + 1\n      : e.key === \"ArrowLeft\" ? i - 1\n      : e.key === \"PageDown\" ? i + page\n      : e.key === \"PageUp\" ? i - page\n      : e.key === \"Home\" ? 0\n      : e.key === \"End\" ? instants.length - 1\n      : null;\n    if (to === null) return;\n    e.preventDefault();\n    setCursor(instants[Math.min(instants.length - 1, Math.max(0, to))]!);\n  };\n\n  /* ---- the marks ---- */\n  /* The paths are rebuilt only when the data, the width or the axis changes — not on every cursor move. */\n  const paths = useMemo(\n    () => new Map(series.map((s) => [s.key, pathThrough(decimate(s.points, x, plotW), x, y)])),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- x and y are pure functions of exactly the values listed\n    [series, minT, span, left, plotW, yMax, plotH],\n  );\n  const dotted = (points: readonly LinePoint[]) => points.length > 0 && points.length <= DOT_MAX;\n\n  const tipLines = readoutParts.map((r) => (\n    <span key={r.shown.series.key} className=\"flex items-center gap-1.5\">\n      <span aria-hidden style={{ background: r.shown.paint.swatch }} className=\"h-[3px] w-3 shrink-0 rounded-full\" />\n      <span>{words.readoutPart(r.shown.series.label, formatValue(r.point.value), r.at)}</span>\n    </span>\n  ));\n\n  /* The visible markers in time order: the order the arrow keys walk them in. */\n  const shownMarkers = markers\n    .flatMap((m) => {\n      const owner = shown.find((c) => c.series.key === m.series);\n      return owner ? [{ marker: m, owner, value: valueAt(owner.series.points, m.t)! }] : [];\n    })\n    .sort((a, b) => a.marker.t - b.marker.t || a.marker.id.localeCompare(b.marker.id));\n  const stop = Math.min(markerStop, Math.max(0, shownMarkers.length - 1));\n\n  const onMarkerKeyDown = (e: KeyboardEvent<SVGGElement>, i: number) => {\n    const to = e.key === \"ArrowRight\" ? i + 1 : e.key === \"ArrowLeft\" ? i - 1 : e.key === \"Home\" ? 0 : e.key === \"End\" ? shownMarkers.length - 1 : null;\n    if (to === null) return;\n    e.preventDefault();\n    const target = Math.min(shownMarkers.length - 1, Math.max(0, to));\n    setMarkerStop(target);\n    (e.currentTarget.parentElement?.querySelector(`[data-marker-index=\"${target}\"]`) as SVGGElement | null)?.focus();\n  };\n\n  const legend = series.length >= 2;\n\n  return (\n    <div ref={ref} role=\"group\" aria-label={label} className={cn(\"relative flex w-full min-w-0 flex-col gap-3 overflow-clip\", className)}>\n      <div ref={measureRef} className=\"w-full min-w-0\">\n        <svg width={W} height={height} viewBox={`0 0 ${W} ${height}`} data-line-chart className=\"block max-w-full overflow-visible\">\n          {/* The grid and both axes: hairline, solid, recessive. The zero line is the baseline. */}\n          <g aria-hidden>\n            <ValueGrid ticks={yTicks} labels={axisLabels} left={left} right={W - MARGIN.right} y={y} />\n            {xTicks.map((tick) => (\n              <XTickLabel key={tick.t} at={tick.t} x={x(tick.t)} y={base + 14} primary={tick.primary} secondary={tick.secondary} />\n            ))}\n          </g>\n\n          {/* Reference lines sit under the data, so a line that reaches one stays visible. */}\n          {referenceLines.map((r) => {\n            const ry = y(r.value);\n            const under = ry - MARGIN.top < REFERENCE_LABEL_ROOM;\n            return (\n              <g key={r.id} aria-hidden>\n                <line\n                  data-reference={r.id}\n                  x1={left}\n                  x2={W - MARGIN.right}\n                  y1={ry}\n                  y2={ry}\n                  strokeWidth={1.5}\n                  strokeDasharray={REFERENCE_DASH}\n                  className=\"stroke-border-strong\"\n                />\n                <text\n                  data-reference-label={r.id}\n                  x={W - MARGIN.right - 4}\n                  y={under ? ry + 12 : ry - 5}\n                  textAnchor=\"end\"\n                  strokeWidth={3}\n                  className=\"fill-secondary stroke-surface text-2xs [paint-order:stroke]\"\n                >\n                  {r.label}\n                </text>\n              </g>\n            );\n          })}\n\n          {shown.map((c) => (\n            <g key={c.series.key}>\n              {c.series.points.length > 0 && c.paint.underlay !== undefined && (\n                <path\n                  data-line-underlay={c.series.key}\n                  d={paths.get(c.series.key)}\n                  fill=\"none\"\n                  stroke={c.paint.underlay}\n                  strokeWidth={LINE_WIDTH}\n                  strokeLinejoin=\"round\"\n                />\n              )}\n              {c.series.points.length > 0 && (\n                <path\n                  data-line={c.series.key}\n                  d={paths.get(c.series.key)}\n                  fill=\"none\"\n                  stroke={c.color}\n                  strokeWidth={LINE_WIDTH}\n                  strokeDasharray={c.paint.dash}\n                  strokeLinejoin=\"round\"\n                  strokeLinecap={c.paint.dash === undefined ? \"round\" : \"butt\"}\n                />\n              )}\n              {dotted(c.series.points) &&\n                c.series.points.map((p) => (\n                  <circle\n                    key={p.t}\n                    data-dot={c.series.key}\n                    cx={x(p.t)}\n                    cy={y(p.value)}\n                    r={c.series.points.length === 1 ? LONE_DOT_RADIUS : DOT_RADIUS}\n                    fill={c.color}\n                    className=\"stroke-surface\"\n                    strokeWidth={1}\n                  />\n                ))}\n            </g>\n          ))}\n\n          {/* The plot is one tab stop; the hover surface is the one element that hears the pointer however many points there are. */}\n          <g\n            data-plot\n            role=\"img\"\n            tabIndex={0}\n            aria-label={words.plot(label)}\n            onFocus={() => {\n              setFocused(true);\n              setCursor((c) => c ?? instants[0] ?? null);\n            }}\n            onBlur={() => {\n              setFocused(false);\n              setCursor(null);\n            }}\n            onKeyDown={onKeyDown}\n            className=\"outline-none [&:focus-visible>[data-focus-ring]]:stroke-border-interactive\"\n          >\n            <rect\n              data-surface\n              x={left}\n              y={MARGIN.top}\n              width={plotW}\n              height={plotH}\n              fill=\"transparent\"\n              style={{ touchAction: \"pan-y\" }}\n              onPointerMove={readAt}\n              onPointerDown={readAt}\n              onPointerLeave={(e) => {\n                // A finger that lifts leaves the surface at once; the reading it took stays until focus moves on.\n                if (!focused && e.pointerType !== \"touch\") setCursor(null);\n              }}\n            />\n            {cursor !== null && (\n              <g aria-hidden className=\"pointer-events-none\">\n                <line data-cursor={cursor} x1={x(cursor)} x2={x(cursor)} y1={MARGIN.top} y2={base} strokeWidth={1} className=\"stroke-border-strong\" />\n                {readoutParts.map((r) => (\n                  <circle\n                    key={r.shown.series.key}\n                    data-cursor-dot={r.shown.series.key}\n                    cx={x(r.point.t)}\n                    cy={y(r.point.value)}\n                    r={DOT_RADIUS + 1.5}\n                    fill={r.shown.color}\n                    className=\"stroke-surface\"\n                    strokeWidth={2}\n                  />\n                ))}\n              </g>\n            )}\n            <rect\n              data-focus-ring\n              x={left}\n              y={MARGIN.top}\n              width={plotW}\n              height={plotH}\n              fill=\"none\"\n              strokeWidth={2}\n              rx={4}\n              stroke=\"transparent\"\n              className=\"pointer-events-none\"\n            />\n          </g>\n\n          {/* The tooltip's anchor: a 1px mark on the cursor, moved with it. It hears nothing; the open state is the cursor's. */}\n          <Tooltip content={<TipBody label={cursor === null ? \"\" : formatTime(cursor)} lines={tipLines} />} open={cursor !== null} onOpenChange={() => undefined}>\n            <rect data-anchor x={cursor === null ? left : x(cursor)} y={MARGIN.top} width={1} height={1} fill=\"transparent\" aria-hidden className=\"pointer-events-none\" />\n          </Tooltip>\n\n          {shown.length === 0 && (\n            <text data-all-hidden x={left + plotW / 2} y={MARGIN.top + plotH / 2} textAnchor=\"middle\" dy=\"0.32em\" className=\"fill-tertiary text-sm\">\n              {words.allHidden}\n            </text>\n          )}\n\n          {/* Markers last, so they are above the hover surface and take their own pointer and focus. They are one Tab stop between them:\n              the arrow keys, Home and End walk them in time order, so a session with dozens of compactions is not dozens of stops. */}\n          {shownMarkers.map(({ marker: m, owner, value }, i) => {\n            const mx = x(m.t);\n            const my = y(value);\n            const when = formatTime(m.t);\n            return (\n              <ChartTip key={m.id} content={<TipBody label={m.label} lines={[when, ...(m.content === undefined ? [] : [m.content])]} />}>\n                <g\n                  data-marker={m.id}\n                  data-marker-index={i}\n                  data-t={m.t}\n                  data-value={value}\n                  role=\"img\"\n                  tabIndex={i === stop ? 0 : -1}\n                  aria-label={words.marker(m.label, owner.series.label, when)}\n                  onFocusCapture={() => setMarkerStop(i)}\n                  onKeyDown={(e) => onMarkerKeyDown(e, i)}\n                  className=\"cursor-pointer outline-none [&:focus-visible>[data-focus-ring]]:stroke-border-interactive\"\n                >\n                  <circle cx={mx} cy={my} r={MARKER_HIT_RADIUS} fill=\"transparent\" />\n                  <path d={diamond(mx, my, MARKER_RADIUS)} fill={owner.color} strokeWidth={2} strokeLinejoin=\"round\" className=\"stroke-surface\" />\n                  <circle data-focus-ring cx={mx} cy={my} r={MARKER_RADIUS + 4} fill=\"none\" strokeWidth={2} stroke=\"transparent\" />\n                </g>\n              </ChartTip>\n            );\n          })}\n        </svg>\n      </div>\n\n      {legend && (\n        <LegendList label={words.legend}>\n          {colored.map((c) => {\n            const off = hidden.has(c.series.key);\n            return (\n              <LegendItem key={c.series.key} id={c.series.key}>\n                <LegendToggle name={words.showSeries(c.series.label)} off={off} onToggle={() => toggle(c.series.key)} className={cn(off && \"line-through\")}>\n                  <LegendSwatch color={c.color} swatch={c.paint.swatch} off={off} className=\"h-[3px] w-4 shrink-0 rounded-full border\" />\n                  <span className=\"truncate\">{c.series.label}</span>\n                </LegendToggle>\n              </LegendItem>\n            );\n          })}\n        </LegendList>\n      )}\n\n      {/* The cursor's words, announced as it moves. Empty (and silent) when there is no cursor. */}\n      <div data-readout role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {readout}\n      </div>\n\n      {/* Firefox paints a table caption outside the table's own sr-only clip; the wrapper clips it. */}\n      <div className=\"sr-only\">\n        <ChartTable\n          caption={label}\n          columns={[words.columnPoints, words.columnFrom, words.columnTo, words.columnLowest, words.columnHighest]}\n          rows={series.map((s, i) => {\n            const sum = summaries[i]!;\n            return {\n              key: s.key,\n              header: s.label,\n              cells:\n                sum.count === 0\n                  ? [formatCount(0), \"\", \"\", \"\", \"\"]\n                  : [formatCount(sum.count), formatTime(sum.first!), formatTime(sum.last!), formatValue(sum.lowest!), formatValue(sum.highest!)],\n            };\n          })}\n        />\n        {referenceLines.length > 0 && (\n          <ul data-reference-list aria-label={words.referenceLines}>\n            {referenceLines.map((r) => (\n              <li key={r.id}>{words.referenceLine(r.label, formatValue(r.value))}</li>\n            ))}\n          </ul>\n        )}\n        {markers.length > 0 && (\n          <ul data-marker-list aria-label={words.markers}>\n            {markers.map((m) => (\n              <li key={m.id}>{words.marker(m.label, series.find((s) => s.key === m.series)!.label, formatTime(m.t))}</li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["MARGIN","LINE_WIDTH","DOT_RADIUS","LONE_DOT_RADIUS","DOT_MAX","MARKER_RADIUS","MARKER_HIT_RADIUS","REFERENCE_DASH","REFERENCE_LABEL_ROOM","PAGE_DIVISOR","validate","props","series","referenceLines","markers","CHART_SERIES_COUNT","keys","s","p","i","refs","r","ids","m","target","first","last","pathThrough","points","x","y","diamond","cx","cy","highest","max","LineChart","label","height","emptyLabel","className","ref","words","useUiStrings","jsx","ChartEmpty","LinePlot","formatCaller","formatTimeCaller","formatAxisTime","timeZone","locale","useUiLocale","formatValue","value","defaultFormatValue","formatAxis","formatTime","t","dateFormat","formatCount","n","numberFormat","measureRef","useRef","measured","useElementWidth","hidden","toggle","useHiddenSeries","cursor","setCursor","useState","focused","setFocused","markerStop","setMarkerStop","colored","index","paint","lineSeriesPaint","chartSeriesColor","shown","c","instants","useMemo","mergeInstants","bounds","timeBounds","dataMax","summaries","summarize","minT","maxT","span","zero","nice","niceTicks","yTicks","yMax","axisLabels","left","W","plotW","plotH","plotLayout","v","base","xTicks","axisTicks","cursorAt","nearestIndex","readoutParts","readout","readAt","rect","onKeyDown","page","to","paths","decimate","dotted","tipLines","jsxs","shownMarkers","owner","valueAt","a","b","stop","onMarkerKeyDown","legend","cn","ValueGrid","tick","XTickLabel","ry","under","Tooltip","TipBody","mx","my","when","ChartTip","e","LegendList","off","LegendItem","LegendToggle","LegendSwatch","ChartTable","sum"],"mappings":"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"}

package/dist/components/chart/ShareBar.js

@@ -0,0 +1,141 @@
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { useRef as K, useState as _, useLayoutEffect as j } from "react";
+import { cn as S } from "../../lib/cn.js";
+import { CHART_SERIES_COUNT as z, chartSeriesColor as D } from "../../lib/chart-palette.js";
+import { assertChartData as L, ChartTip as V, TipBody as $, ChartTable as I, rowKey as O, OTHER_KEY as U, defaultFormatValue as q, formatShare as H } from "./shared.js";
+import { labelsToDrop as M } from "./share-bar-labels.js";
+import { useUiLocale as F, useUiStrings as X } from "../../lib/i18n/provider.js";
+const Y = 4;
+function G(i, u) {
+  const c = i.reduce((a, r) => a + r.value, 0), h = i.slice(0, z).map((a, r) => ({
+    key: O(a.id),
+    id: a.id,
+    label: a.label,
+    value: a.value,
+    color: a.color ?? D(r),
+    share: c > 0 ? a.value / c : 0,
+    other: !1
+  })), m = i.slice(z);
+  if (m.length > 0) {
+    const a = m.reduce((r, n) => r + n.value, 0);
+    h.push({
+      key: U,
+      id: "other",
+      label: u,
+      value: a,
+      color: "var(--text-tertiary)",
+      share: c > 0 ? a / c : 0,
+      other: !0
+    });
+  }
+  return h;
+}
+function le({ segments: i, label: u, formatValue: c, legend: h = !0, className: m, ref: a }) {
+  const r = F(), n = X().chart, b = c ?? ((e) => q(e, r)), d = (e) => H(e, r);
+  L("ShareBar", i);
+  const f = G(i, n.other), o = f.filter((e) => e.value > 0), C = h && f.length >= 2, w = C && o.length <= Y, N = K(null), [x, B] = _(/* @__PURE__ */ new Set()), A = o.map((e) => `${e.key}:${e.value}`).join("|");
+  return j(() => {
+    const e = N.current;
+    if (!e) {
+      B((l) => l.size === 0 ? l : /* @__PURE__ */ new Set());
+      return;
+    }
+    const p = new Map(o.map((l) => [l.key, l.share])), R = () => {
+      const l = e.getBoundingClientRect(), E = [...e.querySelectorAll("[data-label-key]")].map((s) => {
+        const y = s.getBoundingClientRect(), T = s.dataset.labelKey;
+        return {
+          key: T,
+          share: p.get(T),
+          center: y.left - l.left + y.width / 2,
+          width: s.firstElementChild.getBoundingClientRect().width
+        };
+      }), v = l.width > 0 && E.every((s) => s.width > 0) ? M(E, l.width) : /* @__PURE__ */ new Set();
+      B((s) => s.size === v.size && [...v].every((y) => s.has(y)) ? s : v);
+    };
+    R();
+    const g = new ResizeObserver(R);
+    return g.observe(e), e.querySelectorAll("[data-label-key]").forEach((l) => g.observe(l.firstElementChild)), () => g.disconnect();
+  }, [w, A, r]), /* @__PURE__ */ k("div", { ref: a, role: "group", "aria-label": u, className: S("flex w-full min-w-0 flex-col gap-2", m), children: [
+    /* @__PURE__ */ k("div", { "data-share-bar": !0, className: "flex w-full gap-[2px]", children: [
+      o.map((e, p) => /* @__PURE__ */ t(
+        V,
+        {
+          content: /* @__PURE__ */ t($, { label: e.label, lines: [b(e.value), d(e.share)] }),
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              role: "img",
+              tabIndex: 0,
+              "aria-label": n.shareBar.segment(e.label, b(e.value), d(e.share)),
+              "data-segment": e.other ? void 0 : e.id,
+              "data-other": e.other || void 0,
+              "data-share": e.share,
+              style: { flex: `${e.value} 1 0%` },
+              className: "flex h-6 min-w-1 items-center",
+              children: /* @__PURE__ */ t(
+                "span",
+                {
+                  "data-mark": !0,
+                  style: { backgroundColor: e.color },
+                  className: S(
+                    "block h-3 w-full",
+                    p === 0 && "rounded-s-[4px]",
+                    p === o.length - 1 && "rounded-e-[4px]"
+                  )
+                }
+              )
+            }
+          )
+        },
+        e.key
+      )),
+      o.length === 0 && /* @__PURE__ */ t("div", { className: "h-6 w-full", "aria-hidden": !0 })
+    ] }),
+    w && /* @__PURE__ */ t("div", { ref: N, "aria-hidden": !0, className: "flex w-full gap-[2px]", "data-direct-labels": !0, children: o.map((e) => (
+      /* The label is centred under its segment and never truncated: a clipped "3%" reads "3",
+         which is a wrong number. A tiny segment's label overflows its box on both sides; the fit
+         rule drops it (into the legend) when that would carry it past the bar's ends. */
+      /* @__PURE__ */ t(
+        "span",
+        {
+          "data-label-key": e.key,
+          style: { flex: `${e.value} 1 0%` },
+          className: "flex min-w-1 justify-center",
+          children: /* @__PURE__ */ t(
+            "span",
+            {
+              "data-label-dropped": x.has(e.key) || void 0,
+              className: S(
+                "shrink-0 whitespace-nowrap text-2xs font-medium tabular-nums text-secondary",
+                x.has(e.key) && "invisible"
+              ),
+              children: d(e.share)
+            }
+          )
+        },
+        e.key
+      )
+    )) }),
+    C && /* @__PURE__ */ t("ul", { "aria-hidden": !0, role: "list", "data-legend": !0, className: "flex flex-wrap gap-x-4 gap-y-1", children: f.map((e) => /* @__PURE__ */ k("li", { className: "flex min-w-0 items-center gap-1.5 text-xs text-secondary", children: [
+      /* @__PURE__ */ t("span", { "aria-hidden": !0, "data-swatch": !0, style: { backgroundColor: e.color }, className: "size-2.5 shrink-0 rounded-[2px]" }),
+      /* @__PURE__ */ t("span", { className: "truncate", children: e.label }),
+      w && x.has(e.key) && /* @__PURE__ */ t("span", { "data-legend-share": !0, className: "shrink-0 font-medium tabular-nums", children: d(e.share) })
+    ] }, e.key)) }),
+    /* @__PURE__ */ t(
+      I,
+      {
+        caption: u,
+        columns: [n.shareBar.columnSegment, n.shareBar.columnValue, n.shareBar.columnShare],
+        rows: f.map((e) => ({
+          key: e.key,
+          header: e.label,
+          cells: [b(e.value), d(e.share)]
+        }))
+      }
+    )
+  ] });
+}
+export {
+  le as ShareBar
+};
+//# sourceMappingURL=ShareBar.js.map

package/dist/components/chart/ShareBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareBar.js","sources":["../../../src/components/chart/ShareBar.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { CHART_SERIES_COUNT, chartSeriesColor } from \"../../lib/chart-palette\";\nimport {\n  ChartTable,\n  ChartTip,\n  TipBody,\n  OTHER_KEY,\n  assertChartData,\n  defaultFormatValue,\n  formatShare,\n  rowKey,\n} from \"./shared\";\nimport { labelsToDrop, type LabelBox } from \"./share-bar-labels\";\n\n/* ============================================================================\n   SHARE BAR — one horizontal 100% bar: how a whole divides into parts (DX-3963).\n\n   THE FORM. A part-to-whole question with a handful of parts is one stacked\n   bar, not a pie: lengths on a common baseline are read more accurately than\n   angles, and the bar costs a line of height instead of a square.\n\n   COLOUR IS NEVER THE ONLY CUE. Every segment is also a focusable `img` named\n   \"label: value, share\", a legend row, a tooltip with the same three facts, and\n   a row in a visually hidden table. Hues come from the categorical chart\n   palette (`styles/chart-palette.css`) in input order, never cycled; the 9th\n   segment onward folds into a neutral \"Other\" rather than inventing a ninth hue.\n   A segment's colour follows its POSITION in the input, so the caller sorting\n   (or filtering) is what decides which entity wears which hue.\n\n   TEXT WEARS INK, NEVER THE SERIES COLOUR. A swatch is a coloured box beside\n   the text; the text itself is `text-primary` / `text-secondary`.\n\n   THE GEOMETRY, pinned by test: segments are separated by a 2px gap (the\n   surface shows through it), only the two ENDS of the bar are rounded (4px,\n   anchored to the baseline), and the interior joins are square.\n\n   A DIRECT LABEL IS DRAWN ONLY WHERE IT FITS (DXUI-5). Each label is centred under its\n   segment, never truncated (a clipped \"3%\" would read \"3\"). When two thin neighbours\n   would print their labels over each other, the label of the SMALLER share is not drawn\n   under the bar and its share moves into its legend row instead, so no share is lost.\n   A label wider than its edge segment that would leave the bar is dropped the same way.\n   The decision is by measurement, not segment count: `labelsToDrop` (share-bar-labels.ts), re-run whenever\n   the bar or a label resizes.\n\n   ZERO. A zero-value segment stays in the legend and the table (it is a fact)\n   and is not drawn. When everything is zero there is no bar to divide, so the\n   track is empty and every share reads `0%`, never `NaN%`.\n   ========================================================================= */\n\nexport interface ShareBarSegment {\n  /** Unique within the bar. */\n  id: string;\n  label: string;\n  /** Finite and >= 0 — anything else throws. */\n  value: number;\n  /** Any CSS colour. Wins over the palette hue the segment's position would get. */\n  color?: string;\n}\n\nexport interface ShareBarProps {\n  segments: readonly ShareBarSegment[];\n  /** What the bar measures, e.g. \"Model share\". Names the group and captions the table. */\n  label: string;\n  /** How a raw value reads in the tooltip and the table. @default locale-formatted number */\n  formatValue?: (value: number) => string;\n  /**\n   * DXUI-26: draw the legend (and the direct share labels that lead into it) under the bar. `false` draws the bar\n   * alone, with neither in the DOM, for a surface that names the segments elsewhere (a hover popover). The segments\n   * keep their accessible names, tooltips and the hidden table either way. @default true\n   */\n  legend?: boolean;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** At or under this many drawn segments each one is labelled with its share directly. */\nconst DIRECT_LABEL_MAX = 4;\n\ninterface Row {\n  key: string;\n  id: string;\n  label: string;\n  value: number;\n  color: string;\n  share: number;\n  other: boolean;\n}\n\nfunction toRows(segments: readonly ShareBarSegment[], otherLabel: string): Row[] {\n  const total = segments.reduce((sum, s) => sum + s.value, 0);\n  const rows: Row[] = segments.slice(0, CHART_SERIES_COUNT).map((s, i) => ({\n    key: rowKey(s.id),\n    id: s.id,\n    label: s.label,\n    value: s.value,\n    color: s.color ?? chartSeriesColor(i),\n    share: total > 0 ? s.value / total : 0,\n    other: false,\n  }));\n  const rest = segments.slice(CHART_SERIES_COUNT);\n  if (rest.length > 0) {\n    const value = rest.reduce((sum, s) => sum + s.value, 0);\n    rows.push({\n      key: OTHER_KEY,\n      id: \"other\",\n      label: otherLabel,\n      value,\n      color: \"var(--text-tertiary)\",\n      share: total > 0 ? value / total : 0,\n      other: true,\n    });\n  }\n  return rows;\n}\n\nexport function ShareBar({ segments, label, formatValue: formatCaller, legend: showLegend = true, className, ref }: ShareBarProps) {\n  const locale = useUiLocale();\n  const strings = useUiStrings().chart;\n  const formatValue = formatCaller ?? ((value: number) => defaultFormatValue(value, locale));\n  const share = (fraction: number) => formatShare(fraction, locale);\n  assertChartData(\"ShareBar\", segments);\n  const rows = toRows(segments, strings.other);\n  const drawn = rows.filter((r) => r.value > 0);\n  const legend = showLegend && rows.length >= 2;\n  const direct = legend && drawn.length <= DIRECT_LABEL_MAX;\n  const labelsRef = useRef<HTMLDivElement>(null);\n  const [dropped, setDropped] = useState<ReadonlySet<string>>(new Set());\n\n  // DXUI-5: measure the printed labels against the bar and drop the ones that would touch or leave it. One read\n  // pass per resize (no write between reads), and state changes only when the dropped set actually does. Keyed on\n  // what is drawn (keys and values), not on the `segments` array, so a caller passing a fresh equal array each\n  // render keeps the same observer. CONTRACT with the JSX below: each label is a `[data-label-key]` cell whose\n  // `firstElementChild` is the printed text; the cells' flex-grow puts the cell centre under its segment.\n  const drawnKey = drawn.map((r) => `${r.key}:${r.value}`).join(\"|\");\n  useLayoutEffect(() => {\n    const el = labelsRef.current;\n    if (!el) {\n      setDropped((prev) => (prev.size === 0 ? prev : new Set()));\n      return;\n    }\n    const shareByKey = new Map(drawn.map((r) => [r.key, r.share]));\n    const measure = () => {\n      const bar = el.getBoundingClientRect();\n      const boxes: LabelBox[] = [...el.querySelectorAll<HTMLElement>(\"[data-label-key]\")].map((cell) => {\n        const cellRect = cell.getBoundingClientRect();\n        const key = cell.dataset.labelKey!;\n        return {\n          key,\n          share: shareByKey.get(key)!,\n          center: cellRect.left - bar.left + cellRect.width / 2,\n          width: cell.firstElementChild!.getBoundingClientRect().width,\n        };\n      });\n      // No layout yet (first paint, a hidden tab, or an environment that does no layout): nothing is measurable, so nothing is dropped.\n      const measurable = bar.width > 0 && boxes.every((b) => b.width > 0);\n      const next = measurable ? labelsToDrop(boxes, bar.width) : new Set<string>();\n      setDropped((prev) => (prev.size === next.size && [...next].every((k) => prev.has(k)) ? prev : next));\n    };\n    measure();\n    const ro = new ResizeObserver(measure);\n    ro.observe(el);\n    el.querySelectorAll(\"[data-label-key]\").forEach((c) => ro.observe(c.firstElementChild!));\n    return () => ro.disconnect();\n    // `drawn` is covered by `drawnKey`: equal keys and values give equal rows.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [direct, drawnKey, locale]);\n\n  return (\n    <div ref={ref} role=\"group\" aria-label={label} className={cn(\"flex w-full min-w-0 flex-col gap-2\", className)}>\n      {/* The 2px gap IS the surface showing through: the container paints nothing. */}\n      <div data-share-bar className=\"flex w-full gap-[2px]\">\n        {drawn.map((r, i) => (\n          <ChartTip\n            key={r.key}\n            content={<TipBody label={r.label} lines={[formatValue(r.value), share(r.share)]} />}\n          >\n            <div\n              role=\"img\"\n              tabIndex={0}\n              aria-label={strings.shareBar.segment(r.label, formatValue(r.value), share(r.share))}\n              data-segment={r.other ? undefined : r.id}\n              data-other={r.other || undefined}\n              data-share={r.share}\n              /* Proportional by flex-grow over a zero basis, so the 2px gaps come out of the\n                 free space and the lengths stay exactly value/total. `min-w-1` keeps a tiny\n                 segment visible and focusable instead of a sub-pixel sliver. */\n              style={{ flex: `${r.value} 1 0%` }}\n              /* The hit target is 24px tall; the mark inside it is 12px. */\n              className=\"flex h-6 min-w-1 items-center\"\n            >\n              <span\n                data-mark\n                style={{ backgroundColor: r.color }}\n                className={cn(\n                  \"block h-3 w-full\",\n                  i === 0 && \"rounded-s-[4px]\",\n                  i === drawn.length - 1 && \"rounded-e-[4px]\",\n                )}\n              />\n            </div>\n          </ChartTip>\n        ))}\n        {drawn.length === 0 && <div className=\"h-6 w-full\" aria-hidden />}\n      </div>\n\n      {direct && (\n        <div ref={labelsRef} aria-hidden className=\"flex w-full gap-[2px]\" data-direct-labels>\n          {drawn.map((r) => (\n            /* The label is centred under its segment and never truncated: a clipped \"3%\" reads \"3\",\n               which is a wrong number. A tiny segment's label overflows its box on both sides; the fit\n               rule drops it (into the legend) when that would carry it past the bar's ends. */\n            <span\n              key={r.key}\n              data-label-key={r.key}\n              style={{ flex: `${r.value} 1 0%` }}\n              className=\"flex min-w-1 justify-center\"\n            >\n              {/* Hidden, not removed, when it does not fit: it keeps its width so a resize can bring it back. */}\n              <span\n                data-label-dropped={dropped.has(r.key) || undefined}\n                className={cn(\n                  \"shrink-0 whitespace-nowrap text-2xs font-medium tabular-nums text-secondary\",\n                  dropped.has(r.key) && \"invisible\",\n                )}\n              >\n                {share(r.share)}\n              </span>\n            </span>\n          ))}\n        </div>\n      )}\n\n      {legend && (\n        <ul aria-hidden role=\"list\" data-legend className=\"flex flex-wrap gap-x-4 gap-y-1\">\n          {rows.map((r) => (\n            <li key={r.key} className=\"flex min-w-0 items-center gap-1.5 text-xs text-secondary\">\n              <span aria-hidden data-swatch style={{ backgroundColor: r.color }} className=\"size-2.5 shrink-0 rounded-[2px]\" />\n              <span className=\"truncate\">{r.label}</span>\n              {direct && dropped.has(r.key) && (\n                <span data-legend-share className=\"shrink-0 font-medium tabular-nums\">\n                  {share(r.share)}\n                </span>\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n\n      <ChartTable\n        caption={label}\n        columns={[strings.shareBar.columnSegment, strings.shareBar.columnValue, strings.shareBar.columnShare]}\n        rows={rows.map((r) => ({\n          key: r.key,\n          header: r.label,\n          cells: [formatValue(r.value), share(r.share)],\n        }))}\n      />\n    </div>\n  );\n}\n"],"names":["DIRECT_LABEL_MAX","toRows","segments","otherLabel","total","sum","s","rows","CHART_SERIES_COUNT","i","rowKey","chartSeriesColor","rest","value","OTHER_KEY","ShareBar","label","formatCaller","showLegend","className","ref","locale","useUiLocale","strings","useUiStrings","formatValue","defaultFormatValue","share","fraction","formatShare","assertChartData","drawn","r","legend","direct","labelsRef","useRef","dropped","setDropped","useState","drawnKey","useLayoutEffect","el","prev","shareByKey","measure","bar","boxes","cell","cellRect","key","next","b","labelsToDrop","k","ro","c","jsxs","cn","jsx","ChartTip","TipBody","ChartTable"],"mappings":"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"}

package/dist/components/chart/TimeSeriesChart.js

@@ -0,0 +1,305 @@
+import { jsx as o, jsxs as g, Fragment as je } from "react/jsx-runtime";
+import { useId as Ke, useRef as Ue, useState as G } from "react";
+import { cn as A } from "../../lib/cn.js";
+import { CHART_SERIES_COUNT as Ve, chartSeriesColor as De } from "../../lib/chart-palette.js";
+import { useHiddenSeries as Xe, useElementWidth as Ge, ChartEmpty as Oe, plotLayout as Ze, ValueGrid as Qe, XTickLabel as qe, ChartTip as Ye, LegendList as Je, LegendSwatch as et, LegendItem as tt, LegendToggle as me, ChartTable as rt, defaultFormatValue as ot, OTHER_KEY as nt, TipBody as at, LEGEND_FRAME as st } from "./shared.js";
+import { LABEL_CHAR_PX as lt, LABEL_PAD_PX as it } from "./label-metrics.js";
+import { bucketIndexAt as fe, niceTicks as ct, timeFormatters as ht } from "./time-series-scale.js";
+import { useUiLocale as dt, useUiStrings as ut } from "../../lib/i18n/provider.js";
+const mt = 24, K = 2, ge = 4, $ = { top: 8, right: 8, bottom: 36 }, F = 6;
+function bt(l) {
+  const { buckets: a, bucketMs: i, series: u, blocks: c = [], blockKinds: h = [] } = l;
+  if (a.length > 0 && (i === null || !Number.isFinite(i) || i <= 0))
+    throw new Error(`TimeSeriesChart: bucketMs must be a positive number when there are buckets; got ${i}.`);
+  a.forEach((n, m) => {
+    if (!Number.isFinite(n)) throw new Error(`TimeSeriesChart: bucket ${m} is ${n}; buckets are finite epoch ms.`);
+    if (m > 0 && n <= a[m - 1]) throw new Error(`TimeSeriesChart: buckets must be strictly ascending (bucket ${m}).`);
+  });
+  const k = /* @__PURE__ */ new Set();
+  for (const n of u) {
+    if (k.has(n.key)) throw new Error(`TimeSeriesChart: duplicate series key "${n.key}".`);
+    if (k.add(n.key), n.points.length !== a.length)
+      throw new Error(`TimeSeriesChart: "${n.key}" has ${n.points.length} points for ${a.length} buckets.`);
+    for (const m of n.points)
+      if (!Number.isFinite(m) || m < 0) throw new Error(`TimeSeriesChart: "${n.key}" has value ${m}; values must be finite and >= 0.`);
+  }
+  if (h.length > 2) throw new Error(`TimeSeriesChart: at most 2 block kinds (45 and 135 degree hatching); got ${h.length}.`);
+  const M = new Set(h.map((n) => n.key)), N = /* @__PURE__ */ new Set();
+  for (const n of c) {
+    if (N.has(n.id)) throw new Error(`TimeSeriesChart: duplicate block id "${n.id}".`);
+    if (N.add(n.id), !Number.isFinite(n.value) || n.value < 0) throw new Error(`TimeSeriesChart: block "${n.id}" has value ${n.value}; values must be finite and >= 0.`);
+    if (!M.has(n.kind)) throw new Error(`TimeSeriesChart: block "${n.id}" has kind "${n.kind}", which is not in blockKinds.`);
+    if (i === null || fe(a, i, n.at) < 0)
+      throw new Error(`TimeSeriesChart: block "${n.id}" at ${n.at} falls inside no bucket.`);
+  }
+}
+function pt(l, a, i) {
+  const u = [], c = [];
+  for (const h of l)
+    h.role === "other" || u.length >= Ve ? c.push(h) : u.push({ key: h.key, label: h.label, color: De(u.length), other: !1, points: [...h.points] });
+  if (c.length > 0) {
+    const h = c.filter((k) => k.role === "other");
+    u.push({
+      key: nt,
+      label: h.length === c.length && h.length === 1 ? h[0].label : i,
+      color: "var(--text-tertiary)",
+      other: !0,
+      points: Array.from({ length: a }, (k, M) => c.reduce((N, n) => N + n.points[M], 0))
+    });
+  }
+  return u;
+}
+function be(l, a, i, u) {
+  const c = Math.min(ge, i / 2, u);
+  return `M${l},${a + u}V${a + c}Q${l},${a} ${l + c},${a}H${l + i - c}Q${l + i},${a} ${l + i},${a + c}V${a + u}Z`;
+}
+function pe(l, a) {
+  return `url(#${a}-hatch-${l})`;
+}
+function ke(l) {
+  return `repeating-linear-gradient(${l === 0 ? 45 : 135}deg, var(--text-tertiary) 0 1.5px, var(--surface-inset) 1.5px 4px)`;
+}
+function St(l) {
+  bt(l);
+  const {
+    buckets: a,
+    bucketMs: i,
+    series: u,
+    blocks: c = [],
+    blockKinds: h = [],
+    label: k,
+    variant: M = "bar",
+    formatValue: N,
+    timeZone: n,
+    onSelectSeries: m,
+    height: R = 240,
+    emptyLabel: ye,
+    zeroLabel: ve,
+    className: O,
+    ref: Z
+  } = l, Q = dt(), q = ut().chart, b = q.timeSeriesChart, we = ye ?? b.empty, xe = ve ?? b.zero, y = N ?? ((t) => ot(t, Q)), $e = l.formatAxis ?? y, U = Ke().replace(/:/g, ""), Y = Ue(null), [J, Ce] = Xe(), [Se, ee] = G(null), [Ne, te] = G(null), [Te, re] = G(0), Me = Ge(Y), f = a.length, v = pt(u, f, q.other), H = new Map(h.map((t, e) => [t.key, e])), _ = Array.from({ length: f }, () => []);
+  for (const t of c) _[fe(a, i, t.at)].push(t);
+  if (f === 0 || v.length === 0 && c.length === 0)
+    return /* @__PURE__ */ o(Oe, { ref: Z, label: k, text: we, height: R, className: O });
+  const V = v.filter((t) => !J.has(t.key)), W = (t) => [
+    ...V.filter((e) => e.points[t] > 0).map((e) => ({ id: e.key, label: e.label, color: e.color, value: e.points[t], block: null, member: e })),
+    ..._[t].filter((e) => e.value > 0).map((e) => ({ id: `block:${e.id}`, label: e.label, color: "", value: e.value, block: e, member: null }))
+  ], z = a.map((t, e) => W(e).reduce((r, s) => r + s.value, 0)), oe = Math.max(0, ...z), ne = oe === 0, ae = ct(oe), se = ne ? [0] : ae.ticks, Ee = ae.max, B = ht(i, Q, n), le = se.map($e), { left: I, W: D, plotW: ie, plotH: E } = Ze(Me, R, $, le), w = ie / f, X = Math.max(1, Math.min(mt, w - K)), C = (t) => I + w * (t + 0.5), T = (t) => $.top + E * (1 - t / Ee), ce = T(0), P = M === "area" && f > 1, he = a.map((t, e) => B.tick(t, e === 0 ? null : a[e - 1])), Le = Math.max(...he.map((t) => Math.max(t.primary.length, (t.secondary ?? "").length))), Ae = Math.max(1, Math.ceil((Le * lt + it) / w)), de = Se ?? Ne, Fe = (t, e) => {
+    const r = t.key === "ArrowRight" ? e + 1 : t.key === "ArrowLeft" ? e - 1 : t.key === "Home" ? 0 : t.key === "End" ? f - 1 : null;
+    if (r === null) return;
+    t.preventDefault();
+    const s = Math.min(f - 1, Math.max(0, r));
+    re(s), t.currentTarget.parentElement?.querySelector(`[data-bucket-index="${s}"]`)?.focus();
+  }, L = m === void 0 ? void 0 : (t) => t.other ? void 0 : () => m(t.key), Re = (t) => {
+    const e = W(t);
+    return /* @__PURE__ */ o(
+      at,
+      {
+        label: B.full(a[t]),
+        lines: [
+          ...[...e].reverse().map((r) => /* @__PURE__ */ g("span", { className: "flex items-center gap-1.5", children: [
+            r.block ? /* @__PURE__ */ o("span", { "aria-hidden": !0, style: { background: ke(H.get(r.block.kind)) }, className: "size-2.5 shrink-0 rounded-[2px]" }) : /* @__PURE__ */ o("span", { "aria-hidden": !0, style: { backgroundColor: r.color }, className: "size-2.5 shrink-0 rounded-[2px]" }),
+            /* @__PURE__ */ o("span", { className: "font-medium text-primary", children: y(r.value) }),
+            /* @__PURE__ */ o("span", { children: r.label })
+          ] }, r.id)),
+          /* @__PURE__ */ o("span", { className: "font-medium text-primary", children: b.total(y(z[t])) }, "total")
+        ]
+      }
+    );
+  }, He = (t) => {
+    const e = W(t).map((r) => b.bucketPart(r.label, y(r.value)));
+    return b.bucket(B.full(a[t]), e, y(z[t]));
+  }, ue = (t) => {
+    const e = W(t);
+    let r = 0;
+    return e.map((s, p) => {
+      const x = T(r + s.value), d = T(r) - (p > 0 ? K : 0);
+      return r += s.value, { piece: s, top: x, height: Math.max(d - x, 1), last: p === e.length - 1 };
+    });
+  }, _e = (t) => ue(t).map(({ piece: e, top: r, height: s, last: p }) => {
+    const x = C(t) - X / 2, d = e.member && L ? L(e.member) : void 0, S = {
+      fill: e.block ? pe(H.get(e.block.kind), U) : e.color,
+      "data-segment": e.member && !e.member.other ? e.member.key : void 0,
+      "data-other": e.member?.other || void 0,
+      "data-block": e.block?.id,
+      onClick: d,
+      className: A(d && "cursor-pointer hover:opacity-80")
+    };
+    return p ? /* @__PURE__ */ o("path", { d: be(x, r, X, s), ...S }, e.id) : /* @__PURE__ */ o("rect", { x, y: r, width: X, height: s, ...S }, e.id);
+  }), We = (() => {
+    if (!P) return null;
+    const t = new Array(f).fill(0);
+    return V.map((e) => {
+      const r = [...t];
+      for (let d = 0; d < f; d++) t[d] += e.points[d];
+      if (e.points.every((d) => d === 0)) return null;
+      const p = [...t].map((d, S) => `${S === 0 ? "M" : "L"}${C(S)},${T(d)}`).join("") + [...r].reverse().map((d, S) => `L${C(f - 1 - S)},${T(d)}`).join("") + "Z", x = L?.(e);
+      return /* @__PURE__ */ o(
+        "path",
+        {
+          d: p,
+          fill: e.color,
+          "data-segment": e.other ? void 0 : e.key,
+          "data-other": e.other || void 0,
+          style: { stroke: "var(--surface)", strokeWidth: K, strokeLinejoin: "round" },
+          onClick: x,
+          className: A(x && "cursor-pointer hover:opacity-80")
+        },
+        e.key
+      );
+    });
+  })(), ze = (t) => ue(t).map(({ piece: e, top: r, height: s }) => {
+    if (!e.block) return null;
+    const p = Math.max(1, w - K);
+    return /* @__PURE__ */ o(
+      "path",
+      {
+        d: be(C(t) - p / 2, r, p, s),
+        fill: pe(H.get(e.block.kind), U),
+        "data-block": e.block.id
+      },
+      e.id
+    );
+  }), j = h.filter((t) => c.some((e) => e.kind === t.key)), Be = v.length + j.length >= 2, Ie = [...v.map((t) => t.label), ...j.map((t) => t.label), b.columnTotal], Pe = (t) => v.reduce((e, r) => e + r.points[t], 0) + _[t].reduce((e, r) => e + r.value, 0);
+  return (
+    /* The hidden table is absolutely positioned and as wide as its widest row; clipping at this box
+       keeps it out of the page's scroll width. */
+    /* @__PURE__ */ g("div", { ref: Z, role: "group", "aria-label": k, className: A("relative flex w-full min-w-0 flex-col gap-3 overflow-clip", O), children: [
+      /* @__PURE__ */ o("div", { ref: Y, className: "w-full min-w-0", children: /* @__PURE__ */ g(
+        "svg",
+        {
+          width: D,
+          height: R,
+          viewBox: `0 0 ${D} ${R}`,
+          role: "group",
+          "aria-label": b.plot(k),
+          "data-time-series": !0,
+          "data-variant": P ? "area" : "bar",
+          className: "block max-w-full overflow-visible",
+          children: [
+            /* @__PURE__ */ o("defs", { children: [0, 1].map((t) => /* @__PURE__ */ g(
+              "pattern",
+              {
+                id: `${U}-hatch-${t}`,
+                patternUnits: "userSpaceOnUse",
+                width: F,
+                height: F,
+                patternTransform: `rotate(${t === 0 ? 45 : -45})`,
+                children: [
+                  /* @__PURE__ */ o("rect", { width: F, height: F, fill: "var(--surface-inset)" }),
+                  /* @__PURE__ */ o("line", { x1: "0", y1: "0", x2: "0", y2: F, stroke: "var(--text-tertiary)", strokeWidth: "1.5" })
+                ]
+              },
+              t
+            )) }),
+            /* @__PURE__ */ g("g", { "aria-hidden": !0, children: [
+              /* @__PURE__ */ o(Qe, { ticks: se, labels: le, left: I, right: D - $.right, y: T }),
+              he.map(
+                (t, e) => e % Ae === 0 ? /* @__PURE__ */ o(qe, { at: a[e], x: C(e), y: ce + 14, primary: t.primary, secondary: t.secondary }, a[e]) : null
+              )
+            ] }),
+            We,
+            a.map((t, e) => {
+              const r = I + w * e;
+              return /* @__PURE__ */ o(Ye, { content: Re(e), children: /* @__PURE__ */ g(
+                "g",
+                {
+                  role: "img",
+                  tabIndex: e === Te ? 0 : -1,
+                  "aria-label": He(e),
+                  "data-bucket": t,
+                  "data-bucket-index": e,
+                  "data-total": z[e],
+                  onPointerEnter: () => ee(e),
+                  onPointerLeave: () => ee(null),
+                  onFocusCapture: () => {
+                    te(e), re(e);
+                  },
+                  onBlurCapture: () => te(null),
+                  onKeyDown: (s) => Fe(s, e),
+                  className: "outline-none [&:focus-visible>[data-focus-ring]]:stroke-border-interactive",
+                  children: [
+                    /* @__PURE__ */ o("rect", { x: r, y: $.top, width: w, height: E, fill: "transparent" }),
+                    de === e && /* @__PURE__ */ o("rect", { "data-active": !0, x: r, y: $.top, width: w, height: E, className: "fill-surface-hover" }),
+                    P ? ze(e) : _e(e),
+                    P && de === e && /* @__PURE__ */ o("line", { x1: C(e), x2: C(e), y1: $.top, y2: ce, strokeWidth: 1, className: "stroke-border-strong" }),
+                    /* @__PURE__ */ o(
+                      "rect",
+                      {
+                        "data-focus-ring": !0,
+                        x: r + 1,
+                        y: $.top,
+                        width: Math.max(w - 2, 1),
+                        height: E,
+                        fill: "none",
+                        strokeWidth: 2,
+                        rx: ge,
+                        stroke: "transparent"
+                      }
+                    )
+                  ]
+                }
+              ) }, t);
+            }),
+            ne && /* @__PURE__ */ o(
+              "text",
+              {
+                "data-zero": !0,
+                x: I + ie / 2,
+                y: $.top + E / 2,
+                textAnchor: "middle",
+                dy: "0.32em",
+                className: "fill-tertiary text-sm",
+                children: V.length === 0 && v.length > 0 ? b.allHidden : xe
+              }
+            )
+          ]
+        }
+      ) }),
+      Be && /* @__PURE__ */ g(Je, { label: b.legend, children: [
+        v.map((t) => {
+          const e = J.has(t.key), r = /* @__PURE__ */ o(et, { color: t.color, off: e }), s = () => Ce(t.key);
+          return /* @__PURE__ */ o(tt, { id: t.key, other: t.other, children: L?.(t) ? /* @__PURE__ */ g(je, { children: [
+            /* @__PURE__ */ o(me, { name: b.showSeries(t.label), off: e, onToggle: s, className: "justify-center", children: r }),
+            /* @__PURE__ */ o("button", { type: "button", onClick: L(t), "data-legend-select": !0, className: A(st, e && "line-through"), children: /* @__PURE__ */ o("span", { className: "truncate", children: t.label }) })
+          ] }) : /* @__PURE__ */ g(me, { name: b.showSeries(t.label), off: e, onToggle: s, className: A(e && "line-through"), children: [
+            r,
+            /* @__PURE__ */ o("span", { className: "truncate", children: t.label })
+          ] }) }, t.key);
+        }),
+        j.map((t) => /* @__PURE__ */ g("li", { "data-legend-block": t.key, className: "flex min-h-6 min-w-0 items-center gap-1.5 px-1 text-xs text-secondary", children: [
+          /* @__PURE__ */ o(
+            "span",
+            {
+              "aria-hidden": !0,
+              "data-swatch": !0,
+              style: { background: ke(H.get(t.key)) },
+              className: "size-2.5 shrink-0 rounded-[2px]"
+            }
+          ),
+          /* @__PURE__ */ o("span", { className: "truncate", children: t.label })
+        ] }, t.key))
+      ] }),
+      /* @__PURE__ */ o("div", { className: "sr-only", children: /* @__PURE__ */ o(
+        rt,
+        {
+          caption: k,
+          columns: Ie,
+          rows: a.map((t, e) => ({
+            key: String(t),
+            header: B.full(t),
+            cells: [
+              ...v.map((r) => y(r.points[e])),
+              ...j.map((r) => y(_[e].filter((s) => s.kind === r.key).reduce((s, p) => s + p.value, 0))),
+              y(Pe(e))
+            ]
+          }))
+        }
+      ) })
+    ] })
+  );
+}
+export {
+  St as TimeSeriesChart
+};
+//# sourceMappingURL=TimeSeriesChart.js.map