@braincrew-lab/langchain-canvas 0.1.8 → 0.1.9

package/dist/{SlidesRenderer-A5HX4MOA.js → SlidesRenderer-7ICJQHYT.js}

@@ -4,6 +4,12 @@ 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/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). */
@@ -369,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). */

package/dist/index.js

@@ -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" }),
@@ -1741,7 +1941,7 @@ function HtmlRenderer({ artifact: artifact2 }) {
 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 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;

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.8",
+  "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",