@braincrew-lab/langchain-canvas 0.1.5 → 0.1.7

package/dist/index.js

@@ -1522,6 +1522,11 @@ var TEMPLATES = {
   }
 };
 var SLIDE_W = 1280;
+var SCROLL_FIX = "<style>html,body{overflow:auto!important;height:auto!important;min-height:100%!important}</style>";
+function withScrollableBody(html) {
+  const i = html.lastIndexOf("</body>");
+  return i === -1 ? html + SCROLL_FIX : html.slice(0, i) + SCROLL_FIX + html.slice(i);
+}
 function useSlideFit(ratio, boxRef) {
   const [scale, setScale] = useState(1);
   const [rw, rh] = (ratio ?? "16:9").split(/[:x/]/).map(Number);
@@ -1530,7 +1535,11 @@ function useSlideFit(ratio, boxRef) {
     if (!ratio) return;
     const el = boxRef.current;
     if (!el) return;
-    const fit = () => setScale(Math.min(1, (el.clientWidth - 40) / SLIDE_W));
+    const fit = () => {
+      const w = el.clientWidth;
+      if (w <= 40) return;
+      setScale(Math.min(1, (w - 40) / SLIDE_W));
+    };
     fit();
     const ro = new ResizeObserver(fit);
     ro.observe(el);
@@ -1552,12 +1561,14 @@ function HtmlRenderer({ artifact: artifact2 }) {
   const [mode, setMode] = useState("design");
   const lastSelfHtml = useRef(null);
   const srcDocRef = useRef("");
+  const isFixedSlide = Boolean(artifact2.meta?.ratio);
   const srcDoc = useMemo(() => {
     if (mode === "design" && artifact2.data.html === lastSelfHtml.current) return srcDocRef.current;
-    srcDocRef.current = withInspector(artifact2.data.html);
+    const base = withInspector(artifact2.data.html);
+    srcDocRef.current = isFixedSlide ? base : withScrollableBody(base);
     lastSelfHtml.current = null;
     return srcDocRef.current;
-  }, [artifact2.data.html, mode]);
+  }, [artifact2.data.html, mode, isFixedSlide]);
   const selected = selections.filter((s) => s.artifactId === artifact2.id);
   const single = selected.length === 1 ? selected[0] : null;
   useEffect(() => {

package/package.json

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