@braincrew-lab/langchain-canvas 0.1.7 → 0.1.8

package/dist/{ChartRenderer-CKCJ2LQX.js → ChartRenderer-4MWKP2J4.js}

@@ -1,5 +1,5 @@
-import { useArtifactPatch } from './chunk-HHJWIO2C.js';
-import './chunk-PSIT32I5.js';
+import { useArtifactPatch } from './chunk-TERWLUW3.js';
+import './chunk-KKLWKR5G.js';
 import { useState, useMemo, useRef, useEffect } from 'react';
 import * as echarts from 'echarts/core';
 import { BarChart, LineChart, PieChart } from 'echarts/charts';

package/dist/{DocumentRenderer-7HP3YQUK.js → DocumentRenderer-LJGP6N7E.js}

@@ -1,5 +1,5 @@
-import { useArtifactPatch } from './chunk-HHJWIO2C.js';
-import './chunk-PSIT32I5.js';
+import { useArtifactPatch } from './chunk-TERWLUW3.js';
+import './chunk-KKLWKR5G.js';
 import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';

package/dist/{SlidesRenderer-KFSPD63I.js → SlidesRenderer-A5HX4MOA.js}

@@ -1,6 +1,6 @@
 import { resolveElements } from './chunk-6L3AL6W4.js';
-import { useArtifactPatch } from './chunk-HHJWIO2C.js';
-import './chunk-PSIT32I5.js';
+import { useArtifactPatch } from './chunk-TERWLUW3.js';
+import './chunk-KKLWKR5G.js';
 import { useState, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{TableRenderer-TRYSMQA7.js → TableRenderer-ZF7MVA7I.js}

@@ -1,5 +1,5 @@
 import { loadOptional } from './chunk-YZZSJJMQ.js';
-import { useCanvasStore } from './chunk-PSIT32I5.js';
+import { useCanvasStore } from './chunk-KKLWKR5G.js';
 import { lazy, useMemo, useState, useRef, useEffect, useCallback, Suspense } from 'react';
 import '@fortune-sheet/react/dist/index.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -208,7 +208,7 @@ function TableRenderer({ artifact }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [dataKey, formulasReady]
   );
-  const applyEvent = useCanvasStore((s) => s.applyEvent);
+  const applyEvent = useCanvasStore((s) => s.applyUserEvent);
   const persistTimer = useRef(null);
   const handleChange = useCallback(
     (sheets) => {

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

@@ -129,6 +129,19 @@ function lastOf(order, excludeId) {
   const remaining = order.filter((id) => id !== excludeId);
   return remaining.length ? remaining[remaining.length - 1] : null;
 }
+function editedArtifactId(event) {
+  switch (event.type) {
+    case "canvas.create":
+    case "canvas.replace":
+      return event.artifact.id;
+    case "canvas.append":
+    case "canvas.patch":
+    case "canvas.node_patch":
+      return event.id;
+    default:
+      return null;
+  }
+}
 var initialState = () => ({
   canvas: emptyCanvasState(),
   messages: [],
@@ -137,17 +150,24 @@ var initialState = () => ({
   selections: [],
   iframeCommand: null,
   undoStack: [],
-  redoStack: []
+  redoStack: [],
+  onUserEdit: null
 });
 function createCanvasStore() {
-  return createStore((set) => ({
+  return createStore((set, get) => ({
     ...initialState(),
     applyEvent: (event) => set((state) => foldEvent(state, event)),
     applyEvents: (events) => set((state) => events.reduce(foldEvent, state)),
-    applyUserEvent: (event) => set((state) => {
-      const undoStack = [...state.undoStack, state.canvas].slice(-50);
-      return { ...foldEvent(state, event), undoStack, redoStack: [] };
-    }),
+    applyUserEvent: (event) => {
+      set((state2) => {
+        const undoStack = [...state2.undoStack, state2.canvas].slice(-50);
+        return { ...foldEvent(state2, event), undoStack, redoStack: [] };
+      });
+      const state = get();
+      const id = editedArtifactId(event);
+      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];
@@ -176,6 +196,7 @@ function createCanvasStore() {
     setActiveArtifact: (id) => set((state) => ({ canvas: { ...state.canvas, activeId: id } })),
     setSelections: (selections) => set({ selections }),
     sendIframeCommand: (command) => set((state) => ({ iframeCommand: { ...command, seq: (state.iframeCommand?.seq ?? 0) + 1 } })),
+    setOnUserEdit: (handler) => set({ onUserEdit: handler }),
     reset: () => set(initialState())
   }));
 }

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

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

package/dist/index.d.ts

@@ -355,6 +355,10 @@ declare function mockStream(events: StreamEvent[], options?: MockStreamOptions):
  * patching, and versioning stay in one auditable place.
  */
 
+/** Fired when the *user* edits an artifact in the canvas (a table cell, a chart
+ *  value, document text, a slide/HTML element). The host wires this to sync the
+ *  edit back to the agent/backend so the next turn sees it. */
+type UserEditHandler = (artifact: Artifact) => void;
 interface ChatMessage {
     id: string;
     role: "user" | "assistant";
@@ -392,6 +396,8 @@ interface CanvasStore {
     /** Snapshots for undo/redo — only user edits are recorded (not agent streaming). */
     undoStack: CanvasState[];
     redoStack: CanvasState[];
+    /** Host callback fired after a user edit reconciles — the write-back hook. */
+    onUserEdit: UserEditHandler | null;
     applyEvent: (event: StreamEvent) => void;
     /** Apply a batch of events in a single store write (one re-render per frame). */
     applyEvents: (events: StreamEvent[]) => void;
@@ -404,6 +410,8 @@ interface CanvasStore {
     setActiveArtifact: (id: string) => void;
     setSelections: (selections: ElementSelection[]) => void;
     sendIframeCommand: (command: Omit<IframeCommand, "seq">) => void;
+    /** Register (or clear) the user-edit write-back handler. */
+    setOnUserEdit: (handler: UserEditHandler | null) => void;
     reset: () => void;
 }
 /** Create an isolated canvas store. */
@@ -508,8 +516,16 @@ interface CanvasProps {
      * reveals a quick-edit bar.
      */
     onEditElement?: (instruction: string) => void;
+    /**
+     * Fired after the *user* edits an artifact directly in the canvas — a table
+     * cell, a chart value, document text, a slide/HTML element — with the
+     * reconciled artifact. Wire this to sync the edit back to the agent/backend so
+     * the next turn sees it. Fires per committed edit (table edits are debounced);
+     * debounce further on the host before hitting the network.
+     */
+    onUserEdit?: (artifact: Artifact) => void;
 }
-declare function Canvas({ registry, emptyState, onEditElement }: CanvasProps): react.JSX.Element;
+declare function Canvas({ registry, emptyState, onEditElement, onUserEdit }: CanvasProps): react.JSX.Element;
 
 interface ExportMenuProps {
     artifact: Artifact;
@@ -666,4 +682,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, 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 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 };

package/dist/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { loadOptional } from './chunk-YZZSJJMQ.js';
 import { resolveElements } from './chunk-6L3AL6W4.js';
-export { useArtifactPatch } from './chunk-HHJWIO2C.js';
-import { useCanvasStoreApi, useCanvasStore } from './chunk-PSIT32I5.js';
-export { CanvasProvider, createCanvasStore, emptyCanvasState, isCanvasEvent, isChatEvent, mergePatch, reduceCanvas, useCanvasStore, useCanvasStoreApi } from './chunk-PSIT32I5.js';
+export { useArtifactPatch } from './chunk-TERWLUW3.js';
+import { useCanvasStoreApi, useCanvasStore } from './chunk-KKLWKR5G.js';
+export { CanvasProvider, createCanvasStore, emptyCanvasState, isCanvasEvent, isChatEvent, mergePatch, reduceCanvas, useCanvasStore, useCanvasStoreApi } from './chunk-KKLWKR5G.js';
 import { createContext, lazy, useRef, useCallback, useEffect, useContext, useState, useMemo, Suspense, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -1738,10 +1738,10 @@ function HtmlRenderer({ artifact: artifact2 }) {
 }
 
 // src/components/renderers/index.ts
-var ChartRenderer = lazy(() => import('./ChartRenderer-CKCJ2LQX.js').then((m) => ({ default: m.ChartRenderer })));
-var DocumentRenderer = lazy(() => import('./DocumentRenderer-7HP3YQUK.js').then((m) => ({ default: m.DocumentRenderer })));
-var TableRenderer = lazy(() => import('./TableRenderer-TRYSMQA7.js').then((m) => ({ default: m.TableRenderer })));
-var SlidesRenderer = lazy(() => import('./SlidesRenderer-KFSPD63I.js').then((m) => ({ default: m.SlidesRenderer })));
+var ChartRenderer = lazy(() => import('./ChartRenderer-4MWKP2J4.js').then((m) => ({ default: m.ChartRenderer })));
+var DocumentRenderer = lazy(() => import('./DocumentRenderer-LJGP6N7E.js').then((m) => ({ default: m.DocumentRenderer })));
+var TableRenderer = lazy(() => import('./TableRenderer-ZF7MVA7I.js').then((m) => ({ default: m.TableRenderer })));
+var SlidesRenderer = lazy(() => import('./SlidesRenderer-A5HX4MOA.js').then((m) => ({ default: m.SlidesRenderer })));
 var builtinRenderers = {
   html: HtmlRenderer,
   document: DocumentRenderer,
@@ -2362,17 +2362,22 @@ function useCanvasImport() {
   return { importFiles, canImport };
 }
 var ACCEPT = IMPORTABLE_EXTENSIONS.join(",");
-function Canvas({ registry = builtinRenderers, emptyState, onEditElement }) {
-  return /* @__PURE__ */ jsx(CanvasRegistryProvider, { registry, children: /* @__PURE__ */ jsx(CanvasPanel, { emptyState, onEditElement }) });
+function Canvas({ registry = builtinRenderers, emptyState, onEditElement, onUserEdit }) {
+  return /* @__PURE__ */ jsx(CanvasRegistryProvider, { registry, children: /* @__PURE__ */ jsx(CanvasPanel, { emptyState, onEditElement, onUserEdit }) });
 }
-function CanvasPanel({ emptyState, onEditElement }) {
+function CanvasPanel({ emptyState, onEditElement, onUserEdit }) {
   const { artifacts, order, activeId } = useCanvasStore((s) => s.canvas);
   const history = useCanvasStore((s) => s.canvas.history);
   const setActive = useCanvasStore((s) => s.setActiveArtifact);
   const selections = useCanvasStore((s) => s.selections);
   const setSelections = useCanvasStore((s) => s.setSelections);
+  const setOnUserEdit = useCanvasStore((s) => s.setOnUserEdit);
   const { importFiles } = useCanvasImport();
   const [dropping, setDropping] = useState(false);
+  useEffect(() => {
+    setOnUserEdit(onUserEdit ?? null);
+    return () => setOnUserEdit(null);
+  }, [onUserEdit, setOnUserEdit]);
   useEffect(() => {
     if (!selections.length) return;
     const onKey = (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braincrew-lab/langchain-canvas",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
   "type": "module",