@tensor_1/react 2.14.2 → 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/combobox-model.d.ts

@@ -0,0 +1,9 @@
+interface ComboboxOption {
+    value: string;
+    label: string;
+    keywords?: readonly string[];
+    disabled?: boolean;
+}
+declare function filterComboboxOptions(options: readonly ComboboxOption[], query: string): ComboboxOption[];
+
+export { type ComboboxOption, filterComboboxOptions };

package/dist/combobox-model.js

@@ -0,0 +1,10 @@
+function filterComboboxOptions(options, query) {
+  const needle = query.trim().toLocaleLowerCase();
+  if (!needle) return [...options];
+  return options.filter(
+    (option) => [option.label, option.value, ...option.keywords ?? []].some((part) => part.toLocaleLowerCase().includes(needle))
+  );
+}
+export {
+  filterComboboxOptions
+};

package/dist/components/AsyncOperationStatus.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type AsyncOperationState = 'queued' | 'running' | 'complete' | 'failed';
+interface AsyncOperationStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    state: AsyncOperationState;
+    title: ReactNode;
+    statusLabel: ReactNode;
+    description?: ReactNode;
+    progress?: number;
+    progressLabel?: string;
+    action?: ReactNode;
+}
+declare function AsyncOperationStatus({ state, title, statusLabel, description, progress, progressLabel, action, className, ...props }: AsyncOperationStatusProps): react.JSX.Element;
+
+export { type AsyncOperationState, AsyncOperationStatus, type AsyncOperationStatusProps };

package/dist/components/AsyncOperationStatus.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { Progress } from "./Progress.js";
+import { StatusPill } from "./StatusPill.js";
+const tones = {
+  queued: "neutral",
+  running: "info",
+  complete: "success",
+  failed: "danger"
+};
+function AsyncOperationStatus({ state, title, statusLabel, description, progress, progressLabel, action, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-operation", className), role: state === "failed" ? "alert" : "status", "aria-live": "polite", ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-operation__head", children: [
+      /* @__PURE__ */ jsx("strong", { children: title }),
+      /* @__PURE__ */ jsx(StatusPill, { tone: tones[state], children: statusLabel })
+    ] }),
+    description != null && /* @__PURE__ */ jsx("div", { className: "uix-operation__description", children: description }),
+    progress != null && /* @__PURE__ */ jsx(Progress, { value: progress, "aria-label": progressLabel }),
+    action != null && /* @__PURE__ */ jsx("div", { className: "uix-operation__action", children: action })
+  ] });
+}
+export {
+  AsyncOperationStatus
+};

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface BreadcrumbItem {
+    id?: string;
+    label: ReactNode;
+    href?: string;
+    current?: boolean;
+}
+interface BreadcrumbsProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    items: readonly BreadcrumbItem[];
+    label: string;
+    separator?: ReactNode;
+}
+/** Framework-neutral breadcrumb navigation. Route adapters can replace anchors at the application seam. */
+declare function Breadcrumbs({ items, label, separator, className, ...props }: BreadcrumbsProps): react.JSX.Element;
+
+export { type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps };

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+function Breadcrumbs({ items, label, separator = "/", className, ...props }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className, ...props, children: /* @__PURE__ */ jsx("ol", { className: "uix-breadcrumbs", children: items.map((item, index) => {
+    const current = item.current ?? index === items.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx("li", { className: "uix-breadcrumbs__sep", "aria-hidden": "true", children: separator }),
+      /* @__PURE__ */ jsx("li", { children: item.href && !current ? /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }) : /* @__PURE__ */ jsx("span", { "aria-current": current ? "page" : void 0, children: item.label }) })
+    ] }, item.id ?? `${item.href ?? "current"}-${index}`);
+  }) }) });
+}
+export {
+  Breadcrumbs
+};

package/dist/components/Card.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
 
 interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
@@ -9,5 +9,14 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     children?: ReactNode;
 }
 declare function Card({ title, subtitle, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title'> {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    headerAction?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+/** A whole-card anchor with visible hover and keyboard focus affordances. */
+declare function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }: CardLinkProps): react.JSX.Element;
 
-export { Card, type CardProps };
+export { Card, CardLink, type CardLinkProps, type CardProps };

package/dist/components/Card.js

@@ -14,6 +14,21 @@ function Card({ title, subtitle, headerAction, footer, children, className, ...p
     footer != null && /* @__PURE__ */ jsx("div", { className: "uix-card__footer", children: footer })
   ] });
 }
+function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }) {
+  const hasHeader = title != null || subtitle != null || headerAction != null;
+  return /* @__PURE__ */ jsxs("a", { className: cx("uix-card", "uix-card--interactive", className), ...props, children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        title != null && /* @__PURE__ */ jsx("div", { className: "uix-card__title", children: title }),
+        subtitle != null && /* @__PURE__ */ jsx("div", { className: "uix-card__subtitle", children: subtitle })
+      ] }),
+      headerAction
+    ] }),
+    children != null && /* @__PURE__ */ jsx("div", { className: "uix-card__body", children }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-card__footer", children: footer })
+  ] });
+}
 export {
-  Card
+  Card,
+  CardLink
 };

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/CollapsibleSection.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { DetailsHTMLAttributes, ReactNode } from 'react';
+
+interface CollapsibleSectionProps extends Omit<DetailsHTMLAttributes<HTMLDetailsElement>, 'title'> {
+    title: ReactNode;
+    summary?: ReactNode;
+    children?: ReactNode;
+}
+declare function CollapsibleSection({ title, summary, children, className, ...props }: CollapsibleSectionProps): react.JSX.Element;
+
+export { CollapsibleSection, type CollapsibleSectionProps };