@braincrew-lab/langchain-canvas 0.1.1 → 0.1.3

package/dist/index.js

@@ -392,6 +392,14 @@ var INSPECTOR_SCRIPT = `
       }, "*");
     }, true);
 
+    // Block the browser's native drag (images and links start an HTML5 drag on
+    // mousemove by default, which hijacks our free-drag \u2014 the image "ghost" gets
+    // dragged instead of the element moving). Suppress it for any editable node.
+    document.addEventListener("dragstart", function (e) {
+      var t = e.target;
+      if (t instanceof Element && t.closest("[data-cid]") && !t.hasAttribute("data-lcx")) e.preventDefault();
+    }, true);
+
     // --- drag: freely move an element anywhere, or marquee-select empty space ----
     document.addEventListener("mousedown", function (e) {
       suppressClick = false;             // a fresh press: never carry a stale suppress
@@ -1513,34 +1521,27 @@ var TEMPLATES = {
 </section>`
   }
 };
-function SlideView({ html, ratio, title }) {
-  const boxRef = useRef(null);
+var SLIDE_W = 1280;
+function useSlideFit(ratio, boxRef) {
   const [scale, setScale] = useState(1);
-  const [rw, rh] = ratio.split(/[:x/]/).map(Number);
-  const DESIGN_W = 1280;
-  const DESIGN_H = rw && rh ? Math.round(DESIGN_W * rh / rw) : 720;
+  const [rw, rh] = (ratio ?? "16:9").split(/[:x/]/).map(Number);
+  const height = rw && rh ? Math.round(SLIDE_W * rh / rw) : 720;
   useEffect(() => {
+    if (!ratio) return;
     const el = boxRef.current;
     if (!el) return;
-    const fit = () => setScale(Math.min(1, (el.clientWidth - 32) / DESIGN_W));
+    const fit = () => setScale(Math.min(1, (el.clientWidth - 40) / SLIDE_W));
     fit();
     const ro = new ResizeObserver(fit);
     ro.observe(el);
     return () => ro.disconnect();
-  }, [DESIGN_W]);
-  return /* @__PURE__ */ jsx("div", { ref: boxRef, className: "cv-slideview", children: /* @__PURE__ */ jsx("div", { className: "cv-slideview__frame", style: { width: DESIGN_W * scale, height: DESIGN_H * scale }, children: /* @__PURE__ */ jsx(
-    "iframe",
-    {
-      title,
-      srcDoc: html,
-      sandbox: "allow-scripts allow-popups allow-modals",
-      style: { width: DESIGN_W, height: DESIGN_H, border: 0, transform: `scale(${scale})`, transformOrigin: "top left" }
-    }
-  ) }) });
+  }, [ratio, height]);
+  return { scale, width: SLIDE_W, height };
 }
 function HtmlRenderer({ artifact: artifact2 }) {
   const iframeRef = useRef(null);
   const imgFileRef = useRef(null);
+  const stageRef = useRef(null);
   const api = useCanvasStoreApi();
   const setSelections = useCanvasStore((s) => s.setSelections);
   const applyEvent = useCanvasStore((s) => s.applyUserEvent);
@@ -1613,9 +1614,7 @@ function HtmlRenderer({ artifact: artifact2 }) {
     reader.readAsDataURL(file);
   };
   const ratio = artifact2.meta?.ratio;
-  if (ratio) {
-    return /* @__PURE__ */ jsx("div", { className: "cv-html-wrap", children: /* @__PURE__ */ jsx(SlideView, { html: artifact2.data.html, ratio, title: artifact2.title }) });
-  }
+  const slide = useSlideFit(ratio, stageRef);
   return /* @__PURE__ */ jsxs("div", { className: "cv-html-wrap", children: [
     /* @__PURE__ */ jsx("input", { ref: imgFileRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => {
       onImgFile(e.target.files?.[0]);
@@ -1623,8 +1622,10 @@ function HtmlRenderer({ artifact: artifact2 }) {
     } }),
     /* @__PURE__ */ jsxs("div", { className: "cv-html-bar cv-chrome", children: [
       mode === "design" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "cv-html-seg", role: "group", "aria-label": "Preview width", children: DEVICES.map((d) => /* @__PURE__ */ jsx("button", { className: device === d.id ? "is-on" : "", onClick: () => setDevice(d.id), children: d.label }, d.id)) }),
-        /* @__PURE__ */ jsx("span", { className: "cv-html-bar__sep" }),
+        !ratio && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "cv-html-seg", role: "group", "aria-label": "Preview width", children: DEVICES.map((d) => /* @__PURE__ */ jsx("button", { className: device === d.id ? "is-on" : "", onClick: () => setDevice(d.id), children: d.label }, d.id)) }),
+          /* @__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(
@@ -1685,7 +1686,22 @@ function HtmlRenderer({ artifact: artifact2 }) {
         /* @__PURE__ */ jsx("button", { className: mode === "code" ? "is-on" : "", onClick: () => setMode("code"), children: "Code" })
       ] })
     ] }),
-    mode === "design" ? /* @__PURE__ */ jsx("div", { className: "cv-html-stage", children: /* @__PURE__ */ jsx(
+    mode === "design" ? /* @__PURE__ */ jsx("div", { className: `cv-html-stage${ratio ? " cv-html-stage--slide" : ""}`, ref: stageRef, children: ratio ? (
+      // Scaled slide: the iframe lays out at its full design size, then a
+      // transform shrinks it to fit; a sized wrapper reserves the scaled box
+      // so the stage scrolls correctly. Clicks still hit the right elements.
+      /* @__PURE__ */ jsx("div", { style: { width: slide.width * slide.scale, height: slide.height * slide.scale, flex: "0 0 auto" }, children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          ref: iframeRef,
+          className: "cv-html",
+          title: artifact2.title,
+          srcDoc,
+          sandbox: "allow-scripts allow-popups allow-modals",
+          style: { width: slide.width, height: slide.height, transform: `scale(${slide.scale})`, transformOrigin: "top left" }
+        }
+      ) })
+    ) : /* @__PURE__ */ jsx(
       "iframe",
       {
         ref: iframeRef,
@@ -1760,8 +1776,7 @@ var dataExporters = {
     { label: "JSON", extension: "json", mime: MIME.json, build: (a) => JSON.stringify(a.data, null, 2) }
   ],
   slides: [
-    { label: "PowerPoint", extension: "pptx", mime: MIME.pptx, build: (a) => slidesToPptx(a.data, a.title) },
-    { label: "Figma (JSON)", extension: "json", mime: MIME.json, build: (a) => slidesToFigmaJson(a.data) }
+    { label: "PowerPoint", extension: "pptx", mime: MIME.pptx, build: (a) => slidesToPptx(a.data, a.title) }
   ]
 };
 function toStandaloneHtml(title, renderedHtml) {
@@ -1868,52 +1883,6 @@ async function slidesToPptx(data, _title) {
   }
   return await pptx.write({ outputType: "blob" });
 }
-function slidesToFigmaJson(data) {
-  const W = 1280;
-  const H = 720;
-  const GAP = 64;
-  const slides2 = data.slides.length ? data.slides : [{ title: "Empty deck" }];
-  const textNode = (x, y, width, characters, fontSize, fontWeight, align, color = "#1F2328") => ({ type: "text", x, y, width, characters, fontSize, fontWeight, align, color });
-  const frames = slides2.map((slide, i) => {
-    const nodes = [];
-    for (const el of resolveElements(slide)) {
-      if (el.type !== "text") continue;
-      nodes.push(
-        textNode(el.x / 100 * W, el.y / 100 * H, el.w / 100 * W, el.text ?? "", el.fontSize ?? 24, el.bold ? 700 : 400, el.align === "center" ? "CENTER" : "LEFT", el.color ?? slide.textColor ?? "#1F2328")
-      );
-    }
-    return { name: `Slide ${i + 1}`, x: 0, y: i * (H + GAP), width: W, height: H, fill: slide.background ?? "#FFFFFF", nodes };
-  });
-  return JSON.stringify({ type: "langchain-canvas/figma-deck", version: 1, frames }, null, 2);
-}
-function slidesToSvg(data) {
-  const W = 1280;
-  const H = 720;
-  const GAP = 64;
-  const slides2 = data.slides.length ? data.slides : [{ title: "Empty deck" }];
-  const totalH = slides2.length * H + (slides2.length - 1) * GAP;
-  const text = (x, y, value, size, anchor, weight, fill = "#1f2328") => `<text x="${x}" y="${y}" font-family="Inter, Arial, sans-serif" font-size="${size}" font-weight="${weight}" text-anchor="${anchor}" fill="${fill}">${escapeXml(value)}</text>`;
-  const frames = slides2.map((slide, i) => {
-    const y = i * (H + GAP);
-    const bg = slide.background ?? "#ffffff";
-    let body = `<rect width="${W}" height="${H}" rx="8" fill="${bg}" stroke="#e5e7eb"/>`;
-    for (const el of resolveElements(slide)) {
-      const ex = el.x / 100 * W;
-      const ey = el.y / 100 * H;
-      const ew = el.w / 100 * W;
-      if (el.type === "text") {
-        const anchor = el.align === "center" ? "middle" : el.align === "right" ? "end" : "start";
-        const ax = el.align === "center" ? ex + ew / 2 : el.align === "right" ? ex + ew : ex;
-        const fs = el.fontSize ?? 24;
-        body += text(ax, ey + fs, el.text ?? "", fs, anchor, el.bold ? 700 : 400, el.color ?? slide.textColor ?? "#1f2328");
-      } else if (el.src) {
-        body += `<image href="${el.src}" x="${ex}" y="${ey}" width="${ew}" height="${el.h / 100 * H}" preserveAspectRatio="xMidYMid meet"/>`;
-      }
-    }
-    return `<g transform="translate(0 ${y})">${body}</g>`;
-  }).join("");
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${totalH}" viewBox="0 0 ${W} ${totalH}">${frames}</svg>`;
-}
 function slidesToPrintHtml(data, title) {
   const slides2 = data.slides.length ? data.slides : [{ title: "Empty deck" }];
   const pages = slides2.map((slide) => {
@@ -2027,14 +1996,6 @@ function ExportMenu({ artifact: artifact2, getRenderedHtml }) {
     }
     setOpen(false);
   };
-  const copyToFigma = async () => {
-    const svg = slidesToSvg(artifact2.data);
-    try {
-      await navigator.clipboard.writeText(svg);
-    } catch {
-    }
-    setOpen(false);
-  };
   return /* @__PURE__ */ jsxs("div", { className: "cv-export", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -2057,10 +2018,6 @@ function ExportMenu({ artifact: artifact2, getRenderedHtml }) {
           "PDF ",
           /* @__PURE__ */ jsx("span", { className: "cv-export__ext", children: ".pdf" })
         ] }),
-        artifact2.type === "slides" && /* @__PURE__ */ jsxs("button", { role: "menuitem", onClick: copyToFigma, children: [
-          "Copy to Figma ",
-          /* @__PURE__ */ jsx("span", { className: "cv-export__ext", children: "paste \u2318V" })
-        ] }),
         dataOptions.map((option) => /* @__PURE__ */ jsxs("button", { role: "menuitem", onClick: () => exportData(option), children: [
           option.label,
           " ",

package/dist/styles.css

@@ -788,16 +788,14 @@
   flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center;
   padding: 10px; background: var(--cv-surface); border-radius: 10px;
 }
-/* Fixed-aspect slide preview (read-only, scaled to fit). */
-.cv-slideview {
-  flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start;
-  padding: 16px; background: var(--cv-surface); border-radius: 10px;
-}
-.cv-slideview__frame {
-  position: relative; overflow: hidden; background: #fff; border-radius: 8px;
+/* Fixed-aspect slide stage — the scaled iframe box sits centered at the top,
+   with a card-like frame around it. Still fully editable. */
+.cv-html-stage--slide { align-items: flex-start; padding: 16px; }
+.cv-html-stage--slide > div {
+  overflow: hidden; background: #fff; border-radius: 8px;
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
 }
-.cv-slideview__frame iframe { display: block; }
+.cv-html-stage--slide iframe { display: block; border: 0; }
 .cv-html-code {
   flex: 1; min-height: 0; width: 100%; resize: none;
   padding: 14px 16px; border: 1px solid var(--cv-border); border-radius: 10px;

package/package.json

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