@braincrew-lab/langchain-canvas 0.1.0 → 0.1.2

package/dist/index.js

@@ -1513,9 +1513,27 @@ var TEMPLATES = {
 </section>`
   }
 };
+var SLIDE_W = 1280;
+function useSlideFit(ratio, boxRef) {
+  const [scale, setScale] = useState(1);
+  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 - 40) / SLIDE_W));
+    fit();
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [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);
@@ -1587,6 +1605,8 @@ function HtmlRenderer({ artifact: artifact2 }) {
     reader.onload = () => sendIframeCommand({ artifactId: artifact2.id, type: "set_src", cid: single.cid, value: String(reader.result) });
     reader.readAsDataURL(file);
   };
+  const ratio = artifact2.meta?.ratio;
+  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]);
@@ -1594,8 +1614,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(
@@ -1656,7 +1678,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,

package/dist/styles.css

@@ -788,6 +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 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-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.0",
+  "version": "0.1.2",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
   "type": "module",