@jini-ai/ui 0.4.6 → 0.4.8

package/dist/features/interactive-ui/providers/recharts/chart-tokens.d.ts

@@ -15,7 +15,7 @@
  * "Claude orange should be the default color" (owner, 2026-10-05). The values live in CSS, never
  * here, so a host's theme stays the single owner of color.
  */
-/** Categorical series colors in fixed order (assign by position, never cycle past the end silently). */
+/** Categorical series colors in fixed order; larger datasets repeat the palette with named legends. */
 export declare const CHART_SERIES_COLORS: readonly ["var(--jini-chart-1, var(--jini-chart-default-1))", "var(--jini-chart-2, var(--jini-chart-default-2))", "var(--jini-chart-3, var(--jini-chart-default-3))", "var(--jini-chart-4, var(--jini-chart-default-4))", "var(--jini-chart-5, var(--jini-chart-default-5))", "var(--jini-chart-6, var(--jini-chart-default-6))"];
 /** The single-series color (bar fill, line stroke). */
 export declare const CHART_PRIMARY_COLOR: "var(--jini-chart-1, var(--jini-chart-default-1))";
@@ -24,20 +24,26 @@ export declare const CHART_GRID_STROKE = "var(--jini-chart-grid, var(--jini-bord
 /** Axis tick label props: muted ink, never the series color. */
 export declare const CHART_AXIS_TICK: {
     readonly fill: "var(--jini-chart-axis, var(--jini-muted))";
+    readonly fontSize: 12;
+};
+/** Shared axis chrome; category visibility and numeric formatting remain separate concerns. */
+export declare const CHART_AXIS_PROPS: {
+    readonly tick: {
+        readonly fill: "var(--jini-chart-axis, var(--jini-muted))";
+        readonly fontSize: 12;
+    };
+    readonly tickLine: false;
+    readonly axisLine: false;
+    readonly tickMargin: 10;
+};
+/** Hover points use the same series ink, with a surface halo in either color scheme. */
+export declare const CHART_ACTIVE_DOT: {
+    readonly r: 5;
+    readonly stroke: "var(--jini-chart-surface, var(--jini-bg))";
+    readonly strokeWidth: 2;
 };
 /** The hover band behind a hovered bar (recharts' default is an opaque grey block). */
 export declare const CHART_CURSOR: {
     readonly fill: "var(--jini-chart-cursor, var(--jini-accent-soft))";
 };
-/** Tooltip box: theme surface and ink, so it does not stay a white box in dark mode. */
-export declare const CHART_TOOLTIP_CONTENT_STYLE: {
-    readonly background: "var(--jini-chart-surface, var(--jini-bg))";
-    readonly border: "1px solid var(--jini-chart-grid, var(--jini-border))";
-    readonly borderRadius: "var(--jini-radius-sm)";
-    readonly color: "var(--jini-chart-text, var(--jini-text))";
-};
-/** Tooltip label and value ink: text tokens, never the series color (recharts' item default). */
-export declare const CHART_TOOLTIP_TEXT_STYLE: {
-    readonly color: "var(--jini-chart-text, var(--jini-text))";
-};
 //# sourceMappingURL=chart-tokens.d.ts.map

package/dist/features/interactive-ui/providers/recharts/chart-tokens.js

@@ -15,7 +15,7 @@
  * "Claude orange should be the default color" (owner, 2026-10-05). The values live in CSS, never
  * here, so a host's theme stays the single owner of color.
  */
-/** Categorical series colors in fixed order (assign by position, never cycle past the end silently). */
+/** Categorical series colors in fixed order; larger datasets repeat the palette with named legends. */
 export const CHART_SERIES_COLORS = [
     'var(--jini-chart-1, var(--jini-chart-default-1))',
     'var(--jini-chart-2, var(--jini-chart-default-2))',
@@ -29,16 +29,11 @@ export const CHART_PRIMARY_COLOR = CHART_SERIES_COLORS[0];
 /** Grid lines and axis lines: recessive. */
 export const CHART_GRID_STROKE = 'var(--jini-chart-grid, var(--jini-border))';
 /** Axis tick label props: muted ink, never the series color. */
-export const CHART_AXIS_TICK = { fill: 'var(--jini-chart-axis, var(--jini-muted))' };
+export const CHART_AXIS_TICK = { fill: 'var(--jini-chart-axis, var(--jini-muted))', fontSize: 12 };
+/** Shared axis chrome; category visibility and numeric formatting remain separate concerns. */
+export const CHART_AXIS_PROPS = { tick: CHART_AXIS_TICK, tickLine: false, axisLine: false, tickMargin: 10 };
+/** Hover points use the same series ink, with a surface halo in either color scheme. */
+export const CHART_ACTIVE_DOT = { r: 5, stroke: 'var(--jini-chart-surface, var(--jini-bg))', strokeWidth: 2 };
 /** The hover band behind a hovered bar (recharts' default is an opaque grey block). */
 export const CHART_CURSOR = { fill: 'var(--jini-chart-cursor, var(--jini-accent-soft))' };
-/** Tooltip box: theme surface and ink, so it does not stay a white box in dark mode. */
-export const CHART_TOOLTIP_CONTENT_STYLE = {
-    background: 'var(--jini-chart-surface, var(--jini-bg))',
-    border: `1px solid ${CHART_GRID_STROKE}`,
-    borderRadius: 'var(--jini-radius-sm)',
-    color: 'var(--jini-chart-text, var(--jini-text))',
-};
-/** Tooltip label and value ink: text tokens, never the series color (recharts' item default). */
-export const CHART_TOOLTIP_TEXT_STYLE = { color: 'var(--jini-chart-text, var(--jini-text))' };
 //# sourceMappingURL=chart-tokens.js.map

package/dist/features/interactive-ui/providers/recharts/chart.d.ts

@@ -0,0 +1,31 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type ChartConfig } from './chart-config.js';
+interface ChartContainerProps {
+    readonly config: ChartConfig;
+    readonly title: string;
+    readonly description: string;
+    readonly children: ReactElement;
+}
+/** Shared, measurable chart frame with an accessible caption and a wrapping legend. */
+export declare function ChartContainer({ config, title, description, children }: ChartContainerProps): ReactElement;
+interface ChartTooltipEntry {
+    readonly dataKey?: unknown;
+    readonly name?: string | number;
+    readonly value?: unknown;
+    readonly color?: string;
+    readonly type?: string;
+    readonly payload?: {
+        readonly _jiniChartKey?: string;
+    };
+}
+interface ChartTooltipContentProps {
+    readonly active?: boolean;
+    readonly label?: ReactNode;
+    readonly payload?: readonly ChartTooltipEntry[];
+}
+/** Shadcn-style tooltip card; series config owns both labels and swatch colors. */
+export declare function ChartTooltipContent({ active, label, payload }: ChartTooltipContentProps): ReactElement | null;
+/** Compact named legend; pie values remain readable without hover or outside labels. */
+export declare function ChartLegendContent(): ReactElement | null;
+export {};
+//# sourceMappingURL=chart.d.ts.map

package/dist/features/interactive-ui/providers/recharts/chart.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId } from 'react';
+import { ResponsiveContainer } from 'recharts';
+import { formatChartValue } from './chart-config.js';
+import { CHART_PRIMARY_COLOR } from './chart-tokens.js';
+const ChartContext = createContext({});
+/** Shared, measurable chart frame with an accessible caption and a wrapping legend. */
+export function ChartContainer({ config, title, description, children }) {
+    const id = useId();
+    return (_jsx(ChartContext.Provider, { value: config, children: _jsxs("figure", { className: "jini-chart", "aria-label": title, "aria-describedby": `${id}-description`, children: [_jsxs("figcaption", { className: "jini-chart-caption", children: [_jsx("span", { children: title }), _jsx("span", { id: `${id}-description`, children: description })] }), _jsx(ResponsiveContainer, { width: "100%", height: 300, minWidth: 0, children: children }), _jsx(ChartLegendContent, {})] }) }));
+}
+/** Shadcn-style tooltip card; series config owns both labels and swatch colors. */
+export function ChartTooltipContent({ active, label, payload = [] }) {
+    const config = useContext(ChartContext);
+    const entries = payload.filter((entry) => entry.type !== 'none' && entry.value != null);
+    if (!active || entries.length === 0)
+        return null;
+    return (_jsxs("div", { className: "jini-chart-tooltip", role: "tooltip", "aria-live": "polite", "aria-atomic": "true", children: [label != null && _jsx("div", { className: "jini-chart-tooltip-label", children: label }), _jsx("div", { className: "jini-chart-tooltip-items", children: entries.map((entry, index) => {
+                    // Pie names may repeat; its internal key keeps swatches tied to the actual slice.
+                    const dataKey = String(entry.dataKey ?? entry.name);
+                    const key = Object.hasOwn(config, dataKey) ? dataKey : entry.payload?._jiniChartKey ?? dataKey;
+                    const series = Object.hasOwn(config, key) ? config[key] : undefined;
+                    return (_jsxs("div", { className: "jini-chart-tooltip-item", children: [_jsx("span", { className: "jini-chart-swatch", style: { backgroundColor: series?.color ?? entry.color ?? CHART_PRIMARY_COLOR }, "aria-hidden": "true" }), _jsx("span", { className: "jini-chart-tooltip-name", children: series?.label ?? String(entry.name ?? entry.dataKey ?? 'Value') }), _jsx("span", { className: "jini-chart-tooltip-value", children: formatChartValue({ value: entry.value }) })] }, `${key}-${index}`));
+                }) })] }));
+}
+/** Compact named legend; pie values remain readable without hover or outside labels. */
+export function ChartLegendContent() {
+    const config = useContext(ChartContext);
+    const entries = Object.entries(config);
+    if (entries.length === 0)
+        return null;
+    return (_jsx("ul", { className: "jini-chart-legend", "aria-label": "Chart legend", children: entries.map(([key, series]) => (_jsxs("li", { className: "jini-chart-legend-item", children: [_jsx("span", { className: "jini-chart-swatch", style: { backgroundColor: series.color }, "aria-hidden": "true" }), _jsx("span", { children: series.label }), series.value !== undefined && _jsx("span", { className: "jini-chart-legend-value", children: formatChartValue({ value: series.value }) })] }, key))) }));
+}
+//# sourceMappingURL=chart.js.map

package/dist/features/interactive-ui/providers/recharts/line-chart.js

@@ -1,7 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CartesianGrid, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
-import { CHART_AXIS_TICK, CHART_GRID_STROKE, CHART_PRIMARY_COLOR, CHART_TOOLTIP_CONTENT_STYLE, CHART_TOOLTIP_TEXT_STYLE } from './chart-tokens.js';
+import { useId } from 'react';
+import { Area, CartesianGrid, ComposedChart, Line, Tooltip, XAxis, YAxis } from 'recharts';
+import { CHART_ACTIVE_DOT, CHART_AXIS_PROPS, CHART_GRID_STROKE, CHART_PRIMARY_COLOR } from './chart-tokens.js';
+import { chartTickFormatter, createChartConfig } from './chart-config.js';
+import { ChartContainer, ChartTooltipContent } from './chart.js';
 export function LineChart({ data, categoryKey, valueKey, color = CHART_PRIMARY_COLOR }) {
-    return (_jsx(ResponsiveContainer, { width: "100%", height: 300, children: _jsxs(RechartsLineChart, { data: data, children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: CHART_GRID_STROKE, vertical: false }), _jsx(XAxis, { dataKey: categoryKey, interval: 0, tick: CHART_AXIS_TICK, stroke: CHART_GRID_STROKE, tickLine: false }), _jsx(YAxis, { tick: CHART_AXIS_TICK, stroke: CHART_GRID_STROKE, tickLine: false, axisLine: false }), _jsx(Tooltip, { cursor: { stroke: CHART_GRID_STROKE }, contentStyle: CHART_TOOLTIP_CONTENT_STYLE, labelStyle: CHART_TOOLTIP_TEXT_STYLE, itemStyle: CHART_TOOLTIP_TEXT_STYLE }), _jsx(Line, { type: "monotone", dataKey: valueKey, stroke: color, strokeWidth: 2, isAnimationActive: false })] }) }));
+    const gradientId = `jini-chart-area-${useId().replace(/:/g, '')}`;
+    const config = createChartConfig({ series: [{ key: valueKey, label: valueKey }] }, { color });
+    const title = `${valueKey} by ${categoryKey}`;
+    const description = `Line chart with ${data.length} points. Use arrow keys to explore values.`;
+    return (_jsx(ChartContainer, { config: config, title: title, description: description, children: _jsxs(ComposedChart, { data: data, accessibilityLayer: true, title: title, desc: description, margin: { top: 16, right: 12, bottom: 8, left: 0 }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: config[valueKey].color, stopOpacity: 0.22 }), _jsx("stop", { offset: "100%", stopColor: config[valueKey].color, stopOpacity: 0.02 })] }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: CHART_GRID_STROKE, strokeOpacity: 0.6, vertical: false }), _jsx(XAxis, { dataKey: categoryKey, interval: 0, ...CHART_AXIS_PROPS }), _jsx(YAxis, { ...CHART_AXIS_PROPS, tickFormatter: chartTickFormatter, width: 48 }), _jsx(Tooltip, { cursor: { stroke: CHART_GRID_STROKE, strokeDasharray: '3 3' }, content: _jsx(ChartTooltipContent, {}), payloadUniqBy: (entry) => entry.graphicalItemId, isAnimationActive: false }), _jsx(Area, { type: "monotone", dataKey: valueKey, stroke: "none", fill: `url(#${gradientId})`, tooltipType: "none", legendType: "none", activeDot: false, isAnimationActive: false }), _jsx(Line, { type: "monotone", dataKey: valueKey, stroke: config[valueKey].color, strokeWidth: 2.5, dot: false, activeDot: CHART_ACTIVE_DOT, isAnimationActive: false })] }) }));
 }
 //# sourceMappingURL=line-chart.js.map

package/dist/features/interactive-ui/providers/recharts/pie-chart.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Cell, Pie, PieChart as RechartsPieChart, ResponsiveContainer, Tooltip } from 'recharts';
-import { CHART_PRIMARY_COLOR, CHART_SERIES_COLORS, CHART_TOOLTIP_CONTENT_STYLE, CHART_TOOLTIP_TEXT_STYLE } from './chart-tokens.js';
+import { Cell, Pie, PieChart as RechartsPieChart, Tooltip } from 'recharts';
+import { createChartConfig, formatChartValue } from './chart-config.js';
+import { ChartContainer, ChartTooltipContent } from './chart.js';
 export function PieChart({ data, color }) {
-    return (_jsx(ResponsiveContainer, { width: "100%", height: 300, children: _jsxs(RechartsPieChart, { children: [_jsx(Tooltip, { contentStyle: CHART_TOOLTIP_CONTENT_STYLE, labelStyle: CHART_TOOLTIP_TEXT_STYLE, itemStyle: CHART_TOOLTIP_TEXT_STYLE }), _jsx(Pie, { data: data, dataKey: "value", nameKey: "name", cx: "50%", cy: "50%", outerRadius: 100, label: true, isAnimationActive: false, children: data.map((entry, index) => (_jsx(Cell, { fill: color ?? CHART_SERIES_COLORS[index % CHART_SERIES_COLORS.length] ?? CHART_PRIMARY_COLOR }, entry.name))) })] }) }));
+    const slices = data.map((entry, index) => ({ ...entry, _jiniChartKey: `slice-${index}` }));
+    const config = createChartConfig({ series: slices.map((entry) => ({ key: entry._jiniChartKey, label: entry.name, value: entry.value })) }, { color });
+    const total = data.reduce((sum, entry) => sum + entry.value, 0);
+    const description = `Donut chart with ${data.length} categories. Total: ${formatChartValue({ value: total })}. Values are listed in the legend.`;
+    return (_jsx(ChartContainer, { config: config, title: "Distribution", description: description, children: _jsxs(RechartsPieChart, { accessibilityLayer: true, title: "Distribution", desc: description, margin: { top: 12, right: 12, bottom: 12, left: 12 }, children: [_jsx(Tooltip, { content: _jsx(ChartTooltipContent, {}), isAnimationActive: false }), _jsx(Pie, { data: slices, dataKey: "value", nameKey: "name", cx: "50%", cy: "50%", innerRadius: "55%", outerRadius: "78%", paddingAngle: 3, cornerRadius: 5, stroke: "none", label: false, labelLine: false, isAnimationActive: false, children: slices.map((entry) => (_jsx(Cell, { fill: config[entry._jiniChartKey].color }, entry._jiniChartKey))) }), _jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", className: "jini-chart-total", "aria-hidden": "true", children: [_jsx("tspan", { x: "50%", dy: "-0.2em", children: formatChartValue({ value: total }, { notation: 'compact' }) }), _jsx("tspan", { x: "50%", dy: "1.8em", className: "jini-chart-total-label", children: "Total" })] })] }) }));
 }
 //# sourceMappingURL=pie-chart.js.map

package/dist/features/interactive-ui/providers/shadcn/button.d.ts

@@ -8,7 +8,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "outline" | "ghost" | "destructive" | "secondary" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;

package/dist/features/interactive-ui/providers/shadcn/data-table.d.ts

@@ -5,9 +5,13 @@ export interface DataTableColumn {
 export interface DataTableProps {
     readonly columns: readonly DataTableColumn[];
     readonly rows: readonly Record<string, unknown>[];
+    /** Local header sorting; defaults to true. Initial row order is always preserved. */
+    readonly sortable?: boolean;
+    /** Opt-in local paging; omitted means all rows, preserving existing callers. */
+    readonly pageSize?: number;
     /** Host-wired, not part of the agent-facing wire schema — see data-table.manifest.ts. */
     readonly onRowClick?: (row: Record<string, unknown>, index: number) => void;
 }
 /** Composes shadcn's real `table.tsx` primitives into the same `columns`/`rows`/`onRowClick` contract `native.data-table` exposes. */
-export declare function DataTable({ columns, rows, onRowClick }: DataTableProps): import("react").JSX.Element;
+export declare function DataTable({ columns, rows, onRowClick, sortable, pageSize }: DataTableProps): import("react").JSX.Element;
 //# sourceMappingURL=data-table.d.ts.map

package/dist/features/interactive-ui/providers/shadcn/data-table.js

@@ -1,7 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { getNumericColumnKeys, sortTableRows } from '../../table-data.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table.js';
 /** Composes shadcn's real `table.tsx` primitives into the same `columns`/`rows`/`onRowClick` contract `native.data-table` exposes. */
-export function DataTable({ columns, rows, onRowClick }) {
-    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => (_jsx(TableHead, { children: column.label }, column.key))) }) }), _jsx(TableBody, { children: rows.map((row, index) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row, index) : undefined, role: onRowClick ? 'button' : undefined, children: columns.map((column) => (_jsx(TableCell, { children: String(row[column.key] ?? '') }, column.key))) }, index))) })] }));
+export function DataTable({ columns, rows, onRowClick, sortable = true, pageSize }) {
+    const [sort, setSort] = useState(null);
+    const [requestedPage, setPage] = useState(0);
+    const numericKeys = useMemo(() => getNumericColumnKeys({ columns, rows }), [columns, rows]);
+    const activeSort = sortable && columns.some((column) => column.key === sort?.key) ? sort : null;
+    const sortedRows = useMemo(() => sortTableRows({ rows, sort: activeSort, numericKeys }), [rows, activeSort, numericKeys]);
+    const requestedSize = pageSize !== undefined && Number.isInteger(pageSize) && pageSize > 0 ? pageSize : null;
+    const paging = requestedSize !== null;
+    const size = requestedSize ?? Math.max(rows.length, 1);
+    const pageCount = Math.max(1, Math.ceil(rows.length / size));
+    // Clamp during render so a smaller result set never shows a stale, empty page.
+    const page = paging ? Math.min(requestedPage, pageCount - 1) : 0;
+    const start = page * size;
+    const visibleRows = sortedRows.slice(start, start + size);
+    return (_jsxs("div", { className: "jini-data-table-frame", "data-table-provider": "shadcn", children: [_jsxs(Table, { className: "jini-data-table", children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => (_jsx(TableHead, { scope: "col", "data-numeric": numericKeys.has(column.key), "aria-sort": sortable ? (activeSort?.key === column.key ? activeSort.direction : 'none') : undefined, children: sortable ? (_jsxs("button", { type: "button", className: "jini-data-table-sort", onClick: () => {
+                                        setSort({ key: column.key, direction: activeSort?.key === column.key && activeSort.direction === 'ascending'
+                                                ? 'descending' : 'ascending' });
+                                        setPage(0);
+                                    }, children: [_jsx("span", { children: column.label }), _jsx("span", { "aria-hidden": "true", children: activeSort?.key === column.key ? (activeSort.direction === 'ascending' ? '↑' : '↓') : '↕' })] })) : column.label }, column.key))) }) }), _jsxs(TableBody, { children: [rows.length === 0 && _jsx(TableRow, { children: _jsx(TableCell, { className: "jini-data-table-empty", colSpan: columns.length, children: "No results." }) }), visibleRows.map(({ row, index }) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row, index) : undefined, role: onRowClick ? 'button' : undefined, tabIndex: onRowClick ? 0 : undefined, onKeyDown: onRowClick ? (event) => {
+                                    if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) {
+                                        event.preventDefault();
+                                        onRowClick(row, index);
+                                    }
+                                } : undefined, children: columns.map((column) => (_jsx(TableCell, { "data-numeric": numericKeys.has(column.key), children: String(row[column.key] ?? '') }, column.key))) }, index)))] })] }), paging && (_jsxs("div", { className: "jini-data-table-pagination", children: [_jsxs("span", { "aria-live": "polite", children: [rows.length === 0 ? 0 : start + 1, "\u2013", Math.min(start + size, rows.length), " of ", rows.length, " rows"] }), _jsxs("div", { className: "jini-data-table-pagination-controls", children: [_jsx("button", { type: "button", "aria-label": "Previous page", disabled: page === 0, onClick: () => setPage(page - 1), children: "Previous" }), _jsx("button", { type: "button", "aria-label": "Next page", disabled: page >= pageCount - 1, onClick: () => setPage(page + 1), children: "Next" })] })] }))] }));
 }
 //# sourceMappingURL=data-table.js.map

package/dist/features/interactive-ui/providers/shadcn/data-table.manifest.d.ts

@@ -1,7 +1,8 @@
 import { z } from 'zod';
 import type { InteractiveComponentManifest } from '../../types.js';
 /**
- * Same wire shape as `native.data-table` (see that manifest) — same capabilities, so
+ * Same required wire shape as `native.data-table` (see that manifest), plus optional local
+ * sorting/paging settings — shared capabilities, so
  * `resolveByCapability('data-table')` returns both, proving the fallback-chain mechanic across
  * two real providers. `.passthrough()` for the same reason as that manifest: an A2UI-embedded
  * instance may carry an `action` prop this schema doesn't itself validate.
@@ -18,6 +19,8 @@ export declare const shadcnDataTablePropsSchema: z.ZodObject<{
         label: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
+    sortable: z.ZodOptional<z.ZodBoolean>;
+    pageSize: z.ZodOptional<z.ZodNumber>;
 }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
     columns: z.ZodArray<z.ZodObject<{
         key: z.ZodString;
@@ -30,6 +33,8 @@ export declare const shadcnDataTablePropsSchema: z.ZodObject<{
         label: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
+    sortable: z.ZodOptional<z.ZodBoolean>;
+    pageSize: z.ZodOptional<z.ZodNumber>;
 }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
     columns: z.ZodArray<z.ZodObject<{
         key: z.ZodString;
@@ -42,6 +47,8 @@ export declare const shadcnDataTablePropsSchema: z.ZodObject<{
         label: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
+    sortable: z.ZodOptional<z.ZodBoolean>;
+    pageSize: z.ZodOptional<z.ZodNumber>;
 }, z.ZodTypeAny, "passthrough">>;
 export declare const shadcnDataTableManifest: InteractiveComponentManifest;
 //# sourceMappingURL=data-table.manifest.d.ts.map

package/dist/features/interactive-ui/providers/shadcn/data-table.manifest.js

@@ -1,6 +1,7 @@
 import { z } from 'zod';
 /**
- * Same wire shape as `native.data-table` (see that manifest) — same capabilities, so
+ * Same required wire shape as `native.data-table` (see that manifest), plus optional local
+ * sorting/paging settings — shared capabilities, so
  * `resolveByCapability('data-table')` returns both, proving the fallback-chain mechanic across
  * two real providers. `.passthrough()` for the same reason as that manifest: an A2UI-embedded
  * instance may carry an `action` prop this schema doesn't itself validate.
@@ -9,13 +10,15 @@ export const shadcnDataTablePropsSchema = z
     .object({
     columns: z.array(z.object({ key: z.string(), label: z.string() }).strict()).min(1),
     rows: z.array(z.record(z.unknown())),
+    sortable: z.boolean().optional(),
+    pageSize: z.number().int().min(1).max(100).optional(),
 })
     .passthrough();
 export const shadcnDataTableManifest = {
     id: 'shadcn.data-table',
     provider: 'shadcn',
-    capabilities: ['data-table', 'table', 'tabular-data'],
+    capabilities: ['data-table', 'table', 'tabular-data', 'spreadsheet', 'list-of-records'],
     propsSchema: shadcnDataTablePropsSchema,
-    description: 'shadcn/ui table primitives (real CLI-pulled source), composed into columns + rows, optional row click.',
+    description: 'Preferred styled table for tabular data, spreadsheets and lists of records: columns + rows, optional row click. Rounded border, sticky muted headers, row hover, numeric alignment and empty state. Client-side column sorting (sortable defaults to true); optional pageSize (1–100) enables paging. Load @jini-ai/ui/interactive-ui.css in the renderer host.',
 };
 //# sourceMappingURL=data-table.manifest.js.map

package/dist/features/interactive-ui/table-data.d.ts

@@ -0,0 +1,25 @@
+interface TableData {
+    readonly columns: readonly {
+        readonly key: string;
+    }[];
+    readonly rows: readonly Record<string, unknown>[];
+}
+export interface TableSort {
+    readonly key: string;
+    readonly direction: 'ascending' | 'descending';
+}
+/** Infer numeric columns once for both providers; empty cells do not turn a numeric column into text.
+ * @complexity O(c × r), c columns and r rows; no per-cell rescans during rendering. */
+export declare function getNumericColumnKeys({ columns, rows }: TableData, _options?: {}): ReadonlySet<string>;
+/** Sort a copy while preserving source indexes for host actions; missing values stay last in both directions.
+ * @complexity O(r log r) time and O(r) space for r rows; the caller memoizes the result. */
+export declare function sortTableRows({ rows, sort, numericKeys }: {
+    readonly rows: TableData['rows'];
+    readonly sort: TableSort | null;
+    readonly numericKeys: ReadonlySet<string>;
+}, _options?: {}): {
+    row: Record<string, unknown>;
+    index: number;
+}[];
+export {};
+//# sourceMappingURL=table-data.d.ts.map

package/dist/features/interactive-ui/table-data.js

@@ -0,0 +1,36 @@
+function isNumericValue(value) {
+    if (typeof value === 'number')
+        return Number.isFinite(value);
+    return typeof value === 'string' && /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(value.trim())
+        && Number.isFinite(Number(value));
+}
+/** Infer numeric columns once for both providers; empty cells do not turn a numeric column into text.
+ * @complexity O(c × r), c columns and r rows; no per-cell rescans during rendering. */
+export function getNumericColumnKeys({ columns, rows }, _options = {}) {
+    return new Set(columns.filter(({ key }) => {
+        const values = rows.map((row) => row[key]).filter((value) => value !== null && value !== undefined && value !== '');
+        return values.length > 0 && values.every(isNumericValue);
+    }).map(({ key }) => key));
+}
+/** Sort a copy while preserving source indexes for host actions; missing values stay last in both directions.
+ * @complexity O(r log r) time and O(r) space for r rows; the caller memoizes the result. */
+export function sortTableRows({ rows, sort, numericKeys }, _options = {}) {
+    const indexed = rows.map((row, index) => ({ row, index }));
+    if (!sort)
+        return indexed;
+    const { key, direction } = sort;
+    const multiplier = direction === 'ascending' ? 1 : -1;
+    return indexed.sort((a, b) => {
+        const left = a.row[key];
+        const right = b.row[key];
+        const leftEmpty = left === null || left === undefined || left === '';
+        const rightEmpty = right === null || right === undefined || right === '';
+        if (leftEmpty || rightEmpty)
+            return Number(leftEmpty) - Number(rightEmpty);
+        const compared = numericKeys.has(key)
+            ? Number(left) - Number(right)
+            : String(left).localeCompare(String(right));
+        return compared * multiplier;
+    });
+}
+//# sourceMappingURL=table-data.js.map

package/dist/features/mcp-ui/escape.js

@@ -1,3 +1,4 @@
+import { escapeHtml as sharedEscapeHtml } from "@jini-ai/core/text";
 /**
  * @module features/mcp-ui/escape
  *
@@ -21,12 +22,7 @@
  * @complexity O(n) in the value's length.
  */
 export function escapeHtml(value) {
-    return value
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
+    return sharedEscapeHtml({ text: value });
 }
 /**
  * Serializes a value as a JS literal safe to embed in an inline `<script>`.

package/dist/features/mcp-ui/sandbox-proxy-link-forwarder.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @module features/mcp-ui/sandbox-proxy-link-forwarder
+ *
+ * Page-script source the sandbox proxy (`sandbox-proxy.ts`) embeds so a View's plain `<a href>`
+ * opens in a new tab. Inside the proxy's frame a link is useless on its own: `AppFrame`'s hardcoded
+ * sandbox has neither `allow-popups` nor `allow-top-navigation`, so a same-tab link navigates the
+ * card's own frame away from the View and a `target="_blank"` link is silently blocked. The one
+ * channel a View has to open anything is the `ui/open-link` request, answered by the Host's
+ * `onOpenLink` — so every qualifying link click becomes that request instead.
+ *
+ * Window, bubble phase, and skipped once `defaultPrevented`: it runs after every listener the View
+ * itself registered, so a View that already handles its own link (calling `openLink` itself and
+ * cancelling the click) is not opened twice.
+ *
+ * The request id is a string the View's own JSON-RPC ids (numbers) never use, so the Host's reply
+ * cannot resolve one of the View's pending requests. `link.href` is the resolved URL when the
+ * proxy has a real base; under the opaque `data:` proxy a relative href stays as written and the
+ * Host decides how to resolve it.
+ *
+ * Not re-exported from the package (`index.ts` re-exports `sandbox-proxy.ts` only); the tests
+ * evaluate this exact source.
+ *
+ * Expects `host` (the embedding window) and `hostOrigin` in scope — the proxy script's own vars.
+ */
+export declare const PROXY_LINK_FORWARDER_JS = "var openLinkSeq = 0;\n  function forwardLinkClick(event) {\n    if (event.defaultPrevented || event.button !== 0) return;\n    var target = event.target;\n    var link = target && target.closest ? target.closest(\"a[href]\") : null;\n    if (!link || link.hasAttribute(\"download\")) return;\n    var href = link.getAttribute(\"href\");\n    if (!href || href.charAt(0) === \"#\" || /^\\s*javascript:/i.test(href)) return;\n    event.preventDefault();\n    openLinkSeq += 1;\n    host.postMessage(\n      { jsonrpc: \"2.0\", id: \"jini-proxy-open-link-\" + openLinkSeq, method: \"ui/open-link\", params: { url: link.href } },\n      hostOrigin\n    );\n  }";
+//# sourceMappingURL=sandbox-proxy-link-forwarder.d.ts.map

package/dist/features/mcp-ui/sandbox-proxy-link-forwarder.js

@@ -0,0 +1,40 @@
+/**
+ * @module features/mcp-ui/sandbox-proxy-link-forwarder
+ *
+ * Page-script source the sandbox proxy (`sandbox-proxy.ts`) embeds so a View's plain `<a href>`
+ * opens in a new tab. Inside the proxy's frame a link is useless on its own: `AppFrame`'s hardcoded
+ * sandbox has neither `allow-popups` nor `allow-top-navigation`, so a same-tab link navigates the
+ * card's own frame away from the View and a `target="_blank"` link is silently blocked. The one
+ * channel a View has to open anything is the `ui/open-link` request, answered by the Host's
+ * `onOpenLink` — so every qualifying link click becomes that request instead.
+ *
+ * Window, bubble phase, and skipped once `defaultPrevented`: it runs after every listener the View
+ * itself registered, so a View that already handles its own link (calling `openLink` itself and
+ * cancelling the click) is not opened twice.
+ *
+ * The request id is a string the View's own JSON-RPC ids (numbers) never use, so the Host's reply
+ * cannot resolve one of the View's pending requests. `link.href` is the resolved URL when the
+ * proxy has a real base; under the opaque `data:` proxy a relative href stays as written and the
+ * Host decides how to resolve it.
+ *
+ * Not re-exported from the package (`index.ts` re-exports `sandbox-proxy.ts` only); the tests
+ * evaluate this exact source.
+ *
+ * Expects `host` (the embedding window) and `hostOrigin` in scope — the proxy script's own vars.
+ */
+export const PROXY_LINK_FORWARDER_JS = `var openLinkSeq = 0;
+  function forwardLinkClick(event) {
+    if (event.defaultPrevented || event.button !== 0) return;
+    var target = event.target;
+    var link = target && target.closest ? target.closest("a[href]") : null;
+    if (!link || link.hasAttribute("download")) return;
+    var href = link.getAttribute("href");
+    if (!href || href.charAt(0) === "#" || /^\\s*javascript:/i.test(href)) return;
+    event.preventDefault();
+    openLinkSeq += 1;
+    host.postMessage(
+      { jsonrpc: "2.0", id: "jini-proxy-open-link-" + openLinkSeq, method: "ui/open-link", params: { url: link.href } },
+      hostOrigin
+    );
+  }`;
+//# sourceMappingURL=sandbox-proxy-link-forwarder.js.map

package/dist/features/mcp-ui/sandbox-proxy.d.ts

@@ -127,8 +127,12 @@
  * survives `document.open()` and would then apply to the guest HTML written in below, silently
  * breaking any UIResource whose HTML this package did not build. Surfaces built by
  * `surfaces/document.ts` already carry their own `SURFACE_CSP` meta tag for exactly that job.
+ *
+ * Once the guest HTML is written, the page also forwards the View's link clicks to the Host as
+ * `ui/open-link` (`sandbox-proxy-link-forwarder.ts`) — registered after `document.close()` because
+ * `document.open()` erases every listener registered before it.
  */
-export declare const SANDBOX_PROXY_HTML = "<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>MCP-UI sandbox proxy</title>\n<style>html, body { margin: 0; padding: 0; width: 100%; height: 100%; }</style>\n</head>\n<body>\n<script>\n(function () {\n  \"use strict\";\n  var host = window.parent;\n  var hostOrigin = window.location.origin;\n  if (host === window) return;\n\n  function isFromHost(event) {\n    return event.source === host && event.origin === hostOrigin;\n  }\n\n  window.addEventListener(\"message\", function (event) {\n    if (!isFromHost(event)) return;\n    var data = event.data;\n    if (!data || typeof data !== \"object\") return;\n    if (data.method !== \"ui/notifications/sandbox-resource-ready\") return;\n    var html = data.params && data.params.html;\n    if (typeof html !== \"string\") return;\n    document.open();\n    document.write(html);\n    document.close();\n  });\n\n  host.postMessage({ method: \"ui/notifications/sandbox-proxy-ready\", params: {} }, hostOrigin);\n}());\n</script>\n</body>\n</html>";
+export declare const SANDBOX_PROXY_HTML = "<!doctype html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<title>MCP-UI sandbox proxy</title>\n<style>html, body { margin: 0; padding: 0; width: 100%; height: 100%; }</style>\n</head>\n<body>\n<script>\n(function () {\n  \"use strict\";\n  var host = window.parent;\n  var hostOrigin = window.location.origin;\n  if (host === window) return;\n\n  function isFromHost(event) {\n    return event.source === host && event.origin === hostOrigin;\n  }\n\n  var openLinkSeq = 0;\n  function forwardLinkClick(event) {\n    if (event.defaultPrevented || event.button !== 0) return;\n    var target = event.target;\n    var link = target && target.closest ? target.closest(\"a[href]\") : null;\n    if (!link || link.hasAttribute(\"download\")) return;\n    var href = link.getAttribute(\"href\");\n    if (!href || href.charAt(0) === \"#\" || /^\\s*javascript:/i.test(href)) return;\n    event.preventDefault();\n    openLinkSeq += 1;\n    host.postMessage(\n      { jsonrpc: \"2.0\", id: \"jini-proxy-open-link-\" + openLinkSeq, method: \"ui/open-link\", params: { url: link.href } },\n      hostOrigin\n    );\n  }\n\n  window.addEventListener(\"message\", function (event) {\n    if (!isFromHost(event)) return;\n    var data = event.data;\n    if (!data || typeof data !== \"object\") return;\n    if (data.method !== \"ui/notifications/sandbox-resource-ready\") return;\n    var html = data.params && data.params.html;\n    if (typeof html !== \"string\") return;\n    document.open();\n    document.write(html);\n    document.close();\n    window.addEventListener(\"click\", forwardLinkClick);\n  });\n\n  host.postMessage({ method: \"ui/notifications/sandbox-proxy-ready\", params: {} }, hostOrigin);\n}());\n</script>\n</body>\n</html>";
 /**
  * Same script as {@link SANDBOX_PROXY_HTML}, with one load-bearing difference: `hostOrigin` is the
  * caller-supplied `hostOrigin` argument, baked in as a literal, instead of read from

package/dist/features/mcp-ui/sandbox-proxy.js

@@ -109,6 +109,7 @@
  * hardcodes any particular host — a consumer's origin is discovered at runtime from the page's own
  * URL — and neither touches the single-hop `document.write` shape the section above depends on.
  */
+import { PROXY_LINK_FORWARDER_JS } from './sandbox-proxy-link-forwarder.js';
 /**
  * The sandbox proxy page's complete, self-contained source — see this module's own doc for the
  * protocol it implements and the security tradeoff serving it makes.
@@ -127,6 +128,10 @@
  * survives `document.open()` and would then apply to the guest HTML written in below, silently
  * breaking any UIResource whose HTML this package did not build. Surfaces built by
  * `surfaces/document.ts` already carry their own `SURFACE_CSP` meta tag for exactly that job.
+ *
+ * Once the guest HTML is written, the page also forwards the View's link clicks to the Host as
+ * `ui/open-link` (`sandbox-proxy-link-forwarder.ts`) — registered after `document.close()` because
+ * `document.open()` erases every listener registered before it.
  */
 export const SANDBOX_PROXY_HTML = `<!doctype html>
 <html>
@@ -147,6 +152,8 @@ export const SANDBOX_PROXY_HTML = `<!doctype html>
     return event.source === host && event.origin === hostOrigin;
   }
 
+  ${PROXY_LINK_FORWARDER_JS}
+
   window.addEventListener("message", function (event) {
     if (!isFromHost(event)) return;
     var data = event.data;
@@ -157,6 +164,7 @@ export const SANDBOX_PROXY_HTML = `<!doctype html>
     document.open();
     document.write(html);
     document.close();
+    window.addEventListener("click", forwardLinkClick);
   });
 
   host.postMessage({ method: "ui/notifications/sandbox-proxy-ready", params: {} }, hostOrigin);
@@ -220,6 +228,8 @@ export function buildIsolatedSandboxProxyHtml(hostOrigin) {
     return event.source === host && event.origin === hostOrigin;
   }
 
+  ${PROXY_LINK_FORWARDER_JS}
+
   window.addEventListener("message", function (event) {
     if (!isFromHost(event)) return;
     var data = event.data;
@@ -230,6 +240,7 @@ export function buildIsolatedSandboxProxyHtml(hostOrigin) {
     document.open();
     document.write(html);
     document.close();
+    window.addEventListener("click", forwardLinkClick);
   });
 
   host.postMessage({ method: "ui/notifications/sandbox-proxy-ready", params: {} }, hostOrigin);

package/dist/features/mcp-ui/surfaces/bridge.js

@@ -133,9 +133,15 @@ export function renderBridgeScript(spec) {
     return requestWhenReady("ui/open-link", { url: url });
   }
 
+  // Height only, never width: @mcp-ui/client's AppFrame writes a reported width onto the iframe as a
+  // fixed px style. A surface is fluid, so its scrollWidth is just the frame's width at that moment;
+  // reported while mounting in a hidden or narrow pane it froze the frame at min-content width for
+  // good (owner bug 2026-10-08: an ask-choice card stuck at 192px after a reload). Leaving width out
+  // keeps the frame at the host's width: 100%, and the ResizeObserver below re-reports height on resize.
   function reportSize() {
-    var root = document.documentElement;
-    notify("ui/notifications/size-changed", { width: root.scrollWidth, height: root.scrollHeight });
+    // Root scrollHeight includes the iframe viewport, so a short card could never shrink.
+    // The body box includes the surface and its padding without that viewport floor.
+    notify("ui/notifications/size-changed", { height: Math.ceil(document.body.getBoundingClientRect().height) });
   }
 
   window.addEventListener("message", function (event) {
@@ -176,7 +182,7 @@ export function renderBridgeScript(spec) {
     readyHandlers = [];
     for (var i = 0; i < calls.length; i++) request(calls[i].method, calls[i].params).then(calls[i].resolve, calls[i].reject);
     for (var j = 0; j < handlers.length; j++) handlers[j]();
-    if (typeof ResizeObserver === "function") new ResizeObserver(reportSize).observe(document.documentElement);
+    if (typeof ResizeObserver === "function") new ResizeObserver(reportSize).observe(document.body);
   }
 
   function onHandshakeFailed(error) {