@june-ai/june-ui 0.2.4 → 0.2.6

package/dist/index.cjs

@@ -58,30 +58,6 @@ var init_errors = __esm({
   }
 });
 
-// src/components/document-editor/document-extensions.ts
-function createDocumentExtensions() {
-  return [
-    import_starter_kit.default.configure({
-      heading: { levels: [1, 2, 3] },
-      // Tiptap v3 StarterKit already includes Link and Underline
-      link: { openOnClick: false, autolink: true, defaultProtocol: "https" }
-    }),
-    import_extension_text_align.default.configure({ types: ["heading", "paragraph"] }),
-    import_extension_table.TableKit,
-    import_markdown.Markdown
-  ];
-}
-var import_extension_table, import_extension_text_align, import_markdown, import_starter_kit;
-var init_document_extensions = __esm({
-  "src/components/document-editor/document-extensions.ts"() {
-    "use strict";
-    import_extension_table = require("@tiptap/extension-table");
-    import_extension_text_align = __toESM(require("@tiptap/extension-text-align"), 1);
-    import_markdown = require("@tiptap/markdown");
-    import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
-  }
-});
-
 // src/components/document-editor/document-utils.ts
 function isDocJSON(value) {
   if (!value || typeof value !== "object") return false;
@@ -169,6 +145,380 @@ var init_document_utils = __esm({
   }
 });
 
+// src/components/document-editor/document-pagination.ts
+function gapWidget(height) {
+  return () => {
+    const el = document.createElement("div");
+    el.className = "june-doc__page-gap";
+    el.contentEditable = "false";
+    el.setAttribute("aria-hidden", "true");
+    el.style.height = `${height}px`;
+    return el;
+  };
+}
+function build(doc, breaks) {
+  return import_view.DecorationSet.create(
+    doc,
+    breaks.map(
+      (b) => import_view.Decoration.widget(b.pos, gapWidget(b.height), {
+        side: -1,
+        ignoreSelection: true,
+        key: `jd-gap-${b.pos}-${Math.round(b.height)}`
+      })
+    )
+  );
+}
+function collectUnits(doc) {
+  const units = [];
+  const walk = (parent, start, inheritedBreak) => {
+    parent.forEach((child, offset, index) => {
+      const pos = start + offset;
+      const breakPos = index === 0 && inheritedBreak !== null ? inheritedBreak : pos;
+      if (SPLITTABLE.has(child.type.name) && child.childCount > 0) {
+        walk(child, pos + 1, breakPos);
+      } else {
+        units.push({ pos, breakPos, node: child });
+      }
+    });
+  };
+  walk(doc, 0, null);
+  return units;
+}
+function measure(view, cfg) {
+  const prose = view.dom;
+  const proseRect = prose.getBoundingClientRect();
+  const scale = prose.offsetWidth ? proseRect.width / prose.offsetWidth : 1;
+  if (!scale || !proseRect.width) return { breaks: [], pages: 1 };
+  const gaps = [...prose.querySelectorAll(".june-doc__page-gap")].map((g) => {
+    const r = g.getBoundingClientRect();
+    return { top: (r.top - proseRect.top) / scale, height: r.height / scale };
+  });
+  const gapsAbove = (y) => gaps.reduce((sum, g) => g.top <= y + 0.5 ? sum + g.height : sum, 0);
+  const contentH = Math.max(80, cfg.pageHeight - cfg.padTop - cfg.padBottom);
+  const stride = cfg.pageHeight + cfg.gap;
+  const breaks = /* @__PURE__ */ new Map();
+  let pageStart = 0;
+  let added = 0;
+  let force = false;
+  for (const unit of collectUnits(view.state.doc)) {
+    const el = view.nodeDOM(unit.pos);
+    if (!(el instanceof HTMLElement)) continue;
+    const r = el.getBoundingClientRect();
+    const rawTop = (r.top - proseRect.top) / scale;
+    const natural = rawTop - gapsAbove(rawTop);
+    const h = r.height / scale;
+    let top = natural + added;
+    let bottom = top + h;
+    const overflows = bottom > pageStart + contentH + 0.5 && top > pageStart + 1;
+    if (force || overflows) {
+      const target = pageStart + stride;
+      if (top < target) {
+        const spacer = target - top;
+        breaks.set(unit.breakPos, (breaks.get(unit.breakPos) ?? 0) + spacer);
+        added += spacer;
+        top = target;
+        bottom = top + h;
+      }
+      pageStart = target;
+      while (top >= pageStart + stride) pageStart += stride;
+      force = false;
+    }
+    while (bottom > pageStart + contentH + 0.5) pageStart += stride;
+    if (unit.node.type.name === "pageBreak") force = true;
+  }
+  const pages = Math.max(1, Math.round(pageStart / stride) + 1 + (force ? 1 : 0));
+  return {
+    breaks: [...breaks].map(([pos, height]) => ({ pos, height: Math.round(height * 10) / 10 })).sort((a, b) => a.pos - b.pos),
+    pages
+  };
+}
+function setPaginationConfig(editor, cfg) {
+  if (editor.isDestroyed) return;
+  const prev = configs.get(editor.view);
+  configs.set(editor.view, cfg);
+  if (!prev || prev.enabled !== cfg.enabled || prev.pageHeight !== cfg.pageHeight || prev.gap !== cfg.gap || prev.padTop !== cfg.padTop || prev.padBottom !== cfg.padBottom) {
+    remeasurePagination(editor);
+  }
+}
+function remeasurePagination(editor) {
+  if (editor.isDestroyed) return;
+  const s = paginationKey.getState(editor.state);
+  if (!s) return;
+  editor.view.dispatch(editor.state.tr.setMeta(paginationKey, { remeasure: true }).setMeta("addToHistory", false));
+}
+function getPageCount(editor) {
+  return editor && paginationKey.getState(editor.state)?.pages || 1;
+}
+var import_core, import_state, import_view, paginationKey, configs, SPLITTABLE, same2, DocumentPagination;
+var init_document_pagination = __esm({
+  "src/components/document-editor/document-pagination.ts"() {
+    "use strict";
+    import_core = require("@tiptap/core");
+    import_state = require("@tiptap/pm/state");
+    import_view = require("@tiptap/pm/view");
+    paginationKey = new import_state.PluginKey("juneDocPagination");
+    configs = /* @__PURE__ */ new WeakMap();
+    SPLITTABLE = /* @__PURE__ */ new Set(["bulletList", "orderedList", "listItem", "blockquote"]);
+    same2 = (a, b) => a.length === b.length && a.every((x, i) => x.pos === b[i].pos && Math.abs(x.height - b[i].height) < 1);
+    DocumentPagination = import_core.Extension.create({
+      name: "juneDocPagination",
+      addProseMirrorPlugins() {
+        return [
+          new import_state.Plugin({
+            key: paginationKey,
+            state: {
+              init: () => ({ breaks: [], pages: 1, decorations: import_view.DecorationSet.empty, epoch: 0 }),
+              apply(tr, prev, _old, state) {
+                const meta = tr.getMeta(paginationKey);
+                if (meta?.remeasure) return { ...prev, epoch: prev.epoch + 1 };
+                if (meta?.breaks) {
+                  return { ...prev, breaks: meta.breaks, pages: meta.pages ?? prev.pages, decorations: build(state.doc, meta.breaks) };
+                }
+                if (tr.docChanged) {
+                  const breaks = prev.breaks.map((b) => ({ ...b, pos: tr.mapping.map(b.pos, -1) })).filter((b) => b.pos >= 0 && b.pos <= state.doc.content.size);
+                  return { ...prev, breaks, decorations: prev.decorations.map(tr.mapping, tr.doc) };
+                }
+                return prev;
+              }
+            },
+            props: {
+              decorations: (state) => paginationKey.getState(state)?.decorations
+            },
+            view(view) {
+              let frame = null;
+              let rounds = 0;
+              const schedule = (reset) => {
+                if (reset) rounds = 0;
+                if (frame !== null || typeof window === "undefined") return;
+                const raf = window.requestAnimationFrame ?? ((cb) => window.setTimeout(() => cb(0), 16));
+                frame = raf(() => {
+                  frame = null;
+                  if (view.isDestroyed) return;
+                  const cfg = configs.get(view);
+                  const current = paginationKey.getState(view.state);
+                  if (!current) return;
+                  const next = cfg?.enabled ? measure(view, cfg) : { breaks: [], pages: 1 };
+                  if (same2(next.breaks, current.breaks) && next.pages === current.pages) return;
+                  if (++rounds > 4) return;
+                  view.dispatch(view.state.tr.setMeta(paginationKey, next).setMeta("addToHistory", false));
+                });
+              };
+              schedule(true);
+              return {
+                update(v, prevState) {
+                  const pg = paginationKey.getState(v.state);
+                  const prevPg = paginationKey.getState(prevState);
+                  if (v.state.doc !== prevState.doc || pg?.epoch !== prevPg?.epoch) schedule(true);
+                  else if (pg !== prevPg) schedule(false);
+                },
+                destroy() {
+                  frame = null;
+                }
+              };
+            }
+          })
+        ];
+      }
+    });
+  }
+});
+
+// src/components/document-editor/document-search.ts
+function findMatches(doc, term, caseSensitive) {
+  if (!term) return [];
+  const needle = caseSensitive ? term : term.toLowerCase();
+  const out = [];
+  doc.descendants((node, pos) => {
+    if (!node.isTextblock) return true;
+    let text = "";
+    const map = [];
+    node.forEach((child, offset) => {
+      const start = pos + 1 + offset;
+      if (child.isText && child.text) {
+        for (let i = 0; i < child.text.length; i++) map.push(start + i);
+        text += child.text;
+      } else {
+        map.push(start);
+        text += "\uFFFC";
+      }
+    });
+    const hay = caseSensitive ? text : text.toLowerCase();
+    let idx = hay.indexOf(needle);
+    while (idx !== -1) {
+      out.push({ from: map[idx], to: map[idx + needle.length - 1] + 1 });
+      idx = hay.indexOf(needle, idx + needle.length);
+    }
+    return false;
+  });
+  return out;
+}
+function build2(doc, term, caseSensitive, current) {
+  const matches = findMatches(doc, term, caseSensitive);
+  const active = matches.length ? Math.min(Math.max(current, 0), matches.length - 1) : -1;
+  const decorations = import_view2.DecorationSet.create(
+    doc,
+    matches.map(
+      (m, i) => import_view2.Decoration.inline(m.from, m.to, {
+        class: i === active ? "june-doc__match june-doc__match--active" : "june-doc__match"
+      })
+    )
+  );
+  return { term, caseSensitive, current: active, matches, decorations };
+}
+function getSearchState(editor) {
+  return editor ? searchKey.getState(editor.state) : void 0;
+}
+function setSearch(editor, meta) {
+  editor.view.dispatch(editor.state.tr.setMeta(searchKey, meta));
+}
+function gotoMatch(editor, step) {
+  const s = getSearchState(editor);
+  if (!s || !s.matches.length) return;
+  const n = s.matches.length;
+  const current = s.current < 0 ? 0 : (s.current + step + n) % n;
+  setSearch(editor, { current });
+  const m = s.matches[current];
+  editor.chain().setTextSelection(m).scrollIntoView().run();
+}
+function replaceCurrent(editor, replacement) {
+  const s = getSearchState(editor);
+  if (!s || s.current < 0) return;
+  const m = s.matches[s.current];
+  editor.chain().command(({ tr }) => {
+    if (replacement) tr.insertText(replacement, m.from, m.to);
+    else tr.delete(m.from, m.to);
+    return true;
+  }).run();
+  gotoMatch(editor, 0);
+}
+function replaceAll(editor, replacement) {
+  const s = getSearchState(editor);
+  if (!s || !s.matches.length) return 0;
+  const matches = [...s.matches].reverse();
+  editor.chain().command(({ tr }) => {
+    for (const m of matches) {
+      if (replacement) tr.insertText(replacement, m.from, m.to);
+      else tr.delete(m.from, m.to);
+    }
+    return true;
+  }).run();
+  return matches.length;
+}
+var import_core2, import_state2, import_view2, searchKey, DocumentSearch;
+var init_document_search = __esm({
+  "src/components/document-editor/document-search.ts"() {
+    "use strict";
+    import_core2 = require("@tiptap/core");
+    import_state2 = require("@tiptap/pm/state");
+    import_view2 = require("@tiptap/pm/view");
+    searchKey = new import_state2.PluginKey("juneDocSearch");
+    DocumentSearch = import_core2.Extension.create({
+      name: "juneDocSearch",
+      addProseMirrorPlugins() {
+        return [
+          new import_state2.Plugin({
+            key: searchKey,
+            state: {
+              init: () => ({ term: "", caseSensitive: false, current: -1, matches: [], decorations: import_view2.DecorationSet.empty }),
+              apply(tr, prev, _old, state) {
+                const meta = tr.getMeta(searchKey);
+                if (!meta && !tr.docChanged) return prev;
+                if (!meta && !prev.term) return prev;
+                return build2(
+                  state.doc,
+                  meta?.term ?? prev.term,
+                  meta?.caseSensitive ?? prev.caseSensitive,
+                  meta?.current ?? prev.current
+                );
+              }
+            },
+            props: {
+              decorations: (state) => searchKey.getState(state)?.decorations
+            }
+          })
+        ];
+      }
+    });
+  }
+});
+
+// src/components/document-editor/document-extensions.ts
+function createDocumentExtensions() {
+  return [
+    import_starter_kit.default.configure({
+      heading: { levels: [1, 2, 3] },
+      // Tiptap v3 StarterKit already includes Link and Underline
+      link: { openOnClick: false, autolink: true, defaultProtocol: "https" }
+    }),
+    import_extension_text_align.default.configure({ types: ["heading", "paragraph"] }),
+    import_extension_table.TableKit,
+    import_extension_text_style.TextStyle,
+    import_extension_text_style.Color,
+    import_extension_text_style.FontFamily,
+    import_extension_text_style.FontSize,
+    import_extension_highlight.default.configure({ multicolor: true }),
+    import_extension_subscript.default,
+    import_extension_superscript.default,
+    import_extension_image.default.configure({
+      inline: false,
+      allowBase64: true,
+      resize: { enabled: true, minWidth: 48, minHeight: 32, alwaysPreserveAspectRatio: true }
+    }),
+    PageBreak,
+    DocumentSearch,
+    DocumentPagination,
+    // inactive until the live editor sets a page geometry
+    import_markdown.Markdown
+  ];
+}
+var import_core3, import_extension_highlight, import_extension_image, import_extension_subscript, import_extension_superscript, import_extension_table, import_extension_text_align, import_extension_text_style, import_markdown, import_starter_kit, PageBreak;
+var init_document_extensions = __esm({
+  "src/components/document-editor/document-extensions.ts"() {
+    "use strict";
+    import_core3 = require("@tiptap/core");
+    import_extension_highlight = __toESM(require("@tiptap/extension-highlight"), 1);
+    import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
+    import_extension_subscript = __toESM(require("@tiptap/extension-subscript"), 1);
+    import_extension_superscript = __toESM(require("@tiptap/extension-superscript"), 1);
+    import_extension_table = require("@tiptap/extension-table");
+    import_extension_text_align = __toESM(require("@tiptap/extension-text-align"), 1);
+    import_extension_text_style = require("@tiptap/extension-text-style");
+    import_markdown = require("@tiptap/markdown");
+    import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
+    init_document_pagination();
+    init_document_search();
+    PageBreak = import_core3.Node.create({
+      name: "pageBreak",
+      group: "block",
+      atom: true,
+      selectable: true,
+      parseHTML() {
+        return [{ tag: "div[data-page-break]" }];
+      },
+      renderHTML({ HTMLAttributes }) {
+        return [
+          "div",
+          (0, import_core3.mergeAttributes)(HTMLAttributes, {
+            "data-page-break": "true",
+            class: "june-doc__page-break",
+            style: "break-after: page; page-break-after: always;"
+          })
+        ];
+      },
+      // Markdown has no page break; a thematic break is the closest stable equivalent.
+      renderMarkdown: () => "---",
+      addCommands() {
+        return {
+          setPageBreak: () => ({ chain }) => chain().insertContent([{ type: this.name }, { type: "paragraph" }]).run()
+        };
+      },
+      addKeyboardShortcuts() {
+        return { "Mod-Enter": () => this.editor.commands.setPageBreak() };
+      }
+    });
+  }
+});
+
 // src/components/document-editor/document-engine.ts
 var document_engine_exports = {};
 __export(document_engine_exports, {
@@ -179,7 +529,7 @@ __export(document_engine_exports, {
 });
 function scratchEditor() {
   if (!scratch || scratch.isDestroyed) {
-    scratch = new import_core.Editor({ extensions: createDocumentExtensions(), content: "" });
+    scratch = new import_core4.Editor({ extensions: createDocumentExtensions(), content: "" });
   }
   return scratch;
 }
@@ -205,11 +555,11 @@ function load(doc) {
   editor.commands.setContent(doc, { emitUpdate: false });
   return editor;
 }
-var import_core, scratch, docToHtml, docToMarkdown, docToText;
+var import_core4, scratch, docToHtml, docToMarkdown, docToText;
 var init_document_engine = __esm({
   "src/components/document-editor/document-engine.ts"() {
     "use strict";
-    import_core = require("@tiptap/core");
+    import_core4 = require("@tiptap/core");
     init_errors();
     init_document_extensions();
     init_document_utils();
@@ -249,17 +599,21 @@ __export(index_exports, {
   getDefaultDocumentStore: () => getDefaultDocumentStore,
   getDocumentEditorInstructions: () => getDocumentEditorInstructions,
   getDocumentEditorRules: () => getDocumentEditorRules,
+  isDocumentEcho: () => isDocumentEcho,
   isJuneError: () => isJuneError,
   jsonFieldExtractor: () => jsonFieldExtractor,
   juneLibrary: () => juneLibrary,
   lightTheme: () => lightTheme,
   listDocumentExporters: () => listDocumentExporters,
   mergeDocuments: () => mergeDocuments,
+  readDocumentFromProgram: () => readDocumentFromProgram,
   registerDocumentExporter: () => registerDocumentExporter,
+  rememberDocumentEcho: () => rememberDocumentEcho,
   runAction: () => runAction,
   serializeDocumentsForAgent: () => serializeDocumentsForAgent,
   sseToText: () => sseToText,
   toJuneError: () => toJuneError,
+  updateDocumentInProgram: () => updateDocumentInProgram,
   useDocumentOptions: () => useDocumentOptions,
   useJuneRuntime: () => useJuneRuntime,
   useJuneStream: () => useJuneStream,
@@ -347,80 +701,392 @@ function useDocumentValue(store, id, selector) {
   return (0, import_react.useSyncExternalStore)(store.subscribe, read, read);
 }
 
-// src/core/context.ts
-var import_react2 = require("react");
-var JuneContext = (0, import_react2.createContext)({
-  mode: "light",
-  theme: "light"
-});
-function useJuneTheme() {
-  return (0, import_react2.useContext)(JuneContext);
-}
-var JuneRuntimeContext = (0, import_react2.createContext)({ isStreaming: false });
-function useJuneRuntime() {
-  return (0, import_react2.useContext)(JuneRuntimeContext);
+// src/components/document-editor/document-merge.ts
+init_document_utils();
+var MAX_CELLS = 4e6;
+function matchIndices(a, b) {
+  const n = a.length;
+  const m = b.length;
+  if (n * m > MAX_CELLS) return null;
+  const dp = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+  for (let i2 = n - 1; i2 >= 0; i2--) {
+    for (let j2 = m - 1; j2 >= 0; j2--) {
+      dp[i2][j2] = a[i2] === b[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
+    }
+  }
+  const matches = /* @__PURE__ */ new Map();
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (a[i] === b[j]) {
+      matches.set(i, j);
+      i++;
+      j++;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) i++;
+    else j++;
+  }
+  return matches;
 }
-
-// src/renderer/renderer.tsx
-init_errors();
-
-// src/themes/theme-provider.tsx
-var import_react3 = require("react");
-
-// src/themes/dark.ts
-var darkTheme = {
-  "--june-foreground": "#f3f4f6",
-  "--june-muted": "#9ca3af",
-  "--june-border": "#1f2937",
-  "--june-accent": "#818cf8",
-  "--june-danger": "#f87171"
-};
-
-// src/themes/light.ts
-var lightTheme = {
-  "--june-foreground": "#111827",
-  "--june-muted": "#6b7280",
-  "--june-border": "#e5e7eb",
-  "--june-accent": "#4f46e5",
-  "--june-danger": "#b91c1c"
-};
-
-// src/themes/theme-provider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var QUERY = "(prefers-color-scheme: dark)";
-function subscribe(onChange) {
-  if (typeof window === "undefined" || !window.matchMedia) return () => {
+var same = (x, y) => x.length === y.length && x.every((v, i) => v === y[i]);
+function mergeBlocks(base, local, incoming) {
+  if (same(local, base)) return { blocks: incoming, conflicts: 0 };
+  if (same(incoming, base) || same(local, incoming)) return { blocks: local, conflicts: 0 };
+  const ml = matchIndices(base, local);
+  const mn = matchIndices(base, incoming);
+  if (!ml || !mn) return { blocks: null, conflicts: 1 };
+  const anchors = [...ml.keys()].filter((i) => mn.has(i)).sort((x, y) => x - y);
+  const out = [];
+  let conflicts = 0;
+  let pb = -1;
+  let pl = -1;
+  let pn = -1;
+  const region = (bEnd, lEnd, nEnd) => {
+    const B = base.slice(pb + 1, bEnd);
+    const L = local.slice(pl + 1, lEnd);
+    const N = incoming.slice(pn + 1, nEnd);
+    if (B.length === L.length && L.length === N.length) {
+      for (let k = 0; k < B.length; k++) {
+        if (L[k] === B[k]) out.push(N[k]);
+        else if (N[k] === B[k] || N[k] === L[k]) out.push(L[k]);
+        else {
+          conflicts++;
+          out.push(L[k]);
+        }
+      }
+      return;
+    }
+    if (same(L, B)) out.push(...N);
+    else if (same(N, B) || same(L, N)) out.push(...L);
+    else {
+      conflicts++;
+      out.push(...L);
+    }
   };
-  const mq = window.matchMedia(QUERY);
-  mq.addEventListener("change", onChange);
-  return () => mq.removeEventListener("change", onChange);
-}
-function getSnapshot() {
-  if (typeof window === "undefined") return "light";
-  return window.matchMedia?.(QUERY)?.matches ? "dark" : "light";
-}
-function getServerSnapshot() {
-  return "light";
+  for (const a of anchors) {
+    const la = ml.get(a);
+    const na = mn.get(a);
+    region(a, la, na);
+    out.push(local[la]);
+    pb = a;
+    pl = la;
+    pn = na;
+  }
+  region(base.length, local.length, incoming.length);
+  return { blocks: out, conflicts };
 }
-function useResolvedTheme(mode) {
-  const system = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
-  return mode === "system" ? system : mode;
+function mergeDocuments(base, local, incoming) {
+  const toBlocks = (d) => (d.content ?? []).map((node) => JSON.stringify(node));
+  const { blocks: blocks2, conflicts } = mergeBlocks(toBlocks(base), toBlocks(local), toBlocks(incoming));
+  if (!blocks2) return { doc: local, conflicts: Math.max(1, conflicts) };
+  if (blocks2.length === 0) return { doc: emptyDoc(), conflicts };
+  return { doc: { type: "doc", content: blocks2.map((b) => JSON.parse(b)) }, conflicts };
 }
-function JuneThemeProvider({
-  mode,
-  vars,
-  className,
-  style,
-  children
-}) {
-  const explicit = mode !== void 0;
-  const resolved = useResolvedTheme(mode ?? "system");
-  const mergedStyle = (0, import_react3.useMemo)(() => {
-    if (!explicit && !vars && !style) return void 0;
-    const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
-    return {
-      ...base,
-      ...vars,
+
+// src/components/document-editor/document-store.ts
+init_document_utils();
+var incomingKey = (doc) => JSON.stringify([doc.title, docKey(doc.json)]);
+function createDocumentStore() {
+  const records = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => listeners.forEach((listener) => listener());
+  const put = (record) => {
+    records.set(record.id, record);
+    emit();
+  };
+  const fresh2 = (doc) => ({
+    id: doc.id,
+    title: doc.title,
+    documentType: doc.documentType,
+    status: doc.status,
+    json: doc.json,
+    baseJson: doc.json,
+    baseTitle: doc.title,
+    lastIncomingKey: incomingKey(doc),
+    revision: 0,
+    origin: "external",
+    pending: null,
+    updatedAt: Date.now()
+  });
+  return {
+    get: (id) => records.get(id),
+    list: () => [...records.values()],
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    receive(incoming) {
+      const current = records.get(incoming.id);
+      if (!current) {
+        put(fresh2(incoming));
+        return "created";
+      }
+      const key = incomingKey(incoming);
+      if (current.lastIncomingKey === key) return "unchanged";
+      const userEditedBody = docKey(current.json) !== docKey(current.baseJson);
+      const userEditedTitle = current.title !== current.baseTitle;
+      const title = userEditedTitle ? current.title : incoming.title;
+      const meta = {
+        documentType: incoming.documentType ?? current.documentType,
+        status: incoming.status ?? current.status
+      };
+      if (!userEditedBody) {
+        put({
+          ...current,
+          ...meta,
+          title,
+          baseTitle: incoming.title,
+          json: incoming.json,
+          baseJson: incoming.json,
+          lastIncomingKey: key,
+          revision: current.revision + 1,
+          origin: "external",
+          pending: null,
+          updatedAt: Date.now()
+        });
+        return "applied";
+      }
+      const { doc, conflicts } = mergeDocuments(current.baseJson, current.json, incoming.json);
+      if (conflicts === 0) {
+        put({
+          ...current,
+          ...meta,
+          title,
+          baseTitle: incoming.title,
+          json: doc,
+          baseJson: incoming.json,
+          lastIncomingKey: key,
+          revision: current.revision + 1,
+          origin: "external",
+          pending: null,
+          updatedAt: Date.now()
+        });
+        return "merged";
+      }
+      put({
+        ...current,
+        ...meta,
+        lastIncomingKey: key,
+        pending: { json: incoming.json, title: incoming.title, merged: doc, conflicts }
+      });
+      return "conflict";
+    },
+    hydrate(doc) {
+      put(fresh2(doc));
+    },
+    edit(id, json, origin) {
+      const current = records.get(id);
+      if (!current || docKey(current.json) === docKey(json)) return;
+      put({ ...current, json, origin, revision: current.revision + 1, updatedAt: Date.now() });
+    },
+    setTitle(id, title) {
+      const current = records.get(id);
+      if (!current || current.title === title) return;
+      put({ ...current, title, updatedAt: Date.now() });
+    },
+    resolve(id, choice) {
+      const current = records.get(id);
+      const pending = current?.pending;
+      if (!current || !pending) return;
+      if (choice === "keep") {
+        put({ ...current, baseJson: pending.json, baseTitle: pending.title, pending: null });
+        return;
+      }
+      const json = choice === "merge" ? pending.merged : pending.json;
+      const title = choice === "merge" ? current.title : pending.title;
+      put({
+        ...current,
+        title,
+        json,
+        baseJson: pending.json,
+        baseTitle: pending.title,
+        revision: current.revision + 1,
+        origin: "external",
+        pending: null,
+        updatedAt: Date.now()
+      });
+    },
+    remove(id) {
+      if (records.delete(id)) emit();
+    }
+  };
+}
+var echoes = /* @__PURE__ */ new WeakMap();
+var ECHO_MEMORY = 8;
+function rememberDocumentEcho(store, id, content) {
+  let byId = echoes.get(store);
+  if (!byId) echoes.set(store, byId = /* @__PURE__ */ new Map());
+  const list2 = byId.get(id) ?? [];
+  list2.push(content);
+  if (list2.length > ECHO_MEMORY) list2.shift();
+  byId.set(id, list2);
+}
+function isDocumentEcho(store, id, content) {
+  return !!content && !!echoes.get(store)?.get(id)?.includes(content);
+}
+var defaultStore = null;
+function getDefaultDocumentStore() {
+  if (!defaultStore) defaultStore = createDocumentStore();
+  return defaultStore;
+}
+
+// src/utils/update-document-program.ts
+function readString(src, i) {
+  if (src[i] !== '"') return null;
+  let j = i + 1;
+  let value = "";
+  while (j < src.length) {
+    const ch = src[j];
+    if (ch === '"') return { start: i, end: j + 1, value };
+    if (ch === "\\") {
+      const next = src[j + 1];
+      if (next === void 0) return null;
+      if (next === "u" && /^[0-9a-fA-F]{4}$/.test(src.slice(j + 2, j + 6))) {
+        value += String.fromCharCode(parseInt(src.slice(j + 2, j + 6), 16));
+        j += 6;
+        continue;
+      }
+      value += next === "n" ? "\n" : next === "t" ? "	" : next === "r" ? "\r" : next === "b" ? "\b" : next === "f" ? "\f" : next;
+      j += 2;
+      continue;
+    }
+    value += ch;
+    j++;
+  }
+  return null;
+}
+var skipSpace = (src, i) => {
+  while (i < src.length && /\s/.test(src[i])) i++;
+  return i;
+};
+var toLangString = (value) => JSON.stringify(value);
+function updateDocumentInProgram(program, documentId, update, componentName = "DocumentEditor") {
+  const re = new RegExp(`\\b${componentName}\\s*\\(`, "g");
+  let match;
+  while (match = re.exec(program)) {
+    const args = [];
+    let i = match.index + match[0].length;
+    for (let n = 0; n < 3; n++) {
+      i = skipSpace(program, i);
+      const tok = readString(program, i);
+      if (!tok) break;
+      args.push(tok);
+      i = skipSpace(program, tok.end);
+      if (program[i] === ",") i++;
+      else break;
+    }
+    if (args[0]?.value !== documentId) continue;
+    const edits = [];
+    if (update.title !== void 0 && args[1] && args[1].value !== update.title) {
+      edits.push({ start: args[1].start, end: args[1].end, text: toLangString(update.title) });
+    }
+    if (update.content !== void 0 && args[2] && args[2].value !== update.content) {
+      edits.push({ start: args[2].start, end: args[2].end, text: toLangString(update.content) });
+    }
+    if (!args[2] && update.content !== void 0) return null;
+    let out = program;
+    for (const e of edits.sort((a, b) => b.start - a.start)) {
+      out = out.slice(0, e.start) + e.text + out.slice(e.end);
+    }
+    return out;
+  }
+  return null;
+}
+function readDocumentFromProgram(program, documentId, componentName = "DocumentEditor") {
+  const re = new RegExp(`\\b${componentName}\\s*\\(`, "g");
+  let match;
+  while (match = re.exec(program)) {
+    const args = [];
+    let i = match.index + match[0].length;
+    for (let n = 0; n < 3; n++) {
+      i = skipSpace(program, i);
+      const tok = readString(program, i);
+      if (!tok) break;
+      args.push(tok);
+      i = skipSpace(program, tok.end);
+      if (program[i] === ",") i++;
+      else break;
+    }
+    if (args[0]?.value === documentId && args[1] && args[2]) return { title: args[1].value, content: args[2].value };
+  }
+  return null;
+}
+
+// src/core/context.ts
+var import_react2 = require("react");
+var JuneContext = (0, import_react2.createContext)({
+  mode: "light",
+  theme: "light"
+});
+function useJuneTheme() {
+  return (0, import_react2.useContext)(JuneContext);
+}
+var JuneRuntimeContext = (0, import_react2.createContext)({ isStreaming: false });
+function useJuneRuntime() {
+  return (0, import_react2.useContext)(JuneRuntimeContext);
+}
+
+// src/renderer/renderer.tsx
+init_errors();
+
+// src/themes/theme-provider.tsx
+var import_react3 = require("react");
+
+// src/themes/dark.ts
+var darkTheme = {
+  "--june-foreground": "#f3f4f6",
+  "--june-muted": "#9ca3af",
+  "--june-border": "#1f2937",
+  "--june-accent": "#818cf8",
+  "--june-danger": "#f87171"
+};
+
+// src/themes/light.ts
+var lightTheme = {
+  "--june-foreground": "#111827",
+  "--june-muted": "#6b7280",
+  "--june-border": "#e5e7eb",
+  "--june-accent": "#4f46e5",
+  "--june-danger": "#b91c1c"
+};
+
+// src/themes/theme-provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var QUERY = "(prefers-color-scheme: dark)";
+function subscribe(onChange) {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {
+  };
+  const mq = window.matchMedia(QUERY);
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
+function getSnapshot() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia?.(QUERY)?.matches ? "dark" : "light";
+}
+function getServerSnapshot() {
+  return "light";
+}
+function useResolvedTheme(mode) {
+  const system = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+  return mode === "system" ? system : mode;
+}
+function JuneThemeProvider({
+  mode,
+  vars,
+  className,
+  style,
+  children
+}) {
+  const explicit = mode !== void 0;
+  const resolved = useResolvedTheme(mode ?? "system");
+  const mergedStyle = (0, import_react3.useMemo)(() => {
+    if (!explicit && !vars && !style) return void 0;
+    const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
+    return {
+      ...base,
+      ...vars,
       ...explicit ? { colorScheme: resolved } : {},
       ...style
     };
@@ -905,14 +1571,43 @@ function JuneRenderer(props) {
     onError,
     onJuneError,
     documents,
+    onResponseChange,
+    responseChangeDelay = 300,
     loadingFallback = null,
     emptyFallback = null,
     errorFallback,
     resetKeys,
     ...rendererProps
   } = props;
-  const latest = (0, import_react5.useRef)({ actions, confirmAction, parseActionEvent, onAction, onError, onJuneError });
-  latest.current = { actions, confirmAction, parseActionEvent, onAction, onError, onJuneError };
+  const latest = (0, import_react5.useRef)({ actions, confirmAction, parseActionEvent, onAction, onError, onJuneError, onResponseChange, responseChangeDelay, response });
+  latest.current = { actions, confirmAction, parseActionEvent, onAction, onError, onJuneError, onResponseChange, responseChangeDelay, response };
+  const syncTimers = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react5.useEffect)(() => {
+    const timers = syncTimers.current;
+    return () => {
+      timers.forEach(clearTimeout);
+      timers.clear();
+    };
+  }, []);
+  const syncProgram = (0, import_react5.useCallback)(async (change, store) => {
+    const l = latest.current;
+    if (!l.onResponseChange || typeof l.response !== "string") return;
+    const record = store.get(change.documentId);
+    const title = record?.title ?? change.title;
+    const json = record?.json ?? change.json;
+    try {
+      const { docToMarkdown: docToMarkdown2 } = await Promise.resolve().then(() => (init_document_engine(), document_engine_exports));
+      const markdown = docToMarkdown2(json);
+      const program = latest.current.response;
+      if (typeof program !== "string") return;
+      const next = updateDocumentInProgram(program, change.documentId, { title, content: markdown });
+      if (next === null || next === program) return;
+      rememberDocumentEcho(store, change.documentId, markdown);
+      latest.current.onResponseChange?.(next, { documentId: change.documentId, title, markdown, source: change.source });
+    } catch (error) {
+      latest.current.onJuneError?.(toJuneError(error, "DOCUMENT_ERROR", "Updating the program failed"));
+    }
+  }, []);
   const handleAction = (0, import_react5.useCallback)((event) => {
     const l = latest.current;
     l.onAction?.(event);
@@ -951,12 +1646,27 @@ function JuneRenderer(props) {
   const documentOptions = (0, import_react5.useMemo)(
     () => ({
       ...documents,
+      onDocumentChange: (change) => {
+        documents?.onDocumentChange?.(change);
+        if (!latest.current.onResponseChange || change.source === "ai") return;
+        const store = documents?.store ?? getDefaultDocumentStore();
+        const timers = syncTimers.current;
+        const prev = timers.get(change.documentId);
+        if (prev) clearTimeout(prev);
+        timers.set(
+          change.documentId,
+          setTimeout(() => {
+            timers.delete(change.documentId);
+            void syncProgram(change, store);
+          }, Math.max(0, latest.current.responseChangeDelay))
+        );
+      },
       onError: (error) => {
         documents?.onError?.(error);
         latest.current.onJuneError?.(error);
       }
     }),
-    [documents]
+    [documents, syncProgram]
   );
   const parts = (0, import_react5.useMemo)(
     () => mixedContent && response ? splitResponse(response, { streaming: isStreaming }) : null,
@@ -1353,25 +2063,1231 @@ function DocumentDraft({ title, words, state }) {
 }
 
 // src/components/document-editor/document-editor.tsx
-var import_react10 = require("@tiptap/react");
-var import_react11 = require("react");
+var import_react15 = require("@tiptap/react");
+var import_react16 = require("react");
 init_errors();
 
-// src/components/document-editor/document-content.tsx
-var import_react7 = require("@tiptap/react");
+// src/components/document-editor/document-bubble.tsx
+var import_react10 = require("@tiptap/react");
+var import_menus = require("@tiptap/react/menus");
+
+// src/components/document-editor/document-toolbar.tsx
+var import_react8 = require("@tiptap/react");
+var import_react9 = require("react");
+
+// src/components/document-editor/document-icons.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function DocumentContent({ editor }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "june-doc__content", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react7.EditorContent, { editor }) });
+var PATHS = {
+  undo: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
+  ] }),
+  redo: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m15 14 5-5-5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
+  ] }),
+  bold: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" }),
+  italic: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "19", x2: "10", y1: "4", y2: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "14", x2: "5", y1: "20", y2: "20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "15", x2: "9", y1: "4", y2: "20" })
+  ] }),
+  underline: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "4", x2: "20", y1: "20", y2: "20" })
+  ] }),
+  strike: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
+  ] }),
+  code: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m16 18 6-6-6-6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m8 6-6 6 6 6" })
+  ] }),
+  codeBlock: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m10 9-3 3 3 3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m14 15 3-3-3-3" })
+  ] }),
+  superscript: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m4 19 8-8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m12 19-8-8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M20 12h-4c0-1.5.44-2 1.5-2.5S20 8.33 20 7c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
+  ] }),
+  subscript: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m4 5 8 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m12 5-8 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
+  ] }),
+  alignLeft: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 12H3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M17 18H3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 6H3" })
+  ] }),
+  alignCenter: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M17 12H7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19 18H5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 6H3" })
+  ] }),
+  alignRight: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 12H9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 18H7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 6H3" })
+  ] }),
+  alignJustify: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 12h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 18h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 6h18" })
+  ] }),
+  list: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 12h.01" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 18h.01" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 6h.01" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 12h13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 18h13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 6h13" })
+  ] }),
+  listOrdered: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 12h11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 18h11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 6h11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 10h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 6h1v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
+  ] }),
+  outdent: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 12H11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 18H11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 6H11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m7 8-4 4 4 4" })
+  ] }),
+  indent: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 12H11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 18H11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 6H11" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m3 8 4 4-4 4" })
+  ] }),
+  quote: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M17 6H3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 12H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 18H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 12v6" })
+  ] }),
+  pilcrow: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M13 4v16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M17 4v16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M19 4H9.5a4.5 4.5 0 0 0 0 9H13" })
+  ] }),
+  pageBreak: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", x2: "21", y1: "12", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "8 8 12 4 16 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "16 16 12 20 8 16" })
+  ] }),
+  divider: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 12h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 6h8", opacity: ".45" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 18h8", opacity: ".45" })
+  ] }),
+  layout: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
+  ] }),
+  search: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m21 21-4.3-4.3" })
+  ] }),
+  palette: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.65-.75 1.65-1.69 0-.44-.18-.84-.44-1.13-.29-.29-.44-.65-.44-1.13a1.64 1.64 0 0 1 1.67-1.67h2c3.05 0 5.55-2.5 5.55-5.55C21.97 6.01 17.46 2 12 2z" })
+  ] }),
+  highlighter: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m9 11-6 6v3h9l3-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+  ] }),
+  link: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+  ] }),
+  image: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21" })
+  ] }),
+  table: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 9h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 15h18" })
+  ] }),
+  eraser: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M22 21H7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m5 11 9 9" })
+  ] }),
+  save: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M7 3v4a1 1 0 0 0 1 1h7" })
+  ] }),
+  download: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+  ] }),
+  chevronDown: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 9 6 6 6-6" }),
+  chevronUp: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m18 15-6-6-6 6" }),
+  close: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 6 12 12" })
+  ] }),
+  maximize: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+  ] }),
+  copy: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  ] }),
+  file: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  ] }),
+  plus: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M12 5v14" })
+  ] }),
+  minus: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M5 12h14" }),
+  check: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M20 6 9 17l-5-5" }),
+  sparkles: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M9.94 14.06 8 20l-1.94-5.94L0 12l6.06-1.94L8 4l1.94 6.06L16 12z", transform: "translate(3 -1) scale(.85)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M20 3v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M22 5h-4" })
+  ] }),
+  upload: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+  ] })
+};
+function Icon({ name, size = 16 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      className: "june-doc__icon",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: PATHS[name]
+    }
+  );
 }
 
-// src/components/document-editor/document-editor.tsx
-init_document_engine();
+// src/components/document-editor/document-popover.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Dropdown({ trigger, children, align = "start", className, onOpen }) {
+  const [open, setOpen] = (0, import_react7.useState)(false);
+  const anchor = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (anchor.current && !anchor.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [open]);
+  const toggle = () => setOpen((v) => {
+    if (!v) onOpen?.();
+    return !v;
+  });
+  const close = () => setOpen(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ref: anchor,
+      className: "june-doc__anchor",
+      onKeyDown: (e) => {
+        if (e.key === "Escape" && open) {
+          e.stopPropagation();
+          close();
+        }
+      },
+      children: [
+        trigger({ open, toggle }),
+        open ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `june-doc__pop june-doc__pop--${align}${className ? ` ${className}` : ""}`, children: children(close) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/document-editor/document-toolbar.tsx
+init_document_utils();
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FONT_FAMILIES = [
+  { label: "Default", value: "" },
+  { label: "Arial", value: "Arial, Helvetica, sans-serif" },
+  { label: "Calibri", value: "Calibri, Carlito, sans-serif" },
+  { label: "Georgia", value: "Georgia, serif" },
+  { label: "Garamond", value: "Garamond, 'EB Garamond', serif" },
+  { label: "Times New Roman", value: "'Times New Roman', Times, serif" },
+  { label: "Verdana", value: "Verdana, Geneva, sans-serif" },
+  { label: "Trebuchet MS", value: "'Trebuchet MS', sans-serif" },
+  { label: "Courier New", value: "'Courier New', Courier, monospace" }
+];
+var FONT_SIZES = [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 36, 48, 60, 72];
+var TEXT_COLORS = [
+  "#111827",
+  "#374151",
+  "#6b7280",
+  "#9ca3af",
+  "#dc2626",
+  "#ea580c",
+  "#ca8a04",
+  "#16a34a",
+  "#0d9488",
+  "#0284c7",
+  "#2563eb",
+  "#4f46e5",
+  "#9333ea",
+  "#db2777",
+  "#7f1d1d",
+  "#1e3a8a"
+];
+var HIGHLIGHT_COLORS = [
+  "#fef08a",
+  "#fde68a",
+  "#fed7aa",
+  "#fecaca",
+  "#fbcfe8",
+  "#e9d5ff",
+  "#c7d2fe",
+  "#bfdbfe",
+  "#a5f3fc",
+  "#bbf7d0",
+  "#d9f99d",
+  "#e5e7eb"
+];
+var MAX_IMAGE_BYTES = 8 * 1024 * 1024;
+function Btn({ label, icon, active, disabled, toggle, onClick, children, className, text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: `june-doc__btn${icon && !text && !children ? " june-doc__btn--icon" : ""}${className ? ` ${className}` : ""}`,
+      "aria-label": label,
+      title: label,
+      "aria-pressed": toggle ? !!active : void 0,
+      "data-active": active || void 0,
+      disabled,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: icon }) : null,
+        children ?? (text ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: label }) : null)
+      ]
+    }
+  );
+}
+function Group({ label, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__group", role: "group", "aria-label": label, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "june-doc__group-label", "aria-hidden": "true", children: label }) : null,
+    children
+  ] });
+}
+function Field({ label, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "june-doc__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "june-doc__field-label", children: label }),
+    children
+  ] });
+}
+function ColorPicker({ label, icon, colors, current, disabled, resetLabel, onPick, onReset }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Dropdown,
+    {
+      trigger: ({ open, toggle }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "june-doc__btn june-doc__btn--icon june-doc__btn--color",
+          "aria-label": label,
+          title: label,
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          disabled,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "june-doc__color-bar", style: { background: current ?? "transparent" } })
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__swatches-wrap", role: "dialog", "aria-label": label, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "june-doc__pop-title", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "june-doc__swatches", children: colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "june-doc__swatch",
+            style: { background: c },
+            "aria-label": c,
+            title: c,
+            "data-active": current?.toLowerCase() === c ? true : void 0,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => {
+              onPick(c);
+              close();
+            }
+          },
+          c
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__pop-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "june-doc__btn june-doc__btn--ghost",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                onReset();
+                close();
+              },
+              children: resetLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "june-doc__custom-color", title: "Custom color", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Custom" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "input",
+              {
+                type: "color",
+                "aria-label": `${label}: custom`,
+                defaultValue: current && /^#[0-9a-f]{6}$/i.test(current) ? current : "#000000",
+                onChange: (e) => onPick(e.target.value)
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function LinkPanel({
+  editor,
+  href,
+  isLink,
+  close
+}) {
+  const [value, setValue] = (0, import_react9.useState)(href);
+  const apply = () => {
+    const safe = sanitizeHref(value);
+    if (safe) editor.chain().focus().extendMarkRange("link").setLink({ href: safe }).run();
+    close();
+  };
+  const remove = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    close();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__form", role: "dialog", "aria-label": "Edit link", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "june-doc__pop-title", children: "Link" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        "aria-label": "Link address",
+        className: "june-doc__input",
+        placeholder: "https://example.com",
+        value,
+        autoFocus: true,
+        onChange: (e) => setValue(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            apply();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__pop-row june-doc__pop-row--end", children: [
+      isLink ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", onClick: remove, children: "Remove" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "june-doc__btn", onClick: close, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--primary", onClick: apply, children: "Apply" })
+    ] })
+  ] });
+}
+function ImagePanel({ editor, close, onNotice }) {
+  const [url, setUrl] = (0, import_react9.useState)("");
+  const [alt, setAlt] = (0, import_react9.useState)("");
+  const file = (0, import_react9.useRef)(null);
+  const insert = (src) => {
+    editor.chain().focus().setImage({ src, alt: alt || void 0 }).run();
+    close();
+  };
+  const fromUrl = () => {
+    const safe = sanitizeHref(url);
+    if (!safe || !/^https?:/i.test(safe)) {
+      onNotice("Enter an http(s) image address");
+      return;
+    }
+    insert(safe);
+  };
+  const fromFile = (f) => {
+    if (!f) return;
+    if (!f.type.startsWith("image/")) return onNotice("That file is not an image");
+    if (f.size > MAX_IMAGE_BYTES) return onNotice("Images must be 8 MB or smaller");
+    const reader = new FileReader();
+    reader.onload = () => typeof reader.result === "string" && insert(reader.result);
+    reader.onerror = () => onNotice("The image could not be read");
+    reader.readAsDataURL(f);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__form", role: "dialog", "aria-label": "Insert image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "june-doc__pop-title", children: "Image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "june-doc__dropzone",
+        onClick: () => file.current?.click(),
+        onDragOver: (e) => e.preventDefault(),
+        onDrop: (e) => {
+          e.preventDefault();
+          fromFile(e.dataTransfer.files[0]);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "upload", size: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Upload or drop an image" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        ref: file,
+        type: "file",
+        accept: "image/*",
+        hidden: true,
+        onChange: (e) => fromFile(e.target.files?.[0])
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "june-doc__or", children: "or" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        "aria-label": "Image address",
+        className: "june-doc__input",
+        placeholder: "https://example.com/image.png",
+        value: url,
+        onChange: (e) => setUrl(e.target.value),
+        onKeyDown: (e) => e.key === "Enter" && fromUrl()
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        "aria-label": "Alternative text",
+        className: "june-doc__input",
+        placeholder: "Alt text (optional)",
+        value: alt,
+        onChange: (e) => setAlt(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__pop-row june-doc__pop-row--end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "june-doc__btn", onClick: close, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--primary", disabled: !url.trim(), onClick: fromUrl, children: "Insert" })
+    ] })
+  ] });
+}
+function TablePanel({ editor, close }) {
+  const [hover, setHover] = (0, import_react9.useState)([0, 0]);
+  const N = 8;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__form", role: "dialog", "aria-label": "Insert table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__pop-title", children: [
+      "Table ",
+      hover[0] ? `${hover[0]} \xD7 ${hover[1]}` : ""
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "june-doc__grid", onMouseLeave: () => setHover([0, 0]), children: Array.from({ length: N * N }, (_, i) => {
+      const r = Math.floor(i / N) + 1;
+      const c = i % N + 1;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "june-doc__cell",
+          "aria-label": `${r} by ${c} table`,
+          "data-active": r <= hover[0] && c <= hover[1] ? true : void 0,
+          onMouseEnter: () => setHover([r, c]),
+          onFocus: () => setHover([r, c]),
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            editor.chain().focus().insertTable({ rows: r, cols: c, withHeaderRow: true }).run();
+            close();
+          }
+        },
+        i
+      );
+    }) })
+  ] });
+}
+var px = (v) => typeof v === "string" ? v.replace(/px$/, "") : "";
+function DocumentToolbar(props) {
+  const { editor, editable, expanded, onToggleExpanded, showMarks, onToggleMarks, layout, onToggleLayout, findOpen, onToggleFind, onNotice } = props;
+  const s = (0, import_react8.useEditorState)({
+    editor,
+    selector: ({ editor: ed }) => {
+      if (!ed) return null;
+      const ts = ed.getAttributes("textStyle");
+      return {
+        bold: ed.isActive("bold"),
+        italic: ed.isActive("italic"),
+        underline: ed.isActive("underline"),
+        strike: ed.isActive("strike"),
+        code: ed.isActive("code"),
+        sup: ed.isActive("superscript"),
+        sub: ed.isActive("subscript"),
+        bullet: ed.isActive("bulletList"),
+        ordered: ed.isActive("orderedList"),
+        quote: ed.isActive("blockquote"),
+        codeBlock: ed.isActive("codeBlock"),
+        link: ed.isActive("link"),
+        linkHref: ed.getAttributes("link").href ?? "",
+        h1: ed.isActive("heading", { level: 1 }),
+        h2: ed.isActive("heading", { level: 2 }),
+        h3: ed.isActive("heading", { level: 3 }),
+        left: ed.isActive({ textAlign: "left" }),
+        center: ed.isActive({ textAlign: "center" }),
+        right: ed.isActive({ textAlign: "right" }),
+        justify: ed.isActive({ textAlign: "justify" }),
+        inTable: ed.isActive("table"),
+        color: ts.color ?? null,
+        fontFamily: ts.fontFamily ?? "",
+        fontSize: px(ts.fontSize),
+        highlight: ed.isActive("highlight") ? ed.getAttributes("highlight").color ?? "#fef08a" : null,
+        canUndo: ed.can().undo(),
+        canRedo: ed.can().redo(),
+        canSink: ed.can().sinkListItem("listItem"),
+        canLift: ed.can().liftListItem("listItem"),
+        canMerge: ed.can().mergeCells(),
+        canSplit: ed.can().splitCell()
+      };
+    }
+  });
+  const run = () => editor?.chain().focus();
+  const off = !editor || !editable;
+  const style = s?.codeBlock ? "code" : s?.h1 ? "1" : s?.h2 ? "2" : s?.h3 ? "3" : s?.quote ? "quote" : "p";
+  const setStyle = (v) => {
+    if (!editor || !s) return;
+    let c = editor.chain().focus();
+    if (v === "quote") {
+      if (!s.quote) c = c.setParagraph().toggleBlockquote();
+    } else if (v === "code") {
+      if (!s.codeBlock) c = c.toggleCodeBlock();
+    } else {
+      if (s.quote) c = c.lift("blockquote");
+      c = v === "p" ? c.setParagraph() : c.setHeading({ level: Number(v) });
+    }
+    c.run();
+  };
+  const fontKnown = FONT_FAMILIES.some((f) => f.value === s?.fontFamily);
+  const sizes = s?.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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__ribbon", role: "toolbar", "aria-label": "Document formatting", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "History", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Undo", icon: "undo", disabled: off || !s?.canUndo, onClick: () => run()?.undo().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Redo", icon: "redo", disabled: off || !s?.canRedo, onClick: () => run()?.redo().run() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "Format", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Bold", icon: "bold", toggle: true, active: s?.bold, disabled: off, onClick: () => run()?.toggleBold().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Italic", icon: "italic", toggle: true, active: s?.italic, disabled: off, onClick: () => run()?.toggleItalic().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Underline", icon: "underline", toggle: true, active: s?.underline, disabled: off, onClick: () => run()?.toggleUnderline().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: s?.strike, disabled: off, onClick: () => run()?.toggleStrike().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Inline code", icon: "code", toggle: true, active: s?.code, disabled: off, onClick: () => run()?.toggleCode().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Superscript", icon: "superscript", toggle: true, active: s?.sup, disabled: off, onClick: () => run()?.toggleSuperscript().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Subscript", icon: "subscript", toggle: true, active: s?.sub, disabled: off, onClick: () => run()?.toggleSubscript().run() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "Align", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Align left", icon: "alignLeft", toggle: true, active: s?.left, disabled: off, onClick: () => run()?.setTextAlign("left").run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Align center", icon: "alignCenter", toggle: true, active: s?.center, disabled: off, onClick: () => run()?.setTextAlign("center").run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Align right", icon: "alignRight", toggle: true, active: s?.right, disabled: off, onClick: () => run()?.setTextAlign("right").run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Justify", icon: "alignJustify", toggle: true, active: s?.justify, disabled: off, onClick: () => run()?.setTextAlign("justify").run() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "Lists", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Bullet list", icon: "list", toggle: true, active: s?.bullet, disabled: off, onClick: () => run()?.toggleBulletList().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Numbered list", icon: "listOrdered", toggle: true, active: s?.ordered, disabled: off, onClick: () => run()?.toggleOrderedList().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Decrease indent", icon: "outdent", disabled: off || !s?.canLift, onClick: () => run()?.liftListItem("listItem").run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Increase indent", icon: "indent", disabled: off || !s?.canSink, onClick: () => run()?.sinkListItem("listItem").run() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "june-doc__btn june-doc__more",
+          "aria-expanded": expanded,
+          "aria-label": expanded ? "Show fewer tools" : "Show more tools",
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: onToggleExpanded,
+          children: [
+            expanded ? "Less" : "More",
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: expanded ? "chevronUp" : "chevronDown", size: 14 })
+          ]
+        }
+      )
+    ] }),
+    expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__row june-doc__row--secondary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "Style", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { label: "Style", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("select", { className: "june-doc__select", "aria-label": "Text style", disabled: off, value: style, onChange: (e) => setStyle(e.target.value), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "p", children: "Paragraph" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "1", children: "Heading 1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "2", children: "Heading 2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "3", children: "Heading 3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "quote", children: "Quote" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "code", children: "Code block" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { label: "Font", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "select",
+          {
+            className: "june-doc__select june-doc__select--font",
+            "aria-label": "Font family",
+            disabled: off,
+            value: s?.fontFamily ?? "",
+            onChange: (e) => {
+              const v = e.target.value;
+              if (v) run()?.setFontFamily(v).run();
+              else run()?.unsetFontFamily().run();
+            },
+            children: [
+              FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: f.value, style: { fontFamily: f.value || void 0 }, children: f.label }, f.label)),
+              !fontKnown && s?.fontFamily ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: s.fontFamily, children: s.fontFamily.split(",")[0].replace(/['"]/g, "") }) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { label: "Size", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "select",
+          {
+            className: "june-doc__select june-doc__select--size",
+            "aria-label": "Font size",
+            disabled: off,
+            value: s?.fontSize ?? "",
+            onChange: (e) => {
+              const v = e.target.value;
+              if (v) run()?.setFontSize(`${v}px`).run();
+              else run()?.unsetFontSize().run();
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Auto" }),
+              sizes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: String(n), children: n }, n))
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Show formatting marks", icon: "pilcrow", toggle: true, active: showMarks, onClick: onToggleMarks, text: true, className: "june-doc__btn--marks", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Paragraph" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "Document", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Insert page break", icon: "pageBreak", disabled: off, onClick: () => run()?.setPageBreak().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Insert divider", icon: "divider", disabled: off, onClick: () => run()?.setHorizontalRule().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: layout === "page" ? "Switch to full-width layout" : "Switch to page layout", icon: "layout", toggle: true, active: layout === "fluid", onClick: onToggleLayout }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Find and replace", icon: "search", toggle: true, active: findOpen, onClick: onToggleFind })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "Color", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ColorPicker,
+          {
+            label: "Text color",
+            icon: "palette",
+            colors: TEXT_COLORS,
+            current: s?.color ?? null,
+            disabled: off,
+            resetLabel: "Default color",
+            onPick: (c) => run()?.setColor(c).run(),
+            onReset: () => run()?.unsetColor().run()
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ColorPicker,
+          {
+            label: "Highlight",
+            icon: "highlighter",
+            colors: HIGHLIGHT_COLORS,
+            current: s?.highlight ?? null,
+            disabled: off,
+            resetLabel: "No highlight",
+            onPick: (c) => run()?.setHighlight({ color: c }).run(),
+            onReset: () => run()?.unsetHighlight().run()
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "Insert", children: [
+        editor ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          Dropdown,
+          {
+            trigger: ({ open, toggle }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Link", icon: "link", toggle: true, active: s?.link || open, disabled: off, onClick: toggle }),
+            children: (close) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LinkPanel, { editor, href: s?.linkHref ?? "", isLink: !!s?.link, close })
+          }
+        ) : null,
+        editor ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Insert image", icon: "image", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ImagePanel, { editor, close, onNotice }) }) : null,
+        editor ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Insert table", icon: "table", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TablePanel, { editor, close }) }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Group, { label: "Actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Clear formatting", icon: "eraser", disabled: off, onClick: () => run()?.unsetAllMarks().clearNodes().run() }) })
+    ] }) : null,
+    s?.inTable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "june-doc__row june-doc__row--context", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Group, { label: "Table", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Add row below", disabled: off, onClick: () => run()?.addRowAfter().run(), children: "+ Row" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Add column right", disabled: off, onClick: () => run()?.addColumnAfter().run(), children: "+ Column" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Delete row", disabled: off, onClick: () => run()?.deleteRow().run(), children: "\u2212 Row" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Delete column", disabled: off, onClick: () => run()?.deleteColumn().run(), children: "\u2212 Column" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Merge cells", disabled: off || !s?.canMerge, onClick: () => run()?.mergeCells().run(), children: "Merge" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Split cell", disabled: off || !s?.canSplit, onClick: () => run()?.splitCell().run(), children: "Split" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Toggle header row", disabled: off, onClick: () => run()?.toggleHeaderRow().run(), children: "Header row" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Delete table", disabled: off, onClick: () => run()?.deleteTable().run(), className: "june-doc__btn--danger", children: "Delete table" })
+    ] }) }) : null
+  ] });
+}
+
+// src/components/document-editor/document-bubble.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DocumentBubbleMenu({ editor }) {
+  const s = (0, import_react10.useEditorState)({
+    editor,
+    selector: ({ editor: ed }) => ({
+      bold: ed.isActive("bold"),
+      italic: ed.isActive("italic"),
+      underline: ed.isActive("underline"),
+      strike: ed.isActive("strike"),
+      link: ed.isActive("link"),
+      linkHref: ed.getAttributes("link").href ?? "",
+      color: ed.getAttributes("textStyle").color ?? null,
+      highlight: ed.isActive("highlight") ? ed.getAttributes("highlight").color ?? "#fef08a" : null
+    })
+  });
+  const run = () => editor.chain().focus();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_menus.BubbleMenu,
+    {
+      editor,
+      className: "june-doc__bubble",
+      options: { placement: "top", offset: 8 },
+      shouldShow: ({ editor: ed, state }) => {
+        const { empty } = state.selection;
+        if (empty || !ed.isEditable) return false;
+        if (ed.isActive("image") || ed.isActive("pageBreak") || ed.isActive("codeBlock")) return false;
+        return state.doc.textBetween(state.selection.from, state.selection.to).trim().length > 0;
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { label: "Bold", icon: "bold", toggle: true, active: s.bold, onClick: () => run().toggleBold().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { label: "Italic", icon: "italic", toggle: true, active: s.italic, onClick: () => run().toggleItalic().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { label: "Underline", icon: "underline", toggle: true, active: s.underline, onClick: () => run().toggleUnderline().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: s.strike, onClick: () => run().toggleStrike().run() }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "june-doc__bubble-sep", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { label: "Link", icon: "link", toggle: true, active: s.link || open, onClick: toggle }), children: (close) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LinkPanel, { editor, href: s.linkHref, isLink: s.link, close }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ColorPicker,
+          {
+            label: "Text color",
+            icon: "palette",
+            colors: TEXT_COLORS,
+            current: s.color,
+            resetLabel: "Default color",
+            onPick: (c) => run().setColor(c).run(),
+            onReset: () => run().unsetColor().run()
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          ColorPicker,
+          {
+            label: "Highlight",
+            icon: "highlighter",
+            colors: HIGHLIGHT_COLORS,
+            current: s.highlight,
+            resetLabel: "No highlight",
+            onPick: (c) => run().setHighlight({ color: c }).run(),
+            onReset: () => run().unsetHighlight().run()
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "june-doc__bubble-sep", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { label: "Clear formatting", icon: "eraser", onClick: () => run().unsetAllMarks().run() })
+      ]
+    }
+  );
+}
+
+// src/components/document-editor/document-content.tsx
+var import_react11 = require("@tiptap/react");
+var import_react12 = require("react");
+init_document_pagination();
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var PAGE_WIDTH = 794;
+var PAGE_HEIGHT = 1123;
+var PAGE_GAP = 28;
+var CANVAS_PAD_X = 24;
+var useIsoLayoutEffect = typeof window === "undefined" ? import_react12.useEffect : import_react12.useLayoutEffect;
+function geometry(width) {
+  const ratio = width / PAGE_WIDTH;
+  const height = Math.round(PAGE_HEIGHT * ratio);
+  const padX = Math.round(Math.min(96, Math.max(20, width * 0.12)));
+  const padY = Math.round(Math.min(96, Math.max(36, 96 * ratio)));
+  return { width, height, padX, padY };
+}
+function DocumentContent({ editor, layout = "page", zoom = 1, showMarks = false, onMetrics }) {
+  const canvas = (0, import_react12.useRef)(null);
+  const sheet = (0, import_react12.useRef)(null);
+  const [avail, setAvail] = (0, import_react12.useState)(PAGE_WIDTH);
+  const [sheetH, setSheetH] = (0, import_react12.useState)(0);
+  const [pages, setPages] = (0, import_react12.useState)(1);
+  const metricsRef = (0, import_react12.useRef)(onMetrics);
+  metricsRef.current = onMetrics;
+  const last = (0, import_react12.useRef)({ page: 0, pages: 0 });
+  const paged = layout === "page";
+  const width = paged ? Math.max(260, Math.min(PAGE_WIDTH, Math.floor(avail / zoom))) : Math.max(260, Math.floor(avail / zoom));
+  const g = geometry(width);
+  const stride = g.height + PAGE_GAP;
+  useIsoLayoutEffect(() => {
+    const c = canvas.current;
+    if (!c) return;
+    const read = () => {
+      const cs = typeof getComputedStyle === "function" ? getComputedStyle(c) : null;
+      const padX = cs ? (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) : CANVAS_PAD_X * 2;
+      const w = c.clientWidth - padX;
+      if (w > 0) setAvail(w);
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(read);
+    ro.observe(c);
+    return () => ro.disconnect();
+  }, []);
+  (0, import_react12.useEffect)(() => {
+    if (!editor) return;
+    setPaginationConfig(editor, {
+      enabled: paged,
+      pageHeight: g.height,
+      gap: PAGE_GAP,
+      padTop: g.padY,
+      padBottom: g.padY
+    });
+  }, [editor, paged, g.height, g.padY, width]);
+  (0, import_react12.useEffect)(() => {
+    const c = canvas.current;
+    const s = sheet.current;
+    if (!editor || !c || !s) return;
+    const prose = editor.view.dom;
+    const report = () => {
+      const total = paged ? getPageCount(editor) : 1;
+      setPages(total);
+      setSheetH(s.offsetHeight);
+      const cRect = c.getBoundingClientRect();
+      const sRect = s.getBoundingClientRect();
+      const y = (cRect.top + c.clientHeight * 0.35 - sRect.top) / zoom;
+      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 };
+        metricsRef.current?.({ page, pages: total });
+      }
+    };
+    report();
+    editor.on("transaction", report);
+    c.addEventListener("scroll", report, { passive: true });
+    const onLoad = () => remeasurePagination(editor);
+    prose.addEventListener("load", onLoad, true);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(report) : null;
+    ro?.observe(s);
+    return () => {
+      editor.off("transaction", report);
+      c.removeEventListener("scroll", report);
+      prose.removeEventListener("load", onLoad, true);
+      ro?.disconnect();
+    };
+  }, [editor, paged, zoom, stride]);
+  const minHeight = paged ? pages * g.height + (pages - 1) * PAGE_GAP : void 0;
+  const sheetStyle = {
+    width,
+    minHeight,
+    transform: zoom === 1 ? void 0 : `scale(${zoom})`,
+    "--jd-pad-x": `${g.padX}px`,
+    "--jd-pad-y": `${g.padY}px`
+  };
+  const zoomerStyle = {
+    width: width * zoom,
+    height: zoom === 1 ? void 0 : Math.max(sheetH, minHeight ?? 0) * zoom
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: canvas, className: "june-doc__content june-doc__canvas", "data-layout": layout, "data-marks": showMarks || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "june-doc__zoomer", style: zoomerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: sheet, className: "june-doc__sheet", style: sheetStyle, children: [
+    paged ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "june-doc__pages", "aria-hidden": "true", children: Array.from({ length: pages }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "june-doc__page", style: { top: i * stride, height: g.height }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "june-doc__page-num", children: [
+      i + 1,
+      " / ",
+      pages
+    ] }) }, i)) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.EditorContent, { editor })
+  ] }) }) });
+}
+
+// src/components/document-editor/document-findbar.tsx
+var import_react13 = require("@tiptap/react");
+var import_react14 = require("react");
+init_document_search();
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function DocumentFindBar({ editor, editable, onClose, onNotice }) {
+  const [term, setTerm] = (0, import_react14.useState)(() => {
+    const { from, to, empty } = editor.state.selection;
+    return empty ? "" : editor.state.doc.textBetween(from, to, " ").slice(0, 100);
+  });
+  const [replacement, setReplacement] = (0, import_react14.useState)("");
+  const [caseSensitive, setCaseSensitive] = (0, import_react14.useState)(false);
+  const input = (0, import_react14.useRef)(null);
+  const info = (0, import_react13.useEditorState)({
+    editor,
+    selector: ({ editor: ed }) => {
+      const s = getSearchState(ed);
+      return { count: s?.matches.length ?? 0, current: s?.current ?? -1 };
+    }
+  });
+  (0, import_react14.useEffect)(() => {
+    input.current?.focus();
+    input.current?.select();
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    setSearch(editor, { term, caseSensitive, current: 0 });
+  }, [editor, term, caseSensitive]);
+  (0, import_react14.useEffect)(() => () => {
+    if (!editor.isDestroyed) setSearch(editor, { term: "" });
+  }, [editor]);
+  const count = info?.count ?? 0;
+  const current = info?.current ?? -1;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      className: "june-doc__findbar",
+      role: "search",
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose();
+          editor.commands.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "june-doc__find-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "search", size: 14 }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              ref: input,
+              className: "june-doc__find-input",
+              "aria-label": "Find in document",
+              placeholder: "Find in document",
+              value: term,
+              onChange: (e) => setTerm(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  gotoMatch(editor, e.shiftKey ? -1 : 1);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "june-doc__find-count", "aria-live": "polite", children: term ? count ? `${current + 1} of ${count}` : "No results" : "" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--icon", "aria-label": "Previous match", title: "Previous (Shift+Enter)", disabled: !count, onClick: () => gotoMatch(editor, -1), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "chevronUp" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--icon", "aria-label": "Next match", title: "Next (Enter)", disabled: !count, onClick: () => gotoMatch(editor, 1), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "chevronDown" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "june-doc__btn june-doc__btn--icon june-doc__btn--case",
+            "aria-label": "Match case",
+            title: "Match case",
+            "aria-pressed": caseSensitive,
+            "data-active": caseSensitive || void 0,
+            onClick: () => setCaseSensitive((v) => !v),
+            children: "Aa"
+          }
+        ),
+        editable ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "june-doc__find-sep", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              className: "june-doc__input june-doc__replace-input",
+              "aria-label": "Replace with",
+              placeholder: "Replace with",
+              value: replacement,
+              onChange: (e) => setReplacement(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  replaceCurrent(editor, replacement);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "june-doc__btn", disabled: !count, onClick: () => replaceCurrent(editor, replacement), children: "Replace" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "june-doc__btn",
+              disabled: !count,
+              onClick: () => {
+                const n = replaceAll(editor, replacement);
+                onNotice(`Replaced ${n} ${n === 1 ? "match" : "matches"}`);
+              },
+              children: "Replace all"
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost june-doc__find-close", "aria-label": "Close find", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "close" }) })
+      ]
+    }
+  );
+}
+
+// src/components/document-editor/document-title.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function DocumentTitle({ value, disabled, onChange }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "input",
+    {
+      className: "june-doc__title",
+      "aria-label": "Document title",
+      value,
+      disabled,
+      placeholder: "Untitled document",
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+}
+
+// src/components/document-editor/document-header.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FORMATS = {
+  docx: { label: "Word document", hint: ".docx", icon: "file" },
+  pdf: { label: "PDF", hint: "Print / Save as PDF", icon: "file" },
+  html: { label: "Web page", hint: ".html", icon: "code" },
+  markdown: { label: "Markdown", hint: ".md", icon: "file" },
+  txt: { label: "Plain text", hint: ".txt", icon: "file" }
+};
+function DocumentHeader(props) {
+  const { title, editable, isDraft, fullscreen, onToggleFullscreen, onTitle, exportFormats, canSave, showSave = canSave, saveState, onExport, onCopy, onSave } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "june-doc__header", children: [
+    fullscreen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Close full screen", title: "Close (Esc)", onClick: onToggleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "close", size: 18 }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "june-doc__doc-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "file", size: 16 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DocumentTitle, { value: title, disabled: !editable, onChange: onTitle }),
+    isDraft ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "june-doc__badge", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "sparkles", size: 12 }),
+      "AI draft"
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "june-doc__header-actions", children: [
+      showSave ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "june-doc__btn june-doc__btn--outline june-doc__save",
+          "data-state": saveState,
+          "aria-label": "Save",
+          title: "Save (Ctrl+S)",
+          disabled: saveState === "saving" || saveState === "saved" || saveState === "idle",
+          onClick: onSave,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: saveState === "saved" ? "check" : "save" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: saveState === "saving" ? "Saving\u2026" : saveState === "saved" ? "Saved" : "Save" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        Dropdown,
+        {
+          align: "end",
+          className: "june-doc__menu",
+          trigger: ({ open, toggle }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "button",
+            {
+              type: "button",
+              className: "june-doc__btn june-doc__btn--solid",
+              "aria-label": "Download",
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              onClick: toggle,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Download" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "chevronDown", size: 14 })
+              ]
+            }
+          ),
+          children: (close) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { role: "menu", "aria-label": "Download options", children: [
+            exportFormats.map((f) => {
+              const meta = FORMATS[f] ?? { label: f.toUpperCase(), hint: "", icon: "file" };
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "june-doc__menu-item",
+                  onClick: () => {
+                    close();
+                    onExport(f);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: meta.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "june-doc__menu-label", children: meta.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "june-doc__menu-hint", children: meta.hint })
+                  ]
+                },
+                f
+              );
+            }),
+            exportFormats.length ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "june-doc__menu-sep", role: "separator" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "june-doc__menu-item",
+                "aria-label": "Copy document",
+                onClick: () => {
+                  close();
+                  onCopy();
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "copy" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "june-doc__menu-label", children: "Copy to clipboard" })
+                ]
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost",
+          "aria-label": fullscreen ? "Exit full screen" : "Open full screen",
+          title: fullscreen ? "Exit full screen" : "Open full screen",
+          "aria-pressed": fullscreen,
+          onClick: onToggleFullscreen,
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "maximize" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/document-editor/document-editor.tsx
+init_document_engine();
 
 // src/components/document-editor/document-export.ts
 init_errors();
 init_document_utils();
 var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-var PRINT_CSS = 'body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;color:#111827;max-width:780px;margin:32px auto;padding:0 20px}h1,h2,h3{line-height:1.25}table{border-collapse:collapse;width:100%}th,td{border:1px solid #d1d5db;padding:6px 10px;text-align:left}blockquote{border-left:4px solid #d1d5db;margin:1em 0;padding-left:1em;color:#4b5563}pre,code{font-family:ui-monospace,Menlo,monospace;background:#f3f4f6}pre{padding:12px;overflow:auto}@media print{body{margin:0;max-width:none}}';
+var PRINT_CSS = 'body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;color:#111827;max-width:780px;margin:32px auto;padding:0 20px}h1,h2,h3{line-height:1.25}table{border-collapse:collapse;width:100%}th,td{border:1px solid #d1d5db;padding:6px 10px;text-align:left}blockquote{border-left:4px solid #d1d5db;margin:1em 0;padding-left:1em;color:#4b5563}pre,code{font-family:ui-monospace,Menlo,monospace;background:#f3f4f6}pre{padding:12px;overflow:auto}img{max-width:100%;height:auto}mark{padding:0 .1em;border-radius:2px}div[data-page-break]{break-after:page;page-break-after:always;height:0}@media screen{div[data-page-break]{border-top:1px dashed #d1d5db;margin:24px 0}}@media print{body{margin:0;max-width:none}}';
 function buildHtmlDocument(title, bodyHtml) {
   return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${escapeHtml(
     title
@@ -1409,6 +3325,33 @@ var exportTxt = async (ctx) => {
 ${docToText2(ctx.json)}
 `, `${ctx.basename}.txt`, "text/plain");
 };
+function toDocxColor(value) {
+  if (typeof value !== "string") return void 0;
+  const v = value.trim();
+  let m = /^#([0-9a-f]{3})$/i.exec(v);
+  if (m) return m[1].split("").map((c) => c + c).join("").toUpperCase();
+  m = /^#([0-9a-f]{6})$/i.exec(v);
+  if (m) return m[1].toUpperCase();
+  m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(v);
+  if (m) {
+    return [m[1], m[2], m[3]].map((n) => Math.min(255, Number(n)).toString(16).padStart(2, "0")).join("").toUpperCase();
+  }
+  return void 0;
+}
+function toHalfPoints(value) {
+  if (typeof value !== "string") return void 0;
+  const m = /^([\d.]+)\s*(px|pt)?$/i.exec(value.trim());
+  if (!m) return void 0;
+  const n = Number(m[1]);
+  if (!Number.isFinite(n) || n <= 0) return void 0;
+  const pt = m[2]?.toLowerCase() === "pt" ? n : n * 0.75;
+  return Math.round(pt * 2);
+}
+function firstFontFamily(value) {
+  if (typeof value !== "string") return void 0;
+  const first = value.split(",")[0]?.trim().replace(/^['"]|['"]$/g, "");
+  return first || void 0;
+}
 var ORDERED_REF = "june-ordered";
 var DOCX_MIME = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
 function runs(d, node, fmt) {
@@ -1422,14 +3365,21 @@ function runs(d, node, fmt) {
     const marks = child.marks ?? [];
     const has = (type) => marks.some((m) => m.type === type);
     const link = marks.find((m) => m.type === "link");
+    const style = marks.find((m) => m.type === "textStyle")?.attrs ?? {};
+    const highlight = marks.find((m) => m.type === "highlight");
+    const fill = highlight ? toDocxColor(highlight.attrs?.color) ?? "FFF59D" : void 0;
     const run = new d.TextRun({
       text: child.text,
       bold: fmt.bold || has("bold") || void 0,
       italics: has("italic") || void 0,
       underline: has("underline") || link ? {} : void 0,
       strike: has("strike") || void 0,
-      font: has("code") ? "Courier New" : void 0,
-      color: link ? "0563C1" : void 0
+      superScript: has("superscript") || void 0,
+      subScript: has("subscript") || void 0,
+      font: has("code") ? "Courier New" : firstFontFamily(style.fontFamily),
+      size: toHalfPoints(style.fontSize),
+      color: toDocxColor(style.color) ?? (link ? "0563C1" : void 0),
+      shading: fill ? { type: d.ShadingType.CLEAR, fill, color: "auto" } : void 0
     });
     const href = typeof link?.attrs?.href === "string" ? sanitizeHref(link.attrs.href) : null;
     out.push(href ? new d.ExternalHyperlink({ link: href, children: [run] }) : run);
@@ -1498,563 +3448,262 @@ function table(d, node, state) {
   if (rows.length === 0) return new d.Paragraph("");
   return new d.Table({ rows, width: { size: 100, type: d.WidthType.PERCENTAGE } });
 }
-function blocks(d, nodes, fmt, state) {
-  const headings = [d.HeadingLevel.HEADING_1, d.HeadingLevel.HEADING_2, d.HeadingLevel.HEADING_3];
-  const out = [];
-  for (const node of nodes ?? []) {
-    switch (node.type) {
-      case "paragraph":
-        out.push(paragraph(d, node, fmt));
-        break;
-      case "heading": {
-        const level = Math.min(Math.max(Number(node.attrs?.level) || 1, 1), 3);
-        out.push(paragraph(d, node, fmt, { heading: headings[level - 1] }));
-        break;
-      }
-      case "bulletList":
-      case "orderedList":
-        out.push(...list(d, node, fmt, 0, state));
-        break;
-      case "blockquote":
-        out.push(...blocks(d, node.content, { ...fmt, quote: true, indent: (fmt.indent ?? 0) + 360 }, state));
-        break;
-      case "codeBlock":
-        out.push(code(d, node));
-        break;
-      case "horizontalRule":
-        out.push(
-          new d.Paragraph({
-            border: { bottom: { color: "9CA3AF", space: 1, style: d.BorderStyle.SINGLE, size: 6 } },
-            spacing: { after: 120 }
+function image(d, node, state) {
+  const src = typeof node.attrs?.src === "string" ? node.attrs.src : "";
+  const alt = typeof node.attrs?.alt === "string" ? node.attrs.alt : "";
+  const img = state.images.get(src);
+  if (img) {
+    return [
+      new d.Paragraph({
+        children: [
+          new d.ImageRun({
+            type: img.type,
+            data: img.data,
+            transformation: { width: img.width, height: img.height },
+            altText: alt ? { name: alt, description: alt, title: alt } : void 0
           })
-        );
-        break;
-      case "table":
-        out.push(table(d, node, state));
-        break;
-      default:
-        if (node.content) out.push(...blocks(d, node.content, fmt, state));
-    }
-  }
-  return out;
-}
-var exportDocx = async (ctx) => {
-  const d = await import("docx");
-  const state = { instance: 0 };
-  const children = [
-    new d.Paragraph({ text: ctx.title, heading: d.HeadingLevel.TITLE }),
-    ...blocks(d, ctx.json.content, {}, state)
-  ];
-  const doc = new d.Document({
-    title: ctx.title,
-    numbering: {
-      config: [
-        {
-          reference: ORDERED_REF,
-          levels: [0, 1, 2].map((level) => ({
-            level,
-            format: d.LevelFormat.DECIMAL,
-            text: `%${level + 1}.`,
-            alignment: d.AlignmentType.START,
-            style: { paragraph: { indent: { left: 720 * (level + 1), hanging: 360 } } }
-          }))
-        }
-      ]
-    },
-    sections: [{ children }]
-  });
-  const blob = await d.Packer.toBlob(doc);
-  return { filename: `${ctx.basename}.docx`, mimeType: DOCX_MIME, blob };
-};
-function printHtml(html) {
-  return new Promise((resolve, reject) => {
-    const frame = document.createElement("iframe");
-    frame.setAttribute("aria-hidden", "true");
-    frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;";
-    const cleanup = () => setTimeout(() => frame.remove(), 500);
-    frame.onload = () => {
-      try {
-        const win = frame.contentWindow;
-        if (!win) throw new Error("The print frame is unavailable");
-        win.addEventListener("afterprint", cleanup);
-        win.focus();
-        win.print();
-        setTimeout(cleanup, 12e4);
-        resolve();
-      } catch (error) {
-        cleanup();
-        reject(error);
-      }
-    };
-    frame.srcdoc = html;
-    document.body.appendChild(frame);
-  });
-}
-var exportPdf = async (ctx) => {
-  const { docToHtml: docToHtml2 } = await Promise.resolve().then(() => (init_document_engine(), document_engine_exports));
-  await printHtml(buildHtmlDocument(ctx.title, docToHtml2(ctx.json)));
-  return { filename: `${ctx.basename}.pdf`, mimeType: "application/pdf", handled: true };
-};
-var registry = /* @__PURE__ */ new Map([
-  ["html", exportHtml],
-  ["markdown", exportMarkdown],
-  ["txt", exportTxt],
-  ["docx", exportDocx],
-  ["pdf", exportPdf]
-]);
-function registerDocumentExporter(format, exporter) {
-  registry.set(format, exporter);
-}
-function listDocumentExporters() {
-  return [...registry.keys()];
-}
-async function exportDocument(format, doc) {
-  const exporter = registry.get(format);
-  if (!exporter) throw new JuneError("EXPORT_ERROR", `No exporter is registered for "${format}"`);
-  try {
-    return await exporter({ ...doc, basename: slugify(doc.title) || "document" });
-  } catch (error) {
-    throw toJuneError(error, "EXPORT_ERROR", `Exporting ${format} failed`);
+        ],
+        spacing: { after: 120 }
+      })
+    ];
   }
-}
-function downloadResult(result) {
-  if (!result.blob) return;
-  const url = URL.createObjectURL(result.blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = result.filename;
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-  setTimeout(() => URL.revokeObjectURL(url), 1e3);
-}
-async function copyDocumentToClipboard(doc) {
-  const { docToHtml: docToHtml2, docToText: docToText2 } = await Promise.resolve().then(() => (init_document_engine(), document_engine_exports));
-  const html = docToHtml2(doc.json);
-  const text = `${doc.title}
-
-${docToText2(doc.json)}`;
-  try {
-    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
-      await navigator.clipboard.write([
-        new ClipboardItem({
-          "text/html": new Blob([html], { type: "text/html" }),
-          "text/plain": new Blob([text], { type: "text/plain" })
+  const href = src && !src.startsWith("data:") ? sanitizeHref(src) : null;
+  if (!href) return [];
+  return [
+    new d.Paragraph({
+      children: [
+        new d.ExternalHyperlink({
+          link: href,
+          children: [new d.TextRun({ text: alt || href, color: "0563C1", underline: {} })]
         })
-      ]);
-      return true;
-    }
-    await navigator.clipboard.writeText(text);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-// src/components/document-editor/document-editor.tsx
-init_document_extensions();
-
-// src/components/document-editor/document-merge.ts
-init_document_utils();
-var MAX_CELLS = 4e6;
-function matchIndices(a, b) {
-  const n = a.length;
-  const m = b.length;
-  if (n * m > MAX_CELLS) return null;
-  const dp = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
-  for (let i2 = n - 1; i2 >= 0; i2--) {
-    for (let j2 = m - 1; j2 >= 0; j2--) {
-      dp[i2][j2] = a[i2] === b[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
-    }
-  }
-  const matches = /* @__PURE__ */ new Map();
-  let i = 0;
-  let j = 0;
-  while (i < n && j < m) {
-    if (a[i] === b[j]) {
-      matches.set(i, j);
-      i++;
-      j++;
-    } else if (dp[i + 1][j] >= dp[i][j + 1]) i++;
-    else j++;
-  }
-  return matches;
+      ]
+    })
+  ];
 }
-var same = (x, y) => x.length === y.length && x.every((v, i) => v === y[i]);
-function mergeBlocks(base, local, incoming) {
-  if (same(local, base)) return { blocks: incoming, conflicts: 0 };
-  if (same(incoming, base) || same(local, incoming)) return { blocks: local, conflicts: 0 };
-  const ml = matchIndices(base, local);
-  const mn = matchIndices(base, incoming);
-  if (!ml || !mn) return { blocks: null, conflicts: 1 };
-  const anchors = [...ml.keys()].filter((i) => mn.has(i)).sort((x, y) => x - y);
-  const out = [];
-  let conflicts = 0;
-  let pb = -1;
-  let pl = -1;
-  let pn = -1;
-  const region = (bEnd, lEnd, nEnd) => {
-    const B = base.slice(pb + 1, bEnd);
-    const L = local.slice(pl + 1, lEnd);
-    const N = incoming.slice(pn + 1, nEnd);
-    if (B.length === L.length && L.length === N.length) {
-      for (let k = 0; k < B.length; k++) {
-        if (L[k] === B[k]) out.push(N[k]);
-        else if (N[k] === B[k] || N[k] === L[k]) out.push(L[k]);
-        else {
-          conflicts++;
-          out.push(L[k]);
-        }
-      }
-      return;
-    }
-    if (same(L, B)) out.push(...N);
-    else if (same(N, B) || same(L, N)) out.push(...L);
-    else {
-      conflicts++;
-      out.push(...L);
-    }
-  };
-  for (const a of anchors) {
-    const la = ml.get(a);
-    const na = mn.get(a);
-    region(a, la, na);
-    out.push(local[la]);
-    pb = a;
-    pl = la;
-    pn = na;
+function collectImages(nodes, out) {
+  for (const node of nodes ?? []) {
+    const src = node.attrs?.src;
+    if (node.type === "image" && typeof src === "string" && src && !out.has(src)) out.set(src, node.attrs);
+    if (node.content) collectImages(node.content, out);
   }
-  region(base.length, local.length, incoming.length);
-  return { blocks: out, conflicts };
-}
-function mergeDocuments(base, local, incoming) {
-  const toBlocks = (d) => (d.content ?? []).map((node) => JSON.stringify(node));
-  const { blocks: blocks2, conflicts } = mergeBlocks(toBlocks(base), toBlocks(local), toBlocks(incoming));
-  if (!blocks2) return { doc: local, conflicts: Math.max(1, conflicts) };
-  if (blocks2.length === 0) return { doc: emptyDoc(), conflicts };
-  return { doc: { type: "doc", content: blocks2.map((b) => JSON.parse(b)) }, conflicts };
+  return out;
 }
-
-// src/components/document-editor/document-store.ts
-init_document_utils();
-var incomingKey = (doc) => JSON.stringify([doc.title, docKey(doc.json)]);
-function createDocumentStore() {
-  const records = /* @__PURE__ */ new Map();
-  const listeners = /* @__PURE__ */ new Set();
-  const emit = () => listeners.forEach((listener) => listener());
-  const put = (record) => {
-    records.set(record.id, record);
-    emit();
-  };
-  const fresh2 = (doc) => ({
-    id: doc.id,
-    title: doc.title,
-    documentType: doc.documentType,
-    status: doc.status,
-    json: doc.json,
-    baseJson: doc.json,
-    baseTitle: doc.title,
-    lastIncomingKey: incomingKey(doc),
-    revision: 0,
-    origin: "external",
-    pending: null,
-    updatedAt: Date.now()
+var IMAGE_TYPES = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/jpg": "jpg",
+  "image/gif": "gif",
+  "image/bmp": "bmp"
+};
+var MAX_IMAGE_WIDTH = 600;
+function naturalSize(blob) {
+  const fallback = { width: 400, height: 300 };
+  return new Promise((resolve) => {
+    if (typeof Image === "undefined" || typeof URL.createObjectURL !== "function") return resolve(fallback);
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+    const done = (size) => {
+      URL.revokeObjectURL(url);
+      resolve(size);
+    };
+    img.onload = () => done({ width: img.naturalWidth || 400, height: img.naturalHeight || 300 });
+    img.onerror = () => done(fallback);
+    img.src = url;
   });
-  return {
-    get: (id) => records.get(id),
-    list: () => [...records.values()],
-    subscribe: (listener) => {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    receive(incoming) {
-      const current = records.get(incoming.id);
-      if (!current) {
-        put(fresh2(incoming));
-        return "created";
-      }
-      const key = incomingKey(incoming);
-      if (current.lastIncomingKey === key) return "unchanged";
-      const userEditedBody = docKey(current.json) !== docKey(current.baseJson);
-      const userEditedTitle = current.title !== current.baseTitle;
-      const title = userEditedTitle ? current.title : incoming.title;
-      const meta = {
-        documentType: incoming.documentType ?? current.documentType,
-        status: incoming.status ?? current.status
-      };
-      if (!userEditedBody) {
-        put({
-          ...current,
-          ...meta,
-          title,
-          baseTitle: incoming.title,
-          json: incoming.json,
-          baseJson: incoming.json,
-          lastIncomingKey: key,
-          revision: current.revision + 1,
-          origin: "external",
-          pending: null,
-          updatedAt: Date.now()
-        });
-        return "applied";
-      }
-      const { doc, conflicts } = mergeDocuments(current.baseJson, current.json, incoming.json);
-      if (conflicts === 0) {
-        put({
-          ...current,
-          ...meta,
-          title,
-          baseTitle: incoming.title,
-          json: doc,
-          baseJson: incoming.json,
-          lastIncomingKey: key,
-          revision: current.revision + 1,
-          origin: "external",
-          pending: null,
-          updatedAt: Date.now()
-        });
-        return "merged";
-      }
-      put({
-        ...current,
-        ...meta,
-        lastIncomingKey: key,
-        pending: { json: incoming.json, title: incoming.title, merged: doc, conflicts }
-      });
-      return "conflict";
-    },
-    hydrate(doc) {
-      put(fresh2(doc));
-    },
-    edit(id, json, origin) {
-      const current = records.get(id);
-      if (!current || docKey(current.json) === docKey(json)) return;
-      put({ ...current, json, origin, revision: current.revision + 1, updatedAt: Date.now() });
-    },
-    setTitle(id, title) {
-      const current = records.get(id);
-      if (!current || current.title === title) return;
-      put({ ...current, title, updatedAt: Date.now() });
-    },
-    resolve(id, choice) {
-      const current = records.get(id);
-      const pending = current?.pending;
-      if (!current || !pending) return;
-      if (choice === "keep") {
-        put({ ...current, baseJson: pending.json, baseTitle: pending.title, pending: null });
-        return;
-      }
-      const json = choice === "merge" ? pending.merged : pending.json;
-      const title = choice === "merge" ? current.title : pending.title;
-      put({
-        ...current,
-        title,
-        json,
-        baseJson: pending.json,
-        baseTitle: pending.title,
-        revision: current.revision + 1,
-        origin: "external",
-        pending: null,
-        updatedAt: Date.now()
-      });
-    },
-    remove(id) {
-      if (records.delete(id)) emit();
-    }
-  };
-}
-var defaultStore = null;
-function getDefaultDocumentStore() {
-  if (!defaultStore) defaultStore = createDocumentStore();
-  return defaultStore;
-}
-
-// src/components/document-editor/document-title.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function DocumentTitle({ value, disabled, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "input",
-    {
-      className: "june-doc__title",
-      "aria-label": "Document title",
-      value,
-      disabled,
-      placeholder: "Untitled document",
-      onChange: (e) => onChange(e.target.value)
+}
+async function loadImage(src, attrs) {
+  try {
+    const res = await fetch(src);
+    if (!res.ok) return null;
+    const blob = await res.blob();
+    const type = IMAGE_TYPES[blob.type.toLowerCase()];
+    if (!type) return null;
+    const natural = await naturalSize(blob);
+    let width = Number(attrs?.width) || natural.width;
+    let height = Number(attrs?.height) || natural.height * width / natural.width;
+    if (width > MAX_IMAGE_WIDTH) {
+      height = height * MAX_IMAGE_WIDTH / width;
+      width = MAX_IMAGE_WIDTH;
     }
+    return { data: new Uint8Array(await blob.arrayBuffer()), type, width: Math.round(width), height: Math.round(height) };
+  } catch {
+    return null;
+  }
+}
+async function resolveImages(doc) {
+  const map = /* @__PURE__ */ new Map();
+  if (typeof fetch !== "function") return map;
+  const found = collectImages(doc.content, /* @__PURE__ */ new Map());
+  await Promise.all(
+    [...found].map(async ([src, attrs]) => {
+      const info = await loadImage(src, attrs);
+      if (info) map.set(src, info);
+    })
   );
+  return map;
 }
-
-// src/components/document-editor/document-toolbar.tsx
-var import_react8 = require("@tiptap/react");
-var import_react9 = require("react");
-init_document_utils();
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var FORMAT_LABELS = {
-  html: "HTML",
-  markdown: "Markdown",
-  txt: "Plain text",
-  docx: "Word (.docx)",
-  pdf: "PDF (print)"
-};
-function Btn({ label, active, disabled, toggle, onClick, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "button",
-    {
-      type: "button",
-      className: "june-doc__btn",
-      "aria-label": label,
-      title: label,
-      "aria-pressed": toggle ? !!active : void 0,
-      "data-active": active || void 0,
-      disabled,
-      onMouseDown: (e) => e.preventDefault(),
-      onClick,
-      children
+function blocks(d, nodes, fmt, state) {
+  const headings = [d.HeadingLevel.HEADING_1, d.HeadingLevel.HEADING_2, d.HeadingLevel.HEADING_3];
+  const out = [];
+  for (const node of nodes ?? []) {
+    switch (node.type) {
+      case "paragraph":
+        out.push(paragraph(d, node, fmt));
+        break;
+      case "heading": {
+        const level = Math.min(Math.max(Number(node.attrs?.level) || 1, 1), 3);
+        out.push(paragraph(d, node, fmt, { heading: headings[level - 1] }));
+        break;
+      }
+      case "bulletList":
+      case "orderedList":
+        out.push(...list(d, node, fmt, 0, state));
+        break;
+      case "blockquote":
+        out.push(...blocks(d, node.content, { ...fmt, quote: true, indent: (fmt.indent ?? 0) + 360 }, state));
+        break;
+      case "codeBlock":
+        out.push(code(d, node));
+        break;
+      case "horizontalRule":
+        out.push(
+          new d.Paragraph({
+            border: { bottom: { color: "9CA3AF", space: 1, style: d.BorderStyle.SINGLE, size: 6 } },
+            spacing: { after: 120 }
+          })
+        );
+        break;
+      case "table":
+        out.push(table(d, node, state));
+        break;
+      case "pageBreak":
+        out.push(new d.Paragraph({ children: [new d.PageBreak()] }));
+        break;
+      case "image":
+        out.push(...image(d, node, state));
+        break;
+      default:
+        if (node.content) out.push(...blocks(d, node.content, fmt, state));
     }
-  );
+  }
+  return out;
 }
-function DocumentToolbar(props) {
-  const { editor, editable, exportFormats, canSave, saveState, onExport, onCopy, onSave } = props;
-  const [linkOpen, setLinkOpen] = (0, import_react9.useState)(false);
-  const [linkValue, setLinkValue] = (0, import_react9.useState)("");
-  const s = (0, import_react8.useEditorState)({
-    editor,
-    selector: ({ editor: ed }) => ed ? {
-      bold: ed.isActive("bold"),
-      italic: ed.isActive("italic"),
-      underline: ed.isActive("underline"),
-      strike: ed.isActive("strike"),
-      bullet: ed.isActive("bulletList"),
-      ordered: ed.isActive("orderedList"),
-      quote: ed.isActive("blockquote"),
-      link: ed.isActive("link"),
-      linkHref: ed.getAttributes("link").href ?? "",
-      h1: ed.isActive("heading", { level: 1 }),
-      h2: ed.isActive("heading", { level: 2 }),
-      h3: ed.isActive("heading", { level: 3 }),
-      left: ed.isActive({ textAlign: "left" }),
-      center: ed.isActive({ textAlign: "center" }),
-      right: ed.isActive({ textAlign: "right" }),
-      justify: ed.isActive({ textAlign: "justify" }),
-      inTable: ed.isActive("table"),
-      canUndo: ed.can().undo(),
-      canRedo: ed.can().redo()
-    } : null
-  });
-  const run = () => editor?.chain().focus();
-  const off = !editor || !editable;
-  const heading = s?.h1 ? "1" : s?.h2 ? "2" : s?.h3 ? "3" : "p";
-  const openLink = () => {
-    setLinkValue(s?.linkHref ?? "");
-    setLinkOpen(true);
-  };
-  const applyLink = () => {
-    const href = sanitizeHref(linkValue);
-    if (href) run()?.extendMarkRange("link").setLink({ href }).run();
-    setLinkOpen(false);
-  };
-  const removeLink = () => {
-    run()?.extendMarkRange("link").unsetLink().run();
-    setLinkOpen(false);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__toolbar", role: "toolbar", "aria-label": "Document formatting", children: [
-    editable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Undo", disabled: off || !s?.canUndo, onClick: () => run()?.undo().run(), children: "\u21B6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Redo", disabled: off || !s?.canRedo, onClick: () => run()?.redo().run(), children: "\u21B7" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "june-doc__group", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "select",
-        {
-          className: "june-doc__select",
-          "aria-label": "Text style",
-          disabled: off,
-          value: heading,
-          onChange: (e) => {
-            const v = e.target.value;
-            if (v === "p") run()?.setParagraph().run();
-            else run()?.toggleHeading({ level: Number(v) }).run();
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "p", children: "Paragraph" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "1", children: "Heading 1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "2", children: "Heading 2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "3", children: "Heading 3" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Bold", toggle: true, active: s?.bold, disabled: off, onClick: () => run()?.toggleBold().run(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("b", { children: "B" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Italic", toggle: true, active: s?.italic, disabled: off, onClick: () => run()?.toggleItalic().run(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { children: "I" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Underline", toggle: true, active: s?.underline, disabled: off, onClick: () => run()?.toggleUnderline().run(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("u", { children: "U" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Strikethrough", toggle: true, active: s?.strike, disabled: off, onClick: () => run()?.toggleStrike().run(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("s", { children: "S" }) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Bullet list", toggle: true, active: s?.bullet, disabled: off, onClick: () => run()?.toggleBulletList().run(), children: "\u2022 List" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Numbered list", toggle: true, active: s?.ordered, disabled: off, onClick: () => run()?.toggleOrderedList().run(), children: "1. List" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Blockquote", toggle: true, active: s?.quote, disabled: off, onClick: () => run()?.toggleBlockquote().run(), children: "Quote" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Link", toggle: true, active: s?.link, disabled: off, onClick: openLink, children: "Link" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Align left", toggle: true, active: s?.left, disabled: off, onClick: () => run()?.setTextAlign("left").run(), children: "L" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Align center", toggle: true, active: s?.center, disabled: off, onClick: () => run()?.setTextAlign("center").run(), children: "C" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Align right", toggle: true, active: s?.right, disabled: off, onClick: () => run()?.setTextAlign("right").run(), children: "R" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Justify", toggle: true, active: s?.justify, disabled: off, onClick: () => run()?.setTextAlign("justify").run(), children: "J" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Insert table", disabled: off, onClick: () => run()?.insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), children: "Table" }),
-        s?.inTable ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Add row below", disabled: off, onClick: () => run()?.addRowAfter().run(), children: "+Row" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Add column right", disabled: off, onClick: () => run()?.addColumnAfter().run(), children: "+Col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Delete row", disabled: off, onClick: () => run()?.deleteRow().run(), children: "\u2212Row" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Delete column", disabled: off, onClick: () => run()?.deleteColumn().run(), children: "\u2212Col" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Delete table", disabled: off, onClick: () => run()?.deleteTable().run(), children: "Del table" })
-        ] }) : null
-      ] })
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__group june-doc__group--end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Copy document", onClick: onCopy, children: "Copy" }),
-      exportFormats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "select",
-        {
-          className: "june-doc__select",
-          "aria-label": "Export document",
-          value: "",
-          onChange: (e) => e.target.value && onExport(e.target.value),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", children: "Export\u2026" }),
-            exportFormats.map((f) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: f, children: FORMAT_LABELS[f] ?? f }, f))
-          ]
-        }
-      ) : null,
-      canSave ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { label: "Save", disabled: saveState === "saving" || saveState === "saved" || saveState === "idle", onClick: onSave, children: "Save" }) : null
-    ] }),
-    linkOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "june-doc__linkbar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "input",
+var exportDocx = async (ctx) => {
+  const d = await import("docx");
+  const state = { instance: 0, images: await resolveImages(ctx.json) };
+  const children = [
+    new d.Paragraph({ text: ctx.title, heading: d.HeadingLevel.TITLE }),
+    ...blocks(d, ctx.json.content, {}, state)
+  ];
+  const doc = new d.Document({
+    title: ctx.title,
+    numbering: {
+      config: [
         {
-          "aria-label": "Link address",
-          className: "june-doc__input",
-          placeholder: "https://example.com",
-          value: linkValue,
-          autoFocus: true,
-          onChange: (e) => setLinkValue(e.target.value),
-          onKeyDown: (e) => {
-            if (e.key === "Enter") applyLink();
-            if (e.key === "Escape") setLinkOpen(false);
-          }
+          reference: ORDERED_REF,
+          levels: [0, 1, 2].map((level) => ({
+            level,
+            format: d.LevelFormat.DECIMAL,
+            text: `%${level + 1}.`,
+            alignment: d.AlignmentType.START,
+            style: { paragraph: { indent: { left: 720 * (level + 1), hanging: 360 } } }
+          }))
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "june-doc__btn", onClick: applyLink, children: "Apply" }),
-      s?.link ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "june-doc__btn", onClick: removeLink, children: "Remove" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "june-doc__btn", onClick: () => setLinkOpen(false), children: "Cancel" })
-    ] }) : null
-  ] });
+      ]
+    },
+    sections: [{ children }]
+  });
+  const blob = await d.Packer.toBlob(doc);
+  return { filename: `${ctx.basename}.docx`, mimeType: DOCX_MIME, blob };
+};
+function printHtml(html) {
+  return new Promise((resolve, reject) => {
+    const frame = document.createElement("iframe");
+    frame.setAttribute("aria-hidden", "true");
+    frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;";
+    const cleanup = () => setTimeout(() => frame.remove(), 500);
+    frame.onload = () => {
+      try {
+        const win = frame.contentWindow;
+        if (!win) throw new Error("The print frame is unavailable");
+        win.addEventListener("afterprint", cleanup);
+        win.focus();
+        win.print();
+        setTimeout(cleanup, 12e4);
+        resolve();
+      } catch (error) {
+        cleanup();
+        reject(error);
+      }
+    };
+    frame.srcdoc = html;
+    document.body.appendChild(frame);
+  });
+}
+var exportPdf = async (ctx) => {
+  const { docToHtml: docToHtml2 } = await Promise.resolve().then(() => (init_document_engine(), document_engine_exports));
+  await printHtml(buildHtmlDocument(ctx.title, docToHtml2(ctx.json)));
+  return { filename: `${ctx.basename}.pdf`, mimeType: "application/pdf", handled: true };
+};
+var registry = /* @__PURE__ */ new Map([
+  ["html", exportHtml],
+  ["markdown", exportMarkdown],
+  ["txt", exportTxt],
+  ["docx", exportDocx],
+  ["pdf", exportPdf]
+]);
+function registerDocumentExporter(format, exporter) {
+  registry.set(format, exporter);
+}
+function listDocumentExporters() {
+  return [...registry.keys()];
+}
+async function exportDocument(format, doc) {
+  const exporter = registry.get(format);
+  if (!exporter) throw new JuneError("EXPORT_ERROR", `No exporter is registered for "${format}"`);
+  try {
+    return await exporter({ ...doc, basename: slugify(doc.title) || "document" });
+  } catch (error) {
+    throw toJuneError(error, "EXPORT_ERROR", `Exporting ${format} failed`);
+  }
+}
+function downloadResult(result) {
+  if (!result.blob) return;
+  const url = URL.createObjectURL(result.blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = result.filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+async function copyDocumentToClipboard(doc) {
+  const { docToHtml: docToHtml2, docToText: docToText2 } = await Promise.resolve().then(() => (init_document_engine(), document_engine_exports));
+  const html = docToHtml2(doc.json);
+  const text = `${doc.title}
+
+${docToText2(doc.json)}`;
+  try {
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/html": new Blob([html], { type: "text/html" }),
+          "text/plain": new Blob([text], { type: "text/plain" })
+        })
+      ]);
+      return true;
+    }
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
+// src/components/document-editor/document-editor.tsx
+init_document_extensions();
+
 // src/components/document-editor/document-types.ts
 var ALL_EXPORT_FORMATS = [
   "html",
@@ -2066,7 +3715,7 @@ var ALL_EXPORT_FORMATS = [
 
 // src/components/document-editor/document-editor.tsx
 init_document_utils();
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var snapshotOf = (r) => ({
   documentId: r.id,
   title: r.title,
@@ -2081,6 +3730,8 @@ var SAVE_LABEL = {
   saved: "Saved",
   error: "Save failed"
 };
+var ZOOM_STEPS = [0.5, 0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
+var stepZoom = (z2, dir) => dir > 0 ? ZOOM_STEPS.find((s) => s > z2 + 1e-3) ?? z2 : [...ZOOM_STEPS].reverse().find((s) => s < z2 - 1e-3) ?? z2;
 function DocumentEditorImpl(props) {
   const {
     documentId,
@@ -2094,15 +3745,15 @@ function DocumentEditorImpl(props) {
     className
   } = props;
   const ctxOptions = useDocumentOptions();
-  const options = (0, import_react11.useMemo)(() => ({ ...ctxOptions, ...props.options }), [ctxOptions, props.options]);
-  const optionsRef = (0, import_react11.useRef)(options);
+  const options = (0, import_react16.useMemo)(() => ({ ...ctxOptions, ...props.options }), [ctxOptions, props.options]);
+  const optionsRef = (0, import_react16.useRef)(options);
   optionsRef.current = options;
-  const store = (0, import_react11.useMemo)(() => options.store ?? getDefaultDocumentStore(), [options.store]);
-  const instanceId = (0, import_react11.useId)();
+  const store = (0, import_react16.useMemo)(() => options.store ?? getDefaultDocumentStore(), [options.store]);
+  const instanceId = (0, import_react16.useId)();
   const { theme: contextTheme } = useJuneTheme();
   const resolvedTheme = theme === "auto" ? contextTheme : theme;
   const contentKey = typeof content === "string" ? content : content ? JSON.stringify(content) : "";
-  const parsed = (0, import_react11.useMemo)(() => {
+  const parsed = (0, import_react16.useMemo)(() => {
     if (!contentKey) return { json: null, error: null };
     try {
       return { json: parseDocumentContent(contentKey), error: null };
@@ -2110,45 +3761,65 @@ function DocumentEditorImpl(props) {
       return { json: null, error: toJuneError(e, "DOCUMENT_ERROR") };
     }
   }, [contentKey]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (parsed.error) optionsRef.current.onError?.(parsed.error);
   }, [parsed.error]);
   const title = useDocumentValue(store, documentId, (r) => r?.title ?? titleProp);
   const pending = useDocumentValue(store, documentId, (r) => r?.pending ?? null);
   const words = useDocumentValue(store, documentId, (r) => r ? wordCountOf(r.json) : 0);
   const recordStatus = useDocumentValue(store, documentId, (r) => r?.status ?? status);
-  const [saveState, setSaveState] = (0, import_react11.useState)("idle");
-  const [notice, setNotice] = (0, import_react11.useState)(null);
-  const lastSavedKey = (0, import_react11.useRef)("");
-  const seenRevision = (0, import_react11.useRef)(store.get(documentId)?.revision ?? 0);
-  const readyRef = (0, import_react11.useRef)(false);
-  const flash = (0, import_react11.useCallback)((message) => {
+  const [saveState, setSaveState] = (0, import_react16.useState)("idle");
+  const [notice, setNotice] = (0, import_react16.useState)(null);
+  const [fullscreen, setFullscreen] = (0, import_react16.useState)(false);
+  const [expanded, setExpanded] = (0, import_react16.useState)(true);
+  const [showMarks, setShowMarks] = (0, import_react16.useState)(false);
+  const [layout, setLayout] = (0, import_react16.useState)("page");
+  const [findOpen, setFindOpen] = (0, import_react16.useState)(false);
+  const [zoom, setZoom] = (0, import_react16.useState)(1);
+  const [metrics, setMetrics] = (0, import_react16.useState)({ page: 1, pages: 1 });
+  (0, import_react16.useEffect)(() => {
+    if (!fullscreen || typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [fullscreen]);
+  const lastSavedKey = (0, import_react16.useRef)("");
+  const seenRevision = (0, import_react16.useRef)(store.get(documentId)?.revision ?? 0);
+  const readyRef = (0, import_react16.useRef)(false);
+  const flash = (0, import_react16.useCallback)((message) => {
     setNotice(message);
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!notice) return;
     const t = setTimeout(() => setNotice(null), 3e3);
     return () => clearTimeout(t);
   }, [notice]);
-  const emitChange = (0, import_react11.useCallback)(
+  const emitChange = (0, import_react16.useCallback)(
     (source) => {
       const record = store.get(documentId);
       if (record) optionsRef.current.onDocumentChange?.({ ...snapshotOf(record), source });
     },
     [store, documentId]
   );
-  const saveRef = (0, import_react11.useRef)(async () => {
+  const saveRef = (0, import_react16.useRef)(async () => {
   });
-  const autosave = (0, import_react11.useMemo)(() => {
+  const autosave = (0, import_react16.useMemo)(() => {
     const delay = options.autosaveDelay ?? 1500;
     return delay > 0 ? debounce(() => void saveRef.current(), delay) : null;
   }, [options.autosaveDelay]);
-  (0, import_react11.useEffect)(() => () => autosave?.flush(), [autosave]);
+  (0, import_react16.useEffect)(() => () => autosave?.flush(), [autosave]);
   saveRef.current = async () => {
     const record = store.get(documentId);
     const onSave = optionsRef.current.onSave;
-    if (!record || !onSave) return;
+    if (!record) return;
     const key = JSON.stringify([record.title, docKey(record.json)]);
+    if (!onSave) {
+      lastSavedKey.current = key;
+      setSaveState("saved");
+      return;
+    }
     if (key === lastSavedKey.current) {
       setSaveState("saved");
       return;
@@ -2169,21 +3840,32 @@ function DocumentEditorImpl(props) {
       optionsRef.current.onError?.(toJuneError(error, "DOCUMENT_ERROR", "Saving the document failed"));
     }
   };
-  const markDirty = (0, import_react11.useCallback)(() => {
-    if (!optionsRef.current.onSave) return;
-    setSaveState("dirty");
-    autosave?.();
-  }, [autosave]);
-  const [initialJson] = (0, import_react11.useState)(() => store.get(documentId)?.json ?? parsed.json ?? emptyDoc());
-  const extensions = (0, import_react11.useMemo)(() => createDocumentExtensions(), []);
-  const onUpdateRef = (0, import_react11.useRef)(() => {
+  const markDirty = (0, import_react16.useCallback)(
+    (userEdit = true) => {
+      if (!optionsRef.current.onSave) {
+        if (userEdit) setSaveState("dirty");
+        return;
+      }
+      setSaveState("dirty");
+      autosave?.();
+    },
+    [autosave]
+  );
+  (0, import_react16.useEffect)(() => {
+    if (saveState !== "saved" || options.onSave) return;
+    const t = setTimeout(() => setSaveState((s) => s === "saved" ? "idle" : s), 2500);
+    return () => clearTimeout(t);
+  }, [saveState, options.onSave]);
+  const [initialJson] = (0, import_react16.useState)(() => store.get(documentId)?.json ?? parsed.json ?? emptyDoc());
+  const extensions = (0, import_react16.useMemo)(() => createDocumentExtensions(), []);
+  const onUpdateRef = (0, import_react16.useRef)(() => {
   });
   onUpdateRef.current = (json) => {
     store.edit(documentId, json, instanceId);
     emitChange("user");
     markDirty();
   };
-  const editor = (0, import_react10.useEditor)({
+  const editor = (0, import_react15.useEditor)({
     extensions,
     content: initialJson,
     editable,
@@ -2198,11 +3880,13 @@ function DocumentEditorImpl(props) {
     },
     onUpdate: ({ editor: ed }) => onUpdateRef.current(ed.getJSON())
   });
-  (0, import_react11.useEffect)(() => {
-    editor?.setEditable(editable);
+  (0, import_react16.useEffect)(() => {
+    if (!editor || editor.isEditable === editable) return;
+    editor.setEditable(editable);
   }, [editor, editable]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!parsed.json) return;
+    if (isDocumentEcho(store, documentId, contentKey)) return;
     const outcome = store.receive({
       id: documentId,
       title: titleProp,
@@ -2212,7 +3896,7 @@ function DocumentEditorImpl(props) {
     });
     if (outcome === "applied" || outcome === "merged") {
       emitChange(outcome === "applied" ? "ai" : "merge");
-      markDirty();
+      markDirty(false);
     } else if (outcome === "conflict") {
       const record = store.get(documentId);
       optionsRef.current.onConflict?.({
@@ -2222,7 +3906,7 @@ function DocumentEditorImpl(props) {
       });
     }
   }, [store, documentId, titleProp, parsed.json, documentType, status, emitChange, markDirty]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!editor) return;
     const apply = () => {
       const record = store.get(documentId);
@@ -2239,7 +3923,7 @@ function DocumentEditorImpl(props) {
     apply();
     return store.subscribe(apply);
   }, [editor, store, documentId, instanceId]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!editor || readyRef.current) return;
     const record = store.get(documentId);
     if (!record) return;
@@ -2283,67 +3967,115 @@ function DocumentEditorImpl(props) {
   };
   const formats = (exportFormats ?? [...ALL_EXPORT_FORMATS]).filter((f) => listDocumentExporters().includes(f));
   if (parsed.error && !store.get(documentId)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "june-doc june-doc--error", "data-theme": resolvedTheme, role: "alert", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "june-doc__draft-text", children: "This document could not be displayed." }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("details", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("summary", { children: "Show raw content" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "june-doc__raw", children: contentKey })
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "june-doc june-doc--error", "data-theme": resolvedTheme, role: "alert", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "june-doc__draft-text", children: "This document could not be displayed." }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("details", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("summary", { children: "Show raw content" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("pre", { className: "june-doc__raw", children: contentKey })
       ] })
     ] });
   }
-  if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DocumentDraft, { title, state: "loading" });
+  if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocumentDraft, { title, state: "loading" });
   const isDraft = recordStatus === "draft";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  const classes = ["june-doc", fullscreen ? "june-doc--fullscreen" : "", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
-      className: className ? `june-doc ${className}` : "june-doc",
+      className: classes,
       "data-theme": resolvedTheme,
       "data-status": recordStatus,
+      role: fullscreen ? "dialog" : void 0,
+      "aria-modal": fullscreen || void 0,
+      "aria-label": fullscreen ? title : void 0,
       onKeyDown: (e) => {
-        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s" && options.onSave) {
+        const mod = e.ctrlKey || e.metaKey;
+        if (mod && e.key.toLowerCase() === "s" && options.onSave) {
           e.preventDefault();
           void saveRef.current();
+        } else if (mod && e.key.toLowerCase() === "f") {
+          e.preventDefault();
+          setFindOpen(true);
+        } else if (e.key === "Escape" && fullscreen && !e.defaultPrevented) {
+          setFullscreen(false);
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "june-doc__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DocumentTitle, { value: title, disabled: !editable, onChange: handleTitle }),
-          isDraft ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "june-doc__badge", children: "AI draft" }) : null
-        ] }),
-        pending ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "june-doc__banner", role: "status", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          DocumentHeader,
+          {
+            title,
+            editable,
+            isDraft,
+            fullscreen,
+            onToggleFullscreen: () => setFullscreen((v) => !v),
+            onTitle: handleTitle,
+            exportFormats: formats,
+            canSave: !!options.onSave,
+            showSave: !!options.onSave || editable && saveState !== "idle",
+            saveState,
+            onExport: (f) => void handleExport(f),
+            onCopy: () => void handleCopy(),
+            onSave: () => void saveRef.current()
+          }
+        ),
+        pending ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "june-doc__banner", role: "status", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
             "The assistant suggested changes that overlap your edits (",
             pending.conflicts,
             " ",
             pending.conflicts === 1 ? "section" : "sections",
             ")."
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "june-doc__banner-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("merge"), children: "Merge, keep my edits" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("replace"), children: "Use AI version" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("keep"), children: "Keep mine" })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "june-doc__banner-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("merge"), children: "Merge, keep my edits" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("replace"), children: "Use AI version" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("keep"), children: "Keep mine" })
           ] })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           DocumentToolbar,
           {
             editor,
             editable,
-            exportFormats: formats,
-            canSave: !!options.onSave,
-            saveState,
-            onExport: (f) => void handleExport(f),
-            onCopy: () => void handleCopy(),
-            onSave: () => void saveRef.current()
+            expanded,
+            onToggleExpanded: () => setExpanded((v) => !v),
+            showMarks,
+            onToggleMarks: () => setShowMarks((v) => !v),
+            layout,
+            onToggleLayout: () => setLayout((v) => v === "page" ? "fluid" : "page"),
+            findOpen,
+            onToggleFind: () => setFindOpen((v) => !v),
+            onNotice: flash
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DocumentContent, { editor }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "june-doc__footer", "aria-live": "polite", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { children: [
-            words,
-            " words"
+        findOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocumentFindBar, { editor, editable, onClose: () => setFindOpen(false), onNotice: flash }) : null,
+        editable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocumentBubbleMenu, { editor }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DocumentContent, { editor, layout, zoom, showMarks, onMetrics: setMetrics }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "june-doc__footer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "june-doc__stats", children: [
+            layout === "page" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+                "Page ",
+                metrics.page,
+                " of ",
+                metrics.pages
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "june-doc__stats-sep", "aria-hidden": "true" })
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+              words,
+              " words"
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: notice ?? SAVE_LABEL[saveState] })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "june-doc__status", "aria-live": "polite", "data-state": notice ? "notice" : saveState, children: notice ?? SAVE_LABEL[saveState] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "june-doc__zoom", role: "group", "aria-label": "Zoom", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Zoom out", disabled: zoom <= ZOOM_STEPS[0], onClick: () => setZoom(stepZoom(zoom, -1)), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "minus", size: 14 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { type: "button", className: "june-doc__zoom-value", "aria-label": "Reset zoom", title: "Reset zoom", onClick: () => setZoom(1), children: [
+              Math.round(zoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Zoom in", disabled: zoom >= ZOOM_STEPS[ZOOM_STEPS.length - 1], onClick: () => setZoom(stepZoom(zoom, 1)), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "plus", size: 14 }) })
+          ] })
         ] })
       ]
     }
@@ -2351,7 +4083,7 @@ function DocumentEditorImpl(props) {
 }
 
 // src/components/document-editor/document-component.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DOCUMENT_COMPONENT_DESCRIPTION = 'Custom component. An editable document. DocumentEditor(documentId, title, content, documentType?, status?, editable?, exportFormats?). Place it in the root container (Card or Stack). "content" is the full document body as one Markdown string. Reuse documentId when revising the same document. Use it only when the user asks to create or revise a document.';
 var documentProps = import_v4.z.object({
   documentId: import_v4.z.string().describe("Stable id. Reuse it when revising the same document."),
@@ -2365,12 +4097,12 @@ var documentProps = import_v4.z.object({
 function DocumentEditor(props) {
   const { isStreaming } = useJuneRuntime();
   if (props.generating || isStreaming) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DocumentDraft, { title: props.title, state: "drafting" });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DocumentDraft, { title: props.title, state: "drafting" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DocumentEditorImpl, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DocumentEditorImpl, { ...props });
 }
 function OpenUIDocument({ props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     DocumentEditor,
     {
       documentId: props.documentId,
@@ -2390,11 +4122,15 @@ var JuneDocumentEditorComponent = (0, import_react_lang3.defineComponent)({
   component: OpenUIDocument
 });
 function withDocumentEditor(library) {
-  return library.extend({
-    components: {
-      add: [{ component: JuneDocumentEditorComponent, slots: ["Card"] }]
-    }
-  });
+  try {
+    return library.extend({
+      components: {
+        add: [{ component: JuneDocumentEditorComponent, slots: ["Card"] }]
+      }
+    });
+  } catch {
+    return library.extend({ components: { add: [JuneDocumentEditorComponent] } });
+  }
 }
 
 // src/components/document-editor/document-instructions.ts
@@ -2454,9 +4190,9 @@ var import_react_ui = require("@openuidev/react-ui");
 var juneLibrary = withDocumentEditor(import_react_ui.openuiLibrary);
 
 // src/core/JuneUI.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function JuneUI({ library = juneLibrary, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(JuneRenderer, { library, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(JuneRenderer, { library, ...props });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -2486,17 +4222,21 @@ function JuneUI({ library = juneLibrary, ...props }) {
   getDefaultDocumentStore,
   getDocumentEditorInstructions,
   getDocumentEditorRules,
+  isDocumentEcho,
   isJuneError,
   jsonFieldExtractor,
   juneLibrary,
   lightTheme,
   listDocumentExporters,
   mergeDocuments,
+  readDocumentFromProgram,
   registerDocumentExporter,
+  rememberDocumentEcho,
   runAction,
   serializeDocumentsForAgent,
   sseToText,
   toJuneError,
+  updateDocumentInProgram,
   useDocumentOptions,
   useJuneRuntime,
   useJuneStream,