npm - @braincrew-lab/langchain-canvas - Versions diffs - 0.1.0 - Mend

@braincrew-lab/langchain-canvas 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/LICENSE +21 -0
package/README.ko.md +170 -0
package/README.md +170 -0
package/dist/ChartRenderer-CKCJ2LQX.js +182 -0
package/dist/DocumentRenderer-7HP3YQUK.js +40 -0
package/dist/SlidesRenderer-KFSPD63I.js +399 -0
package/dist/TableRenderer-TRYSMQA7.js +250 -0
package/dist/chunk-6L3AL6W4.js +24 -0
package/dist/chunk-HHJWIO2C.js +12 -0
package/dist/chunk-PSIT32I5.js +242 -0
package/dist/chunk-YZZSJJMQ.js +14 -0
package/dist/index.d.ts +669 -0
package/dist/index.js +2570 -0
package/dist/styles.css +1066 -0
package/package.json +63 -0

package/dist/index.js ADDED Viewed

@@ -0,0 +1,2570 @@
+"use client";
+import { loadOptional } from './chunk-YZZSJJMQ.js';
+import { resolveElements } from './chunk-6L3AL6W4.js';
+export { useArtifactPatch } from './chunk-HHJWIO2C.js';
+import { useCanvasStoreApi, useCanvasStore } from './chunk-PSIT32I5.js';
+export { CanvasProvider, createCanvasStore, emptyCanvasState, isCanvasEvent, isChatEvent, mergePatch, reduceCanvas, useCanvasStore, useCanvasStoreApi } from './chunk-PSIT32I5.js';
+import { createContext, lazy, useRef, useCallback, useEffect, useContext, useState, useMemo, Suspense, Component } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+// src/client/sse-client.ts
+async function* streamChat(endpoint, request, options = {}) {
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers: { "content-type": "application/json", ...options.headers },
+    body: JSON.stringify({
+      thread_id: request.threadId,
+      message: request.message,
+      selections: request.selections ?? []
+    }),
+    signal: options.signal
+  });
+  if (!response.ok || !response.body) {
+    throw new Error(`chat stream failed: ${response.status} ${response.statusText}`);
+  }
+  yield* parseSSE(response.body, options.signal);
+}
+async function* parseSSE(body, signal) {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  try {
+    while (true) {
+      if (signal?.aborted) break;
+      const { done, value } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let boundary;
+      while ((boundary = buffer.indexOf("\n\n")) !== -1) {
+        const frame = buffer.slice(0, boundary);
+        buffer = buffer.slice(boundary + 2);
+        const event = parseFrame(frame);
+        if (event) {
+          yield event;
+          if (event.type === "done") return;
+        }
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+function parseFrame(frame) {
+  const data = frame.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice(5).trimStart()).join("\n");
+  if (!data) return null;
+  try {
+    return JSON.parse(data);
+  } catch {
+    return null;
+  }
+}
+// src/client/inspector.ts
+var INSPECTOR_MARK = "langchain-canvas";
+function withInspector(html) {
+  let out = withViewport(html);
+  const injection = `<style data-lcx>${INSPECTOR_CSS}</style><script data-lcx>${INSPECTOR_SCRIPT}</script>`;
+  const marker = "</body>";
+  const at = out.lastIndexOf(marker);
+  out = at === -1 ? out + injection : out.slice(0, at) + injection + out.slice(at);
+  return out;
+}
+function withViewport(html) {
+  if (/name=["']?viewport/i.test(html)) return html;
+  const meta = '<meta name="viewport" content="width=device-width, initial-scale=1">';
+  const head = html.match(/<head[^>]*>/i);
+  if (head) return html.replace(head[0], head[0] + meta);
+  const htmlTag = html.match(/<html[^>]*>/i);
+  if (htmlTag) return html.replace(htmlTag[0], htmlTag[0] + "<head>" + meta + "</head>");
+  return meta + html;
+}
+var INSPECTOR_CSS = `
+[data-cid].lcx-hover { outline: 2px solid #6366f1 !important; outline-offset: 1px; cursor: pointer; }
+[data-cid].lcx-selected { outline: 2px solid #10b981 !important; outline-offset: 1px; cursor: move; }
+[data-group-id] { outline: 1px dashed rgba(99,102,241,0.45); outline-offset: 2px; }
+.lcx-marquee { position: fixed; border: 1.5px solid #6366f1; background: rgba(99,102,241,0.12); z-index: 999999; pointer-events: none; }
+.lcx-fmt { position: fixed; z-index: 1000000; display: flex; gap: 2px; padding: 4px; border-radius: 8px;
+  background: #1f2328; box-shadow: 0 6px 20px rgba(0,0,0,0.25); font-family: -apple-system, system-ui, sans-serif; }
+.lcx-fmt button { min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent;
+  color: #fff; font-size: 14px; cursor: pointer; }
+.lcx-fmt button:hover { background: rgba(255,255,255,0.15); }
+.lcx-fmt button b { font-weight: 800; } .lcx-fmt button i { font-style: italic; } .lcx-fmt button u { text-decoration: underline; }
+.lcx-resize { position: fixed; width: 14px; height: 14px; z-index: 1000001; background: #10b981;
+  border: 2px solid #fff; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: nwse-resize; touch-action: none; }
+`.trim();
+var STYLE_PROPS = [
+  "color",
+  "backgroundColor",
+  "fontSize",
+  "fontWeight",
+  "textAlign",
+  "lineHeight",
+  "letterSpacing",
+  "padding",
+  "borderRadius",
+  "width"
+];
+var INSPECTOR_SCRIPT = `
+(function () {
+  var MARK = ${JSON.stringify(INSPECTOR_MARK)};
+  var STYLE_PROPS = ${JSON.stringify(STYLE_PROPS)};
+  function assign(el, path) {
+    if (el.hasAttribute && el.hasAttribute("data-lcx")) return; // skip injected style/script
+    el.setAttribute("data-cid", path);
+    for (var i = 0; i < el.children.length; i++) assign(el.children[i], path + "-" + i);
+  }
+  function byCid(cid) { return document.querySelector('[data-cid="' + cid + '"]'); }
+  function isEditable(el) { return el && el.hasAttribute && !el.hasAttribute("data-lcx") && !el.closest("[data-lcx]"); }
+  function selectorFor(el) {
+    var tag = el.tagName.toLowerCase();
+    var classes = typeof el.className === "string" ? el.className.trim().split(/\\s+/) : [];
+    var real = classes.filter(function (c) { return c && c.indexOf("lcx-") !== 0; }); // skip inspector classes
+    return tag + (real.length ? "." + real[0] : "");
+  }
+  function stylesOf(el) {
+    var cs = getComputedStyle(el), out = {};
+    for (var i = 0; i < STYLE_PROPS.length; i++) out[STYLE_PROPS[i]] = cs[STYLE_PROPS[i]];
+    return out;
+  }
+  function scrub(el) {
+    el.removeAttribute("data-cid");
+    el.removeAttribute("contenteditable");
+    if (el.classList) { el.classList.remove("lcx-hover"); el.classList.remove("lcx-selected"); }
+    if (el.getAttribute && el.getAttribute("class") === "") el.removeAttribute("class");
+  }
+  function emitEdit(el) {
+    // Serialize the *canonical* HTML \u2014 strip the inspector's own injected
+    // attributes/classes so they never persist into the stored source or exports.
+    var cid = el.getAttribute("data-cid");
+    var clone = el.cloneNode(true);
+    scrub(clone);
+    var inner = clone.querySelectorAll ? clone.querySelectorAll("[data-cid],[contenteditable],.lcx-hover,.lcx-selected") : [];
+    for (var i = 0; i < inner.length; i++) scrub(inner[i]);
+    parent.postMessage({ source: MARK, type: "node_edit", cid: cid, html: clone.outerHTML }, "*");
+  }
+  // A structural change (insert/delete/move) shifts every cid, so we save the
+  // whole document: clone <html>, drop the injected inspector nodes, scrub the
+  // inspector's attributes, and post it for the host to store wholesale.
+  // selfApplied = the iframe already reflects this change and every element kept
+  // its data-cid (a pure reorder/move), so the host can persist without reloading
+  // the iframe (no flicker). Edits that mint new nodes (insert) leave it false so a
+  // reload re-tags fresh cids.
+  function emitDoc(selfApplied) {
+    var clone = document.documentElement.cloneNode(true);
+    var injected = clone.querySelectorAll("[data-lcx]");
+    for (var i = 0; i < injected.length; i++) injected[i].parentNode && injected[i].parentNode.removeChild(injected[i]);
+    var marked = clone.querySelectorAll("[data-cid],[contenteditable],.lcx-hover,.lcx-selected");
+    for (var j = 0; j < marked.length; j++) scrub(marked[j]);
+    parent.postMessage({ source: MARK, type: "doc_edit", self: !!selfApplied, html: "<!doctype html>\\n" + clone.outerHTML }, "*");
+  }
+  function newBlock(tag) {
+    var el = document.createElement(tag);
+    if (tag === "img") {
+      el.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='270'%3E%3Crect width='100%25' height='100%25' fill='%23e5e7eb'/%3E%3Cpath d='M190 155l40-45 35 40 25-25 40 45z' fill='%23c3c8d0'/%3E%3Ccircle cx='300' cy='105' r='16' fill='%23c3c8d0'/%3E%3C/svg%3E";
+      el.alt = "image"; el.style.maxWidth = "100%";
+    }
+    else if (tag === "button") el.textContent = "Button";
+    else if (tag === "hr") { /* no content */ }
+    else if (tag === "section") { var p = document.createElement("p"); p.textContent = "New section"; el.appendChild(p); }
+    else el.textContent = tag === "h1" || tag === "h2" ? "New heading" : "New text";
+    return el;
+  }
+  // Floating rich-text toolbar shown while a text element is being edited.
+  var fmtBar = null;
+  function removeFmtBar() { if (fmtBar && fmtBar.parentNode) fmtBar.parentNode.removeChild(fmtBar); fmtBar = null; }
+  function showFmtBar(el) {
+    removeFmtBar();
+    var r = el.getBoundingClientRect();
+    fmtBar = document.createElement("div");
+    fmtBar.setAttribute("data-lcx", "");
+    fmtBar.className = "lcx-fmt";
+    fmtBar.style.left = Math.max(4, r.left) + "px";
+    fmtBar.style.top = Math.max(4, r.top - 40) + "px";
+    var specs = [["<b>B</b>", "bold"], ["<i>I</i>", "italic"], ["<u>U</u>", "underline"], ["\\uD83D\\uDD17", "createLink"]];
+    for (var i = 0; i < specs.length; i++) {
+      (function (spec) {
+        var btn = document.createElement("button");
+        btn.innerHTML = spec[0];
+        btn.title = spec[1];
+        // mousedown+preventDefault keeps the contenteditable focused and its selection intact.
+        btn.addEventListener("mousedown", function (ev) {
+          ev.preventDefault();
+          if (spec[1] === "createLink") {
+            var url = prompt("Link URL", "https://");
+            if (url) document.execCommand("createLink", false, url);
+          } else {
+            document.execCommand(spec[1], false, null);
+          }
+        });
+        fmtBar.appendChild(btn);
+      })(specs[i]);
+    }
+    document.body.appendChild(fmtBar);
+  }
+  // Drag-to-resize handle for the selected element (images keep their aspect).
+  var resizeEl = null, resizeHandle = null, resizing = null;
+  function positionResize() {
+    if (!resizeEl || !resizeHandle) return;
+    var r = resizeEl.getBoundingClientRect();
+    // Anchor to the element's bottom-right, but keep the whole handle on-screen so
+    // a section taller/wider than the viewport still exposes a reachable grip
+    // (otherwise it sits below the fold and "there's no way to adjust it").
+    var M = 8;
+    var left = Math.max(r.left - 7, Math.min(r.right - 7, window.innerWidth - M - 14));
+    var top = Math.max(r.top - 7, Math.min(r.bottom - 7, window.innerHeight - M - 14));
+    resizeHandle.style.left = left + "px";
+    resizeHandle.style.top = top + "px";
+  }
+  function hideResize() { resizeEl = null; if (resizeHandle) resizeHandle.style.display = "none"; }
+  function showResize(el) {
+    resizeEl = el;
+    if (!resizeHandle) {
+      resizeHandle = document.createElement("div");
+      resizeHandle.setAttribute("data-lcx", "");
+      resizeHandle.className = "lcx-resize";
+      resizeHandle.addEventListener("pointerdown", function (e) {
+        if (!resizeEl) return;
+        e.preventDefault(); e.stopPropagation();
+        var r = resizeEl.getBoundingClientRect();
+        resizing = { sx: e.clientX, sy: e.clientY, w: r.width, h: r.height, img: resizeEl.tagName === "IMG" };
+        resizeHandle.setPointerCapture(e.pointerId);
+      });
+      resizeHandle.addEventListener("pointermove", function (e) {
+        if (!resizing || !resizeEl) return;
+        var w = Math.max(20, Math.round(resizing.w + (e.clientX - resizing.sx)));
+        if (resizing.img) {
+          // Store image width as a % of its container so it scales with the layout
+          // (responsive): shrinks on mobile, grows on desktop. Aspect ratio kept.
+          var parentW = resizeEl.parentElement ? resizeEl.parentElement.getBoundingClientRect().width : window.innerWidth;
+          resizeEl.style.width = Math.max(5, Math.min(100, Math.round((w / parentW) * 100))) + "%";
+          resizeEl.style.height = "auto";
+        } else {
+          resizeEl.style.width = w + "px";
+          resizeEl.style.height = Math.max(20, Math.round(resizing.h + (e.clientY - resizing.sy))) + "px";
+        }
+        positionResize();
+      });
+      resizeHandle.addEventListener("pointerup", function () {
+        if (!resizing) return;
+        resizing = null;
+        emitEdit(resizeEl); // commit the new size as a node edit
+      });
+      document.body.appendChild(resizeHandle);
+    }
+    resizeHandle.style.display = "block";
+    positionResize();
+  }
+  function start() {
+    assign(document.body, "e");
+    var hovered = null;
+    var selected = [];               // currently highlighted elements
+    var marquee = null, sx = 0, sy = 0, dragging = false, moved = false, suppressClick = false;
+    // Free positioning: dragging places an element anywhere. The element is pulled
+    // into absolute positioning inside its own parent, and its final spot + size are
+    // stored as percentages of that parent \u2014 so it stays put proportionally across
+    // responsive breakpoints, instead of a fixed pixel offset that drifts off.
+    var dragEls = null, dragStart = null, dragBases = null, groupSeq = 0;
+    function ensurePositioned(parent) {
+      if (!parent || parent === document.body || parent === document.documentElement) return;
+      if (window.getComputedStyle(parent).position === "static") parent.style.position = "relative";
+    }
+    // Pull each element out into absolute positioning at its current spot (no visual
+    // jump), so it can then be moved freely.
+    function beginFreeDrag(els) {
+      dragBases = [];
+      for (var i = 0; i < els.length; i++) {
+        var el = els[i], parent = el.parentElement || document.body;
+        ensurePositioned(parent);
+        var pr = parent.getBoundingClientRect(), r = el.getBoundingClientRect();
+        var base = { el: el, parent: parent, left: r.left - pr.left, top: r.top - pr.top, w: el.offsetWidth, h: el.offsetHeight };
+        el.style.position = "absolute";
+        el.style.margin = "0";
+        el.style.width = base.w + "px";        // freeze size while dragging (absolute can't inherit flow width)
+        el.style.left = base.left + "px";
+        el.style.top = base.top + "px";
+        dragBases.push(base);
+      }
+    }
+    function moveFree(dx, dy) {
+      for (var i = 0; i < dragBases.length; i++) {
+        var b = dragBases[i];
+        b.el.style.left = (b.left + dx) + "px";
+        b.el.style.top = (b.top + dy) + "px";
+      }
+    }
+    // Commit the current position (in px, as set live by moveFree) as % of the
+    // parent \u2014 position and width \u2014 so it scales with the layout. Falls back to px
+    // only if the parent has collapsed to zero on that axis.
+    function commitFree() {
+      for (var i = 0; i < dragBases.length; i++) {
+        var b = dragBases[i], pr = b.parent.getBoundingClientRect();
+        var curLeft = parseFloat(b.el.style.left) || 0, curTop = parseFloat(b.el.style.top) || 0;
+        b.el.style.left = pr.width ? ((curLeft / pr.width) * 100).toFixed(3) + "%" : curLeft + "px";
+        b.el.style.top = pr.height ? ((curTop / pr.height) * 100).toFixed(3) + "%" : curTop + "px";
+        if (pr.width) b.el.style.width = ((b.w / pr.width) * 100).toFixed(3) + "%";
+      }
+    }
+    function clearSelected() {
+      for (var i = 0; i < selected.length; i++) selected[i].classList.remove("lcx-selected");
+      selected = [];
+      hideResize();
+    }
+    window.addEventListener("scroll", positionResize, true);
+    function overlapRatio(r, box) {
+      var ix = Math.max(0, Math.min(r.right, box.right) - Math.max(r.left, box.left));
+      var iy = Math.max(0, Math.min(r.bottom, box.bottom) - Math.max(r.top, box.top));
+      var area = r.width * r.height;
+      return area > 0 ? (ix * iy) / area : 0;
+    }
+    function hasAncestorIn(el, list) {
+      var p = el.parentElement;
+      while (p) { if (list.indexOf(p) !== -1) return true; p = p.parentElement; }
+      return false;
+    }
+    function selectSummary(el) {
+      return { cid: el.getAttribute("data-cid"), selector: selectorFor(el), tag: el.tagName.toLowerCase(),
+               text: (el.textContent || "").trim().slice(0, 60) };
+    }
+    document.addEventListener("mouseover", function (e) {
+      var t = e.target;
+      if (!(t instanceof Element) || !isEditable(t)) return;
+      if (hovered) hovered.classList.remove("lcx-hover");
+      hovered = t; t.classList.add("lcx-hover");
+    }, true);
+    document.addEventListener("mouseout", function () {
+      if (hovered) { hovered.classList.remove("lcx-hover"); hovered = null; }
+    }, true);
+    // --- click = single select --------------------------------------------------
+    document.addEventListener("click", function (e) {
+      if (suppressClick) { suppressClick = false; return; }
+      var t = e.target;
+      if (!(t instanceof Element) || t.isContentEditable || !isEditable(t)) return;
+      e.preventDefault(); e.stopPropagation();
+      // Clicking the page background (body / near-full-page element) deselects.
+      var rr = t.getBoundingClientRect();
+      if (t === document.body || t === document.documentElement ||
+          rr.width * rr.height > window.innerWidth * window.innerHeight * 0.9) {
+        clearSelected();
+        parent.postMessage({ source: MARK, type: "multi_select", items: [] }, "*");
+        return;
+      }
+      if (e.shiftKey) {
+        // Shift-click toggles an element in a multi-selection.
+        var i = selected.indexOf(t);
+        if (i !== -1) { t.classList.remove("lcx-selected"); selected.splice(i, 1); }
+        else {
+          // Keep the selection flat \u2014 a nested pair can't be grouped, so drop any
+          // already-selected ancestor/descendant of the newly-clicked element.
+          for (var j = selected.length - 1; j >= 0; j--) {
+            if (selected[j].contains(t) || t.contains(selected[j])) {
+              selected[j].classList.remove("lcx-selected"); selected.splice(j, 1);
+            }
+          }
+          t.classList.add("lcx-selected"); selected.push(t);
+        }
+        parent.postMessage({ source: MARK, type: "multi_select", items: selected.map(selectSummary) }, "*");
+        return;
+      }
+      clearSelected();
+      var gid = t.getAttribute("data-group-id");
+      if (gid) {
+        // Clicking a grouped element highlights the whole group; it moves together
+        // and offers Ungroup. (Double-click still edits the deep text element.)
+        var mates = document.querySelectorAll('[data-group-id="' + gid + '"]');
+        for (var mi = 0; mi < mates.length; mi++) { mates[mi].classList.add("lcx-selected"); selected.push(mates[mi]); }
+      } else {
+        t.classList.add("lcx-selected"); selected = [t];
+      }
+      showResize(t);
+      parent.postMessage({
+        source: MARK, type: "select",
+        cid: t.getAttribute("data-cid"),
+        selector: selectorFor(t),
+        tag: t.tagName.toLowerCase(),
+        text: (t.textContent || "").trim().slice(0, 80),
+        outerHtml: t.outerHTML.slice(0, 4000),
+        styles: stylesOf(t),
+        isGroup: !!gid
+      }, "*");
+    }, 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
+      if (e.button !== 0) return;
+      var t = e.target;
+      if (t instanceof Element && t.isContentEditable) return;
+      if (t === resizeHandle) return;    // the resize handle drives its own drag
+      // Pressing on a selected element drags the whole selection; pressing on any
+      // other element drags just that one (a single gesture both selects and moves,
+      // so you never have to click first). Empty space starts a marquee.
+      var onSel = false;
+      for (var si = 0; si < selected.length; si++) { if (selected[si] === t || selected[si].contains(t)) { onSel = true; break; } }
+      if (onSel && selected.length >= 1) {
+        dragEls = selected.slice();
+      } else {
+        var el = t instanceof Element ? t.closest("[data-cid]") : null;
+        if (el && el !== document.body && el.parentElement) dragEls = [el];
+      }
+      if (dragEls) {
+        dragStart = { x: e.clientX, y: e.clientY }; moved = false;
+        document.body.style.userSelect = "none";
+        return;
+      }
+      dragging = true; moved = false; sx = e.clientX; sy = e.clientY;
+      document.body.style.userSelect = "none";
+      marquee = document.createElement("div");
+      marquee.className = "lcx-marquee";
+      document.body.appendChild(marquee);
+    }, true);
+    document.addEventListener("mousemove", function (e) {
+      if (dragEls) {
+        if (!moved && (Math.abs(e.clientX - dragStart.x) > 3 || Math.abs(e.clientY - dragStart.y) > 3)) {
+          moved = true;
+          beginFreeDrag(dragEls);       // pull into absolute positioning at the current spot
+        }
+        if (!moved) return;
+        moveFree(e.clientX - dragStart.x, e.clientY - dragStart.y);
+        positionResize();
+        return;
+      }
+      if (!dragging || !marquee) return;
+      if (Math.abs(e.clientX - sx) > 4 || Math.abs(e.clientY - sy) > 4) moved = true;
+      var l = Math.min(sx, e.clientX), tp = Math.min(sy, e.clientY);
+      marquee.style.left = l + "px"; marquee.style.top = tp + "px";
+      marquee.style.width = Math.abs(e.clientX - sx) + "px";
+      marquee.style.height = Math.abs(e.clientY - sy) + "px";
+    }, true);
+    document.addEventListener("mouseup", function (e) {
+      if (dragEls) {
+        var els = dragEls; dragEls = null;
+        document.body.style.userSelect = "";
+        if (moved && dragBases) {
+          suppressClick = true;
+          moveFree(e.clientX - dragStart.x, e.clientY - dragStart.y);    // final px position
+          commitFree();                                                  // px \u2192 % of parent
+          positionResize();
+          // The new position is already shown in the iframe with every cid intact,
+          // so persist without a reload (no flicker): one element \u2192 node_edit,
+          // several \u2192 a self-applied doc_edit.
+          if (els.length === 1) emitEdit(els[0]); else emitDoc(true);
+        }
+        dragBases = null;
+        return;
+      }
+      if (!dragging) return;
+      dragging = false;
+      document.body.style.userSelect = "";
+      var box = marquee ? marquee.getBoundingClientRect() : null;
+      if (marquee && marquee.parentNode) marquee.parentNode.removeChild(marquee);
+      marquee = null;
+      if (!moved || !box) return;              // a click, not a drag
+      suppressClick = true;
+      // Predictable rubber-band: select the outermost elements *fully enclosed*
+      // by the box (standard marquee behavior \u2014 no partial-overlap guessing).
+      var vpArea = window.innerWidth * window.innerHeight;
+      var all = document.body.querySelectorAll("[data-cid]");
+      var hits = [];
+      all.forEach(function (el) {
+        if (el.hasAttribute("data-lcx")) return;
+        var r = el.getBoundingClientRect();
+        if (r.width <= 0 || r.height <= 0) return;
+        if (r.width * r.height > vpArea * 0.9) return;   // never select the page/body wrapper
+        if (r.left >= box.left - 1 && r.top >= box.top - 1 && r.right <= box.right + 1 && r.bottom <= box.bottom + 1) hits.push(el);
+      });
+      var top = hits.filter(function (el) { return !hasAncestorIn(el, hits); }); // outermost only
+      // If the enclosure is a single wrapper of several items, select the items
+      // (so dragging a box around 3 cards selects the cards, not their container).
+      var guard = 0;
+      while (top.length === 1 && guard++ < 4) {
+        var kids = [];
+        for (var k = 0; k < top[0].children.length; k++) {
+          if (hits.indexOf(top[0].children[k]) !== -1) kids.push(top[0].children[k]);
+        }
+        if (kids.length >= 2) top = kids; else break;
+      }
+      if (!e.shiftKey) clearSelected();
+      top.forEach(function (el) {
+        if (selected.indexOf(el) === -1) { el.classList.add("lcx-selected"); selected.push(el); }
+      });
+      parent.postMessage({ source: MARK, type: "multi_select", items: selected.map(selectSummary) }, "*");
+    }, true);
+    // Safety net: if the pointer leaves the frame mid-drag the mouseup can be lost,
+    // which would leave move/marquee state stuck. Finalize cleanly on exit.
+    function endDrag() {
+      document.body.style.userSelect = "";
+      if (dragEls) {
+        // Pointer left the frame mid-drag: commit the move at its last position so
+        // it isn't lost (the element is already placed absolutely in the iframe).
+        var els = dragEls; dragEls = null;
+        if (moved && dragBases) { commitFree(); if (els.length === 1) emitEdit(els[0]); else emitDoc(true); }
+        dragBases = null;
+      }
+      if (dragging) {
+        dragging = false;
+        if (marquee && marquee.parentNode) marquee.parentNode.removeChild(marquee);
+        marquee = null;
+      }
+    }
+    document.addEventListener("mouseleave", endDrag);
+    window.addEventListener("blur", endDrag);
+    // --- double-click = edit text inline; commit on blur ------------------------
+    document.addEventListener("dblclick", function (e) {
+      var t = e.target;
+      if (!(t instanceof Element) || !isEditable(t)) return;
+      e.preventDefault();
+      t.setAttribute("contenteditable", "true");
+      t.focus();
+      showFmtBar(t);
+    }, true);
+    document.addEventListener("blur", function (e) {
+      var t = e.target;
+      if (!(t instanceof Element) || !t.hasAttribute("contenteditable")) return;
+      removeFmtBar();
+      t.removeAttribute("contenteditable");
+      emitEdit(t);
+    }, true);
+    // While editing text, Enter inserts a real line break. The browser's default
+    // for Enter is to split the block (which nests <div>s, or does nothing at all
+    // on inline/button-like elements), so line breaks appear not to work \u2014 force a
+    // clean <br> instead. Escape commits by blurring.
+    document.addEventListener("keydown", function (e) {
+      var t = e.target;
+      var editing = t instanceof Element && t.hasAttribute("contenteditable");
+      if (editing) {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          if (!document.execCommand("insertLineBreak")) document.execCommand("insertHTML", false, "<br>");
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          t.blur();
+        }
+        return;
+      }
+      // Escape with a live selection clears it here and tells the host to close its
+      // selection UI (an empty multi-select).
+      if (e.key === "Escape" && selected.length) {
+        clearSelected();
+        parent.postMessage({ source: MARK, type: "multi_select", items: [] }, "*");
+      }
+    }, true);
+    // --- parent commands --------------------------------------------------------
+    window.addEventListener("message", function (e) {
+      var d = e.data;
+      if (!d || d.source !== MARK) return;
+      if (d.type === "clear") { clearSelected(); return; }
+      if (d.type === "set_style") { var el = byCid(d.cid); if (el) el.style[d.prop] = d.value; return; }
+      if (d.type === "set_src") { var ei = byCid(d.cid); if (ei) { ei.setAttribute("src", d.value); emitEdit(ei); } return; }
+      if (d.type === "commit") { var el2 = byCid(d.cid); if (el2) emitEdit(el2); return; }
+      // Structural edits \u2014 mutate the tree, then persist the whole document.
+      if (d.type === "insert") {
+        var block = newBlock(d.block || "p");
+        var anchor = d.cid ? byCid(d.cid) : null;
+        if (anchor && anchor.parentNode && anchor.parentNode !== document.documentElement) {
+          anchor.parentNode.insertBefore(block, anchor.nextSibling);
+        } else {
+          document.body.appendChild(block);
+        }
+        emitDoc();
+        return;
+      }
+      if (d.type === "insert_html") {
+        // A built-in section template (trusted markup from the toolbar).
+        var anc = d.cid ? byCid(d.cid) : null;
+        var container = (anc && anc.parentNode && anc.parentNode !== document.documentElement) ? anc.parentNode : document.body;
+        var ref = (anc && anc.parentNode === container) ? anc.nextSibling : null;
+        var frag = document.createElement("div");
+        frag.innerHTML = d.html || "";
+        while (frag.firstChild) container.insertBefore(frag.firstChild, ref);
+        emitDoc();
+        return;
+      }
+      if (d.type === "group") {
+        // Tag members with a shared id \u2014 no wrapper, so the page layout (grid /
+        // flex flow) is untouched; the members simply move together.
+        var members = [];
+        var cids = d.cids || [];
+        for (var g = 0; g < cids.length; g++) { var m = byCid(cids[g]); if (m) members.push(m); }
+        if (members.length < 2) return;
+        var gid = "g" + (groupSeq++);
+        for (var w = 0; w < members.length; w++) members[w].setAttribute("data-group-id", gid);
+        clearSelected();
+        emitDoc();
+        return;
+      }
+      if (d.type === "ungroup") {
+        var el0 = d.cid ? byCid(d.cid) : null;
+        if (!el0) return;
+        var gid2 = el0.getAttribute("data-group-id");
+        if (gid2) {
+          var mates = document.querySelectorAll('[data-group-id="' + gid2 + '"]');
+          for (var u = 0; u < mates.length; u++) mates[u].removeAttribute("data-group-id");
+          clearSelected();
+          emitDoc();
+        }
+        return;
+      }
+      var target = d.cid ? byCid(d.cid) : null;
+      if (!target || !target.parentNode) return;
+      if (d.type === "duplicate") {
+        var copy = target.cloneNode(true);
+        scrub(copy);
+        target.parentNode.insertBefore(copy, target.nextSibling);
+        emitDoc();
+      } else if (d.type === "delete") {
+        target.parentNode.removeChild(target);
+        clearSelected();
+        emitDoc();
+      } else if (d.type === "move_up") {
+        var prev = target.previousElementSibling;
+        while (prev && prev.hasAttribute("data-lcx")) prev = prev.previousElementSibling;
+        if (prev) { target.parentNode.insertBefore(target, prev); emitDoc(); }
+      } else if (d.type === "move_down") {
+        var next = target.nextElementSibling;
+        while (next && next.hasAttribute("data-lcx")) next = next.nextElementSibling;
+        if (next) { target.parentNode.insertBefore(next, target); emitDoc(); }
+      }
+    });
+  }
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start);
+  else start();
+})();
+`.trim();
+// src/client/mock.ts
+async function* mockStream(events, options = {}) {
+  const { delayMs = 120, signal } = options;
+  for (const event of events) {
+    if (signal?.aborted) return;
+    yield event;
+    if (delayMs > 0) await sleep(delayMs);
+  }
+}
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function useCanvasStream(options = {}) {
+  const endpoint = options.endpoint ?? "/api/chat";
+  const threadIdRef = useRef(options.threadId ?? crypto.randomUUID());
+  const abortRef = useRef(null);
+  const api = useCanvasStoreApi();
+  const queueRef = useRef([]);
+  const frameRef = useRef(null);
+  const flush = useCallback(() => {
+    frameRef.current = null;
+    if (queueRef.current.length === 0) return;
+    const batch = queueRef.current;
+    queueRef.current = [];
+    api.getState().applyEvents(batch);
+  }, [api]);
+  const enqueue = useCallback(
+    (event) => {
+      queueRef.current.push(event);
+      if (frameRef.current === null) {
+        frameRef.current = requestAnimationFrame(flush);
+      }
+    },
+    [flush]
+  );
+  useEffect(() => () => {
+    if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+  }, []);
+  const messages = useCanvasStore((s) => s.messages);
+  const canvas = useCanvasStore((s) => s.canvas);
+  const isStreaming = useCanvasStore((s) => s.isStreaming);
+  const error = useCanvasStore((s) => s.error);
+  const selections = useCanvasStore((s) => s.selections);
+  const sendMessage = useCallback(
+    async (text, withSelections) => {
+      const store = api.getState();
+      if (store.isStreaming || !text.trim()) return;
+      store.addUserMessage(text);
+      store.setStreaming(true);
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const mockEvents = options.mock?.(text) ?? null;
+        const stream = mockEvents ? mockStream(mockEvents, { delayMs: 60, signal: controller.signal }) : streamChat(
+          endpoint,
+          { threadId: threadIdRef.current, message: text, selections: withSelections },
+          { signal: controller.signal }
+        );
+        for await (const event of stream) {
+          enqueue(event);
+        }
+      } catch (err) {
+        if (!controller.signal.aborted) {
+          enqueue({ type: "error", message: err instanceof Error ? err.message : "stream failed" });
+        }
+      } finally {
+        flush();
+        api.getState().setStreaming(false);
+      }
+    },
+    [api, endpoint, enqueue, flush, options.mock]
+  );
+  const stop = useCallback(() => abortRef.current?.abort(), []);
+  const reset = useCallback(() => api.getState().reset(), [api]);
+  const setActiveArtifact = useCallback((id) => api.getState().setActiveArtifact(id), [api]);
+  const clearSelection = useCallback(() => api.getState().setSelections([]), [api]);
+  const editSelection = useCallback(
+    (instruction) => {
+      const current = api.getState().selections;
+      if (current.length === 0) return;
+      void sendMessage(instruction, current);
+      api.getState().setSelections([]);
+    },
+    [api, sendMessage]
+  );
+  return {
+    sendMessage,
+    stop,
+    reset,
+    setActiveArtifact,
+    selections,
+    editSelection,
+    clearSelection,
+    messages,
+    canvas,
+    isStreaming,
+    error,
+    threadId: threadIdRef.current
+  };
+}
+function useCanvasReplay() {
+  const abortRef = useRef(null);
+  const api = useCanvasStoreApi();
+  const canvas = useCanvasStore((s) => s.canvas);
+  const isPlaying = useCanvasStore((s) => s.isStreaming);
+  const play = useCallback(
+    async (events, options = {}) => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const store = api.getState();
+      store.reset();
+      store.setStreaming(true);
+      try {
+        for await (const event of mockStream(events, { ...options, signal: controller.signal })) {
+          api.getState().applyEvent(event);
+        }
+      } finally {
+        api.getState().setStreaming(false);
+      }
+    },
+    [api]
+  );
+  const stop = useCallback(() => abortRef.current?.abort(), []);
+  const reset = useCallback(() => api.getState().reset(), [api]);
+  return { play, stop, reset, canvas, isPlaying };
+}
+// src/fixtures/scenarios.ts
+var PRICING_HTML = `<!doctype html>
+<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style>
+  body{font-family:system-ui;margin:0;background:#0b1020;color:#e6e8ef}
+  .wrap{max-width:820px;margin:48px auto;padding:0 20px;text-align:center}
+  h1{font-size:34px;margin:0 0 8px}
+  .sub{color:#9aa4b2;margin-bottom:32px}
+  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+  .card{background:#151a2e;border:1px solid #232a44;border-radius:14px;padding:24px}
+  .price{font-size:28px;font-weight:700;margin:8px 0}
+  .cta{margin-top:16px;padding:10px 16px;border:0;border-radius:9px;background:#6366f1;color:#fff;font-weight:600;cursor:pointer}
+  @media (max-width:640px){
+    .wrap{margin:28px auto}
+    h1{font-size:26px}
+    .tiers{grid-template-columns:1fr}
+  }
+</style></head>
+<body><div class="wrap">
+  <h1>Simple, honest pricing</h1>
+  <p class="sub">Start free. Upgrade when you grow.</p>
+  <div class="tiers">
+    <div class="card"><div>Starter</div><div class="price">$0</div><button class="cta">Get started</button></div>
+    <div class="card"><div>Pro</div><div class="price">$20</div><button class="cta">Start trial</button></div>
+    <div class="card"><div>Enterprise</div><div class="price">Custom</div><button class="cta">Contact us</button></div>
+  </div>
+</div></body></html>`;
+var htmlPage = {
+  id: "html-page",
+  title: "HTML page + edit",
+  description: "An agent builds a pricing page, then surgically edits one heading via node_patch.",
+  events: [
+    { type: "message.delta", messageId: "m1", text: "Here's a pricing page \u2014 click any element to edit it." },
+    { type: "message.end", messageId: "m1" },
+    {
+      type: "canvas.create",
+      artifact: { id: "page", type: "html", title: "Pricing", version: 1, status: "streaming", data: { html: PRICING_HTML } }
+    },
+    { type: "canvas.status", id: "page", status: "complete" },
+    // A targeted edit: replace the <h1> (cid "e-0-0": wrap → child 0) in place.
+    { type: "canvas.node_patch", id: "page", cid: "e-0-0", html: '<h1 data-cid="e-0-0">Pricing that scales with you</h1>' },
+    { type: "done" }
+  ]
+};
+var REPORT_CHUNKS = [
+  "# EV market, 2026\n\n",
+  "The electric-vehicle market continued its shift ",
+  "from early adopters to the mainstream.\n\n",
+  "## Highlights\n\n",
+  "- Global BEV share crossed **20%** of new sales\n",
+  "- Battery pack prices fell below **$80/kWh**\n",
+  "- Charging networks doubled in dense metros\n\n",
+  "## Outlook\n\nExpect continued margin pressure as ",
+  "legacy OEMs scale volume."
+];
+var document2 = {
+  id: "document",
+  title: "Streaming document",
+  description: "A markdown report streamed token-by-token via canvas.append.",
+  events: [
+    { type: "canvas.create", artifact: { id: "doc", type: "document", title: "EV market report", version: 1, status: "streaming", data: { format: "markdown", content: "" } } },
+    ...REPORT_CHUNKS.map((text) => ({ type: "canvas.append", id: "doc", path: "content", text })),
+    { type: "canvas.status", id: "doc", status: "complete" },
+    { type: "done" }
+  ]
+};
+var chart = {
+  id: "chart",
+  title: "Chart",
+  description: "A bar chart whose rows arrive via canvas.patch.",
+  events: [
+    {
+      type: "canvas.create",
+      artifact: {
+        id: "rev",
+        type: "chart",
+        title: "Quarterly revenue",
+        version: 1,
+        status: "streaming",
+        data: { chart: "bar", xKey: "quarter", series: [{ key: "amount", label: "Revenue ($M)" }], rows: [] }
+      }
+    },
+    {
+      type: "canvas.patch",
+      id: "rev",
+      patch: {
+        rows: [
+          { quarter: "Q1", amount: 12 },
+          { quarter: "Q2", amount: 18 },
+          { quarter: "Q3", amount: 24 },
+          { quarter: "Q4", amount: 30 }
+        ]
+      }
+    },
+    { type: "canvas.status", id: "rev", status: "complete" },
+    { type: "done" }
+  ]
+};
+var table = {
+  id: "table",
+  title: "Table",
+  description: "A data grid with columns and rows.",
+  events: [
+    {
+      type: "canvas.create",
+      artifact: {
+        id: "tbl",
+        type: "table",
+        title: "Model comparison",
+        version: 1,
+        status: "streaming",
+        data: {
+          columns: [
+            { key: "model", label: "Model" },
+            { key: "context", label: "Context", align: "right" },
+            { key: "price", label: "$/Mtok", align: "right" }
+          ],
+          rows: []
+        }
+      }
+    },
+    {
+      type: "canvas.patch",
+      id: "tbl",
+      patch: {
+        rows: [
+          { model: "Opus 4.8", context: "1M", price: 15 },
+          { model: "Sonnet 5", context: "400K", price: 3 },
+          { model: "Haiku 4.5", context: "200K", price: 1 },
+          { model: "Average", context: "", price: "=ROUND(AVERAGE(C2:C4),2)" }
+        ]
+      }
+    },
+    { type: "canvas.status", id: "tbl", status: "complete" },
+    { type: "done" }
+  ]
+};
+var slides = {
+  id: "slides",
+  title: "Slide deck",
+  description: "A slide deck (title + bullets), navigable and exportable to .pptx.",
+  events: [
+    { type: "canvas.create", artifact: { id: "deck", type: "slides", title: "Q4 Review", version: 1, status: "streaming", data: { slides: [] } } },
+    {
+      type: "canvas.patch",
+      id: "deck",
+      patch: {
+        slides: [
+          { layout: "title", title: "Q4 Business Review", subtitle: "Prepared for the board \xB7 2026", background: "#0b1020", textColor: "#e6e8ef", notes: "Welcome the room; set the tone for the quarter." },
+          { layout: "content", title: "Q4 in review", bullets: ["Revenue up 24% QoQ", "Two new enterprise logos", "Churn down to 1.2%"], notes: "Lead with the revenue number." },
+          {
+            layout: "two-column",
+            title: "Wins & watch-items",
+            bullets: ["Self-serve onboarding", "Usage-based pricing", "Faster support SLAs"],
+            bullets2: ["Enterprise security review", "EU data residency", "On-call load"]
+          },
+          { layout: "section", title: "What's next", subtitle: "Roadmap for Q1" },
+          {
+            layout: "blank",
+            elements: [
+              { id: "e1", type: "text", x: 8, y: 12, w: 60, h: 16, text: "Thank you", fontSize: 54, bold: true },
+              { id: "e2", type: "text", x: 8, y: 34, w: 70, h: 12, text: "Questions?", fontSize: 28, color: "#6b7280" }
+            ]
+          }
+        ]
+      }
+    },
+    { type: "canvas.status", id: "deck", status: "complete" },
+    { type: "done" }
+  ]
+};
+var scenarios = [htmlPage, document2, chart, table, slides];
+var RegistryContext = createContext({});
+function CanvasRegistryProvider({ registry, children }) {
+  return /* @__PURE__ */ jsx(RegistryContext.Provider, { value: registry, children });
+}
+function useRenderer(type) {
+  return useContext(RegistryContext)[type];
+}
+function mergeRegistries(...registries) {
+  return Object.assign({}, ...registries);
+}
+// src/io/xlsx.ts
+var THEME_PALETTE = [
+  "FFFFFF",
+  "000000",
+  "E7E6E6",
+  "44546A",
+  // lt1, dk1, lt2, dk2
+  "4472C4",
+  "ED7D31",
+  "A5A5A5",
+  "FFC000",
+  // accent 1–4
+  "5B9BD5",
+  "70AD47",
+  "0563C1",
+  "954F72"
+  // accent 5–6, hlink, followed-hlink
+];
+function tintChannel(channel, tint) {
+  const t = tint < 0 ? channel * (1 + tint) : channel * (1 - tint) + 255 * tint;
+  return Math.max(0, Math.min(255, Math.round(t)));
+}
+var INDEXED_PALETTE = {
+  0: "000000",
+  1: "FFFFFF",
+  2: "FF0000",
+  3: "00FF00",
+  4: "0000FF",
+  5: "FFFF00",
+  6: "FF00FF",
+  7: "00FFFF",
+  8: "000000",
+  9: "FFFFFF",
+  10: "FF0000",
+  11: "00FF00",
+  12: "0000FF",
+  13: "FFFF00",
+  14: "FF00FF",
+  15: "00FFFF",
+  16: "800000",
+  17: "008000",
+  18: "000080",
+  19: "808000",
+  20: "800080",
+  21: "008080",
+  22: "C0C0C0",
+  23: "808080",
+  24: "9999FF",
+  25: "993366",
+  26: "FFFFCC",
+  27: "CCFFFF",
+  28: "660066",
+  29: "FF8080",
+  30: "0066CC",
+  31: "CCCCFF",
+  32: "000080",
+  33: "FF00FF",
+  34: "FFFF00",
+  35: "00FFFF",
+  36: "800080",
+  37: "800000",
+  38: "008080",
+  39: "0000FF",
+  40: "00CCFF",
+  41: "CCFFFF",
+  42: "CCFFCC",
+  43: "FFFF99",
+  44: "99CCFF",
+  45: "FF99CC",
+  46: "CC99FF",
+  47: "FFCC99",
+  48: "3366FF",
+  49: "33CCCC",
+  50: "99CC00",
+  51: "FFCC00",
+  52: "FF9900",
+  53: "FF6600",
+  54: "666699",
+  55: "969696",
+  56: "003366",
+  57: "339966",
+  58: "003300",
+  59: "333300",
+  60: "993300",
+  61: "993366",
+  62: "333399",
+  63: "333333"
+};
+function toHex(color) {
+  if (!color || typeof color !== "object") return void 0;
+  let hex;
+  if (typeof color.argb === "string") {
+    hex = color.argb.length === 8 ? color.argb.slice(2) : color.argb;
+  } else if (typeof color.theme === "number") {
+    hex = THEME_PALETTE[color.theme];
+  } else if (typeof color.indexed === "number") {
+    hex = INDEXED_PALETTE[color.indexed];
+  }
+  if (!hex || !/^[0-9a-fA-F]{6}$/.test(hex)) return void 0;
+  const tint = typeof color.tint === "number" ? color.tint : 0;
+  if (tint) {
+    const n = parseInt(hex, 16);
+    const r = tintChannel(n >> 16 & 255, tint);
+    const g = tintChannel(n >> 8 & 255, tint);
+    const b = tintChannel(n & 255, tint);
+    hex = (r << 16 | g << 8 | b).toString(16).padStart(6, "0");
+  }
+  return `#${hex}`;
+}
+var H_ALIGN = { center: 0, left: 1, right: 2 };
+var V_ALIGN = { middle: 0, top: 1, bottom: 2 };
+var BORDER_STYLE = {
+  hair: 2,
+  thin: 1,
+  dotted: 3,
+  dashDot: 5,
+  dashDotDot: 6,
+  dashed: 4,
+  mediumDashed: 9,
+  mediumDashDot: 10,
+  mediumDashDotDot: 11,
+  slantDashDot: 12,
+  medium: 8,
+  double: 7,
+  thick: 13
+};
+function borderSide(side) {
+  if (!side || !side.style) return void 0;
+  return { style: BORDER_STYLE[side.style] ?? 1, color: toHex(side.color) ?? "#000000" };
+}
+function display(value) {
+  if (value == null) return "";
+  if (typeof value === "object") {
+    if (value.result != null) return display(value.result);
+    if (typeof value.text === "string") return value.text;
+    if (value instanceof Date) return formatDate(value, "yyyy-mm-dd");
+    return "";
+  }
+  return String(value);
+}
+function formatNumber(value, numFmt) {
+  const fmt = numFmt && numFmt !== "General" ? numFmt : "";
+  if (!fmt) return String(value);
+  const decimals = (fmt.match(/\.([0#]+)/)?.[1] ?? "").length;
+  if (fmt.includes("%")) return `${(value * 100).toFixed(decimals)}%`;
+  const thousands = /[#0],[#0]/.test(fmt);
+  let out = thousands ? value.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) : value.toFixed(decimals);
+  const currency = fmt.match(/[$₩€£¥]/);
+  if (currency) out = value < 0 ? `-${currency[0]}${out.slice(1)}` : `${currency[0]}${out}`;
+  return out;
+}
+function formatDate(d, numFmt) {
+  const fmt = numFmt && numFmt !== "General" && /[ymdhs]/i.test(numFmt) ? numFmt : "yyyy-mm-dd";
+  const p = (n, w = 2) => String(n).padStart(w, "0");
+  const map = {
+    yyyy: String(d.getFullYear()),
+    yy: p(d.getFullYear() % 100),
+    mmmm: d.toLocaleString("en-US", { month: "long" }),
+    mmm: d.toLocaleString("en-US", { month: "short" }),
+    mm: p(d.getMonth() + 1),
+    m: String(d.getMonth() + 1),
+    dd: p(d.getDate()),
+    d: String(d.getDate()),
+    hh: p(d.getHours()),
+    h: String(d.getHours()),
+    ss: p(d.getSeconds())
+  };
+  return fmt.replace(/yyyy|yy|mmmm|mmm|mm|m|dd|d|hh|h|ss/g, (t) => map[t] ?? t);
+}
+function cellValue(cell) {
+  const raw = cell.value;
+  const effective = raw;
+  const m = display(effective);
+  const isFormula = raw && typeof raw === "object" && "formula" in raw;
+  const hasStyle = cell.font || cell.fill?.type === "pattern" || cell.alignment;
+  if (m === "" && !isFormula && !hasStyle) return null;
+  const v = { m };
+  if (isFormula) {
+    v.f = `=${raw.formula}`;
+    v.v = display(raw.result);
+    if (typeof raw.result === "number") v.m = formatNumber(raw.result, cell.numFmt);
+  } else if (typeof effective === "number") {
+    v.v = effective;
+    v.m = formatNumber(effective, cell.numFmt);
+    v.ct = { fa: cell.numFmt || "General", t: "n" };
+  } else if (effective instanceof Date) {
+    v.m = formatDate(effective, cell.numFmt);
+    v.v = v.m;
+    v.ct = { fa: cell.numFmt || "yyyy-mm-dd", t: "d" };
+  } else {
+    v.v = m;
+  }
+  const font = cell.font;
+  if (font?.bold) v.bl = 1;
+  if (font?.italic) v.it = 1;
+  if (font?.underline) v.un = 1;
+  if (font?.size) v.fs = font.size;
+  if (font?.name) v.ff = font.name;
+  const fc = toHex(font?.color);
+  if (fc) v.fc = fc;
+  if (cell.fill?.type === "pattern" && cell.fill.pattern === "solid") {
+    const bg = toHex(cell.fill.fgColor) ?? toHex(cell.fill.bgColor);
+    if (bg) v.bg = bg;
+  }
+  const ha = cell.alignment?.horizontal;
+  if (ha && ha in H_ALIGN) v.ht = H_ALIGN[ha];
+  const va = cell.alignment?.vertical;
+  if (va && va in V_ALIGN) v.vt = V_ALIGN[va];
+  if (cell.alignment?.wrapText) v.tb = "2";
+  return v;
+}
+function bytesToBase64(buf) {
+  const bytes = buf instanceof Uint8Array ? buf : new Uint8Array(buf);
+  let bin = "";
+  for (let i = 0; i < bytes.length; i += 32768) {
+    bin += String.fromCharCode.apply(null, Array.from(bytes.subarray(i, i + 32768)));
+  }
+  return btoa(bin);
+}
+var EMU_PER_PX = 9525;
+var DEFAULT_COL_PX = 73;
+var DEFAULT_ROW_PX = 19;
+function sheetImages(ws, media, columnlen, rowlen) {
+  const placed = typeof ws.getImages === "function" ? ws.getImages() : [];
+  if (!placed.length || !media?.length) return [];
+  const colLeft = (c) => {
+    let x = 0;
+    for (let i = 0; i < c; i++) x += columnlen[i] ?? DEFAULT_COL_PX;
+    return x;
+  };
+  const rowTop = (r) => {
+    let y = 0;
+    for (let i = 0; i < r; i++) y += rowlen[i] ?? DEFAULT_ROW_PX;
+    return y;
+  };
+  const images = [];
+  placed.forEach((im, idx) => {
+    const entry = media[Number(im.imageId)];
+    if (!entry?.buffer) return;
+    const src = `data:image/${entry.extension || "png"};base64,${bytesToBase64(entry.buffer)}`;
+    const tl = im.range?.tl;
+    if (!tl) return;
+    const left = colLeft(tl.nativeCol ?? tl.col ?? 0) + Math.round((tl.nativeColOff ?? 0) / EMU_PER_PX);
+    const top = rowTop(tl.nativeRow ?? tl.row ?? 0) + Math.round((tl.nativeRowOff ?? 0) / EMU_PER_PX);
+    let width = im.range?.ext?.width;
+    let height = im.range?.ext?.height;
+    if ((!width || !height) && im.range?.br) {
+      const br = im.range.br;
+      width = colLeft(br.nativeCol ?? br.col ?? (tl.col ?? 0) + 2) - left;
+      height = rowTop(br.nativeRow ?? br.row ?? (tl.row ?? 0) + 2) - top;
+    }
+    images.push({
+      id: `img_${idx}`,
+      src,
+      left: Math.max(0, Math.round(left)),
+      top: Math.max(0, Math.round(top)),
+      width: Math.max(16, Math.round(width || 100)),
+      height: Math.max(16, Math.round(height || 100))
+    });
+  });
+  return images;
+}
+function parseMerge(range) {
+  const m = /^([A-Z]+)(\d+):([A-Z]+)(\d+)$/.exec(range);
+  if (!m) return null;
+  const col = (s) => [...s].reduce((n, ch) => n * 26 + (ch.charCodeAt(0) - 64), 0) - 1;
+  const r1 = Number(m[2]) - 1, c1 = col(m[1]);
+  const r2 = Number(m[4]) - 1, c2 = col(m[3]);
+  const r = Math.min(r1, r2), c = Math.min(c1, c2);
+  return { key: `${r}_${c}`, entry: { r, c, rs: Math.abs(r2 - r1) + 1, cs: Math.abs(c2 - c1) + 1 } };
+}
+async function xlsxToSheets(buffer, load) {
+  const ExcelJS = await load();
+  const wb = new ExcelJS.Workbook();
+  await wb.xlsx.load(buffer);
+  const media = wb.model?.media ?? [];
+  const sheets = [];
+  wb.worksheets.forEach((ws, index) => {
+    const colCount = Math.max(ws.columnCount || 0, ws.actualColumnCount || 0);
+    const rowCount = Math.max(ws.rowCount || 0, ws.actualRowCount || 0);
+    const merge = {};
+    const master = /* @__PURE__ */ new Map();
+    for (const range of ws.model?.merges ?? []) {
+      const parsed = parseMerge(range);
+      if (!parsed) continue;
+      const { r, c, rs, cs } = parsed.entry;
+      merge[parsed.key] = parsed.entry;
+      for (let rr = r; rr < r + rs; rr++) {
+        for (let cc = c; cc < c + cs; cc++) {
+          if (rr !== r || cc !== c) master.set(`${rr}_${cc}`, { r, c });
+        }
+      }
+    }
+    const celldata = [];
+    const borderInfo = [];
+    for (let r = 1; r <= rowCount; r++) {
+      const row = ws.getRow(r);
+      for (let c = 1; c <= colCount; c++) {
+        const cell = row.getCell(c);
+        const b = cell.border;
+        if (b) {
+          const l = borderSide(b.left), rt = borderSide(b.right), t = borderSide(b.top), bt = borderSide(b.bottom);
+          if (l || rt || t || bt) {
+            const value = { row_index: r - 1, col_index: c - 1 };
+            if (l) value.l = l;
+            if (rt) value.r = rt;
+            if (t) value.t = t;
+            if (bt) value.b = bt;
+            borderInfo.push({ rangeType: "cell", value });
+          }
+        }
+        const key = `${r - 1}_${c - 1}`;
+        const cover = master.get(key);
+        if (cover) {
+          celldata.push({ r: r - 1, c: c - 1, v: { mc: { r: cover.r, c: cover.c } } });
+          continue;
+        }
+        const v = cellValue(cell);
+        if (v) {
+          if (merge[key]) v.mc = merge[key];
+          celldata.push({ r: r - 1, c: c - 1, v });
+        }
+      }
+    }
+    const colChars = {};
+    for (const cell of celldata) {
+      const v = cell.v;
+      if (v.mc) continue;
+      const len = typeof v.m === "string" ? v.m.length : 0;
+      const c = cell.c;
+      if (len > (colChars[c] ?? 0)) colChars[c] = len;
+    }
+    const columnlen = {};
+    for (let c = 0; c < colCount; c++) {
+      const stored = ws.getColumn(c + 1)?.width;
+      const px2 = Math.max(colChars[c] ? colChars[c] * 8 + 20 : 0, stored ? stored * 7 + 5 : 0);
+      if (px2) columnlen[c] = Math.max(56, Math.min(320, Math.round(px2)));
+    }
+    const rowlen = {};
+    for (let r = 1; r <= rowCount; r++) {
+      const h = ws.getRow(r)?.height;
+      if (h) rowlen[r - 1] = Math.round(h * 1.33);
+    }
+    sheets.push({
+      name: ws.name || `Sheet${index + 1}`,
+      id: `sheet_${index}`,
+      order: index,
+      status: index === 0 ? 1 : 0,
+      // Size the grid to the data plus a small buffer — enough to feel like a real
+      // sheet, tight enough that the scrollbars stay proportional and there aren't
+      // rows/columns of empty grid to scroll past.
+      row: Math.max(rowCount + 8, 24),
+      column: Math.max(colCount + 2, 10),
+      celldata,
+      config: { merge, columnlen, rowlen, borderInfo },
+      images: sheetImages(ws, media, columnlen, rowlen)
+    });
+  });
+  const { columns, rows } = flatten(wb.worksheets[0]);
+  return { sheets, columns, rows };
+}
+function cellVal(v) {
+  if (v == null) return "";
+  if (typeof v === "number" || typeof v === "string") return v;
+  if (typeof v === "object") {
+    if (v.result != null) return cellVal(v.result);
+    if (typeof v.text === "string") return v.text;
+    if (v instanceof Date) return v.toISOString().slice(0, 10);
+  }
+  return String(v);
+}
+function flatten(ws) {
+  if (!ws) return { columns: [], rows: [] };
+  const colCount = Math.max(ws.columnCount || 0, ws.actualColumnCount || 0);
+  const rowCount = Math.max(ws.rowCount || 0, ws.actualRowCount || 0);
+  const letter = (n) => {
+    let s = "";
+    while (n > 0) {
+      s = String.fromCharCode(65 + (n - 1) % 26) + s;
+      n = Math.floor((n - 1) / 26);
+    }
+    return s;
+  };
+  const read = (cell) => cellVal(cell.value != null ? cell.value : cell.master?.value ?? null);
+  const header = ws.getRow(1);
+  const seen = /* @__PURE__ */ new Map();
+  const columns = [];
+  for (let c = 1; c <= colCount; c++) {
+    let label = String(read(header.getCell(c))).trim() || letter(c);
+    const count = seen.get(label) ?? 0;
+    seen.set(label, count + 1);
+    columns.push({ key: count ? `${label} (${count + 1})` : label, label });
+  }
+  const rows = [];
+  for (let r = 2; r <= rowCount; r++) {
+    const row = ws.getRow(r);
+    const obj = {};
+    let has = false;
+    for (let c = 1; c <= colCount; c++) {
+      const v = read(row.getCell(c));
+      obj[columns[c - 1].key] = v;
+      if (v !== "") has = true;
+    }
+    if (has) rows.push(obj);
+  }
+  return { columns, rows };
+}
+// src/io/importers.ts
+var IMPORTABLE_EXTENSIONS = [".csv", ".md", ".markdown", ".txt", ".html", ".htm", ".json", ".xlsx"];
+var extensionOf = (name) => {
+  const dot = name.lastIndexOf(".");
+  return dot === -1 ? "" : name.slice(dot).toLowerCase();
+};
+var canImport = (file) => IMPORTABLE_EXTENSIONS.includes(extensionOf(file.name));
+var baseName = (name) => name.replace(/\.[^.]+$/, "");
+var slug = (name) => baseName(name).replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase() || "file";
+var importSeq = 0;
+var newId = (name) => `imp_${slug(name)}_${Date.now().toString(36)}${importSeq++}`;
+function toEvents(artifact2) {
+  const create = { type: "canvas.create", artifact: artifact2 };
+  const complete = { type: "canvas.status", id: artifact2.id, status: "complete" };
+  return [create, complete];
+}
+async function importFile(file) {
+  const ext = extensionOf(file.name);
+  const id = newId(file.name);
+  const title = baseName(file.name);
+  switch (ext) {
+    case ".csv": {
+      const data = parseCsv(await file.text());
+      return toEvents(artifact(id, "table", title, data));
+    }
+    case ".md":
+    case ".markdown":
+    case ".txt": {
+      const data = { format: "markdown", content: await file.text() };
+      return toEvents(artifact(id, "document", title, data));
+    }
+    case ".html":
+    case ".htm": {
+      const data = { html: await file.text() };
+      return toEvents(artifact(id, "html", title, data));
+    }
+    case ".json":
+      return importJson(await file.text(), id, title);
+    case ".xlsx": {
+      const { sheets, columns, rows } = await xlsxToSheets(await file.arrayBuffer(), () => loadOptional("exceljs", () => import('exceljs')));
+      return toEvents(artifact(id, "table", title, { columns, rows, sheet: sheets }));
+    }
+    default:
+      throw new Error(`Unsupported file type "${ext || file.name}". Supported: ${IMPORTABLE_EXTENSIONS.join(", ")}`);
+  }
+}
+function artifact(id, type, title, data) {
+  return { id, type, title, version: 1, status: "complete", data };
+}
+function importJson(text, id, title) {
+  let parsed;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    return toEvents(artifact(id, "document", title, { format: "markdown", content: text }));
+  }
+  if (parsed && typeof parsed === "object" && "type" in parsed && "data" in parsed) {
+    const a = parsed;
+    return toEvents({ ...a, id, version: 1, status: "complete" });
+  }
+  const content = "```json\n" + JSON.stringify(parsed, null, 2) + "\n```";
+  return toEvents(artifact(id, "document", title, { format: "markdown", content }));
+}
+function parseCsv(text) {
+  const rows = [];
+  let field = "";
+  let record = [];
+  let inQuotes = false;
+  const src = text.replace(/\r\n?/g, "\n");
+  for (let i = 0; i < src.length; i++) {
+    const ch = src[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (src[i + 1] === '"') {
+          field += '"';
+          i++;
+        } else inQuotes = false;
+      } else field += ch;
+    } else if (ch === '"') inQuotes = true;
+    else if (ch === ",") {
+      record.push(field);
+      field = "";
+    } else if (ch === "\n") {
+      record.push(field);
+      rows.push(record);
+      field = "";
+      record = [];
+    } else field += ch;
+  }
+  if (field !== "" || record.length) {
+    record.push(field);
+    rows.push(record);
+  }
+  const [header = [], ...body] = rows.filter((r) => r.length > 1 || r[0] !== "");
+  const columns = uniqueColumns(header.map((label, i) => label.trim() || `Column ${i + 1}`));
+  const dataRows = body.map((r) => {
+    const obj = {};
+    columns.forEach((c, i) => obj[c.key] = coerce(r[i] ?? ""));
+    return obj;
+  });
+  return { columns, rows: dataRows };
+}
+function uniqueColumns(labels) {
+  const seen = /* @__PURE__ */ new Map();
+  return labels.map((label) => {
+    const count = seen.get(label) ?? 0;
+    seen.set(label, count + 1);
+    return { key: count ? `${label} (${count + 1})` : label, label };
+  });
+}
+function coerce(raw) {
+  const t = raw.trim();
+  if (t === "") return raw;
+  const n = Number(t);
+  return Number.isFinite(n) && String(n) === t ? n : raw;
+}
+var DEVICES = [
+  { id: "desktop", label: "Desktop", width: "100%" },
+  { id: "tablet", label: "Tablet", width: "768px" },
+  { id: "mobile", label: "Mobile", width: "390px" }
+];
+var BLOCKS = [
+  { tag: "h2", label: "Heading" },
+  { tag: "p", label: "Text" },
+  { tag: "button", label: "Button" },
+  { tag: "img", label: "Image" },
+  { tag: "hr", label: "Divider" }
+];
+var TEMPLATES = {
+  hero: {
+    label: "Hero",
+    html: `<section style="padding:72px 24px;text-align:center;background:linear-gradient(180deg,#0b1020,#151a2e);color:#e6e8ef">
+  <h1 style="font-size:clamp(30px,5vw,52px);margin:0 0 14px;font-weight:800">Ship faster with confidence</h1>
+  <p style="font-size:18px;line-height:1.6;color:#9aa4b2;max-width:560px;margin:0 auto 28px">One clear sentence about the value you deliver to customers.</p>
+  <a href="#" style="display:inline-block;padding:13px 26px;background:#6366f1;color:#fff;border-radius:10px;text-decoration:none;font-weight:700">Get started free</a>
+</section>`
+  },
+  features: {
+    label: "Features",
+    html: `<section style="padding:56px 24px;background:#0b1020;color:#e6e8ef">
+  <div style="max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px">
+    <div style="background:#151a2e;border:1px solid #232a44;border-radius:14px;padding:24px"><h3 style="margin:0 0 8px;font-size:18px">Fast</h3><p style="margin:0;color:#9aa4b2;line-height:1.6">Explain this benefit in a sentence or two.</p></div>
+    <div style="background:#151a2e;border:1px solid #232a44;border-radius:14px;padding:24px"><h3 style="margin:0 0 8px;font-size:18px">Reliable</h3><p style="margin:0;color:#9aa4b2;line-height:1.6">Explain this benefit in a sentence or two.</p></div>
+    <div style="background:#151a2e;border:1px solid #232a44;border-radius:14px;padding:24px"><h3 style="margin:0 0 8px;font-size:18px">Secure</h3><p style="margin:0;color:#9aa4b2;line-height:1.6">Explain this benefit in a sentence or two.</p></div>
+  </div>
+</section>`
+  },
+  cta: {
+    label: "Call to action",
+    html: `<section style="margin:24px;padding:48px 24px;text-align:center;background:#6366f1;color:#fff;border-radius:16px">
+  <h2 style="margin:0 0 10px;font-size:26px">Ready to get started?</h2>
+  <p style="margin:0 0 22px;opacity:.9">Join thousands of teams already building with us.</p>
+  <a href="#" style="display:inline-block;padding:12px 24px;background:#fff;color:#4338ca;border-radius:10px;text-decoration:none;font-weight:700">Sign up</a>
+</section>`
+  }
+};
+function HtmlRenderer({ artifact: artifact2 }) {
+  const iframeRef = useRef(null);
+  const imgFileRef = useRef(null);
+  const api = useCanvasStoreApi();
+  const setSelections = useCanvasStore((s) => s.setSelections);
+  const applyEvent = useCanvasStore((s) => s.applyUserEvent);
+  const sendIframeCommand = useCanvasStore((s) => s.sendIframeCommand);
+  const selections = useCanvasStore((s) => s.selections);
+  const iframeCommand = useCanvasStore((s) => s.iframeCommand);
+  const [device, setDevice] = useState("desktop");
+  const [mode, setMode] = useState("design");
+  const lastSelfHtml = useRef(null);
+  const srcDocRef = useRef("");
+  const srcDoc = useMemo(() => {
+    if (artifact2.data.html === lastSelfHtml.current) return srcDocRef.current;
+    srcDocRef.current = withInspector(artifact2.data.html);
+    return srcDocRef.current;
+  }, [artifact2.data.html]);
+  const selected = selections.filter((s) => s.artifactId === artifact2.id);
+  const single = selected.length === 1 ? selected[0] : null;
+  useEffect(() => {
+    function onMessage(event) {
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      const data = event.data;
+      if (data?.source !== INSPECTOR_MARK) return;
+      if (data.type === "select") {
+        setSelections([
+          { artifactId: artifact2.id, cid: data.cid, selector: data.selector, tag: data.tag, text: data.text, outerHtml: data.outerHtml, styles: data.styles, isGroup: data.isGroup }
+        ]);
+      } else if (data.type === "multi_select") {
+        setSelections(
+          (data.items ?? []).map((it) => ({
+            artifactId: artifact2.id,
+            cid: it.cid,
+            selector: it.selector,
+            tag: it.tag,
+            text: it.text,
+            outerHtml: it.outerHtml
+          }))
+        );
+      } else if (data.type === "node_edit") {
+        applyEvent({ type: "canvas.node_patch", id: artifact2.id, cid: data.cid, html: data.html });
+        lastSelfHtml.current = api.getState().canvas.artifacts[artifact2.id]?.data?.html ?? null;
+      } else if (data.type === "doc_edit") {
+        applyEvent({ type: "canvas.patch", id: artifact2.id, patch: { html: data.html } });
+        if (data.self) {
+          lastSelfHtml.current = api.getState().canvas.artifacts[artifact2.id]?.data?.html ?? null;
+        } else {
+          setSelections([]);
+        }
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [artifact2.id, setSelections, applyEvent, api]);
+  useEffect(() => {
+    if (!selected.length) {
+      iframeRef.current?.contentWindow?.postMessage({ source: INSPECTOR_MARK, type: "clear" }, "*");
+    }
+  }, [selected.length]);
+  useEffect(() => {
+    if (!iframeCommand || iframeCommand.artifactId !== artifact2.id) return;
+    iframeRef.current?.contentWindow?.postMessage({ source: INSPECTOR_MARK, ...iframeCommand }, "*");
+  }, [iframeCommand, artifact2.id]);
+  const command = (type, extra = {}) => sendIframeCommand({ artifactId: artifact2.id, type, cid: single?.cid, ...extra });
+  const commitCode = (html) => {
+    if (html !== artifact2.data.html) applyEvent({ type: "canvas.patch", id: artifact2.id, patch: { html } });
+  };
+  const onImgFile = (file) => {
+    if (!file || !single) return;
+    const reader = new FileReader();
+    reader.onload = () => sendIframeCommand({ artifactId: artifact2.id, type: "set_src", cid: single.cid, value: String(reader.result) });
+    reader.readAsDataURL(file);
+  };
+  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]);
+      e.target.value = "";
+    } }),
+    /* @__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" }),
+        /* @__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(
+          "select",
+          {
+            className: "cv-html-tpl",
+            value: "",
+            title: "Insert a section template",
+            onChange: (e) => {
+              const t = TEMPLATES[e.target.value];
+              if (t) sendIframeCommand({ artifactId: artifact2.id, type: "insert_html", cid: single?.cid, html: t.html });
+              e.currentTarget.value = "";
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Section\u2026" }),
+              Object.entries(TEMPLATES).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
+            ]
+          }
+        ),
+        selected.length >= 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "cv-html-bar__sep" }),
+          /* @__PURE__ */ jsx("span", { className: "cv-html-bar__label", children: "Selection" }),
+          single?.isGroup ? /* @__PURE__ */ jsx("button", { className: "cv-html-actbtn", onClick: () => command("ungroup"), children: "\u229F Ungroup" }) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "cv-html-actbtn",
+              disabled: selected.length < 2,
+              title: selected.length < 2 ? "Select 2+ elements (Shift-click, or drag a box) to group" : "Group \u2014 they'll move together",
+              onClick: () => sendIframeCommand({ artifactId: artifact2.id, type: "group", cids: selected.map((s) => s.cid) }),
+              children: "\u229E Group"
+            }
+          ),
+          single?.tag === "img" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("button", { className: "cv-html-add", onClick: () => imgFileRef.current?.click(), children: "\u{1F5BC} Upload" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "cv-html-add",
+                onClick: () => {
+                  const url = window.prompt("Image URL");
+                  if (url && single) sendIframeCommand({ artifactId: artifact2.id, type: "set_src", cid: single.cid, value: url });
+                },
+                children: "\u{1F517} URL"
+              }
+            )
+          ] }),
+          single && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Duplicate", onClick: () => command("duplicate"), children: "\u29C9" }),
+            /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Move up", onClick: () => command("move_up"), children: "\u2191" }),
+            /* @__PURE__ */ jsx("button", { className: "cv-html-act", title: "Move down", onClick: () => command("move_down"), children: "\u2193" }),
+            /* @__PURE__ */ jsx("button", { className: "cv-html-act cv-html-act--del", title: "Delete", onClick: () => command("delete"), children: "\u{1F5D1}" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "cv-html-bar__spacer" }),
+      /* @__PURE__ */ jsxs("div", { className: "cv-html-seg", role: "group", "aria-label": "View mode", children: [
+        /* @__PURE__ */ jsx("button", { className: mode === "design" ? "is-on" : "", onClick: () => setMode("design"), children: "Design" }),
+        /* @__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(
+      "iframe",
+      {
+        ref: iframeRef,
+        className: "cv-html",
+        title: artifact2.title,
+        srcDoc,
+        sandbox: "allow-scripts allow-popups allow-modals",
+        style: { width: DEVICES.find((d) => d.id === device).width }
+      }
+    ) }) : /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "cv-html-code",
+        defaultValue: artifact2.data.html,
+        spellCheck: false,
+        onBlur: (e) => commitCode(e.target.value),
+        "aria-label": "HTML source"
+      },
+      artifact2.data.html
+    )
+  ] });
+}
+// src/components/renderers/index.ts
+var ChartRenderer = lazy(() => import('./ChartRenderer-CKCJ2LQX.js').then((m) => ({ default: m.ChartRenderer })));
+var DocumentRenderer = lazy(() => import('./DocumentRenderer-7HP3YQUK.js').then((m) => ({ default: m.DocumentRenderer })));
+var TableRenderer = lazy(() => import('./TableRenderer-TRYSMQA7.js').then((m) => ({ default: m.TableRenderer })));
+var SlidesRenderer = lazy(() => import('./SlidesRenderer-KFSPD63I.js').then((m) => ({ default: m.SlidesRenderer })));
+var builtinRenderers = {
+  html: HtmlRenderer,
+  document: DocumentRenderer,
+  chart: ChartRenderer,
+  table: TableRenderer,
+  slides: SlidesRenderer
+};
+// src/export/download.ts
+function downloadBlob(filename, mime, content) {
+  const blob = new Blob([content], { type: `${mime};charset=utf-8` });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
+function slugify(text) {
+  return text.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "artifact";
+}
+// src/export/exporters.ts
+var MIME = {
+  md: "text/markdown",
+  csv: "text/csv",
+  json: "application/json",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+};
+var dataExporters = {
+  document: [
+    { label: "Markdown", extension: "md", mime: MIME.md, build: (a) => a.data.content },
+    { label: "Word", extension: "docx", mime: MIME.docx, build: (a) => documentToDocx(a.data) }
+  ],
+  table: [
+    { label: "CSV", extension: "csv", mime: MIME.csv, build: (a) => tableToCsv(a.data) },
+    { label: "Excel", extension: "xlsx", mime: MIME.xlsx, build: (a) => tableToXlsx(a.data) }
+  ],
+  chart: [
+    { 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) }
+  ]
+};
+function toStandaloneHtml(title, renderedHtml) {
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${escapeHtml(title)}</title>
+<style>${EXPORT_CSS}</style>
+</head>
+<body>
+<main class="export">
+${renderedHtml}
+</main>
+</body>
+</html>`;
+}
+function tableToCsv(data) {
+  const header = data.columns.map((c) => csvCell(c.label ?? c.key)).join(",");
+  const body = data.rows.map((row) => data.columns.map((c) => csvCell(String(row[c.key] ?? ""))).join(",")).join("\n");
+  return `${header}
+${body}`;
+}
+async function tableToXlsx(data) {
+  const { Workbook } = await loadOptional("exceljs", () => import('exceljs'));
+  const workbook = new Workbook();
+  if (data.sheet?.length) {
+    fortuneToWorkbook(workbook, data.sheet);
+  } else {
+    const sheet = workbook.addWorksheet("Sheet1");
+    sheet.addRow(data.columns.map((c) => c.label ?? c.key));
+    for (const row of data.rows) sheet.addRow(data.columns.map((c) => row[c.key] ?? ""));
+    sheet.getRow(1).font = { bold: true };
+  }
+  return workbook.xlsx.writeBuffer();
+}
+function fortuneToWorkbook(workbook, sheets) {
+  const align = ["center", "left", "right"];
+  for (const s of sheets) {
+    const ws = workbook.addWorksheet(String(s.name ?? "Sheet1"));
+    for (const cell of s.celldata ?? []) {
+      const v = cell.v;
+      const value = v && typeof v === "object" ? v.v ?? v.m ?? null : v;
+      const xc = ws.getCell(cell.r + 1, cell.c + 1);
+      xc.value = value;
+      if (v && typeof v === "object") {
+        if (v.bl) xc.font = { ...xc.font, bold: true };
+        if (v.it) xc.font = { ...xc.font, italic: true };
+        if (v.fc) xc.font = { ...xc.font, color: { argb: hexToArgb(v.fc) } };
+        if (v.bg) xc.fill = { type: "pattern", pattern: "solid", fgColor: { argb: hexToArgb(v.bg) } };
+        if (typeof v.ht === "number" && align[v.ht]) xc.alignment = { ...xc.alignment, horizontal: align[v.ht] };
+      }
+    }
+    const merge = s.config?.merge ?? {};
+    for (const key of Object.keys(merge)) {
+      const m = merge[key];
+      try {
+        ws.mergeCells(m.r + 1, m.c + 1, m.r + m.rs, m.c + m.cs);
+      } catch {
+      }
+    }
+  }
+}
+function hexToArgb(hex) {
+  const h = String(hex).replace("#", "");
+  const full = h.length === 3 ? h.split("").map((x) => x + x).join("") : h;
+  return ("FF" + full).toUpperCase();
+}
+async function documentToDocx(data) {
+  const { Document, Packer, Paragraph, HeadingLevel } = await loadOptional("docx", () => import('docx'));
+  const paragraphs = data.content.split("\n").map((line) => {
+    const heading = line.match(/^(#{1,3})\s+(.*)$/);
+    if (heading) {
+      const level = [HeadingLevel.HEADING_1, HeadingLevel.HEADING_2, HeadingLevel.HEADING_3][heading[1].length - 1];
+      return new Paragraph({ text: heading[2], heading: level });
+    }
+    const bullet = line.match(/^[-*]\s+(.*)$/);
+    if (bullet) return new Paragraph({ text: bullet[1], bullet: { level: 0 } });
+    return new Paragraph({ text: line });
+  });
+  const doc = new Document({ sections: [{ children: paragraphs }] });
+  return Packer.toBlob(doc);
+}
+async function slidesToPptx(data, _title) {
+  const PptxGenJS = (await loadOptional("pptxgenjs", () => import('pptxgenjs'))).default;
+  const pptx = new PptxGenJS();
+  const W = 10;
+  const H = 5.625;
+  for (const slide of data.slides) {
+    const s = pptx.addSlide();
+    if (slide.background) s.background = { color: slide.background.replace("#", "") };
+    const tc = slide.textColor ? slide.textColor.replace("#", "") : void 0;
+    for (const el of resolveElements(slide)) {
+      const box = { x: el.x / 100 * W, y: el.y / 100 * H, w: el.w / 100 * W, h: el.h / 100 * H };
+      if (el.type === "text") {
+        const color = el.color ? el.color.replace("#", "") : tc;
+        s.addText(el.text ?? "", { ...box, fontSize: (el.fontSize ?? 24) * 0.75, bold: !!el.bold, align: el.align ?? "left", ...color ? { color } : {} });
+      } else if (el.src) {
+        s.addImage({ data: el.src, ...box, sizing: { type: "contain", w: box.w, h: box.h } });
+      }
+    }
+    if (slide.notes) s.addNotes(slide.notes);
+  }
+  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) => {
+    const bg = slide.background ?? "#ffffff";
+    const fg = slide.textColor ?? "#1f2328";
+    const els = resolveElements(slide).map((el) => {
+      const box = `left:${el.x}%;top:${el.y}%;width:${el.w}%;height:${el.h}%`;
+      if (el.type === "text") {
+        const style = `${box};font-size:${(el.fontSize ?? 24) / 7.2}vw;font-weight:${el.bold ? 700 : 400};color:${escapeAttr(el.color ?? fg)};text-align:${escapeAttr(el.align ?? "left")}`;
+        return `<div class="el" style="${style}">${escapeXml(el.text ?? "")}</div>`;
+      }
+      const src = safeSrc(el.src);
+      return src ? `<img class="el" style="${box}" src="${escapeAttr(src)}"/>` : "";
+    }).join("");
+    return `<section class="slide" style="background:${escapeAttr(bg)}">${els}</section>`;
+  }).join("");
+  return `<!doctype html><html><head><meta charset="utf-8"><title>${escapeXml(title)}</title><style>
+    @page { size: 1280px 720px; margin: 0; }
+    * { margin: 0; box-sizing: border-box; }
+    body { font-family: Inter, Arial, sans-serif; }
+    .slide { position: relative; width: 1280px; height: 720px; overflow: hidden; page-break-after: always; }
+    .el { position: absolute; overflow: hidden; line-height: 1.25; }
+    img.el { object-fit: contain; }
+  </style></head><body>${pages}</body></html>`;
+}
+function escapeXml(value) {
+  return String(value ?? "").replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
+}
+function escapeAttr(value) {
+  return String(value ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+}
+function safeSrc(src) {
+  const s = (src ?? "").trim();
+  return /^(data:image\/|https?:\/\/|\/)/i.test(s) ? s : "";
+}
+function csvCell(value) {
+  return /[",\n]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
+}
+function escapeHtml(text) {
+  return text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+var EXPORT_CSS = `
+:root { color-scheme: light dark; }
+body { margin: 0; background: #fff; color: #1f2328;
+  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+.export { max-width: 760px; margin: 48px auto; padding: 0 24px; }
+h1,h2,h3 { line-height: 1.25; }
+pre { background: #f6f8fa; padding: 14px 16px; border-radius: 10px; overflow-x: auto; }
+code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }
+table { border-collapse: collapse; width: 100%; }
+th, td { border: 1px solid #e5e7eb; padding: 8px 12px; text-align: left; }
+th { background: #f6f8fa; }
+svg { max-width: 100%; height: auto; }
+`.trim();
+// src/export/pdf.ts
+function printToPdf(html) {
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("aria-hidden", "true");
+  iframe.setAttribute("sandbox", "allow-same-origin allow-modals");
+  Object.assign(iframe.style, { position: "fixed", right: "0", bottom: "0", width: "0", height: "0", border: "0" });
+  const cleanup = () => setTimeout(() => iframe.remove(), 1e3);
+  iframe.onload = () => {
+    const win = iframe.contentWindow;
+    if (!win) {
+      iframe.remove();
+      return;
+    }
+    win.addEventListener("afterprint", cleanup);
+    setTimeout(() => {
+      try {
+        win.focus();
+        win.print();
+      } catch {
+        iframe.remove();
+      }
+    }, 200);
+  };
+  iframe.srcdoc = html;
+  document.body.appendChild(iframe);
+}
+var PDF_TYPES = /* @__PURE__ */ new Set(["html", "document", "chart", "slides"]);
+function ExportMenu({ artifact: artifact2, getRenderedHtml }) {
+  const [open, setOpen] = useState(false);
+  const stem = slugify(artifact2.title);
+  const dataOptions = dataExporters[artifact2.type] ?? [];
+  const exportHtml = () => {
+    if (artifact2.type === "html") {
+      downloadBlob(`${stem}.html`, "text/html", artifact2.data.html);
+    } else {
+      const html = getRenderedHtml();
+      if (html == null) return;
+      downloadBlob(`${stem}.html`, "text/html", toStandaloneHtml(artifact2.title, html));
+    }
+    setOpen(false);
+  };
+  const exportData = async (option) => {
+    const content = await option.build(artifact2);
+    downloadBlob(`${stem}.${option.extension}`, option.mime, content);
+    setOpen(false);
+  };
+  const exportPdf = () => {
+    if (artifact2.type === "slides") {
+      printToPdf(slidesToPrintHtml(artifact2.data, artifact2.title));
+    } else if (artifact2.type === "html") {
+      printToPdf(artifact2.data.html);
+    } else {
+      const html = getRenderedHtml();
+      if (html == null) return;
+      printToPdf(toStandaloneHtml(artifact2.title, html));
+    }
+    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",
+      {
+        className: "cv-export__btn",
+        onClick: () => setOpen((o) => !o),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        children: "Export \u25BE"
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "cv-export__scrim", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxs("div", { className: "cv-export__menu", role: "menu", children: [
+        /* @__PURE__ */ jsxs("button", { role: "menuitem", onClick: exportHtml, children: [
+          "HTML ",
+          /* @__PURE__ */ jsx("span", { className: "cv-export__ext", children: ".html" })
+        ] }),
+        PDF_TYPES.has(artifact2.type) && /* @__PURE__ */ jsxs("button", { role: "menuitem", onClick: exportPdf, children: [
+          "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,
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "cv-export__ext", children: [
+            ".",
+            option.extension
+          ] })
+        ] }, option.extension))
+      ] })
+    ] })
+  ] });
+}
+var RendererBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidUpdate(prev) {
+    if (prev.resetKey !== this.props.resetKey && this.state.error) {
+      this.setState({ error: null });
+    }
+  }
+  componentDidCatch(error, info) {
+    console.error("[langchain-canvas] renderer error:", error, info.componentStack);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsxs("div", { className: "cv-renderer-error", role: "alert", children: [
+        /* @__PURE__ */ jsx("p", { className: "cv-renderer-error__title", children: "This artifact couldn\u2019t be displayed" }),
+        /* @__PURE__ */ jsx("p", { className: "cv-renderer-error__detail", children: this.state.error.message })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+function SelectionBar({ selections, onEdit, onClear }) {
+  const [instruction, setInstruction] = useState("");
+  const primary = selections[0];
+  const label = selections.length === 1 ? primary.selector : `${selections.length} elements`;
+  const submit = () => {
+    const text = instruction.trim();
+    if (!text) return;
+    onEdit(text);
+    setInstruction("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cv-selection", children: [
+    /* @__PURE__ */ jsx("span", { className: "cv-selection__chip", title: primary?.text, children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "cv-selection__input",
+        value: instruction,
+        placeholder: selections.length === 1 ? `Edit this ${primary.tag}\u2026` : `Edit ${selections.length} elements\u2026`,
+        autoFocus: true,
+        onChange: (e) => setInstruction(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") submit();
+          if (e.key === "Escape") onClear();
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { className: "cv-selection__apply", onClick: submit, disabled: !instruction.trim(), children: "Apply" }),
+    /* @__PURE__ */ jsx("button", { className: "cv-selection__clear", onClick: onClear, "aria-label": "Clear selection", children: "\u2715" })
+  ] });
+}
+var WEIGHTS = ["400", "500", "600", "700"];
+var ALIGNMENTS = ["left", "center", "right", "justify"];
+var GRADIENTS = [
+  "linear-gradient(135deg,#667eea,#764ba2)",
+  "linear-gradient(135deg,#f093fb,#f5576c)",
+  "linear-gradient(135deg,#4facfe,#00f2fe)",
+  "linear-gradient(135deg,#43e97b,#38f9d7)",
+  "linear-gradient(135deg,#fa709a,#fee140)"
+];
+function StylePanel({ selection }) {
+  const send = useCanvasStore((s) => s.sendIframeCommand);
+  const setSelections = useCanvasStore((s) => s.setSelections);
+  const styles = selection.styles ?? {};
+  const [color, setColor] = useState(toHex2(styles.color));
+  const [background, setBackground] = useState(toHex2(styles.backgroundColor));
+  const [fontSize, setFontSize] = useState(px(styles.fontSize, 16));
+  const [fontWeight, setFontWeight] = useState(String(styles.fontWeight ?? "400"));
+  const [textAlign, setTextAlign] = useState(styles.textAlign ?? "left");
+  const [lineHeight, setLineHeight] = useState(px(styles.lineHeight, 0));
+  const [letterSpacing, setLetterSpacing] = useState(px(styles.letterSpacing, 0));
+  const [padding, setPadding] = useState(px(styles.padding, 0));
+  const [radius, setRadius] = useState(px(styles.borderRadius, 0));
+  const [width, setWidth] = useState(px(styles.width, 0));
+  const bgFileRef = useRef(null);
+  const dirty = useRef(false);
+  const setStyle = (prop, value) => {
+    dirty.current = true;
+    send({ artifactId: selection.artifactId, type: "set_style", cid: selection.cid, prop, value });
+  };
+  const setBg = (value) => setStyle("background", value);
+  const onBgFile = (file) => {
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => setBg(`url(${String(reader.result)}) center/cover no-repeat`);
+    reader.readAsDataURL(file);
+  };
+  const commit = () => {
+    if (!dirty.current) return;
+    dirty.current = false;
+    send({ artifactId: selection.artifactId, type: "commit", cid: selection.cid });
+  };
+  const close = () => {
+    commit();
+    setSelections([]);
+  };
+  useEffect(() => commit, []);
+  return /* @__PURE__ */ jsxs("div", { className: "cv-style", onBlur: commit, children: [
+    /* @__PURE__ */ jsx("div", { className: "cv-style__title", children: "Style" }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Text" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: color,
+          onChange: (e) => {
+            setColor(e.target.value);
+            setStyle("color", e.target.value);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Background" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: background,
+          onChange: (e) => {
+            setBackground(e.target.value);
+            setStyle("backgroundColor", e.target.value);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Size" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 8,
+          max: 96,
+          value: fontSize,
+          onChange: (e) => {
+            const next = Number(e.target.value);
+            setFontSize(next);
+            setStyle("fontSize", `${next}px`);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Weight" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: fontWeight,
+          onChange: (e) => {
+            setFontWeight(e.target.value);
+            setStyle("fontWeight", e.target.value);
+          },
+          children: WEIGHTS.map((w) => /* @__PURE__ */ jsx("option", { value: w, children: w }, w))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Align" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          value: textAlign,
+          onChange: (e) => {
+            setTextAlign(e.target.value);
+            setStyle("textAlign", e.target.value);
+          },
+          children: ALIGNMENTS.map((a) => /* @__PURE__ */ jsx("option", { value: a, children: a }, a))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Line height" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          max: 4,
+          step: 0.1,
+          value: lineHeight,
+          onChange: (e) => {
+            const n = Number(e.target.value);
+            setLineHeight(n);
+            setStyle("lineHeight", n ? `${n}` : "normal");
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Letter spacing" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: -5,
+          max: 20,
+          step: 0.5,
+          value: letterSpacing,
+          onChange: (e) => {
+            const n = Number(e.target.value);
+            setLetterSpacing(n);
+            setStyle("letterSpacing", `${n}px`);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Padding" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          max: 120,
+          value: padding,
+          onChange: (e) => {
+            const n = Number(e.target.value);
+            setPadding(n);
+            setStyle("padding", `${n}px`);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Radius" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          max: 80,
+          value: radius,
+          onChange: (e) => {
+            const n = Number(e.target.value);
+            setRadius(n);
+            setStyle("borderRadius", `${n}px`);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("label", { className: "cv-style__row", children: [
+      /* @__PURE__ */ jsx("span", { children: "Width" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "number",
+          min: 0,
+          max: 2e3,
+          value: width,
+          onChange: (e) => {
+            const n = Number(e.target.value);
+            setWidth(n);
+            setStyle("width", n ? `${n}px` : "auto");
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "cv-style__bg", children: [
+      /* @__PURE__ */ jsx("span", { children: "Background" }),
+      /* @__PURE__ */ jsxs("div", { className: "cv-style__grads", children: [
+        GRADIENTS.map((g) => /* @__PURE__ */ jsx("button", { type: "button", className: "cv-style__grad", style: { backgroundImage: g }, title: "Gradient", onClick: () => setBg(g) }, g)),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-style__grad cv-style__grad--img", title: "Background image", onClick: () => bgFileRef.current?.click(), children: "\u{1F5BC}" }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-style__grad cv-style__grad--none", title: "Solid color (clear image)", onClick: () => {
+          setBackground(background);
+          setBg(background);
+        }, children: "\u2300" })
+      ] }),
+      /* @__PURE__ */ jsx("input", { ref: bgFileRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => {
+        onBgFile(e.target.files?.[0]);
+        e.target.value = "";
+      } })
+    ] }),
+    /* @__PURE__ */ jsx("button", { className: "cv-style__done", onClick: close, children: "Done" })
+  ] });
+}
+function px(value, fallback) {
+  if (!value) return fallback;
+  const n = parseFloat(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+function toHex2(value) {
+  if (!value) return "#000000";
+  if (value.startsWith("#")) return value;
+  const parts = value.match(/\d+/g);
+  if (!parts || parts.length < 3) return "#000000";
+  return "#" + parts.slice(0, 3).map((n) => Number(n).toString(16).padStart(2, "0")).join("");
+}
+function useCanvasImport() {
+  const api = useCanvasStoreApi();
+  const importFiles = useCallback(
+    async (files) => {
+      let lastId = null;
+      for (const file of files) {
+        if (!canImport(file)) continue;
+        try {
+          const events = await importFile(file);
+          api.getState().applyEvents(events);
+          const created = events.find((e) => e.type === "canvas.create");
+          if (created && created.type === "canvas.create") {
+            lastId = created.artifact.id;
+            api.getState().setActiveArtifact(lastId);
+          }
+        } catch (err) {
+          console.error("[langchain-canvas] import failed:", file.name, err);
+        }
+      }
+      return lastId;
+    },
+    [api]
+  );
+  return { importFiles, canImport };
+}
+var ACCEPT = IMPORTABLE_EXTENSIONS.join(",");
+function Canvas({ registry = builtinRenderers, emptyState, onEditElement }) {
+  return /* @__PURE__ */ jsx(CanvasRegistryProvider, { registry, children: /* @__PURE__ */ jsx(CanvasPanel, { emptyState, onEditElement }) });
+}
+function CanvasPanel({ emptyState, onEditElement }) {
+  const { artifacts, order, activeId } = useCanvasStore((s) => s.canvas);
+  const history = useCanvasStore((s) => s.canvas.history);
+  const setActive = useCanvasStore((s) => s.setActiveArtifact);
+  const selections = useCanvasStore((s) => s.selections);
+  const setSelections = useCanvasStore((s) => s.setSelections);
+  const { importFiles } = useCanvasImport();
+  const [dropping, setDropping] = useState(false);
+  useEffect(() => {
+    if (!selections.length) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setSelections([]);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [selections.length, setSelections]);
+  const active = activeId ? artifacts[activeId] : void 0;
+  const dropProps = {
+    onDragOver: (e) => {
+      if (Array.from(e.dataTransfer.types).includes("Files")) {
+        e.preventDefault();
+        setDropping(true);
+      }
+    },
+    onDragLeave: (e) => {
+      if (e.currentTarget === e.target) setDropping(false);
+    },
+    onDrop: (e) => {
+      e.preventDefault();
+      setDropping(false);
+      if (e.dataTransfer.files.length) void importFiles(e.dataTransfer.files);
+    }
+  };
+  const dropOverlay = dropping ? /* @__PURE__ */ jsx("div", { className: "cv-canvas__drop", children: "Drop to open on the canvas" }) : null;
+  if (!active) {
+    return /* @__PURE__ */ jsxs("aside", { className: "cv-canvas cv-canvas--empty", ...dropProps, children: [
+      emptyState ?? /* @__PURE__ */ jsx(EmptyState, { onOpenFiles: importFiles }),
+      dropOverlay
+    ] });
+  }
+  const versions = history[active.id] ?? [active];
+  const showSelection = Boolean(onEditElement) && selections.length > 0 && selections[0].artifactId === active.id;
+  return /* @__PURE__ */ jsxs("aside", { className: "cv-canvas", ...dropProps, children: [
+    dropOverlay,
+    order.length > 1 && /* @__PURE__ */ jsx("nav", { className: "cv-tabs", role: "tablist", children: order.map((id) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": id === activeId,
+        className: `cv-tab ${id === activeId ? "is-active" : ""}`,
+        onClick: () => setActive(id),
+        children: artifacts[id].title
+      },
+      id
+    )) }),
+    /* @__PURE__ */ jsx(ArtifactView, { artifact: active, versions }, active.id),
+    showSelection && onEditElement && /* @__PURE__ */ jsxs(Fragment, { children: [
+      active.type === "html" && selections.length === 1 && /* @__PURE__ */ jsx(StylePanel, { selection: selections[0] }, selections[0].cid),
+      /* @__PURE__ */ jsx(SelectionBar, { selections, onEdit: onEditElement, onClear: () => setSelections([]) })
+    ] })
+  ] });
+}
+function ArtifactView({ artifact: artifact2, versions }) {
+  const [viewIndex, setViewIndex] = useState(null);
+  const bodyRef = useRef(null);
+  const shown = viewIndex === null ? artifact2 : versions[viewIndex];
+  const Renderer = useRenderer(shown.type);
+  const getRenderedHtml = () => {
+    const node = bodyRef.current;
+    if (!node) return null;
+    const clone = node.cloneNode(true);
+    clone.querySelectorAll(".cv-edit-toolbar, .cv-slides__nav, .cv-selection, .cv-style, .cv-chrome").forEach((el) => el.remove());
+    clone.querySelectorAll("[contenteditable]").forEach((el) => el.removeAttribute("contenteditable"));
+    return clone.innerHTML;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { className: "cv-header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cv-header__title", children: [
+        /* @__PURE__ */ jsx("h2", { children: shown.title }),
+        /* @__PURE__ */ jsx(StatusBadge, { status: shown.status })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "cv-header__actions", children: [
+        /* @__PURE__ */ jsx(UndoRedo, {}),
+        versions.length > 1 && /* @__PURE__ */ jsx(
+          VersionRail,
+          {
+            total: versions.length,
+            index: viewIndex ?? versions.length - 1,
+            onSelect: (i) => setViewIndex(i === versions.length - 1 ? null : i)
+          }
+        ),
+        /* @__PURE__ */ jsx(ExportMenu, { artifact: shown, getRenderedHtml })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `cv-body${shown.type === "table" ? " cv-body--flush" : ""}`, ref: bodyRef, children: Renderer ? /* @__PURE__ */ jsx(RendererBoundary, { resetKey: `${shown.id}:${shown.version}`, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { className: "cv-fallback", children: "Loading\u2026" }), children: /* @__PURE__ */ jsx(Renderer, { artifact: shown }) }) }) : /* @__PURE__ */ jsxs("div", { className: "cv-fallback", children: [
+      "No renderer registered for type \u201C",
+      shown.type,
+      "\u201D."
+    ] }) })
+  ] });
+}
+function UndoRedo() {
+  const undo = useCanvasStore((s) => s.undo);
+  const redo = useCanvasStore((s) => s.redo);
+  const canUndo = useCanvasStore((s) => s.undoStack.length > 0);
+  const canRedo = useCanvasStore((s) => s.redoStack.length > 0);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (!(e.metaKey || e.ctrlKey)) return;
+      const key = e.key.toLowerCase();
+      if (key !== "z" && key !== "y") return;
+      const ae = document.activeElement;
+      if (ae && (ae.tagName === "INPUT" || ae.tagName === "TEXTAREA" || ae.isContentEditable)) return;
+      e.preventDefault();
+      if (key === "y" || key === "z" && e.shiftKey) redo();
+      else undo();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [undo, redo]);
+  return /* @__PURE__ */ jsxs("div", { className: "cv-undo", role: "group", "aria-label": "Undo and redo", children: [
+    /* @__PURE__ */ jsx("button", { onClick: undo, disabled: !canUndo, title: "Undo (\u2318Z)", "aria-label": "Undo", children: "\u21B6" }),
+    /* @__PURE__ */ jsx("button", { onClick: redo, disabled: !canRedo, title: "Redo (\u2318\u21E7Z)", "aria-label": "Redo", children: "\u21B7" })
+  ] });
+}
+function VersionRail({ total, index, onSelect }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cv-versions", role: "group", "aria-label": "Version history", children: [
+    /* @__PURE__ */ jsx("button", { className: "cv-versions__nav", disabled: index === 0, onClick: () => onSelect(index - 1), "aria-label": "Previous version", children: "\u2039" }),
+    /* @__PURE__ */ jsxs("span", { className: "cv-versions__label", children: [
+      "v",
+      index + 1,
+      " / ",
+      total
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "cv-versions__nav",
+        disabled: index === total - 1,
+        onClick: () => onSelect(index + 1),
+        "aria-label": "Next version",
+        children: "\u203A"
+      }
+    )
+  ] });
+}
+function StatusBadge({ status }) {
+  const label = status === "streaming" ? "Writing\u2026" : status === "error" ? "Error" : "Ready";
+  return /* @__PURE__ */ jsx("span", { className: `cv-badge cv-badge--${status}`, children: label });
+}
+function EmptyState({ onOpenFiles }) {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: "cv-empty", children: [
+    /* @__PURE__ */ jsx("p", { className: "cv-empty__title", children: "Nothing on the canvas yet" }),
+    /* @__PURE__ */ jsx("p", { className: "cv-empty__hint", children: "Ask for a report or a chart \u2014 or open a file to edit it here." }),
+    onOpenFiles && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("button", { className: "cv-empty__open", onClick: () => inputRef.current?.click(), children: "Open file" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept: ACCEPT,
+          multiple: true,
+          hidden: true,
+          onChange: (e) => {
+            if (e.target.files?.length) onOpenFiles(e.target.files);
+            e.target.value = "";
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "cv-empty__formats", children: "CSV \xB7 Excel \xB7 Markdown \xB7 HTML \xB7 JSON" })
+    ] })
+  ] });
+}
+var 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" }
+};
+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 };
+  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: [
+      /* @__PURE__ */ jsx("b", { children: artifact2.title }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        meta.label,
+        " \xB7 ",
+        artifact2.status === "streaming" ? "writing\u2026" : "open \u2192"
+      ] })
+    ] })
+  ] });
+}
+export { ArtifactCard, Canvas, CanvasRegistryProvider, ChartRenderer, DocumentRenderer, ExportMenu, HtmlRenderer, IMPORTABLE_EXTENSIONS, INSPECTOR_MARK, STYLE_PROPS, SelectionBar, SlidesRenderer, StylePanel, TableRenderer, builtinRenderers, canImport, dataExporters, downloadBlob, importFile, mergeRegistries, mockStream, parseCsv, parseSSE, printToPdf, scenarios, slidesToPrintHtml, slugify, streamChat, toStandaloneHtml, useCanvasImport, useCanvasReplay, useCanvasStream, useRenderer, withInspector };