@braincrew-lab/langchain-canvas 0.1.0

package/dist/chunk-HHJWIO2C.js

@@ -0,0 +1,12 @@
+import { useCanvasStore } from './chunk-PSIT32I5.js';
+import { useCallback } from 'react';
+
+function useArtifactPatch(id) {
+  const applyUserEvent = useCanvasStore((s) => s.applyUserEvent);
+  return useCallback(
+    (patch) => applyUserEvent({ type: "canvas.patch", id, patch }),
+    [applyUserEvent, id]
+  );
+}
+
+export { useArtifactPatch };

package/dist/chunk-PSIT32I5.js

@@ -0,0 +1,242 @@
+import { createStore } from 'zustand/vanilla';
+import { createContext, useState, useContext } from 'react';
+import { useStore } from 'zustand';
+import { jsx } from 'react/jsx-runtime';
+
+// src/protocol/events.ts
+function isCanvasEvent(event) {
+  return event.type.startsWith("canvas.");
+}
+function isChatEvent(event) {
+  return event.type.startsWith("message.") || event.type.startsWith("tool.");
+}
+
+// src/client/reconcile.ts
+function emptyCanvasState() {
+  return { artifacts: {}, history: {}, order: [], activeId: null };
+}
+function reduceCanvas(state, event) {
+  switch (event.type) {
+    case "canvas.create":
+      return create(state, event.artifact);
+    case "canvas.append": {
+      const current = state.artifacts[event.id];
+      if (!current) return state;
+      const data = appendAtPath(current.data, event.path, event.text);
+      return replaceInPlace(state, { ...current, data });
+    }
+    case "canvas.patch": {
+      const current = state.artifacts[event.id];
+      if (!current) return state;
+      const data = mergePatch(current.data, event.patch);
+      return replaceInPlace(state, { ...current, data });
+    }
+    case "canvas.node_patch": {
+      const current = state.artifacts[event.id];
+      const html = current?.data?.html;
+      if (!current || typeof html !== "string") return state;
+      const next = applyNodePatch(html, event.cid, event.html);
+      const data = { ...current.data, html: next };
+      return replaceInPlace(state, { ...current, data });
+    }
+    case "canvas.replace":
+      return pushVersion(state, event.artifact);
+    case "canvas.status": {
+      const current = state.artifacts[event.id];
+      if (!current) return state;
+      return replaceInPlace(state, { ...current, status: event.status });
+    }
+    case "canvas.close":
+      return state.activeId === event.id ? { ...state, activeId: lastOf(state.order, event.id) } : state;
+  }
+}
+function create(state, artifact) {
+  const known = state.order.includes(artifact.id);
+  return {
+    artifacts: { ...state.artifacts, [artifact.id]: artifact },
+    history: { ...state.history, [artifact.id]: [artifact] },
+    order: known ? state.order : [...state.order, artifact.id],
+    activeId: artifact.id
+  };
+}
+function replaceInPlace(state, artifact) {
+  const versions = state.history[artifact.id] ?? [];
+  const history = versions.length ? { ...state.history, [artifact.id]: [...versions.slice(0, -1), artifact] } : { ...state.history, [artifact.id]: [artifact] };
+  return { ...state, artifacts: { ...state.artifacts, [artifact.id]: artifact }, history };
+}
+function pushVersion(state, artifact) {
+  const versions = state.history[artifact.id] ?? [];
+  const known = state.order.includes(artifact.id);
+  return {
+    artifacts: { ...state.artifacts, [artifact.id]: artifact },
+    history: { ...state.history, [artifact.id]: [...versions, artifact] },
+    order: known ? state.order : [...state.order, artifact.id],
+    activeId: artifact.id
+  };
+}
+function appendAtPath(data, path, text) {
+  const keys = path.split(".");
+  const clone = structuredClone(data);
+  let node = clone;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const next = node[keys[i]];
+    if (!isPlainObject(next)) return data;
+    node = next;
+  }
+  const leaf = keys[keys.length - 1];
+  node[leaf] = `${node[leaf] ?? ""}${text}`;
+  return clone;
+}
+function applyNodePatch(html, cid, fragment) {
+  if (typeof DOMParser === "undefined") return html;
+  try {
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    const target = resolveCid(doc.body, cid);
+    if (!target || !target.parentNode) return html;
+    target.outerHTML = fragment;
+    return `<!doctype html>
+${doc.documentElement.outerHTML}`;
+  } catch {
+    return html;
+  }
+}
+function resolveCid(body, cid) {
+  if (!body) return null;
+  const indices = cid.split("-").slice(1);
+  let node = body;
+  for (const raw of indices) {
+    const index = Number(raw);
+    if (!Number.isInteger(index) || index < 0) return null;
+    const child = node.children[index];
+    if (!child) return null;
+    node = child;
+  }
+  return node;
+}
+function mergePatch(target, patch) {
+  if (!isPlainObject(patch)) return patch;
+  const base = isPlainObject(target) ? { ...target } : {};
+  for (const [key, value] of Object.entries(patch)) {
+    if (value === null) delete base[key];
+    else base[key] = mergePatch(base[key], value);
+  }
+  return base;
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function lastOf(order, excludeId) {
+  const remaining = order.filter((id) => id !== excludeId);
+  return remaining.length ? remaining[remaining.length - 1] : null;
+}
+var initialState = () => ({
+  canvas: emptyCanvasState(),
+  messages: [],
+  isStreaming: false,
+  error: null,
+  selections: [],
+  iframeCommand: null,
+  undoStack: [],
+  redoStack: []
+});
+function createCanvasStore() {
+  return createStore((set) => ({
+    ...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: [] };
+    }),
+    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: []
+      };
+    }),
+    addUserMessage: (text) => set((state) => ({
+      messages: [...state.messages, { id: `user_${state.messages.length}`, role: "user", text }],
+      error: null
+    })),
+    setStreaming: (value) => set({ isStreaming: value }),
+    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 } })),
+    reset: () => set(initialState())
+  }));
+}
+function foldEvent(state, event) {
+  try {
+    return reduceEvent(state, event);
+  } catch (err) {
+    console.error("[langchain-canvas] event skipped:", event, err);
+    return state;
+  }
+}
+function reduceEvent(state, event) {
+  if (isCanvasEvent(event)) {
+    const canvas = reduceCanvas(state.canvas, event);
+    if (event.type === "canvas.create") {
+      return { ...state, canvas, messages: linkArtifact(state.messages, event.artifact.id) };
+    }
+    return { ...state, canvas };
+  }
+  switch (event.type) {
+    case "message.delta":
+      return { ...state, messages: appendDelta(state.messages, event.messageId, event.text) };
+    case "error":
+      return { ...state, error: event.message };
+    case "done":
+      return { ...state, isStreaming: false };
+    // message.end / tool.* — no store change in the reference UI.
+    default:
+      return state;
+  }
+}
+function appendDelta(messages, id, text) {
+  const index = messages.findIndex((m) => m.id === id);
+  if (index === -1) return [...messages, { id, role: "assistant", text }];
+  const next = messages.slice();
+  next[index] = { ...next[index], text: next[index].text + text };
+  return next;
+}
+function linkArtifact(messages, artifactId) {
+  let index = messages.length - 1;
+  while (index >= 0 && messages[index].role !== "assistant") index--;
+  if (index === -1) {
+    return [...messages, { id: `assistant_${messages.length}`, role: "assistant", text: "", artifactIds: [artifactId] }];
+  }
+  const next = messages.slice();
+  const current = next[index];
+  next[index] = { ...current, artifactIds: [...current.artifactIds ?? [], artifactId] };
+  return next;
+}
+var CanvasStoreContext = createContext(null);
+var defaultStore = null;
+var getDefaultStore = () => defaultStore ??= createCanvasStore();
+function CanvasProvider({ children, store }) {
+  const [instance] = useState(() => store ?? createCanvasStore());
+  return /* @__PURE__ */ jsx(CanvasStoreContext.Provider, { value: instance, children });
+}
+function useCanvasStoreApi() {
+  return useContext(CanvasStoreContext) ?? getDefaultStore();
+}
+function useCanvasStore(selector) {
+  return useStore(useCanvasStoreApi(), selector);
+}
+
+export { CanvasProvider, createCanvasStore, emptyCanvasState, isCanvasEvent, isChatEvent, mergePatch, reduceCanvas, useCanvasStore, useCanvasStoreApi };

package/dist/chunk-YZZSJJMQ.js

@@ -0,0 +1,14 @@
+// src/optionalImport.ts
+async function loadOptional(pkg, load) {
+  try {
+    return await load();
+  } catch (err) {
+    const error = new Error(
+      `langchain-canvas: this feature requires the optional package "${pkg}", which isn't installed. Add it with:  npm i ${pkg}`
+    );
+    error.cause = err;
+    throw error;
+  }
+}
+
+export { loadOptional };