@june-ai/june-ui 0.2.8 → 0.2.10

package/dist/{chunk-3NVO336D.cjs → chunk-GS4J6OAF.cjs}

@@ -22,55 +22,126 @@
 var _chunkG6YPSE6Jcjs = require('./chunk-G6YPSE6J.cjs');
 
 // src/engine/openui-devtools.tsx
+var _react = require('react');
 var _devtools = require('@openuidev/devtools');
 var _jsxruntime = require('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([
     Promise.resolve().then(() => _interopRequireWildcard(require(
+      /* webpackIgnore: true */
       /* @vite-ignore */
       url
     ))),
     Promise.resolve().then(() => _interopRequireWildcard(require("react"))),
     Promise.resolve().then(() => _interopRequireWildcard(require("react-dom"))),
     Promise.resolve().then(() => _interopRequireWildcard(require("react-dom/client")))
-  ]).then(([devtools, react, reactDom, reactDomClient]) => {
-    if (cancelled) return;
-    unmount = devtools.mountOpenUIDevtools({
-      React: react,
-      ReactDOM: reactDom,
-      ReactDOMClient: reactDomClient,
-      loadReactLang: () => Promise.resolve().then(() => _interopRequireWildcard(require("@openuidev/react-lang"))),
-      props: { enabled: false }
+  ]);
+};
+var loadInstalledOrCdn = async () => {
+  const [react, reactDom, reactDomClient] = await Promise.all([
+    Promise.resolve().then(() => _interopRequireWildcard(require("react"))),
+    Promise.resolve().then(() => _interopRequireWildcard(require("react-dom"))),
+    Promise.resolve().then(() => _interopRequireWildcard(require("react-dom/client")))
+  ]);
+  try {
+    const devtools = await Promise.resolve().then(() => _interopRequireWildcard(require(LOCAL_WIDGET)));
+    return [devtools, react, reactDom, reactDomClient];
+  } catch (e2) {
+    const [devtools] = await loadFromCdn();
+    return [devtools, react, reactDom, reactDomClient];
+  }
+};
+function nodeEnv() {
+  try {
+    return process.env.NODE_ENV;
+  } catch (e3) {
+    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;
+    _optionalChain([observer, 'optionalAccess', _2 => _2.disconnect, 'call', _3 => _3()]);
+    observer = null;
+    load().then(([devtools, react, reactDom, reactDomClient]) => {
+      if (stopped) return;
+      unmount = devtools.mountOpenUIDevtools({
+        React: react,
+        ReactDOM: reactDom,
+        ReactDOMClient: reactDomClient,
+        loadReactLang: () => Promise.resolve().then(() => _interopRequireWildcard(require("@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;
+      _optionalChain([observer, 'optionalAccess', _4 => _4.disconnect, 'call', _5 => _5()]);
+      observer = null;
+      _optionalChain([unmount, 'optionalCall', _6 => _6()]);
+      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() {
+  _react.useEffect.call(void 0, () => {
+    hideOpenUIDevtools();
+  }, []);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _devtools.OpenUIDevtools, { enabled: false });
 }
 
 // src/engine/renderer/june-renderer.tsx
 var _reactlang = require('@openuidev/react-lang');
-var _react = require('react');
+
 
 // src/core/context.ts
 
@@ -108,7 +179,7 @@ async function runAction(event, options) {
   const parsed = parseEvent(event);
   const action = parsed && Object.prototype.hasOwnProperty.call(actions, parsed.name) ? actions[parsed.name] : void 0;
   if (!parsed || !action) {
-    _optionalChain([onUnhandled, 'optionalCall', _2 => _2(event)]);
+    _optionalChain([onUnhandled, 'optionalCall', _7 => _7(event)]);
     return "unhandled";
   }
   const { name } = parsed;
@@ -116,7 +187,7 @@ async function runAction(event, options) {
   if (action.schema) {
     const result = action.schema.safeParse(payload);
     if (!result.success) {
-      _optionalChain([onError, 'optionalCall', _3 => _3(
+      _optionalChain([onError, 'optionalCall', _8 => _8(
         new (0, _chunkG6YPSE6Jcjs.JuneError)("ACTION_VALIDATION_ERROR", `Invalid payload for action "${name}"`, {
           details: result.error
         })
@@ -129,7 +200,7 @@ async function runAction(event, options) {
     if (action.sensitive || action.confirm) {
       const ask = _nullishCoalesce(action.confirm, () => ( confirm));
       if (!ask) {
-        _optionalChain([onError, 'optionalCall', _4 => _4(
+        _optionalChain([onError, 'optionalCall', _9 => _9(
           new (0, _chunkG6YPSE6Jcjs.JuneError)(
             "ACTION_REJECTED",
             `Action "${name}" requires confirmation but no confirm handler was provided`
@@ -143,7 +214,7 @@ async function runAction(event, options) {
     await action.handler(payload, { name, event });
     return "handled";
   } catch (error) {
-    _optionalChain([onError, 'optionalCall', _5 => _5(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "ACTION_ERROR"))]);
+    _optionalChain([onError, 'optionalCall', _10 => _10(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "ACTION_ERROR"))]);
     return "failed";
   }
 }
@@ -351,7 +422,7 @@ function createDocumentStore() {
     },
     resolve(id, choice) {
       const current = records.get(id);
-      const pending = _optionalChain([current, 'optionalAccess', _6 => _6.pending]);
+      const pending = _optionalChain([current, 'optionalAccess', _11 => _11.pending]);
       if (!current || !pending) return;
       if (choice === "keep") {
         put({ ...current, baseJson: pending.json, baseTitle: pending.title, pending: null });
@@ -387,7 +458,7 @@ function rememberDocumentEcho(store, id, content) {
   byId.set(id, list2);
 }
 function isDocumentEcho(store, id, content) {
-  return !!content && !!_optionalChain([echoes, 'access', _7 => _7.get, 'call', _8 => _8(store), 'optionalAccess', _9 => _9.get, 'call', _10 => _10(id), 'optionalAccess', _11 => _11.includes, 'call', _12 => _12(content)]);
+  return !!content && !!_optionalChain([echoes, 'access', _12 => _12.get, 'call', _13 => _13(store), 'optionalAccess', _14 => _14.get, 'call', _15 => _15(id), 'optionalAccess', _16 => _16.includes, 'call', _17 => _17(content)]);
 }
 var defaultStore = null;
 function getDefaultDocumentStore() {
@@ -440,7 +511,7 @@ function updateDocumentInProgram(program, documentId, update, componentName = "D
       if (program[i] === ",") i++;
       else break;
     }
-    if (_optionalChain([args, 'access', _13 => _13[0], 'optionalAccess', _14 => _14.value]) !== documentId) continue;
+    if (_optionalChain([args, 'access', _18 => _18[0], 'optionalAccess', _19 => _19.value]) !== documentId) continue;
     const edits = [];
     if (update.title !== void 0 && args[1] && args[1].value !== update.title) {
       edits.push({ start: args[1].start, end: args[1].end, text: toLangString(update.title) });
@@ -472,7 +543,7 @@ function readDocumentFromProgram(program, documentId, componentName = "DocumentE
       if (program[i] === ",") i++;
       else break;
     }
-    if (_optionalChain([args, 'access', _15 => _15[0], 'optionalAccess', _16 => _16.value]) === documentId && args[1] && args[2]) return { title: args[1].value, content: args[2].value };
+    if (_optionalChain([args, 'access', _20 => _20[0], 'optionalAccess', _21 => _21.value]) === documentId && args[1] && args[2]) return { title: args[1].value, content: args[2].value };
   }
   return null;
 }
@@ -493,8 +564,8 @@ function useDocumentBridge(options) {
   const syncProgram = _react.useCallback.call(void 0, async (change, store) => {
     if (!latest.current.onResponseChange || typeof latest.current.response !== "string") return;
     const record = store.get(change.documentId);
-    const title = _nullishCoalesce(_optionalChain([record, 'optionalAccess', _17 => _17.title]), () => ( change.title));
-    const json = _nullishCoalesce(_optionalChain([record, 'optionalAccess', _18 => _18.json]), () => ( change.json));
+    const title = _nullishCoalesce(_optionalChain([record, 'optionalAccess', _22 => _22.title]), () => ( change.title));
+    const json = _nullishCoalesce(_optionalChain([record, 'optionalAccess', _23 => _23.json]), () => ( change.json));
     try {
       const { docToMarkdown: docToMarkdown2 } = await Promise.resolve().then(() => _interopRequireWildcard(require("./document-engine-GXZH2LNW.cjs")));
       const markdown = docToMarkdown2(json);
@@ -503,18 +574,18 @@ function useDocumentBridge(options) {
       const next = updateDocumentInProgram(program, change.documentId, { title, content: markdown });
       if (next === null || next === program) return;
       rememberDocumentEcho(store, change.documentId, markdown);
-      _optionalChain([latest, 'access', _19 => _19.current, 'access', _20 => _20.onResponseChange, 'optionalCall', _21 => _21(next, { documentId: change.documentId, title, markdown, source: change.source })]);
+      _optionalChain([latest, 'access', _24 => _24.current, 'access', _25 => _25.onResponseChange, 'optionalCall', _26 => _26(next, { documentId: change.documentId, title, markdown, source: change.source })]);
     } catch (error) {
-      _optionalChain([latest, 'access', _22 => _22.current, 'access', _23 => _23.onJuneError, 'optionalCall', _24 => _24(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "DOCUMENT_ERROR", "Updating the program failed"))]);
+      _optionalChain([latest, 'access', _27 => _27.current, 'access', _28 => _28.onJuneError, 'optionalCall', _29 => _29(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "DOCUMENT_ERROR", "Updating the program failed"))]);
     }
   }, []);
   return _react.useMemo.call(void 0, 
     () => ({
       ...documents,
       onDocumentChange: (change) => {
-        _optionalChain([documents, 'optionalAccess', _25 => _25.onDocumentChange, 'optionalCall', _26 => _26(change)]);
+        _optionalChain([documents, 'optionalAccess', _30 => _30.onDocumentChange, 'optionalCall', _31 => _31(change)]);
         if (!latest.current.onResponseChange || change.source === "ai") return;
-        const store = _nullishCoalesce(_optionalChain([documents, 'optionalAccess', _27 => _27.store]), () => ( getDefaultDocumentStore()));
+        const store = _nullishCoalesce(_optionalChain([documents, 'optionalAccess', _32 => _32.store]), () => ( getDefaultDocumentStore()));
         const timers = timersRef.current;
         const prev = timers.get(change.documentId);
         if (prev) clearTimeout(prev);
@@ -527,8 +598,8 @@ function useDocumentBridge(options) {
         );
       },
       onError: (error) => {
-        _optionalChain([documents, 'optionalAccess', _28 => _28.onError, 'optionalCall', _29 => _29(error)]);
-        _optionalChain([latest, 'access', _30 => _30.current, 'access', _31 => _31.onJuneError, 'optionalCall', _32 => _32(error)]);
+        _optionalChain([documents, 'optionalAccess', _33 => _33.onError, 'optionalCall', _34 => _34(error)]);
+        _optionalChain([latest, 'access', _35 => _35.current, 'access', _36 => _36.onJuneError, 'optionalCall', _37 => _37(error)]);
       }
     }),
     [documents, syncProgram]
@@ -592,7 +663,7 @@ function subscribe(onChange) {
 }
 function getSnapshot() {
   if (typeof window === "undefined") return "light";
-  return _optionalChain([window, 'access', _33 => _33.matchMedia, 'optionalCall', _34 => _34(QUERY), 'optionalAccess', _35 => _35.matches]) ? "dark" : "light";
+  return _optionalChain([window, 'access', _38 => _38.matchMedia, 'optionalCall', _39 => _39(QUERY), 'optionalAccess', _40 => _40.matches]) ? "dark" : "light";
 }
 function getServerSnapshot() {
   return "light";
@@ -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,19 +891,31 @@ 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 = _nullishCoalesce(_optionalChain([/^\s*/, 'access', _36 => _36.exec, 'call', _37 => _37(rawRhs), 'optionalAccess', _38 => _38[0]]), () => ( ""));
+  const lead = _nullishCoalesce(_optionalChain([/^\s*/, 'access', _41 => _41.exec, 'call', _42 => _42(rawRhs), 'optionalAccess', _43 => _43[0]]), () => ( ""));
   const spliced = spliceFirstArray(rawRhs.trim(), names);
   if (spliced !== null) {
     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,10 +1240,10 @@ 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 = _nullishCoalesce(_optionalChain([parts, 'optionalAccess', _39 => _39.before]), () => ( []));
-  const after = _nullishCoalesce(_optionalChain([parts, 'optionalAccess', _40 => _40.after]), () => ( []));
+  const before = _nullishCoalesce(_optionalChain([parts, 'optionalAccess', _44 => _44.before]), () => ( []));
+  const after = _nullishCoalesce(_optionalChain([parts, 'optionalAccess', _45 => _45.after]), () => ( []));
   return {
     before,
     ui,
@@ -1090,7 +1271,7 @@ var JuneErrorBoundary = class extends _react.Component {
     return { error };
   }
   componentDidCatch(error, info) {
-    _optionalChain([this, 'access', _41 => _41.props, 'access', _42 => _42.onError, 'optionalCall', _43 => _43(error, info)]);
+    _optionalChain([this, 'access', _46 => _46.props, 'access', _47 => _47.onError, 'optionalCall', _48 => _48(error, info)]);
   }
   componentDidUpdate(prev) {
     if (this.state.error && keysChanged(prev.resetKeys, this.props.resetKeys)) {
@@ -1151,37 +1332,37 @@ function JuneRenderer(props) {
   latest.current = { actions, confirmAction, parseActionEvent, onAction, onError, onJuneError };
   const handleAction = _react.useCallback.call(void 0, (event) => {
     const l = latest.current;
-    _optionalChain([l, 'access', _44 => _44.onAction, 'optionalCall', _45 => _45(event)]);
+    _optionalChain([l, 'access', _49 => _49.onAction, 'optionalCall', _50 => _50(event)]);
     if (l.actions) {
       void runAction(event, {
         actions: l.actions,
         parseEvent: l.parseActionEvent,
         confirm: l.confirmAction,
-        onError: (e) => _optionalChain([l, 'access', _46 => _46.onJuneError, 'optionalCall', _47 => _47(e)])
+        onError: (e) => _optionalChain([l, 'access', _51 => _51.onJuneError, 'optionalCall', _52 => _52(e)])
       });
     }
   }, []);
   const handleParserErrors = _react.useCallback.call(void 0, (errors) => {
     const list2 = Array.isArray(errors) ? errors : [];
     const l = latest.current;
-    _optionalChain([l, 'access', _48 => _48.onError, 'optionalCall', _49 => _49(list2)]);
-    const real = list2.filter((e) => _optionalChain([e, 'optionalAccess', _50 => _50.severity]) !== "warning");
+    _optionalChain([l, 'access', _53 => _53.onError, 'optionalCall', _54 => _54(list2)]);
+    const real = list2.filter((e) => _optionalChain([e, 'optionalAccess', _55 => _55.severity]) !== "warning");
     if (real.length > 0) {
-      _optionalChain([l, 'access', _51 => _51.onJuneError, 'optionalCall', _52 => _52(new (0, _chunkG6YPSE6Jcjs.JuneError)("PARSE_ERROR", `OpenUI reported ${real.length} error(s)`, { details: real }))]);
+      _optionalChain([l, 'access', _56 => _56.onJuneError, 'optionalCall', _57 => _57(new (0, _chunkG6YPSE6Jcjs.JuneError)("PARSE_ERROR", `OpenUI reported ${real.length} error(s)`, { details: real }))]);
     }
     if (list2.length > 0 && !l.onError && !l.onJuneError) {
       console.warn("[june-ui] OpenUI reported errors:", list2);
     }
   }, []);
   const handleBoundaryError = _react.useCallback.call(void 0, (error, info) => {
-    _optionalChain([latest, 'access', _53 => _53.current, 'access', _54 => _54.onJuneError, 'optionalCall', _55 => _55(
+    _optionalChain([latest, 'access', _58 => _58.current, 'access', _59 => _59.onJuneError, 'optionalCall', _60 => _60(
       new (0, _chunkG6YPSE6Jcjs.JuneError)("RENDER_ERROR", error.message, {
         cause: error,
         details: { componentStack: info.componentStack }
       })
     )]);
   }, []);
-  const handleDocumentError = _react.useCallback.call(void 0, (error) => _optionalChain([latest, 'access', _56 => _56.current, 'access', _57 => _57.onJuneError, 'optionalCall', _58 => _58(error)]), []);
+  const handleDocumentError = _react.useCallback.call(void 0, (error) => _optionalChain([latest, 'access', _61 => _61.current, 'access', _62 => _62.onJuneError, 'optionalCall', _63 => _63(error)]), []);
   const runtime = _react.useMemo.call(void 0, () => ({ isStreaming }), [isStreaming]);
   const content = _react.useMemo.call(void 0, 
     () => resolveMixedContent(response, { mixedContent, isStreaming, repair, markdown: textFormat === "markdown" }),
@@ -1227,8 +1408,8 @@ function JuneRenderer(props) {
 
 var NAME = /^[A-Z][A-Za-z0-9_]*$/;
 function isZodObject(value) {
-  const def = _optionalChain([value, 'optionalAccess', _59 => _59._zod, 'optionalAccess', _60 => _60.def]);
-  return _optionalChain([def, 'optionalAccess', _61 => _61.type]) === "object";
+  const def = _optionalChain([value, 'optionalAccess', _64 => _64._zod, 'optionalAccess', _65 => _65.def]);
+  return _optionalChain([def, 'optionalAccess', _66 => _66.type]) === "object";
 }
 function validateComponentDefinition(definition) {
   const { name } = definition;
@@ -1291,7 +1472,7 @@ function isJuneComponent(value) {
 // src/engine/registry/component-registry.ts
 
 function nameOf(component) {
-  const name = _optionalChain([component, 'optionalAccess', _62 => _62.name]);
+  const name = _optionalChain([component, 'optionalAccess', _67 => _67.name]);
   if (typeof name !== "string" || name.length === 0) {
     throw new (0, _chunkG6YPSE6Jcjs.JuneError)("LIBRARY_ERROR", "Every component needs a non-empty string name");
   }
@@ -1300,7 +1481,7 @@ function nameOf(component) {
 function slotsOf(component) {
   return isJuneComponent(component) ? component.june.slots : void 0;
 }
-var isDev = () => typeof process !== "undefined" && _optionalChain([process, 'access', _63 => _63.env, 'optionalAccess', _64 => _64.NODE_ENV]) === "development";
+var isDev = () => typeof process !== "undefined" && _optionalChain([process, 'access', _68 => _68.env, 'optionalAccess', _69 => _69.NODE_ENV]) === "development";
 var ComponentRegistry = class {
   constructor(options = {}) {
     this.added = /* @__PURE__ */ new Map();
@@ -1413,7 +1594,7 @@ var ComponentRegistry = class {
     if (!inBase || this.removed.has(name)) {
       throw new (0, _chunkG6YPSE6Jcjs.JuneError)("LIBRARY_ERROR", `Cannot remove "${name}": no component with that name.`);
     }
-    if (_optionalChain([this, 'access', _65 => _65.base, 'optionalAccess', _66 => _66.root]) === name) {
+    if (_optionalChain([this, 'access', _70 => _70.base, 'optionalAccess', _71 => _71.root]) === name) {
       throw new (0, _chunkG6YPSE6Jcjs.JuneError)("LIBRARY_ERROR", `Cannot remove "${name}": it is the root component.`);
     }
     this.removed.add(name);
@@ -1467,17 +1648,17 @@ var ComponentRegistry = class {
     try {
       return base.extend(extension(true));
     } catch (first) {
-      if (added.some((c) => _optionalChain([slotsOf, 'call', _67 => _67(c), 'optionalAccess', _68 => _68.length]))) {
+      if (added.some((c) => _optionalChain([slotsOf, 'call', _72 => _72(c), 'optionalAccess', _73 => _73.length]))) {
         try {
           const library = base.extend(extension(false));
           if (isDev()) console.warn("[june-ui] Component slots were skipped (they need Zod 4.1+):", first);
           return library;
-        } catch (e2) {
+        } catch (e4) {
         }
       }
       try {
         return this.rebuild(added, overrides);
-      } catch (e3) {
+      } catch (e5) {
         throw first;
       }
     }
@@ -1486,7 +1667,7 @@ var ComponentRegistry = class {
     const base = this.base;
     const replace = new Map(overrides.map((c) => [nameOf(c), c]));
     const components = Object.values(base.components).filter((c) => !this.removed.has(c.name)).map((c) => _nullishCoalesce(replace.get(c.name), () => ( c))).concat(added);
-    const componentGroups = _optionalChain([base, 'access', _69 => _69.componentGroups, 'optionalAccess', _70 => _70.map, 'call', _71 => _71((g) => ({ ...g, components: g.components.filter((n) => !this.removed.has(n)) })), 'access', _72 => _72.filter, 'call', _73 => _73((g) => g.components.length > 0)]);
+    const componentGroups = _optionalChain([base, 'access', _74 => _74.componentGroups, 'optionalAccess', _75 => _75.map, 'call', _76 => _76((g) => ({ ...g, components: g.components.filter((n) => !this.removed.has(n)) })), 'access', _77 => _77.filter, 'call', _78 => _78((g) => g.components.length > 0)]);
     return _reactlang.createLibrary.call(void 0, {
       components,
       componentGroups,
@@ -1517,7 +1698,7 @@ function createJuneLibrary(options) {
   const components = _nullishCoalesce(raw.components, () => ( []));
   const names = /* @__PURE__ */ new Set();
   for (const component of components) {
-    if (typeof _optionalChain([component, 'optionalAccess', _74 => _74.name]) !== "string" || component.name.length === 0) {
+    if (typeof _optionalChain([component, 'optionalAccess', _79 => _79.name]) !== "string" || component.name.length === 0) {
       throw new (0, _chunkG6YPSE6Jcjs.JuneError)("LIBRARY_ERROR", "Every component needs a non-empty string name");
     }
     if (names.has(component.name)) {
@@ -1570,7 +1751,7 @@ async function* iterateReadable(stream, signal) {
     void reader.cancel().catch(() => {
     });
   };
-  _optionalChain([signal, 'optionalAccess', _75 => _75.addEventListener, 'call', _76 => _76("abort", onAbort, { once: true })]);
+  _optionalChain([signal, 'optionalAccess', _80 => _80.addEventListener, 'call', _81 => _81("abort", onAbort, { once: true })]);
   try {
     while (true) {
       const { done, value } = await reader.read();
@@ -1578,10 +1759,10 @@ async function* iterateReadable(stream, signal) {
       yield value;
     }
   } finally {
-    _optionalChain([signal, 'optionalAccess', _77 => _77.removeEventListener, 'call', _78 => _78("abort", onAbort)]);
+    _optionalChain([signal, 'optionalAccess', _82 => _82.removeEventListener, 'call', _83 => _83("abort", onAbort)]);
     try {
       reader.releaseLock();
-    } catch (e4) {
+    } catch (e6) {
     }
   }
 }
@@ -1593,7 +1774,7 @@ function abortedError(partial) {
 }
 async function consumeStream(source, options = {}) {
   const { signal, onText, allowEmpty = false } = options;
-  if (_optionalChain([signal, 'optionalAccess', _79 => _79.aborted])) throw abortedError("");
+  if (_optionalChain([signal, 'optionalAccess', _84 => _84.aborted])) throw abortedError("");
   const decoder = new TextDecoder();
   let text = "";
   let received = false;
@@ -1601,23 +1782,23 @@ async function consumeStream(source, options = {}) {
     if (!delta) return;
     received = true;
     text += delta;
-    _optionalChain([onText, 'optionalCall', _80 => _80(delta, text)]);
+    _optionalChain([onText, 'optionalCall', _85 => _85(delta, text)]);
   };
   try {
     for await (const chunk of toAsyncIterable(source, signal)) {
-      if (_optionalChain([signal, 'optionalAccess', _81 => _81.aborted])) break;
+      if (_optionalChain([signal, 'optionalAccess', _86 => _86.aborted])) break;
       push(typeof chunk === "string" ? chunk : decoder.decode(chunk, { stream: true }));
     }
     push(decoder.decode());
   } catch (error) {
-    if (_optionalChain([signal, 'optionalAccess', _82 => _82.aborted])) throw abortedError(text);
+    if (_optionalChain([signal, 'optionalAccess', _87 => _87.aborted])) throw abortedError(text);
     if (error instanceof _chunkG6YPSE6Jcjs.JuneError) throw error;
     throw new (0, _chunkG6YPSE6Jcjs.JuneError)("STREAM_ERROR", "Stream was interrupted", {
       cause: error,
       details: { partial: text }
     });
   }
-  if (_optionalChain([signal, 'optionalAccess', _83 => _83.aborted])) throw abortedError(text);
+  if (_optionalChain([signal, 'optionalAccess', _88 => _88.aborted])) throw abortedError(text);
   if (!received && !allowEmpty) {
     throw new (0, _chunkG6YPSE6Jcjs.JuneError)("STREAM_EMPTY", "Stream completed without any content");
   }
@@ -1686,7 +1867,7 @@ function jsonFieldExtractor(path) {
         current = current[key];
       }
       return typeof current === "string" ? current : null;
-    } catch (e5) {
+    } catch (e7) {
       return null;
     }
   };
@@ -1699,7 +1880,7 @@ async function fetchStream(input, options = {}) {
   try {
     response = await fetch(input, init);
   } catch (error) {
-    if (_optionalChain([init, 'access', _84 => _84.signal, 'optionalAccess', _85 => _85.aborted])) {
+    if (_optionalChain([init, 'access', _89 => _89.signal, 'optionalAccess', _90 => _90.aborted])) {
       throw new (0, _chunkG6YPSE6Jcjs.JuneError)("STREAM_ABORTED", "Request was aborted", { cause: error });
     }
     throw new (0, _chunkG6YPSE6Jcjs.JuneError)("NETWORK_ERROR", "Network request failed", { cause: error });
@@ -1756,7 +1937,7 @@ function useJuneStream(options = {}) {
   }, []);
   const start = _react.useCallback.call(void 0, 
     async (input) => {
-      _optionalChain([controllerRef, 'access', _86 => _86.current, 'optionalAccess', _87 => _87.abort, 'call', _88 => _88()]);
+      _optionalChain([controllerRef, 'access', _91 => _91.current, 'optionalAccess', _92 => _92.abort, 'call', _93 => _93()]);
       const controller = new AbortController();
       controllerRef.current = controller;
       const runId = ++runIdRef.current;
@@ -1779,7 +1960,7 @@ function useJuneStream(options = {}) {
         if (stale()) return null;
         clearTimer();
         setState({ response: text, isStreaming: false, status: "done", error: null });
-        _optionalChain([optionsRef, 'access', _89 => _89.current, 'access', _90 => _90.onComplete, 'optionalCall', _91 => _91(text)]);
+        _optionalChain([optionsRef, 'access', _94 => _94.current, 'access', _95 => _95.onComplete, 'optionalCall', _96 => _96(text)]);
         return text;
       } catch (caught) {
         if (stale()) return null;
@@ -1793,7 +1974,7 @@ function useJuneStream(options = {}) {
           status: aborted ? "aborted" : "error",
           error: aborted ? null : error
         });
-        if (!aborted) _optionalChain([optionsRef, 'access', _92 => _92.current, 'access', _93 => _93.onError, 'optionalCall', _94 => _94(error)]);
+        if (!aborted) _optionalChain([optionsRef, 'access', _97 => _97.current, 'access', _98 => _98.onError, 'optionalCall', _99 => _99(error)]);
         return null;
       }
     },
@@ -1804,10 +1985,10 @@ function useJuneStream(options = {}) {
     [start]
   );
   const abort = _react.useCallback.call(void 0, () => {
-    _optionalChain([controllerRef, 'access', _95 => _95.current, 'optionalAccess', _96 => _96.abort, 'call', _97 => _97()]);
+    _optionalChain([controllerRef, 'access', _100 => _100.current, 'optionalAccess', _101 => _101.abort, 'call', _102 => _102()]);
   }, []);
   const reset = _react.useCallback.call(void 0, () => {
-    _optionalChain([controllerRef, 'access', _98 => _98.current, 'optionalAccess', _99 => _99.abort, 'call', _100 => _100()]);
+    _optionalChain([controllerRef, 'access', _103 => _103.current, 'optionalAccess', _104 => _104.abort, 'call', _105 => _105()]);
     runIdRef.current++;
     textRef.current = "";
     clearTimer();
@@ -1816,7 +1997,7 @@ function useJuneStream(options = {}) {
   _react.useEffect.call(void 0, 
     () => () => {
       runIdRef.current++;
-      _optionalChain([controllerRef, 'access', _101 => _101.current, 'optionalAccess', _102 => _102.abort, 'call', _103 => _103()]);
+      _optionalChain([controllerRef, 'access', _106 => _106.current, 'optionalAccess', _107 => _107.abort, 'call', _108 => _108()]);
       clearTimer();
     },
     [clearTimer]
@@ -2030,6 +2211,10 @@ var PATHS = {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M18 6 6 18" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m6 6 12 12" })
   ] }),
+  pencil: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "path", { d: "m15 5 4 4" })
+  ] }),
   maximize: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
@@ -2096,7 +2281,7 @@ function Dropdown({ trigger, children, align = "start", className, onOpen }) {
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
   const toggle = () => setOpen((v) => {
-    if (!v) _optionalChain([onOpen, 'optionalCall', _104 => _104()]);
+    if (!v) _optionalChain([onOpen, 'optionalCall', _109 => _109()]);
     return !v;
   });
   const close = () => setOpen(false);
@@ -2230,7 +2415,7 @@ function ColorPicker({ label, icon, colors, current, disabled, resetLabel, onPic
             style: { background: c },
             "aria-label": c,
             title: c,
-            "data-active": _optionalChain([current, 'optionalAccess', _105 => _105.toLowerCase, 'call', _106 => _106()]) === c ? true : void 0,
+            "data-active": _optionalChain([current, 'optionalAccess', _110 => _110.toLowerCase, 'call', _111 => _111()]) === c ? true : void 0,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => {
               onPick(c);
@@ -2344,7 +2529,7 @@ function ImagePanel({ editor, close, onNotice }) {
       {
         type: "button",
         className: "june-doc__dropzone",
-        onClick: () => _optionalChain([file, 'access', _107 => _107.current, 'optionalAccess', _108 => _108.click, 'call', _109 => _109()]),
+        onClick: () => _optionalChain([file, 'access', _112 => _112.current, 'optionalAccess', _113 => _113.click, 'call', _114 => _114()]),
         onDragOver: (e) => e.preventDefault(),
         onDrop: (e) => {
           e.preventDefault();
@@ -2363,7 +2548,7 @@ function ImagePanel({ editor, close, onNotice }) {
         type: "file",
         accept: "image/*",
         hidden: true,
-        onChange: (e) => fromFile(_optionalChain([e, 'access', _110 => _110.target, 'access', _111 => _111.files, 'optionalAccess', _112 => _112[0]]))
+        onChange: (e) => fromFile(_optionalChain([e, 'access', _115 => _115.target, 'access', _116 => _116.files, 'optionalAccess', _117 => _117[0]]))
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc__or", children: "or" }),
@@ -2468,9 +2653,9 @@ function DocumentToolbar(props) {
       };
     }
   });
-  const run = () => _optionalChain([editor, 'optionalAccess', _113 => _113.chain, 'call', _114 => _114(), 'access', _115 => _115.focus, 'call', _116 => _116()]);
+  const run = () => _optionalChain([editor, 'optionalAccess', _118 => _118.chain, 'call', _119 => _119(), 'access', _120 => _120.focus, 'call', _121 => _121()]);
   const off = !editor || !editable;
-  const style = _optionalChain([s, 'optionalAccess', _117 => _117.codeBlock]) ? "code" : _optionalChain([s, 'optionalAccess', _118 => _118.h1]) ? "1" : _optionalChain([s, 'optionalAccess', _119 => _119.h2]) ? "2" : _optionalChain([s, 'optionalAccess', _120 => _120.h3]) ? "3" : _optionalChain([s, 'optionalAccess', _121 => _121.quote]) ? "quote" : "p";
+  const style = _optionalChain([s, 'optionalAccess', _122 => _122.codeBlock]) ? "code" : _optionalChain([s, 'optionalAccess', _123 => _123.h1]) ? "1" : _optionalChain([s, 'optionalAccess', _124 => _124.h2]) ? "2" : _optionalChain([s, 'optionalAccess', _125 => _125.h3]) ? "3" : _optionalChain([s, 'optionalAccess', _126 => _126.quote]) ? "quote" : "p";
   const setStyle = (v) => {
     if (!editor || !s) return;
     let c = editor.chain().focus();
@@ -2484,35 +2669,35 @@ function DocumentToolbar(props) {
     }
     c.run();
   };
-  const fontKnown = FONT_FAMILIES.some((f) => f.value === _optionalChain([s, 'optionalAccess', _122 => _122.fontFamily]));
-  const sizes = _optionalChain([s, 'optionalAccess', _123 => _123.fontSize]) && !FONT_SIZES.includes(Number(s.fontSize)) ? [...FONT_SIZES, Number(s.fontSize)].sort((a, b) => a - b) : FONT_SIZES;
+  const fontKnown = FONT_FAMILIES.some((f) => f.value === _optionalChain([s, 'optionalAccess', _127 => _127.fontFamily]));
+  const sizes = _optionalChain([s, 'optionalAccess', _128 => _128.fontSize]) && !FONT_SIZES.includes(Number(s.fontSize)) ? [...FONT_SIZES, Number(s.fontSize)].sort((a, b) => a - b) : FONT_SIZES;
   if (!editable) return null;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "june-doc__ribbon", role: "toolbar", "aria-label": "Document formatting", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "june-doc__row", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Group, { label: "History", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Undo", icon: "undo", disabled: off || !_optionalChain([s, 'optionalAccess', _124 => _124.canUndo]), onClick: () => _optionalChain([run, 'call', _125 => _125(), 'optionalAccess', _126 => _126.undo, 'call', _127 => _127(), 'access', _128 => _128.run, 'call', _129 => _129()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Redo", icon: "redo", disabled: off || !_optionalChain([s, 'optionalAccess', _130 => _130.canRedo]), onClick: () => _optionalChain([run, 'call', _131 => _131(), 'optionalAccess', _132 => _132.redo, 'call', _133 => _133(), 'access', _134 => _134.run, 'call', _135 => _135()]) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Undo", icon: "undo", disabled: off || !_optionalChain([s, 'optionalAccess', _129 => _129.canUndo]), onClick: () => _optionalChain([run, 'call', _130 => _130(), 'optionalAccess', _131 => _131.undo, 'call', _132 => _132(), 'access', _133 => _133.run, 'call', _134 => _134()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Redo", icon: "redo", disabled: off || !_optionalChain([s, 'optionalAccess', _135 => _135.canRedo]), onClick: () => _optionalChain([run, 'call', _136 => _136(), 'optionalAccess', _137 => _137.redo, 'call', _138 => _138(), 'access', _139 => _139.run, 'call', _140 => _140()]) })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Group, { label: "Format", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Bold", icon: "bold", toggle: true, active: _optionalChain([s, 'optionalAccess', _136 => _136.bold]), disabled: off, onClick: () => _optionalChain([run, 'call', _137 => _137(), 'optionalAccess', _138 => _138.toggleBold, 'call', _139 => _139(), 'access', _140 => _140.run, 'call', _141 => _141()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Italic", icon: "italic", toggle: true, active: _optionalChain([s, 'optionalAccess', _142 => _142.italic]), disabled: off, onClick: () => _optionalChain([run, 'call', _143 => _143(), 'optionalAccess', _144 => _144.toggleItalic, 'call', _145 => _145(), 'access', _146 => _146.run, 'call', _147 => _147()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Underline", icon: "underline", toggle: true, active: _optionalChain([s, 'optionalAccess', _148 => _148.underline]), disabled: off, onClick: () => _optionalChain([run, 'call', _149 => _149(), 'optionalAccess', _150 => _150.toggleUnderline, 'call', _151 => _151(), 'access', _152 => _152.run, 'call', _153 => _153()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: _optionalChain([s, 'optionalAccess', _154 => _154.strike]), disabled: off, onClick: () => _optionalChain([run, 'call', _155 => _155(), 'optionalAccess', _156 => _156.toggleStrike, 'call', _157 => _157(), 'access', _158 => _158.run, 'call', _159 => _159()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Inline code", icon: "code", toggle: true, active: _optionalChain([s, 'optionalAccess', _160 => _160.code]), disabled: off, onClick: () => _optionalChain([run, 'call', _161 => _161(), 'optionalAccess', _162 => _162.toggleCode, 'call', _163 => _163(), 'access', _164 => _164.run, 'call', _165 => _165()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Superscript", icon: "superscript", toggle: true, active: _optionalChain([s, 'optionalAccess', _166 => _166.sup]), disabled: off, onClick: () => _optionalChain([run, 'call', _167 => _167(), 'optionalAccess', _168 => _168.toggleSuperscript, 'call', _169 => _169(), 'access', _170 => _170.run, 'call', _171 => _171()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Subscript", icon: "subscript", toggle: true, active: _optionalChain([s, 'optionalAccess', _172 => _172.sub]), disabled: off, onClick: () => _optionalChain([run, 'call', _173 => _173(), 'optionalAccess', _174 => _174.toggleSubscript, 'call', _175 => _175(), 'access', _176 => _176.run, 'call', _177 => _177()]) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Bold", icon: "bold", toggle: true, active: _optionalChain([s, 'optionalAccess', _141 => _141.bold]), disabled: off, onClick: () => _optionalChain([run, 'call', _142 => _142(), 'optionalAccess', _143 => _143.toggleBold, 'call', _144 => _144(), 'access', _145 => _145.run, 'call', _146 => _146()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Italic", icon: "italic", toggle: true, active: _optionalChain([s, 'optionalAccess', _147 => _147.italic]), disabled: off, onClick: () => _optionalChain([run, 'call', _148 => _148(), 'optionalAccess', _149 => _149.toggleItalic, 'call', _150 => _150(), 'access', _151 => _151.run, 'call', _152 => _152()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Underline", icon: "underline", toggle: true, active: _optionalChain([s, 'optionalAccess', _153 => _153.underline]), disabled: off, onClick: () => _optionalChain([run, 'call', _154 => _154(), 'optionalAccess', _155 => _155.toggleUnderline, 'call', _156 => _156(), 'access', _157 => _157.run, 'call', _158 => _158()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: _optionalChain([s, 'optionalAccess', _159 => _159.strike]), disabled: off, onClick: () => _optionalChain([run, 'call', _160 => _160(), 'optionalAccess', _161 => _161.toggleStrike, 'call', _162 => _162(), 'access', _163 => _163.run, 'call', _164 => _164()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Inline code", icon: "code", toggle: true, active: _optionalChain([s, 'optionalAccess', _165 => _165.code]), disabled: off, onClick: () => _optionalChain([run, 'call', _166 => _166(), 'optionalAccess', _167 => _167.toggleCode, 'call', _168 => _168(), 'access', _169 => _169.run, 'call', _170 => _170()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Superscript", icon: "superscript", toggle: true, active: _optionalChain([s, 'optionalAccess', _171 => _171.sup]), disabled: off, onClick: () => _optionalChain([run, 'call', _172 => _172(), 'optionalAccess', _173 => _173.toggleSuperscript, 'call', _174 => _174(), 'access', _175 => _175.run, 'call', _176 => _176()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Subscript", icon: "subscript", toggle: true, active: _optionalChain([s, 'optionalAccess', _177 => _177.sub]), disabled: off, onClick: () => _optionalChain([run, 'call', _178 => _178(), 'optionalAccess', _179 => _179.toggleSubscript, 'call', _180 => _180(), 'access', _181 => _181.run, 'call', _182 => _182()]) })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Group, { label: "Align", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Align left", icon: "alignLeft", toggle: true, active: _optionalChain([s, 'optionalAccess', _178 => _178.left]), disabled: off, onClick: () => _optionalChain([run, 'call', _179 => _179(), 'optionalAccess', _180 => _180.setTextAlign, 'call', _181 => _181("left"), 'access', _182 => _182.run, 'call', _183 => _183()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Align center", icon: "alignCenter", toggle: true, active: _optionalChain([s, 'optionalAccess', _184 => _184.center]), disabled: off, onClick: () => _optionalChain([run, 'call', _185 => _185(), 'optionalAccess', _186 => _186.setTextAlign, 'call', _187 => _187("center"), 'access', _188 => _188.run, 'call', _189 => _189()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Align right", icon: "alignRight", toggle: true, active: _optionalChain([s, 'optionalAccess', _190 => _190.right]), disabled: off, onClick: () => _optionalChain([run, 'call', _191 => _191(), 'optionalAccess', _192 => _192.setTextAlign, 'call', _193 => _193("right"), 'access', _194 => _194.run, 'call', _195 => _195()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Justify", icon: "alignJustify", toggle: true, active: _optionalChain([s, 'optionalAccess', _196 => _196.justify]), disabled: off, onClick: () => _optionalChain([run, 'call', _197 => _197(), 'optionalAccess', _198 => _198.setTextAlign, 'call', _199 => _199("justify"), 'access', _200 => _200.run, 'call', _201 => _201()]) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Align left", icon: "alignLeft", toggle: true, active: _optionalChain([s, 'optionalAccess', _183 => _183.left]), disabled: off, onClick: () => _optionalChain([run, 'call', _184 => _184(), 'optionalAccess', _185 => _185.setTextAlign, 'call', _186 => _186("left"), 'access', _187 => _187.run, 'call', _188 => _188()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Align center", icon: "alignCenter", toggle: true, active: _optionalChain([s, 'optionalAccess', _189 => _189.center]), disabled: off, onClick: () => _optionalChain([run, 'call', _190 => _190(), 'optionalAccess', _191 => _191.setTextAlign, 'call', _192 => _192("center"), 'access', _193 => _193.run, 'call', _194 => _194()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Align right", icon: "alignRight", toggle: true, active: _optionalChain([s, 'optionalAccess', _195 => _195.right]), disabled: off, onClick: () => _optionalChain([run, 'call', _196 => _196(), 'optionalAccess', _197 => _197.setTextAlign, 'call', _198 => _198("right"), 'access', _199 => _199.run, 'call', _200 => _200()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Justify", icon: "alignJustify", toggle: true, active: _optionalChain([s, 'optionalAccess', _201 => _201.justify]), disabled: off, onClick: () => _optionalChain([run, 'call', _202 => _202(), 'optionalAccess', _203 => _203.setTextAlign, 'call', _204 => _204("justify"), 'access', _205 => _205.run, 'call', _206 => _206()]) })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Group, { label: "Lists", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Bullet list", icon: "list", toggle: true, active: _optionalChain([s, 'optionalAccess', _202 => _202.bullet]), disabled: off, onClick: () => _optionalChain([run, 'call', _203 => _203(), 'optionalAccess', _204 => _204.toggleBulletList, 'call', _205 => _205(), 'access', _206 => _206.run, 'call', _207 => _207()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Numbered list", icon: "listOrdered", toggle: true, active: _optionalChain([s, 'optionalAccess', _208 => _208.ordered]), disabled: off, onClick: () => _optionalChain([run, 'call', _209 => _209(), 'optionalAccess', _210 => _210.toggleOrderedList, 'call', _211 => _211(), 'access', _212 => _212.run, 'call', _213 => _213()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Decrease indent", icon: "outdent", disabled: off || !_optionalChain([s, 'optionalAccess', _214 => _214.canLift]), onClick: () => _optionalChain([run, 'call', _215 => _215(), 'optionalAccess', _216 => _216.liftListItem, 'call', _217 => _217("listItem"), 'access', _218 => _218.run, 'call', _219 => _219()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Increase indent", icon: "indent", disabled: off || !_optionalChain([s, 'optionalAccess', _220 => _220.canSink]), onClick: () => _optionalChain([run, 'call', _221 => _221(), 'optionalAccess', _222 => _222.sinkListItem, 'call', _223 => _223("listItem"), 'access', _224 => _224.run, 'call', _225 => _225()]) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Bullet list", icon: "list", toggle: true, active: _optionalChain([s, 'optionalAccess', _207 => _207.bullet]), disabled: off, onClick: () => _optionalChain([run, 'call', _208 => _208(), 'optionalAccess', _209 => _209.toggleBulletList, 'call', _210 => _210(), 'access', _211 => _211.run, 'call', _212 => _212()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Numbered list", icon: "listOrdered", toggle: true, active: _optionalChain([s, 'optionalAccess', _213 => _213.ordered]), disabled: off, onClick: () => _optionalChain([run, 'call', _214 => _214(), 'optionalAccess', _215 => _215.toggleOrderedList, 'call', _216 => _216(), 'access', _217 => _217.run, 'call', _218 => _218()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Decrease indent", icon: "outdent", disabled: off || !_optionalChain([s, 'optionalAccess', _219 => _219.canLift]), onClick: () => _optionalChain([run, 'call', _220 => _220(), 'optionalAccess', _221 => _221.liftListItem, 'call', _222 => _222("listItem"), 'access', _223 => _223.run, 'call', _224 => _224()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Increase indent", icon: "indent", disabled: off || !_optionalChain([s, 'optionalAccess', _225 => _225.canSink]), onClick: () => _optionalChain([run, 'call', _226 => _226(), 'optionalAccess', _227 => _227.sinkListItem, 'call', _228 => _228("listItem"), 'access', _229 => _229.run, 'call', _230 => _230()]) })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "button",
@@ -2546,15 +2731,15 @@ function DocumentToolbar(props) {
             className: "june-doc__select june-doc__select--font",
             "aria-label": "Font family",
             disabled: off,
-            value: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _226 => _226.fontFamily]), () => ( "")),
+            value: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _231 => _231.fontFamily]), () => ( "")),
             onChange: (e) => {
               const v = e.target.value;
-              if (v) _optionalChain([run, 'call', _227 => _227(), 'optionalAccess', _228 => _228.setFontFamily, 'call', _229 => _229(v), 'access', _230 => _230.run, 'call', _231 => _231()]);
-              else _optionalChain([run, 'call', _232 => _232(), 'optionalAccess', _233 => _233.unsetFontFamily, 'call', _234 => _234(), 'access', _235 => _235.run, 'call', _236 => _236()]);
+              if (v) _optionalChain([run, 'call', _232 => _232(), 'optionalAccess', _233 => _233.setFontFamily, 'call', _234 => _234(v), 'access', _235 => _235.run, 'call', _236 => _236()]);
+              else _optionalChain([run, 'call', _237 => _237(), 'optionalAccess', _238 => _238.unsetFontFamily, 'call', _239 => _239(), 'access', _240 => _240.run, 'call', _241 => _241()]);
             },
             children: [
               FONT_FAMILIES.map((f) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: f.value, style: { fontFamily: f.value || void 0 }, children: f.label }, f.label)),
-              !fontKnown && _optionalChain([s, 'optionalAccess', _237 => _237.fontFamily]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: s.fontFamily, children: s.fontFamily.split(",")[0].replace(/['"]/g, "") }) : null
+              !fontKnown && _optionalChain([s, 'optionalAccess', _242 => _242.fontFamily]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: s.fontFamily, children: s.fontFamily.split(",")[0].replace(/['"]/g, "") }) : null
             ]
           }
         ) }),
@@ -2564,11 +2749,11 @@ function DocumentToolbar(props) {
             className: "june-doc__select june-doc__select--size",
             "aria-label": "Font size",
             disabled: off,
-            value: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _238 => _238.fontSize]), () => ( "")),
+            value: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _243 => _243.fontSize]), () => ( "")),
             onChange: (e) => {
               const v = e.target.value;
-              if (v) _optionalChain([run, 'call', _239 => _239(), 'optionalAccess', _240 => _240.setFontSize, 'call', _241 => _241(`${v}px`), 'access', _242 => _242.run, 'call', _243 => _243()]);
-              else _optionalChain([run, 'call', _244 => _244(), 'optionalAccess', _245 => _245.unsetFontSize, 'call', _246 => _246(), 'access', _247 => _247.run, 'call', _248 => _248()]);
+              if (v) _optionalChain([run, 'call', _244 => _244(), 'optionalAccess', _245 => _245.setFontSize, 'call', _246 => _246(`${v}px`), 'access', _247 => _247.run, 'call', _248 => _248()]);
+              else _optionalChain([run, 'call', _249 => _249(), 'optionalAccess', _250 => _250.unsetFontSize, 'call', _251 => _251(), 'access', _252 => _252.run, 'call', _253 => _253()]);
             },
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "", children: "Auto" }),
@@ -2579,8 +2764,8 @@ function DocumentToolbar(props) {
       ] }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Show formatting marks", icon: "pilcrow", toggle: true, active: showMarks, onClick: onToggleMarks, text: true, className: "june-doc__btn--marks", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Paragraph" }) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Group, { label: "Document", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Insert page break", icon: "pageBreak", disabled: off, onClick: () => _optionalChain([run, 'call', _249 => _249(), 'optionalAccess', _250 => _250.setPageBreak, 'call', _251 => _251(), 'access', _252 => _252.run, 'call', _253 => _253()]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Insert divider", icon: "divider", disabled: off, onClick: () => _optionalChain([run, 'call', _254 => _254(), 'optionalAccess', _255 => _255.setHorizontalRule, 'call', _256 => _256(), 'access', _257 => _257.run, 'call', _258 => _258()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Insert page break", icon: "pageBreak", disabled: off, onClick: () => _optionalChain([run, 'call', _254 => _254(), 'optionalAccess', _255 => _255.setPageBreak, 'call', _256 => _256(), 'access', _257 => _257.run, 'call', _258 => _258()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Insert divider", icon: "divider", disabled: off, onClick: () => _optionalChain([run, 'call', _259 => _259(), 'optionalAccess', _260 => _260.setHorizontalRule, 'call', _261 => _261(), 'access', _262 => _262.run, 'call', _263 => _263()]) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: layout === "page" ? "Switch to full-width layout" : "Switch to page layout", icon: "layout", toggle: true, active: layout === "fluid", onClick: onToggleLayout }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Find and replace", icon: "search", toggle: true, active: findOpen, onClick: onToggleFind })
       ] }),
@@ -2591,11 +2776,11 @@ function DocumentToolbar(props) {
             label: "Text color",
             icon: "palette",
             colors: TEXT_COLORS,
-            current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _259 => _259.color]), () => ( null)),
+            current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _264 => _264.color]), () => ( null)),
             disabled: off,
             resetLabel: "Default color",
-            onPick: (c) => _optionalChain([run, 'call', _260 => _260(), 'optionalAccess', _261 => _261.setColor, 'call', _262 => _262(c), 'access', _263 => _263.run, 'call', _264 => _264()]),
-            onReset: () => _optionalChain([run, 'call', _265 => _265(), 'optionalAccess', _266 => _266.unsetColor, 'call', _267 => _267(), 'access', _268 => _268.run, 'call', _269 => _269()])
+            onPick: (c) => _optionalChain([run, 'call', _265 => _265(), 'optionalAccess', _266 => _266.setColor, 'call', _267 => _267(c), 'access', _268 => _268.run, 'call', _269 => _269()]),
+            onReset: () => _optionalChain([run, 'call', _270 => _270(), 'optionalAccess', _271 => _271.unsetColor, 'call', _272 => _272(), 'access', _273 => _273.run, 'call', _274 => _274()])
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2604,11 +2789,11 @@ function DocumentToolbar(props) {
             label: "Highlight",
             icon: "highlighter",
             colors: HIGHLIGHT_COLORS,
-            current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _270 => _270.highlight]), () => ( null)),
+            current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _275 => _275.highlight]), () => ( null)),
             disabled: off,
             resetLabel: "No highlight",
-            onPick: (c) => _optionalChain([run, 'call', _271 => _271(), 'optionalAccess', _272 => _272.setHighlight, 'call', _273 => _273({ color: c }), 'access', _274 => _274.run, 'call', _275 => _275()]),
-            onReset: () => _optionalChain([run, 'call', _276 => _276(), 'optionalAccess', _277 => _277.unsetHighlight, 'call', _278 => _278(), 'access', _279 => _279.run, 'call', _280 => _280()])
+            onPick: (c) => _optionalChain([run, 'call', _276 => _276(), 'optionalAccess', _277 => _277.setHighlight, 'call', _278 => _278({ color: c }), 'access', _279 => _279.run, 'call', _280 => _280()]),
+            onReset: () => _optionalChain([run, 'call', _281 => _281(), 'optionalAccess', _282 => _282.unsetHighlight, 'call', _283 => _283(), 'access', _284 => _284.run, 'call', _285 => _285()])
           }
         )
       ] }),
@@ -2616,24 +2801,24 @@ function DocumentToolbar(props) {
         editor ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           Dropdown,
           {
-            trigger: ({ open, toggle }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Link", icon: "link", toggle: true, active: _optionalChain([s, 'optionalAccess', _281 => _281.link]) || open, disabled: off, onClick: toggle }),
-            children: (close) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkPanel, { editor, href: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _282 => _282.linkHref]), () => ( "")), isLink: !!_optionalChain([s, 'optionalAccess', _283 => _283.link]), close })
+            trigger: ({ open, toggle }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Link", icon: "link", toggle: true, active: _optionalChain([s, 'optionalAccess', _286 => _286.link]) || open, disabled: off, onClick: toggle }),
+            children: (close) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkPanel, { editor, href: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _287 => _287.linkHref]), () => ( "")), isLink: !!_optionalChain([s, 'optionalAccess', _288 => _288.link]), close })
           }
         ) : null,
         editor ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Insert image", icon: "image", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImagePanel, { editor, close, onNotice }) }) : null,
         editor ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Insert table", icon: "table", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TablePanel, { editor, close }) }) : null
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Group, { label: "Actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Clear formatting", icon: "eraser", disabled: off, onClick: () => _optionalChain([run, 'call', _284 => _284(), 'optionalAccess', _285 => _285.unsetAllMarks, 'call', _286 => _286(), 'access', _287 => _287.clearNodes, 'call', _288 => _288(), 'access', _289 => _289.run, 'call', _290 => _290()]) }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Group, { label: "Actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Clear formatting", icon: "eraser", disabled: off, onClick: () => _optionalChain([run, 'call', _289 => _289(), 'optionalAccess', _290 => _290.unsetAllMarks, 'call', _291 => _291(), 'access', _292 => _292.clearNodes, 'call', _293 => _293(), 'access', _294 => _294.run, 'call', _295 => _295()]) }) })
     ] }) : null,
-    _optionalChain([s, 'optionalAccess', _291 => _291.inTable]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc__row june-doc__row--context", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Group, { label: "Table", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Add row below", disabled: off, onClick: () => _optionalChain([run, 'call', _292 => _292(), 'optionalAccess', _293 => _293.addRowAfter, 'call', _294 => _294(), 'access', _295 => _295.run, 'call', _296 => _296()]), children: "+ Row" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Add column right", disabled: off, onClick: () => _optionalChain([run, 'call', _297 => _297(), 'optionalAccess', _298 => _298.addColumnAfter, 'call', _299 => _299(), 'access', _300 => _300.run, 'call', _301 => _301()]), children: "+ Column" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete row", disabled: off, onClick: () => _optionalChain([run, 'call', _302 => _302(), 'optionalAccess', _303 => _303.deleteRow, 'call', _304 => _304(), 'access', _305 => _305.run, 'call', _306 => _306()]), children: "\u2212 Row" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete column", disabled: off, onClick: () => _optionalChain([run, 'call', _307 => _307(), 'optionalAccess', _308 => _308.deleteColumn, 'call', _309 => _309(), 'access', _310 => _310.run, 'call', _311 => _311()]), children: "\u2212 Column" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Merge cells", disabled: off || !_optionalChain([s, 'optionalAccess', _312 => _312.canMerge]), onClick: () => _optionalChain([run, 'call', _313 => _313(), 'optionalAccess', _314 => _314.mergeCells, 'call', _315 => _315(), 'access', _316 => _316.run, 'call', _317 => _317()]), children: "Merge" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Split cell", disabled: off || !_optionalChain([s, 'optionalAccess', _318 => _318.canSplit]), onClick: () => _optionalChain([run, 'call', _319 => _319(), 'optionalAccess', _320 => _320.splitCell, 'call', _321 => _321(), 'access', _322 => _322.run, 'call', _323 => _323()]), children: "Split" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Toggle header row", disabled: off, onClick: () => _optionalChain([run, 'call', _324 => _324(), 'optionalAccess', _325 => _325.toggleHeaderRow, 'call', _326 => _326(), 'access', _327 => _327.run, 'call', _328 => _328()]), children: "Header row" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete table", disabled: off, onClick: () => _optionalChain([run, 'call', _329 => _329(), 'optionalAccess', _330 => _330.deleteTable, 'call', _331 => _331(), 'access', _332 => _332.run, 'call', _333 => _333()]), className: "june-doc__btn--danger", children: "Delete table" })
+    _optionalChain([s, 'optionalAccess', _296 => _296.inTable]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc__row june-doc__row--context", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Group, { label: "Table", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Add row below", disabled: off, onClick: () => _optionalChain([run, 'call', _297 => _297(), 'optionalAccess', _298 => _298.addRowAfter, 'call', _299 => _299(), 'access', _300 => _300.run, 'call', _301 => _301()]), children: "+ Row" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Add column right", disabled: off, onClick: () => _optionalChain([run, 'call', _302 => _302(), 'optionalAccess', _303 => _303.addColumnAfter, 'call', _304 => _304(), 'access', _305 => _305.run, 'call', _306 => _306()]), children: "+ Column" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete row", disabled: off, onClick: () => _optionalChain([run, 'call', _307 => _307(), 'optionalAccess', _308 => _308.deleteRow, 'call', _309 => _309(), 'access', _310 => _310.run, 'call', _311 => _311()]), children: "\u2212 Row" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete column", disabled: off, onClick: () => _optionalChain([run, 'call', _312 => _312(), 'optionalAccess', _313 => _313.deleteColumn, 'call', _314 => _314(), 'access', _315 => _315.run, 'call', _316 => _316()]), children: "\u2212 Column" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Merge cells", disabled: off || !_optionalChain([s, 'optionalAccess', _317 => _317.canMerge]), onClick: () => _optionalChain([run, 'call', _318 => _318(), 'optionalAccess', _319 => _319.mergeCells, 'call', _320 => _320(), 'access', _321 => _321.run, 'call', _322 => _322()]), children: "Merge" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Split cell", disabled: off || !_optionalChain([s, 'optionalAccess', _323 => _323.canSplit]), onClick: () => _optionalChain([run, 'call', _324 => _324(), 'optionalAccess', _325 => _325.splitCell, 'call', _326 => _326(), 'access', _327 => _327.run, 'call', _328 => _328()]), children: "Split" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Toggle header row", disabled: off, onClick: () => _optionalChain([run, 'call', _329 => _329(), 'optionalAccess', _330 => _330.toggleHeaderRow, 'call', _331 => _331(), 'access', _332 => _332.run, 'call', _333 => _333()]), children: "Header row" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete table", disabled: off, onClick: () => _optionalChain([run, 'call', _334 => _334(), 'optionalAccess', _335 => _335.deleteTable, 'call', _336 => _336(), 'access', _337 => _337.run, 'call', _338 => _338()]), className: "june-doc__btn--danger", children: "Delete table" })
     ] }) }) : null
   ] });
 }
@@ -2774,7 +2959,7 @@ function DocumentContent({ editor, layout = "page", zoom = 1, showMarks = false,
       const page = paged ? Math.min(total, Math.max(1, Math.floor(y / stride) + 1)) : 1;
       if (last.current.page !== page || last.current.pages !== total) {
         last.current = { page, pages: total };
-        _optionalChain([metricsRef, 'access', _334 => _334.current, 'optionalCall', _335 => _335({ page, pages: total })]);
+        _optionalChain([metricsRef, 'access', _339 => _339.current, 'optionalCall', _340 => _340({ page, pages: total })]);
       }
     };
     report();
@@ -2783,12 +2968,12 @@ function DocumentContent({ editor, layout = "page", zoom = 1, showMarks = false,
     const onLoad = () => _chunkG6YPSE6Jcjs.remeasurePagination.call(void 0, editor);
     prose.addEventListener("load", onLoad, true);
     const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(report) : null;
-    _optionalChain([ro, 'optionalAccess', _336 => _336.observe, 'call', _337 => _337(s)]);
+    _optionalChain([ro, 'optionalAccess', _341 => _341.observe, 'call', _342 => _342(s)]);
     return () => {
       editor.off("transaction", report);
       c.removeEventListener("scroll", report);
       prose.removeEventListener("load", onLoad, true);
-      _optionalChain([ro, 'optionalAccess', _338 => _338.disconnect, 'call', _339 => _339()]);
+      _optionalChain([ro, 'optionalAccess', _343 => _343.disconnect, 'call', _344 => _344()]);
     };
   }, [editor, paged, zoom, stride]);
   const minHeight = paged ? pages * g.height + (pages - 1) * PAGE_GAP : void 0;
@@ -2829,12 +3014,12 @@ function DocumentFindBar({ editor, editable, onClose, onNotice }) {
     editor,
     selector: ({ editor: ed }) => {
       const s = _chunkG6YPSE6Jcjs.getSearchState.call(void 0, ed);
-      return { count: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _340 => _340.matches, 'access', _341 => _341.length]), () => ( 0)), current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _342 => _342.current]), () => ( -1)) };
+      return { count: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _345 => _345.matches, 'access', _346 => _346.length]), () => ( 0)), current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _347 => _347.current]), () => ( -1)) };
     }
   });
   _react.useEffect.call(void 0, () => {
-    _optionalChain([input, 'access', _343 => _343.current, 'optionalAccess', _344 => _344.focus, 'call', _345 => _345()]);
-    _optionalChain([input, 'access', _346 => _346.current, 'optionalAccess', _347 => _347.select, 'call', _348 => _348()]);
+    _optionalChain([input, 'access', _348 => _348.current, 'optionalAccess', _349 => _349.focus, 'call', _350 => _350()]);
+    _optionalChain([input, 'access', _351 => _351.current, 'optionalAccess', _352 => _352.select, 'call', _353 => _353()]);
   }, []);
   _react.useEffect.call(void 0, () => {
     _chunkG6YPSE6Jcjs.setSearch.call(void 0, editor, { term, caseSensitive, current: 0 });
@@ -2842,8 +3027,8 @@ function DocumentFindBar({ editor, editable, onClose, onNotice }) {
   _react.useEffect.call(void 0, () => () => {
     if (!editor.isDestroyed) _chunkG6YPSE6Jcjs.setSearch.call(void 0, editor, { term: "" });
   }, [editor]);
-  const count = _nullishCoalesce(_optionalChain([info, 'optionalAccess', _349 => _349.count]), () => ( 0));
-  const current = _nullishCoalesce(_optionalChain([info, 'optionalAccess', _350 => _350.current]), () => ( -1));
+  const count = _nullishCoalesce(_optionalChain([info, 'optionalAccess', _354 => _354.count]), () => ( 0));
+  const current = _nullishCoalesce(_optionalChain([info, 'optionalAccess', _355 => _355.current]), () => ( -1));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
@@ -3121,12 +3306,12 @@ function toHalfPoints(value) {
   if (!m) return void 0;
   const n = Number(m[1]);
   if (!Number.isFinite(n) || n <= 0) return void 0;
-  const pt = _optionalChain([m, 'access', _351 => _351[2], 'optionalAccess', _352 => _352.toLowerCase, 'call', _353 => _353()]) === "pt" ? n : n * 0.75;
+  const pt = _optionalChain([m, 'access', _356 => _356[2], 'optionalAccess', _357 => _357.toLowerCase, 'call', _358 => _358()]) === "pt" ? n : n * 0.75;
   return Math.round(pt * 2);
 }
 function firstFontFamily(value) {
   if (typeof value !== "string") return void 0;
-  const first = _optionalChain([value, 'access', _354 => _354.split, 'call', _355 => _355(","), 'access', _356 => _356[0], 'optionalAccess', _357 => _357.trim, 'call', _358 => _358(), 'access', _359 => _359.replace, 'call', _360 => _360(/^['"]|['"]$/g, "")]);
+  const first = _optionalChain([value, 'access', _359 => _359.split, 'call', _360 => _360(","), 'access', _361 => _361[0], 'optionalAccess', _362 => _362.trim, 'call', _363 => _363(), 'access', _364 => _364.replace, 'call', _365 => _365(/^['"]|['"]$/g, "")]);
   return first || void 0;
 }
 var ORDERED_REF = "june-ordered";
@@ -3142,9 +3327,9 @@ function runs(d, node, fmt) {
     const marks = _nullishCoalesce(child.marks, () => ( []));
     const has = (type) => marks.some((m) => m.type === type);
     const link = marks.find((m) => m.type === "link");
-    const style = _nullishCoalesce(_optionalChain([marks, 'access', _361 => _361.find, 'call', _362 => _362((m) => m.type === "textStyle"), 'optionalAccess', _363 => _363.attrs]), () => ( {}));
+    const style = _nullishCoalesce(_optionalChain([marks, 'access', _366 => _366.find, 'call', _367 => _367((m) => m.type === "textStyle"), 'optionalAccess', _368 => _368.attrs]), () => ( {}));
     const highlight = marks.find((m) => m.type === "highlight");
-    const fill = highlight ? _nullishCoalesce(toDocxColor(_optionalChain([highlight, 'access', _364 => _364.attrs, 'optionalAccess', _365 => _365.color])), () => ( "FFF59D")) : void 0;
+    const fill = highlight ? _nullishCoalesce(toDocxColor(_optionalChain([highlight, 'access', _369 => _369.attrs, 'optionalAccess', _370 => _370.color])), () => ( "FFF59D")) : void 0;
     const run = new d.TextRun({
       text: child.text,
       bold: fmt.bold || has("bold") || void 0,
@@ -3158,13 +3343,13 @@ function runs(d, node, fmt) {
       color: _nullishCoalesce(toDocxColor(style.color), () => ( (link ? "0563C1" : void 0))),
       shading: fill ? { type: d.ShadingType.CLEAR, fill, color: "auto" } : void 0
     });
-    const href = typeof _optionalChain([link, 'optionalAccess', _366 => _366.attrs, 'optionalAccess', _367 => _367.href]) === "string" ? _chunkG6YPSE6Jcjs.sanitizeHref.call(void 0, link.attrs.href) : null;
+    const href = typeof _optionalChain([link, 'optionalAccess', _371 => _371.attrs, 'optionalAccess', _372 => _372.href]) === "string" ? _chunkG6YPSE6Jcjs.sanitizeHref.call(void 0, link.attrs.href) : null;
     out.push(href ? new d.ExternalHyperlink({ link: href, children: [run] }) : run);
   }
   return out;
 }
 function paragraph(d, node, fmt, extra = {}) {
-  const align = _optionalChain([node, 'access', _368 => _368.attrs, 'optionalAccess', _369 => _369.textAlign]);
+  const align = _optionalChain([node, 'access', _373 => _373.attrs, 'optionalAccess', _374 => _374.textAlign]);
   return new d.Paragraph({
     children: runs(d, node, fmt),
     alignment: align === "center" ? d.AlignmentType.CENTER : align === "right" ? d.AlignmentType.RIGHT : align === "justify" ? d.AlignmentType.JUSTIFIED : void 0,
@@ -3226,8 +3411,8 @@ function table(d, node, state) {
   return new d.Table({ rows, width: { size: 100, type: d.WidthType.PERCENTAGE } });
 }
 function image(d, node, state) {
-  const src = typeof _optionalChain([node, 'access', _370 => _370.attrs, 'optionalAccess', _371 => _371.src]) === "string" ? node.attrs.src : "";
-  const alt = typeof _optionalChain([node, 'access', _372 => _372.attrs, 'optionalAccess', _373 => _373.alt]) === "string" ? node.attrs.alt : "";
+  const src = typeof _optionalChain([node, 'access', _375 => _375.attrs, 'optionalAccess', _376 => _376.src]) === "string" ? node.attrs.src : "";
+  const alt = typeof _optionalChain([node, 'access', _377 => _377.attrs, 'optionalAccess', _378 => _378.alt]) === "string" ? node.attrs.alt : "";
   const img = state.images.get(src);
   if (img) {
     return [
@@ -3259,7 +3444,7 @@ function image(d, node, state) {
 }
 function collectImages(nodes, out) {
   for (const node of _nullishCoalesce(nodes, () => ( []))) {
-    const src = _optionalChain([node, 'access', _374 => _374.attrs, 'optionalAccess', _375 => _375.src]);
+    const src = _optionalChain([node, 'access', _379 => _379.attrs, 'optionalAccess', _380 => _380.src]);
     if (node.type === "image" && typeof src === "string" && src && !out.has(src)) out.set(src, node.attrs);
     if (node.content) collectImages(node.content, out);
   }
@@ -3296,14 +3481,14 @@ async function loadImage(src, attrs) {
     const type = IMAGE_TYPES[blob.type.toLowerCase()];
     if (!type) return null;
     const natural = await naturalSize(blob);
-    let width = Number(_optionalChain([attrs, 'optionalAccess', _376 => _376.width])) || natural.width;
-    let height = Number(_optionalChain([attrs, 'optionalAccess', _377 => _377.height])) || natural.height * width / natural.width;
+    let width = Number(_optionalChain([attrs, 'optionalAccess', _381 => _381.width])) || natural.width;
+    let height = Number(_optionalChain([attrs, 'optionalAccess', _382 => _382.height])) || natural.height * width / natural.width;
     if (width > MAX_IMAGE_WIDTH) {
       height = height * MAX_IMAGE_WIDTH / width;
       width = MAX_IMAGE_WIDTH;
     }
     return { data: new Uint8Array(await blob.arrayBuffer()), type, width: Math.round(width), height: Math.round(height) };
-  } catch (e6) {
+  } catch (e8) {
     return null;
   }
 }
@@ -3328,7 +3513,7 @@ function blocks(d, nodes, fmt, state) {
         out.push(paragraph(d, node, fmt));
         break;
       case "heading": {
-        const level = Math.min(Math.max(Number(_optionalChain([node, 'access', _378 => _378.attrs, 'optionalAccess', _379 => _379.level])) || 1, 1), 3);
+        const level = Math.min(Math.max(Number(_optionalChain([node, 'access', _383 => _383.attrs, 'optionalAccess', _384 => _384.level])) || 1, 1), 3);
         out.push(paragraph(d, node, fmt, { heading: headings[level - 1] }));
         break;
       }
@@ -3462,7 +3647,7 @@ async function copyDocumentToClipboard(doc) {
 
 ${docToText(doc.json)}`;
   try {
-    if (typeof ClipboardItem !== "undefined" && _optionalChain([navigator, 'access', _380 => _380.clipboard, 'optionalAccess', _381 => _381.write])) {
+    if (typeof ClipboardItem !== "undefined" && _optionalChain([navigator, 'access', _385 => _385.clipboard, 'optionalAccess', _386 => _386.write])) {
       await navigator.clipboard.write([
         new ClipboardItem({
           "text/html": new Blob([html], { type: "text/html" }),
@@ -3473,7 +3658,7 @@ ${docToText(doc.json)}`;
     }
     await navigator.clipboard.writeText(text);
     return true;
-  } catch (e7) {
+  } catch (e9) {
     return false;
   }
 }
@@ -3535,12 +3720,12 @@ function DocumentEditorImpl(props) {
     }
   }, [contentKey]);
   _react.useEffect.call(void 0, () => {
-    if (parsed.error) _optionalChain([optionsRef, 'access', _382 => _382.current, 'access', _383 => _383.onError, 'optionalCall', _384 => _384(parsed.error)]);
+    if (parsed.error) _optionalChain([optionsRef, 'access', _387 => _387.current, 'access', _388 => _388.onError, 'optionalCall', _389 => _389(parsed.error)]);
   }, [parsed.error]);
-  const title = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _385 => _385.title]), () => ( titleProp)));
-  const pending = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _386 => _386.pending]), () => ( null)));
+  const title = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _390 => _390.title]), () => ( titleProp)));
+  const pending = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _391 => _391.pending]), () => ( null)));
   const words = useDocumentValue(store, documentId, (r) => r ? _chunkG6YPSE6Jcjs.wordCountOf.call(void 0, r.json) : 0);
-  const recordStatus = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _387 => _387.status]), () => ( status)));
+  const recordStatus = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _392 => _392.status]), () => ( status)));
   const [saveState, setSaveState] = _react.useState.call(void 0, "idle");
   const [notice, setNotice] = _react.useState.call(void 0, null);
   const [fullscreen, setFullscreen] = _react.useState.call(void 0, false);
@@ -3559,7 +3744,7 @@ function DocumentEditorImpl(props) {
     };
   }, [fullscreen]);
   const lastSavedKey = _react.useRef.call(void 0, "");
-  const seenRevision = _react.useRef.call(void 0, _nullishCoalesce(_optionalChain([store, 'access', _388 => _388.get, 'call', _389 => _389(documentId), 'optionalAccess', _390 => _390.revision]), () => ( 0)));
+  const seenRevision = _react.useRef.call(void 0, _nullishCoalesce(_optionalChain([store, 'access', _393 => _393.get, 'call', _394 => _394(documentId), 'optionalAccess', _395 => _395.revision]), () => ( 0)));
   const readyRef = _react.useRef.call(void 0, false);
   const flash = _react.useCallback.call(void 0, (message) => {
     setNotice(message);
@@ -3572,7 +3757,7 @@ function DocumentEditorImpl(props) {
   const emitChange = _react.useCallback.call(void 0, 
     (source) => {
       const record = store.get(documentId);
-      if (record) _optionalChain([optionsRef, 'access', _391 => _391.current, 'access', _392 => _392.onDocumentChange, 'optionalCall', _393 => _393({ ...snapshotOf(record), source })]);
+      if (record) _optionalChain([optionsRef, 'access', _396 => _396.current, 'access', _397 => _397.onDocumentChange, 'optionalCall', _398 => _398({ ...snapshotOf(record), source })]);
     },
     [store, documentId]
   );
@@ -3582,7 +3767,7 @@ function DocumentEditorImpl(props) {
     const delay = _nullishCoalesce(options.autosaveDelay, () => ( 1500));
     return delay > 0 ? _chunkG6YPSE6Jcjs.debounce.call(void 0, () => void saveRef.current(), delay) : null;
   }, [options.autosaveDelay]);
-  _react.useEffect.call(void 0, () => () => _optionalChain([autosave, 'optionalAccess', _394 => _394.flush, 'call', _395 => _395()]), [autosave]);
+  _react.useEffect.call(void 0, () => () => _optionalChain([autosave, 'optionalAccess', _399 => _399.flush, 'call', _400 => _400()]), [autosave]);
   saveRef.current = async () => {
     const record = store.get(documentId);
     const onSave = optionsRef.current.onSave;
@@ -3610,7 +3795,7 @@ function DocumentEditorImpl(props) {
       setSaveState(latestKey === key ? "saved" : "dirty");
     } catch (error) {
       setSaveState("error");
-      _optionalChain([optionsRef, 'access', _396 => _396.current, 'access', _397 => _397.onError, 'optionalCall', _398 => _398(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "DOCUMENT_ERROR", "Saving the document failed"))]);
+      _optionalChain([optionsRef, 'access', _401 => _401.current, 'access', _402 => _402.onError, 'optionalCall', _403 => _403(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "DOCUMENT_ERROR", "Saving the document failed"))]);
     }
   };
   const markDirty = _react.useCallback.call(void 0, 
@@ -3620,7 +3805,7 @@ function DocumentEditorImpl(props) {
         return;
       }
       setSaveState("dirty");
-      _optionalChain([autosave, 'optionalCall', _399 => _399()]);
+      _optionalChain([autosave, 'optionalCall', _404 => _404()]);
     },
     [autosave]
   );
@@ -3629,7 +3814,7 @@ function DocumentEditorImpl(props) {
     const t = setTimeout(() => setSaveState((s) => s === "saved" ? "idle" : s), 2500);
     return () => clearTimeout(t);
   }, [saveState, options.onSave]);
-  const [initialJson] = _react.useState.call(void 0, () => _nullishCoalesce(_nullishCoalesce(_optionalChain([store, 'access', _400 => _400.get, 'call', _401 => _401(documentId), 'optionalAccess', _402 => _402.json]), () => ( parsed.json)), () => ( _chunkG6YPSE6Jcjs.emptyDoc.call(void 0, ))));
+  const [initialJson] = _react.useState.call(void 0, () => _nullishCoalesce(_nullishCoalesce(_optionalChain([store, 'access', _405 => _405.get, 'call', _406 => _406(documentId), 'optionalAccess', _407 => _407.json]), () => ( parsed.json)), () => ( _chunkG6YPSE6Jcjs.emptyDoc.call(void 0, ))));
   const extensions = _react.useMemo.call(void 0, () => _chunkG6YPSE6Jcjs.createDocumentExtensions.call(void 0, ), []);
   const onUpdateRef = _react.useRef.call(void 0, () => {
   });
@@ -3672,10 +3857,10 @@ function DocumentEditorImpl(props) {
       markDirty(false);
     } else if (outcome === "conflict") {
       const record = store.get(documentId);
-      _optionalChain([optionsRef, 'access', _403 => _403.current, 'access', _404 => _404.onConflict, 'optionalCall', _405 => _405({
+      _optionalChain([optionsRef, 'access', _408 => _408.current, 'access', _409 => _409.onConflict, 'optionalCall', _410 => _410({
         documentId,
-        title: _nullishCoalesce(_optionalChain([record, 'optionalAccess', _406 => _406.title]), () => ( titleProp)),
-        conflicts: _nullishCoalesce(_optionalChain([record, 'optionalAccess', _407 => _407.pending, 'optionalAccess', _408 => _408.conflicts]), () => ( 1))
+        title: _nullishCoalesce(_optionalChain([record, 'optionalAccess', _411 => _411.title]), () => ( titleProp)),
+        conflicts: _nullishCoalesce(_optionalChain([record, 'optionalAccess', _412 => _412.pending, 'optionalAccess', _413 => _413.conflicts]), () => ( 1))
       })]);
     }
   }, [store, documentId, titleProp, parsed.json, documentType, status, emitChange, markDirty]);
@@ -3702,7 +3887,7 @@ function DocumentEditorImpl(props) {
     if (!record) return;
     readyRef.current = true;
     lastSavedKey.current = JSON.stringify([record.title, _chunkG6YPSE6Jcjs.docKey.call(void 0, record.json)]);
-    _optionalChain([optionsRef, 'access', _409 => _409.current, 'access', _410 => _410.onDocumentReady, 'optionalCall', _411 => _411(snapshotOf(record))]);
+    _optionalChain([optionsRef, 'access', _414 => _414.current, 'access', _415 => _415.onDocumentReady, 'optionalCall', _416 => _416(snapshotOf(record))]);
   }, [editor, store, documentId, title]);
   const handleTitle = (value) => {
     store.setTitle(documentId, value);
@@ -3727,9 +3912,9 @@ function DocumentEditorImpl(props) {
         // always the latest editor content
       });
       if (result.blob) downloadResult(result);
-      _optionalChain([optionsRef, 'access', _412 => _412.current, 'access', _413 => _413.onExport, 'optionalCall', _414 => _414({ documentId, format: format2, ...result })]);
+      _optionalChain([optionsRef, 'access', _417 => _417.current, 'access', _418 => _418.onExport, 'optionalCall', _419 => _419({ documentId, format: format2, ...result })]);
     } catch (error) {
-      _optionalChain([optionsRef, 'access', _415 => _415.current, 'access', _416 => _416.onError, 'optionalCall', _417 => _417(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "EXPORT_ERROR"))]);
+      _optionalChain([optionsRef, 'access', _420 => _420.current, 'access', _421 => _421.onError, 'optionalCall', _422 => _422(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "EXPORT_ERROR"))]);
       flash("Export failed");
     }
   };
@@ -3855,6 +4040,96 @@ function DocumentEditorImpl(props) {
   );
 }
 
+// src/features/document-editor/document-preview.tsx
+
+var _reactdom = require('react-dom');
+
+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 = _react.useMemo.call(void 0, () => _nullishCoalesce(_nullishCoalesce(_optionalChain([props, 'access', _423 => _423.options, 'optionalAccess', _424 => _424.store]), () => ( ctxOptions.store)), () => ( getDefaultDocumentStore())), [_optionalChain([props, 'access', _425 => _425.options, 'optionalAccess', _426 => _426.store]), ctxOptions.store]);
+  const storedJson = useDocumentValue(store, documentId, (record) => _optionalChain([record, 'optionalAccess', _427 => _427.json]));
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const [preferStore, setPreferStore] = _react.useState.call(void 0, false);
+  const contentKey = typeof content === "string" ? content : content ? JSON.stringify(content) : "";
+  _react.useEffect.call(void 0, () => {
+    setPreferStore(false);
+  }, [contentKey]);
+  const html = _react.useMemo.call(void 0, () => {
+    try {
+      const fromContent = contentKey ? _chunkG6YPSE6Jcjs.parseDocumentContent.call(void 0, contentKey) : null;
+      const doc = preferStore && storedJson ? storedJson : fromContent;
+      return doc ? _chunkG6YPSE6Jcjs.docToHtml.call(void 0, doc) : "";
+    } catch (e10) {
+      return "";
+    }
+  }, [contentKey, preferStore, storedJson]);
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    !open ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "june-doc june-doc-card", "data-theme": resolvedTheme, "aria-label": title, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "june-doc-card__bar", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "june-doc-card__title", children: title }),
+        editable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, Icon, { name: "pencil", size: 16 }) }) : null
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc-card__canvas", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc-card__sheet", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc__prose", dangerouslySetInnerHTML: { __html: html } }) }) })
+    ] }) : null,
+    open && typeof document !== "undefined" ? _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc-modal", "data-theme": resolvedTheme, onMouseDown: close, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc-modal__bar", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", "aria-label": "Close document", onClick: close, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { name: "close", size: 16 }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Close" })
+            ] }) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc-modal__body", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              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
 
 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.';
@@ -3875,18 +4150,19 @@ function DocumentEditor(props) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DocumentEditorImpl, { ...props });
 }
 function OpenUIDocument({ props }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    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__ */ _jsxruntime.jsx.call(void 0, DocumentDraft, { title: props.title, state: "drafting" });
+  if (props.editable === false) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DocumentEditor, { ...shared });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DocumentPreview, { ...shared });
 }
 var JuneDocumentEditorComponent = _reactlang.defineComponent.call(void 0, {
   name: "DocumentEditor",
@@ -3901,7 +4177,7 @@ function withDocumentEditor(library) {
         add: [{ component: JuneDocumentEditorComponent, slots: ["Card"] }]
       }
     });
-  } catch (e8) {
+  } catch (e11) {
     return library.extend({ components: { add: [JuneDocumentEditorComponent] } });
   }
 }
@@ -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),
@@ -3981,7 +4257,7 @@ var defaultToolApprovalLabels = {
 var format = (value) => {
   try {
     return _nullishCoalesce(JSON.stringify(value, null, 2), () => ( String(value)));
-  } catch (e9) {
+  } catch (e12) {
     return String(value);
   }
 };
@@ -3997,19 +4273,19 @@ function ToolApproval({
   className
 }) {
   const labels = { ...defaultToolApprovalLabels, ...labelOverrides };
-  const options = _optionalChain([request, 'access', _418 => _418.options, 'optionalAccess', _419 => _419.length]) ? request.options : ["approve", "reject"];
+  const options = _optionalChain([request, 'access', _428 => _428.options, 'optionalAccess', _429 => _429.length]) ? request.options : ["approve", "reject"];
   const [draft, setDraft] = _react.useState.call(void 0, null);
   const [draftError, setDraftError] = _react.useState.call(void 0, null);
   const titleId = _react.useId.call(void 0, );
   const pending = status === "pending";
   const decide = (decision) => {
-    if (!disabled && pending) _optionalChain([onDecide, 'optionalCall', _420 => _420(decision)]);
+    if (!disabled && pending) _optionalChain([onDecide, 'optionalCall', _430 => _430(decision)]);
   };
   const saveEdit = () => {
     let editedArguments;
     try {
       editedArguments = JSON.parse(_nullishCoalesce(draft, () => ( "null")));
-    } catch (e10) {
+    } catch (e13) {
       setDraftError(labels.invalidJson);
       return;
     }
@@ -4098,7 +4374,7 @@ function useToolApproval() {
   const settle = _react.useCallback.call(void 0, (id, decision) => {
     const resolve = waiters.current.get(id);
     waiters.current.delete(id);
-    _optionalChain([resolve, 'optionalCall', _421 => _421(decision)]);
+    _optionalChain([resolve, 'optionalCall', _431 => _431(decision)]);
   }, []);
   const request = _react.useCallback.call(void 0, (input) => {
     const id = _nullishCoalesce(input.id, () => ( nextId()));
@@ -4173,7 +4449,7 @@ function messageContentToText(content) {
 function parse(data) {
   try {
     return JSON.parse(data);
-  } catch (e11) {
+  } catch (e14) {
     return void 0;
   }
 }
@@ -4187,7 +4463,7 @@ function createLangGraphExtractor(options = {}) {
       if (!Array.isArray(parsed)) return null;
       const [chunk, metadata] = parsed;
       if (!chunk || typeof chunk !== "object" || !isAiMessage(chunk)) return null;
-      if (nodes && !(typeof _optionalChain([metadata, 'optionalAccess', _422 => _422.langgraph_node]) === "string" && nodes.has(metadata.langgraph_node))) return null;
+      if (nodes && !(typeof _optionalChain([metadata, 'optionalAccess', _432 => _432.langgraph_node]) === "string" && nodes.has(metadata.langgraph_node))) return null;
       return messageContentToText(chunk.content) || null;
     }
     if (base === "messages/partial" || base === "messages/complete") {
@@ -4226,8 +4502,8 @@ function interruptToApprovalRequests(value, idPrefix = "interrupt") {
   const configs = Array.isArray(hitl.review_configs) ? hitl.review_configs : [];
   return hitl.action_requests.flatMap((action, index) => {
     if (!action || typeof action.name !== "string") return [];
-    const config = configs.find((c) => _optionalChain([c, 'optionalAccess', _423 => _423.action_name]) === action.name);
-    const allowed = Array.isArray(_optionalChain([config, 'optionalAccess', _424 => _424.allowed_decisions])) ? config.allowed_decisions.filter(
+    const config = configs.find((c) => _optionalChain([c, 'optionalAccess', _433 => _433.action_name]) === action.name);
+    const allowed = Array.isArray(_optionalChain([config, 'optionalAccess', _434 => _434.allowed_decisions])) ? config.allowed_decisions.filter(
       (d) => d === "approve" || d === "reject" || d === "edit"
     ) : void 0;
     return [