@joewinke/jatui 0.37.0 → 0.38.0

package/dist/artifact-blocks/blocks/chart/ChartBlock.svelte

@@ -0,0 +1,875 @@
+<script lang="ts">
+  /**
+   * ChartBlock — SVG line / bar / area / scatter renderer (block type "chart").
+   *
+   * Hand-rolled SVG, no chart dependency: scales, ticks and stacking live in
+   * ./schema.ts (pure, unit-tested); this file is the render layer.
+   *
+   * Dataviz discipline (the ruby-kim-soak rules):
+   *   - recessive grid (base-content/10, horizontal only),
+   *   - honest axes (value axis always includes 0 for bar/area — an explicit
+   *     yMin/yMax can extend the domain but never truncate it),
+   *   - identity never by color alone (series name in the legend chips, in the
+   *     direct end-labels, in the tooltip, and in the data-table fallback).
+   *
+   * Colors are tokens only: series strokes come from the `--chart-series-1..6`
+   * contract (src/lib/theme-bridge/layerchart.css, mapped to DaisyUI palette
+   * tokens) — this wrapper carries the `lc-root-container` class so those vars
+   * resolve, with `var(--color-primary)` as the fallback.
+   */
+  import type { BlockProps } from "../../types.js"
+  import {
+    chartSchema,
+    normalizeChart,
+    linearTicks,
+    valueDomain,
+    timeTicks,
+    timeTickFormat,
+    formatYValue,
+    formatYTick,
+    nearestIndex,
+    stackByX,
+    layoutEndLabels,
+    dataTableRows,
+    formatTableValue,
+    valueMap,
+    parseTimeX,
+    END_LABEL_SERIES_LIMIT,
+    type ChartParams,
+  } from "./schema.js"
+  import SectionTools from "../../SectionTools.svelte"
+
+  let { params: rawParams, ctx }: BlockProps<ChartParams> = $props()
+
+  /** Params are parsed here, not assumed pre-parsed: the host validates at
+   * publish but stores what was sent, so defaults (xType, axis, goalLines…)
+   * must be applied at render. Corrupt params fall back to an empty render —
+   * a bad agent payload must never throw inside the artifact page. */
+  const EMPTY_PARAMS: ChartParams = {
+    chartType: "line",
+    xType: "category",
+    series: [],
+    stacked: false,
+    goalLines: [],
+    annotations: [],
+    yFormat: "raw",
+    currency: "USD",
+    showLegend: true,
+    endLabels: true,
+    height: 280,
+  }
+  const parsed = $derived(chartSchema.safeParse(rawParams))
+  const params = $derived(parsed.success ? parsed.data : EMPTY_PARAMS)
+
+  // ── Responsive width (SSR/tests: 640 fallback) ──────────────────────────
+  let containerEl = $state<HTMLDivElement | undefined>(undefined)
+  let measured = $state(0)
+  $effect(() => {
+    if (!containerEl) return
+    const update = () => {
+      measured = containerEl?.offsetWidth ?? 0
+    }
+    update()
+    if (typeof ResizeObserver === "undefined") return
+    const ro = new ResizeObserver(update)
+    ro.observe(containerEl)
+    return () => ro.disconnect()
+  })
+  const W = $derived(measured > 160 ? measured : 640)
+  const H = $derived(params.height)
+
+  // ── Normalized data ──────────────────────────────────────────────────────
+  const norm = $derived(normalizeChart(params))
+
+  const endLabelsOn = $derived(
+    params.endLabels &&
+      (params.chartType === "line" || params.chartType === "area") &&
+      norm.series.length <= END_LABEL_SERIES_LIMIT &&
+      norm.xNums.length > 0,
+  )
+
+  const seriesColor = (i: number) =>
+    `var(--chart-series-${(i % 6) + 1}, var(--color-primary))`
+  const seriesAreaFill = (i: number) =>
+    `color-mix(in oklch, ${seriesColor(i)} 22%, transparent)`
+  const seriesAreaFillStacked = (i: number) =>
+    `color-mix(in oklch, ${seriesColor(i)} 45%, transparent)`
+
+  // ── Geometry ─────────────────────────────────────────────────────────────
+  const padLeft = $derived(params.yFormat === "currency" ? 58 : 46)
+  const padRight = $derived((endLabelsOn ? 88 : 12) + (norm.dual ? 48 : 0))
+  const padTop = 14
+  const padBottom = 28
+  const plotW = $derived(Math.max(40, W - padLeft - padRight))
+  const plotH = $derived(Math.max(40, H - padTop - padBottom))
+  const plotBottom = $derived(padTop + plotH)
+
+  // X: category = one slot per value (bars and lines share slot geometry);
+  // time and number = padded linear scale (bars still slot per distinct x).
+  const usesSlots = $derived(
+    params.chartType === "bar" || norm.xType === "category",
+  )
+  const slotW = $derived(plotW / Math.max(1, norm.xNums.length))
+  const catPos = $derived(new Map(norm.xNums.map((x, i) => [x, i] as const)))
+  const xLinear = $derived.by(() => {
+    const xs = norm.xNums
+    if (usesSlots || xs.length === 0) return null
+    const min = xs[0]
+    const max = xs[xs.length - 1]
+    if (min === max) {
+      const pad = norm.xType === "time" ? 86.4e6 : 1
+      return { d0: min - pad, d1: max + pad }
+    }
+    const pad = (max - min) * 0.02
+    return { d0: min - pad, d1: max + pad }
+  })
+  const xPx = (xNum: number): number => {
+    if (usesSlots) {
+      const i = catPos.get(xNum) ?? 0
+      return padLeft + (i + 0.5) * slotW
+    }
+    const lin = xLinear
+    if (!lin) return padLeft + plotW / 2
+    return padLeft + ((xNum - lin.d0) / (lin.d1 - lin.d0)) * plotW
+  }
+  const slotLeft = (i: number) => padLeft + i * slotW
+  const slotCenterOf = (i: number) => padLeft + (i + 0.5) * slotW
+
+  // ── Stacking (per value-axis group) ─────────────────────────────────────
+  type Seg = { xNum: number; y0: number; y1: number }
+  const stackedSegs = $derived.by(() => {
+    if (!params.stacked) return null
+    const segs: (Seg[] | undefined)[] = new Array(norm.series.length)
+    for (const axis of ["left", "right"] as const) {
+      const idxs = norm.series
+        .map((s, i) => (s.axis === axis ? i : -1))
+        .filter((i) => i >= 0)
+      const stacked = stackByX(idxs.map((i) => norm.series[i].points))
+      idxs.forEach((si, k) => (segs[si] = stacked[k]))
+    }
+    return segs
+  })
+  /** Per-series x → segment map (bar marks hit this per slot). */
+  const stackedSegMaps = $derived.by(() => {
+    if (!params.stacked || !stackedSegs) return null
+    return stackedSegs.map(
+      (segs) => new Map((segs ?? []).map((s) => [s.xNum, s] as const)),
+    )
+  })
+  /** Per-series x → y map (the render loop hits this per slot — a `.find()`
+   * per cell would be quadratic on 5000-point charts). */
+  const pointMaps = $derived(norm.series.map((s) => valueMap(s.points)))
+  function valueAt(si: number, xNum: number): number | null {
+    return pointMaps[si]?.get(xNum) ?? null
+  }
+
+  // ── Value scales ─────────────────────────────────────────────────────────
+  function axisVals(axis: "left" | "right"): number[] {
+    const vals: number[] = []
+    if (params.stacked && stackedSegs) {
+      norm.series.forEach((s, i) => {
+        if (s.axis !== axis) return
+        for (const seg of stackedSegs[i] ?? []) vals.push(seg.y0, seg.y1)
+      })
+    } else {
+      for (const s of norm.series) {
+        if (s.axis !== axis) continue
+        for (const p of s.points) vals.push(p.y)
+      }
+    }
+    for (const g of params.goalLines) if (g.axis === axis) vals.push(g.value)
+    if (axis === "left")
+      for (const a of params.annotations) if (a.y !== undefined) vals.push(a.y)
+    return vals
+  }
+  const leftScale = $derived(
+    linearTicks(
+      ...valueDomain(axisVals("left"), params.chartType, {
+        yMin: params.yMin,
+        yMax: params.yMax,
+      }),
+      5,
+    ),
+  )
+  const rightScale = $derived(
+    norm.dual
+      ? linearTicks(...valueDomain(axisVals("right"), params.chartType, {}), 4)
+      : null,
+  )
+  const yPxLeft = (v: number) =>
+    padTop +
+    plotH -
+    ((v - leftScale.domain[0]) /
+      (leftScale.domain[1] - leftScale.domain[0] || 1)) *
+      plotH
+  const yPxRight = (v: number) => {
+    const s = rightScale
+    if (!s) return yPxLeft(v)
+    return (
+      padTop +
+      plotH -
+      ((v - s.domain[0]) / (s.domain[1] - s.domain[0] || 1)) * plotH
+    )
+  }
+  const yPxFor = (axis: "left" | "right") =>
+    axis === "right" ? yPxRight : yPxLeft
+  /** Bars rise from zero (or below zero when negatives exist). */
+  function zeroYFor(axis: "left" | "right"): number {
+    if (axis === "right") {
+      const s = rightScale
+      if (!s) return yPxLeft(0)
+      return yPxRight(Math.max(s.domain[0], Math.min(0, s.domain[1])))
+    }
+    return yPxLeft(
+      Math.max(leftScale.domain[0], Math.min(0, leftScale.domain[1])),
+    )
+  }
+  const baselineY = $derived(zeroYFor("left"))
+
+  // ── Paths ────────────────────────────────────────────────────────────────
+  const r1 = (n: number) => Math.round(n * 10) / 10
+  function linePathOf(si: number): string {
+    const s = norm.series[si]
+    const yPx = yPxFor(s.axis)
+    const segs = params.stacked ? stackedSegs?.[si] : undefined
+    if (segs)
+      return segs
+        .map(
+          (seg, k) =>
+            `${k ? "L" : "M"} ${r1(xPx(seg.xNum))} ${r1(yPx(seg.y1))}`,
+        )
+        .join(" ")
+    return s.points
+      .map((p, k) => `${k ? "L" : "M"} ${r1(xPx(p.xNum))} ${r1(yPx(p.y))}`)
+      .join(" ")
+  }
+  function areaPathOf(si: number): string {
+    const s = norm.series[si]
+    const yPx = yPxFor(s.axis)
+    const segs = params.stacked ? stackedSegs?.[si] : undefined
+    if (segs) {
+      if (!segs.length) return ""
+      const down = [...segs]
+        .reverse()
+        .map((seg) => `L ${r1(xPx(seg.xNum))} ${r1(yPx(seg.y0))}`)
+        .join(" ")
+      return (
+        segs
+          .map(
+            (seg, k) =>
+              `${k ? "L" : "M"} ${r1(xPx(seg.xNum))} ${r1(yPx(seg.y1))}`,
+          )
+          .join(" ") +
+        " " +
+        down +
+        " Z"
+      )
+    }
+    const pts = s.points
+    if (!pts.length) return ""
+    const path = pts
+      .map((p, k) => `${k ? "L" : "M"} ${r1(xPx(p.xNum))} ${r1(yPx(p.y))}`)
+      .join(" ")
+    const first = pts[0]
+    const last = pts[pts.length - 1]
+    return `${path} L ${r1(xPx(last.xNum))} ${r1(baselineY)} L ${r1(xPx(first.xNum))} ${r1(baselineY)} Z`
+  }
+
+  // ── Bars ─────────────────────────────────────────────────────────────────
+  const barW = $derived(
+    Math.max(1, Math.min((slotW * 0.78) / Math.max(1, norm.series.length), 36)),
+  )
+  const stackedBarW = $derived(Math.max(1, Math.min(slotW * 0.78, 36)))
+
+  // ── Annotations ──────────────────────────────────────────────────────────
+  function resolveAnnX(raw: string | number): number | null {
+    if (norm.xType === "category") {
+      const i = norm.categories.indexOf(String(raw))
+      return i === -1 ? null : (norm.xNums[i] ?? null)
+    }
+    const n =
+      norm.xType === "time"
+        ? parseTimeX(raw)
+        : typeof raw === "number"
+          ? raw
+          : Number.parseFloat(raw)
+    return Number.isFinite(n) ? n : null
+  }
+  const renderedAnnotations = $derived.by(() => {
+    const out: {
+      kind: "point" | "range"
+      label: string
+      y?: number
+      px1: number
+      px2?: number
+    }[] = []
+    for (const a of params.annotations) {
+      const dx1 = resolveAnnX(a.x)
+      if (dx1 === null) continue
+      const px1 = xPx(dx1)
+      if (a.kind === "range") {
+        if (a.x2 === undefined) continue
+        const dx2 = resolveAnnX(a.x2)
+        if (dx2 === null) continue
+        const px2 = xPx(dx2)
+        if (
+          Math.max(px1, px2) < padLeft ||
+          Math.min(px1, px2) > padLeft + plotW
+        )
+          continue
+        out.push({ kind: "range", label: a.label, px1, px2 })
+      } else {
+        if (px1 < padLeft - 1 || px1 > padLeft + plotW + 1) continue
+        out.push({ kind: "point", label: a.label, y: a.y, px1 })
+      }
+    }
+    return out
+  })
+
+  // ── Ticks / labels ───────────────────────────────────────────────────────
+  const yTickFmt = $derived((v: number) =>
+    formatYTick(v, params.yFormat, params.currency),
+  )
+  const xTicks = $derived.by(() => {
+    if (usesSlots) return []
+    const lin = xLinear
+    if (!lin) return []
+    if (norm.xType === "time")
+      return timeTicks(lin.d0, lin.d1, Math.max(3, Math.floor(plotW / 90)))
+    return linearTicks(lin.d0, lin.d1, Math.max(3, Math.floor(plotW / 80)))
+      .ticks
+  })
+  const xTickFmt = $derived.by(() => {
+    if (norm.xType === "time") {
+      const lin = xLinear
+      const f = timeTickFormat(lin?.d0 ?? 0, lin?.d1 ?? 0)
+      return (v: number) => f(v)
+    }
+    if (norm.xType === "number")
+      return (v: number) =>
+        new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(v)
+    return (v: number) => norm.categories[v] ?? String(v)
+  })
+  const xLabelBudget = $derived(Math.max(2, Math.floor(plotW / 58)))
+  const categoryLabelStep = $derived(
+    Math.max(1, Math.ceil(norm.xNums.length / xLabelBudget)),
+  )
+
+  function truncate(s: string, n: number): string {
+    return s.length > n ? `${s.slice(0, n - 1)}…` : s
+  }
+
+  // End labels: series name at the last visible point, pushed apart so
+  // neighbors stay readable.
+  const endLabels = $derived.by(() => {
+    if (!endLabelsOn) return []
+    const items = norm.series.map((s, i) => {
+      const yPx = yPxFor(s.axis)
+      const last = params.stacked
+        ? (stackedSegs?.[i] ?? []).at(-1)
+        : s.points.at(-1)
+      const lastX = params.stacked
+        ? (stackedSegs?.[i] ?? []).at(-1)?.xNum
+        : s.points.at(-1)?.xNum
+      return {
+        label: s.label,
+        y: last ? yPx(params.stacked ? last.y1 : last.y) : plotBottom,
+        x: lastX !== undefined ? xPx(lastX) : padLeft + plotW,
+        i,
+      }
+    })
+    const ys = layoutEndLabels(items, padTop + 4, plotBottom - 2)
+    return items.map((it, k) => ({ ...it, y: ys[k] }))
+  })
+
+  // ── Crosshair + tooltip ──────────────────────────────────────────────────
+  let svgEl = $state<SVGSVGElement | undefined>(undefined)
+  let hoverIdx = $state<number | null>(null)
+  let hoverPx = $state(0)
+
+  function invertX(px: number): number {
+    if (usesSlots) {
+      const i = Math.floor((px - padLeft) / slotW)
+      const idx = Math.min(Math.max(i, 0), norm.xNums.length - 1)
+      return norm.xNums[idx] ?? 0
+    }
+    const lin = xLinear
+    if (!lin) return norm.xNums[0] ?? 0
+    return lin.d0 + ((px - padLeft) / plotW) * (lin.d1 - lin.d0)
+  }
+  function onPointerMove(e: PointerEvent) {
+    const rect = svgEl?.getBoundingClientRect()
+    if (!rect || rect.width === 0 || !norm.xNums.length) {
+      hoverIdx = null
+      return
+    }
+    const px = e.clientX - rect.left
+    if (px < padLeft - 6 || px > padLeft + plotW + 6) {
+      hoverIdx = null
+      return
+    }
+    hoverPx = px
+    hoverIdx = nearestIndex(norm.xNums, invertX(px))
+  }
+  function onPointerLeave() {
+    hoverIdx = null
+  }
+  const hoverSnapX = $derived(
+    hoverIdx === null
+      ? 0
+      : usesSlots
+        ? slotCenterOf(hoverIdx)
+        : xLinear
+          ? padLeft +
+            ((norm.xNums[hoverIdx] - xLinear.d0) / (xLinear.d1 - xLinear.d0)) *
+              plotW
+          : padLeft,
+  )
+  const hoverXLabel = $derived.by(() => {
+    if (hoverIdx === null) return ""
+    const xNum = norm.xNums[hoverIdx]
+    if (norm.xType === "category") return norm.categories[xNum] ?? ""
+    if (norm.xType === "time") {
+      const step =
+        norm.xNums.length > 1 ? norm.xNums[1] - norm.xNums[0] : 86.4e6
+      return new Intl.DateTimeFormat("en-US", {
+        dateStyle: "medium",
+        ...(step < 86.4e6 ? { timeStyle: "short" as const } : {}),
+      }).format(xNum)
+    }
+    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(
+      xNum,
+    )
+  })
+  const hoverData = $derived.by(() => {
+    if (hoverIdx === null) return null
+    const xNum = norm.xNums[hoverIdx]
+    const rows = norm.series.map((s, si) => ({
+      si,
+      v: valueAt(si, xNum),
+      yPx: yPxFor(s.axis)(valueAt(si, xNum) ?? 0),
+    }))
+    return { xNum, rows: rows.filter((r) => r.v !== null) }
+  })
+
+  // ── A11y data fallback ───────────────────────────────────────────────────
+  let dataOpen = $state(false)
+  const tableId = $derived(`block-data-${ctx.blockId || "chart"}`)
+  const tableRows = $derived(dataTableRows(norm))
+</script>
+
+<figure class="lc-root-container w-full" data-block-type="chart">
+  {#if params.title || params.subtitle}
+    <div class="mb-1">
+      {#if params.title}
+        <div class="flex items-center gap-2">
+          <h4 class="min-w-0 text-sm font-semibold text-base-content">
+            {params.title}
+          </h4>
+          <SectionTools {ctx} inline />
+        </div>
+      {/if}
+      {#if params.subtitle}
+        <p class="text-xs text-base-content/60">{params.subtitle}</p>
+      {/if}
+    </div>
+  {/if}
+
+  {#if norm.series.length === 0 || norm.xNums.length === 0}
+    <p class="text-sm text-base-content/45">No data to chart.</p>
+  {:else}
+    <div class="relative w-full" bind:this={containerEl}>
+      <svg
+        bind:this={svgEl}
+        width={W}
+        height={H}
+        viewBox="0 0 {W} {H}"
+        class="block max-w-full"
+        role="img"
+        aria-label="{params.chartType} chart{params.title
+          ? `: ${params.title}`
+          : ''}. Series: {norm.series.map((s) => s.label).join(', ')}."
+        onpointermove={onPointerMove}
+        onpointerleave={onPointerLeave}
+      >
+        <!-- recessive horizontal grid (left scale only) -->
+        {#each leftScale.ticks as t (t)}
+          <line
+            x1={padLeft}
+            x2={padLeft + plotW}
+            y1={yPxLeft(t)}
+            y2={yPxLeft(t)}
+            class="stroke-base-content/10"
+            stroke-width="1"
+            shape-rendering="crispEdges"
+          />
+          <text
+            x={padLeft - 6}
+            y={yPxLeft(t) + 3}
+            text-anchor="end"
+            class="fill-base-content/45 text-2xs tabular-nums"
+          >
+            {yTickFmt(t)}
+          </text>
+        {/each}
+        {#if rightScale}
+          {#each rightScale.ticks as t (t)}
+            <text
+              x={padLeft + plotW + 6}
+              y={yPxRight(t) + 3}
+              text-anchor="start"
+              class="fill-base-content/45 text-2xs tabular-nums"
+            >
+              {yTickFmt(t)}
+            </text>
+          {/each}
+        {/if}
+
+        <!-- honest baseline (0 or domain floor) -->
+        <line
+          x1={padLeft}
+          x2={padLeft + plotW}
+          y1={baselineY}
+          y2={baselineY}
+          class="stroke-base-content/25"
+          stroke-width="1"
+          shape-rendering="crispEdges"
+        />
+
+        <!-- y axis titles -->
+        {#if params.yLabel}
+          <text
+            x={12}
+            y={padTop + plotH / 2}
+            text-anchor="middle"
+            transform="rotate(-90, 12, {padTop + plotH / 2})"
+            class="fill-base-content/60 text-2xs font-medium"
+          >
+            {params.yLabel}
+          </text>
+        {/if}
+        {#if norm.dual && params.y2Label}
+          <text
+            x={W - 12}
+            y={padTop + plotH / 2}
+            text-anchor="middle"
+            transform="rotate(90, {W - 12}, {padTop + plotH / 2})"
+            class="fill-base-content/60 text-2xs font-medium"
+          >
+            {params.y2Label}
+          </text>
+        {/if}
+
+        <!-- annotations (below marks) -->
+        {#each renderedAnnotations as a, ai (ai)}
+          {#if a.kind === "range"}
+            <rect
+              x={Math.min(a.px1, a.px2 ?? a.px1)}
+              y={padTop}
+              width={Math.max(1, Math.abs((a.px2 ?? a.px1) - a.px1))}
+              height={plotH}
+              class="fill-base-content/5"
+            />
+            <text
+              x={Math.min(a.px1, a.px2 ?? a.px1) + 4}
+              y={padTop + 10}
+              class="fill-base-content/60 text-2xs"
+            >
+              {truncate(a.label, 36)}
+            </text>
+          {:else}
+            <line
+              x1={a.px1}
+              x2={a.px1}
+              y1={padTop}
+              y2={padTop + plotH}
+              class="stroke-base-content/30"
+              stroke-dasharray="4 3"
+            />
+            {#if a.y !== undefined}
+              <circle
+                cx={a.px1}
+                cy={yPxLeft(a.y)}
+                r="3.5"
+                class="fill-base-content/40"
+              />
+            {/if}
+            <text
+              x={a.px1 + 4}
+              y={padTop + 10}
+              class="fill-base-content/60 text-2xs"
+            >
+              {truncate(a.label, 36)}
+            </text>
+          {/if}
+        {/each}
+
+        <!-- goal / threshold lines -->
+        {#each params.goalLines as g, gi (gi)}
+          {@const gy = yPxFor(g.axis)(g.value)}
+          {#if gy >= padTop && gy <= plotBottom}
+            <line
+              x1={padLeft}
+              x2={padLeft + plotW}
+              y1={gy}
+              y2={gy}
+              class="stroke-base-content/30"
+              stroke-dasharray="5 4"
+            />
+            {#if g.label}
+              <text
+                x={padLeft + 4}
+                y={gy - 4}
+                class="fill-base-content/60 text-2xs"
+              >
+                {g.label}
+              </text>
+            {/if}
+          {/if}
+        {/each}
+
+        <!-- marks -->
+        {#if params.chartType === "bar"}
+          {#each norm.xNums as xNum, xi (xNum)}
+            {#each norm.series as s, si (si)}
+              {@const seg = params.stacked
+                ? stackedSegMaps?.[si]?.get(xNum)
+                : undefined}
+              {#if params.stacked ? seg !== undefined : valueAt(si, xNum) !== null}
+                {@const yPx = yPxFor(s.axis)}
+                {@const topV = params.stacked
+                  ? (seg?.y1 ?? 0)
+                  : (valueAt(si, xNum) ?? 0)}
+                {@const botV = params.stacked ? (seg?.y0 ?? 0) : 0}
+                {@const x = params.stacked
+                  ? slotLeft(xi) + (slotW - stackedBarW) / 2
+                  : slotLeft(xi) +
+                    (slotW - barW * norm.series.length) / 2 +
+                    si * barW}
+                <rect
+                  {x}
+                  y={Math.min(yPx(topV), yPx(botV))}
+                  width={params.stacked ? stackedBarW : barW}
+                  height={Math.max(1, Math.abs(yPx(topV) - yPx(botV)))}
+                  fill={seriesColor(si)}
+                />
+              {/if}
+            {/each}
+          {/each}
+        {:else if params.chartType === "area"}
+          {#each norm.series as _, si (si)}
+            <path
+              d={areaPathOf(si)}
+              fill={params.stacked
+                ? seriesAreaFillStacked(si)
+                : seriesAreaFill(si)}
+              stroke={seriesColor(si)}
+              stroke-width="1.5"
+            />
+          {/each}
+        {:else if params.chartType === "line"}
+          {#each norm.series as _, si (si)}
+            <path
+              d={linePathOf(si)}
+              fill="none"
+              stroke={seriesColor(si)}
+              stroke-width="2"
+              stroke-linejoin="round"
+              stroke-linecap="round"
+            />
+          {/each}
+        {:else}
+          {#each norm.series as s, si (si)}
+            {#each s.points as p, pi (pi)}
+              <circle
+                cx={r1(xPx(p.xNum))}
+                cy={r1(yPxFor(s.axis)(p.y))}
+                r="3.5"
+                fill={seriesColor(si)}
+              />
+            {/each}
+          {/each}
+        {/if}
+
+        <!-- direct end-labels -->
+        {#each endLabels as el (el.i)}
+          <text
+            x={el.x + 7}
+            y={el.y + 3}
+            class="text-2xs font-medium"
+            fill={seriesColor(el.i)}
+          >
+            {truncate(el.label, 14)}
+          </text>
+        {/each}
+
+        <!-- x tick labels -->
+        {#if usesSlots}
+          {#each norm.xNums as xNum, xi (xNum)}
+            {#if xi % categoryLabelStep === 0}
+              <text
+                x={slotCenterOf(xi)}
+                y={plotBottom + 16}
+                text-anchor="middle"
+                class="fill-base-content/45 text-2xs"
+              >
+                {truncate(norm.categories[xNum] ?? String(xNum), 12)}
+              </text>
+            {/if}
+          {/each}
+        {:else}
+          {#each xTicks as t (t)}
+            <text
+              x={xPx(t)}
+              y={plotBottom + 16}
+              text-anchor="middle"
+              class="fill-base-content/45 text-2xs"
+            >
+              {truncate(xTickFmt(t), 20)}
+            </text>
+          {/each}
+        {/if}
+
+        <!-- crosshair -->
+        {#if hoverData}
+          {#if params.chartType === "bar"}
+            <rect
+              x={slotLeft(hoverIdx ?? 0)}
+              y={padTop}
+              width={slotW}
+              height={plotH}
+              class="fill-base-content/5"
+            />
+          {/if}
+          <line
+            x1={hoverSnapX}
+            x2={hoverSnapX}
+            y1={padTop}
+            y2={padTop + plotH}
+            class="stroke-base-content/25"
+            stroke-width="1"
+          />
+          {#each hoverData.rows as d (d.si)}
+            <circle
+              cx={r1(hoverSnapX)}
+              cy={r1(d.yPx)}
+              r="3.5"
+              fill={seriesColor(d.si)}
+              stroke="var(--color-base-100)"
+              stroke-width="1.5"
+            />
+          {/each}
+        {/if}
+      </svg>
+
+      <!-- tooltip -->
+      {#if hoverData}
+        <div
+          class="pointer-events-none absolute top-1 z-10 min-w-32 rounded-box border border-base-content/10 bg-base-100/95 px-2.5 py-1.5 text-xs"
+          style:left={hoverPx > padLeft + plotW * 0.62
+            ? "auto"
+            : `${hoverPx + 12}px`}
+          style:right={hoverPx > padLeft + plotW * 0.62
+            ? `${W - hoverPx + 10}px`
+            : "auto"}
+        >
+          <div class="mb-0.5 font-medium text-base-content/60">
+            {hoverXLabel}
+          </div>
+          {#each hoverData.rows as d (d.si)}
+            <div class="flex items-center gap-1.5 whitespace-nowrap">
+              <span
+                class="h-2 w-2 shrink-0 rounded-[2px]"
+                style:background={seriesColor(d.si)}
+                aria-hidden="true"
+              ></span>
+              <span class="text-base-content/70">{norm.series[d.si].label}</span
+              >
+              <span
+                class="ml-auto pl-2 font-medium tabular-nums text-base-content"
+              >
+                {formatYValue(d.v ?? 0, params.yFormat, params.currency)}
+              </span>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <!-- legend: swatch + TEXT label (identity never by color alone) -->
+  {#if params.showLegend && norm.series.length > 1}
+    <div class="mt-1.5 flex flex-wrap items-center gap-x-4 gap-y-1">
+      {#each norm.series as s, si (si)}
+        <span
+          class="inline-flex items-center gap-1.5 text-xs text-base-content/70"
+        >
+          <span
+            class="h-2.5 w-2.5 shrink-0 rounded-[3px]"
+            style:background={seriesColor(si)}
+            aria-hidden="true"
+          ></span>
+          {s.label}
+          {#if norm.dual && s.axis === "right"}
+            <span class="badge badge-ghost badge-xs font-normal"
+              >right axis</span
+            >
+          {/if}
+        </span>
+      {/each}
+    </div>
+  {/if}
+
+  <!-- accessible data fallback: sr-only table always; expandable for everyone -->
+  <div class="mt-1.5 flex items-center justify-between gap-2">
+    {#if params.xLabel}
+      <span class="text-2xs text-base-content/45">{params.xLabel}</span>
+    {:else}
+      <span></span>
+    {/if}
+    <button
+      type="button"
+      class="btn btn-ghost btn-xs text-base-content/70"
+      aria-expanded={dataOpen}
+      aria-controls={tableId}
+      onclick={() => (dataOpen = !dataOpen)}
+    >
+      {dataOpen ? "Hide data" : "View data"}
+    </button>
+  </div>
+  <div
+    class={dataOpen
+      ? "mt-1 max-h-64 overflow-auto rounded-box border border-base-content/10"
+      : "sr-only"}
+  >
+    <!-- sr-only sits on the wrapper: a <table> ignores width:1px and grows to
+         its content, so on the table itself it widened the page at 390px. -->
+    <table id={tableId} class={dataOpen ? "table table-sm" : undefined}>
+      <caption class="sr-only">
+        Chart data{params.title ? `: ${params.title}` : ""}
+      </caption>
+      <thead>
+        <tr>
+          <th scope="col" class="text-left">x</th>
+          {#each norm.series as s, si (si)}
+            <th scope="col" class="text-right">{s.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each tableRows as row (row.x)}
+          <tr>
+            <th scope="row" class="text-left font-normal">{row.xLabel}</th>
+            {#each row.values as v, vi (vi)}
+              <td class="text-right tabular-nums">
+                {v === null
+                  ? "n/a"
+                  : formatTableValue(v, params.yFormat, params.currency)}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</figure>