@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/display/tables/MarkdownTableScrollArea.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+interface MarkdownTableScrollAreaProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * The one horizontal viewport for Markdown tables. Native touch/trackpad
+ * scrolling remains available; the buttons make wide tables discoverable and
+ * operable for mouse and keyboard users without creating a vertical scroller.
+ */
+export declare function MarkdownTableScrollArea({ children, className, }: MarkdownTableScrollAreaProps): import("react").JSX.Element;
+export {};

package/dist/display/tables/MarkdownTableScrollArea.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import {
+  ChevronLeftTapButton,
+  ChevronRightTapButton
+} from "@ai-matrx/tap-target/buttons";
+import { cn } from "@ai-matrx/design-system";
+const EDGE_TOLERANCE_PX = 2;
+function MarkdownTableScrollArea({
+  children,
+  className
+}) {
+  const viewportRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const updateEdges = () => {
+      const maxScrollLeft = Math.max(
+        0,
+        viewport.scrollWidth - viewport.clientWidth
+      );
+      setCanScrollLeft(viewport.scrollLeft > EDGE_TOLERANCE_PX);
+      setCanScrollRight(
+        viewport.scrollLeft < maxScrollLeft - EDGE_TOLERANCE_PX
+      );
+    };
+    viewport.addEventListener("scroll", updateEdges, { passive: true });
+    const resizeObserver = new ResizeObserver(updateEdges);
+    resizeObserver.observe(viewport);
+    if (viewport.firstElementChild) {
+      resizeObserver.observe(viewport.firstElementChild);
+    }
+    return () => {
+      viewport.removeEventListener("scroll", updateEdges);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const scroll = (direction) => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    viewport.scrollBy({
+      left: direction * Math.max(240, viewport.clientWidth * 0.75),
+      behavior: "smooth"
+    });
+  };
+  const hasOverflow = canScrollLeft || canScrollRight;
+  return /* @__PURE__ */ jsxs("div", { className: "relative min-w-0", "data-markdown-table-scroll-area": true, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: viewportRef,
+        className: cn("overflow-x-auto overscroll-x-contain", className),
+        tabIndex: hasOverflow ? 0 : void 0,
+        "aria-label": hasOverflow ? "Scrollable table" : void 0,
+        children
+      }
+    ),
+    hasOverflow ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex justify-end",
+        "aria-label": "Table horizontal scroll controls",
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronLeftTapButton,
+            {
+              variant: "transparent",
+              ariaLabel: "Scroll table left",
+              disabled: !canScrollLeft,
+              onClick: () => scroll(-1)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronRightTapButton,
+            {
+              variant: "transparent",
+              ariaLabel: "Scroll table right",
+              disabled: !canScrollRight,
+              onClick: () => scroll(1)
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  MarkdownTableScrollArea
+};

package/dist/display/tables/SendToGoogleSheetButton.d.ts

@@ -0,0 +1,19 @@
+interface SendToGoogleSheetButtonProps {
+    headers: string[];
+    rows: string[][];
+    /** Display name for the sheet. Falls back to the first header / "Table". */
+    name?: string;
+    className?: string;
+}
+/** The Google Sheet push as a hook, shared by the button and `TableSaveToMenu`. */
+export declare function useSendToGoogleSheet({ headers, rows, name, }: {
+    headers: string[];
+    rows: string[][];
+    name?: string;
+}): {
+    available: boolean;
+    pushing: boolean;
+    send: () => Promise<void>;
+};
+export declare function SendToGoogleSheetButton({ headers, rows, name, className, }: SendToGoogleSheetButtonProps): import("react").JSX.Element | null;
+export {};

package/dist/display/tables/SendToGoogleSheetButton.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Loader2, Sheet } from "lucide-react";
+import { toast } from "../../host/toast.js";
+import {
+  announceProposedGoogleWrite,
+  loadSendToGoogle,
+  isProposedGoogleWrite
+} from "../../host/app-bindings.js";
+import { Button } from "@ai-matrx/design-system";
+function useSendToGoogleSheet({
+  headers,
+  rows,
+  name
+}) {
+  const [pushing, setPushing] = useState(false);
+  const sheetName = name?.trim() || (headers[0] ? `Table: ${headers[0]}`.slice(0, 60) : "Table");
+  const send = async () => {
+    if (pushing || !headers.length) return;
+    setPushing(true);
+    try {
+      const { sendRowsToGoogleSheet } = await loadSendToGoogle();
+      const seen = /* @__PURE__ */ new Map();
+      const columnNames = headers.map((header, i) => {
+        const base = header || `Column ${i + 1}`;
+        const count = (seen.get(base) ?? 0) + 1;
+        seen.set(base, count);
+        return count === 1 ? base : `${base} (${count})`;
+      });
+      const records = rows.map(
+        (row) => Object.fromEntries(columnNames.map((col, i) => [col, row[i] ?? ""]))
+      );
+      const result = await sendRowsToGoogleSheet(records, sheetName);
+      if (!result.ok && result.reason === "failed") {
+        toast.error("Could not create the Google Sheet", {
+          description: result.message
+        });
+        return;
+      }
+      if (isProposedGoogleWrite(result)) {
+        announceProposedGoogleWrite(result);
+        return;
+      }
+      if (!result.ok) {
+        toast.info("Connect Google to send this to a Sheet", {
+          description: "Takes about ten seconds, and only for files you choose or that we create.",
+          action: {
+            label: "Connect",
+            onClick: () => window.open(String(result.settingsHref ?? ""), "_blank", "noopener")
+          }
+        });
+        return;
+      }
+      toast.success(`Created "${result.name}" in your Google Drive`, {
+        action: result.openUrl ? {
+          label: "Open",
+          onClick: () => window.open(result.openUrl, "_blank", "noopener")
+        } : void 0
+      });
+    } finally {
+      setPushing(false);
+    }
+  };
+  return { available: headers.length > 0, pushing, send };
+}
+function SendToGoogleSheetButton({
+  headers,
+  rows,
+  name,
+  className
+}) {
+  const sheet = useSendToGoogleSheet({ headers, rows, ...name !== void 0 ? { name } : {} });
+  if (!sheet.available) return null;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      onClick: () => void sheet.send(),
+      disabled: sheet.pushing,
+      className: className ?? "flex items-center gap-2",
+      children: [
+        sheet.pushing ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Sheet, { className: "h-4 w-4" }),
+        "Google Sheet"
+      ]
+    }
+  );
+}
+export {
+  SendToGoogleSheetButton,
+  useSendToGoogleSheet
+};

package/dist/display/tables/SendToWorkbookButton.d.ts

@@ -0,0 +1,24 @@
+interface SendToWorkbookButtonProps {
+    headers: string[];
+    rows: string[][];
+    /** Display name for the workbook. Falls back to the first header / "Table". */
+    name?: string;
+    className?: string;
+}
+/**
+ * The workbook push as a hook, so a menu item can run it while the success
+ * dialog lives outside the menu (a closed menu would unmount it). The button
+ * below and `TableSaveToMenu` both use it.
+ */
+export declare function useSendToWorkbook({ headers, rows, name, }: {
+    headers: string[];
+    rows: string[][];
+    name?: string;
+}): {
+    available: boolean;
+    pushing: boolean;
+    send: () => Promise<void>;
+    dialog: import("react").JSX.Element;
+};
+export declare function SendToWorkbookButton({ headers, rows, name, className, }: SendToWorkbookButtonProps): import("react").JSX.Element | null;
+export {};

package/dist/display/tables/SendToWorkbookButton.js

@@ -0,0 +1,93 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FileSpreadsheet, Loader2 } from "lucide-react";
+import { toast } from "../../host/toast.js";
+import {
+  ensureOrganizationContext,
+  loadExportTargets,
+  isOrganizationSelectionCancelled
+} from "../../host/app-bindings.js";
+import { Button } from "@ai-matrx/design-system";
+import { OpenDestinationDialog } from "../../host/app-bindings.js";
+function useSendToWorkbook({
+  headers,
+  rows,
+  name
+}) {
+  const [pushing, setPushing] = useState(false);
+  const [created, setCreated] = useState(null);
+  const workbookName = name?.trim() || (headers[0] ? `Table: ${headers[0]}`.slice(0, 60) : "Table");
+  const send = async () => {
+    if (pushing || !headers.length) return;
+    setPushing(true);
+    try {
+      const organizationId = await ensureOrganizationContext();
+      const { pushTableToWorkbook } = await loadExportTargets();
+      const res = await pushTableToWorkbook(
+        {
+          name: workbookName,
+          headers,
+          rows
+        },
+        organizationId
+      );
+      if (!res.ok || !res.href) {
+        toast.error("Could not create workbook", { description: res.error });
+        return;
+      }
+      setCreated({ route: res.href, title: "Workbook created" });
+    } catch (error) {
+      if (!isOrganizationSelectionCancelled(error)) {
+        toast.error("Could not create workbook", {
+          description: error instanceof Error ? error.message : String(error)
+        });
+      }
+    } finally {
+      setPushing(false);
+    }
+  };
+  const dialog = /* @__PURE__ */ jsx(
+    OpenDestinationDialog,
+    {
+      open: created !== null,
+      onOpenChange: (o) => {
+        if (!o) setCreated(null);
+      },
+      title: created?.title ?? "",
+      resourceName: workbookName,
+      route: created?.route ?? "/"
+    }
+  );
+  return { available: headers.length > 0, pushing, send, dialog };
+}
+function SendToWorkbookButton({
+  headers,
+  rows,
+  name,
+  className
+}) {
+  const workbook = useSendToWorkbook({ headers, rows, ...name !== void 0 ? { name } : {} });
+  if (!workbook.available) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => void workbook.send(),
+        disabled: workbook.pushing,
+        className: className ?? "flex items-center gap-2 hover:bg-blue-100 dark:hover:bg-blue-800/30",
+        children: [
+          workbook.pushing ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(FileSpreadsheet, { className: "h-4 w-4" }),
+          "Workbook"
+        ]
+      }
+    ),
+    workbook.dialog
+  ] });
+}
+export {
+  SendToWorkbookButton,
+  useSendToWorkbook
+};

package/dist/display/tables/TableSaveToMenu.d.ts

@@ -0,0 +1,16 @@
+/**
+ * "A table…" is THE one "Save to a table" (lane SAVE-AS-TABLE-EVERYWHERE, 2026-09-29): the
+ * `saveToTable` overlay — a new table with its columns' types proposed, or these rows added to a
+ * table the person has, columns matched. It replaced the two writes this menu used to carry ("A
+ * live table" for a chat artifact, "A data table" for everything else), each with its own dialog.
+ */
+export declare function TableSaveToMenu({ headers, rows, title, resolveTitle, onSaved, }: {
+    headers: string[];
+    rows: string[][];
+    /** The name a new table is offered (the conversation, the artifact). */
+    title?: string | null;
+    /** Or a name worked out when the person asks (read before the screen opens). */
+    resolveTitle?: () => Promise<string | null>;
+    /** The rows landed in this table — a chat artifact links itself to it and becomes live. */
+    onSaved?: (tableId: string, how: "new" | "existing") => void | Promise<void>;
+}): import("react").JSX.Element | null;

package/dist/display/tables/TableSaveToMenu.js

@@ -0,0 +1,98 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Database, FileSpreadsheet, Loader2, Sheet, Table2 } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@ai-matrx/design-system";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@ai-matrx/design-system";
+import { useOpenSaveToTable } from "../../host/tables.js";
+import { useSendToWorkbook } from "./SendToWorkbookButton.js";
+import { useSendToGoogleSheet } from "./SendToGoogleSheetButton.js";
+function TableSaveToMenu({
+  headers,
+  rows,
+  title,
+  resolveTitle,
+  onSaved
+}) {
+  const workbook = useSendToWorkbook({ headers, rows });
+  const sheet = useSendToGoogleSheet({ headers, rows });
+  const openSaveToTable = useOpenSaveToTable();
+  const [naming, setNaming] = useState(false);
+  const busy = workbook.pushing || sheet.pushing || naming;
+  if (!headers.length) return null;
+  const saveAsTable = async () => {
+    let name = title ?? null;
+    if (resolveTitle) {
+      setNaming(true);
+      try {
+        name = await resolveTitle() ?? name;
+      } catch {
+      } finally {
+        setNaming(false);
+      }
+    }
+    openSaveToTable?.({
+      grid: { headers, rows },
+      title: name,
+      ...onSaved ? { onSaved: (event) => onSaved(event.tableId, event.how) } : {}
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          "data-keep-label": "",
+          "aria-label": "Save this table to\u2026",
+          className: "h-7 gap-1 px-2 text-xs",
+          children: [
+            busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(Database, { className: "h-3.5 w-3.5", "aria-hidden": true }),
+            "Save to",
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5", "aria-hidden": true })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [
+        openSaveToTable ? /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: naming, onSelect: () => void saveAsTable(), className: "gap-2", children: [
+          /* @__PURE__ */ jsx(Table2, { className: "h-4 w-4" }),
+          " A table\u2026"
+        ] }) : null,
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            disabled: workbook.pushing,
+            onSelect: () => void workbook.send(),
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx(FileSpreadsheet, { className: "h-4 w-4" }),
+              " A workbook"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            disabled: sheet.pushing,
+            onSelect: () => void sheet.send(),
+            className: "gap-2",
+            children: [
+              /* @__PURE__ */ jsx(Sheet, { className: "h-4 w-4" }),
+              " A Google Sheet"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    workbook.dialog
+  ] });
+}
+export {
+  TableSaveToMenu
+};

package/dist/display/tables/TableWithSeparatedControls.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { type DisplayTheme } from "../themes.js";
+interface MarkdownTableProps {
+    data: {
+        headers: string[];
+        rows: string[][];
+        normalizedData?: Array<{
+            [key: string]: string;
+        }>;
+    };
+    className?: string;
+    fontSize?: number;
+    theme?: DisplayTheme;
+    onSave?: (tableData: {
+        headers: string[];
+        rows: string[][];
+    }) => void;
+    content?: string;
+    onContentChange?: (updatedMarkdown: string) => void;
+}
+declare const MarkdownTable: React.FC<MarkdownTableProps>;
+export default MarkdownTable;