@braincrew-lab/langchain-canvas 0.1.7 → 0.1.9

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-7ICJQHYT.js}

@@ -1,9 +1,15 @@
 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';
 
+function shapeStyle(el) {
+  const fill = el.fill ?? "currentColor";
+  if (el.shape === "ellipse") return { width: "100%", height: "100%", background: fill, borderRadius: "50%" };
+  if (el.shape === "line") return { width: "100%", height: "100%", background: fill, borderRadius: 2 };
+  return { width: "100%", height: "100%", background: fill, borderRadius: 8 };
+}
 var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
 var dupSeq = 0;
 var dupId = (base) => `${base}_c${Date.now().toString(36)}${dupSeq++}`;
@@ -175,7 +181,7 @@ function FreeSlide({ elements, onChange }) {
                   },
                   children: el.text
                 }
-              ) : /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: el.src, alt: "", draggable: false }),
+              ) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { style: shapeStyle(el) }) : /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: el.src, alt: "", draggable: false }),
               selected === el.id && el.type === "text" && /* @__PURE__ */ jsxs("div", { className: `cv-free__fmt ${el.y < 16 ? "cv-free__fmt--below" : ""}`, onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: [
                 /* @__PURE__ */ jsx("button", { className: el.bold ? "is-on" : "", onClick: () => updateEl(el.id, { bold: !el.bold }), title: "Bold", children: /* @__PURE__ */ jsx("b", { children: "B" }) }),
                 /* @__PURE__ */ jsx(
@@ -194,6 +200,7 @@ function FreeSlide({ elements, onChange }) {
                 /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "center" }), title: "Align center", children: "\u2261" }),
                 /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "right" }), title: "Align right", children: "\u27F9" })
               ] }),
+              selected === el.id && el.type === "shape" && /* @__PURE__ */ jsx("div", { className: `cv-free__fmt ${el.y < 16 ? "cv-free__fmt--below" : ""}`, onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx("input", { type: "color", value: el.fill ?? "#5b5bd6", onChange: (e) => updateEl(el.id, { fill: e.target.value }), title: "Fill color" }) }),
               selected === el.id && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("span", { className: "cv-free__resize", onPointerDown: (e) => onDown(e, el, "resize") }),
                 /* @__PURE__ */ jsxs("div", { className: `cv-free__ctl ${el.y < 16 ? "cv-free__ctl--below" : ""}`, onPointerDown: (e) => e.stopPropagation(), children: [
@@ -225,11 +232,41 @@ function FreeSlide({ elements, onChange }) {
 }
 var THEMES = [
   { id: "light", label: "Light", bg: "#ffffff", text: "#1f2328" },
+  { id: "paper", label: "Paper", bg: "#f7f5ef", text: "#2b2a26" },
   { id: "dark", label: "Dark", bg: "#14171f", text: "#f0f2f5" },
   { id: "midnight", label: "Midnight", bg: "#0b1020", text: "#e6e8ef" },
+  { id: "navy", label: "Navy", bg: "#0d1b3e", text: "#eef2ff" },
+  { id: "forest", label: "Forest", bg: "#0f2a22", text: "#e6f2ec" },
   { id: "sunset", label: "Sunset", bg: "#2b1a2e", text: "#ffe8d6" },
   { id: "mint", label: "Mint", bg: "#0f2a24", text: "#d7f5ec" }
 ];
+var SHAPES = [
+  { id: "rect", label: "\u25AD Rectangle", box: { w: 30, h: 20 } },
+  { id: "ellipse", label: "\u25EF Ellipse", box: { w: 24, h: 24 } },
+  { id: "line", label: "\u2014 Line", box: { w: 40, h: 2 } }
+];
+var LAYOUTS = {
+  title: { label: "Title", els: [
+    { type: "text", x: 12, y: 34, w: 76, h: 18, text: "Presentation title", fontSize: 54, bold: true, align: "center" },
+    { type: "text", x: 20, y: 56, w: 60, h: 10, text: "Subtitle or one-line summary", fontSize: 24, align: "center" }
+  ] },
+  section: { label: "Section", els: [
+    { type: "shape", shape: "rect", x: 10, y: 34, w: 8, h: 3, fill: "#5b5bd6" },
+    { type: "text", x: 10, y: 40, w: 80, h: 16, text: "Section title", fontSize: 46, bold: true }
+  ] },
+  bullets: { label: "Bullets", els: [
+    { type: "text", x: 10, y: 12, w: 80, h: 12, text: "Heading", fontSize: 36, bold: true },
+    { type: "text", x: 10, y: 30, w: 80, h: 50, text: "\u2022 First key point\n\u2022 Second key point\n\u2022 Third key point", fontSize: 26 }
+  ] },
+  "two-column": { label: "Two column", els: [
+    { type: "text", x: 8, y: 16, w: 40, h: 60, text: "Left column\n\n\u2022 point\n\u2022 point", fontSize: 24 },
+    { type: "text", x: 52, y: 16, w: 40, h: 60, text: "Right column\n\n\u2022 point\n\u2022 point", fontSize: 24 }
+  ] },
+  quote: { label: "Quote", els: [
+    { type: "text", x: 12, y: 30, w: 76, h: 30, text: "\u201CA short, memorable quote.\u201D", fontSize: 40, bold: true },
+    { type: "text", x: 12, y: 62, w: 50, h: 8, text: "\u2014 Attribution", fontSize: 22 }
+  ] }
+};
 var elementSeq = 0;
 var newElementId = () => `el_${Date.now().toString(36)}_${elementSeq++}`;
 function SlidesRenderer({ artifact }) {
@@ -239,6 +276,7 @@ function SlidesRenderer({ artifact }) {
   const [dragIndex, setDragIndex] = useState(null);
   const [presenting, setPresenting] = useState(false);
   const imgRef = useRef(null);
+  const bgRef = useRef(null);
   useEffect(() => {
     if (!presenting) return;
     const onKey = (e) => {
@@ -301,6 +339,20 @@ function SlidesRenderer({ artifact }) {
     reader.onload = () => addElement({ type: "image", x: 22, y: 22, w: 40, h: 34, src: String(reader.result) });
     reader.readAsDataURL(file);
   };
+  const addShapeEl = (shape) => {
+    const s = SHAPES.find((x) => x.id === shape);
+    if (s) addElement({ type: "shape", shape, x: 20, y: 20, w: s.box.w, h: s.box.h, fill: "#5b5bd6" });
+  };
+  const applyLayout = (key) => {
+    const l = LAYOUTS[key];
+    if (l) update({ elements: l.els.map((e) => ({ ...e, id: newElementId() })) });
+  };
+  const setSlideBgImage = (file) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => update({ background: `#000 url("${String(reader.result)}") center/cover no-repeat` });
+    reader.readAsDataURL(file);
+  };
   return /* @__PURE__ */ jsxs("div", { className: "cv-deck", children: [
     /* @__PURE__ */ jsxs("aside", { className: "cv-deck__rail cv-chrome", children: [
       slides.map((s, i) => /* @__PURE__ */ jsx(
@@ -321,11 +373,11 @@ function SlidesRenderer({ artifact }) {
               (el) => el.type === "text" ? /* @__PURE__ */ jsx(
                 "span",
                 {
-                  style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, fontSize: (el.fontSize ?? 24) * 0.12, fontWeight: el.bold ? 700 : 400, color: el.color ?? s.textColor, overflow: "hidden" },
+                  style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, fontSize: (el.fontSize ?? 24) * 0.12, fontWeight: el.bold ? 700 : 400, color: el.color ?? s.textColor, overflow: "hidden", whiteSpace: "pre-wrap" },
                   children: el.text
                 },
                 el.id
-              ) : /* @__PURE__ */ jsx("img", { src: el.src, alt: "", style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, objectFit: "contain" } }, el.id)
+              ) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, color: s.textColor, ...shapeStyle(el) } }, el.id) : /* @__PURE__ */ jsx("img", { src: el.src, alt: "", style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, objectFit: "contain" } }, el.id)
             ) })
           ] })
         },
@@ -338,6 +390,39 @@ function SlidesRenderer({ artifact }) {
         /* @__PURE__ */ jsx("button", { onClick: addTextEl, title: "Add text box", children: "+ Text" }),
         /* @__PURE__ */ jsx("button", { onClick: () => imgRef.current?.click(), title: "Add image", children: "+ Image" }),
         /* @__PURE__ */ jsx("input", { ref: imgRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => addImageEl(e.target.files?.[0]) }),
+        /* @__PURE__ */ jsx("input", { ref: bgRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => setSlideBgImage(e.target.files?.[0]) }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-deck__theme",
+            value: "",
+            title: "Add a shape",
+            onChange: (e) => {
+              if (e.target.value) addShapeEl(e.target.value);
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "+ Shape" }),
+              SHAPES.map((s) => /* @__PURE__ */ jsx("option", { value: s.id, children: s.label }, s.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "cv-deck__theme",
+            value: "",
+            title: "Apply a layout",
+            onChange: (e) => {
+              if (e.target.value) applyLayout(e.target.value);
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Layout\u2026" }),
+              Object.entries(LAYOUTS).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "select",
           {
@@ -347,14 +432,16 @@ function SlidesRenderer({ artifact }) {
             onChange: (e) => {
               const t = THEMES.find((x) => x.id === e.target.value);
               if (t) update({ background: t.bg, textColor: t.text });
+              e.currentTarget.value = "";
             },
             children: [
-              /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Theme" }),
+              /* @__PURE__ */ jsx("option", { value: "", children: "Theme\u2026" }),
               THEMES.map((t) => /* @__PURE__ */ jsx("option", { value: t.id, children: t.label }, t.id))
             ]
           }
         ),
-        /* @__PURE__ */ jsx("label", { className: "cv-deck__bg", title: "Background color", children: /* @__PURE__ */ jsx("input", { type: "color", value: slide.background ?? "#ffffff", onChange: (e) => update({ background: e.target.value }) }) }),
+        /* @__PURE__ */ jsx("label", { className: "cv-deck__bg", title: "Background color", children: /* @__PURE__ */ jsx("input", { type: "color", value: /^#/.test(slide.background ?? "") ? slide.background : "#ffffff", onChange: (e) => update({ background: e.target.value }) }) }),
+        /* @__PURE__ */ jsx("button", { onClick: () => bgRef.current?.click(), title: "Background image", children: "\u{1F5BC} BG" }),
         /* @__PURE__ */ jsx("span", { className: "cv-deck__spacer" }),
         /* @__PURE__ */ jsx("button", { className: "cv-deck__present", onClick: () => setPresenting(true), title: "Present (full screen)", children: "\u25B6 Present" }),
         /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(-1), title: "Move up", disabled: at === 0, children: "\u25B2" }),
@@ -383,9 +470,10 @@ function SlidesRenderer({ artifact }) {
       )
     ] }),
     presenting && /* @__PURE__ */ jsxs("div", { className: "cv-present", onClick: () => setIndex(Math.min(at + 1, slides.length - 1)), children: [
-      /* @__PURE__ */ jsx("div", { className: "cv-present__slide cv-slide cv-slide--blank", style: slideStyle, children: /* @__PURE__ */ jsx("div", { className: "cv-free", children: resolveElements(slide).map(
-        (el) => el.type === "text" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` }, children: /* @__PURE__ */ jsx("div", { className: "cv-free__text", style: { fontSize: el.fontSize ?? 24, fontWeight: el.bold ? 700 : 400, color: el.color, textAlign: el.align ?? "left" }, children: el.text }) }, el.id) : /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` }, children: /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: el.src, alt: "" }) }, el.id)
-      ) }) }),
+      /* @__PURE__ */ jsx("div", { className: "cv-present__slide cv-present__fade cv-slide cv-slide--blank", style: slideStyle, children: /* @__PURE__ */ jsx("div", { className: "cv-free", children: resolveElements(slide).map(
+        (el) => el.type === "text" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` }, children: /* @__PURE__ */ jsx("div", { className: "cv-free__text", style: { fontSize: el.fontSize ?? 24, fontWeight: el.bold ? 700 : 400, color: el.color, textAlign: el.align ?? "left", whiteSpace: "pre-wrap" }, children: el.text }) }, el.id) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, color: slide.textColor }, children: /* @__PURE__ */ jsx("div", { style: shapeStyle(el) }) }, el.id) : /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` }, children: /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: el.src, alt: "" }) }, el.id)
+      ) }) }, at),
+      slide.notes ? /* @__PURE__ */ jsx("div", { className: "cv-present__notes", onClick: (e) => e.stopPropagation(), children: slide.notes }) : null,
       /* @__PURE__ */ jsxs("div", { className: "cv-present__hint", children: [
         at + 1,
         " / ",

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

@@ -83,7 +83,7 @@ interface TableData {
 /** A freely-positioned element on a "blank" slide (percent geometry, 0–100). */
 interface SlideElement {
     id: string;
-    type: "text" | "image";
+    type: "text" | "image" | "shape";
     x: number;
     y: number;
     w: number;
@@ -94,6 +94,10 @@ interface SlideElement {
     bold?: boolean;
     color?: string;
     align?: "left" | "center" | "right";
+    /** Shape kind for `type: "shape"`. */
+    shape?: "rect" | "ellipse" | "line";
+    /** Fill (rect/ellipse) or stroke (line) color for a shape. */
+    fill?: string;
 }
 interface Slide {
     /** title · content (bullets) · section · image · two-column · blank (free canvas). */
@@ -355,6 +359,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";
@@ -365,14 +373,16 @@ interface ChatMessage {
 /** A command the editing UI forwards to the active html artifact's iframe. */
 interface IframeCommand {
     artifactId: string;
-    /** style · structure (duplicate/delete/move/insert/insert_html) · group/ungroup · set_src · clear. */
-    type: "set_style" | "commit" | "clear" | "set_src" | "duplicate" | "delete" | "move_up" | "move_down" | "insert" | "insert_html" | "group" | "ungroup";
+    /** style · structure (duplicate/delete/move/insert/insert_html) · group/ungroup · set_src · set_slide_style · clear. */
+    type: "set_style" | "style_persist" | "commit" | "clear" | "set_src" | "set_slide_style" | "duplicate" | "delete" | "move_up" | "move_down" | "insert" | "insert_html" | "group" | "ungroup";
     /** Target element (omitted for document-level inserts with no selection). */
     cid?: string;
     /** Members to wrap for `group`. */
     cids?: string[];
     prop?: string;
     value?: string;
+    /** Style map to apply to the slide root for `set_slide_style` (e.g. background, color). */
+    style?: Record<string, string>;
     /** Tag/block to insert for `insert` (e.g. "h2", "p", "button", "img", "hr", "section"). */
     block?: string;
     /** HTML fragment to insert for `insert_html` (a built-in section template). */
@@ -392,6 +402,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 +416,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 +522,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 +688,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';
 
@@ -569,6 +569,13 @@ var INSPECTOR_SCRIPT = `
       if (!d || d.source !== MARK) return;
       if (d.type === "clear") { clearSelected(); return; }
       if (d.type === "set_style") { var el = byCid(d.cid); if (el) el.style[d.prop] = d.value; return; }
+      if (d.type === "style_persist") { var elp = byCid(d.cid); if (elp) { elp.style[d.prop] = d.value; emitEdit(elp); } return; }
+      if (d.type === "set_slide_style") {
+        // Theme the whole slide: apply to the .slide-container (fallback body).
+        var root = document.querySelector(".slide-container") || document.body;
+        if (root && d.style) { for (var sk in d.style) { try { root.style[sk] = d.style[sk]; } catch (_e) {} } emitDoc(); }
+        return;
+      }
       if (d.type === "set_src") { var ei = byCid(d.cid); if (ei) { ei.setAttribute("src", d.value); emitEdit(ei); } return; }
       if (d.type === "commit") { var el2 = byCid(d.cid); if (el2) emitEdit(el2); return; }
 
@@ -1493,6 +1500,7 @@ var BLOCKS = [
   { tag: "img", label: "Image" },
   { tag: "hr", label: "Divider" }
 ];
+var SLIDE_BLOCK_TAGS = /* @__PURE__ */ new Set(["h2", "p", "img"]);
 var TEMPLATES = {
   hero: {
     label: "Hero",
@@ -1521,6 +1529,105 @@ var TEMPLATES = {
 </section>`
   }
 };
+var SLIDE_TEMPLATES = {
+  title: {
+    label: "Title",
+    html: `<div style="height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 8%">
+  <h1 style="font-size:64px;font-weight:800;letter-spacing:-.02em;margin:0 0 20px;line-height:1.1">Presentation title</h1>
+  <p style="font-size:26px;opacity:.7;margin:0">Subtitle or one-line summary</p>
+</div>`
+  },
+  section: {
+    label: "Section",
+    html: `<div style="height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 9%">
+  <div style="width:72px;height:6px;border-radius:3px;background:currentColor;opacity:.85;margin-bottom:28px"></div>
+  <h2 style="font-size:52px;font-weight:800;margin:0;line-height:1.1">Section title</h2>
+</div>`
+  },
+  bullets: {
+    label: "Bullets",
+    html: `<div style="height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 9%">
+  <h2 style="font-size:40px;font-weight:750;margin:0 0 28px">Heading</h2>
+  <ul style="font-size:26px;line-height:1.9;margin:0;padding-left:1.1em">
+    <li>First key point</li><li>Second key point</li><li>Third key point</li>
+  </ul>
+</div>`
+  },
+  "two-column": {
+    label: "Two column",
+    html: `<div style="height:100%;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-content:center;padding:0 9%">
+  <div><h3 style="font-size:28px;font-weight:700;margin:0 0 14px">Left heading</h3><p style="font-size:22px;line-height:1.6;margin:0;opacity:.85">Supporting copy for the left column.</p></div>
+  <div><h3 style="font-size:28px;font-weight:700;margin:0 0 14px">Right heading</h3><p style="font-size:22px;line-height:1.6;margin:0;opacity:.85">Supporting copy for the right column.</p></div>
+</div>`
+  },
+  "image-text": {
+    label: "Image + text",
+    html: `<div style="height:100%;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:0 9%">
+  <img src="https://placehold.co/720x480/eef/335?text=Image" alt="image" style="width:100%;border-radius:16px;display:block" />
+  <div><h2 style="font-size:36px;font-weight:750;margin:0 0 16px">Heading</h2><p style="font-size:24px;line-height:1.65;margin:0;opacity:.85">Explain the visual in a sentence or two.</p></div>
+</div>`
+  },
+  quote: {
+    label: "Quote",
+    html: `<div style="height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 12%">
+  <p style="font-size:44px;font-weight:700;line-height:1.3;margin:0 0 24px">\u201CA short, memorable quote that anchors the point.\u201D</p>
+  <p style="font-size:22px;opacity:.65;margin:0">\u2014 Attribution</p>
+</div>`
+  },
+  agenda: {
+    label: "Agenda",
+    html: `<div style="height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 9%">
+  <h2 style="font-size:40px;font-weight:750;margin:0 0 28px">Agenda</h2>
+  <ol style="font-size:25px;line-height:2;margin:0;padding-left:1.2em">
+    <li>Background &amp; goals</li><li>Approach</li><li>Results</li><li>Next steps</li>
+  </ol>
+</div>`
+  },
+  stat: {
+    label: "Big stat",
+    html: `<div style="height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 8%">
+  <div style="font-size:140px;font-weight:800;letter-spacing:-.03em;line-height:1">12\xD7</div>
+  <p style="font-size:28px;opacity:.7;margin:16px 0 0">faster than the previous approach</p>
+</div>`
+  },
+  comparison: {
+    label: "Comparison",
+    html: `<div style="height:100%;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-content:center;padding:0 9%">
+  <div style="border:2px solid currentColor;opacity:.9;border-radius:16px;padding:28px"><h3 style="font-size:26px;margin:0 0 14px">Before</h3><ul style="font-size:21px;line-height:1.8;margin:0;padding-left:1.1em"><li>Point one</li><li>Point two</li></ul></div>
+  <div style="border-radius:16px;padding:28px;background:currentColor"><div style="color:#fff;mix-blend-mode:difference"><h3 style="font-size:26px;margin:0 0 14px">After</h3><ul style="font-size:21px;line-height:1.8;margin:0;padding-left:1.1em"><li>Point one</li><li>Point two</li></ul></div></div>
+</div>`
+  },
+  closing: {
+    label: "Closing",
+    html: `<div style="height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 8%">
+  <h1 style="font-size:56px;font-weight:800;margin:0 0 16px">Thank you</h1>
+  <p style="font-size:24px;opacity:.7;margin:0">Questions? \xB7 contact@example.com</p>
+</div>`
+  }
+};
+var SLIDE_THEMES = {
+  light: { label: "Light", style: { background: "#ffffff", color: "#141821" } },
+  paper: { label: "Paper", style: { background: "#f7f5ef", color: "#2b2a26" } },
+  ink: { label: "Ink", style: { background: "#14161d", color: "#f0f1f5" } },
+  navy: { label: "Navy", style: { background: "#0d1b3e", color: "#eef2ff" } },
+  forest: { label: "Forest", style: { background: "#0f2a22", color: "#e6f2ec" } },
+  sunset: { label: "Sunset", style: { background: "#2a1533", color: "#ffe8d6" } },
+  brand: { label: "Brand", style: { background: "#ffffff", color: "#b01722" } }
+};
+var SLIDE_SHAPES = {
+  rect: { label: "Rectangle", html: `<div style="width:280px;height:160px;background:currentColor;opacity:.9;border-radius:10px;margin:24px"></div>` },
+  circle: { label: "Circle", html: `<div style="width:200px;height:200px;background:currentColor;opacity:.9;border-radius:50%;margin:24px"></div>` },
+  line: { label: "Line", html: `<div style="width:360px;height:4px;background:currentColor;opacity:.85;margin:24px"></div>` },
+  arrow: { label: "Arrow", html: `<svg width="240" height="60" viewBox="0 0 240 60" style="margin:24px;color:currentColor"><path d="M0 30 H210 M188 12 L212 30 L188 48" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></svg>` },
+  badge: { label: "Pill", html: `<span style="display:inline-block;padding:10px 22px;border-radius:999px;background:currentColor;color:#fff;mix-blend-mode:normal;font-weight:700;margin:24px">Label</span>` }
+};
+var SLIDE_FONTS = {
+  sans: { label: "Sans", stack: "'Segoe UI', system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif" },
+  serif: { label: "Serif", stack: "Georgia, 'Times New Roman', 'Apple SD Gothic Neo', serif" },
+  mono: { label: "Mono", stack: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace" },
+  rounded: { label: "Rounded", stack: "'Trebuchet MS', 'Segoe UI', 'Apple SD Gothic Neo', sans-serif" },
+  condensed: { label: "Condensed", stack: "'Arial Narrow', 'Helvetica Neue', 'Apple SD Gothic Neo', sans-serif" }
+};
 var SLIDE_W = 1280;
 var SCROLL_FIX = "<style>html,body{overflow:auto!important;height:auto!important;min-height:100%!important}</style>";
 function withScrollableBody(html) {
@@ -1550,6 +1657,7 @@ function useSlideFit(ratio, boxRef) {
 function HtmlRenderer({ artifact: artifact2 }) {
   const iframeRef = useRef(null);
   const imgFileRef = useRef(null);
+  const bgFileRef = useRef(null);
   const stageRef = useRef(null);
   const api = useCanvasStoreApi();
   const setSelections = useCanvasStore((s) => s.setSelections);
@@ -1625,6 +1733,17 @@ function HtmlRenderer({ artifact: artifact2 }) {
     reader.onload = () => sendIframeCommand({ artifactId: artifact2.id, type: "set_src", cid: single.cid, value: String(reader.result) });
     reader.readAsDataURL(file);
   };
+  const onSlideBg = (file) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => sendIframeCommand({
+      artifactId: artifact2.id,
+      type: "set_slide_style",
+      style: { backgroundImage: `url("${String(reader.result)}")`, backgroundSize: "cover", backgroundPosition: "center" }
+    });
+    reader.readAsDataURL(file);
+  };
+  const setSlideStyle = (style) => sendIframeCommand({ artifactId: artifact2.id, type: "set_slide_style", style });
   const ratio = artifact2.meta?.ratio;
   const slide = useSlideFit(ratio, stageRef);
   return /* @__PURE__ */ jsxs("div", { className: "cv-html-wrap", children: [
@@ -1632,6 +1751,10 @@ function HtmlRenderer({ artifact: artifact2 }) {
       onImgFile(e.target.files?.[0]);
       e.target.value = "";
     } }),
+    /* @__PURE__ */ jsx("input", { ref: bgFileRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => {
+      onSlideBg(e.target.files?.[0]);
+      e.target.value = "";
+    } }),
     /* @__PURE__ */ jsxs("div", { className: "cv-html-bar cv-chrome", children: [
       mode === "design" && /* @__PURE__ */ jsxs(Fragment, { children: [
         !ratio && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1639,8 +1762,8 @@ function HtmlRenderer({ artifact: artifact2 }) {
           /* @__PURE__ */ jsx("span", { className: "cv-html-bar__sep" })
         ] }),
         /* @__PURE__ */ jsx("span", { className: "cv-html-bar__label", children: "Add" }),
-        BLOCKS.map((b) => /* @__PURE__ */ jsx("button", { className: "cv-html-add", onClick: () => command("insert", { block: b.tag }), children: b.label }, b.tag)),
-        /* @__PURE__ */ jsxs(
+        (ratio ? BLOCKS.filter((b) => SLIDE_BLOCK_TAGS.has(b.tag)) : BLOCKS).map((b) => /* @__PURE__ */ jsx("button", { className: "cv-html-add", onClick: () => command("insert", { block: b.tag }), children: b.label }, b.tag)),
+        !ratio && /* @__PURE__ */ jsxs(
           "select",
           {
             className: "cv-html-tpl",
@@ -1657,6 +1780,77 @@ function HtmlRenderer({ artifact: artifact2 }) {
             ]
           }
         ),
+        ratio && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "cv-html-tpl",
+              value: "",
+              title: "Insert a slide layout",
+              onChange: (e) => {
+                const t = SLIDE_TEMPLATES[e.target.value];
+                if (t) sendIframeCommand({ artifactId: artifact2.id, type: "insert_html", cid: single?.cid, html: t.html });
+                e.currentTarget.value = "";
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Layout\u2026" }),
+                Object.entries(SLIDE_TEMPLATES).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "cv-html-tpl",
+              value: "",
+              title: "Apply a slide theme",
+              onChange: (e) => {
+                const t = SLIDE_THEMES[e.target.value];
+                if (t) sendIframeCommand({ artifactId: artifact2.id, type: "set_slide_style", style: t.style });
+                e.currentTarget.value = "";
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Theme\u2026" }),
+                Object.entries(SLIDE_THEMES).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "cv-html-tpl",
+              value: "",
+              title: "Insert a shape",
+              onChange: (e) => {
+                const t = SLIDE_SHAPES[e.target.value];
+                if (t) sendIframeCommand({ artifactId: artifact2.id, type: "insert_html", cid: single?.cid, html: t.html });
+                e.currentTarget.value = "";
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Shape\u2026" }),
+                Object.entries(SLIDE_SHAPES).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "cv-html-tpl",
+              value: "",
+              title: "Slide font",
+              onChange: (e) => {
+                const f = SLIDE_FONTS[e.target.value];
+                if (f) setSlideStyle({ fontFamily: f.stack });
+                e.currentTarget.value = "";
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Font\u2026" }),
+                Object.entries(SLIDE_FONTS).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { className: "cv-html-add", title: "Slide background image", onClick: () => bgFileRef.current?.click(), children: "\u{1F5BC} BG" })
+        ] }),
         selected.length >= 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { className: "cv-html-bar__sep" }),
           /* @__PURE__ */ jsx("span", { className: "cv-html-bar__label", children: "Selection" }),
@@ -1684,6 +1878,12 @@ function HtmlRenderer({ artifact: artifact2 }) {
               }
             )
           ] }),
+          single && single.tag !== "img" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Align left", onClick: () => command("style_persist", { prop: "textAlign", value: "left" }), children: "\u2B05" }),
+            /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Align center", onClick: () => command("style_persist", { prop: "textAlign", value: "center" }), children: "\u2B0C" }),
+            /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Align right", onClick: () => command("style_persist", { prop: "textAlign", value: "right" }), children: "\u27A1" }),
+            /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Bold", onClick: () => command("style_persist", { prop: "fontWeight", value: "800" }), children: "B" })
+          ] }),
           single && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Duplicate", onClick: () => command("duplicate"), children: "\u29C9" }),
             /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Move up", onClick: () => command("move_up"), children: "\u2191" }),
@@ -1738,10 +1938,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-7ICJQHYT.js').then((m) => ({ default: m.SlidesRenderer })));
 var builtinRenderers = {
   html: HtmlRenderer,
   document: DocumentRenderer,
@@ -1880,13 +2080,20 @@ async function slidesToPptx(data, _title) {
   const H = 5.625;
   for (const slide of data.slides) {
     const s = pptx.addSlide();
-    if (slide.background) s.background = { color: slide.background.replace("#", "") };
+    if (slide.background && /^#[0-9a-f]{3,8}$/i.test(slide.background)) s.background = { color: slide.background.replace("#", "") };
     const tc = slide.textColor ? slide.textColor.replace("#", "") : void 0;
     for (const el of resolveElements(slide)) {
       const box = { x: el.x / 100 * W, y: el.y / 100 * H, w: el.w / 100 * W, h: el.h / 100 * H };
       if (el.type === "text") {
         const color = el.color ? el.color.replace("#", "") : tc;
         s.addText(el.text ?? "", { ...box, fontSize: (el.fontSize ?? 24) * 0.75, bold: !!el.bold, align: el.align ?? "left", ...color ? { color } : {} });
+      } else if (el.type === "shape") {
+        const fill = (el.fill ?? "#5b5bd6").replace("#", "");
+        if (el.shape === "line") {
+          s.addShape(pptx.ShapeType.line, { ...box, line: { color: fill, width: 2 } });
+        } else {
+          s.addShape(el.shape === "ellipse" ? pptx.ShapeType.ellipse : pptx.ShapeType.rect, { ...box, fill: { color: fill } });
+        }
       } else if (el.src) {
         s.addImage({ data: el.src, ...box, sizing: { type: "contain", w: box.w, h: box.h } });
       }
@@ -1903,9 +2110,14 @@ function slidesToPrintHtml(data, title) {
     const els = resolveElements(slide).map((el) => {
       const box = `left:${el.x}%;top:${el.y}%;width:${el.w}%;height:${el.h}%`;
       if (el.type === "text") {
-        const style = `${box};font-size:${(el.fontSize ?? 24) / 7.2}vw;font-weight:${el.bold ? 700 : 400};color:${escapeAttr(el.color ?? fg)};text-align:${escapeAttr(el.align ?? "left")}`;
+        const style = `${box};font-size:${(el.fontSize ?? 24) / 7.2}vw;font-weight:${el.bold ? 700 : 400};color:${escapeAttr(el.color ?? fg)};text-align:${escapeAttr(el.align ?? "left")};white-space:pre-wrap`;
         return `<div class="el" style="${style}">${escapeXml(el.text ?? "")}</div>`;
       }
+      if (el.type === "shape") {
+        const fill = escapeAttr(el.fill ?? fg);
+        const radius = el.shape === "ellipse" ? "50%" : el.shape === "line" ? "2px" : "8px";
+        return `<div class="el" style="${box};background:${fill};border-radius:${radius}"></div>`;
+      }
       const src = safeSrc(el.src);
       return src ? `<img class="el" style="${box}" src="${escapeAttr(src)}"/>` : "";
     }).join("");
@@ -1920,6 +2132,13 @@ function slidesToPrintHtml(data, title) {
     img.el { object-fit: contain; }
   </style></head><body>${pages}</body></html>`;
 }
+function htmlSlideToPrintHtml(html, ratio) {
+  const w = ratio === "4:3" ? 960 : 1280;
+  const h = 720;
+  const style = `<style>@page{size:${w}px ${h}px;margin:0}html,body{margin:0!important;padding:0!important;background:#fff}.slide-container{width:${w}px!important;height:${h}px!important;box-shadow:none!important;border-radius:0!important;overflow:hidden!important;page-break-after:avoid}</style>`;
+  const i = html.toLowerCase().lastIndexOf("</head>");
+  return i === -1 ? style + html : html.slice(0, i) + style + html.slice(i);
+}
 function escapeXml(value) {
   return String(value ?? "").replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
 }
@@ -1983,7 +2202,9 @@ function ExportMenu({ artifact: artifact2, getRenderedHtml }) {
   const dataOptions = dataExporters[artifact2.type] ?? [];
   const exportHtml = () => {
     if (artifact2.type === "html") {
-      downloadBlob(`${stem}.html`, "text/html", artifact2.data.html);
+      const ratio = artifact2.meta?.ratio;
+      const html = artifact2.data.html;
+      downloadBlob(`${stem}.html`, "text/html", ratio ? htmlSlideToPrintHtml(html, ratio) : html);
     } else {
       const html = getRenderedHtml();
       if (html == null) return;
@@ -2000,7 +2221,9 @@ function ExportMenu({ artifact: artifact2, getRenderedHtml }) {
     if (artifact2.type === "slides") {
       printToPdf(slidesToPrintHtml(artifact2.data, artifact2.title));
     } else if (artifact2.type === "html") {
-      printToPdf(artifact2.data.html);
+      const ratio = artifact2.meta?.ratio;
+      const html = artifact2.data.html;
+      printToPdf(ratio ? htmlSlideToPrintHtml(html, ratio) : html);
     } else {
       const html = getRenderedHtml();
       if (html == null) return;
@@ -2362,17 +2585,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/dist/styles.css

@@ -617,6 +617,16 @@
 .cv-present__slide .cv-slide__subtitle { font-size: clamp(16px, 2.6vw, 30px); }
 .cv-present__slide .cv-slide__bullets li { font-size: clamp(16px, 2.4vw, 30px); }
 .cv-present__hint { color: #9aa4b2; font-size: 13px; }
+/* Fade each slide in as the presenter advances. */
+.cv-present__fade { animation: cv-present-fade 0.32s ease; }
+@keyframes cv-present-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .cv-present__fade { animation: none; } }
+/* Speaker notes shown to the presenter, below the slide. */
+.cv-present__notes {
+  max-width: min(92vw, 1280px); color: #cdd3de; font-size: 15px; line-height: 1.5;
+  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px; padding: 12px 16px; cursor: default; white-space: pre-wrap;
+}
 
 /* in-place editing cues */
 .cv-word .cv-doc { cursor: text; }

package/package.json

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