@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/display/tables/editing/ColumnActionsMenu.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  MoreVertical,
+  ArrowLeft,
+  ArrowRight,
+  Copy,
+  Eraser,
+  Trash2
+} from "lucide-react";
+import { Button } from "@ai-matrx/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@ai-matrx/design-system";
+const ColumnActionsMenu = ({
+  onInsertBefore,
+  onInsertAfter,
+  onDuplicate,
+  onClear,
+  onDelete
+}) => {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: (e) => e.stopPropagation(),
+        className: "h-5 w-5 p-0 [&_svg]:size-3 opacity-0 group-hover/col:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100 transition-opacity text-muted-foreground hover:text-foreground",
+        "aria-label": "Column actions",
+        children: /* @__PURE__ */ jsx(MoreVertical, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: "start",
+        className: "w-44",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onInsertBefore, className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4 mr-2 text-blue-500" }),
+            "Insert before"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onInsertAfter, className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 mr-2 text-blue-500" }),
+            "Insert after"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onDuplicate, className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2 text-purple-500" }),
+            "Duplicate column"
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onClear, className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(Eraser, { className: "h-4 w-4 mr-2 text-amber-500" }),
+            "Clear Column"
+          ] }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: onDelete,
+              className: "cursor-pointer text-red-600 dark:text-red-400 focus:text-red-600 dark:focus:text-red-400",
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
+                "Delete column"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ColumnActionsMenu
+};

package/dist/display/tables/editing/RowActionsMenu.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface RowActionsMenuProps {
+    onInsertAbove: () => void;
+    onInsertBelow: () => void;
+    onDuplicate: () => void;
+    onClear: () => void;
+    onDelete: () => void;
+}
+/**
+ * Tiny per-row action menu. Stays invisible until the parent row is hovered
+ * (relies on a `group/row` class on the <tr>). The trigger and items all
+ * stop event propagation so they don't trigger the row's onClick handler
+ * (which would otherwise enter cell-edit mode for that row).
+ */
+export declare const RowActionsMenu: React.FC<RowActionsMenuProps>;
+export {};

package/dist/display/tables/editing/RowActionsMenu.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  MoreVertical,
+  ArrowUp,
+  ArrowDown,
+  Copy,
+  Eraser,
+  Trash2
+} from "lucide-react";
+import { Button } from "@ai-matrx/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@ai-matrx/design-system";
+const RowActionsMenu = ({
+  onInsertAbove,
+  onInsertBelow,
+  onDuplicate,
+  onClear,
+  onDelete
+}) => {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: (e) => e.stopPropagation(),
+        className: "h-5 w-5 p-0 [&_svg]:size-3 opacity-0 group-hover/row:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100 transition-opacity text-muted-foreground hover:text-foreground",
+        "aria-label": "Row actions",
+        children: /* @__PURE__ */ jsx(MoreVertical, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: "start",
+        className: "w-44",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onInsertAbove, className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4 mr-2 text-blue-500" }),
+            "Insert above"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onInsertBelow, className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4 mr-2 text-blue-500" }),
+            "Insert below"
+          ] }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onDuplicate, className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4 mr-2 text-purple-500" }),
+            "Duplicate row"
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: onClear, className: "cursor-pointer", children: [
+            /* @__PURE__ */ jsx(Eraser, { className: "h-4 w-4 mr-2 text-amber-500" }),
+            "Clear Row"
+          ] }),
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: onDelete,
+              className: "cursor-pointer text-red-600 dark:text-red-400 focus:text-red-600 dark:focus:text-red-400",
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 mr-2" }),
+                "Delete row"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  RowActionsMenu
+};

package/dist/display/tables/editing/TableEditToolbar.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface TableEditToolbarProps {
+    onAddRow: () => void;
+    onAddColumn: () => void;
+    /**
+     * Empties all data cells except the first column. Headers and first-column
+     * values are preserved. Disabled when there are no rows or only one column.
+     */
+    onClearAllContents: () => void;
+    rowCount: number;
+    colCount: number;
+    className?: string;
+}
+export declare const TableEditToolbar: React.FC<TableEditToolbarProps>;
+export {};

package/dist/display/tables/editing/TableEditToolbar.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Plus, Eraser, Columns3, Rows3 } from "lucide-react";
+import { Button } from "@ai-matrx/design-system";
+import { cn } from "@ai-matrx/design-system";
+const TableEditToolbar = ({
+  onAddRow,
+  onAddColumn,
+  onClearAllContents,
+  rowCount,
+  colCount,
+  className
+}) => {
+  const clearDisabled = rowCount === 0 || colCount <= 1;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: onAddRow,
+        className: "flex items-center gap-1.5 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx(Rows3, { className: "h-3.5 w-3.5" }),
+          "Add Row"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: onAddColumn,
+        className: "flex items-center gap-1.5 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx(Columns3, { className: "h-3.5 w-3.5" }),
+          "Add Column"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: onClearAllContents,
+        disabled: clearDisabled,
+        title: "Clears all data cells. Preserves headers and the first column.",
+        className: "flex items-center gap-1.5 text-red-600 dark:text-red-400 border-red-200 dark:border-red-900/40 hover:bg-red-50 dark:hover:bg-red-900/20 disabled:opacity-50",
+        children: [
+          /* @__PURE__ */ jsx(Eraser, { className: "h-3.5 w-3.5" }),
+          "Clear All Contents"
+        ]
+      }
+    )
+  ] });
+};
+export {
+  TableEditToolbar
+};

package/dist/display/tables/editing/tableMutations.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Pure mutation utilities for markdown table data.
+ *
+ * Every function takes a TableShape and returns a new TableShape. Inputs are
+ * never mutated. normalizedData is regenerated whenever it was present and
+ * the shape (rows or headers) changes.
+ *
+ * These run inside React event handlers, so they must be cheap enough for
+ * tables in the low-thousands-of-cells range. They are intentionally NOT
+ * called during streaming — the consuming components gate every call on
+ * `editMode !== "none"`, which is itself only reachable when the stream
+ * has completed.
+ */
+export type TableShape = {
+    headers: string[];
+    rows: string[][];
+    normalizedData?: Array<{
+        [key: string]: string;
+    }>;
+};
+/** Insert an empty row at a specific index. Out-of-range indices append. */
+export declare const insertRow: (table: TableShape, atIndex?: number) => TableShape;
+export declare const insertRowAbove: (table: TableShape, atIndex: number) => TableShape;
+export declare const insertRowBelow: (table: TableShape, atIndex: number) => TableShape;
+export declare const appendRow: (table: TableShape) => TableShape;
+export declare const removeRow: (table: TableShape, atIndex: number) => TableShape;
+/** Empty the cells of a row but keep the row (preserves row count). */
+export declare const clearRow: (table: TableShape, atIndex: number) => TableShape;
+/** Duplicate a row (copy is placed immediately below the original). */
+export declare const duplicateRow: (table: TableShape, atIndex: number) => TableShape;
+/** Remove all data rows (headers preserved). */
+export declare const clearAllRows: (table: TableShape) => TableShape;
+/**
+ * Empty all data cells EXCEPT the first column (headers and first-column
+ * values are preserved). Useful when the first column is a row label or
+ * key the user wants to keep while wiping the rest.
+ *
+ * No-op when there is at most one column (nothing to clear).
+ */
+export declare const clearAllContents: (table: TableShape) => TableShape;
+/** Insert a new column. Out-of-range indices append. New header is uniquified. */
+export declare const insertColumn: (table: TableShape, atIndex?: number, headerLabel?: string) => TableShape;
+export declare const insertColumnBefore: (table: TableShape, atIndex: number, headerLabel?: string) => TableShape;
+export declare const insertColumnAfter: (table: TableShape, atIndex: number, headerLabel?: string) => TableShape;
+export declare const appendColumn: (table: TableShape, headerLabel?: string) => TableShape;
+export declare const removeColumn: (table: TableShape, atIndex: number) => TableShape;
+/** Empty all data cells in a column but keep the header. */
+export declare const clearColumn: (table: TableShape, atIndex: number) => TableShape;
+/** Duplicate a column (copy header gets " (copy)" suffix; placed immediately to the right). */
+export declare const duplicateColumn: (table: TableShape, atIndex: number) => TableShape;

package/dist/display/tables/editing/tableMutations.js

@@ -0,0 +1,148 @@
+import { unwrapCodeSpans } from "@ai-matrx/content-ir/source";
+const cleanHeaderForKey = (header) => unwrapCodeSpans(header).replace(/\*\*([^*]+)\*\*/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/(?<![A-Za-z0-9])_([^_\n]+?)_(?![A-Za-z0-9])/g, "$1").replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1|$2").trim();
+const buildNormalizedRow = (headers, row) => {
+  const obj = {};
+  headers.forEach((header, i) => {
+    obj[cleanHeaderForKey(header)] = i < row.length ? row[i] : "";
+  });
+  return obj;
+};
+const rebuildNormalizedData = (table) => {
+  if (!table.normalizedData) return table;
+  return {
+    ...table,
+    normalizedData: table.rows.map(
+      (row) => buildNormalizedRow(table.headers, row)
+    )
+  };
+};
+const emptyRow = (colCount) => Array.from({ length: colCount }, () => "");
+const ensureUniqueHeader = (label, existing) => {
+  if (!existing.includes(label)) return label;
+  let counter = 2;
+  while (existing.includes(`${label} ${counter}`)) {
+    counter++;
+  }
+  return `${label} ${counter}`;
+};
+const insertRow = (table, atIndex) => {
+  const colCount = table.headers.length;
+  const newRow = emptyRow(colCount);
+  const insertAt = atIndex === void 0 || atIndex < 0 || atIndex > table.rows.length ? table.rows.length : atIndex;
+  const newRows = [
+    ...table.rows.slice(0, insertAt),
+    newRow,
+    ...table.rows.slice(insertAt)
+  ];
+  return rebuildNormalizedData({ ...table, rows: newRows });
+};
+const insertRowAbove = (table, atIndex) => insertRow(table, atIndex);
+const insertRowBelow = (table, atIndex) => insertRow(table, atIndex + 1);
+const appendRow = (table) => insertRow(table, table.rows.length);
+const removeRow = (table, atIndex) => {
+  if (atIndex < 0 || atIndex >= table.rows.length) return table;
+  const newRows = table.rows.filter((_, i) => i !== atIndex);
+  return rebuildNormalizedData({ ...table, rows: newRows });
+};
+const clearRow = (table, atIndex) => {
+  if (atIndex < 0 || atIndex >= table.rows.length) return table;
+  const colCount = table.headers.length;
+  const cleared = emptyRow(colCount);
+  const newRows = table.rows.map((row, i) => i === atIndex ? cleared : row);
+  return rebuildNormalizedData({ ...table, rows: newRows });
+};
+const duplicateRow = (table, atIndex) => {
+  if (atIndex < 0 || atIndex >= table.rows.length) return table;
+  const copy = [...table.rows[atIndex]];
+  const newRows = [
+    ...table.rows.slice(0, atIndex + 1),
+    copy,
+    ...table.rows.slice(atIndex + 1)
+  ];
+  return rebuildNormalizedData({ ...table, rows: newRows });
+};
+const clearAllRows = (table) => rebuildNormalizedData({ ...table, rows: [] });
+const clearAllContents = (table) => {
+  if (table.headers.length <= 1) return table;
+  const newRows = table.rows.map(
+    (row) => row.map((cell, i) => i === 0 ? cell : "")
+  );
+  return rebuildNormalizedData({ ...table, rows: newRows });
+};
+const insertColumn = (table, atIndex, headerLabel = "New Column") => {
+  const insertAt = atIndex === void 0 || atIndex < 0 || atIndex > table.headers.length ? table.headers.length : atIndex;
+  const finalHeader = ensureUniqueHeader(headerLabel, table.headers);
+  const newHeaders = [
+    ...table.headers.slice(0, insertAt),
+    finalHeader,
+    ...table.headers.slice(insertAt)
+  ];
+  const newRows = table.rows.map((row) => [
+    ...row.slice(0, insertAt),
+    "",
+    ...row.slice(insertAt)
+  ]);
+  return rebuildNormalizedData({
+    ...table,
+    headers: newHeaders,
+    rows: newRows
+  });
+};
+const insertColumnBefore = (table, atIndex, headerLabel) => insertColumn(table, atIndex, headerLabel);
+const insertColumnAfter = (table, atIndex, headerLabel) => insertColumn(table, atIndex + 1, headerLabel);
+const appendColumn = (table, headerLabel) => insertColumn(table, table.headers.length, headerLabel);
+const removeColumn = (table, atIndex) => {
+  if (atIndex < 0 || atIndex >= table.headers.length) return table;
+  const newHeaders = table.headers.filter((_, i) => i !== atIndex);
+  const newRows = table.rows.map((row) => row.filter((_, i) => i !== atIndex));
+  return rebuildNormalizedData({
+    ...table,
+    headers: newHeaders,
+    rows: newRows
+  });
+};
+const clearColumn = (table, atIndex) => {
+  if (atIndex < 0 || atIndex >= table.headers.length) return table;
+  const newRows = table.rows.map(
+    (row) => row.map((cell, i) => i === atIndex ? "" : cell)
+  );
+  return rebuildNormalizedData({ ...table, rows: newRows });
+};
+const duplicateColumn = (table, atIndex) => {
+  if (atIndex < 0 || atIndex >= table.headers.length) return table;
+  const baseHeader = table.headers[atIndex];
+  const copyHeader = ensureUniqueHeader(`${baseHeader} (copy)`, table.headers);
+  const newHeaders = [
+    ...table.headers.slice(0, atIndex + 1),
+    copyHeader,
+    ...table.headers.slice(atIndex + 1)
+  ];
+  const newRows = table.rows.map((row) => [
+    ...row.slice(0, atIndex + 1),
+    row[atIndex] ?? "",
+    ...row.slice(atIndex + 1)
+  ]);
+  return rebuildNormalizedData({
+    ...table,
+    headers: newHeaders,
+    rows: newRows
+  });
+};
+export {
+  appendColumn,
+  appendRow,
+  clearAllContents,
+  clearAllRows,
+  clearColumn,
+  clearRow,
+  duplicateColumn,
+  duplicateRow,
+  insertColumn,
+  insertColumnAfter,
+  insertColumnBefore,
+  insertRow,
+  insertRowAbove,
+  insertRowBelow,
+  removeColumn,
+  removeRow
+};

package/dist/display/tables/editing/useDoubleClickEdit.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Mode controlled by the host component:
+ *  - "none"      → not editing
+ *  - "header"    → editing the header row
+ *  - rowIndex N  → editing body row N (cells are textareas)
+ */
+export type TableEditMode = "none" | "header" | number;
+interface UseDoubleClickEditArgs {
+    /**
+     * Same gate as the visible "Edit" button. When false the hook is a no-op
+     * (e.g. while the table is streaming or otherwise locked).
+     */
+    canEnterEditMode: boolean;
+    editMode: TableEditMode;
+    setEditMode: (mode: TableEditMode) => void;
+}
+/**
+ * Double-click anywhere on the table → enters edit mode (when allowed) and
+ * focuses the specific cell that was double-clicked. Implementation notes:
+ *
+ * 1. We attach `onDoubleClick` at the `<table>` level and identify the target
+ *    cell via `data-cell-*` attributes on `<td>` / `<th>`. This avoids per-cell
+ *    handlers and plays nicely with cell content that uses
+ *    `dangerouslySetInnerHTML` (the inner span is the event target — closest()
+ *    finds the cell ancestor cleanly).
+ *
+ * 2. We skip targets inside `input, textarea, button` so:
+ *    - already-rendered textareas still get native double-click word selection,
+ *    - row/column action menu triggers keep their normal click behavior.
+ *
+ * 3. Focus pipeline:
+ *    - If the row is already in edit mode, the matching `<textarea>` is
+ *      already mounted — we focus it directly.
+ *    - Otherwise we stash `{row, col}` in `pendingFocusRef`, flip edit mode,
+ *      and rely on the textarea ref callback (registered via
+ *      `bindCellTextareaRef`) to consume the pending target on its first
+ *      render and focus + select itself.
+ */
+export declare function useDoubleClickEdit({ canEnterEditMode, editMode, setEditMode, }: UseDoubleClickEditArgs): {
+    handleTableDoubleClick: (e: React.MouseEvent<HTMLTableElement>) => void;
+    bindCellTextareaRef: (rowIndex: number, colIndex: number) => (el: HTMLTextAreaElement | null) => void;
+};
+export {};

package/dist/display/tables/editing/useDoubleClickEdit.js

@@ -0,0 +1,51 @@
+import { useRef } from "react";
+function useDoubleClickEdit({
+  canEnterEditMode,
+  editMode,
+  setEditMode
+}) {
+  const pendingFocusRef = useRef(null);
+  const handleTableDoubleClick = (e) => {
+    if (!canEnterEditMode) return;
+    const target = e.target;
+    if (!target) return;
+    if (target.closest("input, textarea, button")) return;
+    const cell = target.closest("[data-cell]");
+    if (!cell) return;
+    const kind = cell.dataset.cell;
+    if (kind === "header") {
+      if (editMode !== "header") setEditMode("header");
+      return;
+    }
+    if (kind === "body") {
+      const row = Number(cell.dataset.cellRow);
+      const col = Number(cell.dataset.cellCol);
+      if (Number.isNaN(row) || Number.isNaN(col)) return;
+      if (editMode === row) {
+        const textarea = cell.querySelector("textarea");
+        if (textarea) {
+          textarea.focus();
+          textarea.select();
+        }
+        return;
+      }
+      pendingFocusRef.current = { row, col };
+      setEditMode(row);
+    }
+  };
+  const bindCellTextareaRef = (rowIndex, colIndex) => (el) => {
+    if (!el) return;
+    const pending = pendingFocusRef.current;
+    if (!pending) return;
+    if (pending.row !== rowIndex || pending.col !== colIndex) return;
+    pendingFocusRef.current = null;
+    requestAnimationFrame(() => {
+      el.focus();
+      el.select();
+    });
+  };
+  return { handleTableDoubleClick, bindCellTextareaRef };
+}
+export {
+  useDoubleClickEdit
+};

package/dist/display/tables/editing/useTableUndo.d.ts

@@ -0,0 +1,25 @@
+/**
+ * One-level undo helper for table edits.
+ *
+ * Snapshot the current state immediately before a destructive mutation,
+ * then pass `consume()` to a toast undo action. `consume()` returns the
+ * snapshot once and clears it (so a stale undo button can't restore an
+ * outdated snapshot after another mutation has happened).
+ *
+ * Usage:
+ *   const undo = useTableUndo<TableShape>();
+ *   const handleDelete = () => {
+ *     undo.snapshot(currentTable);
+ *     setTable(removeRow(currentTable, idx));
+ *     toast.success("Row deleted", {
+ *       action: { label: "Undo", onClick: () => {
+ *         const prev = undo.consume();
+ *         if (prev) setTable(prev);
+ *       }}
+ *     });
+ *   };
+ */
+export declare function useTableUndo<T>(): {
+    snapshot: (current: T) => void;
+    consume: () => T | null;
+};

package/dist/display/tables/editing/useTableUndo.js

@@ -0,0 +1,17 @@
+"use client";
+import { useCallback, useRef } from "react";
+function useTableUndo() {
+  const snapshotRef = useRef(null);
+  const snapshot = useCallback((current) => {
+    snapshotRef.current = current;
+  }, []);
+  const consume = useCallback(() => {
+    const value = snapshotRef.current;
+    snapshotRef.current = null;
+    return value;
+  }, []);
+  return { snapshot, consume };
+}
+export {
+  useTableUndo
+};

package/dist/display/tables/table-action-row.d.ts

@@ -0,0 +1,8 @@
+export declare function tableActionRowClass(isMobile: boolean): string;
+/**
+ * Gives every icon-only button in the row a tooltip from its own name
+ * (aria-label, else its label text), and keeps it current as labels flip
+ * ("Data" ↔ "Table", "Chart this" ↔ "Hide chart"). A title set by the button
+ * itself is never overwritten.
+ */
+export declare function useTableActionTitles<T extends HTMLElement>(): import("react").RefObject<T | null>;

package/dist/display/tables/table-action-row.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+const ICON_ONLY = "[&_button:not([data-keep-label])]:h-7 [&_button:not([data-keep-label])]:min-w-7 [&_button:not([data-keep-label])]:gap-0.5 [&_button:not([data-keep-label])]:px-1.5 [&_button:not([data-keep-label])]:text-[0px] [&_button:not([data-keep-label])]:border-transparent [&_button:not([data-keep-label])]:bg-transparent [&_button:not([data-keep-label])]:shadow-none [&_button:not([data-keep-label])]:text-muted-foreground [&_button:not([data-keep-label]):hover]:bg-accent [&_button:not([data-keep-label]):hover]:text-foreground [&_button[aria-pressed=true]]:text-primary";
+function tableActionRowClass(isMobile) {
+  return isMobile ? `mt-1 flex min-w-0 max-w-full flex-wrap items-center justify-start gap-0.5 ${ICON_ONLY}` : `mt-1 flex min-w-0 max-w-full flex-wrap items-center justify-end gap-0.5 ${ICON_ONLY}`;
+}
+function useTableActionTitles() {
+  const ref = useRef(null);
+  useEffect(() => {
+    const row = ref.current;
+    if (!row) return;
+    const apply = () => {
+      row.querySelectorAll("button").forEach((button) => {
+        if (button.title && button.dataset.autoTitle === void 0) return;
+        const name = (button.getAttribute("aria-label") || button.textContent || "").replace(/\s+/g, " ").trim();
+        if (name && button.title !== name) {
+          button.title = name;
+          button.dataset.autoTitle = "";
+        }
+      });
+    };
+    apply();
+    const observer = new MutationObserver(apply);
+    observer.observe(row, { subtree: true, childList: true, characterData: true });
+    return () => observer.disconnect();
+  }, []);
+  return ref;
+}
+export {
+  tableActionRowClass,
+  useTableActionTitles
+};

package/dist/display/tables/table-viewer.d.ts

@@ -0,0 +1,13 @@
+export declare function useTableViewer(): {
+    canWrite: boolean;
+};
+/** A header cell's markdown as the plain words a phone-card label shows. */
+export declare function plainHeaderLabel(header: string): string;
+/**
+ * The PHONE-STACK attributes for one body cell. The first column is the card's
+ * headline (no label); every other cell is labelled with its column.
+ */
+export declare function phoneStackCellProps(headers: readonly string[], colIndex: number): {
+    "data-phone"?: "lead";
+    "data-label"?: string;
+};

package/dist/display/tables/table-viewer.js

@@ -0,0 +1,18 @@
+import { useIsAuthenticated } from "../../host/app-bindings.js";
+function useTableViewer() {
+  const signedIn = Boolean(useIsAuthenticated());
+  return { canWrite: signedIn };
+}
+function plainHeaderLabel(header) {
+  return header.replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/<[^>]+>/g, "").replace(/[*_`~]/g, "").replace(/\s+/g, " ").trim();
+}
+function phoneStackCellProps(headers, colIndex) {
+  if (colIndex === 0) return { "data-phone": "lead" };
+  const label = plainHeaderLabel(headers[colIndex] ?? "");
+  return label ? { "data-label": label } : {};
+}
+export {
+  phoneStackCellProps,
+  plainHeaderLabel,
+  useTableViewer
+};