@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/blocks/table/StreamingTableRenderer.js

@@ -0,0 +1,907 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useClipboard } from "@ai-matrx/kit/clipboard";
+import { toast as copyToast } from "../../../host/toast.js";
+import { rewriteTableSource } from "../../../utils/table-source.js";
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
+import { useIsMobile } from "@ai-matrx/kit/media-query";
+import { cn } from "@ai-matrx/design-system";
+import { RegionSkeleton } from "@ai-matrx/design-system/controls";
+import { RichContent } from "../../../levels/RichContent.js";
+import { useMarkdownStreaming } from "../../../markdown-core/streaming-context.js";
+import { Button } from "@ai-matrx/design-system";
+import {
+  Download,
+  Eye,
+  Edit,
+  Save,
+  X,
+  FileJson,
+  FileText,
+  FileSpreadsheet,
+  FileDown,
+  ChevronDown,
+  Columns3,
+  Maximize2,
+  EyeOff
+} from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+  DropdownMenuCheckboxItem,
+  DropdownMenuLabel
+} from "@ai-matrx/design-system";
+import { useOpenTableViewerWindow } from "../../../host/app-bindings.js";
+import { useToastManager } from "../../../utils/lifted/useToastManager.js";
+import { THEMES } from "../../themes.js";
+import { TableSaveToMenu } from "../../tables/TableSaveToMenu.js";
+import {
+  phoneStackCellProps,
+  useTableViewer
+} from "../../tables/table-viewer.js";
+import { useCanvasFit } from "../canvas-fit.js";
+import { ChartThisButton, TableChartPanel } from "../chart/TableChart.js";
+import { tableActionRowClass, useTableActionTitles } from "../../tables/table-action-row.js";
+import { TableEditToolbar } from "../../tables/editing/TableEditToolbar.js";
+import { RowActionsMenu } from "../../tables/editing/RowActionsMenu.js";
+import { ColumnActionsMenu } from "../../tables/editing/ColumnActionsMenu.js";
+import { useTableUndo } from "../../tables/editing/useTableUndo.js";
+import { useDoubleClickEdit } from "../../tables/editing/useDoubleClickEdit.js";
+import { MarkdownTableScrollArea } from "../../tables/MarkdownTableScrollArea.js";
+import {
+  appendRow,
+  appendColumn,
+  clearAllContents,
+  insertRowAbove,
+  insertRowBelow,
+  removeRow,
+  clearRow,
+  duplicateRow,
+  insertColumnBefore,
+  insertColumnAfter,
+  removeColumn,
+  clearColumn,
+  duplicateColumn
+} from "../../tables/editing/tableMutations.js";
+import { useSpecimenMode } from "../../specimen/SpecimenContext.js";
+import {
+  parseMarkdownTable,
+  cleanTableHeaderKey
+} from "./parseMarkdownTable.js";
+const NO_HIDDEN_COLUMNS = /* @__PURE__ */ new Set();
+const ExportDropdownMenu = ({
+  tableData,
+  content,
+  copyTableToClipboard,
+  copyMarkdownToClipboard,
+  copyJsonToClipboard,
+  downloadCSV,
+  downloadMarkdown,
+  isStreamActive = false
+}) => {
+  const [isDataStable, setIsDataStable] = useState(false);
+  const stabilityTimerRef = useRef(null);
+  const stableTableData = useMemo(
+    () => ({
+      headers: tableData.headers,
+      rows: tableData.rows,
+      normalizedData: tableData.normalizedData
+    }),
+    [
+      JSON.stringify(tableData.headers),
+      JSON.stringify(tableData.rows),
+      JSON.stringify(tableData.normalizedData)
+    ]
+  );
+  useEffect(() => {
+    if (isStreamActive) {
+      setIsDataStable(false);
+      if (stabilityTimerRef.current) {
+        clearTimeout(stabilityTimerRef.current);
+        stabilityTimerRef.current = null;
+      }
+      return void 0;
+    }
+    if (stabilityTimerRef.current) {
+      clearTimeout(stabilityTimerRef.current);
+    }
+    setIsDataStable(false);
+    stabilityTimerRef.current = setTimeout(() => {
+      setIsDataStable(true);
+    }, 1e3);
+    return () => {
+      if (stabilityTimerRef.current) {
+        clearTimeout(stabilityTimerRef.current);
+      }
+    };
+  }, [stableTableData, content, isStreamActive]);
+  if (isStreamActive || !isDataStable) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+        children: [
+          /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+          "Export",
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 ml-1" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: copyTableToClipboard,
+          className: "flex items-center gap-2 cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4 text-green-500" }),
+            /* @__PURE__ */ jsx("span", { children: "Copy as Text" })
+          ]
+        }
+      ),
+      content && /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: copyMarkdownToClipboard,
+          className: "flex items-center gap-2 cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx(FileDown, { className: "h-4 w-4 text-purple-500" }),
+            /* @__PURE__ */ jsx("span", { children: "Copy as Markdown" })
+          ]
+        }
+      ),
+      tableData.normalizedData && /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: copyJsonToClipboard,
+          className: "flex items-center gap-2 cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx(FileJson, { className: "h-4 w-4 text-blue-500" }),
+            /* @__PURE__ */ jsx("span", { children: "Copy as JSON" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: downloadCSV,
+          className: "flex items-center gap-2 cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx(FileSpreadsheet, { className: "h-4 w-4 text-orange-500" }),
+            /* @__PURE__ */ jsx("span", { children: "Download as CSV" })
+          ]
+        }
+      ),
+      content && /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: downloadMarkdown,
+          className: "flex items-center gap-2 cursor-pointer",
+          children: [
+            /* @__PURE__ */ jsx(FileDown, { className: "h-4 w-4 text-indigo-500" }),
+            /* @__PURE__ */ jsx("span", { children: "Download as Markdown" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const StreamingTableRenderer = (props) => {
+  const parsedTable = useMemo(
+    () => parseMarkdownTable(props.content),
+    [props.content]
+  );
+  if (!parsedTable) {
+    return props.isStreamActive ? /* @__PURE__ */ jsx(RegionSkeleton, { shape: "rows", count: 3, "aria-label": "Table arriving" }) : null;
+  }
+  return /* @__PURE__ */ jsx(StreamingTableRendererCore, { ...props, parsedTable });
+};
+const StreamingTableRendererCore = ({
+  content,
+  metadata,
+  isStreamActive = false,
+  className,
+  fontSize = 13,
+  theme = "professional",
+  onSave = () => {
+  },
+  onContentChange,
+  saveAsTable,
+  expanded = false,
+  parsedTable
+}) => {
+  const { copyText } = useClipboard({
+    notify: (message, kind) => kind === "error" ? copyToast.error(message) : copyToast.success(message)
+  });
+  const toast = useToastManager();
+  const isMobile = useIsMobile();
+  const canvasFit = useCanvasFit();
+  const { canWrite } = useTableViewer();
+  const openTableWindow = useOpenTableViewerWindow();
+  const inLiveStream = useMarkdownStreaming();
+  const trailingRowStreaming = isStreamActive || inLiveStream;
+  const specimenMode = useSpecimenMode();
+  const tableTheme = THEMES[theme]?.table || THEMES.professional.table;
+  const [editMode, setEditMode] = useState("none");
+  const [showNormalized, setShowNormalized] = useState(false);
+  const [showChart, setShowChart] = useState(false);
+  const actionRowRef = useTableActionTitles();
+  const [internalTableData, setInternalTableData] = useState(null);
+  const tableData = internalTableData ?? parsedTable;
+  const { headers, rows } = tableData;
+  const defaultHiddenCols = NO_HIDDEN_COLUMNS;
+  const [hiddenColsOverride, setHiddenColsOverride] = useState(null);
+  const hiddenCols = hiddenColsOverride ?? defaultHiddenCols;
+  const toggleColumn = (index) => {
+    setHiddenColsOverride((prev) => {
+      const base = prev ?? defaultHiddenCols;
+      const next = new Set(base);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  };
+  const showAllColumns = () => setHiddenColsOverride(/* @__PURE__ */ new Set());
+  const showStreamingIndicator = isStreamActive && metadata?.hasPartialContent;
+  const generateMarkdownTable = () => rewriteTableSource(content, { headers, rows });
+  const copyTableToClipboard = async () => {
+    try {
+      const formattedTable = generateMarkdownTable();
+      await copyText(formattedTable, "Table copied to clipboard");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to copy table");
+    }
+  };
+  const copyJsonToClipboard = async () => {
+    try {
+      await copyText(
+        JSON.stringify(tableData.normalizedData, null, 2)
+      );
+      toast.success("JSON copied to clipboard");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to copy JSON");
+    }
+  };
+  const copyMarkdownToClipboard = async () => {
+    try {
+      if (content) {
+        await copyText(content, "Markdown copied to clipboard");
+      } else {
+        copyTableToClipboard();
+      }
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to copy markdown"
+      );
+    }
+  };
+  const downloadCSV = () => {
+    try {
+      const csvContent = [
+        headers.map((h) => h.replace(/"/g, '""')).join(","),
+        ...rows.map(
+          (row) => row.map((cell) => {
+            const escaped = cell.replace(/"/g, '""');
+            return cell.includes(",") ? `"${escaped}"` : escaped;
+          }).join(",")
+        )
+      ].join("\n");
+      const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "table_data.csv";
+      link.click();
+      URL.revokeObjectURL(url);
+      toast.success("Table exported to CSV", {
+        action: {
+          label: "Download Again",
+          onClick: () => link.click(),
+          className: "font-medium"
+        }
+      });
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to download CSV"
+      );
+    }
+  };
+  const downloadMarkdown = () => {
+    try {
+      const markdownContent = content || "";
+      const fileName = headers && headers[0] ? `${headers[0].replace(/[^a-z0-9]/gi, "_").toLowerCase()}.md` : "table_data.md";
+      const blob = new Blob([markdownContent], {
+        type: "text/markdown;charset=utf-8"
+      });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      toast.success("Markdown file downloaded", {
+        action: {
+          label: "Download Again",
+          onClick: () => {
+            const newLink = document.createElement("a");
+            newLink.href = url;
+            newLink.download = fileName;
+            document.body.appendChild(newLink);
+            newLink.click();
+            document.body.removeChild(newLink);
+          },
+          className: "font-medium"
+        }
+      });
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to download Markdown"
+      );
+    }
+  };
+  const toggleGlobalEditMode = () => {
+    if (editMode !== "none") {
+      if (!notifyContentChange()) return;
+      onSave(tableData);
+      setEditMode("none");
+      toast.info("Edit mode deactivated");
+    } else {
+      setInternalTableData(parsedTable);
+      setEditMode("header");
+      toast.info("Edit mode activated");
+    }
+  };
+  const handleHeaderChange = (index, value) => {
+    const newHeaders = [...headers];
+    newHeaders[index] = value;
+    setInternalTableData({ ...tableData, headers: newHeaders });
+  };
+  const handleCellChange = (rowIndex, colIndex, value) => {
+    const newRows = [...rows];
+    newRows[rowIndex][colIndex] = value;
+    setInternalTableData({ ...tableData, rows: newRows });
+  };
+  const handleRowClick = (rowIndex) => {
+    if (editMode === "none") return;
+    onSave(tableData);
+    setEditMode(rowIndex);
+  };
+  const handleHeaderClick = () => {
+    if (editMode === "none") return;
+    onSave(tableData);
+    setEditMode("header");
+  };
+  const handleSave = () => {
+    if (!notifyContentChange()) return;
+    onSave(tableData);
+    setEditMode("none");
+    toast.success("Table data saved");
+  };
+  const handleCancel = () => {
+    setInternalTableData(null);
+    setEditMode("none");
+    toast.info("Edits cancelled");
+  };
+  const notifyContentChange = () => {
+    if (onContentChange && content) {
+      try {
+        onContentChange(generateMarkdownTable());
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : String(error));
+        return false;
+      }
+    }
+    return true;
+  };
+  const undo = useTableUndo();
+  const applyMutation = (mutator) => {
+    setInternalTableData(mutator(tableData));
+  };
+  const undoLast = () => {
+    const prev = undo.consume();
+    if (prev) {
+      setInternalTableData(prev);
+      toast.info("Undone");
+    }
+  };
+  const undoToastAction = {
+    label: "Undo",
+    onClick: undoLast,
+    className: "font-medium"
+  };
+  const handleAppendRow = () => {
+    applyMutation(appendRow);
+    toast.success("Row added");
+  };
+  const handleInsertRowAbove = (rowIndex) => {
+    applyMutation((t) => insertRowAbove(t, rowIndex));
+    toast.success("Row inserted above");
+  };
+  const handleInsertRowBelow = (rowIndex) => {
+    applyMutation((t) => insertRowBelow(t, rowIndex));
+    toast.success("Row inserted below");
+  };
+  const handleDuplicateRow = (rowIndex) => {
+    applyMutation((t) => duplicateRow(t, rowIndex));
+    toast.success("Row duplicated");
+  };
+  const handleClearRow = (rowIndex) => {
+    undo.snapshot(tableData);
+    applyMutation((t) => clearRow(t, rowIndex));
+    toast.success("Row cleared", { action: undoToastAction });
+  };
+  const handleDeleteRow = (rowIndex) => {
+    undo.snapshot(tableData);
+    applyMutation((t) => removeRow(t, rowIndex));
+    if (editMode === rowIndex) {
+      setEditMode("header");
+    }
+    toast.success("Row deleted", { action: undoToastAction });
+  };
+  const handleClearAllContents = () => {
+    if (rows.length === 0 || headers.length <= 1) return;
+    undo.snapshot(tableData);
+    applyMutation(clearAllContents);
+    toast.success("Cleared all contents (kept first column)", {
+      action: undoToastAction
+    });
+  };
+  const handleAppendColumn = () => {
+    applyMutation((t) => appendColumn(t));
+    toast.success("Column added");
+  };
+  const handleInsertColumnBefore = (colIndex) => {
+    applyMutation((t) => insertColumnBefore(t, colIndex));
+    toast.success("Column inserted before");
+  };
+  const handleInsertColumnAfter = (colIndex) => {
+    applyMutation((t) => insertColumnAfter(t, colIndex));
+    toast.success("Column inserted after");
+  };
+  const handleDuplicateColumn = (colIndex) => {
+    applyMutation((t) => duplicateColumn(t, colIndex));
+    toast.success("Column duplicated");
+  };
+  const handleClearColumn = (colIndex) => {
+    undo.snapshot(tableData);
+    applyMutation((t) => clearColumn(t, colIndex));
+    toast.success("Column cleared", { action: undoToastAction });
+  };
+  const handleDeleteColumn = (colIndex) => {
+    undo.snapshot(tableData);
+    applyMutation((t) => removeColumn(t, colIndex));
+    toast.success("Column deleted", { action: undoToastAction });
+  };
+  const isEditingEnabled = editMode !== "none";
+  const phoneStack = !isEditingEnabled;
+  const pinFirstColumn = canvasFit === "tight" && !isMobile && !isEditingEnabled;
+  const isEditingHeader = editMode === "header";
+  const editingBorderStyle = "overflow-x-auto rounded-xl border-3 border-dashed border-red-500";
+  const normalBorderStyle = `overflow-x-auto rounded-xl border-3 ${tableTheme.border}`;
+  const tableIsComplete = !isStreamActive || metadata?.isComplete === true;
+  const canEnterEditMode = tableIsComplete && !specimenMode;
+  const { handleTableDoubleClick, bindCellTextareaRef } = useDoubleClickEdit({
+    canEnterEditMode,
+    editMode,
+    setEditMode
+  });
+  const cellPaddingClass = expanded ? "px-3 py-2" : "px-2.5 py-1.5";
+  const isColumnHidden = (index) => !isEditingEnabled && hiddenCols.has(index);
+  const hasHiddenColumns = !isEditingEnabled && hiddenCols.size > 0;
+  const hiddenHeaderLabel = (index) => cleanTableHeaderKey(headers[index] ?? "") || `Column ${index + 1}`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full my-3", className), children: [
+    showNormalized && tableData.normalizedData ? /* @__PURE__ */ jsxs("div", { className: "relative p-4 bg-gray-100 dark:bg-gray-800 rounded-lg", children: [
+      /* @__PURE__ */ jsx("pre", { className: "text-sm overflow-auto", children: JSON.stringify(tableData.normalizedData, null, 2) }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => setShowNormalized(false),
+          className: "absolute top-2 right-2 opacity-90 hover:opacity-100 flex items-center gap-1 shadow-md",
+          children: [
+            /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+            "View Table"
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        MarkdownTableScrollArea,
+        {
+          className: cn(
+            "border border-border rounded-lg shadow-sm",
+            isEditingEnabled && "border-dashed border-red-500 border-2",
+            isMobile && "-mx-1",
+            phoneStack && "phone-stack"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "table",
+              {
+                className: cn(
+                  "divide-y divide-border",
+                  isMobile && !phoneStack ? "min-w-max w-full" : phoneStack ? "w-full" : "min-w-full"
+                ),
+                style: { fontSize: `${fontSize}px` },
+                "data-canvas-fit": canvasFit === "outside" ? void 0 : canvasFit,
+                onDoubleClick: canWrite ? handleTableDoubleClick : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("thead", { className: tableTheme.header, onClick: handleHeaderClick, children: /* @__PURE__ */ jsxs("tr", { className: cn(pinFirstColumn && "[background-color:inherit]"), children: [
+                    isEditingEnabled && /* @__PURE__ */ jsx("th", { className: "w-5 p-0", "aria-hidden": "true" }),
+                    headers.map(
+                      (header, index) => isColumnHidden(index) ? null : /* @__PURE__ */ jsx(
+                        "th",
+                        {
+                          "data-cell": "header",
+                          "data-cell-col": index,
+                          className: cn(
+                            cellPaddingClass,
+                            "text-left font-semibold",
+                            tableTheme.headerText,
+                            isMobile && "whitespace-nowrap",
+                            isEditingEnabled && "group/col",
+                            pinFirstColumn && index === 0 && "sticky left-0 z-[1] [background-color:inherit] border-r border-border"
+                          ),
+                          children: /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: cn(
+                                "flex items-center gap-2",
+                                isEditingEnabled && "justify-between"
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: isEditingHeader ? /* @__PURE__ */ jsx(
+                                  "input",
+                                  {
+                                    type: "text",
+                                    value: header,
+                                    onChange: (e) => handleHeaderChange(index, e.target.value),
+                                    className: cn(
+                                      "w-full bg-transparent outline-none border border-dashed border-blue-300 p-1",
+                                      tableTheme.headerText
+                                    ),
+                                    onClick: (e) => e.stopPropagation()
+                                  }
+                                ) : (
+                                  // Every cell renders through the ONE core's inline
+                                  // level (math, links, code — healed while the row
+                                  // is still arriving).
+                                  /* @__PURE__ */ jsx(
+                                    RichContent,
+                                    {
+                                      level: "inline",
+                                      source: header,
+                                      gfmCell: true,
+                                      isStreaming: trailingRowStreaming && rows.length === 0
+                                    }
+                                  )
+                                ) }),
+                                isEditingEnabled && /* @__PURE__ */ jsx(
+                                  ColumnActionsMenu,
+                                  {
+                                    onInsertBefore: () => handleInsertColumnBefore(index),
+                                    onInsertAfter: () => handleInsertColumnAfter(index),
+                                    onDuplicate: () => handleDuplicateColumn(index),
+                                    onClear: () => handleClearColumn(index),
+                                    onDelete: () => handleDeleteColumn(index)
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        },
+                        index
+                      )
+                    ),
+                    hasHiddenColumns && /* @__PURE__ */ jsx(
+                      "th",
+                      {
+                        className: "w-6 px-1 py-1.5 text-center align-middle cursor-pointer text-muted-foreground hover:text-foreground",
+                        title: `${hiddenCols.size} hidden column${hiddenCols.size === 1 ? "" : "s"} \u2014 click to show all`,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          showAllColumns();
+                        },
+                        children: /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5 mx-auto" })
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsx("tbody", { className: "bg-background divide-y divide-border", children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs(
+                    "tr",
+                    {
+                      className: cn(
+                        "transition-colors",
+                        typeof tableTheme.row === "object" ? tableTheme.row.hover : "hover:bg-muted/30",
+                        editMode === rowIndex && "bg-blue-50 dark:bg-blue-900/20",
+                        isEditingEnabled && "group/row"
+                      ),
+                      onClick: () => handleRowClick(rowIndex),
+                      children: [
+                        isEditingEnabled && /* @__PURE__ */ jsx("td", { className: "w-5 p-0 text-center align-middle", children: /* @__PURE__ */ jsx(
+                          RowActionsMenu,
+                          {
+                            onInsertAbove: () => handleInsertRowAbove(rowIndex),
+                            onInsertBelow: () => handleInsertRowBelow(rowIndex),
+                            onDuplicate: () => handleDuplicateRow(rowIndex),
+                            onClear: () => handleClearRow(rowIndex),
+                            onDelete: () => handleDeleteRow(rowIndex)
+                          }
+                        ) }),
+                        headers.map(
+                          (_, colIndex) => isColumnHidden(colIndex) ? null : /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              "data-cell": "body",
+                              "data-cell-row": rowIndex,
+                              "data-cell-col": colIndex,
+                              ...phoneStack ? phoneStackCellProps(headers, colIndex) : {},
+                              className: cn(
+                                cellPaddingClass,
+                                "text-foreground",
+                                isMobile && !phoneStack ? "whitespace-nowrap max-w-[200px] overflow-hidden text-ellipsis" : "whitespace-normal",
+                                pinFirstColumn && colIndex === 0 && "sticky left-0 z-[1] bg-background border-r border-border min-w-[7rem] max-w-[12rem]"
+                              ),
+                              children: editMode === rowIndex ? /* @__PURE__ */ jsx(
+                                "textarea",
+                                {
+                                  ref: bindCellTextareaRef(rowIndex, colIndex),
+                                  value: row[colIndex] || "",
+                                  onChange: (e) => handleCellChange(
+                                    rowIndex,
+                                    colIndex,
+                                    e.target.value
+                                  ),
+                                  className: cn(
+                                    "w-full bg-transparent outline-none border border-dashed border-blue-300 p-1",
+                                    "resize-y min-h-[8rem]"
+                                  ),
+                                  onClick: (e) => e.stopPropagation(),
+                                  onFocus: (e) => e.target.select()
+                                }
+                              ) : row[colIndex] ? /* @__PURE__ */ jsx(
+                                RichContent,
+                                {
+                                  level: "inline",
+                                  source: row[colIndex],
+                                  gfmCell: true,
+                                  isStreaming: trailingRowStreaming && rowIndex === rows.length - 1
+                                }
+                              ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "data-empty-cell": "", "aria-label": "Empty cell", children: "\u2014" })
+                            },
+                            colIndex
+                          )
+                        ),
+                        hasHiddenColumns && /* @__PURE__ */ jsx("td", { className: "w-6 px-1 py-0 align-middle", "aria-hidden": true })
+                      ]
+                    },
+                    rowIndex
+                  )) })
+                ]
+              }
+            ),
+            showStreamingIndicator && /* @__PURE__ */ jsx("div", { className: "px-4 py-2 bg-muted/30 border-t border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-primary rounded-full animate-pulse" }),
+                /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-primary rounded-full animate-pulse [animation-delay:200ms]" }),
+                /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 bg-primary rounded-full animate-pulse [animation-delay:400ms]" })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Streaming data... (",
+                metadata?.completeRowCount,
+                " row",
+                metadata?.completeRowCount !== 1 ? "s" : "",
+                " complete",
+                metadata?.hasPartialContent ? ", 1 buffering" : "",
+                ")"
+              ] })
+            ] }) })
+          ]
+        }
+      ),
+      tableIsComplete && !specimenMode && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: actionRowRef,
+          role: "toolbar",
+          "aria-label": "Table actions",
+          className: tableActionRowClass(isMobile),
+          children: [
+            isEditingEnabled && /* @__PURE__ */ jsx(
+              TableEditToolbar,
+              {
+                onAddRow: handleAppendRow,
+                onAddColumn: handleAppendColumn,
+                onClearAllContents: handleClearAllContents,
+                rowCount: rows.length,
+                colCount: headers.length,
+                className: "contents"
+              }
+            ),
+            !isEditingEnabled && headers.length > 1 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  "aria-label": "Choose visible columns",
+                  title: "Choose visible columns",
+                  className: "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+                  children: [
+                    /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4" }),
+                    hiddenCols.size > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                      "(",
+                      headers.length - hiddenCols.size,
+                      "/",
+                      headers.length,
+                      ")"
+                    ] }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 ml-1" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+                /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Visible columns" }),
+                /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                headers.map((_, index) => /* @__PURE__ */ jsx(
+                  DropdownMenuCheckboxItem,
+                  {
+                    checked: !hiddenCols.has(index),
+                    onCheckedChange: () => toggleColumn(index),
+                    onSelect: (e) => e.preventDefault(),
+                    children: /* @__PURE__ */ jsx("span", { className: "truncate", children: hiddenHeaderLabel(index) })
+                  },
+                  index
+                )),
+                hiddenCols.size > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsxs(
+                    DropdownMenuItem,
+                    {
+                      onClick: showAllColumns,
+                      className: "cursor-pointer",
+                      children: [
+                        /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-2" }),
+                        "Show all"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            !expanded && !isEditingEnabled && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => openTableWindow({
+                  content,
+                  title: cleanTableHeaderKey(headers[0] ?? "") || "Table"
+                }),
+                className: "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+                children: [
+                  /* @__PURE__ */ jsx(Maximize2, { className: "h-4 w-4" }),
+                  "Window"
+                ]
+              }
+            ),
+            !isEditingEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+              tableData.normalizedData && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => setShowNormalized(!showNormalized),
+                  className: "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+                  children: [
+                    /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+                    showNormalized ? "Table" : "Data"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ChartThisButton,
+                {
+                  table: { headers, rows },
+                  active: showChart,
+                  onToggle: () => setShowChart((v) => !v)
+                }
+              ),
+              canWrite && tableData.normalizedData && /* @__PURE__ */ jsx(
+                TableSaveToMenu,
+                {
+                  headers,
+                  rows,
+                  title: saveAsTable?.title ?? null,
+                  ...saveAsTable?.resolveTitle ? { resolveTitle: saveAsTable.resolveTitle } : {},
+                  ...saveAsTable?.onSaved ? { onSaved: saveAsTable.onSaved } : {}
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ExportDropdownMenu,
+                {
+                  tableData,
+                  content,
+                  copyTableToClipboard,
+                  copyMarkdownToClipboard,
+                  copyJsonToClipboard,
+                  downloadCSV,
+                  downloadMarkdown,
+                  isStreamActive
+                }
+              )
+            ] }),
+            isEditingEnabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: handleSave,
+                  "data-keep-label": "",
+                  className: "flex items-center gap-2 border-1 border-dashed border-green-500 rounded-xl",
+                  children: [
+                    /* @__PURE__ */ jsx(Save, { className: "h-4 w-4" }),
+                    "Save"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: handleCancel,
+                  "data-keep-label": "",
+                  className: "flex items-center gap-2 border-1 border-dashed border-red-500 rounded-xl",
+                  children: [
+                    /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                    "Cancel"
+                  ]
+                }
+              )
+            ] }) : canWrite ? /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: toggleGlobalEditMode,
+                className: "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+                children: [
+                  /* @__PURE__ */ jsx(Edit, { className: "h-4 w-4" }),
+                  "Edit"
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] }),
+    showChart && !isStreamActive && /* @__PURE__ */ jsx(
+      TableChartPanel,
+      {
+        table: { headers, rows },
+        onClose: () => setShowChart(false)
+      }
+    )
+  ] });
+};
+export {
+  StreamingTableRenderer
+};