@braincrew-lab/langchain-canvas 0.1.13 → 0.2.0

package/dist/{TableRenderer-Y4JFRSLU.js → TableRenderer-VKDD3CB6.js}

@@ -1,5 +1,5 @@
 import { loadOptional } from './chunk-YZZSJJMQ.js';
-import { useCanvasStore } from './chunk-KKLWKR5G.js';
+import { useCanvasStore } from './chunk-S54GJDSJ.js';
 import { lazy, useMemo, useState, useRef, useEffect, useCallback, Suspense } from 'react';
 import '@fortune-sheet/react/dist/index.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -252,6 +252,65 @@ function TableRenderer({ artifact }) {
     const range = sel?.[0]?.[type] ?? [0, 0];
     wbRef.current?.insertRowOrColumn(type, Math.max(0, range[1]), 1, "rightbottom");
   };
+  const [selection, setSelection] = useState(null);
+  const [boldOn, setBoldOn] = useState(false);
+  const [fillColor, setFillColor] = useState("#fef3c7");
+  const [textColor, setTextColor] = useState("#111827");
+  const handleSelectionChange = useCallback((_sheetId, sel) => {
+    setSelection({ row: [...sel.row], column: [...sel.column] });
+    const bl = wbRef.current?.getCellValue?.(sel.row[0], sel.column[0], { type: "bl" });
+    setBoldOn(bl === 1 || bl === "1");
+  }, []);
+  const workbookHooks = useMemo(() => ({ afterSelectionChange: handleSelectionChange }), [handleSelectionChange]);
+  const applyFormat = (attr, value) => {
+    const sel = wbRef.current?.getSelection?.();
+    if (!sel?.length) return;
+    const ranges = sel.map((s) => ({ row: [s.row[0], s.row[1]], column: [s.column[0], s.column[1]] }));
+    wbRef.current?.setCellFormatByRange(attr, value, ranges);
+  };
+  const toggleBold = () => {
+    applyFormat("bl", boldOn ? 0 : 1);
+    setBoldOn((b) => !b);
+  };
+  const cleanStyling = () => {
+    const wb = wbRef.current;
+    const sheet = wb?.getSheet?.();
+    const sheetId = sheet?.id;
+    if (!wb || !sheet || !sheetId) return;
+    const ops = [];
+    sheet.celldata.forEach(({ r, c, v }) => {
+      if (!v || typeof v !== "object") return;
+      const cell = v;
+      if (cell.bg != null) ops.push({ op: "remove", id: sheetId, path: ["data", r, c, "bg"] });
+      if (cell.fc != null) ops.push({ op: "remove", id: sheetId, path: ["data", r, c, "fc"] });
+      const spans = cell.ct?.s;
+      if (!Array.isArray(spans)) return;
+      spans.forEach((span, i) => {
+        if (!span || typeof span !== "object") return;
+        const run = span;
+        if (run.bg != null) ops.push({ op: "remove", id: sheetId, path: ["data", r, c, "ct", "s", i, "bg"] });
+        if (run.fc != null) ops.push({ op: "remove", id: sheetId, path: ["data", r, c, "ct", "s", i, "fc"] });
+      });
+    });
+    if (ops.length) wb.applyOp(ops);
+  };
+  const [frozen, setFrozen] = useState(false);
+  const toggleFreeze = () => {
+    const wb = wbRef.current;
+    if (!wb) return;
+    if (frozen) {
+      const sheetId = wb.getSheet?.()?.id;
+      if (sheetId) wb.applyOp([{ op: "remove", id: sheetId, path: ["frozen"] }]);
+    } else {
+      wb.freeze("row", { row: 0, column: 0 });
+    }
+    setFrozen((f) => !f);
+  };
+  useEffect(() => {
+    setFrozen(!viewActive && hasSheet && !!artifact.data.sheet?.[0]?.frozen);
+    setSelection(null);
+    setBoldOn(false);
+  }, [wbKey]);
   if (!mounted) {
     return /* @__PURE__ */ jsx("div", { className: "cv-sheet cv-sheet--empty", children: "Loading spreadsheet\u2026" });
   }
@@ -265,6 +324,65 @@ function TableRenderer({ artifact }) {
     /* @__PURE__ */ jsxs("div", { className: "cv-sheet-tools", children: [
       /* @__PURE__ */ jsx("button", { type: "button", onClick: () => insert("column"), children: "\uFF0B Column" }),
       /* @__PURE__ */ jsx("button", { type: "button", onClick: () => insert("row"), children: "\uFF0B Row" }),
+      /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__sep" }),
+      /* @__PURE__ */ jsxs("span", { className: "cv-sheet-tools__fmt", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: `cv-sheet-tools__bold${boldOn ? " cv-sheet-tools__bold--on" : ""}`,
+            title: "Bold",
+            "aria-pressed": boldOn,
+            disabled: !selection,
+            onClick: toggleBold,
+            children: "B"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            className: "cv-sheet-tools__color cv-sheet-tools__color--fill",
+            title: "Fill color",
+            disabled: !selection,
+            value: fillColor,
+            onChange: (e) => {
+              setFillColor(e.target.value);
+              applyFormat("bg", e.target.value);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            className: "cv-sheet-tools__color cv-sheet-tools__color--text",
+            title: "Text color",
+            disabled: !selection,
+            value: textColor,
+            onChange: (e) => {
+              setTextColor(e.target.value);
+              applyFormat("fc", e.target.value);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-sheet-tools__align", title: "Align left", disabled: !selection, onClick: () => applyFormat("ht", 1), children: "\u21E4" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-sheet-tools__align", title: "Align center", disabled: !selection, onClick: () => applyFormat("ht", 0), children: "\u2194" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-sheet-tools__align", title: "Align right", disabled: !selection, onClick: () => applyFormat("ht", 2), children: "\u21E5" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__sep" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "cv-sheet-tools__clean", title: "Remove all cell fills and font colors", onClick: cleanStyling, children: "Clean styling" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `cv-sheet-tools__freeze${frozen ? " cv-sheet-tools__freeze--on" : ""}`,
+          title: frozen ? "Unfreeze the header row" : "Keep the header row visible while scrolling",
+          "aria-pressed": frozen,
+          onClick: toggleFreeze,
+          children: "Freeze header"
+        }
+      ),
       columns.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__sep" }),
         /* @__PURE__ */ jsxs(
@@ -294,7 +412,7 @@ function TableRenderer({ artifact }) {
       ] }),
       /* @__PURE__ */ jsx("span", { className: "cv-sheet-tools__hint", children: "Right-click a header for more, or drag to edit" })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "cv-sheet", ref: rootRef, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "cv-sheet--empty", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Workbook, { ref: wbRef, data: initialData, onChange: handleChange }, wbKey) }) })
+    /* @__PURE__ */ jsx("div", { className: "cv-sheet", ref: rootRef, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "cv-sheet--empty", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Workbook, { ref: wbRef, data: initialData, onChange: handleChange, hooks: workbookHooks }, wbKey) }) })
   ] });
 }
 

package/dist/{chunk-KKLWKR5G.js → chunk-S54GJDSJ.js}

@@ -129,6 +129,14 @@ function lastOf(order, excludeId) {
   const remaining = order.filter((id) => id !== excludeId);
   return remaining.length ? remaining[remaining.length - 1] : null;
 }
+function notifyTimeTravel(store, before) {
+  const handler = store.onUserEdit;
+  if (!handler || store.canvas === before) return;
+  for (const id of Object.keys(store.canvas.artifacts)) {
+    const now = store.canvas.artifacts[id];
+    if (now && now !== before.artifacts[id]) handler(now);
+  }
+}
 function editedArtifactId(event) {
   switch (event.type) {
     case "canvas.create":
@@ -168,26 +176,34 @@ function createCanvasStore() {
       const artifact = id ? state.canvas.artifacts[id] : void 0;
       if (artifact) state.onUserEdit?.(artifact);
     },
-    undo: () => set((state) => {
-      if (!state.undoStack.length) return state;
-      const previous = state.undoStack[state.undoStack.length - 1];
-      return {
-        canvas: previous,
-        undoStack: state.undoStack.slice(0, -1),
-        redoStack: [...state.redoStack, state.canvas].slice(-50),
-        selections: []
-      };
-    }),
-    redo: () => set((state) => {
-      if (!state.redoStack.length) return state;
-      const next = state.redoStack[state.redoStack.length - 1];
-      return {
-        canvas: next,
-        redoStack: state.redoStack.slice(0, -1),
-        undoStack: [...state.undoStack, state.canvas].slice(-50),
-        selections: []
-      };
-    }),
+    undo: () => {
+      const before = get().canvas;
+      set((state) => {
+        if (!state.undoStack.length) return state;
+        const previous = state.undoStack[state.undoStack.length - 1];
+        return {
+          canvas: previous,
+          undoStack: state.undoStack.slice(0, -1),
+          redoStack: [...state.redoStack, state.canvas].slice(-50),
+          selections: []
+        };
+      });
+      notifyTimeTravel(get(), before);
+    },
+    redo: () => {
+      const before = get().canvas;
+      set((state) => {
+        if (!state.redoStack.length) return state;
+        const next = state.redoStack[state.redoStack.length - 1];
+        return {
+          canvas: next,
+          redoStack: state.redoStack.slice(0, -1),
+          undoStack: [...state.undoStack, state.canvas].slice(-50),
+          selections: []
+        };
+      });
+      notifyTimeTravel(get(), before);
+    },
     addUserMessage: (text) => set((state) => ({
       messages: [...state.messages, { id: `user_${state.messages.length}`, role: "user", text }],
       error: null

package/dist/{chunk-TERWLUW3.js → chunk-UL5F66PN.js}

@@ -1,4 +1,4 @@
-import { useCanvasStore } from './chunk-KKLWKR5G.js';
+import { useCanvasStore } from './chunk-S54GJDSJ.js';
 import { useCallback } from 'react';
 
 function useArtifactPatch(id) {

package/dist/index.d.ts

@@ -82,6 +82,16 @@ interface TableData {
      */
     sheet?: Array<Record<string, unknown>>;
 }
+/**
+ * A PDF shown in the browser's native viewer. `src` is a `data:application/pdf`
+ * URL (self-contained, the common case for agent/file-sourced PDFs), a `blob:`
+ * URL, or an `https:` URL the host is allowed to frame.
+ */
+interface PdfData {
+    src: string;
+    /** Optional original filename, used for the download attribute. */
+    filename?: string;
+}
 /** A freely-positioned element on a "blank" slide (percent geometry, 0–100). */
 interface SlideElement {
     id: string;
@@ -100,6 +110,9 @@ interface SlideElement {
     shape?: "rect" | "ellipse" | "line";
     /** Fill (rect/ellipse) or stroke (line) color for a shape. */
     fill?: string;
+    /** Editor-only grouping: elements sharing a `group` id select and move as
+     *  one. Purely additive — exporters and the presenter ignore it. */
+    group?: string;
 }
 interface Slide {
     /** title · content (bullets) · section · image · two-column · blank (free canvas). */
@@ -117,6 +130,12 @@ interface Slide {
     background?: string;
     /** Slide text color (hex). */
     textColor?: string;
+    /** Theme accent color (hex) — used by quick layouts and new shapes for rules,
+     *  section numbers, and stats. Set by the theme presets. */
+    accent?: string;
+    /** Font stack for the slide's text (system fonts only, no external loads).
+     *  Set by the theme presets; cascades to every element. */
+    fontFamily?: string;
     /** Speaker notes (not shown on the slide; exported to the .pptx notes pane). */
     notes?: string;
     /** Content padding as a percent of the slide width (a safe margin around the
@@ -141,7 +160,10 @@ type TableArtifact = Artifact<TableData> & {
 type SlidesArtifact = Artifact<SlidesData> & {
     type: "slides";
 };
-type KnownArtifact = HtmlArtifact | DocumentArtifact | ChartArtifact | TableArtifact | SlidesArtifact;
+type PdfArtifact = Artifact<PdfData> & {
+    type: "pdf";
+};
+type KnownArtifact = HtmlArtifact | DocumentArtifact | ChartArtifact | TableArtifact | SlidesArtifact | PdfArtifact;
 
 /**
  * Canvas Wire Protocol v1 — event envelopes. Mirror of
@@ -569,6 +591,8 @@ declare function ArtifactCard({ artifactId }: {
     artifactId: string;
 }): react.JSX.Element | null;
 
+declare function PdfRenderer$1({ artifact }: RendererProps<PdfData>): react.JSX.Element;
+
 declare function SlidesRenderer$1({ artifact }: RendererProps<SlidesData>): react.JSX.Element;
 
 declare function TableRenderer$1({ artifact }: RendererProps<TableData>): react.JSX.Element;
@@ -583,6 +607,7 @@ declare const ChartRenderer: react.LazyExoticComponent<typeof ChartRenderer$1>;
 declare const DocumentRenderer: react.LazyExoticComponent<typeof DocumentRenderer$1>;
 declare const TableRenderer: react.LazyExoticComponent<typeof TableRenderer$1>;
 declare const SlidesRenderer: react.LazyExoticComponent<typeof SlidesRenderer$1>;
+declare const PdfRenderer: react.LazyExoticComponent<typeof PdfRenderer$1>;
 
 /**
  * The batteries-included renderers. `html` is the base substrate (sandboxed
@@ -670,7 +695,7 @@ declare function printToPdf(html: string): void;
  */
 
 /** Extensions we can turn into an artifact, for `accept="…"` and drop filtering. */
-declare const IMPORTABLE_EXTENSIONS: readonly [".csv", ".md", ".markdown", ".txt", ".html", ".htm", ".json", ".xlsx"];
+declare const IMPORTABLE_EXTENSIONS: readonly [".csv", ".md", ".markdown", ".txt", ".html", ".htm", ".json", ".xlsx", ".pdf", ".hwpx", ".hwp"];
 /** True when the file has an extension we know how to import. */
 declare const canImport: (file: File) => boolean;
 /**
@@ -695,4 +720,4 @@ declare function useCanvasImport(): {
     canImport: (file: File) => boolean;
 };
 
-export { type Artifact, ArtifactCard, type ArtifactRegistry, type ArtifactRenderer, type ArtifactStatus, Canvas, type CanvasAppend, type CanvasClose, type CanvasCreate, type CanvasEvent, type CanvasNodePatch, type CanvasPatch, type CanvasProps, CanvasProvider, type CanvasProviderProps, CanvasRegistryProvider, type CanvasReplace, type CanvasState, type CanvasStatus, type CanvasStore, type ChartArtifact, type ChartData, type ChartOptions, ChartRenderer, type ChartSeries, type ChatEvent, type ChatMessage, type ChatRequest, type DocumentArtifact, type DocumentData, DocumentRenderer, type DoneEvent, type ElementSelection, type ErrorEvent, ExportMenu, type FileExport, type HtmlArtifact, type HtmlData, HtmlRenderer, IMPORTABLE_EXTENSIONS, INSPECTOR_MARK, type IframeCommand, type KnownArtifact, type MessageDelta, type MessageEnd, type MockStreamOptions, type RendererProps, STYLE_PROPS, type Scenario, SelectionBar, type Slide, type SlideElement, type SlidesArtifact, type SlidesData, SlidesRenderer, type StreamEvent, type StreamOptions, StylePanel, type TableArtifact, type TableColumn, type TableData, TableRenderer, type ToolEnd, type ToolStart, type UseCanvasStreamOptions, type UserEditHandler, builtinRenderers, canImport, createCanvasStore, dataExporters, downloadBlob, emptyCanvasState, importFile, isCanvasEvent, isChatEvent, mergePatch, mergeRegistries, mockStream, parseCsv, parseSSE, printToPdf, reduceCanvas, scenarios, slidesToPrintHtml, slugify, streamChat, toStandaloneHtml, useArtifactPatch, useCanvasImport, useCanvasReplay, useCanvasStore, useCanvasStoreApi, useCanvasStream, useRenderer, withInspector };
+export { type Artifact, ArtifactCard, type ArtifactRegistry, type ArtifactRenderer, type ArtifactStatus, Canvas, type CanvasAppend, type CanvasClose, type CanvasCreate, type CanvasEvent, type CanvasNodePatch, type CanvasPatch, type CanvasProps, CanvasProvider, type CanvasProviderProps, CanvasRegistryProvider, type CanvasReplace, type CanvasState, type CanvasStatus, type CanvasStore, type ChartArtifact, type ChartData, type ChartOptions, ChartRenderer, type ChartSeries, type ChatEvent, type ChatMessage, type ChatRequest, type DocumentArtifact, type DocumentData, DocumentRenderer, type DoneEvent, type ElementSelection, type ErrorEvent, ExportMenu, type FileExport, type HtmlArtifact, type HtmlData, HtmlRenderer, IMPORTABLE_EXTENSIONS, INSPECTOR_MARK, type IframeCommand, type KnownArtifact, type MessageDelta, type MessageEnd, type MockStreamOptions, type PdfArtifact, type PdfData, PdfRenderer, type RendererProps, STYLE_PROPS, type Scenario, SelectionBar, type Slide, type SlideElement, type SlidesArtifact, type SlidesData, SlidesRenderer, type StreamEvent, type StreamOptions, StylePanel, type TableArtifact, type TableColumn, type TableData, TableRenderer, type ToolEnd, type ToolStart, type UseCanvasStreamOptions, type UserEditHandler, builtinRenderers, canImport, createCanvasStore, dataExporters, downloadBlob, emptyCanvasState, importFile, isCanvasEvent, isChatEvent, mergePatch, mergeRegistries, mockStream, parseCsv, parseSSE, printToPdf, reduceCanvas, scenarios, slidesToPrintHtml, slugify, streamChat, toStandaloneHtml, useArtifactPatch, useCanvasImport, useCanvasReplay, useCanvasStore, useCanvasStoreApi, useCanvasStream, useRenderer, withInspector };