@june-ai/june-ui 0.2.8 → 0.2.10

package/dist/{chunk-H26BMR5S.js → chunk-JFIMNFNJ.js}

@@ -22,49 +22,120 @@ import {
 } from "./chunk-27XM6EVX.js";
 
 // src/engine/openui-devtools.tsx
+import { useEffect } from "react";
 import { OpenUIDevtools } from "@openuidev/devtools";
 import { jsx } from "react/jsx-runtime";
 var AUTO_MOUNT_FLAG = /* @__PURE__ */ Symbol.for("openui.devtools.autoMount");
 var BLOCKED_BY_JUNE = /* @__PURE__ */ Symbol.for("openui.devtools.blockedByJune");
+var AUTO_MOUNT_HOST = "data-openui-devtools-auto-mount";
 var flags = globalThis;
-var scheduledByOpenUI = flags[AUTO_MOUNT_FLAG] === true && flags[BLOCKED_BY_JUNE] !== true;
 flags[AUTO_MOUNT_FLAG] = true;
 flags[BLOCKED_BY_JUNE] = true;
 var DEVTOOLS_BUNDLE = "https://cdn.jsdelivr.net/npm/@openuidev/devtools@0/dist/devtools.browser.js";
 var ALIAS_CACHE_MS = 5 * 60 * 1e3;
-function claimDisabledDevtools() {
-  if (typeof document === "undefined") return () => {
-  };
+var LOCAL_WIDGET = "../../node_modules/@openuidev/devtools/dist/devtools.browser.js";
+var loadFromCdn = () => {
   const url = `${DEVTOOLS_BUNDLE}?t=${Math.floor(Date.now() / ALIAS_CACHE_MS)}`;
-  let cancelled = false;
-  let unmount = () => {
-    cancelled = true;
-  };
-  void Promise.all([
+  return Promise.all([
     import(
+      /* webpackIgnore: true */
       /* @vite-ignore */
       url
     ),
     import("react"),
     import("react-dom"),
     import("react-dom/client")
-  ]).then(([devtools, react, reactDom, reactDomClient]) => {
-    if (cancelled) return;
-    unmount = devtools.mountOpenUIDevtools({
-      React: react,
-      ReactDOM: reactDom,
-      ReactDOMClient: reactDomClient,
-      loadReactLang: () => import("@openuidev/react-lang"),
-      props: { enabled: false }
+  ]);
+};
+var loadInstalledOrCdn = async () => {
+  const [react, reactDom, reactDomClient] = await Promise.all([
+    import("react"),
+    import("react-dom"),
+    import("react-dom/client")
+  ]);
+  try {
+    const devtools = await import(LOCAL_WIDGET);
+    return [devtools, react, reactDom, reactDomClient];
+  } catch {
+    const [devtools] = await loadFromCdn();
+    return [devtools, react, reactDom, reactDomClient];
+  }
+};
+function nodeEnv() {
+  try {
+    return process.env.NODE_ENV;
+  } catch {
+    return void 0;
+  }
+}
+var isAutoMountHost = (node) => node instanceof Element && node.hasAttribute(AUTO_MOUNT_HOST);
+function createDevtoolsGuard(load = loadInstalledOrCdn) {
+  let started = false;
+  let claimed = false;
+  let observer = null;
+  let unmount = null;
+  let stopped = false;
+  const claim = () => {
+    if (claimed) return;
+    claimed = true;
+    observer?.disconnect();
+    observer = null;
+    load().then(([devtools, react, reactDom, reactDomClient]) => {
+      if (stopped) return;
+      unmount = devtools.mountOpenUIDevtools({
+        React: react,
+        ReactDOM: reactDom,
+        ReactDOMClient: reactDomClient,
+        loadReactLang: () => import("@openuidev/react-lang"),
+        props: { enabled: false }
+      });
+    }).catch(() => {
     });
-  }).catch(() => {
-  });
-  return () => unmount();
+  };
+  const watch = () => {
+    const body = document.body;
+    if (!body) return;
+    if (Array.from(body.children).some(isAutoMountHost)) {
+      claim();
+      return;
+    }
+    if (typeof MutationObserver === "undefined") return;
+    observer = new MutationObserver((records) => {
+      if (records.some((r) => Array.from(r.addedNodes).some(isAutoMountHost))) claim();
+    });
+    observer.observe(body, { childList: true });
+  };
+  return {
+    /** Starts watching (browser only). Safe to call many times. */
+    start() {
+      if (started || typeof document === "undefined") return;
+      started = true;
+      if (document.body) watch();
+      else document.addEventListener("DOMContentLoaded", watch, { once: true });
+    },
+    /** True once the disabled widget has been requested. */
+    get claimed() {
+      return claimed;
+    },
+    /** Stops watching and removes the disabled widget (tests, teardown). */
+    stop() {
+      stopped = true;
+      observer?.disconnect();
+      observer = null;
+      unmount?.();
+      unmount = null;
+    }
+  };
 }
-if (scheduledByOpenUI && process.env.NODE_ENV === "development" && process.env.VITEST !== "true" && typeof document !== "undefined") {
-  claimDisabledDevtools();
+var guard = createDevtoolsGuard();
+function hideOpenUIDevtools() {
+  if (nodeEnv() === "development") guard.start();
 }
+hideOpenUIDevtools();
 function OpenUIDevtoolsGate() {
+  useEffect(() => {
+    hideOpenUIDevtools();
+  }, []);
   return /* @__PURE__ */ jsx(OpenUIDevtools, { enabled: false });
 }
 
@@ -165,7 +236,7 @@ function useDocumentValue(store, id, selector) {
 }
 
 // src/features/document-editor/use-document-bridge.ts
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect as useEffect2, useMemo, useRef } from "react";
 
 // src/features/document-editor/document-merge.ts
 var MAX_CELLS = 4e6;
@@ -483,7 +554,7 @@ function useDocumentBridge(options) {
   const latest = useRef({ onResponseChange, responseChangeDelay, response, onJuneError });
   latest.current = { onResponseChange, responseChangeDelay, response, onJuneError };
   const timersRef = useRef(/* @__PURE__ */ new Map());
-  useEffect(() => {
+  useEffect2(() => {
     const timers = timersRef.current;
     return () => {
       timers.forEach(clearTimeout);
@@ -652,8 +723,10 @@ var ATTACHABLE = /* @__PURE__ */ new Set([
   "ImageGallery",
   "InlineHeader",
   "LineChart",
+  "FollowUpBlock",
   "ListBlock",
   "MarkDownRenderer",
+  "SectionBlock",
   "Modal",
   "OverviewCardBlock",
   "PieChart",
@@ -674,7 +747,7 @@ var ATTACHABLE = /* @__PURE__ */ new Set([
 ]);
 function normalizeProgram(source) {
   const rewritten = rewriteCalls(source);
-  return attachOrphans(rewritten);
+  return liftStackRoot(attachOrphans(rewritten));
 }
 function rewriteCalls(source) {
   let out = "";
@@ -818,7 +891,7 @@ function attachOrphans(source) {
   if (orphans.length === 0) return source;
   const names = orphans.map((stmt) => stmt.name);
   const root = stmts.find((stmt) => stmt.name === "root");
-  if (!root) return `root = Stack([${names.join(", ")}])
+  if (!root) return `root = Card([${names.join(", ")}])
 ${text}`;
   const rawRhs = text.slice(root.rhsStart, root.end);
   const lead = /^\s*/.exec(rawRhs)?.[0] ?? "";
@@ -827,10 +900,22 @@ ${text}`;
     return text.slice(0, root.rhsStart) + lead + spliced + text.slice(root.end);
   }
   const body = fresh(new Set(stmts.map((stmt) => stmt.name)), "rootBody");
-  const wrapped = `root = Stack([${body}, ${names.join(", ")}])
+  const wrapped = `root = Card([${body}, ${names.join(", ")}])
 ${body} = ${rawRhs.trim()}`;
   return text.slice(0, root.start) + wrapped + text.slice(root.end);
 }
+function liftStackRoot(source) {
+  const stmts = parseStatements(source);
+  if (!stmts) return source;
+  const root = stmts.find((stmt) => stmt.name === "root");
+  if (!root) return source;
+  const rhs = source.slice(root.rhsStart, root.end).trim();
+  if (!/^Stack\s*\(/.test(rhs)) return source;
+  const body = fresh(new Set(stmts.map((stmt) => stmt.name)), "rootLayout");
+  const wrapped = `root = Card([${body}])
+${body} = ${rhs}`;
+  return source.slice(0, root.start) + wrapped + source.slice(root.end);
+}
 function spliceFirstArray(rhs, names) {
   const match = /^([A-Za-z_]\w*)\s*\(/.exec(rhs);
   if (!match || match[1] !== "Stack" && match[1] !== "Card") return null;
@@ -971,7 +1056,7 @@ var STATEMENT_START = /^\$?[A-Za-z_]\w*\s*=/;
 var PENDING_IDENTIFIER = /^\s*\$?[A-Za-z_]\w*\s*$/;
 var FENCE = /^(`{3,})\s*([\w-]*)/;
 var OPENUI_FENCE_LANGS = /* @__PURE__ */ new Set(["", "openui", "openui-lang", "openuilang"]);
-function scan(line, state) {
+function scan(line, state, preserveQuote = false) {
   for (let i = 0; i < line.length; i++) {
     const ch = line[i];
     if (state.quote) {
@@ -985,7 +1070,95 @@ function scan(line, state) {
       state.depth = Math.max(0, state.depth - 1);
     }
   }
-  state.quote = null;
+  if (!preserveQuote) state.quote = null;
+}
+function quoteClosesLater(lines, from, state) {
+  const probe = { depth: state.depth, quote: state.quote };
+  for (let i = from; i < lines.length; i++) {
+    const line = lines[i];
+    if (probe.depth === 0 && STATEMENT_START.test(line.trim())) return false;
+    scan(line, probe, true);
+    if (!probe.quote) return true;
+  }
+  return false;
+}
+function decodeLangString(raw) {
+  let out = "";
+  for (let i = 0; i < raw.length; i++) {
+    const ch = raw[i];
+    if (ch === "\\" && i + 1 < raw.length) {
+      const next = raw[i + 1];
+      out += next === "n" ? "\n" : next === "t" ? "	" : next === "r" ? "\r" : next === "b" ? "\b" : next === "f" ? "\f" : next;
+      i++;
+      continue;
+    }
+    out += ch;
+  }
+  return out.replace(/\r/g, "");
+}
+function foldMultilineStrings(source) {
+  let out = "";
+  let i = 0;
+  while (i < source.length) {
+    if (source.startsWith('"""', i)) {
+      const end = source.indexOf('"""', i + 3);
+      if (end < 0) {
+        const nl = source.indexOf("\n", i);
+        if (nl < 0) {
+          out += source.slice(i);
+          break;
+        }
+        out += source.slice(i, nl + 1);
+        i = nl + 1;
+        continue;
+      }
+      out += JSON.stringify(source.slice(i + 3, end).replace(/\r/g, ""));
+      i = end + 3;
+      continue;
+    }
+    if (source[i] !== '"') {
+      out += source[i];
+      i++;
+      continue;
+    }
+    let j = i + 1;
+    let closed = false;
+    let hasNewline = false;
+    while (j < source.length) {
+      const ch = source[j];
+      if (ch === "\\") {
+        j += 2;
+        continue;
+      }
+      if (ch === "\n") {
+        if (STATEMENT_START.test(source.slice(j + 1))) break;
+        hasNewline = true;
+      }
+      if (ch === '"') {
+        closed = true;
+        break;
+      }
+      j++;
+    }
+    if (!closed) {
+      const nl = source.indexOf("\n", i);
+      if (nl < 0) {
+        out += source.slice(i);
+        break;
+      }
+      out += source.slice(i, nl + 1);
+      i = nl + 1;
+      continue;
+    }
+    if (!hasNewline) {
+      out += source.slice(i, j + 1);
+      i = j + 1;
+      continue;
+    }
+    out += JSON.stringify(decodeLangString(source.slice(i + 1, j)));
+    i = j + 1;
+  }
+  return out;
 }
 function splitResponse(source, options = {}) {
   const markdown = options.markdown === true;
@@ -1007,8 +1180,15 @@ function splitResponse(source, options = {}) {
     text = [];
     if (joined) (seenUi ? after : before).push(joined);
   };
-  for (const line of input.split(/\r?\n/)) {
+  const lines = input.split(/\r?\n/);
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
     const trimmed = line.trim();
+    if (state.quote) {
+      ui.push(line);
+      scan(line, state, true);
+      continue;
+    }
     if (codeFence !== null) {
       text.push(line);
       if (trimmed.startsWith(codeFence)) {
@@ -1037,7 +1217,8 @@ function splitResponse(source, options = {}) {
       flushText();
       seenUi = true;
       ui.push(line);
-      scan(line, state);
+      scan(line, state, true);
+      if (state.quote && !quoteClosesLater(lines, index + 1, state)) state.quote = null;
       continue;
     }
     if (trimmed === "") {
@@ -1049,7 +1230,7 @@ function splitResponse(source, options = {}) {
   flushText();
   return {
     before,
-    ui: ui.join("\n"),
+    ui: foldMultilineStrings(ui.join("\n")),
     after,
     pure: !sawFence && before.length === 0 && after.length === 0
   };
@@ -1059,7 +1240,7 @@ function splitResponse(source, options = {}) {
 function resolveMixedContent(response, options = {}) {
   const { mixedContent = true, isStreaming = false, repair = true, markdown = false } = options;
   const parts = mixedContent && response ? splitResponse(response, { streaming: isStreaming, markdown }) : null;
-  const raw = parts && !parts.pure ? parts.ui : response;
+  const raw = parts && !parts.pure ? parts.ui : typeof response === "string" ? foldMultilineStrings(response) : response;
   const ui = !repair || !mixedContent || isStreaming || typeof raw !== "string" || raw.length === 0 ? raw : normalizeProgram(raw);
   const before = parts?.before ?? [];
   const after = parts?.after ?? [];
@@ -1558,7 +1739,7 @@ function defineJuneAction(definition) {
 }
 
 // src/features/streaming/use-june-stream.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo4, useRef as useRef3, useState } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState } from "react";
 
 // src/features/streaming/stream-handler.ts
 function isReadableStream(source) {
@@ -1813,7 +1994,7 @@ function useJuneStream(options = {}) {
     clearTimer();
     setState(INITIAL);
   }, [clearTimer]);
-  useEffect2(
+  useEffect3(
     () => () => {
       runIdRef.current++;
       controllerRef.current?.abort();
@@ -1850,7 +2031,7 @@ function DocumentDraft({ title, words, state }) {
 
 // src/features/document-editor/document-editor.tsx
 import { useEditor } from "@tiptap/react";
-import { useCallback as useCallback4, useEffect as useEffect6, useId, useMemo as useMemo5, useRef as useRef8, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useId, useMemo as useMemo5, useRef as useRef8, useState as useState6 } from "react";
 
 // src/features/document-editor/document-bubble.tsx
 import { useEditorState as useEditorState2 } from "@tiptap/react";
@@ -2030,6 +2211,10 @@ var PATHS = {
     /* @__PURE__ */ jsx8("path", { d: "M18 6 6 18" }),
     /* @__PURE__ */ jsx8("path", { d: "m6 6 12 12" })
   ] }),
+  pencil: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx8("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
+    /* @__PURE__ */ jsx8("path", { d: "m15 5 4 4" })
+  ] }),
   maximize: /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsx8("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
     /* @__PURE__ */ jsx8("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
@@ -2082,12 +2267,12 @@ function Icon({ name, size = 16 }) {
 }
 
 // src/features/document-editor/document-popover.tsx
-import { useEffect as useEffect3, useRef as useRef4, useState as useState2 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function Dropdown({ trigger, children, align = "start", className, onOpen }) {
   const [open, setOpen] = useState2(false);
   const anchor = useRef4(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     const onDown = (e) => {
       if (anchor.current && !anchor.current.contains(e.target)) setOpen(false);
@@ -2707,13 +2892,13 @@ function DocumentBubbleMenu({ editor }) {
 
 // src/features/document-editor/document-content.tsx
 import { EditorContent } from "@tiptap/react";
-import { useEffect as useEffect4, useLayoutEffect, useRef as useRef6, useState as useState4 } from "react";
+import { useEffect as useEffect5, useLayoutEffect, useRef as useRef6, useState as useState4 } from "react";
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var PAGE_WIDTH = 794;
 var PAGE_HEIGHT = 1123;
 var PAGE_GAP = 28;
 var CANVAS_PAD_X = 24;
-var useIsoLayoutEffect = typeof window === "undefined" ? useEffect4 : useLayoutEffect;
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect5 : useLayoutEffect;
 function geometry(width) {
   const ratio = width / PAGE_WIDTH;
   const height = Math.round(PAGE_HEIGHT * ratio);
@@ -2749,7 +2934,7 @@ function DocumentContent({ editor, layout = "page", zoom = 1, showMarks = false,
     ro.observe(c);
     return () => ro.disconnect();
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!editor) return;
     setPaginationConfig(editor, {
       enabled: paged,
@@ -2759,7 +2944,7 @@ function DocumentContent({ editor, layout = "page", zoom = 1, showMarks = false,
       padBottom: g.padY
     });
   }, [editor, paged, g.height, g.padY, width]);
-  useEffect4(() => {
+  useEffect5(() => {
     const c = canvas.current;
     const s = sheet.current;
     if (!editor || !c || !s) return;
@@ -2815,7 +3000,7 @@ function DocumentContent({ editor, layout = "page", zoom = 1, showMarks = false,
 
 // src/features/document-editor/document-findbar.tsx
 import { useEditorState as useEditorState3 } from "@tiptap/react";
-import { useEffect as useEffect5, useRef as useRef7, useState as useState5 } from "react";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState5 } from "react";
 import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function DocumentFindBar({ editor, editable, onClose, onNotice }) {
   const [term, setTerm] = useState5(() => {
@@ -2832,14 +3017,14 @@ function DocumentFindBar({ editor, editable, onClose, onNotice }) {
       return { count: s?.matches.length ?? 0, current: s?.current ?? -1 };
     }
   });
-  useEffect5(() => {
+  useEffect6(() => {
     input.current?.focus();
     input.current?.select();
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     setSearch(editor, { term, caseSensitive, current: 0 });
   }, [editor, term, caseSensitive]);
-  useEffect5(() => () => {
+  useEffect6(() => () => {
     if (!editor.isDestroyed) setSearch(editor, { term: "" });
   }, [editor]);
   const count = info?.count ?? 0;
@@ -3534,7 +3719,7 @@ function DocumentEditorImpl(props) {
       return { json: null, error: toJuneError(e, "DOCUMENT_ERROR") };
     }
   }, [contentKey]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (parsed.error) optionsRef.current.onError?.(parsed.error);
   }, [parsed.error]);
   const title = useDocumentValue(store, documentId, (r) => r?.title ?? titleProp);
@@ -3550,7 +3735,7 @@ function DocumentEditorImpl(props) {
   const [findOpen, setFindOpen] = useState6(false);
   const [zoom, setZoom] = useState6(1);
   const [metrics, setMetrics] = useState6({ page: 1, pages: 1 });
-  useEffect6(() => {
+  useEffect7(() => {
     if (!fullscreen || typeof document === "undefined") return;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -3564,7 +3749,7 @@ function DocumentEditorImpl(props) {
   const flash = useCallback4((message) => {
     setNotice(message);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!notice) return;
     const t = setTimeout(() => setNotice(null), 3e3);
     return () => clearTimeout(t);
@@ -3582,7 +3767,7 @@ function DocumentEditorImpl(props) {
     const delay = options.autosaveDelay ?? 1500;
     return delay > 0 ? debounce(() => void saveRef.current(), delay) : null;
   }, [options.autosaveDelay]);
-  useEffect6(() => () => autosave?.flush(), [autosave]);
+  useEffect7(() => () => autosave?.flush(), [autosave]);
   saveRef.current = async () => {
     const record = store.get(documentId);
     const onSave = optionsRef.current.onSave;
@@ -3624,7 +3809,7 @@ function DocumentEditorImpl(props) {
     },
     [autosave]
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (saveState !== "saved" || options.onSave) return;
     const t = setTimeout(() => setSaveState((s) => s === "saved" ? "idle" : s), 2500);
     return () => clearTimeout(t);
@@ -3653,11 +3838,11 @@ function DocumentEditorImpl(props) {
     },
     onUpdate: ({ editor: ed }) => onUpdateRef.current(ed.getJSON())
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editor || editor.isEditable === editable) return;
     editor.setEditable(editable);
   }, [editor, editable]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!parsed.json) return;
     if (isDocumentEcho(store, documentId, contentKey)) return;
     const outcome = store.receive({
@@ -3679,7 +3864,7 @@ function DocumentEditorImpl(props) {
       });
     }
   }, [store, documentId, titleProp, parsed.json, documentType, status, emitChange, markDirty]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editor) return;
     const apply = () => {
       const record = store.get(documentId);
@@ -3696,7 +3881,7 @@ function DocumentEditorImpl(props) {
     apply();
     return store.subscribe(apply);
   }, [editor, store, documentId, instanceId]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!editor || readyRef.current) return;
     const record = store.get(documentId);
     if (!record) return;
@@ -3855,8 +4040,98 @@ function DocumentEditorImpl(props) {
   );
 }
 
+// src/features/document-editor/document-preview.tsx
+import { useEffect as useEffect8, useMemo as useMemo6, useState as useState7 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function DocumentPreview(props) {
+  const { documentId, title = "Untitled document", content, editable = true } = props;
+  const { theme: contextTheme } = useJuneTheme();
+  const resolvedTheme = props.theme && props.theme !== "auto" ? props.theme : contextTheme;
+  const ctxOptions = useDocumentOptions();
+  const store = useMemo6(() => props.options?.store ?? ctxOptions.store ?? getDefaultDocumentStore(), [props.options?.store, ctxOptions.store]);
+  const storedJson = useDocumentValue(store, documentId, (record) => record?.json);
+  const [open, setOpen] = useState7(false);
+  const [preferStore, setPreferStore] = useState7(false);
+  const contentKey = typeof content === "string" ? content : content ? JSON.stringify(content) : "";
+  useEffect8(() => {
+    setPreferStore(false);
+  }, [contentKey]);
+  const html = useMemo6(() => {
+    try {
+      const fromContent = contentKey ? parseDocumentContent(contentKey) : null;
+      const doc = preferStore && storedJson ? storedJson : fromContent;
+      return doc ? docToHtml(doc) : "";
+    } catch {
+      return "";
+    }
+  }, [contentKey, preferStore, storedJson]);
+  useEffect8(() => {
+    if (!open || typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+  const close = () => {
+    setPreferStore(true);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+    !open ? /* @__PURE__ */ jsxs11("section", { className: "june-doc june-doc-card", "data-theme": resolvedTheme, "aria-label": title, children: [
+      /* @__PURE__ */ jsxs11("div", { className: "june-doc-card__bar", children: [
+        /* @__PURE__ */ jsx17("span", { className: "june-doc-card__title", children: title }),
+        editable ? /* @__PURE__ */ jsx17("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Edit document", title: "Edit", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx17(Icon, { name: "pencil", size: 16 }) }) : null
+      ] }),
+      /* @__PURE__ */ jsx17("div", { className: "june-doc-card__canvas", children: /* @__PURE__ */ jsx17("div", { className: "june-doc-card__sheet", children: /* @__PURE__ */ jsx17("div", { className: "june-doc__prose", dangerouslySetInnerHTML: { __html: html } }) }) })
+    ] }) : null,
+    open && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx17("div", { className: "june-doc-modal", "data-theme": resolvedTheme, onMouseDown: close, children: /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          className: "june-doc june-doc-modal__panel",
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          tabIndex: -1,
+          "data-theme": resolvedTheme,
+          onMouseDown: (event) => event.stopPropagation(),
+          onKeyDown: (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented) return;
+            if (event.currentTarget.querySelector(".june-doc--fullscreen")) return;
+            close();
+          },
+          children: [
+            /* @__PURE__ */ jsx17("div", { className: "june-doc-modal__bar", children: /* @__PURE__ */ jsxs11("button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", "aria-label": "Close document", onClick: close, children: [
+              /* @__PURE__ */ jsx17(Icon, { name: "close", size: 16 }),
+              /* @__PURE__ */ jsx17("span", { children: "Close" })
+            ] }) }),
+            /* @__PURE__ */ jsx17("div", { className: "june-doc-modal__body", children: /* @__PURE__ */ jsx17(
+              DocumentEditorImpl,
+              {
+                documentId: props.documentId,
+                title: props.title,
+                content: props.content,
+                documentType: props.documentType,
+                status: props.status,
+                editable: props.editable,
+                exportFormats: props.exportFormats,
+                theme: props.theme,
+                generating: props.generating,
+                options: props.options
+              }
+            ) })
+          ]
+        }
+      ) }),
+      document.body
+    ) : null
+  ] });
+}
+
 // src/features/document-editor/document-component.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var DOCUMENT_COMPONENT_DESCRIPTION = 'Custom component. An editable document. DocumentEditor(documentId, title, content, documentType?, status?, editable?, exportFormats?). Place it in the root container (Card or Stack). "content" is the full document body as one Markdown string. Reuse documentId when revising the same document. Use it only when the user asks to create or revise a document.';
 var documentProps = z.object({
   documentId: z.string().describe("Stable id. Reuse it when revising the same document."),
@@ -3870,23 +4145,24 @@ var documentProps = z.object({
 function DocumentEditor(props) {
   const { isStreaming } = useJuneRuntime();
   if (props.generating || isStreaming) {
-    return /* @__PURE__ */ jsx17(DocumentDraft, { title: props.title, state: "drafting" });
+    return /* @__PURE__ */ jsx18(DocumentDraft, { title: props.title, state: "drafting" });
   }
-  return /* @__PURE__ */ jsx17(DocumentEditorImpl, { ...props });
+  return /* @__PURE__ */ jsx18(DocumentEditorImpl, { ...props });
 }
 function OpenUIDocument({ props }) {
-  return /* @__PURE__ */ jsx17(
-    DocumentEditor,
-    {
-      documentId: props.documentId,
-      title: props.title,
-      content: props.content,
-      documentType: props.documentType,
-      status: props.status,
-      editable: props.editable,
-      exportFormats: props.exportFormats
-    }
-  );
+  const { isStreaming } = useJuneRuntime();
+  const shared = {
+    documentId: props.documentId,
+    title: props.title,
+    content: props.content,
+    documentType: props.documentType,
+    status: props.status,
+    editable: props.editable,
+    exportFormats: props.exportFormats
+  };
+  if (isStreaming) return /* @__PURE__ */ jsx18(DocumentDraft, { title: props.title, state: "drafting" });
+  if (props.editable === false) return /* @__PURE__ */ jsx18(DocumentEditor, { ...shared });
+  return /* @__PURE__ */ jsx18(DocumentPreview, { ...shared });
 }
 var JuneDocumentEditorComponent = defineComponent3({
   name: "DocumentEditor",
@@ -3937,8 +4213,8 @@ function getDocumentEditorInstructions(options = {}) {
   const rules = getDocumentEditorRules(options);
   return ["Document drafting:", ...rules.map((rule, i) => `${i + 1}. ${rule}`)].join("\n");
 }
-var EXAMPLE_NEW = 'root = Stack([doc])\ndoc = DocumentEditor("business-proposal", "Business Proposal", "## Executive Summary\\n\\nThis proposal outlines [SERVICE] for [CLIENT NAME].\\n\\n## Scope of Work\\n\\n- Discovery\\n- Delivery\\n\\n## Pricing\\n\\n| Item | Cost |\\n| --- | --- |\\n| Discovery | [AMOUNT] |", "proposal", "draft")';
-var EXAMPLE_EDIT = 'root = Stack([doc])\ndoc = DocumentEditor("business-proposal", "Business Proposal", "## Executive Summary\\n\\nThis proposal outlines [SERVICE] for [CLIENT NAME].\\n\\n## Scope of Work\\n\\n- Discovery\\n- Delivery\\n\\n## Pricing\\n\\n| Item | Cost |\\n| --- | --- |\\n| Discovery | [AMOUNT] |\\n| Delivery | [AMOUNT] |", "proposal", "draft")';
+var EXAMPLE_NEW = 'root = Card([doc])\ndoc = DocumentEditor("business-proposal", "Business Proposal", "## Executive Summary\\n\\nThis proposal outlines [SERVICE] for [CLIENT NAME].\\n\\n## Scope of Work\\n\\n- Discovery\\n- Delivery\\n\\n## Pricing\\n\\n| Item | Cost |\\n| --- | --- |\\n| Discovery | [AMOUNT] |", "proposal", "draft")';
+var EXAMPLE_EDIT = 'root = Card([doc])\ndoc = DocumentEditor("business-proposal", "Business Proposal", "## Executive Summary\\n\\nThis proposal outlines [SERVICE] for [CLIENT NAME].\\n\\n## Scope of Work\\n\\n- Discovery\\n- Delivery\\n\\n## Pricing\\n\\n| Item | Cost |\\n| --- | --- |\\n| Discovery | [AMOUNT] |\\n| Delivery | [AMOUNT] |", "proposal", "draft")';
 function documentPromptOptions(options = {}) {
   return {
     additionalRules: getDocumentEditorRules(options),
@@ -3959,8 +4235,8 @@ ${docToMarkdown2(r.json)}
 }
 
 // src/features/tool-approval/tool-approval.tsx
-import { useId as useId2, useState as useState7 } from "react";
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useId as useId2, useState as useState8 } from "react";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var defaultToolApprovalLabels = {
   approve: "Approve",
   reject: "Reject",
@@ -3998,8 +4274,8 @@ function ToolApproval({
 }) {
   const labels = { ...defaultToolApprovalLabels, ...labelOverrides };
   const options = request.options?.length ? request.options : ["approve", "reject"];
-  const [draft, setDraft] = useState7(null);
-  const [draftError, setDraftError] = useState7(null);
+  const [draft, setDraft] = useState8(null);
+  const [draftError, setDraftError] = useState8(null);
   const titleId = useId2();
   const pending = status === "pending";
   const decide = (decision) => {
@@ -4017,7 +4293,7 @@ function ToolApproval({
     setDraft(null);
     decide({ choice: "edit", editedArguments });
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "section",
     {
       className: className ? `june-approval ${className}` : "june-approval",
@@ -4025,14 +4301,14 @@ function ToolApproval({
       "data-status": status,
       "data-risk": request.risk,
       children: [
-        /* @__PURE__ */ jsxs11("header", { className: "june-approval__header", children: [
-          /* @__PURE__ */ jsx18("strong", { id: titleId, className: "june-approval__tool", children: request.tool }),
-          request.risk && /* @__PURE__ */ jsx18("span", { className: "june-approval__badge", "data-risk": request.risk, children: labels.risk(request.risk) }),
-          request.sideEffect && /* @__PURE__ */ jsx18("span", { className: "june-approval__badge", children: labels.sideEffect[request.sideEffect] })
+        /* @__PURE__ */ jsxs12("header", { className: "june-approval__header", children: [
+          /* @__PURE__ */ jsx19("strong", { id: titleId, className: "june-approval__tool", children: request.tool }),
+          request.risk && /* @__PURE__ */ jsx19("span", { className: "june-approval__badge", "data-risk": request.risk, children: labels.risk(request.risk) }),
+          request.sideEffect && /* @__PURE__ */ jsx19("span", { className: "june-approval__badge", children: labels.sideEffect[request.sideEffect] })
         ] }),
-        request.description && /* @__PURE__ */ jsx18("p", { className: "june-approval__description", children: request.description }),
-        draft !== null ? /* @__PURE__ */ jsxs11("div", { className: "june-approval__edit", children: [
-          /* @__PURE__ */ jsx18(
+        request.description && /* @__PURE__ */ jsx19("p", { className: "june-approval__description", children: request.description }),
+        draft !== null ? /* @__PURE__ */ jsxs12("div", { className: "june-approval__edit", children: [
+          /* @__PURE__ */ jsx19(
             "textarea",
             {
               "aria-label": labels.edit,
@@ -4043,12 +4319,12 @@ function ToolApproval({
               spellCheck: false
             }
           ),
-          draftError && /* @__PURE__ */ jsx18("p", { role: "alert", className: "june-approval__error", children: draftError })
-        ] }) : hasArguments(request.arguments) ? renderArguments ? renderArguments(request.arguments) : /* @__PURE__ */ jsx18("pre", { className: "june-approval__args", children: format(request.arguments) }) : null,
-        pending ? /* @__PURE__ */ jsx18("div", { className: "june-approval__actions", children: draft !== null ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
-          /* @__PURE__ */ jsx18("button", { type: "button", className: "june-approval__button", "data-variant": "primary", onClick: saveEdit, disabled, children: labels.save }),
-          /* @__PURE__ */ jsx18("button", { type: "button", className: "june-approval__button", onClick: () => setDraft(null), disabled, children: labels.cancel })
-        ] }) : options.map((choice) => /* @__PURE__ */ jsx18(
+          draftError && /* @__PURE__ */ jsx19("p", { role: "alert", className: "june-approval__error", children: draftError })
+        ] }) : hasArguments(request.arguments) ? renderArguments ? renderArguments(request.arguments) : /* @__PURE__ */ jsx19("pre", { className: "june-approval__args", children: format(request.arguments) }) : null,
+        pending ? /* @__PURE__ */ jsx19("div", { className: "june-approval__actions", children: draft !== null ? /* @__PURE__ */ jsxs12(Fragment6, { children: [
+          /* @__PURE__ */ jsx19("button", { type: "button", className: "june-approval__button", "data-variant": "primary", onClick: saveEdit, disabled, children: labels.save }),
+          /* @__PURE__ */ jsx19("button", { type: "button", className: "june-approval__button", onClick: () => setDraft(null), disabled, children: labels.cancel })
+        ] }) : options.map((choice) => /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -4059,7 +4335,7 @@ function ToolApproval({
             children: labels[choice]
           },
           choice
-        )) }) : /* @__PURE__ */ jsxs11("p", { className: "june-approval__status", role: "status", children: [
+        )) }) : /* @__PURE__ */ jsxs12("p", { className: "june-approval__status", role: "status", children: [
           labels.status[status],
           status === "failed" && error ? `: ${error}` : null
         ] })
@@ -4069,12 +4345,12 @@ function ToolApproval({
 }
 
 // src/features/tool-approval/tool-approval-list.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function ToolApprovalList({ approvals, pendingOnly = false, renderItem, labels, className }) {
   const entries = pendingOnly ? approvals.entries.filter((e) => e.status === "pending") : approvals.entries;
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsx19("div", { className: className ? `june-approval-list ${className}` : "june-approval-list", children: entries.map(
-    (entry) => renderItem ? /* @__PURE__ */ jsx19("div", { children: renderItem(entry, approvals.decide) }, entry.request.id) : /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20("div", { className: className ? `june-approval-list ${className}` : "june-approval-list", children: entries.map(
+    (entry) => renderItem ? /* @__PURE__ */ jsx20("div", { children: renderItem(entry, approvals.decide) }, entry.request.id) : /* @__PURE__ */ jsx20(
       ToolApproval,
       {
         request: entry.request,
@@ -4089,11 +4365,11 @@ function ToolApprovalList({ approvals, pendingOnly = false, renderItem, labels,
 }
 
 // src/features/tool-approval/use-tool-approval.ts
-import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef9, useState as useState9 } from "react";
 var counter = 0;
 var nextId = () => `june-approval-${++counter}`;
 function useToolApproval() {
-  const [entries, setEntries] = useState8([]);
+  const [entries, setEntries] = useState9([]);
   const waiters = useRef9(/* @__PURE__ */ new Map());
   const settle = useCallback5((id, decision) => {
     const resolve = waiters.current.get(id);
@@ -4138,15 +4414,15 @@ function useToolApproval() {
     },
     [request]
   );
-  useEffect7(() => {
+  useEffect9(() => {
     const map = waiters.current;
     return () => {
       map.forEach((resolve) => resolve({ choice: "reject" }));
       map.clear();
     };
   }, []);
-  const pending = useMemo6(() => entries.filter((e) => e.status === "pending"), [entries]);
-  return useMemo6(
+  const pending = useMemo7(() => entries.filter((e) => e.status === "pending"), [entries]);
+  return useMemo7(
     () => ({ entries, pending, request, decide, setStatus, dismiss, confirmAction }),
     [entries, pending, request, decide, setStatus, dismiss, confirmAction]
   );