@braincrew-lab/langchain-canvas 0.2.0 → 0.4.9

package/dist/index.js

@@ -1,10 +1,14 @@
 "use client";
+import { projectSheetIntoRows, mergeRowsIntoSheet } from './chunk-IFNRLN4Y.js';
 import { loadOptional } from './chunk-YZZSJJMQ.js';
 import { resolveElements } from './chunk-6L3AL6W4.js';
-export { useArtifactPatch } from './chunk-UL5F66PN.js';
-import { useCanvasStoreApi, useCanvasStore } from './chunk-S54GJDSJ.js';
-export { CanvasProvider, createCanvasStore, emptyCanvasState, isCanvasEvent, isChatEvent, mergePatch, reduceCanvas, useCanvasStore, useCanvasStoreApi } from './chunk-S54GJDSJ.js';
-import { createContext, lazy, useRef, useCallback, useEffect, useContext, useState, useMemo, Suspense, Component } from 'react';
+export { useAssetUrl } from './chunk-FTNRRJ3K.js';
+import { inlineArtifactAssets, inlineHtmlAssets } from './chunk-7T5DRR3F.js';
+export { ASSET_REFERENCE_PREFIXES, fetchAssetDataUri, inlineArtifactAssets, inlineHtmlAssets, isAssetReference, normalizeAssetReference, resolveAssetUrl } from './chunk-7T5DRR3F.js';
+export { useArtifactPatch } from './chunk-K2UZAYW2.js';
+import { useCanvasStoreApi, useCanvasStore } from './chunk-EHW446VF.js';
+export { CanvasProvider, createCanvasStore, emptyCanvasState, isCanvasEvent, isChatEvent, mergePatch, reduceCanvas, useCanvasStore, useCanvasStoreApi } from './chunk-EHW446VF.js';
+import { createContext, lazy, useMemo, useRef, useCallback, useEffect, useContext, useState, Suspense, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/client/sse-client.ts
@@ -61,9 +65,10 @@ function parseFrame(frame) {
 
 // src/client/inspector.ts
 var INSPECTOR_MARK = "langchain-canvas";
-function withInspector(html) {
+function withInspector(html, assetBaseUrl) {
   let out = withViewport(html);
-  const injection = `<style data-lcx>${INSPECTOR_CSS}</style><script data-lcx>${INSPECTOR_SCRIPT}</script>`;
+  const config = assetBaseUrl ? `<script data-lcx>window.__LCX_ASSET_BASE=${JSON.stringify(assetBaseUrl)}</script>` : "";
+  const injection = `<style data-lcx>${INSPECTOR_CSS}</style>${config}<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);
@@ -131,6 +136,33 @@ var INSPECTOR_SCRIPT = `
     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");
+    // A display-resolved asset src goes back to its stored relative form.
+    var orig = el.getAttribute && el.getAttribute("data-lcx-src");
+    if (orig) { el.setAttribute("src", orig); el.removeAttribute("data-lcx-src"); }
+  }
+  // --- canvas-asset references: resolve for display, keep the source relative ---
+  var ASSET_BASE = window.__LCX_ASSET_BASE || "";
+  var ASSET_REF = /^(?:\\.\\.?\\/)*(?:assets|sources)\\//;
+  // Leading ./ and ../ fold onto the canvas root (assets/ and sources/ exist
+  // only there) \u2014 same lenient reading as canvasAssets.normalizeAssetReference.
+  function foldAssetRef(s) {
+    while (s.lastIndexOf("./", 0) === 0 || s.lastIndexOf("../", 0) === 0) {
+      s = s.lastIndexOf("./", 0) === 0 ? s.slice(2) : s.slice(3);
+    }
+    return s;
+  }
+  function rewriteAssetSrcs() {
+    if (!ASSET_BASE) return;
+    var imgs = document.querySelectorAll("img[src]");
+    for (var i = 0; i < imgs.length; i++) {
+      var el = imgs[i];
+      if (el.hasAttribute("data-lcx-src")) continue;
+      var src = el.getAttribute("src") || "";
+      if (ASSET_REF.test(src)) {
+        el.setAttribute("data-lcx-src", src);
+        el.setAttribute("src", ASSET_BASE + encodeURIComponent(foldAssetRef(src)));
+      }
+    }
   }
   function emitEdit(el) {
     // Serialize the *canonical* HTML \u2014 strip the inspector's own injected
@@ -138,7 +170,7 @@ var INSPECTOR_SCRIPT = `
     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") : [];
+    var inner = clone.querySelectorAll ? clone.querySelectorAll("[data-cid],[contenteditable],[data-lcx-src],.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 }, "*");
   }
@@ -153,51 +185,20 @@ var INSPECTOR_SCRIPT = `
     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");
+    var marked = clone.querySelectorAll("[data-cid],[contenteditable],[data-lcx-src],.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 }, "*");
   }
-  // Copy the visual style of an existing element onto a new block, so inserts
-  // match the page's own design system instead of landing as bare UA-styled
-  // tags (a default grey <button> on a dark page reads as broken).
-  function adoptStyleFrom(el, sample) {
-    if (!sample) return false;
-    var cs = window.getComputedStyle(sample);
-    var props = ["background-color", "color", "border", "border-radius", "padding",
-      "font-family", "font-size", "font-weight", "letter-spacing", "box-shadow", "cursor"];
-    for (var i = 0; i < props.length; i++) el.style.setProperty(props[i], cs.getPropertyValue(props[i]));
-    return true;
-  }
   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";
-      // Match an existing button (skipping editor chrome); else a clean accent default.
-      var sampleBtn = null;
-      var btns = document.querySelectorAll("button");
-      for (var sb = 0; sb < btns.length; sb++) {
-        if (!btns[sb].closest("[data-lcx]")) { sampleBtn = btns[sb]; break; }
-      }
-      if (!adoptStyleFrom(el, sampleBtn)) {
-        el.style.cssText = "padding:10px 18px;border:0;border-radius:9px;background:#6366f1;color:#fff;font:600 15px/1.2 inherit;cursor:pointer";
-      }
-    }
+    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";
-      // Headings/text adopt an existing peer's look too (font, colour) so they
-      // don't appear in default serif-black on a styled page.
-      adoptStyleFrom(el, document.querySelector(tag === "p" ? "main p, section p, div p" : tag));
-      el.style.removeProperty("border");
-      el.style.removeProperty("box-shadow");
-      el.style.removeProperty("cursor");
-      el.style.removeProperty("background-color");
-    }
+    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.
@@ -287,6 +288,15 @@ var INSPECTOR_SCRIPT = `
   }
   function start() {
     assign(document.body, "e");
+    // Resolve asset references now and after any change (insert_html, set_src,
+    // duplicate). Idempotent: rewritten images carry data-lcx-src and are
+    // skipped, so the observer settles after one pass.
+    rewriteAssetSrcs();
+    if (ASSET_BASE) {
+      new MutationObserver(rewriteAssetSrcs).observe(document.documentElement, {
+        subtree: true, childList: true, attributes: true, attributeFilter: ["src"]
+      });
+    }
     var hovered = null;
     var selected = [];               // currently highlighted elements
     var marquee = null, sx = 0, sy = 0, dragging = false, moved = false, suppressClick = false;
@@ -294,31 +304,16 @@ var INSPECTOR_SCRIPT = `
     // 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, parentMutated = false;
+    var dragEls = null, dragStart = null, dragBases = null, groupSeq = 0;
 
     function ensurePositioned(parent) {
-      if (!parent || parent === document.documentElement) return;
-      // body included: a static body makes absolute children resolve against the
-      // initial containing block (html), so a body margin or html padding shifts
-      // every free-dragged element \u2014 relative pins them to the body box itself.
-      if (window.getComputedStyle(parent).position === "static") {
-        parent.style.position = "relative";
-        parentMutated = true; // the parent must be persisted too, not just the child
-      }
-    }
-    // Persist a completed free-drag. A single element normally commits as a cheap
-    // node_edit \u2014 but when its parent was pulled to position:relative that parent
-    // lives only in the live DOM, so a node-only patch would store an absolute
-    // child inside a still-static parent (it jumps on the next reload). In that
-    // case persist the whole document instead.
-    function commitDrag(els) {
-      if (els.length === 1 && !parentMutated) emitEdit(els[0]); else emitDoc(true);
+      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 = [];
-      parentMutated = false;
       for (var i = 0; i < els.length; i++) {
         var el = els[i], parent = el.parentElement || document.body;
         ensurePositioned(parent);
@@ -341,16 +336,13 @@ var INSPECTOR_SCRIPT = `
     }
     // 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. The vertical axis is
-    // an exception: a container's *height* is content-driven and reflows once the
-    // dragged element leaves the flow, so a top stored as % of the old height
-    // lands somewhere else after reload \u2014 top always commits in 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 = Math.round(curTop) + "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) + "%";
       }
     }
@@ -507,8 +499,8 @@ var INSPECTOR_SCRIPT = `
           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 (or a repositioned parent) \u2192 a self-applied doc_edit.
-          commitDrag(els);
+          // several \u2192 a self-applied doc_edit.
+          if (els.length === 1) emitEdit(els[0]); else emitDoc(true);
         }
         dragBases = null;
         return;
@@ -559,7 +551,7 @@ var INSPECTOR_SCRIPT = `
         // 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(); commitDrag(els); }
+        if (moved && dragBases) { commitFree(); if (els.length === 1) emitEdit(els[0]); else emitDoc(true); }
         dragBases = null;
       }
       if (dragging) {
@@ -630,15 +622,20 @@ var INSPECTOR_SCRIPT = `
         if (root && d.style) { for (var sk in d.style) { try { root.style[sk] = d.style[sk]; } catch (_e) {} } emitDoc(); }
         return;
       }
-      if (d.type === "set_src") { var ei = byCid(d.cid); if (ei) { ei.setAttribute("src", d.value); emitEdit(ei); } return; }
+      if (d.type === "set_src") {
+        var ei = byCid(d.cid);
+        if (ei) {
+          // Drop stale asset bookkeeping first, or scrub would restore the old
+          // src over the new one. The observer re-resolves if the new value is
+          // itself an asset reference.
+          ei.removeAttribute("data-lcx-src");
+          ei.setAttribute("src", d.value);
+          emitEdit(ei);
+        }
+        return;
+      }
       if (d.type === "commit") { var el2 = byCid(d.cid); if (el2) emitEdit(el2); return; }
 
-      // No-selection inserts land in the slide root when there is one \u2014 a slide
-      // document is body > .slide-container (fixed 720px), so appending to body
-      // puts content below the visible slide where it silently never shows.
-      function insertRoot() {
-        return document.querySelector(".slide-container") || document.body;
-      }
       // Structural edits \u2014 mutate the tree, then persist the whole document.
       if (d.type === "insert") {
         var block = newBlock(d.block || "p");
@@ -646,7 +643,7 @@ var INSPECTOR_SCRIPT = `
         if (anchor && anchor.parentNode && anchor.parentNode !== document.documentElement) {
           anchor.parentNode.insertBefore(block, anchor.nextSibling);
         } else {
-          insertRoot().appendChild(block);
+          document.body.appendChild(block);
         }
         emitDoc();
         return;
@@ -654,7 +651,7 @@ var INSPECTOR_SCRIPT = `
       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 : insertRoot();
+        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 || "";
@@ -669,16 +666,7 @@ var INSPECTOR_SCRIPT = `
         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;
-        // Next free id is derived from the document, not a counter \u2014 the counter
-        // reset on every reload, so a second group session reused "g0" and merged
-        // with the previously-persisted group.
-        var maxGid = -1;
-        var existing = document.querySelectorAll("[data-group-id]");
-        for (var q = 0; q < existing.length; q++) {
-          var mm = /^g(d+)$/.exec(existing[q].getAttribute("data-group-id") || "");
-          if (mm && Number(mm[1]) > maxGid) maxGid = Number(mm[1]);
-        }
-        var gid = "g" + (maxGid + 1);
+        var gid = "g" + (groupSeq++);
         for (var w = 0; w < members.length; w++) members[w].setAttribute("data-group-id", gid);
         clearSelected();
         emitDoc();
@@ -735,8 +723,41 @@ async function* mockStream(events, options = {}) {
 function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
-function useCanvasStream(options = {}) {
+
+// src/transports/sse.ts
+function sseTransport(options = {}) {
   const endpoint = options.endpoint ?? "/api/chat";
+  return {
+    stream(request) {
+      const streamOptions = { signal: request.signal, headers: options.headers };
+      return streamChat(
+        endpoint,
+        { threadId: request.threadId, message: request.message, selections: request.selections },
+        streamOptions
+      );
+    }
+  };
+}
+
+// src/transports/mock.ts
+function mockTransport(script, fallback, options = {}) {
+  return {
+    stream(request) {
+      const events = script(request.message);
+      if (events) {
+        return mockStream(events, { delayMs: options.delayMs ?? 60, signal: request.signal });
+      }
+      if (fallback) return fallback.stream(request);
+      return mockStream([], { delayMs: 0 });
+    }
+  };
+}
+function useCanvasStream(options = {}) {
+  const { transport: customTransport, endpoint, mock } = options;
+  const transport = useMemo(() => {
+    const base = customTransport ?? sseTransport({ endpoint });
+    return mock ? mockTransport(mock, base) : base;
+  }, [customTransport, endpoint, mock]);
   const threadIdRef = useRef(options.threadId ?? crypto.randomUUID());
   const abortRef = useRef(null);
   const api = useCanvasStoreApi();
@@ -775,12 +796,12 @@ function useCanvasStream(options = {}) {
       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 }
-        );
+        const stream = transport.stream({
+          threadId: threadIdRef.current,
+          message: text,
+          selections: withSelections,
+          signal: controller.signal
+        });
         for await (const event of stream) {
           enqueue(event);
         }
@@ -793,7 +814,7 @@ function useCanvasStream(options = {}) {
         api.getState().setStreaming(false);
       }
     },
-    [api, endpoint, enqueue, flush, options.mock]
+    [api, transport, enqueue, flush]
   );
   const stop = useCallback(() => abortRef.current?.abort(), []);
   const reset = useCallback(() => api.getState().reset(), [api]);
@@ -841,7 +862,7 @@ function useCanvasReplay() {
           api.getState().applyEvent(event);
         }
       } finally {
-        if (abortRef.current === controller) api.getState().setStreaming(false);
+        api.getState().setStreaming(false);
       }
     },
     [api]
@@ -850,6 +871,39 @@ function useCanvasReplay() {
   const reset = useCallback(() => api.getState().reset(), [api]);
   return { play, stop, reset, canvas, isPlaying };
 }
+var DEFAULT_DEBOUNCE_MS = 800;
+function useCanvasSave(onSave, debounceMs = DEFAULT_DEBOUNCE_MS) {
+  const timers = useRef(/* @__PURE__ */ new Map());
+  const latest = useRef(/* @__PURE__ */ new Map());
+  const handler = useRef(onSave);
+  handler.current = onSave;
+  const enabled = Boolean(onSave);
+  useEffect(() => {
+    const pending = timers.current;
+    return () => pending.forEach((t) => clearTimeout(t));
+  }, []);
+  return useMemo(() => {
+    if (!enabled) return null;
+    return (artifact2) => {
+      latest.current.set(artifact2.id, artifact2);
+      const existing = timers.current.get(artifact2.id);
+      if (existing) clearTimeout(existing);
+      timers.current.set(
+        artifact2.id,
+        setTimeout(() => {
+          timers.current.delete(artifact2.id);
+          const current = latest.current.get(artifact2.id);
+          if (!current || !handler.current) return;
+          void handler.current({
+            artifactId: current.id,
+            artifact: current,
+            baseRevision: typeof current.meta?.revision === "string" ? current.meta.revision : null
+          });
+        }, debounceMs)
+      );
+    };
+  }, [enabled, debounceMs]);
+}
 
 // src/fixtures/scenarios.ts
 var PRICING_HTML = `<!doctype html>
@@ -1021,29 +1075,32 @@ var slides = {
     { type: "done" }
   ]
 };
-var PDF_DATA_URL = "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDE+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9NZWRpYUJveFswIDAgNjEyIDc5Ml0vQ29udGVudHMgNCAwIFIvUmVzb3VyY2VzPDwvRm9udDw8L0YxIDUgMCBSPj4+Pj4+ZW5kb2JqCjQgMCBvYmo8PC9MZW5ndGggODA+PnN0cmVhbQpCVCAvRjEgMjggVGYgNzIgNzAwIFRkIChsYW5nY2hhaW4tY2FudmFzIFBERiB2aWV3ZXIpIFRqIEVUCmVuZHN0cmVhbQplbmRvYmoKNSAwIG9iajw8L1R5cGUvRm9udC9TdWJ0eXBlL1R5cGUxL0Jhc2VGb250L0hlbHZldGljYT4+ZW5kb2JqCnhyZWYKMCA2CnRyYWlsZXI8PC9TaXplIDYvUm9vdCAxIDAgUj4+CiUlRU9GCg==";
-var pdf = {
-  id: "pdf",
-  title: "PDF viewer",
-  description: "A PDF artifact shown in the browser's built-in viewer \u2014 zero dependencies.",
+var VERSIONED_HTML = `<!doctype html><html><body style="font-family:sans-serif;padding:40px">
+<h1>Coffee history</h1><p>From the Ethiopian highlands to the espresso bar.</p>
+</body></html>`;
+var versions = {
+  id: "versions",
+  title: "Version history",
+  description: "An agent builds a page, a user edit and an agent edit each land as described commits \u2014 open the version rail to browse and restore-view snapshots.",
   events: [
-    { type: "message.delta", messageId: "m-pdf", text: "Here's the signed report as a PDF." },
+    { type: "message.delta", messageId: "m1", text: "Built the page \u2014 every change now lands in the version history." },
+    { type: "message.end", messageId: "m1" },
     {
       type: "canvas.create",
-      artifact: {
-        id: "report-pdf",
-        type: "pdf",
-        title: "Signed report",
-        version: 1,
-        status: "complete",
-        data: { src: PDF_DATA_URL, filename: "signed-report.pdf" }
-      }
+      artifact: { id: "page", type: "html", title: "Coffee history", version: 1, status: "streaming", data: { html: VERSIONED_HTML } }
     },
-    { type: "canvas.status", id: "report-pdf", status: "complete" },
+    { type: "canvas.status", id: "page", status: "complete" },
+    { type: "canvas.commit", id: "page", description: "Create page", revision: "v1" },
+    // A human tweaks the headline by hand, then saves — one described commit.
+    { type: "canvas.patch", id: "page", patch: { html: VERSIONED_HTML.replace("Coffee history", "A short history of coffee") } },
+    { type: "canvas.commit", id: "page", description: "Manual edit: 1 change", revision: "v2" },
+    // The agent applies a targeted follow-up edit on the current state.
+    { type: "canvas.patch", id: "page", patch: { html: VERSIONED_HTML.replace("Coffee history", "A short history of coffee").replace("espresso bar", "third-wave caf\xE9") } },
+    { type: "canvas.commit", id: "page", description: "Update closing phrase", revision: "v3" },
     { type: "done" }
   ]
 };
-var scenarios = [htmlPage, document2, chart, table, slides, pdf];
+var scenarios = [htmlPage, document2, chart, table, slides, versions];
 var RegistryContext = createContext({});
 function CanvasRegistryProvider({ registry, children }) {
   return /* @__PURE__ */ jsx(RegistryContext.Provider, { value: registry, children });
@@ -1189,202 +1246,40 @@ function display(value) {
   if (value == null) return "";
   if (typeof value === "object") {
     if (value.result != null) return display(value.result);
-    if (Array.isArray(value.richText)) return value.richText.map((r) => r?.text ?? "").join("");
     if (typeof value.text === "string") return value.text;
     if (value instanceof Date) return formatDate(value, "yyyy-mm-dd");
     return "";
   }
   return String(value);
 }
-function splitSections(fmt) {
-  const sections = [];
-  let cur = "";
-  for (let i = 0; i < fmt.length; i++) {
-    const ch = fmt[i];
-    if (ch === '"') {
-      cur += ch;
-      i++;
-      while (i < fmt.length && fmt[i] !== '"') cur += fmt[i++];
-      if (i < fmt.length) cur += fmt[i];
-      continue;
-    }
-    if (ch === "[") {
-      cur += ch;
-      i++;
-      while (i < fmt.length && fmt[i] !== "]") cur += fmt[i++];
-      if (i < fmt.length) cur += fmt[i];
-      continue;
-    }
-    if (ch === "\\") {
-      cur += ch + (fmt[i + 1] ?? "");
-      i++;
-      continue;
-    }
-    if (ch === ";") {
-      sections.push(cur);
-      cur = "";
-      continue;
-    }
-    cur += ch;
-  }
-  sections.push(cur);
-  return sections;
-}
-function numberSkeleton(fmt) {
-  let currency = "";
-  let currencyTrails = false;
-  let skeleton = "";
-  let seenDigit = false;
-  const found = (sym) => {
-    if (currency) return;
-    currency = sym;
-    currencyTrails = seenDigit;
-  };
-  for (let i = 0; i < fmt.length; i++) {
-    const ch = fmt[i];
-    if (ch === '"') {
-      let lit = "";
-      i++;
-      while (i < fmt.length && fmt[i] !== '"') lit += fmt[i++];
-      if (/[$₩€£¥]/.test(lit)) found(lit);
-      continue;
-    }
-    if (ch === "\\") {
-      const c = fmt[i + 1] ?? "";
-      if (/[$₩€£¥]/.test(c)) found(c);
-      i++;
-      continue;
-    }
-    if (ch === "[") {
-      const end = fmt.indexOf("]", i);
-      const group = fmt.slice(i + 1, end === -1 ? void 0 : end);
-      const cur = /^\$(.*?)-/.exec(group)?.[1] ?? (group.startsWith("$") ? group.slice(1) : "");
-      if (cur) found(cur);
-      i = end === -1 ? fmt.length : end;
-      continue;
-    }
-    if (ch === "_" || ch === "*") {
-      i++;
-      continue;
-    }
-    if (/[$₩€£¥]/.test(ch)) {
-      found(ch);
-      continue;
-    }
-    if (ch === "0" || ch === "#") seenDigit = true;
-    skeleton += ch;
-  }
-  return { skeleton, currency, currencyTrails };
-}
 function formatNumber(value, numFmt) {
-  const raw = numFmt && numFmt !== "General" ? numFmt : "";
-  if (!raw) return String(value);
-  const sections = splitSections(raw);
-  const negSection = value < 0 && sections.length > 1 ? sections[1] : void 0;
-  const section = negSection ?? (value === 0 && sections[2] ? sections[2] : sections[0]);
-  const { skeleton, currency, currencyTrails } = numberSkeleton(section);
-  if (!/[0#]/.test(skeleton)) return String(value);
-  const decimals = (skeleton.match(/\.([0#]+)/)?.[1] ?? "").length;
-  const thousands = /[#0],[#0]/.test(skeleton);
-  const n = negSection ? Math.abs(value) : value;
-  const percents = (skeleton.match(/%/g) ?? []).length;
-  const scaled = percents ? n * 100 ** percents : n;
-  let out = thousands ? scaled.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals }) : scaled.toFixed(decimals);
-  if (percents) out += "%";
-  if (currency) {
-    if (currencyTrails) out = `${out}${currency}`;
-    else if (out.startsWith("-")) out = `-${currency}${out.slice(1)}`;
-    else out = `${currency}${out}`;
-  }
-  if (negSection && /\(/.test(skeleton)) out = `(${out})`;
+  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;
 }
-var EXCEL_EPOCH_MS = Date.UTC(1899, 11, 30);
 function formatDate(d, numFmt) {
-  const fmt = numFmt && numFmt !== "General" && /[ymdhs]/i.test(numFmt) ? splitSections(numFmt)[0] : "yyyy-mm-dd";
+  const fmt = numFmt && numFmt !== "General" && /[ymdhs]/i.test(numFmt) ? numFmt : "yyyy-mm-dd";
   const p = (n, w = 2) => String(n).padStart(w, "0");
-  const meridiem = /AM\/PM|A\/P/i.test(fmt);
-  const H = d.getUTCHours();
-  const hour12 = H % 12 === 0 ? 12 : H % 12;
-  const hourText = (width) => meridiem ? p(hour12, width) : p(H, width);
-  const elapsedMs = d.getTime() - EXCEL_EPOCH_MS;
   const map = {
-    yyyy: () => String(d.getUTCFullYear()),
-    yy: () => p(d.getUTCFullYear() % 100),
-    mmmm: () => d.toLocaleString("en-US", { month: "long", timeZone: "UTC" }),
-    mmm: () => d.toLocaleString("en-US", { month: "short", timeZone: "UTC" }),
-    dd: () => p(d.getUTCDate()),
-    d: () => String(d.getUTCDate()),
-    hh: () => hourText(2),
-    h: () => hourText(1),
-    ss: () => p(d.getUTCSeconds()),
-    s: () => String(d.getUTCSeconds())
+    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())
   };
-  const month = (t) => t === "mm" ? p(d.getUTCMonth() + 1) : String(d.getUTCMonth() + 1);
-  const minute = (t) => t === "mm" ? p(d.getUTCMinutes()) : String(d.getUTCMinutes());
-  const TOKEN = /AM\/PM|A\/P|yyyy|yy|mmmm|mmm|mm|m|dd|d|hh|h|ss|s/iy;
-  let out = "";
-  let lastWasHours = false;
-  for (let i = 0; i < fmt.length; ) {
-    const ch = fmt[i];
-    if (ch === '"') {
-      i++;
-      while (i < fmt.length && fmt[i] !== '"') out += fmt[i++];
-      i++;
-      continue;
-    }
-    if (ch === "\\") {
-      out += fmt[i + 1] ?? "";
-      i += 2;
-      continue;
-    }
-    if (ch === "[") {
-      const end = fmt.indexOf("]", i);
-      const group = fmt.slice(i + 1, end === -1 ? fmt.length : end);
-      i = end === -1 ? fmt.length : end + 1;
-      if (/^h+$/i.test(group)) {
-        out += p(Math.floor(elapsedMs / 36e5), group.length);
-        lastWasHours = true;
-      } else if (/^m+$/i.test(group)) out += p(Math.floor(elapsedMs / 6e4), group.length);
-      else if (/^s+$/i.test(group)) out += p(Math.floor(elapsedMs / 1e3), group.length);
-      continue;
-    }
-    if (ch === "_") {
-      out += " ";
-      i += 2;
-      continue;
-    }
-    if (ch === "*") {
-      i += 2;
-      continue;
-    }
-    TOKEN.lastIndex = i;
-    const m = TOKEN.exec(fmt);
-    if (m) {
-      const tok = m[0].toLowerCase();
-      i += m[0].length;
-      if (tok === "am/pm") {
-        out += H < 12 ? "AM" : "PM";
-        continue;
-      }
-      if (tok === "a/p") {
-        out += H < 12 ? "A" : "P";
-        continue;
-      }
-      if (tok === "m" || tok === "mm") {
-        const minutes = lastWasHours || /^[\s:.,\-]*s/i.test(fmt.slice(i));
-        out += minutes ? minute(tok) : month(tok);
-        lastWasHours = false;
-        continue;
-      }
-      lastWasHours = tok === "h" || tok === "hh";
-      out += map[tok]();
-      continue;
-    }
-    out += ch;
-    i++;
-  }
-  return out;
+  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;
@@ -1583,7 +1478,6 @@ function cellVal(v) {
   if (typeof v === "number" || typeof v === "string") return v;
   if (typeof v === "object") {
     if (v.result != null) return cellVal(v.result);
-    if (Array.isArray(v.richText)) return v.richText.map((r) => r?.text ?? "").join("");
     if (typeof v.text === "string") return v.text;
     if (v instanceof Date) return v.toISOString().slice(0, 10);
   }
@@ -1626,416 +1520,8 @@ function flatten(ws) {
   return { columns, rows };
 }
 
-// src/io/hwpx.ts
-var EOCD_SIG = 101010256;
-var CDIR_SIG = 33639248;
-var LOCAL_SIG = 67324752;
-async function inflateRaw(bytes) {
-  if (typeof DecompressionStream === "undefined") {
-    throw new Error("\uC774 \uBE0C\uB77C\uC6B0\uC800\uB294 \uC555\uCD95 \uD574\uC81C\uB97C \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4 (DecompressionStream unavailable).");
-  }
-  const ds = new DecompressionStream("deflate-raw");
-  const writer = ds.writable.getWriter();
-  const wrote = writer.write(bytes).then(() => writer.close());
-  const reader = ds.readable.getReader();
-  const chunks = [];
-  let total = 0;
-  for (; ; ) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    chunks.push(value);
-    total += value.length;
-  }
-  await wrote;
-  const out = new Uint8Array(total);
-  let pos = 0;
-  for (const c of chunks) {
-    out.set(c, pos);
-    pos += c.length;
-  }
-  return out;
-}
-async function readZip(buffer) {
-  const view = new DataView(buffer);
-  const bytes = new Uint8Array(buffer);
-  let eocd = -1;
-  const floor = Math.max(0, buffer.byteLength - 22 - 65535);
-  for (let i = buffer.byteLength - 22; i >= floor; i--) {
-    if (view.getUint32(i, true) === EOCD_SIG) {
-      eocd = i;
-      break;
-    }
-  }
-  if (eocd === -1) throw new Error("ZIP \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4 (no end-of-central-directory).");
-  const count = view.getUint16(eocd + 10, true);
-  let offset = view.getUint32(eocd + 16, true);
-  const entries = /* @__PURE__ */ new Map();
-  const decoder = new TextDecoder();
-  for (let i = 0; i < count; i++) {
-    if (offset + 46 > buffer.byteLength || view.getUint32(offset, true) !== CDIR_SIG) {
-      throw new Error("ZIP \uC911\uC559 \uB514\uB809\uD130\uB9AC\uAC00 \uC190\uC0C1\uB418\uC5C8\uC2B5\uB2C8\uB2E4 (corrupt central directory).");
-    }
-    const method = view.getUint16(offset + 10, true);
-    const compressedSize = view.getUint32(offset + 20, true);
-    const uncompressedSize = view.getUint32(offset + 24, true);
-    const nameLen = view.getUint16(offset + 28, true);
-    const extraLen = view.getUint16(offset + 30, true);
-    const commentLen = view.getUint16(offset + 32, true);
-    const localOffset = view.getUint32(offset + 42, true);
-    const name = decoder.decode(bytes.subarray(offset + 46, offset + 46 + nameLen));
-    offset += 46 + nameLen + extraLen + commentLen;
-    if (compressedSize === 4294967295 || uncompressedSize === 4294967295) {
-      throw new Error("Zip64 \uD615\uC2DD\uC740 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4 (Zip64 not supported).");
-    }
-    if (name.endsWith("/")) continue;
-    if (localOffset + 30 > buffer.byteLength || view.getUint32(localOffset, true) !== LOCAL_SIG) {
-      throw new Error("ZIP \uB85C\uCEEC \uD5E4\uB354\uAC00 \uC190\uC0C1\uB418\uC5C8\uC2B5\uB2C8\uB2E4 (corrupt local header).");
-    }
-    const localNameLen = view.getUint16(localOffset + 26, true);
-    const localExtraLen = view.getUint16(localOffset + 28, true);
-    const start = localOffset + 30 + localNameLen + localExtraLen;
-    const data = bytes.subarray(start, start + compressedSize);
-    if (method === 0) entries.set(name, data);
-    else if (method === 8) entries.set(name, await inflateRaw(data));
-    else throw new Error(`\uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uC555\uCD95 \uBC29\uC2DD\uC785\uB2C8\uB2E4 (compression method ${method}).`);
-  }
-  return entries;
-}
-function paragraphText(p) {
-  let out = "";
-  const walk = (el) => {
-    for (const child of Array.from(el.children)) {
-      const tag = child.localName;
-      if (tag === "tbl") continue;
-      if (tag === "t") out += child.textContent ?? "";
-      else if (tag === "lineBreak") out += "\n";
-      else walk(child);
-    }
-  };
-  walk(p);
-  return out;
-}
-function tableToMarkdown(tbl) {
-  const rows = [];
-  for (const tr of Array.from(tbl.getElementsByTagNameNS("*", "tr"))) {
-    if (tr.closest("tbl") !== tbl) continue;
-    const cells = [];
-    for (const tc of Array.from(tr.children)) {
-      if (tc.localName !== "tc") continue;
-      const text = Array.from(tc.getElementsByTagNameNS("*", "p")).map((p) => paragraphText(p).trim()).filter(Boolean).join(" ").replace(/\|/g, "\\|").replace(/\n/g, " ");
-      cells.push(text);
-    }
-    if (cells.length) rows.push(cells);
-  }
-  if (!rows.length) return "";
-  const width = Math.max(...rows.map((r) => r.length));
-  const pad = (r) => Array.from({ length: width }, (_, i) => r[i] ?? "");
-  const line = (r) => `| ${pad(r).join(" | ")} |`;
-  const [head, ...body] = rows;
-  return [line(head), `| ${Array(width).fill("---").join(" | ")} |`, ...body.map(line)].join("\n");
-}
-function sectionToMarkdown(xml) {
-  const doc = new DOMParser().parseFromString(xml, "application/xml");
-  if (doc.querySelector("parsererror")) {
-    throw new Error("HWPX \uBCF8\uBB38 XML\uC744 \uD574\uC11D\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4 (invalid section XML).");
-  }
-  const blocks = [];
-  const walk = (el) => {
-    for (const child of Array.from(el.children)) {
-      const tag = child.localName;
-      if (tag === "p") {
-        const text = paragraphText(child).trim();
-        if (text) blocks.push(text);
-        for (const tbl of Array.from(child.getElementsByTagNameNS("*", "tbl"))) {
-          if ((tbl.parentElement?.closest("tbl") ?? null) === null) {
-            const md = tableToMarkdown(tbl);
-            if (md) blocks.push(md);
-          }
-        }
-      } else if (tag !== "tbl") {
-        walk(child);
-      }
-    }
-  };
-  walk(doc.documentElement);
-  return blocks;
-}
-async function hwpxToMarkdown(buffer) {
-  const entries = await readZip(buffer);
-  const sections = [...entries.keys()].filter((n) => /^Contents\/section\d+\.xml$/i.test(n)).sort((a, b) => Number(/(\d+)/.exec(a)?.[1] ?? 0) - Number(/(\d+)/.exec(b)?.[1] ?? 0));
-  if (!sections.length) {
-    throw new Error("HWPX \uBB38\uC11C\uAC00 \uC544\uB2D9\uB2C8\uB2E4 \u2014 \uBCF8\uBB38(section XML)\uC774 \uC5C6\uC2B5\uB2C8\uB2E4 (no Contents/section*.xml).");
-  }
-  const decoder = new TextDecoder();
-  const blocks = [];
-  for (const name of sections) {
-    blocks.push(...sectionToMarkdown(decoder.decode(entries.get(name))));
-  }
-  return blocks.join("\n\n").trim();
-}
-
-// src/io/hwp.ts
-var ERR = {
-  notCfb: "CFB(OLE) \uCEE8\uD14C\uC774\uB108 \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4 \u2014 \uC62C\uBC14\uB978 HWP \uD30C\uC77C\uC774 \uC544\uB2D9\uB2C8\uB2E4. / Not a CFB (OLE) compound file container \u2014 not a valid HWP file.",
-  notHwp: '"HWP Document File" \uC2DC\uADF8\uB2C8\uCC98\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 HWP \uBB38\uC11C\uAC00 \uC544\uB2D9\uB2C8\uB2E4. / Missing "HWP Document File" signature \u2014 not an HWP document.',
-  encrypted: "\uC554\uD638\uB85C \uBCF4\uD638\uB41C HWP \uBB38\uC11C\uC785\uB2C8\uB2E4 \u2014 \uD55C\uAE00\uC5D0\uC11C \uC554\uD638\uB97C \uD574\uC81C\uD55C \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694. / This HWP document is password-encrypted \u2014 remove the password in Hangul and try again.",
-  drm: "\uBC30\uD3EC\uC6A9(DRM) HWP \uBB38\uC11C\uC785\uB2C8\uB2E4 \u2014 \uBCF8\uBB38\uC774 \uB09C\uB3C5\uD654\uB418\uC5B4 \uC788\uC5B4 \uD14D\uC2A4\uD2B8\uB97C \uCD94\uCD9C\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. / This is a distribution (DRM) HWP document \u2014 its body text is obfuscated and cannot be extracted.",
-  legacy: (version) => `\uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 HWP \uBC84\uC804\uC785\uB2C8\uB2E4 (${version} < 5.0) \u2014 \uD55C\uAE00\uC5D0\uC11C HWP 5.0 \uC774\uC0C1\uC73C\uB85C \uC800\uC7A5\uD55C \uB4A4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694. / Unsupported HWP version (${version} < 5.0) \u2014 re-save as HWP 5.0+ in Hangul and try again.`,
-  corrupt: (detail) => `\uC190\uC0C1\uB41C HWP \uD30C\uC77C\uC785\uB2C8\uB2E4 (${detail}). / Corrupt HWP file (${detail}).`,
-  noInflate: "\uC774 \uD658\uACBD\uC5D0\uC11C\uB294 DecompressionStream\uC744 \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uC544 \uC555\uCD95\uB41C HWP\uB97C \uC5F4 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. / DecompressionStream is unavailable in this environment, so compressed HWP files cannot be opened."
-};
-var ENDOFCHAIN = 4294967294;
-var CFB_SIGNATURE = [208, 207, 17, 224, 161, 177, 26, 225];
-function parseCfb(bytes) {
-  if (bytes.length < 512 || CFB_SIGNATURE.some((b, i) => bytes[i] !== b)) {
-    throw new Error(ERR.notCfb);
-  }
-  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
-  const sectorSize = 1 << view.getUint16(30, true);
-  const miniSectorSize = 1 << view.getUint16(32, true);
-  const numFatSectors = view.getUint32(44, true);
-  const firstDirSector = view.getUint32(48, true);
-  const miniCutoff = view.getUint32(56, true);
-  const firstMiniFatSector = view.getUint32(60, true);
-  const firstDifatSector = view.getUint32(68, true);
-  const totalSectors = Math.max(0, Math.ceil((bytes.length - 512) / sectorSize));
-  const sectorBytes = (sector) => {
-    const start = 512 + sector * sectorSize;
-    if (sector >= totalSectors || start >= bytes.length) {
-      throw new Error(ERR.corrupt("sector out of range"));
-    }
-    return bytes.subarray(start, start + sectorSize);
-  };
-  const fatSectorIds = [];
-  for (let i = 0; i < 109 && fatSectorIds.length < numFatSectors; i++) {
-    fatSectorIds.push(view.getUint32(76 + i * 4, true));
-  }
-  let difatSector = firstDifatSector;
-  let difatHops = 0;
-  while (difatSector !== ENDOFCHAIN && difatSector < 4294967290) {
-    if (difatHops++ > totalSectors) throw new Error(ERR.corrupt("DIFAT chain loops"));
-    const s = sectorBytes(difatSector);
-    const sv = new DataView(s.buffer, s.byteOffset, s.byteLength);
-    const perSector = sectorSize / 4 - 1;
-    for (let i = 0; i < perSector && fatSectorIds.length < numFatSectors; i++) {
-      fatSectorIds.push(sv.getUint32(i * 4, true));
-    }
-    difatSector = sv.getUint32(sectorSize - 4, true);
-  }
-  const fat = new Uint32Array(fatSectorIds.length * (sectorSize / 4));
-  fatSectorIds.forEach((id, idx) => {
-    const s = sectorBytes(id);
-    const sv = new DataView(s.buffer, s.byteOffset, s.byteLength);
-    for (let i = 0; i < sectorSize / 4; i++) fat[idx * (sectorSize / 4) + i] = sv.getUint32(i * 4, true);
-  });
-  const readChain = (start, size) => {
-    const out = new Uint8Array(size);
-    let sector = start;
-    let written = 0;
-    let hops = 0;
-    while (sector !== ENDOFCHAIN && written < size) {
-      if (hops++ > totalSectors || sector >= fat.length) throw new Error(ERR.corrupt("FAT chain loops"));
-      const chunk = sectorBytes(sector);
-      out.set(chunk.subarray(0, Math.min(sectorSize, size - written)), written);
-      written += sectorSize;
-      sector = fat[sector];
-    }
-    return out;
-  };
-  const dirSectors = [];
-  let dirSector = firstDirSector;
-  let dirHops = 0;
-  while (dirSector !== ENDOFCHAIN) {
-    if (dirHops++ > totalSectors || dirSector >= fat.length) throw new Error(ERR.corrupt("directory chain loops"));
-    dirSectors.push(sectorBytes(dirSector));
-    dirSector = fat[dirSector];
-  }
-  const entries = [];
-  for (const sector of dirSectors) {
-    const sv = new DataView(sector.buffer, sector.byteOffset, sector.byteLength);
-    for (let off = 0; off + 128 <= sector.length; off += 128) {
-      const nameLen = sv.getUint16(off + 64, true);
-      const type = sv.getUint8(off + 66);
-      if (type === 0 || nameLen < 2 || nameLen > 64) continue;
-      let name = "";
-      for (let i = 0; i < nameLen - 2; i += 2) name += String.fromCharCode(sv.getUint16(off + i, true));
-      entries.push({
-        name,
-        type,
-        startSector: sv.getUint32(off + 116, true),
-        // Size is a uint64, but HWP streams are far below 4 GB — the low half suffices.
-        size: sv.getUint32(off + 120, true)
-      });
-    }
-  }
-  const root = entries.find((e) => e.type === 5);
-  if (!root) throw new Error(ERR.corrupt("missing root directory entry"));
-  let miniStream = null;
-  let miniFat = null;
-  const lazyMini = () => {
-    if (miniStream && miniFat) return;
-    miniStream = readChain(root.startSector, root.size);
-    const miniFatSectors = Math.ceil(root.size / miniSectorSize) + 1;
-    const raw = readChain(firstMiniFatSector, miniFatSectors * 4 + sectorSize);
-    const rv = new DataView(raw.buffer, raw.byteOffset, raw.byteLength);
-    miniFat = new Uint32Array(Math.floor(raw.length / 4));
-    for (let i = 0; i < miniFat.length; i++) miniFat[i] = rv.getUint32(i * 4, true);
-  };
-  const readMiniChain = (start, size) => {
-    lazyMini();
-    const out = new Uint8Array(size);
-    let sector = start;
-    let written = 0;
-    let hops = 0;
-    const maxMini = Math.ceil(miniStream.length / miniSectorSize);
-    while (sector !== ENDOFCHAIN && written < size) {
-      if (hops++ > maxMini || sector >= miniFat.length || sector >= maxMini) {
-        throw new Error(ERR.corrupt("mini FAT chain loops"));
-      }
-      const at = sector * miniSectorSize;
-      out.set(miniStream.subarray(at, at + Math.min(miniSectorSize, size - written)), written);
-      written += miniSectorSize;
-      sector = miniFat[sector];
-    }
-    return out;
-  };
-  return {
-    entries,
-    readStream: (entry) => entry.size < miniCutoff && entry.type !== 5 ? readMiniChain(entry.startSector, entry.size) : readChain(entry.startSector, entry.size)
-  };
-}
-var HWP_SIGNATURE = "HWP Document File";
-function parseFileHeader(bytes) {
-  if (bytes.length < 40) throw new Error(ERR.notHwp);
-  let sig = "";
-  for (let i = 0; i < HWP_SIGNATURE.length; i++) sig += String.fromCharCode(bytes[i]);
-  if (sig !== HWP_SIGNATURE) throw new Error(ERR.notHwp);
-  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
-  const version = view.getUint32(32, true);
-  const major = version >>> 24 & 255;
-  if (major < 5) {
-    throw new Error(ERR.legacy(`${major}.${version >>> 16 & 255}`));
-  }
-  const flags = view.getUint32(36, true);
-  if (flags & 2) throw new Error(ERR.encrypted);
-  if (flags & 4) throw new Error(ERR.drm);
-  return { compressed: (flags & 1) !== 0 };
-}
-var HWPTAG_PARA_TEXT = 16 + 51;
-function decodeParaText(view, offset, byteLength) {
-  const paragraphs = [];
-  let text = "";
-  const count = byteLength >> 1;
-  for (let i = 0; i < count; i++) {
-    const code = view.getUint16(offset + i * 2, true);
-    if (code >= 32) {
-      text += String.fromCharCode(code);
-      continue;
-    }
-    switch (code) {
-      case 13:
-        paragraphs.push(text);
-        text = "";
-        break;
-      case 10:
-        text += "\n";
-        break;
-      case 0:
-      case 24:
-      case 25:
-      case 26:
-      case 27:
-      case 28:
-      case 29:
-      case 30:
-      case 31:
-        break;
-      // 1-WCHAR char controls with no text representation
-      case 9:
-        i += 7;
-        text += "	";
-        break;
-      default:
-        i += 7;
-        break;
-    }
-  }
-  if (text) paragraphs.push(text);
-  return paragraphs;
-}
-function extractSectionParagraphs(section) {
-  const view = new DataView(section.buffer, section.byteOffset, section.byteLength);
-  const paragraphs = [];
-  let off = 0;
-  while (off + 4 <= section.length) {
-    const header = view.getUint32(off, true);
-    off += 4;
-    const tagId = header & 1023;
-    let size = header >>> 20 & 4095;
-    if (size === 4095) {
-      if (off + 4 > section.length) throw new Error(ERR.corrupt("truncated record header"));
-      size = view.getUint32(off, true);
-      off += 4;
-    }
-    if (off + size > section.length) throw new Error(ERR.corrupt("record overruns section"));
-    if (tagId === HWPTAG_PARA_TEXT) paragraphs.push(...decodeParaText(view, off, size));
-    off += size;
-  }
-  return paragraphs;
-}
-async function inflateRaw2(data) {
-  if (typeof DecompressionStream === "undefined") throw new Error(ERR.noInflate);
-  const stream = new DecompressionStream("deflate-raw");
-  const writer = stream.writable.getWriter();
-  const writing = writer.write(data).then(() => writer.close());
-  writing.catch(() => {
-  });
-  const reader = stream.readable.getReader();
-  const chunks = [];
-  let total = 0;
-  for (; ; ) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    chunks.push(value);
-    total += value.length;
-  }
-  const out = new Uint8Array(total);
-  let at = 0;
-  for (const chunk of chunks) {
-    out.set(chunk, at);
-    at += chunk.length;
-  }
-  return out;
-}
-async function hwpToText(buffer) {
-  const cfb = parseCfb(new Uint8Array(buffer));
-  const headerEntry = cfb.entries.find((e) => e.type === 2 && e.name === "FileHeader");
-  if (!headerEntry) throw new Error(ERR.notHwp);
-  const header = parseFileHeader(cfb.readStream(headerEntry));
-  const sections = cfb.entries.map((e) => ({ entry: e, match: e.type === 2 ? /^Section(\d+)$/.exec(e.name) : null })).filter((s) => s.match !== null).sort((a, b) => Number(a.match[1]) - Number(b.match[1]));
-  const paragraphs = [];
-  for (const { entry } of sections) {
-    let bytes = cfb.readStream(entry);
-    if (header.compressed) bytes = await inflateRaw2(bytes);
-    paragraphs.push(...extractSectionParagraphs(bytes).filter((p) => p.length > 0));
-  }
-  return paragraphs.join("\n\n").replace(/\s+$/, "");
-}
-
 // src/io/importers.ts
-var IMPORTABLE_EXTENSIONS = [
-  ".csv",
-  ".md",
-  ".markdown",
-  ".txt",
-  ".html",
-  ".htm",
-  ".json",
-  ".xlsx",
-  ".pdf",
-  ".hwpx",
-  ".hwp"
-];
+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();
@@ -2076,18 +1562,6 @@ async function importFile(file) {
       const { sheets, columns, rows } = await xlsxToSheets(await file.arrayBuffer(), () => loadOptional("exceljs", () => import('exceljs')));
       return toEvents(artifact(id, "table", title, { columns, rows, sheet: sheets }));
     }
-    case ".pdf": {
-      const src = await fileToDataUrl(file);
-      return toEvents(artifact(id, "pdf", title, { src, filename: file.name }));
-    }
-    case ".hwpx": {
-      const content = await hwpxToMarkdown(await file.arrayBuffer());
-      return toEvents(artifact(id, "document", title, { format: "markdown", content }));
-    }
-    case ".hwp": {
-      const content = await hwpToText(await file.arrayBuffer());
-      return toEvents(artifact(id, "document", title, { format: "markdown", content }));
-    }
     default:
       throw new Error(`Unsupported file type "${ext || file.name}". Supported: ${IMPORTABLE_EXTENSIONS.join(", ")}`);
   }
@@ -2095,14 +1569,6 @@ async function importFile(file) {
 function artifact(id, type, title, data) {
   return { id, type, title, version: 1, status: "complete", data };
 }
-function fileToDataUrl(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result);
-    reader.onerror = () => reject(reader.error ?? new Error("Failed to read file."));
-    reader.readAsDataURL(file);
-  });
-}
 function importJson(text, id, title) {
   let parsed;
   try {
@@ -2420,8 +1886,8 @@ function checkA11y(html) {
   if (!doc.querySelector("h1")) issues.push("No <h1> \u2014 every page needs one top-level heading");
   return issues;
 }
-var SLIDE_H = 720;
-var SCROLL_FIX = "<style data-lcx>html,body{overflow:auto!important;height:auto!important;min-height:100%!important}</style>";
+var SLIDE_W = 1280;
+var SCROLL_FIX = "<style>html,body{overflow:auto!important;height:auto!important;min-height:100%!important}</style>";
 function withScrollableBody(html) {
   const i = html.lastIndexOf("</body>");
   return i === -1 ? html + SCROLL_FIX : html.slice(0, i) + SCROLL_FIX + html.slice(i);
@@ -2429,7 +1895,7 @@ function withScrollableBody(html) {
 function useSlideFit(ratio, boxRef) {
   const [scale, setScale] = useState(1);
   const [rw, rh] = (ratio ?? "16:9").split(/[:x/]/).map(Number);
-  const width = rw && rh ? Math.round(SLIDE_H * rw / rh) : 1280;
+  const height = rw && rh ? Math.round(SLIDE_W * rh / rw) : 720;
   useEffect(() => {
     if (!ratio) return;
     const el = boxRef.current;
@@ -2437,14 +1903,14 @@ function useSlideFit(ratio, boxRef) {
     const fit = () => {
       const w = el.clientWidth;
       if (w <= 40) return;
-      setScale(Math.min(1, (w - 40) / width));
+      setScale(Math.min(1, (w - 40) / SLIDE_W));
     };
     fit();
     const ro = new ResizeObserver(fit);
     ro.observe(el);
     return () => ro.disconnect();
-  }, [ratio, width]);
-  return { scale, width, height: SLIDE_H };
+  }, [ratio, height]);
+  return { scale, width: SLIDE_W, height };
 }
 function HtmlRenderer({ artifact: artifact2 }) {
   const iframeRef = useRef(null);
@@ -2457,6 +1923,7 @@ function HtmlRenderer({ artifact: artifact2 }) {
   const sendIframeCommand = useCanvasStore((s) => s.sendIframeCommand);
   const selections = useCanvasStore((s) => s.selections);
   const iframeCommand = useCanvasStore((s) => s.iframeCommand);
+  const assetBaseUrl = useCanvasStore((s) => s.assetBaseUrl);
   const [device, setDevice] = useState("desktop");
   const [mode, setMode] = useState("design");
   const [a11y, setA11y] = useState(null);
@@ -2465,11 +1932,11 @@ function HtmlRenderer({ artifact: artifact2 }) {
   const isFixedSlide = Boolean(artifact2.meta?.ratio);
   const srcDoc = useMemo(() => {
     if (mode === "design" && artifact2.data.html === lastSelfHtml.current) return srcDocRef.current;
-    const base = withInspector(artifact2.data.html);
+    const base = withInspector(artifact2.data.html, assetBaseUrl ?? void 0);
     srcDocRef.current = isFixedSlide ? base : withScrollableBody(base);
     lastSelfHtml.current = null;
     return srcDocRef.current;
-  }, [artifact2.data.html, mode, isFixedSlide]);
+  }, [artifact2.data.html, mode, isFixedSlide, assetBaseUrl]);
   const selected = selections.filter((s) => s.artifactId === artifact2.id);
   const single = selected.length === 1 ? selected[0] : null;
   const outline = useMemo(() => {
@@ -2773,48 +2240,33 @@ function HtmlRenderer({ artifact: artifact2 }) {
         sandbox: "allow-scripts allow-popups allow-modals",
         style: { width: DEVICES.find((d) => d.id === device).width }
       }
-    ) }) : /* @__PURE__ */ jsx(CodePane, { html: artifact2.data.html, onCommit: commitCode })
-  ] });
-}
-function CodePane({ html, onCommit }) {
-  const [draft, setDraft] = useState(html);
-  const dirty = useRef(false);
-  useEffect(() => {
-    if (!dirty.current) setDraft(html);
-  }, [html]);
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: "cv-html-code",
-      value: draft,
-      spellCheck: false,
-      onChange: (e) => {
-        dirty.current = true;
-        setDraft(e.target.value);
-      },
-      onBlur: () => {
-        if (!dirty.current) return;
-        dirty.current = false;
-        onCommit(draft);
+    ) }) : /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "cv-html-code",
+        defaultValue: artifact2.data.html,
+        spellCheck: false,
+        onBlur: (e) => commitCode(e.target.value),
+        "aria-label": "HTML source"
       },
-      "aria-label": "HTML source"
-    }
-  );
+      artifact2.data.html
+    )
+  ] });
 }
 
 // src/components/renderers/index.ts
-var ChartRenderer = lazy(() => import('./ChartRenderer-AAWVGKV5.js').then((m) => ({ default: m.ChartRenderer })));
-var DocumentRenderer = lazy(() => import('./DocumentRenderer-NBRBPYU6.js').then((m) => ({ default: m.DocumentRenderer })));
-var TableRenderer = lazy(() => import('./TableRenderer-VKDD3CB6.js').then((m) => ({ default: m.TableRenderer })));
-var SlidesRenderer = lazy(() => import('./SlidesRenderer-6ZGHXTQX.js').then((m) => ({ default: m.SlidesRenderer })));
-var PdfRenderer = lazy(() => import('./PdfRenderer-DPQT4E7O.js').then((m) => ({ default: m.PdfRenderer })));
+var ChartRenderer = lazy(() => import('./ChartRenderer-JGRJ23OB.js').then((m) => ({ default: m.ChartRenderer })));
+var DocumentRenderer = lazy(() => import('./DocumentRenderer-ZQDQMX7X.js').then((m) => ({ default: m.DocumentRenderer })));
+var TableRenderer = lazy(() => import('./TableRenderer-3ESF577F.js').then((m) => ({ default: m.TableRenderer })));
+var SlidesRenderer = lazy(() => import('./SlidesRenderer-56R3TNWN.js').then((m) => ({ default: m.SlidesRenderer })));
+var FileRenderer = lazy(() => import('./FileRenderer-3ZHNORZJ.js').then((m) => ({ default: m.FileRenderer })));
 var builtinRenderers = {
   html: HtmlRenderer,
   document: DocumentRenderer,
   chart: ChartRenderer,
   table: TableRenderer,
   slides: SlidesRenderer,
-  pdf: PdfRenderer
+  file: FileRenderer
 };
 
 // src/export/download.ts
@@ -2875,43 +2327,38 @@ ${renderedHtml}
 </html>`;
 }
 function tableToCsv(data) {
-  if (data.sheet?.length) return fortuneToCsv(data.sheet[0]);
+  const rows = data.sheet?.length ? projectSheetIntoRows(data.columns, data.rows, data.sheet) : data.rows;
   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");
+  const body = rows.map((row) => data.columns.map((c) => csvCell(String(row[c.key] ?? ""))).join(",")).join("\n");
   return `${header}
 ${body}`;
 }
-function fortuneToCsv(sheet) {
-  let maxR = -1;
-  let maxC = -1;
-  const grid = /* @__PURE__ */ new Map();
-  for (const cell of sheet.celldata ?? []) {
-    const v = cell?.v;
-    if (v == null) continue;
-    if (typeof v === "object" && v.mc && v.v == null && v.m == null) continue;
-    const value = typeof v === "object" ? v.v ?? v.m ?? "" : v;
-    if (value === "" || value == null) continue;
-    grid.set(`${cell.r},${cell.c}`, String(value));
-    if (cell.r > maxR) maxR = cell.r;
-    if (cell.c > maxC) maxC = cell.c;
-  }
-  const lines = [];
-  for (let r = 0; r <= maxR; r++) {
-    const row = [];
-    for (let c = 0; c <= maxC; c++) row.push(csvCell(grid.get(`${r},${c}`) ?? ""));
-    lines.push(row.join(","));
-  }
-  return lines.join("\n");
-}
 async function tableToXlsx(data) {
   const { Workbook } = await loadOptional("exceljs", () => import('exceljs'));
   const workbook = new Workbook();
   if (data.sheet?.length) {
-    fortuneToWorkbook(workbook, data.sheet);
+    const { computeFormulas } = await import('./formula-27TCEZI5.js');
+    const merged = mergeRowsIntoSheet(
+      data.columns,
+      data.rows,
+      data.sheet,
+      await computeFormulas(data.columns, data.rows)
+    );
+    fortuneToWorkbook(workbook, merged);
   } 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] ?? ""));
+    const { computeFormulas } = await import('./formula-27TCEZI5.js');
+    const results = await computeFormulas(data.columns, data.rows);
+    data.rows.forEach((row, dataIdx) => {
+      sheet.addRow(
+        data.columns.map((c, colIdx) => {
+          const v = row[c.key] ?? "";
+          if (typeof v !== "string" || !v.startsWith("=")) return v;
+          return { formula: v.slice(1), result: results.get(`${dataIdx + 1},${colIdx}`) };
+        })
+      );
+    });
     sheet.getRow(1).font = { bold: true };
   }
   return workbook.xlsx.writeBuffer();
@@ -2924,7 +2371,8 @@ function fortuneToWorkbook(workbook, sheets) {
       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;
+      const formula = v && typeof v === "object" && typeof v.f === "string" ? v.f : null;
+      xc.value = formula ? { formula: formula.replace(/^=/, ""), result: value ?? void 0 } : value;
       if (v && typeof v === "object") {
         if (v.bl) xc.font = { ...xc.font, bold: true };
         if (v.it) xc.font = { ...xc.font, italic: true };
@@ -3090,62 +2538,62 @@ function printToPdf(html) {
   document.body.appendChild(iframe);
 }
 var PDF_TYPES = /* @__PURE__ */ new Set(["html", "document", "chart", "slides"]);
-var escapeHtml2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-var escapeAttr2 = (s) => escapeHtml2(s).replace(/"/g, "&quot;");
 function ExportMenu({ artifact: artifact2, getRenderedHtml }) {
   const [open, setOpen] = useState(false);
   const stem = slugify(artifact2.title);
   const dataOptions = dataExporters[artifact2.type] ?? [];
-  const exportHtml = () => {
+  const assetBaseUrl = useCanvasStore((s) => s.assetBaseUrl);
+  const prepare = () => inlineArtifactAssets(artifact2, assetBaseUrl);
+  const prepareHtml = (html) => assetBaseUrl ? inlineHtmlAssets(html, assetBaseUrl) : Promise.resolve(html);
+  const exportHtml = async () => {
     if (artifact2.type === "html") {
       const ratio = artifact2.meta?.ratio;
-      const html = artifact2.data.html;
+      const html = (await prepare()).data.html;
       downloadBlob(`${stem}.html`, "text/html", ratio ? htmlSlideToPrintHtml(html, ratio) : html);
     } else {
       const html = getRenderedHtml();
       if (html == null) return;
-      downloadBlob(`${stem}.html`, "text/html", toStandaloneHtml(artifact2.title, html));
+      downloadBlob(`${stem}.html`, "text/html", toStandaloneHtml(artifact2.title, await prepareHtml(html)));
     }
     setOpen(false);
   };
   const exportData = async (option) => {
-    const content = await option.build(artifact2);
+    const content = await option.build(await prepare());
     downloadBlob(`${stem}.${option.extension}`, option.mime, content);
     setOpen(false);
   };
-  const exportPdf = () => {
+  const exportPdf = async () => {
     if (artifact2.type === "slides") {
-      printToPdf(slidesToPrintHtml(artifact2.data, artifact2.title));
+      printToPdf(slidesToPrintHtml((await prepare()).data, artifact2.title));
     } else if (artifact2.type === "html") {
       const ratio = artifact2.meta?.ratio;
-      const html = artifact2.data.html;
+      const html = (await prepare()).data.html;
       printToPdf(ratio ? htmlSlideToPrintHtml(html, ratio) : html);
     } else {
       const html = getRenderedHtml();
       if (html == null) return;
-      printToPdf(toStandaloneHtml(artifact2.title, html));
+      printToPdf(toStandaloneHtml(artifact2.title, await prepareHtml(html)));
     }
     setOpen(false);
   };
-  const openInTab = () => {
-    const html = artifact2.type === "html" ? artifact2.data.html : artifact2.type === "slides" ? slidesToPrintHtml(artifact2.data, artifact2.title) : (() => {
+  const openInTab = async () => {
+    const html = artifact2.type === "html" ? (await prepare()).data.html : artifact2.type === "slides" ? slidesToPrintHtml((await prepare()).data, artifact2.title) : await (async () => {
       const h = getRenderedHtml();
-      return h == null ? null : toStandaloneHtml(artifact2.title, h);
+      return h == null ? null : toStandaloneHtml(artifact2.title, await prepareHtml(h));
     })();
     if (html == null) return;
-    const wrapper = `<!doctype html><html><head><meta charset="utf-8"><title>${escapeHtml2(artifact2.title)}</title><style>html,body{margin:0;height:100%}iframe{display:block;width:100%;height:100%;border:0}</style></head><body><iframe sandbox="allow-scripts allow-popups allow-modals" srcdoc="${escapeAttr2(html)}"></iframe></body></html>`;
-    const url = URL.createObjectURL(new Blob([wrapper], { type: "text/html" }));
+    const url = URL.createObjectURL(new Blob([html], { type: "text/html" }));
     window.open(url, "_blank", "noopener");
     setTimeout(() => URL.revokeObjectURL(url), 1e4);
     setOpen(false);
   };
   const [copied, setCopied] = useState(false);
   const copyHtml = async () => {
-    const html = artifact2.type === "html" ? artifact2.data.html : getRenderedHtml();
+    const html = artifact2.type === "html" ? (await prepare()).data.html : getRenderedHtml();
     if (html == null) return;
     try {
       await navigator.clipboard.writeText(
-        artifact2.type === "html" ? html : toStandaloneHtml(artifact2.title, html)
+        artifact2.type === "html" ? html : toStandaloneHtml(artifact2.title, await prepareHtml(html))
       );
       setCopied(true);
       setTimeout(() => setCopied(false), 1400);
@@ -3482,8 +2930,10 @@ function toHex2(value) {
   if (!parts || parts.length < 3) return "#000000";
   return "#" + parts.slice(0, 3).map((n) => Number(n).toString(16).padStart(2, "0")).join("");
 }
-function useCanvasImport() {
+function useCanvasImport({ onImported } = {}) {
   const api = useCanvasStoreApi();
+  const imported = useRef(onImported);
+  imported.current = onImported;
   const importFiles = useCallback(
     async (files) => {
       let lastId = null;
@@ -3496,6 +2946,7 @@ function useCanvasImport() {
           if (created && created.type === "canvas.create") {
             lastId = created.artifact.id;
             api.getState().setActiveArtifact(lastId);
+            imported.current?.(created.artifact, file);
           }
         } catch (err) {
           console.error("[langchain-canvas] import failed:", file.name, err);
@@ -3508,22 +2959,66 @@ function useCanvasImport() {
   return { importFiles, canImport };
 }
 var ACCEPT = IMPORTABLE_EXTENSIONS.join(",");
-function Canvas({ registry = builtinRenderers, emptyState, onEditElement, onUserEdit }) {
-  return /* @__PURE__ */ jsx(CanvasRegistryProvider, { registry, children: /* @__PURE__ */ jsx(CanvasPanel, { emptyState, onEditElement, onUserEdit }) });
-}
-function CanvasPanel({ emptyState, onEditElement, onUserEdit }) {
+function Canvas({
+  registry = builtinRenderers,
+  emptyState,
+  onEditElement,
+  onUserEdit,
+  onSave,
+  onFilesOpened,
+  onImported,
+  assetBaseUrl
+}) {
+  return /* @__PURE__ */ jsx(CanvasRegistryProvider, { registry, children: /* @__PURE__ */ jsx(
+    CanvasPanel,
+    {
+      emptyState,
+      onEditElement,
+      onUserEdit,
+      onSave,
+      onFilesOpened,
+      onImported,
+      assetBaseUrl
+    }
+  ) });
+}
+function CanvasPanel({
+  emptyState,
+  onEditElement,
+  onUserEdit,
+  onSave,
+  onFilesOpened,
+  onImported,
+  assetBaseUrl
+}) {
+  const debouncedSave = useCanvasSave(onSave);
   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 setOnUserEdit = useCanvasStore((s) => s.setOnUserEdit);
-  const { importFiles } = useCanvasImport();
+  const setAssetBaseUrl = useCanvasStore((s) => s.setAssetBaseUrl);
+  const { importFiles } = useCanvasImport({ onImported });
   const [dropping, setDropping] = useState(false);
   useEffect(() => {
-    setOnUserEdit(onUserEdit ?? null);
+    setAssetBaseUrl(assetBaseUrl ?? null);
+  }, [assetBaseUrl, setAssetBaseUrl]);
+  const openFiles = (files) => {
+    onFilesOpened?.(Array.from(files));
+    void importFiles(files);
+  };
+  useEffect(() => {
+    if (!onUserEdit && !debouncedSave) {
+      setOnUserEdit(null);
+      return;
+    }
+    setOnUserEdit((artifact2) => {
+      onUserEdit?.(artifact2);
+      debouncedSave?.(artifact2);
+    });
     return () => setOnUserEdit(null);
-  }, [onUserEdit, setOnUserEdit]);
+  }, [onUserEdit, debouncedSave, setOnUserEdit]);
   useEffect(() => {
     if (!selections.length) return;
     const onKey = (e) => {
@@ -3546,17 +3041,17 @@ function CanvasPanel({ emptyState, onEditElement, onUserEdit }) {
     onDrop: (e) => {
       e.preventDefault();
       setDropping(false);
-      if (e.dataTransfer.files.length) void importFiles(e.dataTransfer.files);
+      if (e.dataTransfer.files.length) openFiles(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 }),
+      emptyState ?? /* @__PURE__ */ jsx(EmptyState, { onOpenFiles: openFiles, acceptAll: Boolean(onFilesOpened) }),
       dropOverlay
     ] });
   }
-  const versions = history[active.id] ?? [active];
+  const versions2 = 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,
@@ -3571,18 +3066,18 @@ function CanvasPanel({ emptyState, onEditElement, onUserEdit }) {
       },
       id
     )) }),
-    /* @__PURE__ */ jsx(ArtifactView, { artifact: active, versions }, active.id),
+    /* @__PURE__ */ jsx(ArtifactView, { artifact: active, versions: versions2 }, 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 }) {
+function ArtifactView({ artifact: artifact2, versions: versions2 }) {
   const [viewIndex, setViewIndex] = useState(null);
   const bodyRef = useRef(null);
-  const shown = viewIndex === null ? artifact2 : versions[Math.min(viewIndex, versions.length - 1)] ?? artifact2;
-  const isHistory = viewIndex !== null && shown !== artifact2;
+  const shown = viewIndex === null ? artifact2 : versions2[viewIndex];
+  const viewingHistory = viewIndex !== null && viewIndex !== versions2.length - 1;
   const Renderer = useRenderer(shown.type);
   const getRenderedHtml = () => {
     const node = bodyRef.current;
@@ -3600,35 +3095,36 @@ function ArtifactView({ artifact: artifact2, versions }) {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "cv-header__actions", children: [
         /* @__PURE__ */ jsx(UndoRedo, {}),
-        versions.length > 1 && /* @__PURE__ */ jsx(
-          VersionRail,
+        versions2.length > 1 && /* @__PURE__ */ jsx(
+          VersionHistory,
           {
-            total: versions.length,
-            index: viewIndex ?? versions.length - 1,
-            onSelect: (i) => setViewIndex(i === versions.length - 1 ? null : i)
+            versions: versions2,
+            index: viewIndex ?? versions2.length - 1,
+            onSelect: (i) => setViewIndex(i === versions2.length - 1 ? null : i)
           }
         ),
         /* @__PURE__ */ jsx(ExportMenu, { artifact: shown, getRenderedHtml })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(
+    viewingHistory && /* @__PURE__ */ jsxs("div", { className: "cv-history-banner", role: "status", children: [
+      "Viewing v",
+      (viewIndex ?? 0) + 1,
+      " of ",
+      versions2.length,
+      " \u2014 read-only.",
+      " ",
+      /* @__PURE__ */ jsx("button", { onClick: () => setViewIndex(null), children: "Back to latest" })
+    ] }),
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: `cv-body${shown.type === "table" || shown.type === "pdf" ? " cv-body--flush" : ""}${isHistory ? " cv-body--history" : ""}`,
+        className: `cv-body${shown.type === "table" ? " cv-body--flush" : ""}${viewingHistory ? " cv-body--history" : ""}`,
         ref: bodyRef,
-        "aria-readonly": isHistory || void 0,
-        children: [
-          isHistory && /* @__PURE__ */ jsxs("div", { className: "cv-history-note", role: "status", children: [
-            "Viewing v",
-            Math.min(viewIndex + 1, versions.length),
-            " (read-only) \u2014 select the latest version to edit"
-          ] }),
-          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."
-          ] })
-        ]
+        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."
+        ] })
       }
     )
   ] });
@@ -3657,32 +3153,70 @@ function UndoRedo() {
     /* @__PURE__ */ jsx("button", { onClick: redo, disabled: !canRedo, title: "Redo (\u2318\u21E7Z)", "aria-label": "Redo", children: "\u21B7" })
   ] });
 }
-function VersionRail({ total, index, onSelect }) {
+function VersionHistory({
+  versions: versions2,
+  index,
+  onSelect
+}) {
+  const [open, setOpen] = useState(false);
+  const total = versions2.length;
+  const pick = (i) => {
+    setOpen(false);
+    onSelect(i);
+  };
   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 === 0, onClick: () => pick(index - 1), "aria-label": "Previous version", children: "\u2039" }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "cv-versions__label",
+        "aria-expanded": open,
+        "aria-label": "Open version history",
+        onClick: () => setOpen((v) => !v),
+        children: [
+          "v",
+          index + 1,
+          " / ",
+          total
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       "button",
       {
         className: "cv-versions__nav",
         disabled: index === total - 1,
-        onClick: () => onSelect(index + 1),
+        onClick: () => pick(index + 1),
         "aria-label": "Next version",
         children: "\u203A"
       }
-    )
+    ),
+    open && /* @__PURE__ */ jsx("ul", { className: "cv-versions__list", role: "listbox", "aria-label": "Versions", children: versions2.map((snapshot, i) => ({ snapshot, i })).reverse().map(({ snapshot, i }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        role: "option",
+        "aria-selected": i === index,
+        className: i === index ? "is-current" : void 0,
+        onClick: () => pick(i),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "cv-versions__v", children: [
+            "v",
+            i + 1
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "cv-versions__desc", children: typeof snapshot.meta?.commitDescription === "string" ? snapshot.meta.commitDescription : "Snapshot" })
+        ]
+      }
+    ) }, i)) })
   ] });
 }
 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 }) {
+function EmptyState({
+  onOpenFiles,
+  acceptAll = false
+}) {
   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" }),
@@ -3694,7 +3228,7 @@ function EmptyState({ onOpenFiles }) {
         {
           ref: inputRef,
           type: "file",
-          accept: ACCEPT,
+          accept: acceptAll ? void 0 : ACCEPT,
           multiple: true,
           hidden: true,
           onChange: (e) => {
@@ -3703,7 +3237,7 @@ function EmptyState({ onOpenFiles }) {
           }
         }
       ),
-      /* @__PURE__ */ jsx("p", { className: "cv-empty__formats", children: "CSV \xB7 Excel \xB7 Markdown \xB7 HTML \xB7 JSON" })
+      /* @__PURE__ */ jsx("p", { className: "cv-empty__formats", children: acceptAll ? "Any file \u2014 tables and pages open here, the rest goes to the agent" : "CSV \xB7 Excel \xB7 Markdown \xB7 HTML \xB7 JSON" })
     ] })
   ] });
 }
@@ -3713,7 +3247,7 @@ var TYPE_META = {
   chart: { icon: "\u{1F4CA}", label: "Chart" },
   table: { icon: "\u{1F522}", label: "Excel sheet" },
   slides: { icon: "\u{1F4FD}\uFE0F", label: "PowerPoint deck" },
-  pdf: { icon: "\u{1F4D5}", label: "PDF" }
+  file: { icon: "\u{1F4CE}", label: "File" }
 };
 var KIND_META = {
   web: TYPE_META.html,
@@ -3724,8 +3258,7 @@ var KIND_META = {
   table: TYPE_META.table,
   sheet: TYPE_META.table,
   slide: TYPE_META.slides,
-  slides: TYPE_META.slides,
-  pdf: TYPE_META.pdf
+  slides: TYPE_META.slides
 };
 function resolveCardMeta(artifact2) {
   const kind = typeof artifact2.meta?.kind === "string" ? artifact2.meta.kind : void 0;
@@ -3750,4 +3283,4 @@ function ArtifactCard({ artifactId }) {
   ] });
 }
 
-export { ArtifactCard, Canvas, CanvasRegistryProvider, ChartRenderer, DocumentRenderer, ExportMenu, HtmlRenderer, IMPORTABLE_EXTENSIONS, INSPECTOR_MARK, PdfRenderer, 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 };
+export { ArtifactCard, Canvas, CanvasRegistryProvider, ChartRenderer, DocumentRenderer, ExportMenu, FileRenderer, HtmlRenderer, IMPORTABLE_EXTENSIONS, INSPECTOR_MARK, STYLE_PROPS, SelectionBar, SlidesRenderer, StylePanel, TableRenderer, builtinRenderers, canImport, dataExporters, downloadBlob, importFile, mergeRegistries, mockStream, mockTransport, parseCsv, parseSSE, printToPdf, scenarios, slidesToPrintHtml, slugify, sseTransport, streamChat, toStandaloneHtml, useCanvasImport, useCanvasReplay, useCanvasSave, useCanvasStream, useRenderer, withInspector };