@tensor_1/react 2.15.0 → 2.17.0

package/README.md

@@ -37,6 +37,11 @@ For common line, bar, and pie charts, the tree-shaken preset avoids shipping the
 import { Chart } from "@tensor_1/react/chart/preset";
 ```
 
+Both chart entries also export `ChartMetric`, `ChartLegend`, and `ChartLegendItem` for consistent analytical card
+chrome. `Chart` supports `headerAction`, `footer`, `loading`, `empty`, and an accessible table equivalent. For
+workflow surfaces, the main entry exports `Pipeline`/`PipelineStage` (compact or detailed operational rail) and
+`Flow`/`FlowNode` (consumer-owned graph geometry with explicit text states).
+
 Large fixed-height tables can use `useVirtualRows(rows, { rowHeight })`; attach its `containerRef` to
 `TableWrap` and render the returned row window between spacer rows.
 

package/dist/ChartCore-Do6gRBN3.d.cts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode, HTMLAttributes } from 'react';
+import { EChartsOption, ECharts } from 'echarts';
+
+declare function uixChartPalette(): string[];
+interface ChartTableRow {
+    [key: string]: string | number;
+}
+interface ChartProps {
+    option: EChartsOption;
+    title?: string;
+    subtitle?: string;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+    tableData?: ChartTableRow[];
+    tableHeaders?: string[];
+    onReady?: (chart: ECharts) => void;
+    header?: ReactNode;
+    headerAction?: ReactNode;
+    footer?: ReactNode;
+    loading?: boolean;
+    empty?: ReactNode;
+}
+interface ChartMetricProps extends HTMLAttributes<HTMLDivElement> {
+    value: ReactNode;
+    label?: ReactNode;
+    delta?: ReactNode;
+    deltaTone?: 'neutral' | 'positive' | 'negative' | 'warning';
+}
+declare function ChartMetric({ value, label, delta, deltaTone, className, ...props }: ChartMetricProps): react.JSX.Element;
+interface ChartLegendProps extends HTMLAttributes<HTMLUListElement> {
+    children?: ReactNode;
+}
+declare function ChartLegend({ children, className, ...props }: ChartLegendProps): react.JSX.Element;
+interface ChartLegendItemProps extends HTMLAttributes<HTMLLIElement> {
+    label: ReactNode;
+    color?: string;
+    swatch?: 'block' | 'line' | 'dash';
+}
+declare function ChartLegendItem({ label, color, swatch, className, style, ...props }: ChartLegendItemProps): react.JSX.Element;
+
+export { type ChartProps as C, ChartLegend as a, ChartLegendItem as b, type ChartLegendItemProps as c, type ChartLegendProps as d, ChartMetric as e, type ChartMetricProps as f, type ChartTableRow as g, uixChartPalette as u };

package/dist/chart-preset.cjs

@@ -32,6 +32,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var chart_preset_exports = {};
 __export(chart_preset_exports, {
   Chart: () => Chart,
+  ChartLegend: () => ChartLegend,
+  ChartLegendItem: () => ChartLegendItem,
+  ChartMetric: () => ChartMetric,
   uixChartPalette: () => uixChartPalette
 });
 module.exports = __toCommonJS(chart_preset_exports);
@@ -57,6 +60,12 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
+function motionSafe(option) {
+  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return { ...option, animation: false };
+  }
+  return option;
+}
 function ChartCore({
   engine,
   option,
@@ -69,7 +78,11 @@ function ChartCore({
   tableData,
   tableHeaders,
   onReady,
-  header
+  header,
+  headerAction,
+  footer,
+  loading = false,
+  empty
 }) {
   const containerRef = (0, import_react.useRef)(null);
   const chartRef = (0, import_react.useRef)(null);
@@ -77,16 +90,23 @@ function ChartCore({
   const latestOptionRef = (0, import_react.useRef)(option);
   const onReadyRef = (0, import_react.useRef)(onReady);
   const tableId = (0, import_react.useId)();
+  const hasEmpty = empty != null;
+  const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length);
+  const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
   latestOptionRef.current = option;
   onReadyRef.current = onReady;
+  hasTextAlternativeRef.current = hasTextAlternative;
   (0, import_react.useEffect)(() => {
     const element = containerRef.current;
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(latestOptionRef.current);
+    chart.setOption(motionSafe(latestOptionRef.current));
     appliedOptionRef.current = latestOptionRef.current;
     onReadyRef.current?.(chart);
+    if (!hasTextAlternativeRef.current) {
+      console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
+    }
     let frame = 0;
     let width = element.clientWidth;
     let height2 = element.clientHeight;
@@ -110,23 +130,26 @@ function ChartCore({
       chartRef.current = null;
       appliedOptionRef.current = null;
     };
-  }, [engine]);
+  }, [engine, hasEmpty]);
   (0, import_react.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || appliedOptionRef.current === option) return;
-    chart.setOption(option, { notMerge: false });
+    chart.setOption(motionSafe(option), { notMerge: false });
     appliedOptionRef.current = option;
   }, [option]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
   const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
-    title != null || subtitle != null || header != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      header,
-      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
-      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    title != null || subtitle != null || header != null || headerAction != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__heading", children: [
+        header,
+        title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+      ] }),
+      headerAction
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    hasEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: containerRef,
@@ -135,11 +158,29 @@ function ChartCore({
         "aria-label": effectiveAriaLabel,
         "aria-describedby": hasTable ? tableId : void 0
       }
-    ),
-    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+    ) }),
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
-    ] }) : null
+    ] }) : null,
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__footer", children: footer })
+  ] });
+}
+function ChartMetric({ value, label, delta, deltaTone = "neutral", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart__metric", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__metric-value", children: value }),
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__metric-label", children: label }),
+    delta != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__delta", "data-tone": deltaTone, children: delta })
+  ] });
+}
+function ChartLegend({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: cx("uix-legend", className), ...props, children });
+}
+function ChartLegendItem({ label, color, swatch = "block", className, style, ...props }) {
+  const mergedStyle = color ? { "--legend-color": color, ...style } : style;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: cx("uix-legend__item", className), style: mergedStyle, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("uix-legend__swatch", swatch !== "block" && `uix-legend__swatch--${swatch}`), "aria-hidden": "true" }),
+    label
   ] });
 }
 
@@ -164,5 +205,8 @@ function Chart(props) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Chart,
+  ChartLegend,
+  ChartLegendItem,
+  ChartMetric,
   uixChartPalette
 });

package/dist/chart-preset.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { C as ChartProps } from './ChartCore-Bt1C84ty.cjs';
-export { a as ChartTableRow, u as uixChartPalette } from './ChartCore-Bt1C84ty.cjs';
+import { C as ChartProps } from './ChartCore-Do6gRBN3.cjs';
+export { a as ChartLegend, b as ChartLegendItem, c as ChartLegendItemProps, d as ChartLegendProps, e as ChartMetric, f as ChartMetricProps, g as ChartTableRow, u as uixChartPalette } from './ChartCore-Do6gRBN3.cjs';
 import 'echarts';
 
 /** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */

package/dist/chart-preset.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ChartProps } from './components/ChartCore.js';
-export { ChartTableRow, uixChartPalette } from './components/ChartCore.js';
+export { ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, uixChartPalette } from './components/ChartCore.js';
 import 'echarts';
 
 /** Lean SVG adapter: line, bar, pie, dataset, grid, legend, title, and tooltip. */

package/dist/chart-preset.js

@@ -28,8 +28,11 @@ const presetEngine = echarts;
 function Chart(props) {
   return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: presetEngine });
 }
-import { uixChartPalette } from "./components/ChartCore.js";
+import { ChartLegend, ChartLegendItem, ChartMetric, uixChartPalette } from "./components/ChartCore.js";
 export {
   Chart,
+  ChartLegend,
+  ChartLegendItem,
+  ChartMetric,
   uixChartPalette
 };

package/dist/chart.cjs

@@ -31,6 +31,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var chart_exports = {};
 __export(chart_exports, {
   Chart: () => Chart,
+  ChartLegend: () => ChartLegend,
+  ChartLegendItem: () => ChartLegendItem,
+  ChartMetric: () => ChartMetric,
   uixChartPalette: () => uixChartPalette
 });
 module.exports = __toCommonJS(chart_exports);
@@ -55,6 +58,12 @@ function readToken(name) {
 function uixChartPalette() {
   return [1, 2, 3, 4, 5, 6, 7, 8].map((i) => readToken(`--uix-chart-${i}`));
 }
+function motionSafe(option) {
+  if (typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return { ...option, animation: false };
+  }
+  return option;
+}
 function ChartCore({
   engine,
   option,
@@ -67,7 +76,11 @@ function ChartCore({
   tableData,
   tableHeaders,
   onReady,
-  header
+  header,
+  headerAction,
+  footer,
+  loading = false,
+  empty
 }) {
   const containerRef = (0, import_react.useRef)(null);
   const chartRef = (0, import_react.useRef)(null);
@@ -75,16 +88,23 @@ function ChartCore({
   const latestOptionRef = (0, import_react.useRef)(option);
   const onReadyRef = (0, import_react.useRef)(onReady);
   const tableId = (0, import_react.useId)();
+  const hasEmpty = empty != null;
+  const hasTextAlternative = Boolean(ariaLabel || title || tableData?.length);
+  const hasTextAlternativeRef = (0, import_react.useRef)(hasTextAlternative);
   latestOptionRef.current = option;
   onReadyRef.current = onReady;
+  hasTextAlternativeRef.current = hasTextAlternative;
   (0, import_react.useEffect)(() => {
     const element = containerRef.current;
     if (!element) return;
     const chart = engine.init(element, null, { renderer: "svg" });
     chartRef.current = chart;
-    chart.setOption(latestOptionRef.current);
+    chart.setOption(motionSafe(latestOptionRef.current));
     appliedOptionRef.current = latestOptionRef.current;
     onReadyRef.current?.(chart);
+    if (!hasTextAlternativeRef.current) {
+      console.warn("[uix] Chart has no text alternative \u2014 provide ariaLabel, title, or tableData.");
+    }
     let frame = 0;
     let width = element.clientWidth;
     let height2 = element.clientHeight;
@@ -108,23 +128,26 @@ function ChartCore({
       chartRef.current = null;
       appliedOptionRef.current = null;
     };
-  }, [engine]);
+  }, [engine, hasEmpty]);
   (0, import_react.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || appliedOptionRef.current === option) return;
-    chart.setOption(option, { notMerge: false });
+    chart.setOption(motionSafe(option), { notMerge: false });
     appliedOptionRef.current = option;
   }, [option]);
   const heightValue = typeof height === "number" ? `${height}px` : height;
   const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart", className), style, children: [
-    title != null || subtitle != null || header != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      header,
-      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
-      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    title != null || subtitle != null || header != null || headerAction != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uix-chart__heading", children: [
+        header,
+        title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__title", children: title }) : null,
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+      ] }),
+      headerAction
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    hasEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: containerRef,
@@ -133,11 +156,29 @@ function ChartCore({
         "aria-label": effectiveAriaLabel,
         "aria-describedby": hasTable ? tableId : void 0
       }
-    ),
-    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
+    ) }),
+    hasTable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { id: tableId, className: "uix-visually-hidden", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: row[label] }, label)) }, index)) })
-    ] }) : null
+    ] }) : null,
+    footer != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__footer", children: footer })
+  ] });
+}
+function ChartMetric({ value, label, delta, deltaTone = "neutral", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("uix-chart__metric", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__metric-value", children: value }),
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__metric-label", children: label }),
+    delta != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uix-chart__delta", "data-tone": deltaTone, children: delta })
+  ] });
+}
+function ChartLegend({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: cx("uix-legend", className), ...props, children });
+}
+function ChartLegendItem({ label, color, swatch = "block", className, style, ...props }) {
+  const mergedStyle = color ? { "--legend-color": color, ...style } : style;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: cx("uix-legend__item", className), style: mergedStyle, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx("uix-legend__swatch", swatch !== "block" && `uix-legend__swatch--${swatch}`), "aria-hidden": "true" }),
+    label
   ] });
 }
 
@@ -149,5 +190,8 @@ function Chart(props) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Chart,
+  ChartLegend,
+  ChartLegendItem,
+  ChartMetric,
   uixChartPalette
 });

package/dist/chart.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { C as ChartProps } from './ChartCore-Bt1C84ty.cjs';
-export { a as ChartTableRow, u as uixChartPalette } from './ChartCore-Bt1C84ty.cjs';
+import { C as ChartProps } from './ChartCore-Do6gRBN3.cjs';
+export { a as ChartLegend, b as ChartLegendItem, c as ChartLegendItemProps, d as ChartLegendProps, e as ChartMetric, f as ChartMetricProps, g as ChartTableRow, u as uixChartPalette } from './ChartCore-Do6gRBN3.cjs';
 import 'echarts';
 
 /** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */

package/dist/chart.d.ts

@@ -1,4 +1,4 @@
 export { Chart } from './components/Chart.js';
-export { ChartProps, ChartTableRow, uixChartPalette } from './components/ChartCore.js';
+export { ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartProps, ChartTableRow, uixChartPalette } from './components/ChartCore.js';
 import 'react';
 import 'echarts';

package/dist/chart.js

@@ -1,5 +1,8 @@
-import { Chart, uixChartPalette } from "./components/Chart.js";
+import { Chart, ChartLegend, ChartLegendItem, ChartMetric, uixChartPalette } from "./components/Chart.js";
 export {
   Chart,
+  ChartLegend,
+  ChartLegendItem,
+  ChartMetric,
   uixChartPalette
 };

package/dist/components/Alert.js

@@ -1,13 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Alert({ tone, title, icon, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
-    icon && /* @__PURE__ */ jsx("div", { className: "uix-alert__icon", children: icon }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      title && /* @__PURE__ */ jsx("div", { className: "uix-alert__title", children: title }),
-      children && /* @__PURE__ */ jsx("div", { className: "uix-alert__body", children })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className),
+      role: tone === "danger" || tone === "warning" ? "alert" : "status",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "uix-alert__icon", children: icon }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          title && /* @__PURE__ */ jsx("div", { className: "uix-alert__title", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: "uix-alert__body", children })
+        ] })
+      ]
+    }
+  );
 }
 export {
   Alert

package/dist/components/AppShell.d.ts

@@ -17,10 +17,12 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     onExitFocus?: () => void;
     /** Drop the content gutter so a genuinely wide table runs edge-to-edge. */
     mainBleed?: boolean;
+    /** id given to `<main>` and targeted by the skip link. Override on collision (UIX-A11Y-2). */
+    mainId?: string;
     sidebar?: ReactNode;
     topbar?: ReactNode;
     children?: ReactNode;
 }
-declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
+declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, className, ...props }: AppShellProps): react.JSX.Element;
 
 export { AppShell, type AppShellProps, type ShellNav };

package/dist/components/AppShell.js

@@ -8,6 +8,7 @@ function AppShell({
   focus,
   onExitFocus,
   mainBleed,
+  mainId = "uix-main",
   sidebar,
   topbar,
   children,
@@ -32,9 +33,10 @@ function AppShell({
       "data-focus": focus || void 0,
       ...props,
       children: [
+        /* @__PURE__ */ jsx("a", { className: "uix-skiplink", href: `#${mainId}`, children: "Skip to content" }),
         sidebar && /* @__PURE__ */ jsx("div", { className: "uix-shell__sidebar", children: sidebar }),
         topbar && /* @__PURE__ */ jsx("div", { className: "uix-shell__topbar", children: topbar }),
-        /* @__PURE__ */ jsx("main", { className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
+        /* @__PURE__ */ jsx("main", { id: mainId, tabIndex: -1, className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
         focus && onExitFocus && /* @__PURE__ */ jsx("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: "Esc \xB7 Exit focus" }) })
       ]
     }

package/dist/components/Avatar.js

@@ -3,7 +3,8 @@ import { cx } from "../cx.js";
 function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
   return /* @__PURE__ */ jsxs("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
     src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "" }) : children,
-    status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status" })
+    status && /* @__PURE__ */ jsx("span", { className: "uix-avatar__status", "aria-hidden": "true" }),
+    status && /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: "online" })
   ] });
 }
 function AvatarGroup({ children, className, ...props }) {

package/dist/components/Button.js

@@ -1,24 +1,40 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cx } from "../cx.js";
+let warnedIconButton = false;
 const Button = forwardRef(
-  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      className: cx(
-        "uix-btn",
-        `uix-btn--${variant}`,
-        size !== "md" && `uix-btn--${size}`,
-        icon && "uix-btn--icon",
-        className
-      ),
-      disabled: disabled || loading,
-      "data-loading": loading || void 0,
-      ...props,
-      children
+  ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, onClick, ...props }, ref) => {
+    if (!warnedIconButton && icon && children == null && !props["aria-label"] && !props["aria-labelledby"] && typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+      warnedIconButton = true;
+      console.warn("uix: icon-only <Button> has no accessible name \u2014 pass aria-label or aria-labelledby.");
     }
-  )
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cx(
+          "uix-btn",
+          `uix-btn--${variant}`,
+          size !== "md" && `uix-btn--${size}`,
+          icon && "uix-btn--icon",
+          className
+        ),
+        disabled,
+        "aria-disabled": loading || void 0,
+        "aria-busy": loading || void 0,
+        "data-loading": loading || void 0,
+        onClick: loading || onClick ? (e) => {
+          if (loading) {
+            e.preventDefault();
+            return;
+          }
+          onClick?.(e);
+        } : void 0,
+        ...props,
+        children
+      }
+    );
+  }
 );
 Button.displayName = "Button";
 function ButtonGroup({ children, className }) {

package/dist/components/Card.d.ts

@@ -3,12 +3,14 @@ import { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
+    /** Element for the title — pick a real heading to slot the card into the page outline (UIX-A11Y-4). Default `div` keeps legacy rendering. */
+    titleAs?: 'h2' | 'h3' | 'h4' | 'div';
     subtitle?: ReactNode;
     headerAction?: ReactNode;
     footer?: ReactNode;
     children?: ReactNode;
 }
-declare function Card({ title, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+declare function Card({ title, titleAs: TitleTag, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
 interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title'> {
     title?: ReactNode;
     subtitle?: ReactNode;

package/dist/components/Card.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function Card({ title, subtitle, headerAction, footer, children, className, ...props }) {
+function Card({ title, titleAs: TitleTag = "div", subtitle, headerAction, footer, children, className, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-card", className), ...props, children: [
     hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-        title && /* @__PURE__ */ jsx("div", { className: "uix-card__title", children: title }),
+        title && /* @__PURE__ */ jsx(TitleTag, { className: "uix-card__title", children: title }),
         subtitle && /* @__PURE__ */ jsx("div", { className: "uix-card__subtitle", children: subtitle })
       ] }),
       headerAction

package/dist/components/Chart.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ChartProps } from './ChartCore.js';
-export { ChartTableRow, uixChartPalette } from './ChartCore.js';
+export { ChartLegend, ChartLegendItem, ChartLegendItemProps, ChartLegendProps, ChartMetric, ChartMetricProps, ChartTableRow, uixChartPalette } from './ChartCore.js';
 import 'echarts';
 
 /** Full-compatibility adapter. Use `@tensor_1/react/chart/preset` for the lean preset. */

package/dist/components/Chart.js

@@ -2,11 +2,14 @@
 import { jsx } from "react/jsx-runtime";
 import * as echarts from "echarts";
 import { ChartCore } from "./ChartCore.js";
-import { uixChartPalette } from "./ChartCore.js";
+import { ChartLegend, ChartLegendItem, ChartMetric, uixChartPalette } from "./ChartCore.js";
 function Chart(props) {
   return /* @__PURE__ */ jsx(ChartCore, { ...props, engine: echarts });
 }
 export {
   Chart,
+  ChartLegend,
+  ChartLegendItem,
+  ChartMetric,
   uixChartPalette
 };

package/dist/components/ChartCore.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, HTMLAttributes } from 'react';
 import { EChartsOption, ECharts } from 'echarts';
 
 interface ChartEngine {
@@ -23,11 +23,32 @@ interface ChartProps {
     tableHeaders?: string[];
     onReady?: (chart: ECharts) => void;
     header?: ReactNode;
+    headerAction?: ReactNode;
+    footer?: ReactNode;
+    loading?: boolean;
+    empty?: ReactNode;
 }
 interface ChartCoreProps extends ChartProps {
     engine: ChartEngine;
 }
 /** Shared chart lifecycle. Runtime adapters only choose the ECharts build. */
-declare function ChartCore({ engine, option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, }: ChartCoreProps): react.JSX.Element;
+declare function ChartCore({ engine, option, title, subtitle, height, className, style, ariaLabel, tableData, tableHeaders, onReady, header, headerAction, footer, loading, empty, }: ChartCoreProps): react.JSX.Element;
+interface ChartMetricProps extends HTMLAttributes<HTMLDivElement> {
+    value: ReactNode;
+    label?: ReactNode;
+    delta?: ReactNode;
+    deltaTone?: 'neutral' | 'positive' | 'negative' | 'warning';
+}
+declare function ChartMetric({ value, label, delta, deltaTone, className, ...props }: ChartMetricProps): react.JSX.Element;
+interface ChartLegendProps extends HTMLAttributes<HTMLUListElement> {
+    children?: ReactNode;
+}
+declare function ChartLegend({ children, className, ...props }: ChartLegendProps): react.JSX.Element;
+interface ChartLegendItemProps extends HTMLAttributes<HTMLLIElement> {
+    label: ReactNode;
+    color?: string;
+    swatch?: 'block' | 'line' | 'dash';
+}
+declare function ChartLegendItem({ label, color, swatch, className, style, ...props }: ChartLegendItemProps): react.JSX.Element;
 
-export { ChartCore, type ChartEngine, type ChartProps, type ChartTableRow, uixChartPalette };
+export { ChartCore, type ChartEngine, ChartLegend, ChartLegendItem, type ChartLegendItemProps, type ChartLegendProps, ChartMetric, type ChartMetricProps, type ChartProps, type ChartTableRow, uixChartPalette };