@charcuterie/ui 4.15.2 → 4.17.0

package/README.md

@@ -328,4 +328,4 @@ rename breaks only the rendered page).
    board. `sourceRules.test.ts` now derives the container-declaring components from
    source and fails on this, so the component M4 adds joins the rule automatically.
 
-**`Chart`** provides responsive bar and line plots, negative values, gaps for missing data, and an optional semantic values table. Its escaped SVG renderer lives in `@charcuterie/logic/core` for Preact and image consumers. Apps supply their own series, labels, and semantic colors.
+**`Chart`** provides responsive bar and line plots, negative values, gaps for missing data, and an optional semantic values table. TanStack provides hover/touch tooltips, keyboard navigation, and transitions with reduced-motion support. Set `renderer="portable"` for the lightweight fallback. The `@charcuterie/logic/charts`, `/charts/preact`, and `/charts/react` subpaths expose static and framework-specific surfaces; `/core` remains dependency-free. Apps supply their own series, labels, and semantic colors.

package/dist/Chart/Chart.d.ts

@@ -4,7 +4,10 @@ export type ChartProps = ChartOptions & {
     className?: string;
     /** A text table exposes every value without relying on color, hover, or SVG. */
     isTableVisible?: boolean;
+    /** The portable renderer is an explicit fallback for constrained environments. */
+    renderer?: "tanstack" | "portable";
+    isAnimated?: boolean;
 };
 /** The same escaped SVG renderer is available without React for kiosk/image consumers. */
-export declare const Chart: ({ className, isTableVisible, ...options }: ChartProps) => ReactNode;
+export declare const Chart: ({ className, isTableVisible, renderer, isAnimated, ...options }: ChartProps) => ReactNode;
 //# sourceMappingURL=Chart.d.ts.map

package/dist/Chart/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED,0FAA0F;AAC1F,eAAO,MAAM,KAAK,GAAI,2CAInB,UAAU,KAAG,SAwGf,CAAA"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,YAAY,EAElB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAA;AAGd,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gFAAgF;IAChF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,UAAU,GAAG,UAAU,CAAA;IAClC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED,0FAA0F;AAC1F,eAAO,MAAM,KAAK,GAAI,iEAMnB,UAAU,KAAG,SA+Hf,CAAA"}

package/dist/Chart/Chart.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // biome-ignore-all lint/security/noDangerouslySetInnerHtml: The portable renderer escapes text and restricts color references; security tests cover this boundary.
+import { ChartPlot } from "@charcuterie/logic/charts/react";
 import { renderChartSvg, } from "@charcuterie/logic/core";
 import { useEffect, useRef, useState, } from "react";
 import { toClassName } from "../toClassName.js";
 /** The same escaped SVG renderer is available without React for kiosk/image consumers. */
-export const Chart = ({ className, isTableVisible = false, ...options }) => {
+export const Chart = ({ className, isTableVisible = false, renderer = "tanstack", isAnimated = true, ...options }) => {
     const container = useRef(null);
     const [measuredWidth, setMeasuredWidth] = useState(options.width ?? 640);
     useEffect(() => {
@@ -26,12 +27,17 @@ export const Chart = ({ className, isTableVisible = false, ...options }) => {
             cancelAnimationFrame(frame.id);
         };
     }, [options.width]);
-    return (_jsxs("figure", { className: toClassName("min-w-0 text-content-primary", className), children: [_jsx("figcaption", { className: "mb-2 text-sm font-semibold", children: options.title }), _jsx("div", { ref: container, style: { height: options.height ?? 240 }, dangerouslySetInnerHTML: {
-                    __html: renderChartSvg({
-                        ...options,
-                        width: options.width ?? measuredWidth,
-                    }),
-                } }), _jsx("ul", { "aria-label": `${options.title} legend`, className: "mt-2 flex flex-wrap gap-3 text-xs", children: options.series.map((entry, index) => (_jsxs("li", { className: "min-w-0 wrap-anywhere", children: [_jsx("span", { "aria-hidden": "true", style: {
+    return (_jsxs("figure", { style: {
+            "--ts-chart-tooltip-background": "var(--color-surface-raised)",
+            "--ts-chart-tooltip-color": "var(--color-content-primary)",
+            "--ts-chart-tooltip-border": "1px solid var(--color-border-subtle)",
+            "--ts-chart-tooltip-font": "inherit",
+        }, className: toClassName("min-w-0 text-content-primary", className), children: [_jsx("figcaption", { className: "mb-2 text-sm font-semibold", children: options.title }), _jsx("div", { ref: container, style: { height: options.height ?? 240 }, children: renderer === "portable" ? (_jsx("div", { style: { height: "100%" }, dangerouslySetInnerHTML: {
+                        __html: renderChartSvg({
+                            ...options,
+                            width: options.width ?? measuredWidth,
+                        }),
+                    } })) : (_jsx(ChartPlot, { ...options, width: options.width ?? measuredWidth, isAnimated: isAnimated })) }), _jsx("ul", { "aria-label": `${options.title} legend`, className: "mt-2 flex flex-wrap gap-3 text-xs", children: options.series.map((entry, index) => (_jsxs("li", { className: "min-w-0 wrap-anywhere", children: [_jsx("span", { "aria-hidden": "true", style: {
                                 color: entry.color ?? "currentColor",
                                 borderTop: `3px ${index % 3 === 0 ? "solid" : index % 3 === 1 ? "dashed" : "dotted"} currentColor`,
                                 display: "inline-block",

package/dist/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../src/Chart/Chart.tsx"],"names":[],"mappings":"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"}

package/dist/Stepper/Stepper.d.ts

@@ -60,6 +60,8 @@ export type StepperProps = {
      * vertical — a column cannot hold a list.
      */
     readonly orientation?: StepperOrientation;
+    /** Completed stages become buttons; the caller resets dependent answers. */
+    readonly onStepSelect?: (key: string) => void;
     readonly steps: readonly Step[];
 };
 /**
@@ -94,5 +96,5 @@ export type StepperProps = {
  * step drawing a connector into empty space, which is a
  * `:not(:last-child)` selector nobody remembers to write.
  */
-export declare const Stepper: ({ appearance, className, headingLevel, isResponsive, label, orientation, steps, }: StepperProps) => import("react").JSX.Element;
+export declare const Stepper: ({ appearance, className, headingLevel, isResponsive, label, orientation, onStepSelect, steps, }: StepperProps) => import("react").JSX.Element;
 //# sourceMappingURL=Stepper.d.ts.map

package/dist/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,MAAM,GACN,UAAU,CAAA;AAEd,MAAM,MAAM,IAAI,GAAG;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB;uCACmC;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAA;IAChC;;;;;;;OAOG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAA;AAE1D,MAAM,MAAM,YAAY,GAAG;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACrC;2CACuC;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B;;;;;;OAMG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IACzC,QAAQ,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,OAAO,GAAI,mFAQrB,YAAY,gCAuKd,CAAA"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC;;;;;;;;;GASG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,MAAM,GACN,UAAU,CAAA;AAEd,MAAM,MAAM,IAAI,GAAG;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB;uCACmC;IACnC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAA;IAChC;;;;;;;OAOG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAA;AAE1D,MAAM,MAAM,YAAY,GAAG;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACrC;2CACuC;IACvC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B;;;;;;OAMG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,kBAAkB,CAAA;IACzC,4EAA4E;IAC5E,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,QAAQ,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;CAChC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,OAAO,GAAI,iGASrB,YAAY,gCAmLd,CAAA"}

package/dist/Stepper/Stepper.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FLIP_KEY_ATTRIBUTE } from "@charcuterie/logic";
+import { Button } from "../Button/Button.js";
 import { toClassName } from "../toClassName.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 /**
@@ -34,7 +35,7 @@ import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
  * step drawing a connector into empty space, which is a
  * `:not(:last-child)` selector nobody remembers to write.
  */
-export const Stepper = ({ appearance = "default", className, headingLevel = 3, isResponsive = true, label, orientation = "vertical", steps, }) => {
+export const Stepper = ({ appearance = "default", className, headingLevel = 3, isResponsive = true, label, orientation = "vertical", onStepSelect, steps, }) => {
     const Heading = `h${headingLevel}`;
     const isHorizontal = orientation === "horizontal";
     const isCompact = appearance === "compact";
@@ -50,7 +51,7 @@ export const Stepper = ({ appearance = "default", className, headingLevel = 3, i
                     : "flex-row gap-0")), children: steps.map((step, index) => {
                 const status = step.status ?? "upcoming";
                 const isLast = index === steps.length - 1;
-                return (_jsxs("li", { [FLIP_KEY_ATTRIBUTE]: step.key, className: toClassName("relative grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-x-3", isHorizontal &&
+                return (_jsxs("li", { "aria-current": status === "current" ? "step" : undefined, [FLIP_KEY_ATTRIBUTE]: step.key, className: toClassName("relative grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-x-3", isHorizontal &&
                         (isResponsive
                             ? "cq-md:flex cq-md:min-w-0 cq-md:flex-1 cq-md:flex-col cq-md:gap-y-2"
                             : "flex min-w-0 flex-1 flex-col gap-y-2"), isCompact && "gap-y-1", 
@@ -82,7 +83,7 @@ export const Stepper = ({ appearance = "default", className, headingLevel = 3, i
                                         : "absolute top-3.5 start-7 my-0 h-0.5 w-[calc(100%-1.75rem)]")) })), _jsxs("div", { className: toClassName("col-start-2 row-span-2 row-start-1 min-w-0", isHorizontal &&
                                 (isResponsive
                                     ? "cq-md:col-start-1"
-                                    : "col-start-1")), children: [_jsxs(Heading, { className: toClassName("m-0 flex flex-wrap items-center gap-2 font-medium text-content-primary", isCompact ? "text-xs" : "text-md"), children: [step.label, _jsx(VisuallyHidden, { children: STATUS_LABEL[status] })] }), step.description == null ? null : (_jsx("p", { className: "mt-0.5 mb-0 text-sm text-content-secondary", children: step.description })), step.content == null ? null : (_jsx("div", { className: "mt-2", children: step.content }))] })] }, step.key));
+                                    : "col-start-1")), children: [_jsxs(Heading, { className: toClassName("m-0 flex flex-wrap items-center gap-2 font-medium text-content-primary", isCompact ? "text-xs" : "text-md"), children: [onStepSelect && status === "done" ? (_jsx(Button, { appearance: "ghost", onClick: () => onStepSelect(step.key), children: step.label })) : (step.label), _jsx(VisuallyHidden, { children: STATUS_LABEL[status] })] }), step.description == null ? null : (_jsx("p", { className: "mt-0.5 mb-0 text-sm text-content-secondary", children: step.description })), step.content == null ? null : (_jsx("div", { className: "mt-2", children: step.content }))] })] }, step.key));
             }) }) }));
 };
 /**

package/dist/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.15.2",
+  "version": "4.17.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -53,7 +53,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@charcuterie/logic": "2.7.0",
+    "@charcuterie/logic": "2.9.0",
     "@charcuterie/tokens": "1.10.2",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12",

package/src/Chart/Chart.mdx

@@ -7,10 +7,19 @@ import * as stories from "./Chart.stories.tsx"
 
 Bar and line plots with a zero baseline, negative values, explicit missing samples, and an optional values table. The app owns the data and its meaning. Null means unavailable, never zero. Color is optional; mark titles, labels, and the table preserve the information without it.
 
-The framework-free `renderChartSvg` export from `@charcuterie/logic/core` draws exactly the same plot for Preact kiosks and image renderers. It escapes all producer text and rejects external color references. Use `Chart` in React. Use the portable renderer where a React tree is not available.
+TanStack Charts 0.18.0 is the primary renderer. Hover, tap, or focus the plot and use arrow keys, Home, and End to inspect values. Tooltips show every series for the selected label, including unavailable samples. Positive and negative contributions stack independently with `barLayout="stacked"`; grouped bars remain the default. `isAnimated={false}` disables motion, and changes to `prefers-reduced-motion` are honored while mounted.
+
+Use `renderer="portable"` for the existing lightweight SVG fallback. Its static output and the optional semantic values table remain available. Neither renderer fetches data.
+
+`@charcuterie/logic/charts` exports `createChartDefinition` and a standalone `renderChartSvg` with explicit image dimensions. `@charcuterie/logic/charts/preact` exports native `ChartPlot` without React or a compatibility layer. `@charcuterie/logic/core` keeps the dependency-free portable renderer for constrained consumers. Static consumers supply resolved colors rather than browser CSS variables.
+
+TanStack remains alpha and is pinned exactly. Upgrades require the interaction and export checks recorded in the decision and evaluation.
 
 <Canvas of={stories.Playground} />
 <Canvas of={stories.AllVariants} />
 <Canvas of={stories.AllStates} />
 <Canvas of={stories.Responsive} />
 <Canvas of={stories.Interactive} />
+
+<Canvas of={stories.StackedDaily} />
+<Canvas of={stories.PortableFallback} />

package/src/Chart/Chart.stories.tsx

@@ -78,15 +78,65 @@ export const Interactive: Story = {
   render: (props) => {
     const [isTableVisible, setIsTableVisible] =
       useState(false)
+    const [isUpdated, setIsUpdated] = useState(false)
     return (
       <>
+        <Button onClick={() => setIsUpdated(!isUpdated)}>
+          Update values
+        </Button>
         <Button
           onClick={() => setIsTableVisible(!isTableVisible)}
         >
           {isTableVisible ? "Hide values" : "Show values"}
         </Button>
-        <Chart {...props} isTableVisible={isTableVisible} />
+        <Chart
+          {...props}
+          series={props.series.map((entry) => ({
+            ...entry,
+            values: entry.values.map((value) =>
+              value === null
+                ? null
+                : value + (isUpdated ? 100 : 0),
+            ),
+          }))}
+          isTableVisible={isTableVisible}
+        />
       </>
     )
   },
 }
+
+export const StackedDaily: Story = {
+  args: {
+    barLayout: "stacked",
+    series: [
+      {
+        id: "tasks",
+        label: "Tasks",
+        values: [200, 280, 180, 260, 300],
+        color: "var(--color-intent-accent-solid)",
+      },
+      {
+        id: "bonuses",
+        label: "Bonuses",
+        values: [10, 20, 0, 10, 0],
+        color: "var(--color-intent-success-solid)",
+      },
+      {
+        id: "penalties",
+        label: "Penalties",
+        values: [0, -50, -50, 0, 0],
+        color: "var(--color-intent-danger-solid)",
+      },
+      {
+        id: "reversals",
+        label: "Reversals",
+        values: [0, -10, 0, 0, 0],
+        color: "var(--color-content-muted)",
+      },
+    ],
+  },
+}
+export const PortableFallback: Story = {
+  args: { renderer: "portable" },
+}

package/src/Chart/Chart.test.tsx

@@ -5,7 +5,8 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Chart.stories.tsx"
 
-const { Playground, Interactive } = composeStories(stories)
+const { Playground, Interactive, StackedDaily } =
+  composeStories(stories)
 test("the plot has an accessible name and a named legend", async () => {
   const { canvas } = await mountStory(Playground)
   expectAgentDrivable(canvas, {
@@ -35,3 +36,31 @@ test("the keyboard exposes all values, including missing data, in a real table",
   ).toBeVisible()
   await expect(within(table).getByText("-50")).toBeVisible()
 })
+
+test("keyboard point navigation exposes the day's original category amounts", async () => {
+  const { canvas } = await mountStory(StackedDaily)
+  const plot = expectAgentDrivable(canvas, {
+    role: "img",
+    name: "Daily progress",
+  })
+  plot.focus()
+  await userEvent.keyboard("{Home}")
+  const body = within(document.body)
+  await expect(body.getByRole("status")).toBeVisible()
+  await expect(
+    within(body.getByRole("status")).getByText("Tasks"),
+  ).toBeVisible()
+  await expect(
+    within(body.getByRole("status")).getByText("200"),
+  ).toBeVisible()
+  await expect(
+    within(body.getByRole("status")).getByText("10"),
+  ).toBeVisible()
+  await userEvent.keyboard("{End}")
+  await expect(
+    within(body.getByRole("status")).getByText("Fri"),
+  ).toBeVisible()
+  await expect(
+    within(body.getByRole("status")).getByText("300"),
+  ).toBeVisible()
+})

package/src/Chart/Chart.tsx

@@ -1,9 +1,12 @@
 // biome-ignore-all lint/security/noDangerouslySetInnerHtml: The portable renderer escapes text and restricts color references; security tests cover this boundary.
+
+import { ChartPlot } from "@charcuterie/logic/charts/react"
 import {
   type ChartOptions,
   renderChartSvg,
 } from "@charcuterie/logic/core"
 import {
+  type CSSProperties,
   type ReactNode,
   useEffect,
   useRef,
@@ -15,12 +18,17 @@ export type ChartProps = ChartOptions & {
   className?: string
   /** A text table exposes every value without relying on color, hover, or SVG. */
   isTableVisible?: boolean
+  /** The portable renderer is an explicit fallback for constrained environments. */
+  renderer?: "tanstack" | "portable"
+  isAnimated?: boolean
 }
 
 /** The same escaped SVG renderer is available without React for kiosk/image consumers. */
 export const Chart = ({
   className,
   isTableVisible = false,
+  renderer = "tanstack",
+  isAnimated = true,
   ...options
 }: ChartProps): ReactNode => {
   const container = useRef<HTMLDivElement>(null)
@@ -47,6 +55,17 @@ export const Chart = ({
   }, [options.width])
   return (
     <figure
+      style={
+        {
+          "--ts-chart-tooltip-background":
+            "var(--color-surface-raised)",
+          "--ts-chart-tooltip-color":
+            "var(--color-content-primary)",
+          "--ts-chart-tooltip-border":
+            "1px solid var(--color-border-subtle)",
+          "--ts-chart-tooltip-font": "inherit",
+        } as CSSProperties
+      }
       className={toClassName(
         "min-w-0 text-content-primary",
         className,
@@ -58,13 +77,25 @@ export const Chart = ({
       <div
         ref={container}
         style={{ height: options.height ?? 240 }}
-        dangerouslySetInnerHTML={{
-          __html: renderChartSvg({
-            ...options,
-            width: options.width ?? measuredWidth,
-          }),
-        }}
-      />
+      >
+        {renderer === "portable" ? (
+          <div
+            style={{ height: "100%" }}
+            dangerouslySetInnerHTML={{
+              __html: renderChartSvg({
+                ...options,
+                width: options.width ?? measuredWidth,
+              }),
+            }}
+          />
+        ) : (
+          <ChartPlot
+            {...options}
+            width={options.width ?? measuredWidth}
+            isAnimated={isAnimated}
+          />
+        )}
+      </div>
       <ul
         aria-label={`${options.title} legend`}
         className="mt-2 flex flex-wrap gap-3 text-xs"

package/src/Stepper/Stepper.mdx

@@ -84,3 +84,15 @@ A stepper is a **document outline**, not a widget: an `<ol>` of headings. Advanc
 app's operation and the component only reports where the sequence got to, so there is no
 roving focus, no `aria-current` on a control, and nothing to arrow between. If your steps
 are *navigable* — a checkout you can click back into — you want `Tabs`.
+
+
+## Wizard navigation
+
+Provide `onStepSelect` to make completed stages keyboard-accessible buttons.
+Current and upcoming stages remain progress indicators. The caller owns the answers:
+returning to an earlier stage should clear choices that depend on it.
+
+<Canvas of={StepperStories.WizardNavigation} />
+
+Preact displays can use `getWizardSteps` from `@charcuterie/logic/core` to derive the
+same numbered stages and backward navigation without importing React components.

package/src/Stepper/Stepper.stories.tsx

@@ -252,3 +252,27 @@ export const Interactive: Story = {
     )
   },
 }
+
+/** A wizard permits returning to completed stages without skipping answers. */
+export const WizardNavigation: Story = {
+  render: (stepperProps) => {
+    const [currentKey, setCurrentKey] = useState("tag")
+    return (
+      <Stepper
+        {...stepperProps}
+        label="Assignment wizard"
+        orientation="horizontal"
+        onStepSelect={setCurrentKey}
+        steps={RIP.map((step) => ({
+          ...step,
+          status:
+            step.key === currentKey
+              ? "current"
+              : step.key === "rip"
+                ? "done"
+                : "upcoming",
+        }))}
+      />
+    )
+  },
+}

package/src/Stepper/Stepper.test.tsx

@@ -12,6 +12,7 @@ const {
   Playground,
   Interactive,
   Responsive,
+  WizardNavigation,
 } = composeStories(stories)
 
 test("the sequence is an ordered list with a name", async () => {
@@ -142,3 +143,21 @@ test("a compact card can keep the horizontal ladder below cq-md", async () => {
     ).flexDirection,
   ).toBe("row")
 })
+
+test("wizard stages can be revisited, while upcoming stages cannot be skipped", async () => {
+  const { canvas, canvasElement } = await mountStory(
+    WizardNavigation,
+  )
+  await expect(
+    canvas.queryByRole("button", { name: "File" }),
+  ).toBeNull()
+  await userEvent.click(
+    canvas.getByRole("button", { name: "Rip" }),
+  )
+  await expect(
+    canvas.getByRole("heading", {
+      name: /Rip In progress/,
+    }),
+  ).toBeVisible()
+  await expectNoAxeViolations(canvasElement)
+})

package/src/Stepper/Stepper.tsx

@@ -1,6 +1,7 @@
 import { FLIP_KEY_ATTRIBUTE } from "@charcuterie/logic"
 import type { ReactNode } from "react"
 
+import { Button } from "../Button/Button.tsx"
 import { toClassName } from "../toClassName.ts"
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.tsx"
 
@@ -72,6 +73,8 @@ export type StepperProps = {
    * vertical — a column cannot hold a list.
    */
   readonly orientation?: StepperOrientation
+  /** Completed stages become buttons; the caller resets dependent answers. */
+  readonly onStepSelect?: (key: string) => void
   readonly steps: readonly Step[]
 }
 
@@ -114,6 +117,7 @@ export const Stepper = ({
   isResponsive = true,
   label,
   orientation = "vertical",
+  onStepSelect,
   steps,
 }: StepperProps) => {
   const Heading = `h${headingLevel}` as "h3"
@@ -174,6 +178,9 @@ export const Stepper = ({
              * nobody reads it, which is why it is not opt-in.
              */
             <li
+              aria-current={
+                status === "current" ? "step" : undefined
+              }
               {...{ [FLIP_KEY_ATTRIBUTE]: step.key }}
               className={toClassName(
                 "relative grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)] gap-x-3",
@@ -254,7 +261,16 @@ export const Stepper = ({
                     isCompact ? "text-xs" : "text-md",
                   )}
                 >
-                  {step.label}
+                  {onStepSelect && status === "done" ? (
+                    <Button
+                      appearance="ghost"
+                      onClick={() => onStepSelect(step.key)}
+                    >
+                      {step.label}
+                    </Button>
+                  ) : (
+                    step.label
+                  )}
 
                   {/* The status as a WORD. Four marker colours is
                     four colours as far as assistive technology is

package/src/sourceRules.test.ts

@@ -700,6 +700,33 @@ const ENTRY_POINT_RUNTIMES: Record<
     // into `core` — which is why `ColorSchemeApplier` lives in the
     // core rather than beside the hook, so this entry never pulls
     // `react`.
+    "./charts": [
+      "@tanstack/charts",
+      "@tanstack/charts/scales/band",
+      "@tanstack/charts/scales/linear",
+      "@tanstack/charts/svg",
+    ],
+    "./charts/preact": [
+      "@tanstack/charts",
+      "@tanstack/charts/adapter/renderer",
+      "@tanstack/charts/motion",
+      "@tanstack/charts/scales/band",
+      "@tanstack/charts/scales/linear",
+      "@tanstack/charts/svg/renderer",
+      "@tanstack/charts/tooltip",
+      "preact",
+      "preact/hooks",
+    ],
+    "./charts/react": [
+      "@tanstack/charts",
+      "@tanstack/charts/motion",
+      "@tanstack/charts/react/core",
+      "@tanstack/charts/scales/band",
+      "@tanstack/charts/scales/linear",
+      "@tanstack/charts/svg/renderer",
+      "@tanstack/charts/tooltip",
+      "react",
+    ],
     "./browser": [],
     "./core": [],
     "./jotai": ["jotai"],
@@ -733,6 +760,7 @@ const ENTRY_POINT_RUNTIMES: Record<
       // browser, and it does so through this subpath so the coupling
       // is named rather than smuggled in through the main entry.
       "@charcuterie/logic/browser",
+      "@charcuterie/logic/charts/react",
       "@charcuterie/logic/core",
       "@charcuterie/tokens",
       "@floating-ui/react",