@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/blocks/canvas-adaptive.js

@@ -0,0 +1,127 @@
+import {
+  preferredFlowDirection
+} from "@ai-matrx/canvas";
+const CANVAS_TWO_COLUMN_WIDTH = 640;
+function canvasFlow(p) {
+  return p ? preferredFlowDirection(p) : null;
+}
+function isWidePane(p) {
+  return preferredFlowDirection(p) === "horizontal" && !p.isNarrow && p.width >= CANVAS_TWO_COLUMN_WIDTH;
+}
+const DIAGRAM_READABLE_ZOOM = 0.72;
+function portraitWidthFitViewport(input) {
+  const { presentation, bounds, width, height, minZoom, maxZoom, padding } = input;
+  if (!presentation || preferredFlowDirection(presentation) !== "vertical") {
+    return null;
+  }
+  if (!(width > 0) || !(height > 0) || !(bounds.width > 0)) return null;
+  const usable = width * (1 - padding * 2);
+  const widthZoom = Math.max(minZoom, usable / bounds.width);
+  const readable = input.readableZoom ?? DIAGRAM_READABLE_ZOOM;
+  const zoom = Math.min(maxZoom, Math.max(widthZoom, readable));
+  if (zoom <= input.containedZoom) return null;
+  const y = height * padding - bounds.y * zoom;
+  if (bounds.width * zoom <= usable + 0.5) {
+    return { zoom, x: width / 2 - (bounds.x + bounds.width / 2) * zoom, y };
+  }
+  const anchor = input.firstRank ?? bounds;
+  const atRoot = width * padding - anchor.x * zoom;
+  const rightmost = width * (1 - padding) - (bounds.x + bounds.width) * zoom;
+  return { zoom, x: Math.max(atRoot, rightmost), y };
+}
+function firstRankBounds(nodes, tolerance = 8) {
+  if (!nodes.length) return null;
+  const top = Math.min(...nodes.map((n) => n.y));
+  const rank = nodes.filter((n) => n.y <= top + tolerance);
+  const x = Math.min(...rank.map((n) => n.x));
+  const y = Math.min(...rank.map((n) => n.y));
+  const right = Math.max(...rank.map((n) => n.x + n.width));
+  const bottom = Math.max(...rank.map((n) => n.y + n.height));
+  return { x, y, width: right - x, height: bottom - y };
+}
+function diagramScrollPans(p) {
+  return p !== null && preferredFlowDirection(p) === "vertical";
+}
+function timelineAxis(p) {
+  return p && isWidePane(p) ? "horizontal" : "vertical";
+}
+function treeWrapsLines(p) {
+  return p !== null && preferredFlowDirection(p) === "vertical";
+}
+function decisionBranchesSideBySide(p) {
+  return p !== null && isWidePane(p);
+}
+const CHART_MIN_HEIGHT = 340;
+const CHART_CHROME = 120;
+function chartPaneLayout(p, chartType) {
+  if (!p) return null;
+  const vertical = preferredFlowDirection(p) === "vertical";
+  const narrow = vertical || p.isNarrow;
+  const room = Math.max(CHART_MIN_HEIGHT, p.height - CHART_CHROME);
+  const wanted = narrow ? p.width * 1.25 : p.width * 0.5625;
+  return {
+    height: Math.round(Math.min(room, Math.max(CHART_MIN_HEIGHT, wanted))),
+    legend: narrow ? "bottom" : "right",
+    horizontalBars: vertical && chartType === "bar"
+  };
+}
+function slideThumbnailPlacement(p) {
+  if (!p) return null;
+  return isWidePane(p) ? "side" : "below";
+}
+function fitScale(stage, box) {
+  if (!(box.width > 0) || !(stage.width > 0) || !(stage.height > 0)) return 0;
+  const byWidth = box.width / stage.width;
+  if (!(box.height > 0)) return byWidth;
+  return Math.min(byWidth, box.height / stage.height);
+}
+function diffIsSplit(input) {
+  if (input.personChoice !== null) return input.personChoice;
+  if (input.authoredExplicitly || !input.presentation) return input.authored;
+  return isWidePane(input.presentation);
+}
+function mapPlacesList(p) {
+  if (!p) return null;
+  return isWidePane(p) ? "side" : "toggle";
+}
+const MERMAID_FLOW_HEADER = /^(\s*)(flowchart|graph)\b([^\n]*)$/;
+const MERMAID_DIRECTION = /^\s*(TB|TD|BT|RL|LR)\b/;
+function mermaidSourceForFlow(source, flow) {
+  if (flow === null) return source;
+  const lines = source.split("\n");
+  let i = 0;
+  if (lines[0]?.trim() === "---") {
+    const end = lines.findIndex((l, idx) => idx > 0 && l.trim() === "---");
+    if (end === -1) return source;
+    i = end + 1;
+  }
+  while (i < lines.length && (lines[i].trim() === "" || lines[i].trim().startsWith("%%"))) {
+    i++;
+  }
+  const header = lines[i];
+  if (header === void 0) return source;
+  const match = header.match(MERMAID_FLOW_HEADER);
+  if (!match) return source;
+  const rest = match[3];
+  if (MERMAID_DIRECTION.test(rest)) return source;
+  const direction = flow === "vertical" ? "TB" : "LR";
+  lines[i] = `${match[1]}${match[2]} ${direction}${rest}`;
+  return lines.join("\n");
+}
+export {
+  CANVAS_TWO_COLUMN_WIDTH,
+  DIAGRAM_READABLE_ZOOM,
+  canvasFlow,
+  chartPaneLayout,
+  decisionBranchesSideBySide,
+  diagramScrollPans,
+  diffIsSplit,
+  firstRankBounds,
+  fitScale,
+  mapPlacesList,
+  mermaidSourceForFlow,
+  portraitWidthFitViewport,
+  slideThumbnailPlacement,
+  timelineAxis,
+  treeWrapsLines
+};

package/dist/display/blocks/canvas-fit.d.ts

@@ -0,0 +1,24 @@
+/**
+ * How much room a block has when it is shown in the canvas.
+ *
+ * `@ai-matrx/canvas` tells content it is in a canvas pane through
+ * `useCanvasPresentation()` (null everywhere else). Blocks that render in both
+ * the chat and the canvas read this ONE answer so a tall, narrow pane gets a
+ * layout built for it — stacked cards, one column, side panels above the body —
+ * while the chat and every other host keep exactly the layout they had.
+ *
+ *   outside — not in the canvas; the block renders as it always did.
+ *   narrow  — the pane is under CANVAS_NARROW_WIDTH (480px): restructure.
+ *   tight   — wider than narrow but not roomy (< 768px) and not full screen:
+ *             keep the structure, ease the squeeze (e.g. pin a table's first column).
+ *   wide    — roomy, or the pane is full screen: the normal layout.
+ *
+ * A person's explicit choice always wins over this hint (see the diagram
+ * reference adopter, `diagram/presentation-direction.ts`).
+ */
+import type { CanvasPresentation } from "@ai-matrx/canvas";
+export type CanvasFit = "outside" | "narrow" | "tight" | "wide";
+/** Below this a not-full-screen pane is "tight" (between narrow and roomy). */
+export declare const CANVAS_TIGHT_WIDTH = 768;
+export declare function canvasFitFor(presentation: CanvasPresentation | null | undefined): CanvasFit;
+export declare function useCanvasFit(): CanvasFit;

package/dist/display/blocks/canvas-fit.js

@@ -0,0 +1,19 @@
+import { useCanvasPresentation } from "@ai-matrx/canvas/react";
+const CANVAS_TIGHT_WIDTH = 768;
+function canvasFitFor(presentation) {
+  if (!presentation) return "outside";
+  if (presentation.isNarrow) return "narrow";
+  if (presentation.isFullscreen) return "wide";
+  if (presentation.width > 0 && presentation.width < CANVAS_TIGHT_WIDTH) {
+    return "tight";
+  }
+  return "wide";
+}
+function useCanvasFit() {
+  return canvasFitFor(useCanvasPresentation());
+}
+export {
+  CANVAS_TIGHT_WIDTH,
+  canvasFitFor,
+  useCanvasFit
+};

package/dist/display/blocks/chart/ChartBlock.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ChartBlockProps {
+    content?: string;
+    isStreamActive?: boolean;
+    className?: string;
+}
+export declare const ChartBlock: React.FC<ChartBlockProps>;
+export default ChartBlock;

package/dist/display/blocks/chart/ChartBlock.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { useEffect, useMemo, useState } from "react";
+import { clientLazy } from "../../../utils/client-lazy.js";
+import { createPortal } from "react-dom";
+import { BarChart3, Check, Copy, Expand, TriangleAlert, X } from "lucide-react";
+import { toast } from "../../../host/toast.js";
+import { Skeleton } from "@ai-matrx/design-system";
+import { cn } from "@ai-matrx/design-system";
+import { parseChartSpec } from "./chart-spec.js";
+import { useCanvasPresentation } from "@ai-matrx/canvas/react";
+import { chartPaneLayout } from "../canvas-adaptive.js";
+import { Button } from "@ai-matrx/design-system/controls";
+const CHART_TYPE_LABEL = {
+  bar: "Bar chart",
+  line: "Line chart",
+  area: "Area chart",
+  pie: "Pie chart",
+  scatter: "Scatter chart"
+};
+const ChartCanvas = clientLazy(() => import("./ChartCanvas.js"), {
+  loading: () => /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" })
+});
+const ChartBlock = ({ content = "", isStreamActive = false, className }) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? toast.error(message) : toast.success(message)
+  });
+  const source = content.trim();
+  const parsed = useMemo(() => isStreamActive ? null : parseChartSpec(source), [source, isStreamActive]);
+  const spec = parsed && !("error" in parsed) ? parsed : null;
+  const error = parsed && "error" in parsed ? parsed.error : null;
+  const [copied, setCopied] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [showSource, setShowSource] = useState(false);
+  const title = spec?.title ?? (spec ? CHART_TYPE_LABEL[spec.type] ?? "Chart" : "Chart");
+  const presentation = useCanvasPresentation();
+  const paneLayout = chartPaneLayout(presentation, spec?.type ?? "");
+  const handleCopy = async () => {
+    try {
+      await copyText(source);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error("Couldn't copy the chart source");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("my-3 overflow-hidden rounded-lg border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(BarChart3, { className: "h-3.5 w-3.5 shrink-0 text-primary" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+        spec && /* @__PURE__ */ jsx("span", { className: "hidden shrink-0 text-xs text-muted-foreground sm:inline", children: CHART_TYPE_LABEL[spec.type] ?? "Chart" }),
+        isStreamActive && /* @__PURE__ */ jsx("span", { className: "shrink-0 animate-pulse text-xs text-muted-foreground", children: "building\u2026" })
+      ] }),
+      !isStreamActive && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx(IconBtn, { label: copied ? "Copied" : "Copy chart source", onClick: handleCopy, children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }) }),
+        spec && presentation === null && /* @__PURE__ */ jsx(IconBtn, { label: "View fullscreen", onClick: () => setFullscreen(true), children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-3", children: isStreamActive ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", "aria-busy": "true", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-48 w-full" })
+    ] }) : error ? /* @__PURE__ */ jsx(ChartError, { error, source, show: showSource, onToggle: () => setShowSource((v) => !v) }) : spec ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: paneLayout ? "w-full" : "h-[340px] w-full",
+        style: paneLayout ? { height: paneLayout.height } : void 0,
+        "data-chart-legend": paneLayout?.legend ?? "default",
+        "data-chart-bars": paneLayout?.horizontalBars ? "horizontal" : "vertical",
+        children: /* @__PURE__ */ jsx(ChartCanvas, { spec, paneLayout })
+      }
+    ) : null }),
+    fullscreen && spec && /* @__PURE__ */ jsx(ChartFullscreen, { spec, title, onClose: () => setFullscreen(false) })
+  ] });
+};
+function IconBtn({ label, onClick, children }) {
+  return /* @__PURE__ */ jsx(Button, { variant: "quiet", "aria-label": label, title: label, onClick, children });
+}
+function ChartError({
+  error,
+  source,
+  show,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-destructive" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground", children: "This chart could not be drawn" }),
+      /* @__PURE__ */ jsx("p", { className: "break-words text-xs text-muted-foreground", children: error }),
+      /* @__PURE__ */ jsx(Button, { variant: "link", onClick: onToggle, children: show ? "Hide source" : "Show source" }),
+      show && /* @__PURE__ */ jsx("pre", { className: "mt-1 max-h-64 overflow-auto rounded bg-muted p-2 text-xs text-muted-foreground", children: source })
+    ] })
+  ] }) });
+}
+function ChartFullscreen({ spec, title, onClose }) {
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[120] flex flex-col bg-background/98 backdrop-blur-sm", role: "dialog", "aria-modal": "true", "aria-label": title, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-2 pt-safe", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: title }),
+        /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), "aria-label": "Exit fullscreen", title: "Exit fullscreen (Esc)", onClick: onClose })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 p-6", children: /* @__PURE__ */ jsx(ChartCanvas, { spec }) })
+    ] }),
+    document.body
+  );
+}
+var ChartBlock_default = ChartBlock;
+export {
+  ChartBlock,
+  ChartBlock_default as default
+};

package/dist/display/blocks/chart/ChartCanvas.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ChartCanvas — the recharts renderer for a normalized ChartSpec.
+ *
+ * IMPORTANT (bundle policy): recharts is heavy. This module is the ONLY place
+ * that imports it, and it is loaded EXCLUSIVELY through
+ * `next/dynamic(() => import("./ChartCanvas.js"), { ssr: false })` from ChartBlock,
+ * rendered conditionally (only once a valid spec exists). So recharts never
+ * enters the server build or the initial client bundle — it loads on demand,
+ * client-side, the first time a chart actually renders.
+ */
+import React from "react";
+import { type ChartSpec } from "./chart-spec.js";
+import type { ChartPaneLayout } from "../canvas-adaptive.js";
+export default function ChartCanvas({ spec, paneLayout, }: {
+    spec: ChartSpec;
+    /** The canvas pane's layout; `null` (chat, fullscreen) keeps the defaults. */
+    paneLayout?: ChartPaneLayout | null;
+}): React.JSX.Element;

package/dist/display/blocks/chart/ChartCanvas.js

@@ -0,0 +1,159 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+  ZAxis
+} from "recharts";
+import { CHART_PALETTE } from "./chart-spec.js";
+import { pieSliceLabel } from "./labels.js";
+const AXIS = { fontSize: 12, stroke: "var(--muted-foreground)" };
+const GRID_STROKE = "var(--border)";
+function ChartCanvas({
+  spec,
+  paneLayout = null
+}) {
+  const showLegend = spec.series.length > 1 || spec.type === "pie";
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: render(spec, showLegend, paneLayout) });
+}
+function legendFor(paneLayout) {
+  if (paneLayout?.legend === "right") {
+    return /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 }, layout: "vertical", verticalAlign: "middle", align: "right" });
+  }
+  if (paneLayout?.legend === "bottom") {
+    return /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 }, layout: "horizontal", verticalAlign: "bottom", align: "center" });
+  }
+  return /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 } });
+}
+function render(spec, showLegend, paneLayout) {
+  const common = { data: spec.data, margin: { top: 8, right: 16, bottom: 8, left: 0 } };
+  const axes = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: GRID_STROKE, vertical: false }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: spec.xKey, type: spec.type === "scatter" ? "number" : "category", domain: spec.type === "scatter" ? ["auto", "auto"] : void 0, name: spec.xKey, tick: AXIS, tickLine: false, axisLine: { stroke: GRID_STROKE } }),
+    /* @__PURE__ */ jsx(YAxis, { tick: AXIS, tickLine: false, axisLine: false, width: 44 }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        contentStyle: {
+          background: "var(--popover)",
+          border: "1px solid var(--border)",
+          borderRadius: 8,
+          fontSize: 12,
+          color: "var(--popover-foreground)"
+        }
+      }
+    ),
+    showLegend && legendFor(paneLayout)
+  ] });
+  switch (spec.type) {
+    case "line":
+      return /* @__PURE__ */ jsxs(LineChart, { ...common, children: [
+        axes,
+        spec.series.map((s) => /* @__PURE__ */ jsx(Line, { type: "monotone", dataKey: s.key, name: s.label, stroke: s.color, strokeWidth: 2, dot: false }, s.key))
+      ] });
+    case "area":
+      return /* @__PURE__ */ jsxs(AreaChart, { ...common, children: [
+        axes,
+        spec.series.map((s) => /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: "monotone",
+            dataKey: s.key,
+            name: s.label,
+            stroke: s.color,
+            fill: s.color,
+            fillOpacity: 0.18,
+            strokeWidth: 2,
+            stackId: spec.stacked ? "1" : void 0
+          },
+          s.key
+        ))
+      ] });
+    case "scatter":
+      return /* @__PURE__ */ jsxs(ScatterChart, { ...common, children: [
+        axes,
+        /* @__PURE__ */ jsx(ZAxis, { range: [60, 60] }),
+        spec.series.map((s) => /* @__PURE__ */ jsx(Scatter, { dataKey: s.key, name: s.label, fill: s.color }, s.key))
+      ] });
+    case "pie": {
+      const valueKey = spec.pie?.valueKey ?? "value";
+      const labelKey = spec.pie?.labelKey ?? "label";
+      return /* @__PURE__ */ jsxs(PieChart, { children: [
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            contentStyle: {
+              background: "var(--popover)",
+              border: "1px solid var(--border)",
+              borderRadius: 8,
+              fontSize: 12,
+              color: "var(--popover-foreground)"
+            }
+          }
+        ),
+        showLegend && legendFor(paneLayout),
+        /* @__PURE__ */ jsx(
+          Pie,
+          {
+            data: spec.data,
+            dataKey: valueKey,
+            nameKey: labelKey,
+            cx: "50%",
+            cy: "50%",
+            outerRadius: "78%",
+            innerRadius: "0%",
+            paddingAngle: 1,
+            label: (e) => pieSliceLabel(e),
+            labelLine: false,
+            children: spec.data.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: CHART_PALETTE[i % CHART_PALETTE.length] }, i))
+          }
+        )
+      ] });
+    }
+    case "bar":
+    default:
+      if (paneLayout?.horizontalBars) {
+        return /* @__PURE__ */ jsxs(BarChart, { ...common, layout: "vertical", margin: { top: 8, right: 16, bottom: 8, left: 8 }, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: GRID_STROKE, horizontal: false }),
+          /* @__PURE__ */ jsx(XAxis, { type: "number", tick: AXIS, tickLine: false, axisLine: { stroke: GRID_STROKE } }),
+          /* @__PURE__ */ jsx(YAxis, { type: "category", dataKey: spec.xKey, tick: AXIS, tickLine: false, axisLine: false, width: 96 }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              contentStyle: {
+                background: "var(--popover)",
+                border: "1px solid var(--border)",
+                borderRadius: 8,
+                fontSize: 12,
+                color: "var(--popover-foreground)"
+              }
+            }
+          ),
+          showLegend && legendFor(paneLayout),
+          spec.series.map((s) => /* @__PURE__ */ jsx(Bar, { dataKey: s.key, name: s.label, fill: s.color, radius: [0, 3, 3, 0], stackId: spec.stacked ? "1" : void 0 }, s.key))
+        ] });
+      }
+      return /* @__PURE__ */ jsxs(BarChart, { ...common, children: [
+        axes,
+        spec.series.map((s) => /* @__PURE__ */ jsx(Bar, { dataKey: s.key, name: s.label, fill: s.color, radius: [3, 3, 0, 0], stackId: spec.stacked ? "1" : void 0 }, s.key))
+      ] });
+  }
+}
+export {
+  ChartCanvas as default
+};

package/dist/display/blocks/chart/TableChart.d.ts

@@ -0,0 +1,25 @@
+/**
+ * TableChart — "Chart this" for any table an answer shows (markdown table,
+ * CSV/TSV block). Draws through the ONE chart primitive: `tableToChartSpec`
+ * builds the same ChartSpec a ```chart fence parses to, and ChartCanvas (the
+ * only recharts importer, loaded via next/dynamic ssr:false) draws it.
+ *
+ * `ChartThisButton` is ABSENT for a table with no numbers — never a dead
+ * button. The panel auto-picks bar/line/pie/scatter and lets the reader switch
+ * to any type the data can honestly draw.
+ */
+import React from "react";
+import { type PlainTable } from "./table-chart.js";
+export declare function isChartable(table: PlainTable): boolean;
+export declare function ChartThisButton({ table, active, onToggle, className, }: {
+    table: PlainTable;
+    active: boolean;
+    onToggle: () => void;
+    className?: string;
+}): React.JSX.Element | null;
+export declare function TableChartPanel({ table, title, onClose, className, }: {
+    table: PlainTable;
+    title?: string;
+    onClose?: () => void;
+    className?: string;
+}): React.JSX.Element | null;

package/dist/display/blocks/chart/TableChart.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { clientLazy } from "../../../utils/client-lazy.js";
+import {
+  AreaChart as AreaIcon,
+  BarChart3,
+  ChartScatter,
+  LineChart as LineIcon,
+  PieChart as PieIcon,
+  X
+} from "lucide-react";
+import { Skeleton } from "@ai-matrx/design-system";
+import { Button, ControlRow, SegmentedControl } from "@ai-matrx/design-system/controls";
+import { cn } from "@ai-matrx/design-system";
+import { chartNotice, chartableTypes, tableToChartSpec } from "./table-chart.js";
+const ChartCanvas = clientLazy(() => import("./ChartCanvas.js"), {
+  loading: () => /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full" })
+});
+const TYPE_META = {
+  bar: { label: "Bar", Icon: BarChart3 },
+  line: { label: "Line", Icon: LineIcon },
+  area: { label: "Area", Icon: AreaIcon },
+  pie: { label: "Pie", Icon: PieIcon },
+  scatter: { label: "Scatter", Icon: ChartScatter }
+};
+function isChartable(table) {
+  return chartableTypes(table).length > 0;
+}
+function ChartThisButton({
+  table,
+  active,
+  onToggle,
+  className
+}) {
+  if (!isChartable(table)) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      tone: active ? "primary" : void 0,
+      icon: /* @__PURE__ */ jsx(BarChart3, {}),
+      onClick: onToggle,
+      "aria-pressed": active,
+      "aria-label": active ? "Hide chart" : "Chart this table",
+      className,
+      children: active ? "Hide chart" : "Chart this"
+    }
+  );
+}
+function TableChartPanel({
+  table,
+  title,
+  onClose,
+  className
+}) {
+  const types = chartableTypes(table);
+  const [picked, setPicked] = useState(void 0);
+  const spec = tableToChartSpec(table, picked);
+  if (!spec) return null;
+  const notice = chartNotice(table, picked);
+  const heading = title ?? `${TYPE_META[spec.type].label} chart`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("my-2 overflow-hidden rounded-lg border border-border bg-card", className),
+      "data-find-ignore": "",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-border bg-muted/50 px-2 py-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate pl-1 text-sm font-medium text-foreground", children: heading }),
+          /* @__PURE__ */ jsxs(ControlRow, { nowrap: true, children: [
+            /* @__PURE__ */ jsx(
+              SegmentedControl,
+              {
+                "aria-label": "Chart type",
+                value: picked ?? spec.type,
+                onValueChange: setPicked,
+                data: types.map((t) => {
+                  const { Icon, label } = TYPE_META[t];
+                  return { value: t, label: /* @__PURE__ */ jsx(Icon, {}), ariaLabel: `${label} chart`, title: `${label} chart` };
+                })
+              }
+            ),
+            onClose && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), "aria-label": "Close chart", title: "Close chart", onClick: onClose })
+          ] })
+        ] }),
+        notice && /* @__PURE__ */ jsx("p", { className: "border-b border-border px-3 py-1.5 text-xs text-muted-foreground", role: "status", children: notice }),
+        /* @__PURE__ */ jsx("div", { className: "h-[300px] w-full p-2", children: /* @__PURE__ */ jsx(ChartCanvas, { spec }) })
+      ]
+    }
+  );
+}
+export {
+  ChartThisButton,
+  TableChartPanel,
+  isChartable
+};

package/dist/display/blocks/chart/chart-spec.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Chart spec — the forgiving normalizer between an agent's ```chart JSON and
+ * the recharts renderer. PURE (no recharts import) so it stays out of any heavy
+ * bundle and is unit-testable. The renderer (ChartCanvas) is loaded separately
+ * via next/dynamic ssr:false.
+ *
+ * Agent-facing shape (all keys tolerant):
+ *   { "type": "bar", "title": "...", "x": "month", "y": ["revenue","profit"],
+ *     "data": [ { "month": "Jan", "revenue": 100, "profit": 20 }, ... ] }
+ *   { "type": "pie", "data": [ { "label": "A", "value": 45 }, ... ] }
+ */
+export type ChartType = "bar" | "line" | "area" | "pie" | "scatter";
+export interface ChartSeries {
+    key: string;
+    label: string;
+    color: string;
+}
+export interface ChartSpec {
+    type: ChartType;
+    title?: string;
+    /** Category field name (cartesian charts). */
+    xKey: string;
+    /** Numeric series (cartesian charts). */
+    series: ChartSeries[];
+    /** Normalized rows. */
+    data: Record<string, unknown>[];
+    /** Pie field mapping. */
+    pie?: {
+        labelKey: string;
+        valueKey: string;
+    };
+    stacked: boolean;
+}
+export interface ChartParseError {
+    error: string;
+}
+/** Readable categorical palette (hex; good light/dark contrast). */
+export declare const CHART_PALETTE: string[];
+export declare function parseChartSpec(raw: string): ChartSpec | ChartParseError;