@june-ai/june-ui 0.2.9 → 0.2.11

package/dist/{chunk-GFCROSGQ.cjs → chunk-TD6GKOUR.cjs}

@@ -224,9 +224,16 @@ function createActionHandler(options) {
   };
 }
 
+// src/features/document-editor/document-bridge.tsx
+
+
 // src/features/document-editor/document-context.ts
 
 var JuneDocumentContext = _react.createContext.call(void 0, {});
+var DocumentEditorConfigContext = _react.createContext.call(void 0, {});
+function useDocumentEditorConfig() {
+  return _react.useContext.call(void 0, DocumentEditorConfigContext);
+}
 function useDocumentOptions() {
   return _react.useContext.call(void 0, JuneDocumentContext);
 }
@@ -608,9 +615,16 @@ function useDocumentBridge(options) {
 
 // src/features/document-editor/document-bridge.tsx
 
-function DocumentBridge({ children, ...options }) {
+function DocumentBridge({
+  children,
+  documentEditor,
+  ...options
+}) {
   const value = useDocumentBridge(options);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, JuneDocumentContext.Provider, { value, children });
+  const presentation = _optionalChain([documentEditor, 'optionalAccess', _38 => _38.presentation]);
+  const width = _optionalChain([documentEditor, 'optionalAccess', _39 => _39.width]);
+  const config = _react.useMemo.call(void 0, () => ({ presentation, width }), [presentation, width]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, JuneDocumentContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DocumentEditorConfigContext.Provider, { value: config, children }) });
 }
 
 // src/themes/theme-provider.tsx
@@ -663,7 +677,7 @@ function subscribe(onChange) {
 }
 function getSnapshot() {
   if (typeof window === "undefined") return "light";
-  return _optionalChain([window, 'access', _38 => _38.matchMedia, 'optionalCall', _39 => _39(QUERY), 'optionalAccess', _40 => _40.matches]) ? "dark" : "light";
+  return _optionalChain([window, 'access', _40 => _40.matchMedia, 'optionalCall', _41 => _41(QUERY), 'optionalAccess', _42 => _42.matches]) ? "dark" : "light";
 }
 function getServerSnapshot() {
   return "light";
@@ -894,7 +908,7 @@ function attachOrphans(source) {
   if (!root) return `root = Card([${names.join(", ")}])
 ${text}`;
   const rawRhs = text.slice(root.rhsStart, root.end);
-  const lead = _nullishCoalesce(_optionalChain([/^\s*/, 'access', _41 => _41.exec, 'call', _42 => _42(rawRhs), 'optionalAccess', _43 => _43[0]]), () => ( ""));
+  const lead = _nullishCoalesce(_optionalChain([/^\s*/, 'access', _43 => _43.exec, 'call', _44 => _44(rawRhs), 'optionalAccess', _45 => _45[0]]), () => ( ""));
   const spliced = spliceFirstArray(rawRhs.trim(), names);
   if (spliced !== null) {
     return text.slice(0, root.rhsStart) + lead + spliced + text.slice(root.end);
@@ -1056,7 +1070,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) {
@@ -1070,7 +1084,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;
@@ -1092,8 +1194,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)) {
@@ -1122,7 +1231,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 === "") {
@@ -1134,7 +1244,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
   };
@@ -1144,10 +1254,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', _44 => _44.before]), () => ( []));
-  const after = _nullishCoalesce(_optionalChain([parts, 'optionalAccess', _45 => _45.after]), () => ( []));
+  const before = _nullishCoalesce(_optionalChain([parts, 'optionalAccess', _46 => _46.before]), () => ( []));
+  const after = _nullishCoalesce(_optionalChain([parts, 'optionalAccess', _47 => _47.after]), () => ( []));
   return {
     before,
     ui,
@@ -1175,7 +1285,7 @@ var JuneErrorBoundary = class extends _react.Component {
     return { error };
   }
   componentDidCatch(error, info) {
-    _optionalChain([this, 'access', _46 => _46.props, 'access', _47 => _47.onError, 'optionalCall', _48 => _48(error, info)]);
+    _optionalChain([this, 'access', _48 => _48.props, 'access', _49 => _49.onError, 'optionalCall', _50 => _50(error, info)]);
   }
   componentDidUpdate(prev) {
     if (this.state.error && keysChanged(prev.resetKeys, this.props.resetKeys)) {
@@ -1224,6 +1334,7 @@ function JuneRenderer(props) {
     onError,
     onJuneError,
     documents,
+    documentEditor,
     onResponseChange,
     responseChangeDelay,
     loadingFallback = null,
@@ -1236,37 +1347,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', _49 => _49.onAction, 'optionalCall', _50 => _50(event)]);
+    _optionalChain([l, 'access', _51 => _51.onAction, 'optionalCall', _52 => _52(event)]);
     if (l.actions) {
       void runAction(event, {
         actions: l.actions,
         parseEvent: l.parseActionEvent,
         confirm: l.confirmAction,
-        onError: (e) => _optionalChain([l, 'access', _51 => _51.onJuneError, 'optionalCall', _52 => _52(e)])
+        onError: (e) => _optionalChain([l, 'access', _53 => _53.onJuneError, 'optionalCall', _54 => _54(e)])
       });
     }
   }, []);
   const handleParserErrors = _react.useCallback.call(void 0, (errors) => {
     const list2 = Array.isArray(errors) ? errors : [];
     const l = latest.current;
-    _optionalChain([l, 'access', _53 => _53.onError, 'optionalCall', _54 => _54(list2)]);
-    const real = list2.filter((e) => _optionalChain([e, 'optionalAccess', _55 => _55.severity]) !== "warning");
+    _optionalChain([l, 'access', _55 => _55.onError, 'optionalCall', _56 => _56(list2)]);
+    const real = list2.filter((e) => _optionalChain([e, 'optionalAccess', _57 => _57.severity]) !== "warning");
     if (real.length > 0) {
-      _optionalChain([l, 'access', _56 => _56.onJuneError, 'optionalCall', _57 => _57(new (0, _chunkG6YPSE6Jcjs.JuneError)("PARSE_ERROR", `OpenUI reported ${real.length} error(s)`, { details: real }))]);
+      _optionalChain([l, 'access', _58 => _58.onJuneError, 'optionalCall', _59 => _59(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', _58 => _58.current, 'access', _59 => _59.onJuneError, 'optionalCall', _60 => _60(
+    _optionalChain([latest, 'access', _60 => _60.current, 'access', _61 => _61.onJuneError, 'optionalCall', _62 => _62(
       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', _61 => _61.current, 'access', _62 => _62.onJuneError, 'optionalCall', _63 => _63(error)]), []);
+  const handleDocumentError = _react.useCallback.call(void 0, (error) => _optionalChain([latest, 'access', _63 => _63.current, 'access', _64 => _64.onJuneError, 'optionalCall', _65 => _65(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" }),
@@ -1280,6 +1391,7 @@ function JuneRenderer(props) {
       DocumentBridge,
       {
         documents,
+        documentEditor,
         response,
         onResponseChange,
         responseChangeDelay,
@@ -1312,8 +1424,8 @@ function JuneRenderer(props) {
 
 var NAME = /^[A-Z][A-Za-z0-9_]*$/;
 function isZodObject(value) {
-  const def = _optionalChain([value, 'optionalAccess', _64 => _64._zod, 'optionalAccess', _65 => _65.def]);
-  return _optionalChain([def, 'optionalAccess', _66 => _66.type]) === "object";
+  const def = _optionalChain([value, 'optionalAccess', _66 => _66._zod, 'optionalAccess', _67 => _67.def]);
+  return _optionalChain([def, 'optionalAccess', _68 => _68.type]) === "object";
 }
 function validateComponentDefinition(definition) {
   const { name } = definition;
@@ -1376,7 +1488,7 @@ function isJuneComponent(value) {
 // src/engine/registry/component-registry.ts
 
 function nameOf(component) {
-  const name = _optionalChain([component, 'optionalAccess', _67 => _67.name]);
+  const name = _optionalChain([component, 'optionalAccess', _69 => _69.name]);
   if (typeof name !== "string" || name.length === 0) {
     throw new (0, _chunkG6YPSE6Jcjs.JuneError)("LIBRARY_ERROR", "Every component needs a non-empty string name");
   }
@@ -1385,7 +1497,7 @@ function nameOf(component) {
 function slotsOf(component) {
   return isJuneComponent(component) ? component.june.slots : void 0;
 }
-var isDev = () => typeof process !== "undefined" && _optionalChain([process, 'access', _68 => _68.env, 'optionalAccess', _69 => _69.NODE_ENV]) === "development";
+var isDev = () => typeof process !== "undefined" && _optionalChain([process, 'access', _70 => _70.env, 'optionalAccess', _71 => _71.NODE_ENV]) === "development";
 var ComponentRegistry = class {
   constructor(options = {}) {
     this.added = /* @__PURE__ */ new Map();
@@ -1498,7 +1610,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', _70 => _70.base, 'optionalAccess', _71 => _71.root]) === name) {
+    if (_optionalChain([this, 'access', _72 => _72.base, 'optionalAccess', _73 => _73.root]) === name) {
       throw new (0, _chunkG6YPSE6Jcjs.JuneError)("LIBRARY_ERROR", `Cannot remove "${name}": it is the root component.`);
     }
     this.removed.add(name);
@@ -1552,7 +1664,7 @@ var ComponentRegistry = class {
     try {
       return base.extend(extension(true));
     } catch (first) {
-      if (added.some((c) => _optionalChain([slotsOf, 'call', _72 => _72(c), 'optionalAccess', _73 => _73.length]))) {
+      if (added.some((c) => _optionalChain([slotsOf, 'call', _74 => _74(c), 'optionalAccess', _75 => _75.length]))) {
         try {
           const library = base.extend(extension(false));
           if (isDev()) console.warn("[june-ui] Component slots were skipped (they need Zod 4.1+):", first);
@@ -1571,7 +1683,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', _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)]);
+    const componentGroups = _optionalChain([base, 'access', _76 => _76.componentGroups, 'optionalAccess', _77 => _77.map, 'call', _78 => _78((g) => ({ ...g, components: g.components.filter((n) => !this.removed.has(n)) })), 'access', _79 => _79.filter, 'call', _80 => _80((g) => g.components.length > 0)]);
     return _reactlang.createLibrary.call(void 0, {
       components,
       componentGroups,
@@ -1602,7 +1714,7 @@ function createJuneLibrary(options) {
   const components = _nullishCoalesce(raw.components, () => ( []));
   const names = /* @__PURE__ */ new Set();
   for (const component of components) {
-    if (typeof _optionalChain([component, 'optionalAccess', _79 => _79.name]) !== "string" || component.name.length === 0) {
+    if (typeof _optionalChain([component, 'optionalAccess', _81 => _81.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)) {
@@ -1655,7 +1767,7 @@ async function* iterateReadable(stream, signal) {
     void reader.cancel().catch(() => {
     });
   };
-  _optionalChain([signal, 'optionalAccess', _80 => _80.addEventListener, 'call', _81 => _81("abort", onAbort, { once: true })]);
+  _optionalChain([signal, 'optionalAccess', _82 => _82.addEventListener, 'call', _83 => _83("abort", onAbort, { once: true })]);
   try {
     while (true) {
       const { done, value } = await reader.read();
@@ -1663,7 +1775,7 @@ async function* iterateReadable(stream, signal) {
       yield value;
     }
   } finally {
-    _optionalChain([signal, 'optionalAccess', _82 => _82.removeEventListener, 'call', _83 => _83("abort", onAbort)]);
+    _optionalChain([signal, 'optionalAccess', _84 => _84.removeEventListener, 'call', _85 => _85("abort", onAbort)]);
     try {
       reader.releaseLock();
     } catch (e6) {
@@ -1678,7 +1790,7 @@ function abortedError(partial) {
 }
 async function consumeStream(source, options = {}) {
   const { signal, onText, allowEmpty = false } = options;
-  if (_optionalChain([signal, 'optionalAccess', _84 => _84.aborted])) throw abortedError("");
+  if (_optionalChain([signal, 'optionalAccess', _86 => _86.aborted])) throw abortedError("");
   const decoder = new TextDecoder();
   let text = "";
   let received = false;
@@ -1686,23 +1798,23 @@ async function consumeStream(source, options = {}) {
     if (!delta) return;
     received = true;
     text += delta;
-    _optionalChain([onText, 'optionalCall', _85 => _85(delta, text)]);
+    _optionalChain([onText, 'optionalCall', _87 => _87(delta, text)]);
   };
   try {
     for await (const chunk of toAsyncIterable(source, signal)) {
-      if (_optionalChain([signal, 'optionalAccess', _86 => _86.aborted])) break;
+      if (_optionalChain([signal, 'optionalAccess', _88 => _88.aborted])) break;
       push(typeof chunk === "string" ? chunk : decoder.decode(chunk, { stream: true }));
     }
     push(decoder.decode());
   } catch (error) {
-    if (_optionalChain([signal, 'optionalAccess', _87 => _87.aborted])) throw abortedError(text);
+    if (_optionalChain([signal, 'optionalAccess', _89 => _89.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', _88 => _88.aborted])) throw abortedError(text);
+  if (_optionalChain([signal, 'optionalAccess', _90 => _90.aborted])) throw abortedError(text);
   if (!received && !allowEmpty) {
     throw new (0, _chunkG6YPSE6Jcjs.JuneError)("STREAM_EMPTY", "Stream completed without any content");
   }
@@ -1784,7 +1896,7 @@ async function fetchStream(input, options = {}) {
   try {
     response = await fetch(input, init);
   } catch (error) {
-    if (_optionalChain([init, 'access', _89 => _89.signal, 'optionalAccess', _90 => _90.aborted])) {
+    if (_optionalChain([init, 'access', _91 => _91.signal, 'optionalAccess', _92 => _92.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 });
@@ -1841,7 +1953,7 @@ function useJuneStream(options = {}) {
   }, []);
   const start = _react.useCallback.call(void 0, 
     async (input) => {
-      _optionalChain([controllerRef, 'access', _91 => _91.current, 'optionalAccess', _92 => _92.abort, 'call', _93 => _93()]);
+      _optionalChain([controllerRef, 'access', _93 => _93.current, 'optionalAccess', _94 => _94.abort, 'call', _95 => _95()]);
       const controller = new AbortController();
       controllerRef.current = controller;
       const runId = ++runIdRef.current;
@@ -1864,7 +1976,7 @@ function useJuneStream(options = {}) {
         if (stale()) return null;
         clearTimer();
         setState({ response: text, isStreaming: false, status: "done", error: null });
-        _optionalChain([optionsRef, 'access', _94 => _94.current, 'access', _95 => _95.onComplete, 'optionalCall', _96 => _96(text)]);
+        _optionalChain([optionsRef, 'access', _96 => _96.current, 'access', _97 => _97.onComplete, 'optionalCall', _98 => _98(text)]);
         return text;
       } catch (caught) {
         if (stale()) return null;
@@ -1878,7 +1990,7 @@ function useJuneStream(options = {}) {
           status: aborted ? "aborted" : "error",
           error: aborted ? null : error
         });
-        if (!aborted) _optionalChain([optionsRef, 'access', _97 => _97.current, 'access', _98 => _98.onError, 'optionalCall', _99 => _99(error)]);
+        if (!aborted) _optionalChain([optionsRef, 'access', _99 => _99.current, 'access', _100 => _100.onError, 'optionalCall', _101 => _101(error)]);
         return null;
       }
     },
@@ -1889,10 +2001,10 @@ function useJuneStream(options = {}) {
     [start]
   );
   const abort = _react.useCallback.call(void 0, () => {
-    _optionalChain([controllerRef, 'access', _100 => _100.current, 'optionalAccess', _101 => _101.abort, 'call', _102 => _102()]);
+    _optionalChain([controllerRef, 'access', _102 => _102.current, 'optionalAccess', _103 => _103.abort, 'call', _104 => _104()]);
   }, []);
   const reset = _react.useCallback.call(void 0, () => {
-    _optionalChain([controllerRef, 'access', _103 => _103.current, 'optionalAccess', _104 => _104.abort, 'call', _105 => _105()]);
+    _optionalChain([controllerRef, 'access', _105 => _105.current, 'optionalAccess', _106 => _106.abort, 'call', _107 => _107()]);
     runIdRef.current++;
     textRef.current = "";
     clearTimer();
@@ -1901,7 +2013,7 @@ function useJuneStream(options = {}) {
   _react.useEffect.call(void 0, 
     () => () => {
       runIdRef.current++;
-      _optionalChain([controllerRef, 'access', _106 => _106.current, 'optionalAccess', _107 => _107.abort, 'call', _108 => _108()]);
+      _optionalChain([controllerRef, 'access', _108 => _108.current, 'optionalAccess', _109 => _109.abort, 'call', _110 => _110()]);
       clearTimer();
     },
     [clearTimer]
@@ -2115,6 +2227,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" }),
@@ -2181,7 +2297,7 @@ function Dropdown({ trigger, children, align = "start", className, onOpen }) {
     return () => document.removeEventListener("mousedown", onDown);
   }, [open]);
   const toggle = () => setOpen((v) => {
-    if (!v) _optionalChain([onOpen, 'optionalCall', _109 => _109()]);
+    if (!v) _optionalChain([onOpen, 'optionalCall', _111 => _111()]);
     return !v;
   });
   const close = () => setOpen(false);
@@ -2315,7 +2431,7 @@ function ColorPicker({ label, icon, colors, current, disabled, resetLabel, onPic
             style: { background: c },
             "aria-label": c,
             title: c,
-            "data-active": _optionalChain([current, 'optionalAccess', _110 => _110.toLowerCase, 'call', _111 => _111()]) === c ? true : void 0,
+            "data-active": _optionalChain([current, 'optionalAccess', _112 => _112.toLowerCase, 'call', _113 => _113()]) === c ? true : void 0,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => {
               onPick(c);
@@ -2429,7 +2545,7 @@ function ImagePanel({ editor, close, onNotice }) {
       {
         type: "button",
         className: "june-doc__dropzone",
-        onClick: () => _optionalChain([file, 'access', _112 => _112.current, 'optionalAccess', _113 => _113.click, 'call', _114 => _114()]),
+        onClick: () => _optionalChain([file, 'access', _114 => _114.current, 'optionalAccess', _115 => _115.click, 'call', _116 => _116()]),
         onDragOver: (e) => e.preventDefault(),
         onDrop: (e) => {
           e.preventDefault();
@@ -2448,7 +2564,7 @@ function ImagePanel({ editor, close, onNotice }) {
         type: "file",
         accept: "image/*",
         hidden: true,
-        onChange: (e) => fromFile(_optionalChain([e, 'access', _115 => _115.target, 'access', _116 => _116.files, 'optionalAccess', _117 => _117[0]]))
+        onChange: (e) => fromFile(_optionalChain([e, 'access', _117 => _117.target, 'access', _118 => _118.files, 'optionalAccess', _119 => _119[0]]))
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc__or", children: "or" }),
@@ -2553,9 +2669,9 @@ function DocumentToolbar(props) {
       };
     }
   });
-  const run = () => _optionalChain([editor, 'optionalAccess', _118 => _118.chain, 'call', _119 => _119(), 'access', _120 => _120.focus, 'call', _121 => _121()]);
+  const run = () => _optionalChain([editor, 'optionalAccess', _120 => _120.chain, 'call', _121 => _121(), 'access', _122 => _122.focus, 'call', _123 => _123()]);
   const off = !editor || !editable;
-  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 style = _optionalChain([s, 'optionalAccess', _124 => _124.codeBlock]) ? "code" : _optionalChain([s, 'optionalAccess', _125 => _125.h1]) ? "1" : _optionalChain([s, 'optionalAccess', _126 => _126.h2]) ? "2" : _optionalChain([s, 'optionalAccess', _127 => _127.h3]) ? "3" : _optionalChain([s, 'optionalAccess', _128 => _128.quote]) ? "quote" : "p";
   const setStyle = (v) => {
     if (!editor || !s) return;
     let c = editor.chain().focus();
@@ -2569,35 +2685,35 @@ function DocumentToolbar(props) {
     }
     c.run();
   };
-  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;
+  const fontKnown = FONT_FAMILIES.some((f) => f.value === _optionalChain([s, 'optionalAccess', _129 => _129.fontFamily]));
+  const sizes = _optionalChain([s, 'optionalAccess', _130 => _130.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', _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.jsx.call(void 0, Btn, { label: "Undo", icon: "undo", disabled: off || !_optionalChain([s, 'optionalAccess', _131 => _131.canUndo]), onClick: () => _optionalChain([run, 'call', _132 => _132(), 'optionalAccess', _133 => _133.undo, 'call', _134 => _134(), 'access', _135 => _135.run, 'call', _136 => _136()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Redo", icon: "redo", disabled: off || !_optionalChain([s, 'optionalAccess', _137 => _137.canRedo]), onClick: () => _optionalChain([run, 'call', _138 => _138(), 'optionalAccess', _139 => _139.redo, 'call', _140 => _140(), 'access', _141 => _141.run, 'call', _142 => _142()]) })
       ] }),
       /* @__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', _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.jsx.call(void 0, Btn, { label: "Bold", icon: "bold", toggle: true, active: _optionalChain([s, 'optionalAccess', _143 => _143.bold]), disabled: off, onClick: () => _optionalChain([run, 'call', _144 => _144(), 'optionalAccess', _145 => _145.toggleBold, 'call', _146 => _146(), 'access', _147 => _147.run, 'call', _148 => _148()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Italic", icon: "italic", toggle: true, active: _optionalChain([s, 'optionalAccess', _149 => _149.italic]), disabled: off, onClick: () => _optionalChain([run, 'call', _150 => _150(), 'optionalAccess', _151 => _151.toggleItalic, 'call', _152 => _152(), 'access', _153 => _153.run, 'call', _154 => _154()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Underline", icon: "underline", toggle: true, active: _optionalChain([s, 'optionalAccess', _155 => _155.underline]), disabled: off, onClick: () => _optionalChain([run, 'call', _156 => _156(), 'optionalAccess', _157 => _157.toggleUnderline, 'call', _158 => _158(), 'access', _159 => _159.run, 'call', _160 => _160()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: _optionalChain([s, 'optionalAccess', _161 => _161.strike]), disabled: off, onClick: () => _optionalChain([run, 'call', _162 => _162(), 'optionalAccess', _163 => _163.toggleStrike, 'call', _164 => _164(), 'access', _165 => _165.run, 'call', _166 => _166()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Inline code", icon: "code", toggle: true, active: _optionalChain([s, 'optionalAccess', _167 => _167.code]), disabled: off, onClick: () => _optionalChain([run, 'call', _168 => _168(), 'optionalAccess', _169 => _169.toggleCode, 'call', _170 => _170(), 'access', _171 => _171.run, 'call', _172 => _172()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Superscript", icon: "superscript", toggle: true, active: _optionalChain([s, 'optionalAccess', _173 => _173.sup]), disabled: off, onClick: () => _optionalChain([run, 'call', _174 => _174(), 'optionalAccess', _175 => _175.toggleSuperscript, 'call', _176 => _176(), 'access', _177 => _177.run, 'call', _178 => _178()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Subscript", icon: "subscript", toggle: true, active: _optionalChain([s, 'optionalAccess', _179 => _179.sub]), disabled: off, onClick: () => _optionalChain([run, 'call', _180 => _180(), 'optionalAccess', _181 => _181.toggleSubscript, 'call', _182 => _182(), 'access', _183 => _183.run, 'call', _184 => _184()]) })
       ] }),
       /* @__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', _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.jsx.call(void 0, Btn, { label: "Align left", icon: "alignLeft", toggle: true, active: _optionalChain([s, 'optionalAccess', _185 => _185.left]), disabled: off, onClick: () => _optionalChain([run, 'call', _186 => _186(), 'optionalAccess', _187 => _187.setTextAlign, 'call', _188 => _188("left"), 'access', _189 => _189.run, 'call', _190 => _190()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Align center", icon: "alignCenter", toggle: true, active: _optionalChain([s, 'optionalAccess', _191 => _191.center]), disabled: off, onClick: () => _optionalChain([run, 'call', _192 => _192(), 'optionalAccess', _193 => _193.setTextAlign, 'call', _194 => _194("center"), 'access', _195 => _195.run, 'call', _196 => _196()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Align right", icon: "alignRight", toggle: true, active: _optionalChain([s, 'optionalAccess', _197 => _197.right]), disabled: off, onClick: () => _optionalChain([run, 'call', _198 => _198(), 'optionalAccess', _199 => _199.setTextAlign, 'call', _200 => _200("right"), 'access', _201 => _201.run, 'call', _202 => _202()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Justify", icon: "alignJustify", toggle: true, active: _optionalChain([s, 'optionalAccess', _203 => _203.justify]), disabled: off, onClick: () => _optionalChain([run, 'call', _204 => _204(), 'optionalAccess', _205 => _205.setTextAlign, 'call', _206 => _206("justify"), 'access', _207 => _207.run, 'call', _208 => _208()]) })
       ] }),
       /* @__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', _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.jsx.call(void 0, Btn, { label: "Bullet list", icon: "list", toggle: true, active: _optionalChain([s, 'optionalAccess', _209 => _209.bullet]), disabled: off, onClick: () => _optionalChain([run, 'call', _210 => _210(), 'optionalAccess', _211 => _211.toggleBulletList, 'call', _212 => _212(), 'access', _213 => _213.run, 'call', _214 => _214()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Numbered list", icon: "listOrdered", toggle: true, active: _optionalChain([s, 'optionalAccess', _215 => _215.ordered]), disabled: off, onClick: () => _optionalChain([run, 'call', _216 => _216(), 'optionalAccess', _217 => _217.toggleOrderedList, 'call', _218 => _218(), 'access', _219 => _219.run, 'call', _220 => _220()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Decrease indent", icon: "outdent", disabled: off || !_optionalChain([s, 'optionalAccess', _221 => _221.canLift]), onClick: () => _optionalChain([run, 'call', _222 => _222(), 'optionalAccess', _223 => _223.liftListItem, 'call', _224 => _224("listItem"), 'access', _225 => _225.run, 'call', _226 => _226()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Increase indent", icon: "indent", disabled: off || !_optionalChain([s, 'optionalAccess', _227 => _227.canSink]), onClick: () => _optionalChain([run, 'call', _228 => _228(), 'optionalAccess', _229 => _229.sinkListItem, 'call', _230 => _230("listItem"), 'access', _231 => _231.run, 'call', _232 => _232()]) })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "button",
@@ -2631,15 +2747,15 @@ function DocumentToolbar(props) {
             className: "june-doc__select june-doc__select--font",
             "aria-label": "Font family",
             disabled: off,
-            value: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _231 => _231.fontFamily]), () => ( "")),
+            value: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _233 => _233.fontFamily]), () => ( "")),
             onChange: (e) => {
               const v = e.target.value;
-              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()]);
+              if (v) _optionalChain([run, 'call', _234 => _234(), 'optionalAccess', _235 => _235.setFontFamily, 'call', _236 => _236(v), 'access', _237 => _237.run, 'call', _238 => _238()]);
+              else _optionalChain([run, 'call', _239 => _239(), 'optionalAccess', _240 => _240.unsetFontFamily, 'call', _241 => _241(), 'access', _242 => _242.run, 'call', _243 => _243()]);
             },
             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', _242 => _242.fontFamily]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: s.fontFamily, children: s.fontFamily.split(",")[0].replace(/['"]/g, "") }) : null
+              !fontKnown && _optionalChain([s, 'optionalAccess', _244 => _244.fontFamily]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: s.fontFamily, children: s.fontFamily.split(",")[0].replace(/['"]/g, "") }) : null
             ]
           }
         ) }),
@@ -2649,11 +2765,11 @@ function DocumentToolbar(props) {
             className: "june-doc__select june-doc__select--size",
             "aria-label": "Font size",
             disabled: off,
-            value: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _243 => _243.fontSize]), () => ( "")),
+            value: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _245 => _245.fontSize]), () => ( "")),
             onChange: (e) => {
               const v = e.target.value;
-              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()]);
+              if (v) _optionalChain([run, 'call', _246 => _246(), 'optionalAccess', _247 => _247.setFontSize, 'call', _248 => _248(`${v}px`), 'access', _249 => _249.run, 'call', _250 => _250()]);
+              else _optionalChain([run, 'call', _251 => _251(), 'optionalAccess', _252 => _252.unsetFontSize, 'call', _253 => _253(), 'access', _254 => _254.run, 'call', _255 => _255()]);
             },
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "", children: "Auto" }),
@@ -2664,8 +2780,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', _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: "Insert page break", icon: "pageBreak", disabled: off, onClick: () => _optionalChain([run, 'call', _256 => _256(), 'optionalAccess', _257 => _257.setPageBreak, 'call', _258 => _258(), 'access', _259 => _259.run, 'call', _260 => _260()]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Insert divider", icon: "divider", disabled: off, onClick: () => _optionalChain([run, 'call', _261 => _261(), 'optionalAccess', _262 => _262.setHorizontalRule, 'call', _263 => _263(), 'access', _264 => _264.run, 'call', _265 => _265()]) }),
         /* @__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 })
       ] }),
@@ -2676,11 +2792,11 @@ function DocumentToolbar(props) {
             label: "Text color",
             icon: "palette",
             colors: TEXT_COLORS,
-            current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _264 => _264.color]), () => ( null)),
+            current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _266 => _266.color]), () => ( null)),
             disabled: off,
             resetLabel: "Default color",
-            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()])
+            onPick: (c) => _optionalChain([run, 'call', _267 => _267(), 'optionalAccess', _268 => _268.setColor, 'call', _269 => _269(c), 'access', _270 => _270.run, 'call', _271 => _271()]),
+            onReset: () => _optionalChain([run, 'call', _272 => _272(), 'optionalAccess', _273 => _273.unsetColor, 'call', _274 => _274(), 'access', _275 => _275.run, 'call', _276 => _276()])
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2689,11 +2805,11 @@ function DocumentToolbar(props) {
             label: "Highlight",
             icon: "highlighter",
             colors: HIGHLIGHT_COLORS,
-            current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _275 => _275.highlight]), () => ( null)),
+            current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _277 => _277.highlight]), () => ( null)),
             disabled: off,
             resetLabel: "No highlight",
-            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()])
+            onPick: (c) => _optionalChain([run, 'call', _278 => _278(), 'optionalAccess', _279 => _279.setHighlight, 'call', _280 => _280({ color: c }), 'access', _281 => _281.run, 'call', _282 => _282()]),
+            onReset: () => _optionalChain([run, 'call', _283 => _283(), 'optionalAccess', _284 => _284.unsetHighlight, 'call', _285 => _285(), 'access', _286 => _286.run, 'call', _287 => _287()])
           }
         )
       ] }),
@@ -2701,24 +2817,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', _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 })
+            trigger: ({ open, toggle }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Link", icon: "link", toggle: true, active: _optionalChain([s, 'optionalAccess', _288 => _288.link]) || open, disabled: off, onClick: toggle }),
+            children: (close) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkPanel, { editor, href: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _289 => _289.linkHref]), () => ( "")), isLink: !!_optionalChain([s, 'optionalAccess', _290 => _290.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', _289 => _289(), 'optionalAccess', _290 => _290.unsetAllMarks, 'call', _291 => _291(), 'access', _292 => _292.clearNodes, 'call', _293 => _293(), 'access', _294 => _294.run, 'call', _295 => _295()]) }) })
+      /* @__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', _291 => _291(), 'optionalAccess', _292 => _292.unsetAllMarks, 'call', _293 => _293(), 'access', _294 => _294.clearNodes, 'call', _295 => _295(), 'access', _296 => _296.run, 'call', _297 => _297()]) }) })
     ] }) : null,
-    _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" })
+    _optionalChain([s, 'optionalAccess', _298 => _298.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', _299 => _299(), 'optionalAccess', _300 => _300.addRowAfter, 'call', _301 => _301(), 'access', _302 => _302.run, 'call', _303 => _303()]), children: "+ Row" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Add column right", disabled: off, onClick: () => _optionalChain([run, 'call', _304 => _304(), 'optionalAccess', _305 => _305.addColumnAfter, 'call', _306 => _306(), 'access', _307 => _307.run, 'call', _308 => _308()]), children: "+ Column" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete row", disabled: off, onClick: () => _optionalChain([run, 'call', _309 => _309(), 'optionalAccess', _310 => _310.deleteRow, 'call', _311 => _311(), 'access', _312 => _312.run, 'call', _313 => _313()]), children: "\u2212 Row" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete column", disabled: off, onClick: () => _optionalChain([run, 'call', _314 => _314(), 'optionalAccess', _315 => _315.deleteColumn, 'call', _316 => _316(), 'access', _317 => _317.run, 'call', _318 => _318()]), children: "\u2212 Column" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Merge cells", disabled: off || !_optionalChain([s, 'optionalAccess', _319 => _319.canMerge]), onClick: () => _optionalChain([run, 'call', _320 => _320(), 'optionalAccess', _321 => _321.mergeCells, 'call', _322 => _322(), 'access', _323 => _323.run, 'call', _324 => _324()]), children: "Merge" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Split cell", disabled: off || !_optionalChain([s, 'optionalAccess', _325 => _325.canSplit]), onClick: () => _optionalChain([run, 'call', _326 => _326(), 'optionalAccess', _327 => _327.splitCell, 'call', _328 => _328(), 'access', _329 => _329.run, 'call', _330 => _330()]), children: "Split" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Toggle header row", disabled: off, onClick: () => _optionalChain([run, 'call', _331 => _331(), 'optionalAccess', _332 => _332.toggleHeaderRow, 'call', _333 => _333(), 'access', _334 => _334.run, 'call', _335 => _335()]), children: "Header row" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Btn, { label: "Delete table", disabled: off, onClick: () => _optionalChain([run, 'call', _336 => _336(), 'optionalAccess', _337 => _337.deleteTable, 'call', _338 => _338(), 'access', _339 => _339.run, 'call', _340 => _340()]), className: "june-doc__btn--danger", children: "Delete table" })
     ] }) }) : null
   ] });
 }
@@ -2859,7 +2975,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', _339 => _339.current, 'optionalCall', _340 => _340({ page, pages: total })]);
+        _optionalChain([metricsRef, 'access', _341 => _341.current, 'optionalCall', _342 => _342({ page, pages: total })]);
       }
     };
     report();
@@ -2868,12 +2984,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', _341 => _341.observe, 'call', _342 => _342(s)]);
+    _optionalChain([ro, 'optionalAccess', _343 => _343.observe, 'call', _344 => _344(s)]);
     return () => {
       editor.off("transaction", report);
       c.removeEventListener("scroll", report);
       prose.removeEventListener("load", onLoad, true);
-      _optionalChain([ro, 'optionalAccess', _343 => _343.disconnect, 'call', _344 => _344()]);
+      _optionalChain([ro, 'optionalAccess', _345 => _345.disconnect, 'call', _346 => _346()]);
     };
   }, [editor, paged, zoom, stride]);
   const minHeight = paged ? pages * g.height + (pages - 1) * PAGE_GAP : void 0;
@@ -2914,12 +3030,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', _345 => _345.matches, 'access', _346 => _346.length]), () => ( 0)), current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _347 => _347.current]), () => ( -1)) };
+      return { count: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _347 => _347.matches, 'access', _348 => _348.length]), () => ( 0)), current: _nullishCoalesce(_optionalChain([s, 'optionalAccess', _349 => _349.current]), () => ( -1)) };
     }
   });
   _react.useEffect.call(void 0, () => {
-    _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()]);
+    _optionalChain([input, 'access', _350 => _350.current, 'optionalAccess', _351 => _351.focus, 'call', _352 => _352()]);
+    _optionalChain([input, 'access', _353 => _353.current, 'optionalAccess', _354 => _354.select, 'call', _355 => _355()]);
   }, []);
   _react.useEffect.call(void 0, () => {
     _chunkG6YPSE6Jcjs.setSearch.call(void 0, editor, { term, caseSensitive, current: 0 });
@@ -2927,8 +3043,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', _354 => _354.count]), () => ( 0));
-  const current = _nullishCoalesce(_optionalChain([info, 'optionalAccess', _355 => _355.current]), () => ( -1));
+  const count = _nullishCoalesce(_optionalChain([info, 'optionalAccess', _356 => _356.count]), () => ( 0));
+  const current = _nullishCoalesce(_optionalChain([info, 'optionalAccess', _357 => _357.current]), () => ( -1));
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
@@ -3206,12 +3322,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', _356 => _356[2], 'optionalAccess', _357 => _357.toLowerCase, 'call', _358 => _358()]) === "pt" ? n : n * 0.75;
+  const pt = _optionalChain([m, 'access', _358 => _358[2], 'optionalAccess', _359 => _359.toLowerCase, 'call', _360 => _360()]) === "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', _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, "")]);
+  const first = _optionalChain([value, 'access', _361 => _361.split, 'call', _362 => _362(","), 'access', _363 => _363[0], 'optionalAccess', _364 => _364.trim, 'call', _365 => _365(), 'access', _366 => _366.replace, 'call', _367 => _367(/^['"]|['"]$/g, "")]);
   return first || void 0;
 }
 var ORDERED_REF = "june-ordered";
@@ -3227,9 +3343,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', _366 => _366.find, 'call', _367 => _367((m) => m.type === "textStyle"), 'optionalAccess', _368 => _368.attrs]), () => ( {}));
+    const style = _nullishCoalesce(_optionalChain([marks, 'access', _368 => _368.find, 'call', _369 => _369((m) => m.type === "textStyle"), 'optionalAccess', _370 => _370.attrs]), () => ( {}));
     const highlight = marks.find((m) => m.type === "highlight");
-    const fill = highlight ? _nullishCoalesce(toDocxColor(_optionalChain([highlight, 'access', _369 => _369.attrs, 'optionalAccess', _370 => _370.color])), () => ( "FFF59D")) : void 0;
+    const fill = highlight ? _nullishCoalesce(toDocxColor(_optionalChain([highlight, 'access', _371 => _371.attrs, 'optionalAccess', _372 => _372.color])), () => ( "FFF59D")) : void 0;
     const run = new d.TextRun({
       text: child.text,
       bold: fmt.bold || has("bold") || void 0,
@@ -3243,13 +3359,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', _371 => _371.attrs, 'optionalAccess', _372 => _372.href]) === "string" ? _chunkG6YPSE6Jcjs.sanitizeHref.call(void 0, link.attrs.href) : null;
+    const href = typeof _optionalChain([link, 'optionalAccess', _373 => _373.attrs, 'optionalAccess', _374 => _374.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', _373 => _373.attrs, 'optionalAccess', _374 => _374.textAlign]);
+  const align = _optionalChain([node, 'access', _375 => _375.attrs, 'optionalAccess', _376 => _376.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,
@@ -3311,8 +3427,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', _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 src = typeof _optionalChain([node, 'access', _377 => _377.attrs, 'optionalAccess', _378 => _378.src]) === "string" ? node.attrs.src : "";
+  const alt = typeof _optionalChain([node, 'access', _379 => _379.attrs, 'optionalAccess', _380 => _380.alt]) === "string" ? node.attrs.alt : "";
   const img = state.images.get(src);
   if (img) {
     return [
@@ -3344,7 +3460,7 @@ function image(d, node, state) {
 }
 function collectImages(nodes, out) {
   for (const node of _nullishCoalesce(nodes, () => ( []))) {
-    const src = _optionalChain([node, 'access', _379 => _379.attrs, 'optionalAccess', _380 => _380.src]);
+    const src = _optionalChain([node, 'access', _381 => _381.attrs, 'optionalAccess', _382 => _382.src]);
     if (node.type === "image" && typeof src === "string" && src && !out.has(src)) out.set(src, node.attrs);
     if (node.content) collectImages(node.content, out);
   }
@@ -3381,8 +3497,8 @@ 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', _381 => _381.width])) || natural.width;
-    let height = Number(_optionalChain([attrs, 'optionalAccess', _382 => _382.height])) || natural.height * width / natural.width;
+    let width = Number(_optionalChain([attrs, 'optionalAccess', _383 => _383.width])) || natural.width;
+    let height = Number(_optionalChain([attrs, 'optionalAccess', _384 => _384.height])) || natural.height * width / natural.width;
     if (width > MAX_IMAGE_WIDTH) {
       height = height * MAX_IMAGE_WIDTH / width;
       width = MAX_IMAGE_WIDTH;
@@ -3413,7 +3529,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', _383 => _383.attrs, 'optionalAccess', _384 => _384.level])) || 1, 1), 3);
+        const level = Math.min(Math.max(Number(_optionalChain([node, 'access', _385 => _385.attrs, 'optionalAccess', _386 => _386.level])) || 1, 1), 3);
         out.push(paragraph(d, node, fmt, { heading: headings[level - 1] }));
         break;
       }
@@ -3547,7 +3663,7 @@ async function copyDocumentToClipboard(doc) {
 
 ${docToText(doc.json)}`;
   try {
-    if (typeof ClipboardItem !== "undefined" && _optionalChain([navigator, 'access', _385 => _385.clipboard, 'optionalAccess', _386 => _386.write])) {
+    if (typeof ClipboardItem !== "undefined" && _optionalChain([navigator, 'access', _387 => _387.clipboard, 'optionalAccess', _388 => _388.write])) {
       await navigator.clipboard.write([
         new ClipboardItem({
           "text/html": new Blob([html], { type: "text/html" }),
@@ -3620,12 +3736,12 @@ function DocumentEditorImpl(props) {
     }
   }, [contentKey]);
   _react.useEffect.call(void 0, () => {
-    if (parsed.error) _optionalChain([optionsRef, 'access', _387 => _387.current, 'access', _388 => _388.onError, 'optionalCall', _389 => _389(parsed.error)]);
+    if (parsed.error) _optionalChain([optionsRef, 'access', _389 => _389.current, 'access', _390 => _390.onError, 'optionalCall', _391 => _391(parsed.error)]);
   }, [parsed.error]);
-  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 title = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _392 => _392.title]), () => ( titleProp)));
+  const pending = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _393 => _393.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', _392 => _392.status]), () => ( status)));
+  const recordStatus = useDocumentValue(store, documentId, (r) => _nullishCoalesce(_optionalChain([r, 'optionalAccess', _394 => _394.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);
@@ -3644,7 +3760,7 @@ function DocumentEditorImpl(props) {
     };
   }, [fullscreen]);
   const lastSavedKey = _react.useRef.call(void 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 seenRevision = _react.useRef.call(void 0, _nullishCoalesce(_optionalChain([store, 'access', _395 => _395.get, 'call', _396 => _396(documentId), 'optionalAccess', _397 => _397.revision]), () => ( 0)));
   const readyRef = _react.useRef.call(void 0, false);
   const flash = _react.useCallback.call(void 0, (message) => {
     setNotice(message);
@@ -3657,7 +3773,7 @@ function DocumentEditorImpl(props) {
   const emitChange = _react.useCallback.call(void 0, 
     (source) => {
       const record = store.get(documentId);
-      if (record) _optionalChain([optionsRef, 'access', _396 => _396.current, 'access', _397 => _397.onDocumentChange, 'optionalCall', _398 => _398({ ...snapshotOf(record), source })]);
+      if (record) _optionalChain([optionsRef, 'access', _398 => _398.current, 'access', _399 => _399.onDocumentChange, 'optionalCall', _400 => _400({ ...snapshotOf(record), source })]);
     },
     [store, documentId]
   );
@@ -3667,7 +3783,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', _399 => _399.flush, 'call', _400 => _400()]), [autosave]);
+  _react.useEffect.call(void 0, () => () => _optionalChain([autosave, 'optionalAccess', _401 => _401.flush, 'call', _402 => _402()]), [autosave]);
   saveRef.current = async () => {
     const record = store.get(documentId);
     const onSave = optionsRef.current.onSave;
@@ -3695,7 +3811,7 @@ function DocumentEditorImpl(props) {
       setSaveState(latestKey === key ? "saved" : "dirty");
     } catch (error) {
       setSaveState("error");
-      _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"))]);
+      _optionalChain([optionsRef, 'access', _403 => _403.current, 'access', _404 => _404.onError, 'optionalCall', _405 => _405(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "DOCUMENT_ERROR", "Saving the document failed"))]);
     }
   };
   const markDirty = _react.useCallback.call(void 0, 
@@ -3705,7 +3821,7 @@ function DocumentEditorImpl(props) {
         return;
       }
       setSaveState("dirty");
-      _optionalChain([autosave, 'optionalCall', _404 => _404()]);
+      _optionalChain([autosave, 'optionalCall', _406 => _406()]);
     },
     [autosave]
   );
@@ -3714,7 +3830,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', _405 => _405.get, 'call', _406 => _406(documentId), 'optionalAccess', _407 => _407.json]), () => ( parsed.json)), () => ( _chunkG6YPSE6Jcjs.emptyDoc.call(void 0, ))));
+  const [initialJson] = _react.useState.call(void 0, () => _nullishCoalesce(_nullishCoalesce(_optionalChain([store, 'access', _407 => _407.get, 'call', _408 => _408(documentId), 'optionalAccess', _409 => _409.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, () => {
   });
@@ -3757,10 +3873,10 @@ function DocumentEditorImpl(props) {
       markDirty(false);
     } else if (outcome === "conflict") {
       const record = store.get(documentId);
-      _optionalChain([optionsRef, 'access', _408 => _408.current, 'access', _409 => _409.onConflict, 'optionalCall', _410 => _410({
+      _optionalChain([optionsRef, 'access', _410 => _410.current, 'access', _411 => _411.onConflict, 'optionalCall', _412 => _412({
         documentId,
-        title: _nullishCoalesce(_optionalChain([record, 'optionalAccess', _411 => _411.title]), () => ( titleProp)),
-        conflicts: _nullishCoalesce(_optionalChain([record, 'optionalAccess', _412 => _412.pending, 'optionalAccess', _413 => _413.conflicts]), () => ( 1))
+        title: _nullishCoalesce(_optionalChain([record, 'optionalAccess', _413 => _413.title]), () => ( titleProp)),
+        conflicts: _nullishCoalesce(_optionalChain([record, 'optionalAccess', _414 => _414.pending, 'optionalAccess', _415 => _415.conflicts]), () => ( 1))
       })]);
     }
   }, [store, documentId, titleProp, parsed.json, documentType, status, emitChange, markDirty]);
@@ -3787,7 +3903,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', _414 => _414.current, 'access', _415 => _415.onDocumentReady, 'optionalCall', _416 => _416(snapshotOf(record))]);
+    _optionalChain([optionsRef, 'access', _416 => _416.current, 'access', _417 => _417.onDocumentReady, 'optionalCall', _418 => _418(snapshotOf(record))]);
   }, [editor, store, documentId, title]);
   const handleTitle = (value) => {
     store.setTitle(documentId, value);
@@ -3812,9 +3928,9 @@ function DocumentEditorImpl(props) {
         // always the latest editor content
       });
       if (result.blob) downloadResult(result);
-      _optionalChain([optionsRef, 'access', _417 => _417.current, 'access', _418 => _418.onExport, 'optionalCall', _419 => _419({ documentId, format: format2, ...result })]);
+      _optionalChain([optionsRef, 'access', _419 => _419.current, 'access', _420 => _420.onExport, 'optionalCall', _421 => _421({ documentId, format: format2, ...result })]);
     } catch (error) {
-      _optionalChain([optionsRef, 'access', _420 => _420.current, 'access', _421 => _421.onError, 'optionalCall', _422 => _422(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "EXPORT_ERROR"))]);
+      _optionalChain([optionsRef, 'access', _422 => _422.current, 'access', _423 => _423.onError, 'optionalCall', _424 => _424(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "EXPORT_ERROR"))]);
       flash("Export failed");
     }
   };
@@ -3940,9 +4056,186 @@ function DocumentEditorImpl(props) {
   );
 }
 
+// src/features/document-editor/document-preview.tsx
+
+var _reactdom = require('react-dom');
+
+// src/features/document-editor/document-presentation.ts
+function resolveDocumentPresentation(documentPresentation, configured) {
+  if (documentPresentation === "inline" || documentPresentation === "side-panel") return documentPresentation;
+  if (configured === "inline" || configured === "side-panel") return configured;
+  return "inline";
+}
+function documentPanelWidth(width) {
+  if (typeof width === "number" && Number.isFinite(width)) return `${width}px`;
+  if (typeof width === "string" && width.trim()) return width.trim();
+  return void 0;
+}
+
+// src/features/document-editor/document-preview.tsx
+
+var FORMAT_LABEL = {
+  docx: "Word document",
+  pdf: "PDF",
+  html: "Web page",
+  markdown: "Markdown",
+  txt: "Plain text"
+};
+function DocumentPreview(props) {
+  const { documentId, title = "Untitled document", content, editable = true, exportFormats } = props;
+  const { theme: contextTheme } = useJuneTheme();
+  const resolvedTheme = props.theme && props.theme !== "auto" ? props.theme : contextTheme;
+  const ctxOptions = useDocumentOptions();
+  const editorConfig = useDocumentEditorConfig();
+  const presentation = resolveDocumentPresentation(props.presentation, editorConfig.presentation);
+  const panelWidth = documentPanelWidth(editorConfig.width);
+  const store = _react.useMemo.call(void 0, () => _nullishCoalesce(_nullishCoalesce(_optionalChain([props, 'access', _425 => _425.options, 'optionalAccess', _426 => _426.store]), () => ( ctxOptions.store)), () => ( getDefaultDocumentStore())), [_optionalChain([props, 'access', _427 => _427.options, 'optionalAccess', _428 => _428.store]), ctxOptions.store]);
+  const storedJson = useDocumentValue(store, documentId, (record) => _optionalChain([record, 'optionalAccess', _429 => _429.json]));
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const [preferStore, setPreferStore] = _react.useState.call(void 0, false);
+  const [notice, setNotice] = _react.useState.call(void 0, null);
+  const contentKey = typeof content === "string" ? content : content ? JSON.stringify(content) : "";
+  const options = _nullishCoalesce(props.options, () => ( ctxOptions));
+  _react.useEffect.call(void 0, () => {
+    setPreferStore(false);
+  }, [contentKey]);
+  const doc = _react.useMemo.call(void 0, () => {
+    try {
+      const fromContent = contentKey ? _chunkG6YPSE6Jcjs.parseDocumentContent.call(void 0, contentKey) : null;
+      return preferStore && storedJson ? storedJson : fromContent;
+    } catch (e10) {
+      return null;
+    }
+  }, [contentKey, preferStore, storedJson]);
+  const html = _react.useMemo.call(void 0, () => doc ? _chunkG6YPSE6Jcjs.docToHtml.call(void 0, doc) : "", [doc]);
+  const formats = (_nullishCoalesce(exportFormats, () => ( [...ALL_EXPORT_FORMATS]))).filter((format2) => listDocumentExporters().includes(format2));
+  _react.useEffect.call(void 0, () => {
+    if (!notice) return;
+    const timer = setTimeout(() => setNotice(null), 2e3);
+    return () => clearTimeout(timer);
+  }, [notice]);
+  _react.useEffect.call(void 0, () => {
+    if (!open || presentation !== "side-panel" || typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open, presentation]);
+  const close = () => {
+    setPreferStore(true);
+    setOpen(false);
+  };
+  const handleExport = async (format2) => {
+    if (!doc) return;
+    try {
+      const result = await exportDocument(format2, { documentId, title, json: doc });
+      if (result.blob) downloadResult(result);
+      _optionalChain([options, 'access', _430 => _430.onExport, 'optionalCall', _431 => _431({ documentId, format: format2, ...result })]);
+    } catch (error) {
+      _optionalChain([options, 'access', _432 => _432.onError, 'optionalCall', _433 => _433(_chunkG6YPSE6Jcjs.toJuneError.call(void 0, error, "EXPORT_ERROR"))]);
+      setNotice("Export failed");
+    }
+  };
+  const handleCopy = async () => {
+    if (!doc) return;
+    setNotice(await copyDocumentToClipboard({ title, json: doc }) ? "Copied" : "Copy failed");
+  };
+  const editor = /* @__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
+    }
+  );
+  const closeBar = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc-editor__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" })
+  ] }) });
+  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 }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "june-doc-card__actions", children: [
+          notice ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "june-doc-card__notice", children: notice }) : null,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            Dropdown,
+            {
+              align: "end",
+              className: "june-doc__menu",
+              trigger: ({ open: menuOpen, toggle }) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", "aria-label": "Download", "aria-haspopup": "menu", "aria-expanded": menuOpen, onClick: toggle, children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { name: "download", size: 16 }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Download" })
+              ] }),
+              children: (dismiss) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "menu", "aria-label": "Download options", children: formats.map((format2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "june-doc__menu-item",
+                  onClick: () => {
+                    dismiss();
+                    void handleExport(format2);
+                  },
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "june-doc__menu-label", children: _nullishCoalesce(FORMAT_LABEL[format2], () => ( format2.toUpperCase())) })
+                },
+                format2
+              )) })
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Copy document", title: "Copy", onClick: () => void handleCopy(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { name: "copy", size: 16 }) }),
+          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 && presentation === "inline" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: "june-doc june-doc-inline", "data-theme": resolvedTheme, "aria-label": title, onKeyDown: (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      if (event.currentTarget.querySelector(".june-doc--fullscreen")) return;
+      close();
+    }, children: [
+      closeBar,
+      editor
+    ] }) : null,
+    open && presentation === "side-panel" && 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,
+          style: panelWidth ? { width: panelWidth, maxWidth: "100vw" } : void 0,
+          onMouseDown: (event) => event.stopPropagation(),
+          onKeyDown: (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented) return;
+            if (event.currentTarget.querySelector(".june-doc--fullscreen")) return;
+            close();
+          },
+          children: [
+            closeBar,
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "june-doc-modal__body", children: editor })
+          ]
+        }
+      ) }),
+      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.';
+var DOCUMENT_COMPONENT_DESCRIPTION = 'Custom component. An editable document. DocumentEditor(documentId, title, content, documentType?, status?, editable?, exportFormats?, presentation?). 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. presentation is "inline" or "side-panel"; omit it to use the app default.';
 var documentProps = _v4.z.object({
   documentId: _v4.z.string().describe("Stable id. Reuse it when revising the same document."),
   title: _v4.z.string().describe("Document title. Do not repeat it as a heading in content."),
@@ -3950,7 +4243,8 @@ var documentProps = _v4.z.object({
   documentType: _v4.z.string().optional().describe("Kind of document, such as proposal, contract or invoice."),
   status: _v4.z.string().optional().describe('Use "draft" for generated documents.'),
   editable: _v4.z.boolean().optional().describe("Whether the user can edit. Defaults to true."),
-  exportFormats: _v4.z.array(_v4.z.string()).optional().describe("Export formats to offer, such as html, markdown, docx.")
+  exportFormats: _v4.z.array(_v4.z.string()).optional().describe("Export formats to offer, such as html, markdown, docx."),
+  presentation: _v4.z.enum(["inline", "side-panel"]).optional().describe('Where Edit opens the editor: "inline" in the chat, or "side-panel". Omit to use the app default.')
 });
 function DocumentEditor(props) {
   const { isStreaming } = useJuneRuntime();
@@ -3960,18 +4254,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,
+    presentation: props.presentation
+  };
+  if (isStreaming) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DocumentDraft, { title: props.title, state: "drafting" });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DocumentPreview, { ...shared });
 }
 var JuneDocumentEditorComponent = _reactlang.defineComponent.call(void 0, {
   name: "DocumentEditor",
@@ -3986,7 +4281,7 @@ function withDocumentEditor(library) {
         add: [{ component: JuneDocumentEditorComponent, slots: ["Card"] }]
       }
     });
-  } catch (e10) {
+  } catch (e11) {
     return library.extend({ components: { add: [JuneDocumentEditorComponent] } });
   }
 }
@@ -4009,7 +4304,7 @@ function getDocumentEditorRules(options = {}) {
   return [
     `WHEN TO USE ${name}: use it only when the user asks you to create, draft, write, prepare, generate or revise an editable document (${types}, or similar). Put the finished document inside ${name}.`,
     `WHEN NOT TO USE ${name}: for explanations ("explain what an NDA is"), factual answers, comparisons, brainstorming and general questions, answer with normal text and the other components. Never open ${name} for those.`,
-    `${name}(documentId, title, content, documentType?, status?, editable?, exportFormats?): "content" is the whole document body as Markdown inside ONE double-quoted string. Write line breaks as \\n and escape double quotes as \\". Supported Markdown: headings (#, ##, ###), paragraphs, **bold**, *italic*, lists, > quotes, [links](https://...), and tables.`,
+    `${name}(documentId, title, content, documentType?, status?, editable?, exportFormats?, presentation?): "content" is the whole document body as Markdown inside ONE double-quoted string. Write line breaks as \\n and escape double quotes as \\". Supported Markdown: headings (#, ##, ###), paragraphs, **bold**, *italic*, lists, > quotes, [links](https://...), and tables. presentation is optional: "inline" or "side-panel". Omit it to use the app default.`,
     `Do not repeat the title as a heading inside "content"; the title is shown separately. Structure the document with headings, short paragraphs and tables where useful. Keep a professional tone.`,
     `EDITING: when the user asks to change an existing document (add a section, rewrite a part, change the title), write ${name} again with the SAME documentId and the COMPLETE updated content, starting from the current document text you were given. Copy every unchanged section exactly as it was. Change only what was requested. The app merges your version with the user's own edits.`,
     `If the user asks for a document but leaves out details, write the document anyway and use clear placeholders such as [CLIENT NAME], [DATE], [AMOUNT]. Do not stop to ask unless the request is impossible to interpret.`,
@@ -4066,7 +4361,7 @@ var defaultToolApprovalLabels = {
 var format = (value) => {
   try {
     return _nullishCoalesce(JSON.stringify(value, null, 2), () => ( String(value)));
-  } catch (e11) {
+  } catch (e12) {
     return String(value);
   }
 };
@@ -4082,19 +4377,19 @@ function ToolApproval({
   className
 }) {
   const labels = { ...defaultToolApprovalLabels, ...labelOverrides };
-  const options = _optionalChain([request, 'access', _423 => _423.options, 'optionalAccess', _424 => _424.length]) ? request.options : ["approve", "reject"];
+  const options = _optionalChain([request, 'access', _434 => _434.options, 'optionalAccess', _435 => _435.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', _425 => _425(decision)]);
+    if (!disabled && pending) _optionalChain([onDecide, 'optionalCall', _436 => _436(decision)]);
   };
   const saveEdit = () => {
     let editedArguments;
     try {
       editedArguments = JSON.parse(_nullishCoalesce(draft, () => ( "null")));
-    } catch (e12) {
+    } catch (e13) {
       setDraftError(labels.invalidJson);
       return;
     }
@@ -4183,7 +4478,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', _426 => _426(decision)]);
+    _optionalChain([resolve, 'optionalCall', _437 => _437(decision)]);
   }, []);
   const request = _react.useCallback.call(void 0, (input) => {
     const id = _nullishCoalesce(input.id, () => ( nextId()));
@@ -4258,7 +4553,7 @@ function messageContentToText(content) {
 function parse(data) {
   try {
     return JSON.parse(data);
-  } catch (e13) {
+  } catch (e14) {
     return void 0;
   }
 }
@@ -4272,7 +4567,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', _427 => _427.langgraph_node]) === "string" && nodes.has(metadata.langgraph_node))) return null;
+      if (nodes && !(typeof _optionalChain([metadata, 'optionalAccess', _438 => _438.langgraph_node]) === "string" && nodes.has(metadata.langgraph_node))) return null;
       return messageContentToText(chunk.content) || null;
     }
     if (base === "messages/partial" || base === "messages/complete") {
@@ -4311,8 +4606,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', _428 => _428.action_name]) === action.name);
-    const allowed = Array.isArray(_optionalChain([config, 'optionalAccess', _429 => _429.allowed_decisions])) ? config.allowed_decisions.filter(
+    const config = configs.find((c) => _optionalChain([c, 'optionalAccess', _439 => _439.action_name]) === action.name);
+    const allowed = Array.isArray(_optionalChain([config, 'optionalAccess', _440 => _440.allowed_decisions])) ? config.allowed_decisions.filter(
       (d) => d === "approve" || d === "reject" || d === "edit"
     ) : void 0;
     return [
@@ -4396,4 +4691,8 @@ function interruptToApprovalRequests(value, idPrefix = "interrupt") {
 
 
 
-exports.useJuneTheme = useJuneTheme; exports.JuneRuntimeContext = JuneRuntimeContext; exports.useJuneRuntime = useJuneRuntime; exports.defaultParseActionEvent = defaultParseActionEvent; exports.runAction = runAction; exports.createActionHandler = createActionHandler; exports.JuneDocumentContext = JuneDocumentContext; exports.useDocumentOptions = useDocumentOptions; exports.mergeDocuments = mergeDocuments; exports.createDocumentStore = createDocumentStore; exports.rememberDocumentEcho = rememberDocumentEcho; exports.isDocumentEcho = isDocumentEcho; exports.getDefaultDocumentStore = getDefaultDocumentStore; exports.updateDocumentInProgram = updateDocumentInProgram; exports.readDocumentFromProgram = readDocumentFromProgram; exports.useDocumentBridge = useDocumentBridge; exports.DocumentBridge = DocumentBridge; exports.darkTheme = darkTheme; exports.lightTheme = lightTheme; exports.isThemeSet = isThemeSet; exports.resolveThemeVars = resolveThemeVars; exports.createTheme = createTheme; exports.useResolvedTheme = useResolvedTheme; exports.JuneThemeProvider = JuneThemeProvider; exports.normalizeProgram = normalizeProgram; exports.splitResponse = splitResponse; exports.resolveMixedContent = resolveMixedContent; exports.JuneErrorBoundary = JuneErrorBoundary; exports.MarkdownText = MarkdownText; exports.JuneRenderer = JuneRenderer; exports.validateComponentDefinition = validateComponentDefinition; exports.defineComponent = defineComponent; exports.isJuneComponent = isJuneComponent; exports.ComponentRegistry = ComponentRegistry; exports.createComponentRegistry = createComponentRegistry; exports.useRegistryLibrary = useRegistryLibrary; exports.defineJuneComponent = defineJuneComponent; exports.createJuneLibrary = createJuneLibrary; exports.defineJuneAction = defineJuneAction; exports.toAsyncIterable = toAsyncIterable; exports.consumeStream = consumeStream; exports.sseToText = sseToText; exports.jsonFieldExtractor = jsonFieldExtractor; exports.fetchStream = fetchStream; exports.useJuneStream = useJuneStream; exports.registerDocumentExporter = registerDocumentExporter; exports.listDocumentExporters = listDocumentExporters; exports.exportDocument = exportDocument; exports.downloadResult = downloadResult; exports.copyDocumentToClipboard = copyDocumentToClipboard; exports.ALL_EXPORT_FORMATS = ALL_EXPORT_FORMATS; exports.DOCUMENT_COMPONENT_DESCRIPTION = DOCUMENT_COMPONENT_DESCRIPTION; exports.DocumentEditor = DocumentEditor; exports.JuneDocumentEditorComponent = JuneDocumentEditorComponent; exports.withDocumentEditor = withDocumentEditor; exports.getDocumentEditorRules = getDocumentEditorRules; exports.getDocumentEditorInstructions = getDocumentEditorInstructions; exports.documentPromptOptions = documentPromptOptions; exports.serializeDocumentsForAgent = serializeDocumentsForAgent; exports.defaultToolApprovalLabels = defaultToolApprovalLabels; exports.ToolApproval = ToolApproval; exports.ToolApprovalList = ToolApprovalList; exports.useToolApproval = useToolApproval; exports.messageContentToText = messageContentToText; exports.createLangGraphExtractor = createLangGraphExtractor; exports.langGraphStreamOptions = langGraphStreamOptions; exports.readLangGraphInterrupts = readLangGraphInterrupts; exports.interruptToApprovalRequests = interruptToApprovalRequests;
+
+
+
+
+exports.useJuneTheme = useJuneTheme; exports.JuneRuntimeContext = JuneRuntimeContext; exports.useJuneRuntime = useJuneRuntime; exports.defaultParseActionEvent = defaultParseActionEvent; exports.runAction = runAction; exports.createActionHandler = createActionHandler; exports.JuneDocumentContext = JuneDocumentContext; exports.DocumentEditorConfigContext = DocumentEditorConfigContext; exports.useDocumentEditorConfig = useDocumentEditorConfig; exports.useDocumentOptions = useDocumentOptions; exports.mergeDocuments = mergeDocuments; exports.createDocumentStore = createDocumentStore; exports.rememberDocumentEcho = rememberDocumentEcho; exports.isDocumentEcho = isDocumentEcho; exports.getDefaultDocumentStore = getDefaultDocumentStore; exports.updateDocumentInProgram = updateDocumentInProgram; exports.readDocumentFromProgram = readDocumentFromProgram; exports.useDocumentBridge = useDocumentBridge; exports.DocumentBridge = DocumentBridge; exports.darkTheme = darkTheme; exports.lightTheme = lightTheme; exports.isThemeSet = isThemeSet; exports.resolveThemeVars = resolveThemeVars; exports.createTheme = createTheme; exports.useResolvedTheme = useResolvedTheme; exports.JuneThemeProvider = JuneThemeProvider; exports.normalizeProgram = normalizeProgram; exports.splitResponse = splitResponse; exports.resolveMixedContent = resolveMixedContent; exports.JuneErrorBoundary = JuneErrorBoundary; exports.MarkdownText = MarkdownText; exports.JuneRenderer = JuneRenderer; exports.validateComponentDefinition = validateComponentDefinition; exports.defineComponent = defineComponent; exports.isJuneComponent = isJuneComponent; exports.ComponentRegistry = ComponentRegistry; exports.createComponentRegistry = createComponentRegistry; exports.useRegistryLibrary = useRegistryLibrary; exports.defineJuneComponent = defineJuneComponent; exports.createJuneLibrary = createJuneLibrary; exports.defineJuneAction = defineJuneAction; exports.toAsyncIterable = toAsyncIterable; exports.consumeStream = consumeStream; exports.sseToText = sseToText; exports.jsonFieldExtractor = jsonFieldExtractor; exports.fetchStream = fetchStream; exports.useJuneStream = useJuneStream; exports.registerDocumentExporter = registerDocumentExporter; exports.listDocumentExporters = listDocumentExporters; exports.exportDocument = exportDocument; exports.downloadResult = downloadResult; exports.copyDocumentToClipboard = copyDocumentToClipboard; exports.ALL_EXPORT_FORMATS = ALL_EXPORT_FORMATS; exports.resolveDocumentPresentation = resolveDocumentPresentation; exports.documentPanelWidth = documentPanelWidth; exports.DOCUMENT_COMPONENT_DESCRIPTION = DOCUMENT_COMPONENT_DESCRIPTION; exports.DocumentEditor = DocumentEditor; exports.JuneDocumentEditorComponent = JuneDocumentEditorComponent; exports.withDocumentEditor = withDocumentEditor; exports.getDocumentEditorRules = getDocumentEditorRules; exports.getDocumentEditorInstructions = getDocumentEditorInstructions; exports.documentPromptOptions = documentPromptOptions; exports.serializeDocumentsForAgent = serializeDocumentsForAgent; exports.defaultToolApprovalLabels = defaultToolApprovalLabels; exports.ToolApproval = ToolApproval; exports.ToolApprovalList = ToolApprovalList; exports.useToolApproval = useToolApproval; exports.messageContentToText = messageContentToText; exports.createLangGraphExtractor = createLangGraphExtractor; exports.langGraphStreamOptions = langGraphStreamOptions; exports.readLangGraphInterrupts = readLangGraphInterrupts; exports.interruptToApprovalRequests = interruptToApprovalRequests;