@ashley-shrok/viewmodel-shell 4.1.0 → 5.0.0

package/agent-skill.md

@@ -156,15 +156,24 @@ File uploads use the multipart form above. One form entry per file input, keyed
 A `ChartNode` in the `vm` tree carries bounded, agent-legible declared data — it is read-only structured data like any other node, with no dispatch-bearing fields of its own:
 
 ```json
-{ "type": "chart", "kind": "bar", "title": "Weekly visits",
-  "points": [ { "label": "Mon", "value": 12 }, { "label": "Tue", "value": 19 } ],
-  "tone": "info" }
+{ "type": "chart", "title": "Weekly visits",
+  "labels": [ "Mon", "Tue", "Wed" ],
+  "series": [
+    { "name": "Visits", "data": [ 12, 19, 7 ] },
+    { "name": "Errors", "data": [ 1, 3, 2 ], "tone": "danger" }
+  ],
+  "stacked": true }
 ```
 
-- `kind` — optional. Omitted means `"bar"`, the only value in `viewmodel-shell/1.0`.
-- `points` — an array of self-contained `{label, value}` pairs. No parallel-array index alignment is needed (unlike some other frameworks' chart data shapes) — read each point directly.
+(`kind` is omitted above, so this renders as the default `"bar"`, grouped→stacked via `stacked:true`.)
+
+- `kind` — optional, a closed union: `bar | line | area | pie | donut`. Omitted means `"bar"`. Widened additively over time — key off the value you see, never assume a fixed set.
+- `labels` — the shared category (x-)axis. `labels[i]` is the category every series' `data[i]` refers to.
+- `series` — one or more `{ name, data, tone? }` entries over the shared `labels`. `data[i]` aligns by index to `labels[i]`. A single-series chart is just one entry in this array — there is no separate "simple" shape. `name` is the series label (rendered in a browser legend); a wire-driving agent reads it to identify which series is which.
+- `series[].tone` — optional (`danger|warning|success|info`), set PER SERIES. When present, that series is drawn in the theme's semantic color instead of the next categorical palette slot (a loss/error series tagged `danger`, for example). Omitted → the browser client assigns the next palette slot; this only affects rendered COLOR. A wire-driving agent with no renderer can simply read `series[].data`/`name`/`labels`/`title` directly and ignore `tone`.
+- `stacked` — optional boolean, applies to `bar`/`area` only (ignored for `line`/`pie`/`donut`). Omitted/`false` means series are grouped side-by-side; `true` stacks them.
 - `title` — optional chart title.
-- `tone` — optional (`danger|warning|success|info`). This only affects rendered COLOR in a browser client. A wire-driving agent with no renderer can simply read `points`/`title` directly and ignore `tone`.
+- **pie/donut note:** these kinds are single-series — only `series[0]` is rendered (per-slice palette), any additional entries are ignored by the renderer. Not shown in the example above.
 
 There is nothing else to do to "drive" a chart over the wire.
 

package/dist/browser.d.ts

@@ -72,30 +72,32 @@ export declare class BrowserAdapter implements Adapter {
      */
     private fits;
     /**
-     * ChartNode (CHART-01/02/03/04) — a single-series BAR chart drawn by Chart.js,
-     * loaded as a PRIVATE, LAZY, OPTIONAL adapter dependency: the dynamic
-     * `import("chart.js")` in loadChart() is reached ONLY when a ChartNode renders,
-     * and it registers ONLY the bar pieces so the bundle tree-shakes (an app that
-     * renders no chart loads zero chart.js bytes; the core + .NET/bun backends gain
-     * no dependency). tone→theme-token color (CHART-02) is read via getComputedStyle
-     * — NO raw CSS crosses the wire.
+     * ChartNode (CHARTBASE-02/03) — the multi-series base set (bar/line/area/
+     * pie/donut) drawn by Chart.js, loaded as a PRIVATE, LAZY, OPTIONAL adapter
+     * dependency: the dynamic `import("chart.js")` in loadChart() is reached
+     * ONLY when a ChartNode renders, and it registers the base-set pieces so an
+     * app that renders no chart loads zero chart.js bytes (the core + .NET/bun
+     * backends gain no dependency). Every color is read via getComputedStyle
+     * from the `--vms-chart-1..8` categorical palette (18-02) or, when a series
+     * carries a `tone`, from the theme's tone token — NO raw CSS crosses the wire.
      *
      * The canvas + Chart instance are keyed by a stable per-render ordinal and kept
      * in `chartInstances` ACROSS renders, so a re-render with changed data reuses
      * the SAME canvas (detached, not destroyed, by render()'s innerHTML wipe — its
-     * 2D context + bitmap survive) and redraws IN PLACE via `.update()` (CHART-03)
-     * rather than reconstructing. render() mark-sweeps + destroy()s any instance the
-     * new tree dropped (leak prevention). getComputedStyle / canvas / Chart.js live
-     * ONLY here in browser.ts — the core (index.ts) stays platform-agnostic.
+     * 2D context + bitmap survive) and redraws IN PLACE via `.update()` rather than
+     * reconstructing. render() mark-sweeps + destroy()s any instance the new tree
+     * dropped (leak prevention). getComputedStyle / canvas / Chart.js live ONLY
+     * here in browser.ts — the core (index.ts) stays platform-agnostic.
      */
     private chart;
     /**
      * Lazily import chart.js and construct the Chart for `key`. The dynamic import
-     * is what keeps chart.js zero-bytes-when-absent; registering ONLY the bar
-     * controller/elements/scales/tooltip is what keeps CHART-04 small (tree-shaken).
-     * Fire-and-forget from chart() (`void this.loadChart(...)`), so a missing
-     * dependency is surfaced through the fail-loud seam (chartFailLoud), NEVER a
-     * floating unhandled rejection.
+     * is what keeps chart.js zero-bytes-when-absent; registering the base-set
+     * controllers/elements/scales/plugins (bar, line+fill, pie/doughnut, plus the
+     * shared category/linear scales, tooltip, and legend) covers every kind the
+     * widened chart() config can construct. Fire-and-forget from chart()
+     * (`void this.loadChart(...)`), so a missing dependency is surfaced through the
+     * fail-loud seam (chartFailLoud), NEVER a floating unhandled rejection.
      */
     private loadChart;
     /**

package/dist/browser.js

@@ -481,21 +481,22 @@ export class BrowserAdapter {
         this.fitsObservers.push(ro);
     }
     /**
-     * ChartNode (CHART-01/02/03/04) — a single-series BAR chart drawn by Chart.js,
-     * loaded as a PRIVATE, LAZY, OPTIONAL adapter dependency: the dynamic
-     * `import("chart.js")` in loadChart() is reached ONLY when a ChartNode renders,
-     * and it registers ONLY the bar pieces so the bundle tree-shakes (an app that
-     * renders no chart loads zero chart.js bytes; the core + .NET/bun backends gain
-     * no dependency). tone→theme-token color (CHART-02) is read via getComputedStyle
-     * — NO raw CSS crosses the wire.
+     * ChartNode (CHARTBASE-02/03) — the multi-series base set (bar/line/area/
+     * pie/donut) drawn by Chart.js, loaded as a PRIVATE, LAZY, OPTIONAL adapter
+     * dependency: the dynamic `import("chart.js")` in loadChart() is reached
+     * ONLY when a ChartNode renders, and it registers the base-set pieces so an
+     * app that renders no chart loads zero chart.js bytes (the core + .NET/bun
+     * backends gain no dependency). Every color is read via getComputedStyle
+     * from the `--vms-chart-1..8` categorical palette (18-02) or, when a series
+     * carries a `tone`, from the theme's tone token — NO raw CSS crosses the wire.
      *
      * The canvas + Chart instance are keyed by a stable per-render ordinal and kept
      * in `chartInstances` ACROSS renders, so a re-render with changed data reuses
      * the SAME canvas (detached, not destroyed, by render()'s innerHTML wipe — its
-     * 2D context + bitmap survive) and redraws IN PLACE via `.update()` (CHART-03)
-     * rather than reconstructing. render() mark-sweeps + destroy()s any instance the
-     * new tree dropped (leak prevention). getComputedStyle / canvas / Chart.js live
-     * ONLY here in browser.ts — the core (index.ts) stays platform-agnostic.
+     * 2D context + bitmap survive) and redraws IN PLACE via `.update()` rather than
+     * reconstructing. render() mark-sweeps + destroy()s any instance the new tree
+     * dropped (leak prevention). getComputedStyle / canvas / Chart.js live ONLY
+     * here in browser.ts — the core (index.ts) stays platform-agnostic.
      */
     chart(n, parent) {
         // Stable key: title-derived base disambiguated by a per-render ordinal so
@@ -510,7 +511,8 @@ export class BrowserAdapter {
         wrapper.className = "vms-chart";
         parent.appendChild(wrapper);
         // tone → theme token, NOT `--vms-${tone}`: `danger` maps to `--vms-error`
-        // (matching .vms-section--danger); omitted → the neutral `--vms-accent`.
+        // (matching .vms-section--danger). Used ONLY when a series declares a
+        // `tone` — otherwise a series/slice gets the next categorical palette slot.
         const toneToken = {
             danger: "--vms-error",
             warning: "--vms-warning",
@@ -518,37 +520,90 @@ export class BrowserAdapter {
             info: "--vms-info",
         };
         const cs = getComputedStyle(this.container);
-        const token = (n.tone && toneToken[n.tone]) || "--vms-accent";
-        const color = cs.getPropertyValue(token).trim();
-        // Grid/tick/axis colors track the theme so the chart reads consistently in
-        // light AND dark. Chart.js's default grid is a FIXED faint-black
-        // (rgba(0,0,0,0.1)) — visible on a light background but ~invisible on a dark
-        // one — so wire the grid + axis border to `--vms-border` (subtle in every
-        // theme) and the tick labels to `--vms-text-muted`.
+        // Categorical palette slot i (0-based) → --vms-chart-1..8, cycling. Falls
+        // back to --vms-accent (the pre-reshape safety net) when a consumer's
+        // custom theme (built via the sanctioned --vms-* override seam) predates
+        // this phase and doesn't define the chart tokens — every SHIPPED theme
+        // does, so this only matters for external reskins.
+        const paletteColor = (i) => cs.getPropertyValue(`--vms-chart-${(i % 8) + 1}`).trim() || cs.getPropertyValue("--vms-accent").trim();
+        // A series' resolved color: its tone token if set, else the next palette slot.
+        const seriesColor = (i, tone) => (tone && toneToken[tone]) ? cs.getPropertyValue(toneToken[tone]).trim() : paletteColor(i);
+        // Grid/tick/axis/text colors track the theme so the chart reads consistently
+        // in light AND dark. Chart.js's defaults are FIXED near-black — its grid is
+        // rgba(0,0,0,0.1) and its text (legend labels + title) is #666 — visible on a
+        // light background but low-contrast/~invisible on a dark one. So wire the grid
+        // + axis border to `--vms-border` (subtle in every theme), the tick labels
+        // (secondary) to `--vms-text-muted`, and the legend labels + title (the text
+        // that NAMES the series/chart — primary information) to the full-contrast
+        // `--vms-text` so they read prominently, not washed out.
         const gridColor = cs.getPropertyValue("--vms-border").trim();
         const tickColor = cs.getPropertyValue("--vms-text-muted").trim();
+        const textColor = cs.getPropertyValue("--vms-text").trim();
         const scaleOpts = {
             grid: { color: gridColor },
             border: { color: gridColor },
             ticks: { color: tickColor },
         };
+        const kind = n.kind ?? "bar";
+        const isPie = kind === "pie" || kind === "donut";
+        let type;
+        let datasets;
+        if (isPie) {
+            // pie/donut are single-series (LOCKED design): render series[0] only,
+            // colored PER SLICE from the palette (tone is a per-series concept and
+            // doesn't apply to a per-slice pie). Extra series are lenient — one dev
+            // warning, series[0] still renders — never a crash. Gated to the FIRST
+            // render of this chart key (chartInstances doesn't have it yet) so a
+            // mis-shaped pie/donut in a polling view warns once, not once per poll.
+            if (n.series.length > 1 && !this.chartInstances.has(key)) {
+                console.warn(`[ViewModelShell] ChartNode kind "${kind}" renders a single series; ` +
+                    `${n.series.length - 1} extra series ignored.`);
+            }
+            const primary = n.series[0];
+            type = kind === "donut" ? "doughnut" : "pie";
+            datasets = [{
+                    data: primary ? primary.data : [],
+                    backgroundColor: n.labels.map((_, j) => paletteColor(j)),
+                }];
+        }
+        else {
+            // bar/line/area — one dataset per series, sharing the `labels` x-axis.
+            type = (kind === "line" || kind === "area") ? "line" : "bar";
+            datasets = n.series.map((s, i) => {
+                const color = seriesColor(i, s.tone);
+                const dataset = {
+                    label: s.name,
+                    data: s.data,
+                    backgroundColor: color,
+                    borderColor: color,
+                };
+                if (kind === "line" || kind === "area") {
+                    // area = line + fill; the fill is token-derived (same resolved color
+                    // as the stroke) — no raw color literal introduced for the fill.
+                    dataset.fill = kind === "area";
+                }
+                return dataset;
+            });
+        }
+        // `stacked` applies to bar/area only (LOCKED design); ignored for line/pie/donut.
+        const stacked = (kind === "bar" || kind === "area") && !!n.stacked;
+        // Legend: multi-series always, OR pie/donut (always multi-slice).
+        const legendDisplay = n.series.length > 1 || isPie;
         const config = {
-            type: "bar",
-            data: {
-                labels: n.points.map(p => p.label),
-                datasets: [{
-                        data: n.points.map(p => p.value),
-                        backgroundColor: color,
-                        borderColor: color,
-                    }],
-            },
+            type,
+            data: { labels: n.labels, datasets },
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
-                scales: { x: scaleOpts, y: scaleOpts },
+                ...(isPie ? {} : {
+                    scales: {
+                        x: { ...scaleOpts, stacked },
+                        y: { ...scaleOpts, stacked },
+                    },
+                }),
                 plugins: {
-                    title: n.title ? { display: true, text: n.title } : { display: false },
-                    legend: { display: false }, // single series — no legend
+                    title: n.title ? { display: true, text: n.title, color: textColor } : { display: false },
+                    legend: { display: legendDisplay, labels: { color: textColor } },
                 },
             },
         };
@@ -558,7 +613,7 @@ export class BrowserAdapter {
             // destroyed) — its 2D context + drawn bitmap survive.
             wrapper.appendChild(existing.canvas);
             if (existing.chart) {
-                // Redraw in place (CHART-03).
+                // Redraw in place (CHARTBASE-03).
                 existing.chart.data = config.data;
                 existing.chart.options = config.options;
                 existing.chart.update();
@@ -578,11 +633,12 @@ export class BrowserAdapter {
     }
     /**
      * Lazily import chart.js and construct the Chart for `key`. The dynamic import
-     * is what keeps chart.js zero-bytes-when-absent; registering ONLY the bar
-     * controller/elements/scales/tooltip is what keeps CHART-04 small (tree-shaken).
-     * Fire-and-forget from chart() (`void this.loadChart(...)`), so a missing
-     * dependency is surfaced through the fail-loud seam (chartFailLoud), NEVER a
-     * floating unhandled rejection.
+     * is what keeps chart.js zero-bytes-when-absent; registering the base-set
+     * controllers/elements/scales/plugins (bar, line+fill, pie/doughnut, plus the
+     * shared category/linear scales, tooltip, and legend) covers every kind the
+     * widened chart() config can construct. Fire-and-forget from chart()
+     * (`void this.loadChart(...)`), so a missing dependency is surfaced through the
+     * fail-loud seam (chartFailLoud), NEVER a floating unhandled rejection.
      */
     async loadChart(key, config) {
         let mod;
@@ -594,9 +650,10 @@ export class BrowserAdapter {
                 "installed. Run: npm install chart.js");
             return;
         }
-        const { Chart, BarController, BarElement, CategoryScale, LinearScale, Tooltip } = mod;
-        // Tree-shaken registration — ONLY the bar pieces.
-        Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip);
+        const { Chart, BarController, BarElement, LineController, LineElement, PointElement, Filler, PieController, DoughnutController, ArcElement, CategoryScale, LinearScale, Tooltip, Legend, } = mod;
+        // Base-set registration — bar, line/area (+ Filler for the area fill),
+        // pie/donut (+ Arc element), the shared scales, tooltip, and the legend.
+        Chart.register(BarController, BarElement, LineController, LineElement, PointElement, Filler, PieController, DoughnutController, ArcElement, CategoryScale, LinearScale, Tooltip, Legend);
         const entry = this.chartInstances.get(key);
         // A later render may have mark-swept this key before the import resolved.
         if (!entry)
@@ -1225,6 +1282,13 @@ export class BrowserAdapter {
             // attribute was cleared out-of-band.)
             if (n.disabled)
                 return;
+            // confirm: a destructive-action guard. Show the NATIVE browser confirm
+            // BEFORE any pendingLabel swap or dispatch; Cancel suppresses everything
+            // (no dispatch, no visual change). Native by design — zero app/framework
+            // state, and it's a client-only human affordance (an agent never reaches
+            // this click handler; it dispatches the action directly over the wire).
+            if (n.confirm && !window.confirm(n.confirm))
+                return;
             // pendingLabel: instant client-side feedback. Swap text + add
             // .vms-button--pending BEFORE handing off to the dispatcher. On
             // success the next render replaces the button entirely. On dispatch
@@ -1614,6 +1678,49 @@ export class BrowserAdapter {
             const prevDisabled = pg.page <= 1 || pg.prevAction == null;
             const nextDisabled = pg.page >= totalPages || pg.nextAction == null;
             footer.appendChild(mkBtn("‹ Prev", pg.page - 1, pg.prevAction, prevDisabled));
+            if (pg.jumpAction) {
+                const jumpAction = pg.jumpAction;
+                const jump = document.createElement("span");
+                jump.className = "vms-table__pagination-jump";
+                const label = document.createElement("span");
+                label.className = "vms-table__pagination-jump-label";
+                label.textContent = "Page";
+                jump.appendChild(label);
+                const input = document.createElement("input");
+                input.type = "number";
+                input.className = "vms-table__pagination-jump-input";
+                input.min = "1";
+                input.max = String(totalPages);
+                input.inputMode = "numeric";
+                input.setAttribute("aria-label", "Page number");
+                input.value = String(pg.page);
+                jump.appendChild(input);
+                const ofLabel = document.createElement("span");
+                ofLabel.className = "vms-table__pagination-jump-label";
+                ofLabel.textContent = `of ${totalPages}`;
+                jump.appendChild(ofLabel);
+                const submitJump = () => {
+                    const parsed = Number.parseInt(input.value.trim(), 10);
+                    if (!Number.isFinite(parsed))
+                        return;
+                    const clamped = Math.min(Math.max(parsed, 1), totalPages);
+                    input.value = String(clamped);
+                    if (paginationBind != null)
+                        this.sa.write(paginationBind, clamped);
+                    on(jumpAction);
+                };
+                const goBtn = document.createElement("button");
+                goBtn.type = "button";
+                goBtn.className = "vms-button vms-button--secondary vms-table__pagination-btn";
+                goBtn.textContent = "Go";
+                goBtn.addEventListener("click", submitJump);
+                input.addEventListener("keydown", (e) => {
+                    if (e.key === "Enter")
+                        submitJump();
+                });
+                jump.appendChild(goBtn);
+                footer.appendChild(jump);
+            }
             footer.appendChild(mkBtn("Next ›", pg.page + 1, pg.nextAction, nextDisabled));
             wrapper.appendChild(footer);
         }

package/dist/index.d.ts

@@ -384,6 +384,18 @@ export interface ButtonNode {
      *  while in this state so the button visibly disables (cursor + opacity).
      *  Omitted = no pending feedback (existing instant-click behavior). */
     pendingLabel?: string;
+    /** Optional confirmation question for a destructive/irreversible action
+     *  (delete, reset, archive). When set, the BrowserAdapter shows a NATIVE
+     *  browser confirm dialog with this message on click; the action dispatches
+     *  only if the user accepts, and Cancel suppresses it entirely (no dispatch,
+     *  no pendingLabel swap). Deliberately NATIVE, not a framework-drawn dialog:
+     *  it adds ZERO app or framework state (no modal in the tree, nothing to
+     *  round-trip or tear down) and its OS-native, deliberately-jarring look
+     *  reinforces "this one is serious — stop." It is a CLIENT-ONLY human
+     *  affordance: an agent dispatches the action directly over the wire and is
+     *  never gated by it (the confirm exists only at browser render time). The
+     *  TUI has no confirm() and dispatches as normal. Omitted = instant dispatch. */
+    confirm?: string;
 }
 export interface TextNode {
     type: "text";
@@ -504,6 +516,11 @@ export interface TablePagination {
     /** Dispatched on the next page-control click. Carries an action name only —
      *  the renderer writes the target page to TableNode.paginationBind before dispatch. */
     nextAction?: ActionEvent;
+    /** Dispatched when the user submits a typed target page via the jump-to-page
+     *  control's Go button or Enter key. The renderer clamps the typed value into
+     *  [1, totalPages] before writing it to TableNode.paginationBind and dispatching —
+     *  same mechanism as prevAction/nextAction. Omitted = no jump control renders. */
+    jumpAction?: ActionEvent;
 }
 export interface TableNode {
     type: "table";
@@ -649,30 +666,34 @@ export interface FitsNode {
      *  guaranteed-fits fallback rendered when none fit. */
     children: ViewNode[];
 }
-export interface ChartPoint {
-    /** Category label (x-axis tick). */
-    label: string;
-    /** Numeric magnitude (bar height). */
-    value: number;
+export interface ChartSeries {
+    /** Series name — rendered in the legend and read by agents to identify the series. */
+    name: string;
+    /** Values aligned by index to the chart's `labels`: data[i] is the value at labels[i]. */
+    data: number[];
+    /** OPTIONAL semantic tone from the existing closed tone axis. When set, this series is
+     *  drawn in the theme's tone token (danger→--vms-error, etc.) instead of the next
+     *  categorical-palette slot. For MEANING (a loss series → danger), not decoration.
+     *  Omitted → framework assigns the next --vms-chart-N slot. NO raw color crosses the wire. */
+    tone?: "danger" | "warning" | "success" | "info";
 }
 export interface ChartNode {
     type: "chart";
-    /** Chart type. CLOSED union; OMITTED = "bar". "bar" is the only value in v4.1;
-     *  `line` is an ADDITIVE future value (CHART-LINE), NOT a new node — so
-     *  consumers/agents key off `kind`, and a later milestone widens the union
-     *  without a wire break. The renderer treats an absent `kind` as "bar". */
-    kind?: "bar";
-    /** Ordered category→value data. Each point is a SELF-CONTAINED {label, value}
-     *  pair (mirroring StatItem) so an agent reads the series DIRECTLY with no
-     *  parallel-array index alignment. Bars render in array order. */
-    points: ChartPoint[];
+    /** Chart type. CLOSED union; OMITTED = "bar". Widened additively later (e.g. scatter) —
+     *  consumers/agents key off `kind`, never assume a fixed set. The renderer treats an
+     *  absent `kind` as "bar". */
+    kind?: "bar" | "line" | "area" | "pie" | "donut";
+    /** Shared category axis. labels[i] is the category for every series' data[i]. */
+    labels: string[];
+    /** One or more series over the shared `labels`. Single-series charts are just one entry.
+     *  Multi-series charts share ONE x-axis (labels) — this is the honest encoding of that
+     *  shared axis, and the shape every charting library uses. */
+    series: ChartSeries[];
+    /** bar/area only: stack series instead of grouping side-by-side. Omitted/false = grouped
+     *  (ignored for line/pie/donut). */
+    stacked?: boolean;
     /** Optional chart title rendered above the plot. */
     title?: string;
-    /** Optional appearance tone from the existing tone axis, mapped to the theme's
-     *  --vms-* tone tokens (danger→--vms-error, warning→--vms-warning,
-     *  success→--vms-success, info→--vms-info; omitted → --vms-accent). NO raw
-     *  color/CSS crosses the wire (D3) — only the closed tone token. */
-    tone?: "danger" | "warning" | "success" | "info";
 }
 export interface ShellOptions {
     endpoint: string;

package/dist/server.js

@@ -153,6 +153,9 @@ function collectActions(node, enclosingForm, out) {
             if (table.pagination?.nextAction) {
                 recordAction(table.pagination.nextAction, enclosingForm, out);
             }
+            if (table.pagination?.jumpAction) {
+                recordAction(table.pagination.jumpAction, enclosingForm, out);
+            }
             for (const row of table.rows) {
                 if (row.actions) {
                     // row.actions is ViewNode[] — it can include bind-only nodes (e.g. a

package/dist/tui.js

@@ -1102,24 +1102,47 @@ function StatBarView({ node }) {
     return (_jsx("box", { flexDirection: "row", gap: 1, children: node.stats.map((s, i) => (_jsxs("box", { flexDirection: "row", gap: 1, children: [i > 0 ? _jsx("text", { fg: "#555555", children: "\u2502" }) : null, _jsx("text", { fg: "#888888", children: s.label }), _jsx("text", { children: String(s.value) })] }, i))) }));
 }
 // ── chart ─────────────────────────────────────────────────────────────────
-// CHART-05 — DELIBERATE degradation. A terminal has no canvas, but a ChartNode
-// is STRUCTURED data, so it prints as a legible label/value/ASCII-bar series:
-// the title (if any) on its own line, then per point `<label padded>  <value>
-// <bar>` where <bar> is a run of "█" scaled to value/max × CHART_BAR_WIDTH.
-// Empty points render just the title (or nothing); an all-zero / non-positive
-// max renders labels+values with no bars (guarded, never throws / divides).
-// The TUI is @experimental; the requirement is only that ChartNode does not
-// break it and degrades legibly. ChartNode is a LEAF (no children) → no
+// CHARTBASE-05 — DELIBERATE degradation for the reshaped multi-series
+// ChartNode { kind?; labels: string[]; series: ChartSeries[]; stacked?;
+// title? }. A terminal has no canvas, but a ChartNode is STRUCTURED data, so
+// it prints legibly: the title (if any) on its own line, then GROUPED BY
+// SERIES — each series' name as a sub-header, followed by one row per label
+// `<label padded>  <value>  <bar>` where <bar> is a run of "█" scaled to
+// value / the GLOBAL max across ALL series (so multi-series bars are
+// comparable to each other, not just within their own series). pie/donut are
+// single-series by design (CHARTBASE-03) — they degrade to printing
+// series[0]'s label/value slices (no bars; a "share of whole" reads oddly as
+// a bar anyway). Empty series / empty labels / an all-zero or non-positive
+// max render names/labels/values with no bars — every division is guarded by
+// `maxValue > 0`, and the resulting length is additionally clamped to >= 0
+// before `.repeat()`, since an individual value can be negative even while
+// the GLOBAL max (across all series) is positive (e.g. a "Net" series with
+// mixed-sign entries) — never throws. ChartNode is a LEAF (no children) → no
 // container-walk arm is needed (mirrors StatBarView / ProgressView).
 const CHART_BAR_WIDTH = 20;
 function ChartView({ node }) {
-    const points = node.points ?? [];
-    const maxValue = points.length ? Math.max(0, ...points.map((p) => p.value)) : 0;
-    const labelWidth = points.reduce((w, p) => Math.max(w, p.label.length), 0);
-    return (_jsxs("box", { flexDirection: "column", children: [node.title ? _jsx("text", { attributes: 1 /* BOLD */, children: node.title }) : null, points.map((p, i) => {
-                const barLen = maxValue > 0 ? Math.round((p.value / maxValue) * CHART_BAR_WIDTH) : 0;
-                return (_jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: "#888888", children: p.label.padEnd(labelWidth) }), _jsx("text", { children: String(p.value).padStart(4) }), _jsx("text", { fg: "#4a9eff", children: "█".repeat(barLen) })] }, i));
-            })] }));
+    const labels = node.labels ?? [];
+    const series = node.series ?? [];
+    const labelWidth = labels.reduce((w, l) => Math.max(w, l.length), 0);
+    const isPie = node.kind === "pie" || node.kind === "donut";
+    if (isPie) {
+        // Single-series degrade: series[0]'s slices as label/value rows.
+        const slice = series[0];
+        const data = slice?.data ?? [];
+        return (_jsxs("box", { flexDirection: "column", children: [node.title ? _jsx("text", { attributes: 1 /* BOLD */, children: node.title }) : null, slice ? _jsx("text", { attributes: 1 /* BOLD */, fg: "#888888", children: slice.name }) : null, labels.map((label, i) => (_jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: "#888888", children: label.padEnd(labelWidth) }), _jsx("text", { children: String(data[i] ?? 0) })] }, i)))] }));
+    }
+    // bar/line/area: scale every series' bars against the GLOBAL max so
+    // multiple series are visually comparable to one another.
+    const allValues = series.flatMap((s) => s.data ?? []);
+    const maxValue = allValues.length ? Math.max(0, ...allValues) : 0;
+    return (_jsxs("box", { flexDirection: "column", children: [node.title ? _jsx("text", { attributes: 1 /* BOLD */, children: node.title }) : null, series.map((s, si) => (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { attributes: 1 /* BOLD */, children: s.name }), labels.map((label, li) => {
+                        const value = s.data?.[li] ?? 0;
+                        // Clamped to >= 0: `value` can be negative even while `maxValue`
+                        // (the global max across ALL series) is positive — an unclamped
+                        // negative length would throw on "█".repeat() below.
+                        const barLen = maxValue > 0 ? Math.max(0, Math.round((value / maxValue) * CHART_BAR_WIDTH)) : 0;
+                        return (_jsxs("box", { flexDirection: "row", gap: 1, children: [_jsx("text", { fg: "#888888", children: label.padEnd(labelWidth) }), _jsx("text", { children: String(value).padStart(4) }), _jsx("text", { fg: "#4a9eff", children: "█".repeat(barLen) })] }, li));
+                    })] }, si)))] }));
 }
 // ── modal ─────────────────────────────────────────────────────────────────
 // Modals are PORTALED to app-root by App (see findModal + ModalOverlay).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic \u2014 a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
   "type": "module",
   "license": "MIT",

package/styles/default.css

@@ -32,6 +32,22 @@
   --vms-priority-high: #d76410;
   --vms-success:       #2da359;
   --vms-info:          #2277dd;
+  /* Chart palette (CHARTBASE-02) — 8-slot categorical palette the browser
+     adapter cycles per series (per slice for pie/donut). Framework-owned,
+     theme-token-driven: zero raw color crosses the wire. Every theme file
+     re-tunes these 8 for its own surface/bg (light themes get this set;
+     dark themes get a lighter/more-saturated set — see styles/themes/*.css).
+     Hand-checked (not CI-gated — check:aa-contrast covers a fixed pair-set
+     by design) for ~3:1 non-text contrast against --vms-surface/--vms-bg
+     and mutual distinguishability; see 18-02-SUMMARY.md for the ratio table. */
+  --vms-chart-1: #3366cc;
+  --vms-chart-2: #cc6b1c;
+  --vms-chart-3: #1f8a5f;
+  --vms-chart-4: #b3314d;
+  --vms-chart-5: #7a4fc9;
+  --vms-chart-6: #1f8fa3;
+  --vms-chart-7: #767a1f;
+  --vms-chart-8: #c23fa0;
   --vms-radius:      10px;
   --vms-radius-sm:   6px;
   --vms-image-small:   4rem;
@@ -963,9 +979,13 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
    hairline. Buttons reuse .vms-button styling; only sizing/disabled is added. */
 .vms-table__pagination {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--vms-space-sm);
-  padding-top: var(--vms-space-sm);
+  /* Inset to match the cell padding (space-md horizontal) so the footer content
+     aligns with the table cells above it, with breathing room below; the
+     border-top hairline still spans the full width. */
+  padding: var(--vms-space-sm) var(--vms-space-md);
   margin-top: var(--vms-space-xs);
   border-top: 1px solid var(--vms-border);
 }
@@ -973,6 +993,26 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
 .vms-table__pagination-btn { padding: var(--vms-space-xs) var(--vms-space-sm); font-size: var(--vms-text-sm); }
 .vms-table__pagination-btn:disabled { opacity: 0.45; cursor: default; }
 
+/* Jump-to-page control — "Page [ N ] of TOTAL  Go", inserted between Prev/Next. */
+.vms-table__pagination-jump { display: flex; align-items: center; gap: var(--vms-space-xs); }
+.vms-table__pagination-jump-label { color: var(--vms-text-muted); font-size: var(--vms-text-sm); white-space: nowrap; }
+.vms-table__pagination-jump-input {
+  width: 3.5em;
+  text-align: center;
+  background: var(--vms-surface);
+  border: 1px solid var(--vms-border);
+  border-radius: var(--vms-radius);
+  color: var(--vms-text);
+  font-family: var(--vms-font-body);
+  font-size: var(--vms-text-sm);
+  padding: var(--vms-space-xs);
+  color-scheme: var(--vms-color-scheme);
+}
+.vms-table__pagination-jump-input:focus {
+  border-color: var(--vms-accent);
+  outline: none;
+}
+
 /* 0.16.0 — `.vms-busy` is applied by BrowserAdapter when the shell is in a
    busy state (a user-initiated dispatch is in flight OR the server returned
    ShellResponse.busy: true). cursor: wait communicates the state; pointer-

package/styles/themes/dark-amber.css

@@ -23,5 +23,14 @@
   --vms-priority-high: #e07015;
   --vms-success:       #4dd17a;
   --vms-info:          #4a9eff;
+  /* Chart palette (CHARTBASE-02) — same dark-family palette as dark-purple.css. */
+  --vms-chart-1: #6fa8ff;
+  --vms-chart-2: #ffa552;
+  --vms-chart-3: #5ed19a;
+  --vms-chart-4: #ff7a90;
+  --vms-chart-5: #b79bfa;
+  --vms-chart-6: #5cd6e8;
+  --vms-chart-7: #d0d661;
+  --vms-chart-8: #ef8fd6;
   --vms-color-scheme: dark;
 }

package/styles/themes/dark-blue.css

@@ -23,5 +23,14 @@
   --vms-priority-high: #e07015;
   --vms-success:       #4dd17a;
   --vms-info:          #4a9eff;
+  /* Chart palette (CHARTBASE-02) — same dark-family palette as dark-purple.css. */
+  --vms-chart-1: #6fa8ff;
+  --vms-chart-2: #ffa552;
+  --vms-chart-3: #5ed19a;
+  --vms-chart-4: #ff7a90;
+  --vms-chart-5: #b79bfa;
+  --vms-chart-6: #5cd6e8;
+  --vms-chart-7: #d0d661;
+  --vms-chart-8: #ef8fd6;
   --vms-color-scheme: dark;
 }

package/styles/themes/dark-green.css

@@ -23,5 +23,14 @@
   --vms-priority-high: #e07015;
   --vms-success:       #4dd17a;
   --vms-info:          #4a9eff;
+  /* Chart palette (CHARTBASE-02) — same dark-family palette as dark-purple.css. */
+  --vms-chart-1: #6fa8ff;
+  --vms-chart-2: #ffa552;
+  --vms-chart-3: #5ed19a;
+  --vms-chart-4: #ff7a90;
+  --vms-chart-5: #b79bfa;
+  --vms-chart-6: #5cd6e8;
+  --vms-chart-7: #d0d661;
+  --vms-chart-8: #ef8fd6;
   --vms-color-scheme: dark;
 }

package/styles/themes/dark-purple.css

@@ -20,5 +20,16 @@
   --vms-priority-high: #e07015;
   --vms-success:       #4dd17a;
   --vms-info:          #4a9eff;
+  /* Chart palette (CHARTBASE-02) — added on top of the byte-exact prior-default
+     capture (D-02); check-theme-byte-identity.mjs allows exactly this 8-token
+     addition alongside the frozen color block, see its comments. */
+  --vms-chart-1: #6fa8ff;
+  --vms-chart-2: #ffa552;
+  --vms-chart-3: #5ed19a;
+  --vms-chart-4: #ff7a90;
+  --vms-chart-5: #b79bfa;
+  --vms-chart-6: #5cd6e8;
+  --vms-chart-7: #d0d661;
+  --vms-chart-8: #ef8fd6;
   --vms-color-scheme: dark;
 }

package/styles/themes/dark-rose.css

@@ -23,5 +23,14 @@
   --vms-priority-high: #e07015;
   --vms-success:       #4dd17a;
   --vms-info:          #4a9eff;
+  /* Chart palette (CHARTBASE-02) — same dark-family palette as dark-purple.css. */
+  --vms-chart-1: #6fa8ff;
+  --vms-chart-2: #ffa552;
+  --vms-chart-3: #5ed19a;
+  --vms-chart-4: #ff7a90;
+  --vms-chart-5: #b79bfa;
+  --vms-chart-6: #5cd6e8;
+  --vms-chart-7: #d0d661;
+  --vms-chart-8: #ef8fd6;
   --vms-color-scheme: dark;
 }

package/styles/themes/dark-teal.css

@@ -23,5 +23,14 @@
   --vms-priority-high: #e07015;
   --vms-success:       #4dd17a;
   --vms-info:          #4a9eff;
+  /* Chart palette (CHARTBASE-02) — same dark-family palette as dark-purple.css. */
+  --vms-chart-1: #6fa8ff;
+  --vms-chart-2: #ffa552;
+  --vms-chart-3: #5ed19a;
+  --vms-chart-4: #ff7a90;
+  --vms-chart-5: #b79bfa;
+  --vms-chart-6: #5cd6e8;
+  --vms-chart-7: #d0d661;
+  --vms-chart-8: #ef8fd6;
   --vms-color-scheme: dark;
 }

package/styles/themes/light-amber.css

@@ -17,5 +17,14 @@
   --vms-priority-high:#d76410;
   --vms-success:      #2da359;
   --vms-info:         #2277dd;
+  /* Chart palette (CHARTBASE-02) — same light-family palette as default.css. */
+  --vms-chart-1: #3366cc;
+  --vms-chart-2: #cc6b1c;
+  --vms-chart-3: #1f8a5f;
+  --vms-chart-4: #b3314d;
+  --vms-chart-5: #7a4fc9;
+  --vms-chart-6: #1f8fa3;
+  --vms-chart-7: #767a1f;
+  --vms-chart-8: #c23fa0;
   --vms-color-scheme: light;
 }

package/styles/themes/light-blue.css

@@ -17,5 +17,14 @@
   --vms-priority-high:#d76410;
   --vms-success:      #2da359;
   --vms-info:         #2277dd;
+  /* Chart palette (CHARTBASE-02) — same light-family palette as default.css. */
+  --vms-chart-1: #3366cc;
+  --vms-chart-2: #cc6b1c;
+  --vms-chart-3: #1f8a5f;
+  --vms-chart-4: #b3314d;
+  --vms-chart-5: #7a4fc9;
+  --vms-chart-6: #1f8fa3;
+  --vms-chart-7: #767a1f;
+  --vms-chart-8: #c23fa0;
   --vms-color-scheme: light;
 }

package/styles/themes/light-green.css

@@ -17,5 +17,14 @@
   --vms-priority-high:#d76410;
   --vms-success:      #2da359;
   --vms-info:         #2277dd;
+  /* Chart palette (CHARTBASE-02) — same light-family palette as default.css. */
+  --vms-chart-1: #3366cc;
+  --vms-chart-2: #cc6b1c;
+  --vms-chart-3: #1f8a5f;
+  --vms-chart-4: #b3314d;
+  --vms-chart-5: #7a4fc9;
+  --vms-chart-6: #1f8fa3;
+  --vms-chart-7: #767a1f;
+  --vms-chart-8: #c23fa0;
   --vms-color-scheme: light;
 }

package/styles/themes/light-purple.css

@@ -20,5 +20,14 @@
   --vms-priority-high:#d76410;
   --vms-success:      #2da359;
   --vms-info:         #2277dd;
+  /* Chart palette (CHARTBASE-02) — same light-family palette as default.css. */
+  --vms-chart-1: #3366cc;
+  --vms-chart-2: #cc6b1c;
+  --vms-chart-3: #1f8a5f;
+  --vms-chart-4: #b3314d;
+  --vms-chart-5: #7a4fc9;
+  --vms-chart-6: #1f8fa3;
+  --vms-chart-7: #767a1f;
+  --vms-chart-8: #c23fa0;
   --vms-color-scheme: light;
 }

package/styles/themes/light-rose.css

@@ -17,5 +17,14 @@
   --vms-priority-high:#d76410;
   --vms-success:      #2da359;
   --vms-info:         #2277dd;
+  /* Chart palette (CHARTBASE-02) — same light-family palette as default.css. */
+  --vms-chart-1: #3366cc;
+  --vms-chart-2: #cc6b1c;
+  --vms-chart-3: #1f8a5f;
+  --vms-chart-4: #b3314d;
+  --vms-chart-5: #7a4fc9;
+  --vms-chart-6: #1f8fa3;
+  --vms-chart-7: #767a1f;
+  --vms-chart-8: #c23fa0;
   --vms-color-scheme: light;
 }

package/styles/themes/light-teal.css

@@ -17,5 +17,14 @@
   --vms-priority-high:#d76410;
   --vms-success:      #2da359;
   --vms-info:         #2277dd;
+  /* Chart palette (CHARTBASE-02) — same light-family palette as default.css. */
+  --vms-chart-1: #3366cc;
+  --vms-chart-2: #cc6b1c;
+  --vms-chart-3: #1f8a5f;
+  --vms-chart-4: #b3314d;
+  --vms-chart-5: #7a4fc9;
+  --vms-chart-6: #1f8fa3;
+  --vms-chart-7: #767a1f;
+  --vms-chart-8: #c23fa0;
   --vms-color-scheme: light;
 }