@braincrew-lab/langchain-canvas 0.1.2 → 0.1.4

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
@@ -1545,10 +1553,11 @@ function HtmlRenderer({ artifact: artifact2 }) {
   const lastSelfHtml = useRef(null);
   const srcDocRef = useRef("");
   const srcDoc = useMemo(() => {
-    if (artifact2.data.html === lastSelfHtml.current) return srcDocRef.current;
+    if (mode === "design" && artifact2.data.html === lastSelfHtml.current) return srcDocRef.current;
     srcDocRef.current = withInspector(artifact2.data.html);
+    lastSelfHtml.current = null;
     return srcDocRef.current;
-  }, [artifact2.data.html]);
+  }, [artifact2.data.html, mode]);
   const selected = selections.filter((s) => s.artifactId === artifact2.id);
   const single = selected.length === 1 ? selected[0] : null;
   useEffect(() => {
@@ -1768,8 +1777,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) {
@@ -1876,52 +1884,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) => {
@@ -2035,14 +1997,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",
@@ -2065,10 +2019,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,
           " ",
@@ -2579,18 +2529,34 @@ function EmptyState({ onOpenFiles }) {
     ] })
   ] });
 }
-var META = {
+var TYPE_META = {
   html: { icon: "\u{1F310}", label: "Web page" },
   document: { icon: "\u{1F4C4}", label: "Word document" },
   chart: { icon: "\u{1F4CA}", label: "Chart" },
   table: { icon: "\u{1F522}", label: "Excel sheet" },
   slides: { icon: "\u{1F4FD}\uFE0F", label: "PowerPoint deck" }
 };
+var KIND_META = {
+  web: TYPE_META.html,
+  html: TYPE_META.html,
+  document: TYPE_META.document,
+  doc: TYPE_META.document,
+  chart: TYPE_META.chart,
+  table: TYPE_META.table,
+  sheet: TYPE_META.table,
+  slide: TYPE_META.slides,
+  slides: TYPE_META.slides
+};
+function resolveCardMeta(artifact2) {
+  const kind = typeof artifact2.meta?.kind === "string" ? artifact2.meta.kind : void 0;
+  const byKind = kind ? KIND_META[kind] : void 0;
+  return byKind ?? TYPE_META[artifact2.type] ?? { icon: "\u{1F4CE}", label: artifact2.type };
+}
 function ArtifactCard({ artifactId }) {
   const artifact2 = useCanvasStore((s) => s.canvas.artifacts[artifactId]);
   const setActive = useCanvasStore((s) => s.setActiveArtifact);
   if (!artifact2) return null;
-  const meta = META[artifact2.type] ?? { icon: "\u{1F4CE}", label: artifact2.type };
+  const meta = resolveCardMeta(artifact2);
   return /* @__PURE__ */ jsxs("button", { className: "cv-card", onClick: () => setActive(artifact2.id), title: "Open on the canvas", children: [
     /* @__PURE__ */ jsx("span", { className: "cv-card__icon", children: meta.icon }),
     /* @__PURE__ */ jsxs("span", { className: "cv-card__meta", children: [

package/dist/styles.css

@@ -208,7 +208,7 @@
 
 /* --- body --------------------------------------------------------------------- */
 
-.cv-body { flex: 1; overflow: auto; padding: 24px; }
+.cv-body { flex: 1; min-height: 0; overflow: auto; padding: 24px; }
 .cv-body--flush { padding: 0; overflow: hidden; }
 .cv-fallback { color: var(--cv-muted); font-size: 14px; }
 
@@ -750,7 +750,7 @@
 
 /* --- html renderer (base substrate) ------------------------------------------- */
 
-.cv-html-wrap { display: flex; flex-direction: column; height: 100%; gap: 10px; }
+.cv-html-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 10px; }
 .cv-html-bar {
   display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
   padding: 7px 9px; border: 1px solid var(--cv-border); border-radius: 9px; background: var(--cv-surface);
@@ -807,7 +807,10 @@
 .cv-html {
   width: 100%;
   height: 100%;
-  min-height: 70vh;
+  /* Fill the (now height-bounded) stage exactly so the sandboxed page scrolls
+     inside the iframe. A forced min-height would push the iframe taller than the
+     stage and defeat the stage's overflow, so the panel couldn't scroll at all. */
+  min-height: 0;
   border: 0;
   border-radius: 10px;
   background: #fff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braincrew-lab/langchain-canvas",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A live canvas for LangChain agents — stream documents, charts, and rich artifacts into a React panel.",
   "license": "MIT",
   "type": "module",
@@ -18,17 +18,29 @@
     "LICENSE"
   ],
   "comment": "Dev resolves to source (no build needed; Next transpiles via transpilePackages). publishConfig swaps to dist for npm.",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./styles.css": "./dist/styles.css"
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles/canvas.css"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./styles.css": "./dist/styles.css"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -53,11 +65,5 @@
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
     "vitest": "^2"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run"
   }
-}
+}