@braincrew-lab/langchain-canvas 0.1.0 → 0.1.1

package/dist/index.js

@@ -1513,6 +1513,31 @@ var TEMPLATES = {
 </section>`
   }
 };
+function SlideView({ html, ratio, title }) {
+  const boxRef = useRef(null);
+  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;
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!el) return;
+    const fit = () => setScale(Math.min(1, (el.clientWidth - 32) / DESIGN_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" }
+    }
+  ) }) });
+}
 function HtmlRenderer({ artifact: artifact2 }) {
   const iframeRef = useRef(null);
   const imgFileRef = useRef(null);
@@ -1587,6 +1612,10 @@ 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;
+  if (ratio) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-html-wrap", children: /* @__PURE__ */ jsx(SlideView, { html: artifact2.data.html, ratio, title: artifact2.title }) });
+  }
   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]);

package/dist/styles.css

@@ -788,6 +788,16 @@
   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;
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
+}
+.cv-slideview__frame iframe { display: block; }
 .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.1",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
   "type": "module",