@tensor_1/react 2.15.0 → 2.16.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);
@@ -69,7 +72,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,6 +84,7 @@ 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;
   latestOptionRef.current = option;
   onReadyRef.current = onReady;
   (0, import_react.useEffect)(() => {
@@ -110,7 +118,7 @@ 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;
@@ -121,12 +129,15 @@ function ChartCore({
   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 +146,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: [
       /* @__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 +193,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);
@@ -67,7 +70,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,6 +82,7 @@ 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;
   latestOptionRef.current = option;
   onReadyRef.current = onReady;
   (0, import_react.useEffect)(() => {
@@ -108,7 +116,7 @@ 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;
@@ -119,12 +127,15 @@ function ChartCore({
   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 +144,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: [
       /* @__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 +178,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/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 };

package/dist/components/ChartCore.js

@@ -21,7 +21,11 @@ function ChartCore({
   tableData,
   tableHeaders,
   onReady,
-  header
+  header,
+  headerAction,
+  footer,
+  loading = false,
+  empty
 }) {
   const containerRef = useRef(null);
   const chartRef = useRef(null);
@@ -29,6 +33,7 @@ function ChartCore({
   const latestOptionRef = useRef(option);
   const onReadyRef = useRef(onReady);
   const tableId = useId();
+  const hasEmpty = empty != null;
   latestOptionRef.current = option;
   onReadyRef.current = onReady;
   useEffect(() => {
@@ -62,7 +67,7 @@ function ChartCore({
       chartRef.current = null;
       appliedOptionRef.current = null;
     };
-  }, [engine]);
+  }, [engine, hasEmpty]);
   useEffect(() => {
     const chart = chartRef.current;
     if (!chart || appliedOptionRef.current === option) return;
@@ -73,12 +78,15 @@ function ChartCore({
   const effectiveAriaLabel = ariaLabel ?? title ?? "Chart";
   const hasTable = Boolean(tableData?.length && tableHeaders?.length);
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart", className), style, children: [
-    title != null || subtitle != null || header != null ? /* @__PURE__ */ jsxs("div", { children: [
-      header,
-      title ? /* @__PURE__ */ jsx("div", { className: "uix-chart__title", children: title }) : null,
-      subtitle ? /* @__PURE__ */ jsx("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+    title != null || subtitle != null || header != null || headerAction != null ? /* @__PURE__ */ jsxs("div", { className: "uix-chart__header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "uix-chart__heading", children: [
+        header,
+        title ? /* @__PURE__ */ jsx("div", { className: "uix-chart__title", children: title }) : null,
+        subtitle ? /* @__PURE__ */ jsx("div", { className: "uix-chart__subtitle", children: subtitle }) : null
+      ] }),
+      headerAction
     ] }) : null,
-    /* @__PURE__ */ jsx(
+    hasEmpty ? /* @__PURE__ */ jsx("div", { className: "uix-chart__plot", "data-empty": true, children: empty }) : /* @__PURE__ */ jsx("div", { className: "uix-chart__plot", "data-loading": loading || void 0, "aria-busy": loading || void 0, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref: containerRef,
@@ -87,14 +95,35 @@ function ChartCore({
         "aria-label": effectiveAriaLabel,
         "aria-describedby": hasTable ? tableId : void 0
       }
-    ),
+    ) }),
     hasTable ? /* @__PURE__ */ jsxs("table", { id: tableId, className: "sr-only", "aria-label": `${effectiveAriaLabel} \u2014 data table`, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, label)) }) }),
       /* @__PURE__ */ jsx("tbody", { children: tableData.map((row, index) => /* @__PURE__ */ jsx("tr", { children: tableHeaders.map((label) => /* @__PURE__ */ jsx("td", { children: row[label] }, label)) }, index)) })
-    ] }) : null
+    ] }) : null,
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-chart__footer", children: footer })
+  ] });
+}
+function ChartMetric({ value, label, delta, deltaTone = "neutral", className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-chart__metric", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "uix-chart__metric-value", children: value }),
+    label != null && /* @__PURE__ */ jsx("div", { className: "uix-chart__metric-label", children: label }),
+    delta != null && /* @__PURE__ */ jsx("div", { className: "uix-chart__delta", "data-tone": deltaTone, children: delta })
+  ] });
+}
+function ChartLegend({ children, className, ...props }) {
+  return /* @__PURE__ */ 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__ */ jsxs("li", { className: cx("uix-legend__item", className), style: mergedStyle, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: cx("uix-legend__swatch", swatch !== "block" && `uix-legend__swatch--${swatch}`), "aria-hidden": "true" }),
+    label
   ] });
 }
 export {
   ChartCore,
+  ChartLegend,
+  ChartLegendItem,
+  ChartMetric,
   uixChartPalette
 };

package/dist/components/Flow.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type FlowVariant = 'linear' | 'branch' | 'loop' | 'mindmap' | 'canvas';
+type FlowNodeState = 'pending' | 'active' | 'running' | 'done' | 'error';
+interface FlowProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: FlowVariant;
+    panel?: boolean;
+    children?: ReactNode;
+}
+/** Presentational workflow surface. Consumers provide graph geometry and connectors. */
+declare function Flow({ variant, panel, children, className, role, ...props }: FlowProps): react.JSX.Element;
+interface FlowNodeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    state?: FlowNodeState;
+    stateLabel?: ReactNode;
+    eyebrow?: ReactNode;
+    meta?: ReactNode;
+    icon?: ReactNode;
+    footer?: ReactNode;
+    wide?: boolean;
+}
+/** Workflow node with explicit text state and optional operational metadata. */
+declare function FlowNode({ title, state, stateLabel, eyebrow, meta, icon, footer, wide, className, ...props }: FlowNodeProps): react.JSX.Element;
+
+export { Flow, FlowNode, type FlowNodeProps, type FlowNodeState, type FlowProps, type FlowVariant };

package/dist/components/Flow.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Flow({ variant = "linear", panel = false, children, className, role = "group", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("uix-flow", `uix-flow--${variant}`, panel && "uix-flow--panel", className),
+      role,
+      ...props,
+      children
+    }
+  );
+}
+const FLOW_STATE_LABELS = {
+  pending: "Pending",
+  active: "Active",
+  running: "Running",
+  done: "Done",
+  error: "Error"
+};
+function FlowNode({
+  title,
+  state = "pending",
+  stateLabel,
+  eyebrow,
+  meta,
+  icon,
+  footer,
+  wide = false,
+  className,
+  ...props
+}) {
+  const resolvedStateLabel = stateLabel ?? FLOW_STATE_LABELS[state];
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-node", `uix-node--${state}`, icon == null && "uix-node--no-icon", wide && "uix-node--wide", className), ...props, children: [
+    icon != null && /* @__PURE__ */ jsx("span", { className: "uix-node__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-node__body", children: [
+      eyebrow != null && /* @__PURE__ */ jsx("div", { className: "uix-node__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ jsx("div", { className: "uix-node__title", children: title }),
+      meta != null && /* @__PURE__ */ jsx("div", { className: "uix-node__meta", children: meta }),
+      /* @__PURE__ */ jsx("div", { className: "uix-node__status", children: resolvedStateLabel })
+    ] }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-node__footer", children: footer })
+  ] });
+}
+export {
+  Flow,
+  FlowNode
+};

package/dist/components/Pipeline.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type PipelineStageState = 'pending' | 'waiting' | 'active' | 'current' | 'running' | 'done' | 'complete' | 'blocked' | 'failed' | 'error';
+interface PipelineProps extends HTMLAttributes<HTMLOListElement> {
+    detailed?: boolean;
+    children?: ReactNode;
+}
+/** Ordered progress rail. Consumers own workflow meaning; UIx owns stage semantics and presentation. */
+declare function Pipeline({ detailed, children, className, tabIndex, ...props }: PipelineProps): react.JSX.Element;
+interface PipelineStageProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    label: ReactNode;
+    state?: PipelineStageState;
+    stateLabel?: ReactNode;
+    description?: ReactNode;
+    meta?: ReactNode;
+    marker?: ReactNode;
+    detailed?: boolean;
+    /** Marks the stage as the current position independently of its operational state. */
+    current?: boolean;
+}
+/** One pipeline stage. `stateLabel` keeps status explicit instead of relying on colour. */
+declare function PipelineStage({ label, state, stateLabel, description, meta, marker, detailed, current: currentProp, className, ...props }: PipelineStageProps): react.JSX.Element;
+
+export { Pipeline, type PipelineProps, PipelineStage, type PipelineStageProps, type PipelineStageState };

package/dist/components/Pipeline.js

@@ -0,0 +1,65 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { cx } from "../cx.js";
+function Pipeline({ detailed = false, children, className, tabIndex, ...props }) {
+  const stages = detailed ? Children.map(children, (child) => isValidElement(child) && child.type === PipelineStage ? cloneElement(child, { detailed: child.props.detailed ?? true }) : child) : children;
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cx("uix-pipeline", detailed && "uix-pipeline--detailed", className),
+      tabIndex: tabIndex ?? (detailed ? 0 : void 0),
+      ...props,
+      children: stages
+    }
+  );
+}
+const DEFAULT_STATE_LABELS = {
+  pending: "Pending",
+  waiting: "Waiting",
+  active: "Active",
+  current: "Current",
+  running: "Running",
+  done: "Done",
+  complete: "Complete",
+  blocked: "Blocked",
+  failed: "Failed",
+  error: "Error"
+};
+function PipelineStage({
+  label,
+  state = "pending",
+  stateLabel,
+  description,
+  meta,
+  marker,
+  detailed = false,
+  current: currentProp,
+  className,
+  ...props
+}) {
+  const current = currentProp ?? (state === "active" || state === "current" || state === "running");
+  const resolvedStateLabel = stateLabel ?? DEFAULT_STATE_LABELS[state];
+  const showDetails = detailed || description != null || meta != null || marker != null;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      className: cx("uix-pipeline__stage", className),
+      "data-state": state,
+      "aria-current": current ? "step" : void 0,
+      ...props,
+      children: showDetails ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-pipeline__marker", "aria-hidden": "true", children: marker }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-pipeline__content", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-pipeline__eyebrow", children: /* @__PURE__ */ jsx("span", { className: "uix-pipeline__state", children: resolvedStateLabel }) }),
+          /* @__PURE__ */ jsx("div", { className: "uix-pipeline__title", children: label }),
+          description != null && /* @__PURE__ */ jsx("div", { className: "uix-pipeline__description", children: description }),
+          meta != null && /* @__PURE__ */ jsx("div", { className: "uix-pipeline__meta", children: meta })
+        ] })
+      ] }) : label
+    }
+  );
+}
+export {
+  Pipeline,
+  PipelineStage
+};