@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/canvas/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `@thomasfosterau/components/canvas` — a low-level toolkit for vector-editing
+ * surfaces: pan, zoom, a grid, and pointer gestures reported in canvas
+ * coordinates. The application defines its element types, its tools and its
+ * renderer.
+ *
+ * A separate entry point so it never sits on the always-loaded path of a
+ * consumer that does not use it.
+ *
+ * @module
+ */
+export { default as VectorCanvas } from './VectorCanvas.svelte';
+export { applyTransform, diffTransform, emptyHistory, HISTORY_LIMIT, invertTransform, recordEdit, redo, undo, type History, type HistoryStep, } from './history.ts';
+export type { CanvasElement, ElementId, GridConfig, HistoryEntry, Point, Rect, Transform, VectorDocument, Viewport, } from './types.ts';
+export { boundingBox, canvasToScreen, distance, generateId, panBy, pointInRect, pointNearLine, rotatePoint, screenToCanvas, snapToGrid, sortByZIndex, zoomAbout, } from './utils.ts';

package/dist/canvas/index.js

@@ -0,0 +1,14 @@
+/**
+ * `@thomasfosterau/components/canvas` — a low-level toolkit for vector-editing
+ * surfaces: pan, zoom, a grid, and pointer gestures reported in canvas
+ * coordinates. The application defines its element types, its tools and its
+ * renderer.
+ *
+ * A separate entry point so it never sits on the always-loaded path of a
+ * consumer that does not use it.
+ *
+ * @module
+ */
+export { default as VectorCanvas } from './VectorCanvas.svelte';
+export { applyTransform, diffTransform, emptyHistory, HISTORY_LIMIT, invertTransform, recordEdit, redo, undo, } from "./history.js";
+export { boundingBox, canvasToScreen, distance, generateId, panBy, pointInRect, pointNearLine, rotatePoint, screenToCanvas, snapToGrid, sortByZIndex, zoomAbout, } from "./utils.js";

package/dist/canvas/types.d.ts

@@ -0,0 +1,91 @@
+/**
+ * VectorCanvas core types — the low-level primitives a vector-editing surface
+ * is built from (a floor plan, a seating chart, a garden's bed layout).
+ *
+ * Shaped after ProseMirror's split: a plain-data document, a transform
+ * describing a change to it, and a view that renders the document and reports
+ * interactions. The application defines its own element types by extending
+ * {@link CanvasElement} and supplies the renderer; nothing here knows what a
+ * bed or a table is.
+ *
+ * @module @thomasfosterau/components/canvas/types
+ */
+/** Stable identity for a canvas element. */
+export type ElementId = string;
+/** A point in canvas coordinates — the document's own space, not the screen's. */
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+/** What every element carries, whatever the application adds on top. */
+export interface CanvasElement {
+    readonly id: ElementId;
+    /** The application's discriminator; the renderer switches on it. */
+    readonly type: string;
+    readonly position: Point;
+    /** Degrees, clockwise. */
+    readonly rotation: number;
+    /** Paint order; higher draws later. */
+    readonly zIndex: number;
+    readonly strokeColor: string;
+    readonly strokeWidth: number;
+    readonly fillColor: string;
+    /** 0–1. */
+    readonly opacity: number;
+    /** Whether edits are refused; the view still renders it. */
+    readonly locked: boolean;
+    readonly visible?: boolean | undefined;
+    readonly label?: string | undefined;
+    /** The application's own per-element data. */
+    readonly metadata?: Readonly<Record<string, unknown>> | undefined;
+}
+/** Pan and zoom — where the document sits under the viewport. */
+export interface Viewport {
+    readonly offsetX: number;
+    readonly offsetY: number;
+    /** 1 is 100%. */
+    readonly zoom: number;
+}
+/** The background grid, and whether it captures positions. */
+export interface GridConfig {
+    readonly visible: boolean;
+    /** Cell size in canvas units. */
+    readonly size: number;
+    readonly snap: boolean;
+    /** A CSS colour — a theme token in practice. */
+    readonly color: string;
+}
+/** The whole editable document. */
+export interface VectorDocument<T extends CanvasElement = CanvasElement> {
+    /** Schema version, so a stored document can be migrated. */
+    readonly version: string;
+    readonly metadata: Readonly<Record<string, unknown>>;
+    readonly viewport: Viewport;
+    readonly grid: GridConfig;
+    readonly elements: readonly T[];
+}
+/**
+ * A change to the document, as data. Carrying the previous elements alongside
+ * the new ones is what makes a transform invertible — undo is the same
+ * structure read backwards, rather than a second code path.
+ */
+export interface Transform<T extends CanvasElement = CanvasElement> {
+    readonly type: 'add' | 'update' | 'delete' | 'batch';
+    readonly elementIds: readonly ElementId[];
+    readonly elements?: readonly T[] | undefined;
+    readonly previousElements?: readonly T[] | undefined;
+}
+/** One entry of an undo stack. */
+export interface HistoryEntry<T extends CanvasElement = CanvasElement> {
+    readonly transform: Transform<T>;
+    /** Epoch milliseconds. */
+    readonly timestamp: number;
+    readonly description?: string | undefined;
+}
+/** An axis-aligned box in canvas coordinates. */
+export interface Rect {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}

package/dist/canvas/types.js

@@ -0,0 +1,13 @@
+/**
+ * VectorCanvas core types — the low-level primitives a vector-editing surface
+ * is built from (a floor plan, a seating chart, a garden's bed layout).
+ *
+ * Shaped after ProseMirror's split: a plain-data document, a transform
+ * describing a change to it, and a view that renders the document and reports
+ * interactions. The application defines its own element types by extending
+ * {@link CanvasElement} and supplies the renderer; nothing here knows what a
+ * bed or a table is.
+ *
+ * @module @thomasfosterau/components/canvas/types
+ */
+export {};

package/dist/canvas/utils.d.ts

@@ -0,0 +1,66 @@
+/**
+ * VectorCanvas geometry — coordinate transforms and hit tests, as pure
+ * functions over the types in `./types.ts`.
+ *
+ * Pure and free of the component on purpose: these are what a unit test can
+ * pin without mounting anything, and what an application's own tools (a
+ * marquee select, a snap-to-neighbour) reuse rather than re-derive.
+ *
+ * @module @thomasfosterau/components/canvas/utils
+ */
+import type { CanvasElement, ElementId, Point, Rect, Viewport } from './types.ts';
+/**
+ * A fresh element id.
+ *
+ * `crypto.randomUUID` is present in every browser this library supports and in
+ * workerd; a `Date.now()` + `Math.random()` fallback for environments that are
+ * no longer targets would be worse than none — a duplicate id silently merges
+ * two elements.
+ */
+export declare const generateId: () => ElementId;
+/** Screen (viewport-relative) coordinates → canvas coordinates. */
+export declare const screenToCanvas: (point: Point, viewport: Viewport) => Point;
+/** Canvas coordinates → screen (viewport-relative) coordinates. */
+export declare const canvasToScreen: (point: Point, viewport: Viewport) => Point;
+/** The nearest grid intersection. */
+export declare const snapToGrid: (point: Point, gridSize: number) => Point;
+/** Euclidean distance between two points. */
+export declare const distance: (from: Point, to: Point) => number;
+/** Whether a point falls inside a box (edges included). */
+export declare const pointInRect: (point: Point, rect: Rect) => boolean;
+/**
+ * Whether a point is within `threshold` of a line SEGMENT — the projection is
+ * clamped to the segment, so a point far past an endpoint is not "near the
+ * line" the way it would be for an infinite one.
+ */
+export declare const pointNearLine: (point: Point, start: Point, end: Point, threshold?: number) => boolean;
+/** Paint order: lowest `zIndex` first. Returns a new array. */
+export declare const sortByZIndex: <T extends CanvasElement>(elements: readonly T[]) => readonly T[];
+/**
+ * The box enclosing every element's ORIGIN — not its drawn extent, which only
+ * the application's renderer knows. Enough for "centre the view on the
+ * selection"; not enough for "fit the selection exactly".
+ *
+ * Empty input has no box, which is why the result is an array of none or one
+ * rather than a nullable `Rect`.
+ */
+export declare const boundingBox: (elements: readonly CanvasElement[]) => readonly Rect[];
+/** A point rotated `degrees` clockwise about `centre`. */
+export declare const rotatePoint: (point: Point, centre: Point, degrees: number) => Point;
+/**
+ * The viewport after a pan of `dx`/`dy` SCREEN pixels.
+ *
+ * Screen pixels, not canvas units, and so not divided by the zoom: panning
+ * moves the document one-for-one under the cursor, which is what makes a drag
+ * feel attached to the thing being dragged at every zoom level.
+ */
+export declare const panBy: (viewport: Viewport, dx: number, dy: number) => Viewport;
+/**
+ * The viewport after zooming by `factor` about a screen point.
+ *
+ * About the POINTER, not the origin: the point under the cursor is the one the
+ * reader is looking at, and it stays where it is. Zooming about the origin
+ * instead sends whatever they were examining off the edge, which is the single
+ * most disorienting thing a canvas can do.
+ */
+export declare const zoomAbout: (viewport: Viewport, pointer: Point, factor: number) => Viewport;

package/dist/canvas/utils.js

@@ -0,0 +1,114 @@
+/**
+ * VectorCanvas geometry — coordinate transforms and hit tests, as pure
+ * functions over the types in `./types.ts`.
+ *
+ * Pure and free of the component on purpose: these are what a unit test can
+ * pin without mounting anything, and what an application's own tools (a
+ * marquee select, a snap-to-neighbour) reuse rather than re-derive.
+ *
+ * @module @thomasfosterau/components/canvas/utils
+ */
+/**
+ * A fresh element id.
+ *
+ * `crypto.randomUUID` is present in every browser this library supports and in
+ * workerd; a `Date.now()` + `Math.random()` fallback for environments that are
+ * no longer targets would be worse than none — a duplicate id silently merges
+ * two elements.
+ */
+export const generateId = () => crypto.randomUUID();
+/** Screen (viewport-relative) coordinates → canvas coordinates. */
+export const screenToCanvas = (point, viewport) => ({
+    x: (point.x - viewport.offsetX) / viewport.zoom,
+    y: (point.y - viewport.offsetY) / viewport.zoom,
+});
+/** Canvas coordinates → screen (viewport-relative) coordinates. */
+export const canvasToScreen = (point, viewport) => ({
+    x: point.x * viewport.zoom + viewport.offsetX,
+    y: point.y * viewport.zoom + viewport.offsetY,
+});
+/** The nearest grid intersection. */
+export const snapToGrid = (point, gridSize) => ({
+    x: Math.round(point.x / gridSize) * gridSize,
+    y: Math.round(point.y / gridSize) * gridSize,
+});
+/** Euclidean distance between two points. */
+export const distance = (from, to) => Math.hypot(to.x - from.x, to.y - from.y);
+/** Whether a point falls inside a box (edges included). */
+export const pointInRect = (point, rect) => point.x >= rect.x &&
+    point.x <= rect.x + rect.width &&
+    point.y >= rect.y &&
+    point.y <= rect.y + rect.height;
+/**
+ * Whether a point is within `threshold` of a line SEGMENT — the projection is
+ * clamped to the segment, so a point far past an endpoint is not "near the
+ * line" the way it would be for an infinite one.
+ */
+export const pointNearLine = (point, start, end, threshold = 5) => {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const lengthSquared = dx * dx + dy * dy;
+    if (lengthSquared === 0)
+        return distance(point, start) <= threshold;
+    const t = Math.max(0, Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSquared));
+    return distance(point, { x: start.x + t * dx, y: start.y + t * dy }) <= threshold;
+};
+/** Paint order: lowest `zIndex` first. Returns a new array. */
+export const sortByZIndex = (elements) => elements.toSorted((left, right) => left.zIndex - right.zIndex);
+/**
+ * The box enclosing every element's ORIGIN — not its drawn extent, which only
+ * the application's renderer knows. Enough for "centre the view on the
+ * selection"; not enough for "fit the selection exactly".
+ *
+ * Empty input has no box, which is why the result is an array of none or one
+ * rather than a nullable `Rect`.
+ */
+export const boundingBox = (elements) => {
+    if (elements.length === 0)
+        return [];
+    const xs = elements.map((element) => element.position.x);
+    const ys = elements.map((element) => element.position.y);
+    const minX = Math.min(...xs);
+    const minY = Math.min(...ys);
+    return [{ x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY }];
+};
+/** A point rotated `degrees` clockwise about `centre`. */
+export const rotatePoint = (point, centre, degrees) => {
+    const radians = (degrees * Math.PI) / 180;
+    const cos = Math.cos(radians);
+    const sin = Math.sin(radians);
+    const dx = point.x - centre.x;
+    const dy = point.y - centre.y;
+    return { x: centre.x + dx * cos - dy * sin, y: centre.y + dx * sin + dy * cos };
+};
+/**
+ * The viewport after a pan of `dx`/`dy` SCREEN pixels.
+ *
+ * Screen pixels, not canvas units, and so not divided by the zoom: panning
+ * moves the document one-for-one under the cursor, which is what makes a drag
+ * feel attached to the thing being dragged at every zoom level.
+ */
+export const panBy = (viewport, dx, dy) => ({
+    ...viewport,
+    offsetX: viewport.offsetX + dx,
+    offsetY: viewport.offsetY + dy,
+});
+/** The zoom bounds; below the first the grid is useless, above the second the marks are. */
+const ZOOM_RANGE = { min: 0.1, max: 10 };
+/**
+ * The viewport after zooming by `factor` about a screen point.
+ *
+ * About the POINTER, not the origin: the point under the cursor is the one the
+ * reader is looking at, and it stays where it is. Zooming about the origin
+ * instead sends whatever they were examining off the edge, which is the single
+ * most disorienting thing a canvas can do.
+ */
+export const zoomAbout = (viewport, pointer, factor) => {
+    const zoom = Math.max(ZOOM_RANGE.min, Math.min(ZOOM_RANGE.max, viewport.zoom * factor));
+    const anchor = screenToCanvas(pointer, viewport);
+    return {
+        zoom,
+        offsetX: pointer.x - anchor.x * zoom,
+        offsetY: pointer.y - anchor.y * zoom,
+    };
+};

package/dist/charts/Chart.svelte

@@ -0,0 +1,300 @@
+<!-- @component
+A line, area or bar chart drawn as plain SVG from a declarative series spec, with an always-present `sr-only` data table.
+-->
+<!--
+  Chart — a line, area or bar chart drawn as plain SVG from a declarative
+  series spec.
+
+  It takes no charting dependency, deliberately: scales over a bounded category
+  axis are arithmetic, and a charting library behind a package's entry point is
+  not worth the bytes when the whole of what it would supply is four functions.
+
+  Rules it enforces rather than leaves to the caller, because a chart that gets
+  them wrong is a chart that misleads:
+
+  - **One y axis.** Two measures of different scale are two charts. There is no
+    prop for a second scale, deliberately.
+  - **The zero line is drawn.** A bar chart whose baseline is not zero
+    exaggerates every difference on it; this one starts its domain at zero (or
+    at the minimum, when values go negative) and says so on the axis.
+  - **Identity is never colour alone.** Two or more series always get a legend;
+    four or fewer also get a direct label on their last point. The series colour
+    is on the mark, never on the text beside it.
+  - **The numbers are readable without seeing.** A `<table>` of the same data is
+    always in the DOM — visually hidden by default, revealed with `showTable` —
+    so a reader who cannot resolve the colours still has the figures.
+
+  Colour comes from the theme's four validated chart slots
+  (`--color-chart-1…4`, see `theme.css`). Slots are assigned by series ORDER and
+  never cycled: a fifth series is a design problem — fold it into an "other"
+  series, or facet — not a generated hue, so it draws in the neutral slot and
+  the legend says which one it is.
+
+  ## ARIA contract
+
+  The `<svg>` is `role="img"` named by `title`, so a screen reader is told it is
+  one picture rather than walked through several hundred unlabelled shapes. The
+  figures themselves are reached through the always-present `<table>`, captioned
+  by `tableLabel` (which defaults to `title`) with the categories as row headers
+  and the series as column headers. The legend, when there is one, is a list
+  named by `legendLabel`. Every one of those strings is a prop with an English
+  default; nothing here reads copy from a context.
+
+  Hand-rolled rather than built on a bits-ui primitive because bits-ui has no
+  chart: this is geometry and a table, not a focus-managed widget.
+-->
+<script lang="ts">let { series, kind = "line", title, description = "", height = 240, showTable = false, legendLabel = "Series", tableLabel = "", categoryLabel = "", formatValue = (value) => String(value), class: className } = $props();
+/** The plot's own coordinate system; the SVG scales to its container. */
+const WIDTH = 640;
+const PADDING = {
+	top: 16,
+	right: 16,
+	bottom: 32,
+	left: 48
+};
+const caption = $derived(tableLabel === "" ? title : tableLabel);
+const categories = $derived(series[0]?.points.map((point) => point.label) ?? []);
+const values = $derived(series.flatMap((entry) => entry.points.map((point) => point.value)));
+// The domain starts at zero unless the data goes below it. Growing the top by
+// a twentieth keeps the highest mark off the frame without inventing a scale.
+const max = $derived(Math.max(0, ...values) * 1.05 || 1);
+const min = $derived(Math.min(0, ...values));
+const plotWidth = WIDTH - PADDING.left - PADDING.right;
+const plotHeight = $derived(height - PADDING.top - PADDING.bottom);
+const y = $derived((value) => {
+	const span = max - min || 1;
+	return PADDING.top + plotHeight - (value - min) / span * plotHeight;
+});
+/** Category centres: a band per category, the mark on its midpoint. */
+const x = $derived((index) => {
+	const band = plotWidth / Math.max(categories.length, 1);
+	return PADDING.left + band * index + band / 2;
+});
+/** Four validated slots, then the neutral one — never a generated hue. */
+const colour = (index) => index < 4 ? `var(--color-chart-${index + 1})` : "var(--color-neutral)";
+const path = $derived((entry) => entry.points.map((point, index) => `${index === 0 ? "M" : "L"}${x(index)} ${y(point.value)}`).join(" "));
+const areaPath = $derived((entry) => entry.points.length === 0 ? "" : `${path(entry)} L${x(entry.points.length - 1)} ${y(min)} L${x(0)} ${y(min)} Z`);
+/** Five gridlines, the bottom one being the zero (or minimum) rule. */
+const ticks = $derived(Array.from({ length: 5 }, (_unused, step) => min + (max - min) / 4 * step).reverse());
+// Bars share a category band: each series takes an equal slice of it, less a
+// 2px gap so adjacent fills never touch and read as one block.
+const barBand = $derived(plotWidth / Math.max(categories.length, 1));
+const barWidth = $derived(Math.max(2, barBand * .7 / Math.max(series.length, 1) - 2));
+/** The category the pointer is over; -1 is "nowhere". */
+let hovered = $state(-1);
+let plot = $state();
+const track = (event) => {
+	if (plot === undefined || categories.length === 0) return;
+	const box = plot.getBoundingClientRect();
+	// The pointer is in CSS pixels and the plot in its own units; scale across
+	// rather than assuming they match, because the SVG is fluid.
+	const local = (event.clientX - box.left) / box.width * WIDTH;
+	const band = plotWidth / categories.length;
+	const index = Math.floor((local - PADDING.left) / band);
+	hovered = index >= 0 && index < categories.length ? index : -1;
+};
+export {};
+</script>
+
+<figure class={['not-prose space-y-2', className]}>
+  <figcaption class="space-y-1">
+    <p class="text-base font-semibold">{title}</p>
+    {#if description !== ''}
+      <p class="text-base-content/70 text-sm">{description}</p>
+    {/if}
+  </figcaption>
+
+  {#if series.length > 1}
+    <ul
+      aria-label={legendLabel}
+      class="text-base-content/80 flex flex-wrap gap-x-4 gap-y-1 text-sm"
+    >
+      {#each series as entry, index (entry.key)}
+        <li class="flex items-center gap-1.5">
+          <span
+            class="inline-block size-2.5 rounded-full"
+            style:background-color={colour(index)}
+            aria-hidden="true"
+          ></span>
+          {entry.label}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  <div class="relative">
+    <svg
+      bind:this={plot}
+      viewBox={`0 0 ${WIDTH} ${height}`}
+      class="h-auto w-full"
+      role="img"
+      aria-label={title}
+      onpointermove={track}
+      onpointerleave={() => {
+        hovered = -1;
+      }}
+    >
+      <!-- Grid and axes, recessive: they orient the eye, they are not the data. -->
+      {#each ticks as tick (tick)}
+        <line
+          x1={PADDING.left}
+          x2={WIDTH - PADDING.right}
+          y1={y(tick)}
+          y2={y(tick)}
+          class="stroke-base-content/10"
+          stroke-width="1"
+        />
+        <text
+          x={PADDING.left - 8}
+          y={y(tick) + 4}
+          text-anchor="end"
+          class="fill-base-content/50 text-[10px]"
+        >
+          {formatValue(Math.round(tick))}
+        </text>
+      {/each}
+      <line
+        x1={PADDING.left}
+        x2={WIDTH - PADDING.right}
+        y1={y(min)}
+        y2={y(min)}
+        class="stroke-base-content/30"
+        stroke-width="1"
+      />
+
+      {#each categories as category, index (category)}
+        <text
+          x={x(index)}
+          y={height - 10}
+          text-anchor="middle"
+          class="fill-base-content/50 text-[10px]"
+        >
+          {category}
+        </text>
+      {/each}
+
+      {#if hovered >= 0 && kind !== 'bar'}
+        <line
+          x1={x(hovered)}
+          x2={x(hovered)}
+          y1={PADDING.top}
+          y2={PADDING.top + plotHeight}
+          class="stroke-base-content/30"
+          stroke-width="1"
+          stroke-dasharray="3 3"
+        />
+      {/if}
+
+      {#each series as entry, index (entry.key)}
+        {#if kind === 'bar'}
+          {#each entry.points as point, pointIndex (point.label)}
+            <rect
+              x={x(pointIndex) -
+                (barWidth * series.length + 2 * (series.length - 1)) / 2 +
+                index * (barWidth + 2)}
+              y={Math.min(y(point.value), y(0))}
+              width={barWidth}
+              height={Math.max(1, Math.abs(y(point.value) - y(0)))}
+              rx="4"
+              fill={colour(index)}
+              opacity={hovered === -1 || hovered === pointIndex ? 1 : 0.45}
+            />
+          {/each}
+        {:else}
+          {#if kind === 'area'}
+            <path d={areaPath(entry)} fill={colour(index)} opacity="0.15" />
+          {/if}
+          <path
+            d={path(entry)}
+            fill="none"
+            stroke={colour(index)}
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          {#if hovered >= 0}
+            {@const marked = entry.points[hovered]}
+            {#if marked !== undefined}
+              <!-- The 2px surface ring is what keeps two markers that land on
+                   the same value from reading as one mark. -->
+              <circle
+                cx={x(hovered)}
+                cy={y(marked.value)}
+                r="5"
+                fill={colour(index)}
+                class="stroke-base-100"
+                stroke-width="2"
+              />
+            {/if}
+          {/if}
+          {#if series.length > 1 && series.length <= 4}
+            {@const last = entry.points.at(-1)}
+            {#if last !== undefined}
+              <text
+                x={x(entry.points.length - 1) + 6}
+                y={y(last.value) + 3}
+                class="fill-base-content/70 text-[10px]"
+              >
+                {entry.label}
+              </text>
+            {/if}
+          {/if}
+        {/if}
+      {/each}
+    </svg>
+
+    {#if hovered >= 0}
+      <!-- Positioned over the plot in percentage terms, so it tracks the fluid
+           SVG rather than a width this component does not know. -->
+      <div
+        class="bg-base-100 border-base-300 rounded-box pointer-events-none absolute top-2 z-10 border p-2 text-xs shadow-md"
+        style:left={`calc(${(x(hovered) / WIDTH) * 100}% + 0.5rem)`}
+        role="status"
+      >
+        <p class="font-semibold">{categories[hovered]}</p>
+        <ul>
+          {#each series as entry, index (entry.key)}
+            {@const point = entry.points[hovered]}
+            {#if point !== undefined}
+              <li class="flex items-center gap-1.5">
+                <span
+                  class="inline-block size-2 rounded-full"
+                  style:background-color={colour(index)}
+                  aria-hidden="true"
+                ></span>
+                <span class="text-base-content/70">{entry.label}</span>
+                <span class="font-medium">{formatValue(point.value)}</span>
+              </li>
+            {/if}
+          {/each}
+        </ul>
+      </div>
+    {/if}
+  </div>
+
+  <!-- The same figures as text. Always present; `showTable` only decides
+       whether sighted readers see it too. -->
+  <div class={showTable ? 'overflow-x-auto' : 'sr-only'}>
+    <table class="table table-sm">
+      <caption class="sr-only">{caption}</caption>
+      <thead>
+        <tr>
+          <th scope="col">{categories.length === 0 ? caption : categoryLabel}</th>
+          {#each series as entry (entry.key)}
+            <th scope="col">{entry.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each categories as category, index (category)}
+          <tr>
+            <th scope="row">{category}</th>
+            {#each series as entry (entry.key)}
+              <td>{formatValue(entry.points[index]?.value ?? 0)}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</figure>

package/dist/charts/Chart.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { ChartKind, ChartSeries } from './types.ts';
+interface Props {
+    /** One entry per series, sharing the first series' categories. */
+    series: readonly ChartSeries[];
+    /**
+     * The chart form.
+     * @defaultValue `'line'`
+     */
+    kind?: ChartKind | undefined;
+    /** Names the figure; rendered as its caption and its accessible name. */
+    title: string;
+    /**
+     * A sentence of context under the title.
+     * @defaultValue `''`
+     */
+    description?: string | undefined;
+    /**
+     * Plot height in CSS pixels; the width is fluid.
+     * @defaultValue `240`
+     */
+    height?: number | undefined;
+    /** Reveal the data table rather than leaving it to assistive tech. */
+    showTable?: boolean | undefined;
+    /**
+     * Names the series legend; only rendered when there are two or more.
+     * @defaultValue `'Series'`
+     */
+    legendLabel?: string | undefined;
+    /**
+     * Captions the data table. Empty means "use `title`".
+     * @defaultValue `''` (use `title`)
+     */
+    tableLabel?: string | undefined;
+    /**
+     * Heads the table's category column.
+     * @defaultValue `''`
+     */
+    categoryLabel?: string | undefined;
+    /**
+     * Rendered value text — a unit, a locale-formatted number.
+     * @defaultValue `String(value)`
+     */
+    formatValue?: ((value: number) => string) | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** A line, area or bar chart drawn as plain SVG from a declarative series spec, with an always-present `sr-only` data table. */
+declare const Chart: import("svelte").Component<Props, {}, "">;
+type Chart = ReturnType<typeof Chart>;
+export default Chart;

package/dist/charts/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * `@thomasfosterau/components/charts` — one component, over a declarative
+ * series spec, drawn as plain SVG.
+ *
+ * A separate entry point so it never sits on the always-loaded path of a
+ * consumer that does not use it.
+ *
+ * @module
+ */
+export { default as Chart } from './Chart.svelte';
+export type { ChartKind, ChartPoint, ChartSeries } from './types.ts';