@mohasinac/appkit 4.62.0 → 4.63.0

package/dist/tokens/themes/default-dark.js

@@ -54,6 +54,7 @@ export const DEFAULT_DARK_THEME = {
         "appkit-color-text": "#fafafa",
         "appkit-color-text-muted": "#b4b4bd",
         "appkit-color-text-faint": "#8b8b94",
+        "appkit-color-link": "#22d3ee",
         "appkit-color-success": "#34d399",
         "appkit-color-success-surface": "rgba(6, 78, 59, 0.25)",
         "appkit-color-warning": "#fbbf24",

package/dist/tokens/themes/default-light.js

@@ -57,6 +57,7 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-color-text-muted": "#5b5b63",
         "appkit-color-text-faint": "#6f6f78",
         "appkit-color-text-on-primary": "#ffffff",
+        "appkit-color-link": "#0f766e",
         "appkit-color-success": "#15803d",
         "appkit-color-success-surface": "#f0fdf4",
         "appkit-color-warning": "#b45309",

package/dist/tokens/themes/required.d.ts

@@ -10,6 +10,6 @@ import type { GradientKey } from "./types";
  * unknown keys are rejected; missing keys fall back to the active mode's
  * default theme value (so a theme can override only a subset).
  */
-export declare const REQUIRED_THEME_TOKENS: readonly ["appkit-color-primary", "appkit-color-primary-50", "appkit-color-primary-100", "appkit-color-primary-200", "appkit-color-primary-300", "appkit-color-primary-400", "appkit-color-primary-500", "appkit-color-primary-600", "appkit-color-primary-700", "appkit-color-primary-800", "appkit-color-primary-900", "appkit-color-primary-950", "appkit-color-secondary", "appkit-color-secondary-50", "appkit-color-secondary-100", "appkit-color-secondary-200", "appkit-color-secondary-300", "appkit-color-secondary-400", "appkit-color-secondary-500", "appkit-color-secondary-600", "appkit-color-secondary-700", "appkit-color-secondary-800", "appkit-color-secondary-900", "appkit-color-secondary-950", "appkit-color-bg", "appkit-color-surface", "appkit-color-surface-elevated", "appkit-color-surface-input", "appkit-color-border", "appkit-color-border-subtle", "appkit-color-text", "appkit-color-text-muted", "appkit-color-text-faint", "appkit-color-text-on-primary", "appkit-color-success", "appkit-color-success-surface", "appkit-color-warning", "appkit-color-warning-surface", "appkit-color-error", "appkit-color-error-surface", "appkit-color-info", "appkit-color-info-surface", "appkit-color-focus-ring", "appkit-shadow-glow", "appkit-shadow-glow-pink", "appkit-font-display", "appkit-font-sans", "appkit-font-editorial", "appkit-font-mono", "appkit-space-0-5", "appkit-space-1", "appkit-space-1-5", "appkit-space-2", "appkit-space-2-5", "appkit-space-3", "appkit-space-3-5", "appkit-space-4", "appkit-space-5", "appkit-space-6", "appkit-space-8", "appkit-space-10", "appkit-space-12", "appkit-space-14", "appkit-space-16", "appkit-space-18", "appkit-space-20", "appkit-space-24", "appkit-text-2xs", "appkit-text-xs", "appkit-text-sm", "appkit-text-base", "appkit-text-lg", "appkit-text-xl", "appkit-text-2xl", "appkit-text-3xl", "appkit-text-4xl", "appkit-text-5xl"];
+export declare const REQUIRED_THEME_TOKENS: readonly ["appkit-color-primary", "appkit-color-primary-50", "appkit-color-primary-100", "appkit-color-primary-200", "appkit-color-primary-300", "appkit-color-primary-400", "appkit-color-primary-500", "appkit-color-primary-600", "appkit-color-primary-700", "appkit-color-primary-800", "appkit-color-primary-900", "appkit-color-primary-950", "appkit-color-secondary", "appkit-color-secondary-50", "appkit-color-secondary-100", "appkit-color-secondary-200", "appkit-color-secondary-300", "appkit-color-secondary-400", "appkit-color-secondary-500", "appkit-color-secondary-600", "appkit-color-secondary-700", "appkit-color-secondary-800", "appkit-color-secondary-900", "appkit-color-secondary-950", "appkit-color-bg", "appkit-color-surface", "appkit-color-surface-elevated", "appkit-color-surface-input", "appkit-color-border", "appkit-color-border-subtle", "appkit-color-text", "appkit-color-text-muted", "appkit-color-text-faint", "appkit-color-text-on-primary", "appkit-color-link", "appkit-color-success", "appkit-color-success-surface", "appkit-color-warning", "appkit-color-warning-surface", "appkit-color-error", "appkit-color-error-surface", "appkit-color-info", "appkit-color-info-surface", "appkit-color-focus-ring", "appkit-shadow-glow", "appkit-shadow-glow-pink", "appkit-font-display", "appkit-font-sans", "appkit-font-editorial", "appkit-font-mono", "appkit-space-0-5", "appkit-space-1", "appkit-space-1-5", "appkit-space-2", "appkit-space-2-5", "appkit-space-3", "appkit-space-3-5", "appkit-space-4", "appkit-space-5", "appkit-space-6", "appkit-space-8", "appkit-space-10", "appkit-space-12", "appkit-space-14", "appkit-space-16", "appkit-space-18", "appkit-space-20", "appkit-space-24", "appkit-text-2xs", "appkit-text-xs", "appkit-text-sm", "appkit-text-base", "appkit-text-lg", "appkit-text-xl", "appkit-text-2xl", "appkit-text-3xl", "appkit-text-4xl", "appkit-text-5xl"];
 export type RequiredThemeToken = (typeof REQUIRED_THEME_TOKENS)[number];
 export declare const REQUIRED_GRADIENT_KEYS: readonly GradientKey[];

package/dist/tokens/themes/required.js

@@ -47,6 +47,7 @@ export const REQUIRED_THEME_TOKENS = [
     "appkit-color-text-muted",
     "appkit-color-text-faint",
     "appkit-color-text-on-primary",
+    "appkit-color-link",
     // Status
     "appkit-color-success",
     "appkit-color-success-surface",

package/dist/tokens/tokens.css

@@ -302,6 +302,15 @@
   --appkit-color-text-on-primary:  #ffffff;
   --appkit-color-text-on-dark:     #ffffff;
 
+  /* Link ink for long-form prose. A SEPARATE token because the right link
+   * colour is not the same ramp in every theme: default-light wants primary
+   * (teal), default-dark wants secondary (cyan) because its primary is a RED
+   * that reads as danger, and cobalt-night's primary IS blue. Binding prose
+   * links to `primary-600` instead would be #dc2626 on the dark theme.
+   * primary-700, not -600: #0d9488 is only 3.59:1 on --appkit-color-bg and
+   * fails AA for normal text; #0f766e is 5.24:1. */
+  --appkit-color-link:             #0f766e;    /* primary-700 — 5.24:1 on --appkit-color-bg */
+
   --appkit-color-success:          #15803d;    /* green-700 — 4.5:1 AA against success-surface, distinct from the new teal primary */
   --appkit-color-success-surface:  #f0fdf4;    /* green-50 */
   --appkit-color-warning:          #b45309;    /* amber-700 — 4.5:1 AA against warning-surface */
@@ -500,6 +509,8 @@
   --appkit-color-text-muted:       #b4b4bd;    /* lightened from zinc-400 #a1a1aa — ~9:1 on the dark page */
   --appkit-color-text-faint:       #8b8b94;    /* lightened from zinc-500 #71717a, which was ~3:1 and read as barely present */
 
+  --appkit-color-link:             #22d3ee;    /* secondary-400 — 11.16:1 on --appkit-color-bg. NOT primary: this theme's primary is crimson */
+
   --appkit-color-success:          #34d399;    /* emerald-400 */
   --appkit-color-success-surface:  rgba(6, 78, 59, 0.25);
   --appkit-color-warning:          #fbbf24;    /* amber-400 */
@@ -620,6 +631,8 @@
   --appkit-color-text-muted:       #bcd4ff;    /* primary-200 */
   --appkit-color-text-faint:       #8eb9ff;    /* primary-300 */
 
+  --appkit-color-link:             #5992ff;    /* primary-500 — 5.17:1 on --appkit-color-bg */
+
   --appkit-color-success:          #4ade80;
   --appkit-color-success-surface:  rgba(20, 83, 45, 0.3);
   --appkit-color-warning:          #fbbf24;
@@ -652,6 +665,8 @@
   --appkit-color-surface-elevated: #ffffff;
   --appkit-color-surface-input:    #fffbeb;    /* amber-50 */
 
+  --appkit-color-link:             #b45309;    /* amber-700 — 4.73:1 on --appkit-color-bg; primary-600 #d97706 is only 3.0:1 */
+
   /* --- Interactive surfaces ------------------------------------------------
    * `-hover` is the neutral chrome hover fill; `-raised` is a resting panel one
    * step off the page surface; `primary-surface` is the brand-tinted hover.

package/dist/ui/components/Button.d.ts

@@ -76,6 +76,15 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * Children and aria-label props override the action defaults when explicitly provided.
      */
     action?: ActionDef;
+    /**
+     * Replace the confirmation dialog's BODY for this one render.
+     *
+     * Does not create a dialog: ignored unless `action.confirmation` exists, so
+     * the registry still decides whether an action is confirmed at all. This
+     * only substitutes the sentence, for the case where the consequence is data
+     * the registry should not hold a copy of. See the note at `confirmBody`.
+     */
+    confirmationBody?: React.ReactNode;
 }
-export declare function Button({ variant, size, className, isLoading, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, justify, asChild, action, ...props }: ButtonProps): React.JSX.Element;
+export declare function Button({ variant, size, className, isLoading, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, justify, asChild, action, confirmationBody, ...props }: ButtonProps): React.JSX.Element;
 export {};

package/dist/ui/components/Button.js

@@ -143,7 +143,7 @@ const ACTION_ICON_SIZE = {
     md: "md",
     lg: "lg",
 };
-function ActionIcon({ action, size, }) {
+function ActionIcon({ action, confirmationBody, size, }) {
     const Glyph = resolveIcon(action?.iconKey);
     if (!Glyph)
         return null;
@@ -158,7 +158,7 @@ const ACTION_KIND_VARIANT = {
     link: "ghost",
     chip: "outline",
 };
-export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, justify, asChild = false, action, ...props }) {
+export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, gap, textSize, paddingX, paddingY, weight, textColor, border, rounded, shadow, justify, asChild = false, action, confirmationBody, ...props }) {
     const [confirmOpen, setConfirmOpen] = useState(false);
     // React 17+ no longer pools SyntheticEvents, so it's safe to hold onto the
     // original triggering event across the confirmation dialog's async gap and
@@ -242,6 +242,28 @@ export function Button({ variant, size = "md", className = "", isLoading = false
     const confirmVariant = confirmDef?.confirmKind
         ? (ACTION_KIND_VARIANT[confirmDef.confirmKind] ?? "primary")
         : "primary";
+    /*
+     * The body a caller supplied, when the consequence is DATA rather than copy.
+     *
+     * 🛑 It cannot CREATE a dialog — `confirmPortal` still gates on
+     * `action.confirmation` existing. So the registry keeps every decision that
+     * matters: whether this action is confirmed at all, its title, its confirm
+     * label, and its destructive kind. Only the sentence in the middle can be
+     * substituted, and only when the ActionDef has already declared that there
+     * IS one.
+     *
+     * Why the seam is needed: `/admin/integrations` renders one row per
+     * integration, and "what switching this off does" genuinely differs per row
+     * — payments abandons in-flight payments, support hides a contact route,
+     * shipping selects a working manual path and stops nothing. That text already
+     * lives on `INTEGRATIONS[id].offConsequence`, which is also what the row
+     * itself renders. The alternatives were worse in both directions: four
+     * near-duplicate ActionDefs with the consequence copied into the registry (a
+     * second place for one sentence to drift from — Root Cause #42), or a generic
+     * "are you sure?" that flattens exactly the distinction the model exists to
+     * preserve.
+     */
+    const confirmBody = confirmationBody ?? confirmDef?.body;
     // Built once and rendered alongside EITHER the asChild clone or the plain
     // <button> below — this must never live inside an early return for only
     // one of those two branches, or the other branch can never open a
@@ -258,7 +280,7 @@ export function Button({ variant, size = "md", className = "", isLoading = false
                 padding: "1.5rem",
                 maxWidth: "380px", width: "calc(100% - 2rem)",
                 boxShadow: "var(--appkit-shadow-lg, 0 20px 60px rgba(0,0,0,0.2))",
-            }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: confirmDef.body }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body);
+            }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: confirmBody }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body);
     if (asChild && React.isValidElement(resolvedChildren)) {
         const child = resolvedChildren;
         // Never spread the caller's raw onClick here — it must go through

package/dist/ui/components/Chart.d.ts

@@ -0,0 +1,63 @@
+/**
+ * The one chart primitive — C-chart.
+ *
+ * ## Why this exists
+ *
+ * Three features had already hand-rolled the same thing:
+ * `AdminAnalyticsCharts`, `SellerRevenueChart` and `TesterFeedbackChart` each
+ * re-declare the same eight `dynamic(() => import("recharts"))` wrappers with
+ * the same `as React.ComponentType<any>` cast and their own hardcoded fills.
+ * Three copies is the Duplication Framework's Rule-of-Three trigger, so this is
+ * consolidation of something that exists, not speculative infrastructure.
+ *
+ * It is also what lets a chart live in CMS content: `ChartSpec` is a plain
+ * JSON-serialisable object, so a rich-text author can embed one as
+ * `<figure data-chart='{...}'>` and the renderer hydrates it here.
+ *
+ * The data contract and its validator live in `./chart-spec`, which is pure —
+ * see that file's header for why the split matters.
+ *
+ * ## 🛑 recharts is client-only, and that is not incidental
+ *
+ * Every recharts component is behind `dynamic(..., { ssr: false })`, so this
+ * module renders its chrome on the server and the plot only in the browser.
+ * `RichTextRenderer` is a Server Component; it can mount this because this is a
+ * client component, but nothing here may be called during SSR.
+ *
+ * ## 🛑 The palette lives in CSS and NOWHERE ELSE
+ *
+ * There is deliberately no colour literal in this file. An earlier draft kept a
+ * `FALLBACK_SERIES_COLORS` array of eight hexes beside the identical eight in
+ * `Chart.style.css` — which is a denormalised mirror of exactly the kind Root
+ * Cause #42 is about: the day someone re-steps a hue for contrast, they fix one
+ * copy, and the chart renders one colour in CSS and a different one in JS with
+ * nothing reporting the disagreement.
+ *
+ * So the colours are read from the cascade at runtime, and if the stylesheet is
+ * absent the chart renders with recharts' own defaults plus a one-time console
+ * warning naming the likely cause. A wrong-but-plausible colour is worse than
+ * an obviously unstyled one.
+ *
+ * Colour is read off THIS element rather than from `useTheme()`, which throws
+ * without a `<ThemeProvider>` — a chart has to survive a preview iframe, an
+ * email preview or a test harness, the same reason `useCanSeePrices` uses
+ * `useOptionalSession` (Root Cause #20).
+ */
+import React from "react";
+import { type ChartSpec } from "./chart-spec";
+export interface ChartProps {
+    spec: ChartSpec;
+    /** Plot height in px. Default 300. */
+    height?: number;
+    className?: string;
+    /** Hide the table-view toggle. The legend is never optional for ≥2 series. */
+    hideTableToggle?: boolean;
+}
+export declare function Chart({ spec, height, className, hideTableToggle, }: ChartProps): React.JSX.Element;
+/**
+ * Render a `ChartSpec` from untrusted JSON, showing the validation reason when
+ * it does not parse — never rendering nothing.
+ */
+export declare function ChartFromJson({ json, ...rest }: {
+    json: string;
+} & Omit<ChartProps, "spec">): React.JSX.Element;

package/dist/ui/components/Chart.js

@@ -0,0 +1,169 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The one chart primitive — C-chart.
+ *
+ * ## Why this exists
+ *
+ * Three features had already hand-rolled the same thing:
+ * `AdminAnalyticsCharts`, `SellerRevenueChart` and `TesterFeedbackChart` each
+ * re-declare the same eight `dynamic(() => import("recharts"))` wrappers with
+ * the same `as React.ComponentType<any>` cast and their own hardcoded fills.
+ * Three copies is the Duplication Framework's Rule-of-Three trigger, so this is
+ * consolidation of something that exists, not speculative infrastructure.
+ *
+ * It is also what lets a chart live in CMS content: `ChartSpec` is a plain
+ * JSON-serialisable object, so a rich-text author can embed one as
+ * `<figure data-chart='{...}'>` and the renderer hydrates it here.
+ *
+ * The data contract and its validator live in `./chart-spec`, which is pure —
+ * see that file's header for why the split matters.
+ *
+ * ## 🛑 recharts is client-only, and that is not incidental
+ *
+ * Every recharts component is behind `dynamic(..., { ssr: false })`, so this
+ * module renders its chrome on the server and the plot only in the browser.
+ * `RichTextRenderer` is a Server Component; it can mount this because this is a
+ * client component, but nothing here may be called during SSR.
+ *
+ * ## 🛑 The palette lives in CSS and NOWHERE ELSE
+ *
+ * There is deliberately no colour literal in this file. An earlier draft kept a
+ * `FALLBACK_SERIES_COLORS` array of eight hexes beside the identical eight in
+ * `Chart.style.css` — which is a denormalised mirror of exactly the kind Root
+ * Cause #42 is about: the day someone re-steps a hue for contrast, they fix one
+ * copy, and the chart renders one colour in CSS and a different one in JS with
+ * nothing reporting the disagreement.
+ *
+ * So the colours are read from the cascade at runtime, and if the stylesheet is
+ * absent the chart renders with recharts' own defaults plus a one-time console
+ * warning naming the likely cause. A wrong-but-plausible colour is worse than
+ * an obviously unstyled one.
+ *
+ * Colour is read off THIS element rather than from `useTheme()`, which throws
+ * without a `<ThemeProvider>` — a chart has to survive a preview iframe, an
+ * email preview or a test harness, the same reason `useCanSeePrices` uses
+ * `useOptionalSession` (Root Cause #20).
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import dynamic from "next/dynamic.js";
+import { CHART_MAX_SERIES, parseChartAttr, } from "./chart-spec.js";
+/*
+ * recharts exports generic components (<DataPointType>) whose inferred props do
+ * not satisfy `dynamic()`'s ComponentType constraint, so each needs a cast.
+ * This is the SINGLE copy of that cast in the codebase — the three feature
+ * charts above should migrate onto this module rather than repeating it.
+ */
+const ResponsiveContainer = dynamic(() => import("recharts").then((m) => m.ResponsiveContainer), { ssr: false });
+const BarChart = dynamic(() => import("recharts").then((m) => m.BarChart), { ssr: false });
+const LineChart = dynamic(() => import("recharts").then((m) => m.LineChart), { ssr: false });
+const AreaChart = dynamic(() => import("recharts").then((m) => m.AreaChart), { ssr: false });
+const Bar = dynamic(() => import("recharts").then((m) => m.Bar), { ssr: false });
+const Line = dynamic(() => import("recharts").then((m) => m.Line), { ssr: false });
+const Area = dynamic(() => import("recharts").then((m) => m.Area), { ssr: false });
+const XAxis = dynamic(() => import("recharts").then((m) => m.XAxis), { ssr: false });
+const YAxis = dynamic(() => import("recharts").then((m) => m.YAxis), { ssr: false });
+const CartesianGrid = dynamic(() => import("recharts").then((m) => m.CartesianGrid), { ssr: false });
+const Tooltip = dynamic(() => import("recharts").then((m) => m.Tooltip), { ssr: false });
+/** `""` → `undefined`, so recharts falls back to its own default. */
+const orUndef = (s) => (s.length > 0 ? s : undefined);
+let warnedMissingStylesheet = false;
+/**
+ * Resolve the palette from the element's own computed style, and re-resolve
+ * whenever the active theme changes.
+ *
+ * Two triggers, because there are two ways the theme can move: the viewer's
+ * toggle (which stamps `data-theme` on `<html>`) and the OS preference (which
+ * only the media query sees). Watching one and not the other leaves a chart
+ * stranded in the previous palette.
+ *
+ * Returns `null` until the first read completes — one frame after mount, which
+ * is invisible given the plot itself is behind `ssr: false` anyway.
+ */
+function useChartPalette(ref) {
+    const [palette, setPalette] = useState(null);
+    const read = useCallback(() => {
+        const el = ref.current;
+        if (!el || typeof window === "undefined")
+            return;
+        const cs = window.getComputedStyle(el);
+        const v = (name) => cs.getPropertyValue(name).trim();
+        const series = Array.from({ length: CHART_MAX_SERIES }, (_, i) => v(`--chart-${i + 1}`));
+        if (!series[0] && !warnedMissingStylesheet) {
+            warnedMissingStylesheet = true;
+            // eslint-disable-next-line no-console
+            console.warn("[appkit] <Chart> found no --chart-* custom properties. " +
+                'Import the stylesheet once at your app root: import "@mohasinac/appkit/styles". ' +
+                "Rendering with recharts' default colours until then.");
+        }
+        setPalette({
+            series,
+            grid: v("--chart-grid"),
+            axis: v("--chart-axis"),
+            inkMuted: v("--chart-ink-muted"),
+        });
+    }, [ref]);
+    useEffect(() => {
+        read();
+        if (typeof window === "undefined")
+            return;
+        const observer = new MutationObserver(read);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["data-theme", "style", "class"],
+        });
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        mq.addEventListener("change", read);
+        return () => {
+            observer.disconnect();
+            mq.removeEventListener("change", read);
+        };
+    }, [read]);
+    return palette;
+}
+const fmt = (n, unit) => `${Number.isInteger(n) ? n : n.toFixed(2)}${unit ? ` ${unit}` : ""}`;
+export function Chart({ spec, height = 300, className = "", hideTableToggle = false, }) {
+    const rootRef = useRef(null);
+    const palette = useChartPalette(rootRef);
+    const [showTable, setShowTable] = useState(false);
+    /** recharts wants row-per-category; the spec is column-per-series. */
+    const rows = useMemo(() => spec.categories.map((cat, i) => {
+        const row = { category: cat };
+        for (const s of spec.series)
+            row[s.label] = s.values[i] ?? 0;
+        return row;
+    }), [spec]);
+    const multi = spec.series.length >= 2;
+    const accessibleName = spec.title ?? spec.caption ?? "Chart";
+    const colorAt = (i) => orUndef(palette?.series[i % CHART_MAX_SERIES] ?? "");
+    const renderTable = () => (_jsx("div", { className: "appkit-chart__scroll", children: _jsxs("table", { className: "appkit-chart__table", children: [_jsx("caption", { className: "appkit-chart__caption", children: accessibleName }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Category" }), spec.series.map((s) => (_jsxs("th", { scope: "col", children: [s.label, spec.unit ? ` (${spec.unit})` : ""] }, s.label)))] }) }), _jsx("tbody", { children: spec.categories.map((cat, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: cat }), spec.series.map((s) => (_jsx("td", { children: fmt(s.values[i] ?? 0, spec.unit) }, s.label)))] }, cat))) })] }) }));
+    const tooltip = (_jsx(Tooltip, { content: (props) => {
+            if (!props?.active || !Array.isArray(props.payload) || !props.payload.length) {
+                return null;
+            }
+            return (_jsxs("div", { className: "appkit-chart__tooltip", children: [_jsx("div", { className: "appkit-chart__tooltip-label", children: props.label }), props.payload.map((p) => (_jsxs("div", { className: "appkit-chart__tooltip-row", children: [_jsx("span", { style: { color: p.color }, children: String(p.dataKey) }), _jsx("span", { children: fmt(Number(p.value), spec.unit) })] }, String(p.dataKey))))] }));
+        } }));
+    const axes = (_jsxs(_Fragment, { children: [_jsx(CartesianGrid, { stroke: orUndef(palette?.grid ?? ""), vertical: false }), _jsx(XAxis, { dataKey: "category", stroke: orUndef(palette?.axis ?? ""), tick: { fill: orUndef(palette?.inkMuted ?? ""), fontSize: 12 }, tickLine: false }), _jsx(YAxis, { stroke: orUndef(palette?.axis ?? ""), tick: { fill: orUndef(palette?.inkMuted ?? ""), fontSize: 12 }, tickLine: false, width: 48 }), tooltip] }));
+    let plot;
+    if (spec.kind === "bar" || spec.kind === "groupedBar") {
+        plot = (_jsxs(BarChart, { data: rows, barGap: 2, barCategoryGap: "20%", children: [axes, spec.series.map((s, i) => (_jsx(Bar, { dataKey: s.label, fill: colorAt(i), radius: [4, 4, 0, 0] }, s.label)))] }));
+    }
+    else if (spec.kind === "line") {
+        plot = (_jsxs(LineChart, { data: rows, children: [axes, spec.series.map((s, i) => (_jsx(Line, { type: "monotone", dataKey: s.label, stroke: colorAt(i), strokeWidth: 2, dot: { r: 3 }, activeDot: { r: 5 } }, s.label)))] }));
+    }
+    else {
+        plot = (_jsxs(AreaChart, { data: rows, children: [axes, spec.series.map((s, i) => (_jsx(Area, { type: "monotone", dataKey: s.label, stroke: colorAt(i), strokeWidth: 2, fill: colorAt(i), fillOpacity: 0.18 }, s.label)))] }));
+    }
+    return (_jsxs("div", { ref: rootRef, className: `appkit-chart ${className}`.trim(), role: "group", "aria-label": accessibleName, children: [multi && palette ? (_jsx("div", { className: "appkit-chart__legend", children: spec.series.map((s, i) => (_jsxs("span", { children: [_jsx("span", { className: "appkit-chart__legend-swatch", style: { background: colorAt(i) }, "aria-hidden": "true" }), s.label] }, s.label))) })) : null, showTable ? (renderTable()) : (_jsx("div", { className: "appkit-chart__plot", style: { height }, children: palette ? (_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: plot })) : null })), spec.caption ? _jsx("p", { className: "appkit-chart__caption", children: spec.caption }) : null, hideTableToggle ? null : (_jsx("div", { className: "appkit-chart__toolbar", children: _jsx("button", { type: "button", className: "appkit-chart__toggle", onClick: () => setShowTable((v) => !v), "aria-pressed": showTable, children: showTable ? "Show chart" : "Show as table" }) }))] }));
+}
+/**
+ * Render a `ChartSpec` from untrusted JSON, showing the validation reason when
+ * it does not parse — never rendering nothing.
+ */
+export function ChartFromJson({ json, ...rest }) {
+    const result = useMemo(() => parseChartAttr(json), [json]);
+    if (!result.ok) {
+        return (_jsx("div", { className: "appkit-chart", children: _jsxs("p", { className: "appkit-chart__error", children: ["Chart could not be rendered: ", result.reason] }) }));
+    }
+    return _jsx(Chart, { spec: result.spec, ...rest });
+}

package/dist/ui/components/Chart.style.css

@@ -0,0 +1,214 @@
+/*
+ * Chart palette + chrome.
+ *
+ * ── 🛑 The custom properties are scoped to `.appkit-chart`, NOT `:root` ────
+ *
+ * Two reasons, and the second is the load-bearing one:
+ *
+ *  1. A chart palette is not a theme token. Nothing outside a chart should be
+ *     able to consume `--chart-3`, and putting it on `:root` invites exactly
+ *     that.
+ *  2. `audit-theme-drift` matches `:root { ... }` blocks in the token layer
+ *     against the TypeScript theme presets, so a NEW `:root` custom property
+ *     declared here is a drift finding waiting to happen. Scoping to the
+ *     component sidesteps the question entirely.
+ *
+ * Reading them off the chart's OWN element (rather than `documentElement`) is
+ * also what makes the cascade do the work: a `[data-theme]` override below
+ * resolves correctly with no JS mode detection.
+ *
+ * ── 🛑 The dark steps are SELECTED, not flipped ───────────────────────────
+ *
+ * Both palettes were run through the dataviz validator against the real app
+ * surfaces (#ffffff and #0f172a). The light set is the reference order. The
+ * dark set keeps that hue ORDER — because the order is what the adjacent-pair
+ * CVD check passes on — and re-steps only the four hues that fell outside the
+ * dark lightness band (L 0.48–0.67).
+ *
+ * Re-ordering instead was tried and was much worse: moving pink next to green
+ * produced an adjacent deuteranopia ΔE of 1.7, i.e. two series a red-green
+ * colourblind reader cannot tell apart at all.
+ *
+ * Light set carries a sub-3:1 contrast WARN on --chart-3/4/5. That is not
+ * dismissable: the component always renders a legend for ≥2 series and offers
+ * a table view, which is the required relief.
+ *
+ * If you change ANY value here, re-run:
+ *   node scripts/validate_palette.js "<the 8 hexes>" --mode light --surface "#ffffff"
+ *   node scripts/validate_palette.js "<the 8 hexes>" --mode dark  --surface "#0f172a"
+ */
+
+.appkit-chart {
+  --chart-1: #2a78d6;
+  --chart-2: #eb6834;
+  --chart-3: #1baf7a;
+  --chart-4: #eda100;
+  --chart-5: #e87ba4;
+  --chart-6: #008300;
+  --chart-7: #4a3aa7;
+  --chart-8: #e34948;
+
+  --chart-grid: rgba(113, 113, 122, 0.22);
+  --chart-axis: rgba(113, 113, 122, 0.55);
+  --chart-ink: var(--appkit-color-text, #18181b);
+  --chart-ink-muted: var(--appkit-color-text-muted, #52525b);
+  --chart-tooltip-bg: var(--appkit-color-surface-elevated, #ffffff);
+  --chart-tooltip-border: var(--appkit-color-border, rgba(113, 113, 122, 0.3));
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .appkit-chart {
+    --chart-2: #E36430;
+    --chart-4: #C38600;
+    --chart-5: #D76691;
+    --chart-7: #6655CE;
+    --chart-grid: rgba(161, 161, 170, 0.2);
+    --chart-axis: rgba(161, 161, 170, 0.5);
+  }
+}
+
+/*
+ * The viewer's explicit toggle must win over the media query in BOTH
+ * directions — `applyTheme` stamps `data-theme="<theme id>"` on <html>, and a
+ * light theme chosen on a dark-OS machine has to restore the light steps.
+ * `:root[data-theme]` is deliberately broad here: the attribute carries a theme
+ * ID (e.g. "default-light"), not the literal mode, so the mode-specific
+ * selectors below key off the id prefix the built-in themes use.
+ */
+:root[data-theme*="dark"] .appkit-chart {
+  --chart-2: #E36430;
+  --chart-4: #C38600;
+  --chart-5: #D76691;
+  --chart-7: #6655CE;
+  --chart-grid: rgba(161, 161, 170, 0.2);
+  --chart-axis: rgba(161, 161, 170, 0.5);
+}
+
+:root[data-theme*="light"] .appkit-chart {
+  --chart-2: #eb6834;
+  --chart-4: #eda100;
+  --chart-5: #e87ba4;
+  --chart-7: #4a3aa7;
+  --chart-grid: rgba(113, 113, 122, 0.22);
+  --chart-axis: rgba(113, 113, 122, 0.55);
+}
+
+.appkit-chart__caption {
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--chart-ink-muted);
+  margin: 0;
+}
+
+.appkit-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.25rem;
+  align-items: center;
+  font-size: 0.75rem;
+  color: var(--chart-ink-muted);
+}
+
+.appkit-chart__legend-swatch {
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+  border-radius: 2px;
+  margin-right: 0.4rem;
+  vertical-align: -1px;
+  flex: 0 0 auto;
+}
+
+.appkit-chart__plot {
+  width: 100%;
+}
+
+/* Wide charts scroll in their own container so the page body never does. */
+.appkit-chart__scroll {
+  overflow-x: auto;
+  width: 100%;
+}
+
+.appkit-chart__toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.appkit-chart__toggle {
+  font: inherit;
+  font-size: 0.6875rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--chart-ink-muted);
+  background: none;
+  border: 1px solid var(--chart-tooltip-border);
+  border-radius: 3px;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+}
+
+.appkit-chart__toggle:hover {
+  color: var(--chart-ink);
+}
+
+.appkit-chart__toggle:focus-visible {
+  outline: 2px solid var(--appkit-color-focus-ring, #2a78d6);
+  outline-offset: 2px;
+}
+
+.appkit-chart__table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--chart-ink);
+}
+
+.appkit-chart__table th,
+.appkit-chart__table td {
+  border-bottom: 1px solid var(--chart-grid);
+  padding: 0.4rem 0.6rem;
+  text-align: left;
+}
+
+.appkit-chart__table td + td,
+.appkit-chart__table th + th {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.appkit-chart__tooltip {
+  background: var(--chart-tooltip-bg);
+  border: 1px solid var(--chart-tooltip-border);
+  border-radius: 4px;
+  padding: 0.5rem 0.65rem;
+  font-size: 0.75rem;
+  color: var(--chart-ink);
+  font-variant-numeric: tabular-nums;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.appkit-chart__tooltip-label {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  color: var(--chart-ink);
+}
+
+.appkit-chart__tooltip-row {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+}
+
+.appkit-chart__error {
+  font-size: 0.8125rem;
+  color: var(--appkit-color-error, #e34948);
+  border: 1px solid var(--appkit-color-error, #e34948);
+  border-radius: 4px;
+  padding: 0.6rem 0.75rem;
+}

package/dist/ui/components/Disclaimer.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { type DisclaimerId } from "../../_internal/shared/content/disclaimers";
+import { type PublishedValues } from "../../_internal/shared/content/published-values";
+export interface DisclaimerProps {
+    id: DisclaimerId;
+    /** Override the money figures with the admin's current configuration. */
+    publishedValues?: PublishedValues;
+    /**
+     * Render without the surrounding box — for a disclaimer that sits inside a
+     * card that already has chrome.
+     *
+     * 🛑 Does NOT make it smaller or quieter. A `warning`-tone entry keeps its
+     * tone inline, because the entries marked `warning` are the ones where
+     * ignoring the text has a consequence the reader cannot undo.
+     */
+    inline?: boolean;
+    className?: string;
+}
+export declare function Disclaimer({ id, publishedValues, inline, className, }: DisclaimerProps): React.JSX.Element | null;