@june-ai/june-ui 0.2.4 → 0.2.6

package/dist/index.js

@@ -6,19 +6,28 @@ import {
   docToHtml,
   docToMarkdown,
   emptyDoc,
+  getPageCount,
+  getSearchState,
+  gotoMatch,
   isJuneError,
   parseDocumentContent,
+  remeasurePagination,
+  replaceAll,
+  replaceCurrent,
   sanitizeHref,
+  setPaginationConfig,
+  setSearch,
   slugify,
   toJuneError,
   wordCountOf
-} from "./chunk-HFHRSNIL.js";
+} from "./chunk-VFZI3SEL.js";
 
 // src/renderer/renderer.tsx
 import { Renderer } from "@openuidev/react-lang";
 import {
   Fragment,
   useCallback,
+  useEffect,
   useMemo as useMemo2,
   useRef
 } from "react";
@@ -96,6 +105,316 @@ function useDocumentValue(store, id, selector) {
   return useSyncExternalStore(store.subscribe, read, read);
 }
 
+// src/components/document-editor/document-merge.ts
+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;
+  }
+  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 };
+}
+
+// src/components/document-editor/document-store.ts
+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
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var JuneContext = createContext2({
@@ -654,14 +973,43 @@ function JuneRenderer(props) {
     onError,
     onJuneError,
     documents,
+    onResponseChange,
+    responseChangeDelay = 300,
     loadingFallback = null,
     emptyFallback = null,
     errorFallback,
     resetKeys,
     ...rendererProps
   } = props;
-  const latest = useRef({ actions, confirmAction, parseActionEvent, onAction, onError, onJuneError });
-  latest.current = { actions, confirmAction, parseActionEvent, onAction, onError, onJuneError };
+  const latest = useRef({ actions, confirmAction, parseActionEvent, onAction, onError, onJuneError, onResponseChange, responseChangeDelay, response });
+  latest.current = { actions, confirmAction, parseActionEvent, onAction, onError, onJuneError, onResponseChange, responseChangeDelay, response };
+  const syncTimers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const timers = syncTimers.current;
+    return () => {
+      timers.forEach(clearTimeout);
+      timers.clear();
+    };
+  }, []);
+  const syncProgram = 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 import("./document-engine-RKD5SLXR.js");
+      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 = useCallback((event) => {
     const l = latest.current;
     l.onAction?.(event);
@@ -700,12 +1048,27 @@ function JuneRenderer(props) {
   const documentOptions = useMemo2(
     () => ({
       ...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 = useMemo2(
     () => mixedContent && response ? splitResponse(response, { streaming: isStreaming }) : null,
@@ -798,7 +1161,7 @@ function defineJuneAction(definition) {
 }
 
 // src/streaming/use-june-stream.ts
-import { useCallback as useCallback2, useEffect, useMemo as useMemo3, useRef as useRef2, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState } from "react";
 
 // src/streaming/stream-handler.ts
 function isReadableStream(source) {
@@ -1053,7 +1416,7 @@ function useJuneStream(options = {}) {
     clearTimer();
     setState(INITIAL);
   }, [clearTimer]);
-  useEffect(
+  useEffect2(
     () => () => {
       runIdRef.current++;
       controllerRef.current?.abort();
@@ -1090,18 +1453,1221 @@ function DocumentDraft({ title, words, state }) {
 
 // src/components/document-editor/document-editor.tsx
 import { useEditor } from "@tiptap/react";
-import { useCallback as useCallback3, useEffect as useEffect2, useId, useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useId, useMemo as useMemo4, useRef as useRef7, useState as useState6 } from "react";
 
-// src/components/document-editor/document-content.tsx
-import { EditorContent } from "@tiptap/react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function DocumentContent({ editor }) {
-  return /* @__PURE__ */ jsx5("div", { className: "june-doc__content", children: /* @__PURE__ */ jsx5(EditorContent, { editor }) });
+// src/components/document-editor/document-bubble.tsx
+import { useEditorState as useEditorState2 } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+
+// src/components/document-editor/document-toolbar.tsx
+import { useEditorState } from "@tiptap/react";
+import { useRef as useRef4, useState as useState3 } from "react";
+
+// src/components/document-editor/document-icons.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var PATHS = {
+  undo: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M9 14 4 9l5-5" }),
+    /* @__PURE__ */ jsx5("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
+  ] }),
+  redo: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m15 14 5-5-5-5" }),
+    /* @__PURE__ */ jsx5("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
+  ] }),
+  bold: /* @__PURE__ */ jsx5("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__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("line", { x1: "19", x2: "10", y1: "4", y2: "4" }),
+    /* @__PURE__ */ jsx5("line", { x1: "14", x2: "5", y1: "20", y2: "20" }),
+    /* @__PURE__ */ jsx5("line", { x1: "15", x2: "9", y1: "4", y2: "20" })
+  ] }),
+  underline: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
+    /* @__PURE__ */ jsx5("line", { x1: "4", x2: "20", y1: "20", y2: "20" })
+  ] }),
+  strike: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
+    /* @__PURE__ */ jsx5("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
+  ] }),
+  code: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m16 18 6-6-6-6" }),
+    /* @__PURE__ */ jsx5("path", { d: "m8 6-6 6 6 6" })
+  ] }),
+  codeBlock: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx5("path", { d: "m10 9-3 3 3 3" }),
+    /* @__PURE__ */ jsx5("path", { d: "m14 15 3-3-3-3" })
+  ] }),
+  superscript: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m4 19 8-8" }),
+    /* @__PURE__ */ jsx5("path", { d: "m12 19-8-8" }),
+    /* @__PURE__ */ jsx5("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__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m4 5 8 8" }),
+    /* @__PURE__ */ jsx5("path", { d: "m12 5-8 8" }),
+    /* @__PURE__ */ jsx5("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__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M15 12H3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M17 18H3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
+  ] }),
+  alignCenter: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M17 12H7" }),
+    /* @__PURE__ */ jsx5("path", { d: "M19 18H5" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
+  ] }),
+  alignRight: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M21 12H9" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 18H7" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
+  ] }),
+  alignJustify: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M3 12h18" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 18h18" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 6h18" })
+  ] }),
+  list: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M3 12h.01" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 18h.01" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 6h.01" }),
+    /* @__PURE__ */ jsx5("path", { d: "M8 12h13" }),
+    /* @__PURE__ */ jsx5("path", { d: "M8 18h13" }),
+    /* @__PURE__ */ jsx5("path", { d: "M8 6h13" })
+  ] }),
+  listOrdered: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M10 12h11" }),
+    /* @__PURE__ */ jsx5("path", { d: "M10 18h11" }),
+    /* @__PURE__ */ jsx5("path", { d: "M10 6h11" }),
+    /* @__PURE__ */ jsx5("path", { d: "M4 10h2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M4 6h1v4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
+  ] }),
+  outdent: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M21 12H11" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 18H11" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 6H11" }),
+    /* @__PURE__ */ jsx5("path", { d: "m7 8-4 4 4 4" })
+  ] }),
+  indent: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M21 12H11" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 18H11" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 6H11" }),
+    /* @__PURE__ */ jsx5("path", { d: "m3 8 4 4-4 4" })
+  ] }),
+  quote: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M17 6H3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 12H8" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 18H8" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 12v6" })
+  ] }),
+  pilcrow: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M13 4v16" }),
+    /* @__PURE__ */ jsx5("path", { d: "M17 4v16" }),
+    /* @__PURE__ */ jsx5("path", { d: "M19 4H9.5a4.5 4.5 0 0 0 0 9H13" })
+  ] }),
+  pageBreak: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("line", { x1: "3", x2: "21", y1: "12", y2: "12" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "8 8 12 4 16 8" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "16 16 12 20 8 16" })
+  ] }),
+  divider: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M3 12h18" }),
+    /* @__PURE__ */ jsx5("path", { d: "M8 6h8", opacity: ".45" }),
+    /* @__PURE__ */ jsx5("path", { d: "M8 18h8", opacity: ".45" })
+  ] }),
+  layout: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ jsx5("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
+    /* @__PURE__ */ jsx5("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
+  ] }),
+  search: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx5("path", { d: "m21 21-4.3-4.3" })
+  ] }),
+  palette: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx5("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__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "m9 11-6 6v3h9l3-3" }),
+    /* @__PURE__ */ jsx5("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__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("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__ */ jsx5("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__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsx5("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx5("path", { d: "m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21" })
+  ] }),
+  table: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M12 3v18" }),
+    /* @__PURE__ */ jsx5("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 9h18" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 15h18" })
+  ] }),
+  eraser: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("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__ */ jsx5("path", { d: "M22 21H7" }),
+    /* @__PURE__ */ jsx5("path", { d: "m5 11 9 9" })
+  ] }),
+  save: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("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__ */ jsx5("path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" }),
+    /* @__PURE__ */ jsx5("path", { d: "M7 3v4a1 1 0 0 0 1 1h7" })
+  ] }),
+  download: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
+    /* @__PURE__ */ jsx5("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+  ] }),
+  chevronDown: /* @__PURE__ */ jsx5("path", { d: "m6 9 6 6 6-6" }),
+  chevronUp: /* @__PURE__ */ jsx5("path", { d: "m18 15-6-6-6 6" }),
+  close: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
+  ] }),
+  maximize: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+    /* @__PURE__ */ jsx5("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+  ] }),
+  copy: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2" }),
+    /* @__PURE__ */ jsx5("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__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx5("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  ] }),
+  plus: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx5("path", { d: "M12 5v14" })
+  ] }),
+  minus: /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
+  check: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" }),
+  sparkles: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("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__ */ jsx5("path", { d: "M20 3v4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M22 5h-4" })
+  ] }),
+  upload: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx5("polyline", { points: "17 8 12 3 7 8" }),
+    /* @__PURE__ */ jsx5("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+  ] })
+};
+function Icon({ name, size = 16 }) {
+  return /* @__PURE__ */ jsx5(
+    "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-popover.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Dropdown({ trigger, children, align = "start", className, onOpen }) {
+  const [open, setOpen] = useState2(false);
+  const anchor = useRef3(null);
+  useEffect3(() => {
+    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__ */ jsxs4(
+    "div",
+    {
+      ref: anchor,
+      className: "june-doc__anchor",
+      onKeyDown: (e) => {
+        if (e.key === "Escape" && open) {
+          e.stopPropagation();
+          close();
+        }
+      },
+      children: [
+        trigger({ open, toggle }),
+        open ? /* @__PURE__ */ jsx6("div", { className: `june-doc__pop june-doc__pop--${align}${className ? ` ${className}` : ""}`, children: children(close) }) : null
+      ]
+    }
+  );
+}
+
+// src/components/document-editor/document-toolbar.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "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__ */ jsxs5(
+    "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__ */ jsx7(Icon, { name: icon }) : null,
+        children ?? (text ? /* @__PURE__ */ jsx7("span", { children: label }) : null)
+      ]
+    }
+  );
+}
+function Group({ label, children }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "june-doc__group", role: "group", "aria-label": label, children: [
+    label ? /* @__PURE__ */ jsx7("span", { className: "june-doc__group-label", "aria-hidden": "true", children: label }) : null,
+    children
+  ] });
+}
+function Field({ label, children }) {
+  return /* @__PURE__ */ jsxs5("label", { className: "june-doc__field", children: [
+    /* @__PURE__ */ jsx7("span", { className: "june-doc__field-label", children: label }),
+    children
+  ] });
+}
+function ColorPicker({ label, icon, colors, current, disabled, resetLabel, onPick, onReset }) {
+  return /* @__PURE__ */ jsx7(
+    Dropdown,
+    {
+      trigger: ({ open, toggle }) => /* @__PURE__ */ jsxs5(
+        "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__ */ jsx7(Icon, { name: icon }),
+            /* @__PURE__ */ jsx7("span", { className: "june-doc__color-bar", style: { background: current ?? "transparent" } })
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsxs5("div", { className: "june-doc__swatches-wrap", role: "dialog", "aria-label": label, children: [
+        /* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: label }),
+        /* @__PURE__ */ jsx7("div", { className: "june-doc__swatches", children: colors.map((c) => /* @__PURE__ */ jsx7(
+          "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__ */ jsxs5("div", { className: "june-doc__pop-row", children: [
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              className: "june-doc__btn june-doc__btn--ghost",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                onReset();
+                close();
+              },
+              children: resetLabel
+            }
+          ),
+          /* @__PURE__ */ jsxs5("label", { className: "june-doc__custom-color", title: "Custom color", children: [
+            /* @__PURE__ */ jsx7("span", { children: "Custom" }),
+            /* @__PURE__ */ jsx7(
+              "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] = useState3(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__ */ jsxs5("div", { className: "june-doc__form", role: "dialog", "aria-label": "Edit link", children: [
+    /* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: "Link" }),
+    /* @__PURE__ */ jsx7(
+      "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__ */ jsxs5("div", { className: "june-doc__pop-row june-doc__pop-row--end", children: [
+      isLink ? /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", onClick: remove, children: "Remove" }) : null,
+      /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn", onClick: close, children: "Cancel" }),
+      /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn june-doc__btn--primary", onClick: apply, children: "Apply" })
+    ] })
+  ] });
+}
+function ImagePanel({ editor, close, onNotice }) {
+  const [url, setUrl] = useState3("");
+  const [alt, setAlt] = useState3("");
+  const file = useRef4(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__ */ jsxs5("div", { className: "june-doc__form", role: "dialog", "aria-label": "Insert image", children: [
+    /* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: "Image" }),
+    /* @__PURE__ */ jsxs5(
+      "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__ */ jsx7(Icon, { name: "upload", size: 18 }),
+          /* @__PURE__ */ jsx7("span", { children: "Upload or drop an image" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "input",
+      {
+        ref: file,
+        type: "file",
+        accept: "image/*",
+        hidden: true,
+        onChange: (e) => fromFile(e.target.files?.[0])
+      }
+    ),
+    /* @__PURE__ */ jsx7("div", { className: "june-doc__or", children: "or" }),
+    /* @__PURE__ */ jsx7(
+      "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__ */ jsx7(
+      "input",
+      {
+        "aria-label": "Alternative text",
+        className: "june-doc__input",
+        placeholder: "Alt text (optional)",
+        value: alt,
+        onChange: (e) => setAlt(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-row june-doc__pop-row--end", children: [
+      /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn", onClick: close, children: "Cancel" }),
+      /* @__PURE__ */ jsx7("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] = useState3([0, 0]);
+  const N = 8;
+  return /* @__PURE__ */ jsxs5("div", { className: "june-doc__form", role: "dialog", "aria-label": "Insert table", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-title", children: [
+      "Table ",
+      hover[0] ? `${hover[0]} \xD7 ${hover[1]}` : ""
+    ] }),
+    /* @__PURE__ */ jsx7("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__ */ jsx7(
+        "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 = 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__ */ jsxs5("div", { className: "june-doc__ribbon", role: "toolbar", "aria-label": "Document formatting", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "june-doc__row", children: [
+      /* @__PURE__ */ jsxs5(Group, { label: "History", children: [
+        /* @__PURE__ */ jsx7(Btn, { label: "Undo", icon: "undo", disabled: off || !s?.canUndo, onClick: () => run()?.undo().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Redo", icon: "redo", disabled: off || !s?.canRedo, onClick: () => run()?.redo().run() })
+      ] }),
+      /* @__PURE__ */ jsxs5(Group, { label: "Format", children: [
+        /* @__PURE__ */ jsx7(Btn, { label: "Bold", icon: "bold", toggle: true, active: s?.bold, disabled: off, onClick: () => run()?.toggleBold().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Italic", icon: "italic", toggle: true, active: s?.italic, disabled: off, onClick: () => run()?.toggleItalic().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Underline", icon: "underline", toggle: true, active: s?.underline, disabled: off, onClick: () => run()?.toggleUnderline().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: s?.strike, disabled: off, onClick: () => run()?.toggleStrike().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Inline code", icon: "code", toggle: true, active: s?.code, disabled: off, onClick: () => run()?.toggleCode().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Superscript", icon: "superscript", toggle: true, active: s?.sup, disabled: off, onClick: () => run()?.toggleSuperscript().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Subscript", icon: "subscript", toggle: true, active: s?.sub, disabled: off, onClick: () => run()?.toggleSubscript().run() })
+      ] }),
+      /* @__PURE__ */ jsxs5(Group, { label: "Align", children: [
+        /* @__PURE__ */ jsx7(Btn, { label: "Align left", icon: "alignLeft", toggle: true, active: s?.left, disabled: off, onClick: () => run()?.setTextAlign("left").run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Align center", icon: "alignCenter", toggle: true, active: s?.center, disabled: off, onClick: () => run()?.setTextAlign("center").run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Align right", icon: "alignRight", toggle: true, active: s?.right, disabled: off, onClick: () => run()?.setTextAlign("right").run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Justify", icon: "alignJustify", toggle: true, active: s?.justify, disabled: off, onClick: () => run()?.setTextAlign("justify").run() })
+      ] }),
+      /* @__PURE__ */ jsxs5(Group, { label: "Lists", children: [
+        /* @__PURE__ */ jsx7(Btn, { label: "Bullet list", icon: "list", toggle: true, active: s?.bullet, disabled: off, onClick: () => run()?.toggleBulletList().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Numbered list", icon: "listOrdered", toggle: true, active: s?.ordered, disabled: off, onClick: () => run()?.toggleOrderedList().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Decrease indent", icon: "outdent", disabled: off || !s?.canLift, onClick: () => run()?.liftListItem("listItem").run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Increase indent", icon: "indent", disabled: off || !s?.canSink, onClick: () => run()?.sinkListItem("listItem").run() })
+      ] }),
+      /* @__PURE__ */ jsxs5(
+        "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__ */ jsx7(Icon, { name: expanded ? "chevronUp" : "chevronDown", size: 14 })
+          ]
+        }
+      )
+    ] }),
+    expanded ? /* @__PURE__ */ jsxs5("div", { className: "june-doc__row june-doc__row--secondary", children: [
+      /* @__PURE__ */ jsxs5(Group, { label: "Style", children: [
+        /* @__PURE__ */ jsx7(Field, { label: "Style", children: /* @__PURE__ */ jsxs5("select", { className: "june-doc__select", "aria-label": "Text style", disabled: off, value: style, onChange: (e) => setStyle(e.target.value), children: [
+          /* @__PURE__ */ jsx7("option", { value: "p", children: "Paragraph" }),
+          /* @__PURE__ */ jsx7("option", { value: "1", children: "Heading 1" }),
+          /* @__PURE__ */ jsx7("option", { value: "2", children: "Heading 2" }),
+          /* @__PURE__ */ jsx7("option", { value: "3", children: "Heading 3" }),
+          /* @__PURE__ */ jsx7("option", { value: "quote", children: "Quote" }),
+          /* @__PURE__ */ jsx7("option", { value: "code", children: "Code block" })
+        ] }) }),
+        /* @__PURE__ */ jsx7(Field, { label: "Font", children: /* @__PURE__ */ jsxs5(
+          "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__ */ jsx7("option", { value: f.value, style: { fontFamily: f.value || void 0 }, children: f.label }, f.label)),
+              !fontKnown && s?.fontFamily ? /* @__PURE__ */ jsx7("option", { value: s.fontFamily, children: s.fontFamily.split(",")[0].replace(/['"]/g, "") }) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx7(Field, { label: "Size", children: /* @__PURE__ */ jsxs5(
+          "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__ */ jsx7("option", { value: "", children: "Auto" }),
+              sizes.map((n) => /* @__PURE__ */ jsx7("option", { value: String(n), children: n }, n))
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx7(Btn, { label: "Show formatting marks", icon: "pilcrow", toggle: true, active: showMarks, onClick: onToggleMarks, text: true, className: "june-doc__btn--marks", children: /* @__PURE__ */ jsx7("span", { children: "Paragraph" }) }),
+      /* @__PURE__ */ jsxs5(Group, { label: "Document", children: [
+        /* @__PURE__ */ jsx7(Btn, { label: "Insert page break", icon: "pageBreak", disabled: off, onClick: () => run()?.setPageBreak().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Insert divider", icon: "divider", disabled: off, onClick: () => run()?.setHorizontalRule().run() }),
+        /* @__PURE__ */ jsx7(Btn, { label: layout === "page" ? "Switch to full-width layout" : "Switch to page layout", icon: "layout", toggle: true, active: layout === "fluid", onClick: onToggleLayout }),
+        /* @__PURE__ */ jsx7(Btn, { label: "Find and replace", icon: "search", toggle: true, active: findOpen, onClick: onToggleFind })
+      ] }),
+      /* @__PURE__ */ jsxs5(Group, { label: "Color", children: [
+        /* @__PURE__ */ jsx7(
+          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__ */ jsx7(
+          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__ */ jsxs5(Group, { label: "Insert", children: [
+        editor ? /* @__PURE__ */ jsx7(
+          Dropdown,
+          {
+            trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Link", icon: "link", toggle: true, active: s?.link || open, disabled: off, onClick: toggle }),
+            children: (close) => /* @__PURE__ */ jsx7(LinkPanel, { editor, href: s?.linkHref ?? "", isLink: !!s?.link, close })
+          }
+        ) : null,
+        editor ? /* @__PURE__ */ jsx7(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Insert image", icon: "image", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx7(ImagePanel, { editor, close, onNotice }) }) : null,
+        editor ? /* @__PURE__ */ jsx7(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Insert table", icon: "table", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx7(TablePanel, { editor, close }) }) : null
+      ] }),
+      /* @__PURE__ */ jsx7(Group, { label: "Actions", children: /* @__PURE__ */ jsx7(Btn, { label: "Clear formatting", icon: "eraser", disabled: off, onClick: () => run()?.unsetAllMarks().clearNodes().run() }) })
+    ] }) : null,
+    s?.inTable ? /* @__PURE__ */ jsx7("div", { className: "june-doc__row june-doc__row--context", children: /* @__PURE__ */ jsxs5(Group, { label: "Table", children: [
+      /* @__PURE__ */ jsx7(Btn, { label: "Add row below", disabled: off, onClick: () => run()?.addRowAfter().run(), children: "+ Row" }),
+      /* @__PURE__ */ jsx7(Btn, { label: "Add column right", disabled: off, onClick: () => run()?.addColumnAfter().run(), children: "+ Column" }),
+      /* @__PURE__ */ jsx7(Btn, { label: "Delete row", disabled: off, onClick: () => run()?.deleteRow().run(), children: "\u2212 Row" }),
+      /* @__PURE__ */ jsx7(Btn, { label: "Delete column", disabled: off, onClick: () => run()?.deleteColumn().run(), children: "\u2212 Column" }),
+      /* @__PURE__ */ jsx7(Btn, { label: "Merge cells", disabled: off || !s?.canMerge, onClick: () => run()?.mergeCells().run(), children: "Merge" }),
+      /* @__PURE__ */ jsx7(Btn, { label: "Split cell", disabled: off || !s?.canSplit, onClick: () => run()?.splitCell().run(), children: "Split" }),
+      /* @__PURE__ */ jsx7(Btn, { label: "Toggle header row", disabled: off, onClick: () => run()?.toggleHeaderRow().run(), children: "Header row" }),
+      /* @__PURE__ */ jsx7(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
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function DocumentBubbleMenu({ editor }) {
+  const s = useEditorState2({
+    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__ */ jsxs6(
+    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__ */ jsx8(Btn, { label: "Bold", icon: "bold", toggle: true, active: s.bold, onClick: () => run().toggleBold().run() }),
+        /* @__PURE__ */ jsx8(Btn, { label: "Italic", icon: "italic", toggle: true, active: s.italic, onClick: () => run().toggleItalic().run() }),
+        /* @__PURE__ */ jsx8(Btn, { label: "Underline", icon: "underline", toggle: true, active: s.underline, onClick: () => run().toggleUnderline().run() }),
+        /* @__PURE__ */ jsx8(Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: s.strike, onClick: () => run().toggleStrike().run() }),
+        /* @__PURE__ */ jsx8("span", { className: "june-doc__bubble-sep", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx8(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx8(Btn, { label: "Link", icon: "link", toggle: true, active: s.link || open, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx8(LinkPanel, { editor, href: s.linkHref, isLink: s.link, close }) }),
+        /* @__PURE__ */ jsx8(
+          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__ */ jsx8(
+          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__ */ jsx8("span", { className: "june-doc__bubble-sep", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx8(Btn, { label: "Clear formatting", icon: "eraser", onClick: () => run().unsetAllMarks().run() })
+      ]
+    }
+  );
+}
+
+// src/components/document-editor/document-content.tsx
+import { EditorContent } from "@tiptap/react";
+import { useEffect as useEffect4, useLayoutEffect, useRef as useRef5, useState as useState4 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var PAGE_WIDTH = 794;
+var PAGE_HEIGHT = 1123;
+var PAGE_GAP = 28;
+var CANVAS_PAD_X = 24;
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect4 : useLayoutEffect;
+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 = useRef5(null);
+  const sheet = useRef5(null);
+  const [avail, setAvail] = useState4(PAGE_WIDTH);
+  const [sheetH, setSheetH] = useState4(0);
+  const [pages, setPages] = useState4(1);
+  const metricsRef = useRef5(onMetrics);
+  metricsRef.current = onMetrics;
+  const last = useRef5({ 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();
+  }, []);
+  useEffect4(() => {
+    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]);
+  useEffect4(() => {
+    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__ */ jsx9("div", { ref: canvas, className: "june-doc__content june-doc__canvas", "data-layout": layout, "data-marks": showMarks || void 0, children: /* @__PURE__ */ jsx9("div", { className: "june-doc__zoomer", style: zoomerStyle, children: /* @__PURE__ */ jsxs7("div", { ref: sheet, className: "june-doc__sheet", style: sheetStyle, children: [
+    paged ? /* @__PURE__ */ jsx9("div", { className: "june-doc__pages", "aria-hidden": "true", children: Array.from({ length: pages }, (_, i) => /* @__PURE__ */ jsx9("div", { className: "june-doc__page", style: { top: i * stride, height: g.height }, children: /* @__PURE__ */ jsxs7("span", { className: "june-doc__page-num", children: [
+      i + 1,
+      " / ",
+      pages
+    ] }) }, i)) }) : null,
+    /* @__PURE__ */ jsx9(EditorContent, { editor })
+  ] }) }) });
+}
+
+// src/components/document-editor/document-findbar.tsx
+import { useEditorState as useEditorState3 } from "@tiptap/react";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function DocumentFindBar({ editor, editable, onClose, onNotice }) {
+  const [term, setTerm] = useState5(() => {
+    const { from, to, empty } = editor.state.selection;
+    return empty ? "" : editor.state.doc.textBetween(from, to, " ").slice(0, 100);
+  });
+  const [replacement, setReplacement] = useState5("");
+  const [caseSensitive, setCaseSensitive] = useState5(false);
+  const input = useRef6(null);
+  const info = useEditorState3({
+    editor,
+    selector: ({ editor: ed }) => {
+      const s = getSearchState(ed);
+      return { count: s?.matches.length ?? 0, current: s?.current ?? -1 };
+    }
+  });
+  useEffect5(() => {
+    input.current?.focus();
+    input.current?.select();
+  }, []);
+  useEffect5(() => {
+    setSearch(editor, { term, caseSensitive, current: 0 });
+  }, [editor, term, caseSensitive]);
+  useEffect5(() => () => {
+    if (!editor.isDestroyed) setSearch(editor, { term: "" });
+  }, [editor]);
+  const count = info?.count ?? 0;
+  const current = info?.current ?? -1;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: "june-doc__findbar",
+      role: "search",
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose();
+          editor.commands.focus();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs8("div", { className: "june-doc__find-field", children: [
+          /* @__PURE__ */ jsx10(Icon, { name: "search", size: 14 }),
+          /* @__PURE__ */ jsx10(
+            "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__ */ jsx10("span", { className: "june-doc__find-count", "aria-live": "polite", children: term ? count ? `${current + 1} of ${count}` : "No results" : "" })
+        ] }),
+        /* @__PURE__ */ jsx10("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__ */ jsx10(Icon, { name: "chevronUp" }) }),
+        /* @__PURE__ */ jsx10("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__ */ jsx10(Icon, { name: "chevronDown" }) }),
+        /* @__PURE__ */ jsx10(
+          "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__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx10("span", { className: "june-doc__find-sep", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx10(
+            "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__ */ jsx10("button", { type: "button", className: "june-doc__btn", disabled: !count, onClick: () => replaceCurrent(editor, replacement), children: "Replace" }),
+          /* @__PURE__ */ jsx10(
+            "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__ */ jsx10("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__ */ jsx10(Icon, { name: "close" }) })
+      ]
+    }
+  );
+}
+
+// src/components/document-editor/document-title.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function DocumentTitle({ value, disabled, onChange }) {
+  return /* @__PURE__ */ jsx11(
+    "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
+import { jsx as jsx12, jsxs as jsxs9 } from "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__ */ jsxs9("div", { className: "june-doc__header", children: [
+    fullscreen ? /* @__PURE__ */ jsx12("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__ */ jsx12(Icon, { name: "close", size: 18 }) }) : /* @__PURE__ */ jsx12("span", { className: "june-doc__doc-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(Icon, { name: "file", size: 16 }) }),
+    /* @__PURE__ */ jsx12(DocumentTitle, { value: title, disabled: !editable, onChange: onTitle }),
+    isDraft ? /* @__PURE__ */ jsxs9("span", { className: "june-doc__badge", children: [
+      /* @__PURE__ */ jsx12(Icon, { name: "sparkles", size: 12 }),
+      "AI draft"
+    ] }) : null,
+    /* @__PURE__ */ jsxs9("div", { className: "june-doc__header-actions", children: [
+      showSave ? /* @__PURE__ */ jsxs9(
+        "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__ */ jsx12(Icon, { name: saveState === "saved" ? "check" : "save" }),
+            /* @__PURE__ */ jsx12("span", { children: saveState === "saving" ? "Saving\u2026" : saveState === "saved" ? "Saved" : "Save" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx12(
+        Dropdown,
+        {
+          align: "end",
+          className: "june-doc__menu",
+          trigger: ({ open, toggle }) => /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              className: "june-doc__btn june-doc__btn--solid",
+              "aria-label": "Download",
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              onClick: toggle,
+              children: [
+                /* @__PURE__ */ jsx12("span", { children: "Download" }),
+                /* @__PURE__ */ jsx12(Icon, { name: "chevronDown", size: 14 })
+              ]
+            }
+          ),
+          children: (close) => /* @__PURE__ */ jsxs9("div", { role: "menu", "aria-label": "Download options", children: [
+            exportFormats.map((f) => {
+              const meta = FORMATS[f] ?? { label: f.toUpperCase(), hint: "", icon: "file" };
+              return /* @__PURE__ */ jsxs9(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  className: "june-doc__menu-item",
+                  onClick: () => {
+                    close();
+                    onExport(f);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx12(Icon, { name: meta.icon }),
+                    /* @__PURE__ */ jsx12("span", { className: "june-doc__menu-label", children: meta.label }),
+                    /* @__PURE__ */ jsx12("span", { className: "june-doc__menu-hint", children: meta.hint })
+                  ]
+                },
+                f
+              );
+            }),
+            exportFormats.length ? /* @__PURE__ */ jsx12("div", { className: "june-doc__menu-sep", role: "separator" }) : null,
+            /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "june-doc__menu-item",
+                "aria-label": "Copy document",
+                onClick: () => {
+                  close();
+                  onCopy();
+                },
+                children: [
+                  /* @__PURE__ */ jsx12(Icon, { name: "copy" }),
+                  /* @__PURE__ */ jsx12("span", { className: "june-doc__menu-label", children: "Copy to clipboard" })
+                ]
+              }
+            )
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "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__ */ jsx12(Icon, { name: "maximize" })
+        }
+      )
+    ] })
+  ] });
 }
 
 // src/components/document-editor/document-export.ts
 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
@@ -1114,7 +2680,7 @@ var textResult = (text, filename, mimeType) => ({
   blob: new Blob([text], { type: `${mimeType};charset=utf-8` })
 });
 var exportHtml = async (ctx) => {
-  const { docToHtml: docToHtml2 } = await import("./document-engine-C6ILFMRP.js");
+  const { docToHtml: docToHtml2 } = await import("./document-engine-RKD5SLXR.js");
   return textResult(
     buildHtmlDocument(ctx.title, docToHtml2(ctx.json)),
     `${ctx.basename}.html`,
@@ -1122,7 +2688,7 @@ var exportHtml = async (ctx) => {
   );
 };
 var exportMarkdown = async (ctx) => {
-  const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-C6ILFMRP.js");
+  const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-RKD5SLXR.js");
   return textResult(
     `# ${ctx.title}
 
@@ -1133,12 +2699,39 @@ ${docToMarkdown2(ctx.json)}
   );
 };
 var exportTxt = async (ctx) => {
-  const { docToText } = await import("./document-engine-C6ILFMRP.js");
+  const { docToText } = await import("./document-engine-RKD5SLXR.js");
   return textResult(`${ctx.title}
 
 ${docToText(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) {
@@ -1152,14 +2745,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);
@@ -1228,555 +2828,257 @@ 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));
-    }
+        ],
+        spacing: { after: 120 }
+      })
+    ];
   }
-  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 import("./document-engine-C6ILFMRP.js");
-  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 } = await import("./document-engine-C6ILFMRP.js");
-  const html = docToHtml2(doc.json);
-  const text = `${doc.title}
-
-${docToText(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-merge.ts
-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 };
-}
-
-// src/components/document-editor/document-store.ts
-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();
-    }
-  };
+  return out;
 }
-var defaultStore = null;
-function getDefaultDocumentStore() {
-  if (!defaultStore) defaultStore = createDocumentStore();
-  return defaultStore;
+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;
+  });
 }
-
-// src/components/document-editor/document-title.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function DocumentTitle({ value, disabled, onChange }) {
-  return /* @__PURE__ */ jsx6(
-    "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
-import { useEditorState } from "@tiptap/react";
-import { useState as useState2 } from "react";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "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__ */ jsx7(
-    "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] = useState2(false);
-  const [linkValue, setLinkValue] = useState2("");
-  const s = 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__ */ jsxs3("div", { className: "june-doc__toolbar", role: "toolbar", "aria-label": "Document formatting", children: [
-    editable ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsxs3("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ jsx7(Btn, { label: "Undo", disabled: off || !s?.canUndo, onClick: () => run()?.undo().run(), children: "\u21B6" }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Redo", disabled: off || !s?.canRedo, onClick: () => run()?.redo().run(), children: "\u21B7" })
-      ] }),
-      /* @__PURE__ */ jsx7("div", { className: "june-doc__group", children: /* @__PURE__ */ jsxs3(
-        "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__ */ jsx7("option", { value: "p", children: "Paragraph" }),
-            /* @__PURE__ */ jsx7("option", { value: "1", children: "Heading 1" }),
-            /* @__PURE__ */ jsx7("option", { value: "2", children: "Heading 2" }),
-            /* @__PURE__ */ jsx7("option", { value: "3", children: "Heading 3" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs3("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ jsx7(Btn, { label: "Bold", toggle: true, active: s?.bold, disabled: off, onClick: () => run()?.toggleBold().run(), children: /* @__PURE__ */ jsx7("b", { children: "B" }) }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Italic", toggle: true, active: s?.italic, disabled: off, onClick: () => run()?.toggleItalic().run(), children: /* @__PURE__ */ jsx7("i", { children: "I" }) }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Underline", toggle: true, active: s?.underline, disabled: off, onClick: () => run()?.toggleUnderline().run(), children: /* @__PURE__ */ jsx7("u", { children: "U" }) }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Strikethrough", toggle: true, active: s?.strike, disabled: off, onClick: () => run()?.toggleStrike().run(), children: /* @__PURE__ */ jsx7("s", { children: "S" }) })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ jsx7(Btn, { label: "Bullet list", toggle: true, active: s?.bullet, disabled: off, onClick: () => run()?.toggleBulletList().run(), children: "\u2022 List" }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Numbered list", toggle: true, active: s?.ordered, disabled: off, onClick: () => run()?.toggleOrderedList().run(), children: "1. List" }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Blockquote", toggle: true, active: s?.quote, disabled: off, onClick: () => run()?.toggleBlockquote().run(), children: "Quote" }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Link", toggle: true, active: s?.link, disabled: off, onClick: openLink, children: "Link" })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ jsx7(Btn, { label: "Align left", toggle: true, active: s?.left, disabled: off, onClick: () => run()?.setTextAlign("left").run(), children: "L" }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Align center", toggle: true, active: s?.center, disabled: off, onClick: () => run()?.setTextAlign("center").run(), children: "C" }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Align right", toggle: true, active: s?.right, disabled: off, onClick: () => run()?.setTextAlign("right").run(), children: "R" }),
-        /* @__PURE__ */ jsx7(Btn, { label: "Justify", toggle: true, active: s?.justify, disabled: off, onClick: () => run()?.setTextAlign("justify").run(), children: "J" })
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "june-doc__group", children: [
-        /* @__PURE__ */ jsx7(Btn, { label: "Insert table", disabled: off, onClick: () => run()?.insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), children: "Table" }),
-        s?.inTable ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
-          /* @__PURE__ */ jsx7(Btn, { label: "Add row below", disabled: off, onClick: () => run()?.addRowAfter().run(), children: "+Row" }),
-          /* @__PURE__ */ jsx7(Btn, { label: "Add column right", disabled: off, onClick: () => run()?.addColumnAfter().run(), children: "+Col" }),
-          /* @__PURE__ */ jsx7(Btn, { label: "Delete row", disabled: off, onClick: () => run()?.deleteRow().run(), children: "\u2212Row" }),
-          /* @__PURE__ */ jsx7(Btn, { label: "Delete column", disabled: off, onClick: () => run()?.deleteColumn().run(), children: "\u2212Col" }),
-          /* @__PURE__ */ jsx7(Btn, { label: "Delete table", disabled: off, onClick: () => run()?.deleteTable().run(), children: "Del table" })
-        ] }) : null
-      ] })
-    ] }) : null,
-    /* @__PURE__ */ jsxs3("div", { className: "june-doc__group june-doc__group--end", children: [
-      /* @__PURE__ */ jsx7(Btn, { label: "Copy document", onClick: onCopy, children: "Copy" }),
-      exportFormats.length > 0 ? /* @__PURE__ */ jsxs3(
-        "select",
-        {
-          className: "june-doc__select",
-          "aria-label": "Export document",
-          value: "",
-          onChange: (e) => e.target.value && onExport(e.target.value),
-          children: [
-            /* @__PURE__ */ jsx7("option", { value: "", children: "Export\u2026" }),
-            exportFormats.map((f) => /* @__PURE__ */ jsx7("option", { value: f, children: FORMAT_LABELS[f] ?? f }, f))
-          ]
-        }
-      ) : null,
-      canSave ? /* @__PURE__ */ jsx7(Btn, { label: "Save", disabled: saveState === "saving" || saveState === "saved" || saveState === "idle", onClick: onSave, children: "Save" }) : null
-    ] }),
-    linkOpen ? /* @__PURE__ */ jsxs3("div", { className: "june-doc__linkbar", children: [
-      /* @__PURE__ */ jsx7(
-        "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__ */ jsx7("button", { type: "button", className: "june-doc__btn", onClick: applyLink, children: "Apply" }),
-      s?.link ? /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn", onClick: removeLink, children: "Remove" }) : null,
-      /* @__PURE__ */ jsx7("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 import("./document-engine-RKD5SLXR.js");
+  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 } = await import("./document-engine-RKD5SLXR.js");
+  const html = docToHtml2(doc.json);
+  const text = `${doc.title}
+
+${docToText(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-types.ts
@@ -1789,7 +3091,7 @@ var ALL_EXPORT_FORMATS = [
 ];
 
 // src/components/document-editor/document-editor.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var snapshotOf = (r) => ({
   documentId: r.id,
   title: r.title,
@@ -1804,6 +3106,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,
@@ -1818,7 +3122,7 @@ function DocumentEditorImpl(props) {
   } = props;
   const ctxOptions = useDocumentOptions();
   const options = useMemo4(() => ({ ...ctxOptions, ...props.options }), [ctxOptions, props.options]);
-  const optionsRef = useRef3(options);
+  const optionsRef = useRef7(options);
   optionsRef.current = options;
   const store = useMemo4(() => options.store ?? getDefaultDocumentStore(), [options.store]);
   const instanceId = useId();
@@ -1833,22 +3137,37 @@ function DocumentEditorImpl(props) {
       return { json: null, error: toJuneError(e, "DOCUMENT_ERROR") };
     }
   }, [contentKey]);
-  useEffect2(() => {
+  useEffect6(() => {
     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] = useState3("idle");
-  const [notice, setNotice] = useState3(null);
-  const lastSavedKey = useRef3("");
-  const seenRevision = useRef3(store.get(documentId)?.revision ?? 0);
-  const readyRef = useRef3(false);
+  const [saveState, setSaveState] = useState6("idle");
+  const [notice, setNotice] = useState6(null);
+  const [fullscreen, setFullscreen] = useState6(false);
+  const [expanded, setExpanded] = useState6(true);
+  const [showMarks, setShowMarks] = useState6(false);
+  const [layout, setLayout] = useState6("page");
+  const [findOpen, setFindOpen] = useState6(false);
+  const [zoom, setZoom] = useState6(1);
+  const [metrics, setMetrics] = useState6({ page: 1, pages: 1 });
+  useEffect6(() => {
+    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 = useRef7("");
+  const seenRevision = useRef7(store.get(documentId)?.revision ?? 0);
+  const readyRef = useRef7(false);
   const flash = useCallback3((message) => {
     setNotice(message);
   }, []);
-  useEffect2(() => {
+  useEffect6(() => {
     if (!notice) return;
     const t = setTimeout(() => setNotice(null), 3e3);
     return () => clearTimeout(t);
@@ -1860,18 +3179,23 @@ function DocumentEditorImpl(props) {
     },
     [store, documentId]
   );
-  const saveRef = useRef3(async () => {
+  const saveRef = useRef7(async () => {
   });
   const autosave = useMemo4(() => {
     const delay = options.autosaveDelay ?? 1500;
     return delay > 0 ? debounce(() => void saveRef.current(), delay) : null;
   }, [options.autosaveDelay]);
-  useEffect2(() => () => autosave?.flush(), [autosave]);
+  useEffect6(() => () => 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;
@@ -1892,14 +3216,25 @@ function DocumentEditorImpl(props) {
       optionsRef.current.onError?.(toJuneError(error, "DOCUMENT_ERROR", "Saving the document failed"));
     }
   };
-  const markDirty = useCallback3(() => {
-    if (!optionsRef.current.onSave) return;
-    setSaveState("dirty");
-    autosave?.();
-  }, [autosave]);
-  const [initialJson] = useState3(() => store.get(documentId)?.json ?? parsed.json ?? emptyDoc());
+  const markDirty = useCallback3(
+    (userEdit = true) => {
+      if (!optionsRef.current.onSave) {
+        if (userEdit) setSaveState("dirty");
+        return;
+      }
+      setSaveState("dirty");
+      autosave?.();
+    },
+    [autosave]
+  );
+  useEffect6(() => {
+    if (saveState !== "saved" || options.onSave) return;
+    const t = setTimeout(() => setSaveState((s) => s === "saved" ? "idle" : s), 2500);
+    return () => clearTimeout(t);
+  }, [saveState, options.onSave]);
+  const [initialJson] = useState6(() => store.get(documentId)?.json ?? parsed.json ?? emptyDoc());
   const extensions = useMemo4(() => createDocumentExtensions(), []);
-  const onUpdateRef = useRef3(() => {
+  const onUpdateRef = useRef7(() => {
   });
   onUpdateRef.current = (json) => {
     store.edit(documentId, json, instanceId);
@@ -1921,11 +3256,13 @@ function DocumentEditorImpl(props) {
     },
     onUpdate: ({ editor: ed }) => onUpdateRef.current(ed.getJSON())
   });
-  useEffect2(() => {
-    editor?.setEditable(editable);
+  useEffect6(() => {
+    if (!editor || editor.isEditable === editable) return;
+    editor.setEditable(editable);
   }, [editor, editable]);
-  useEffect2(() => {
+  useEffect6(() => {
     if (!parsed.json) return;
+    if (isDocumentEcho(store, documentId, contentKey)) return;
     const outcome = store.receive({
       id: documentId,
       title: titleProp,
@@ -1935,7 +3272,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?.({
@@ -1945,7 +3282,7 @@ function DocumentEditorImpl(props) {
       });
     }
   }, [store, documentId, titleProp, parsed.json, documentType, status, emitChange, markDirty]);
-  useEffect2(() => {
+  useEffect6(() => {
     if (!editor) return;
     const apply = () => {
       const record = store.get(documentId);
@@ -1962,7 +3299,7 @@ function DocumentEditorImpl(props) {
     apply();
     return store.subscribe(apply);
   }, [editor, store, documentId, instanceId]);
-  useEffect2(() => {
+  useEffect6(() => {
     if (!editor || readyRef.current) return;
     const record = store.get(documentId);
     if (!record) return;
@@ -2006,67 +3343,115 @@ function DocumentEditorImpl(props) {
   };
   const formats = (exportFormats ?? [...ALL_EXPORT_FORMATS]).filter((f) => listDocumentExporters().includes(f));
   if (parsed.error && !store.get(documentId)) {
-    return /* @__PURE__ */ jsxs4("div", { className: "june-doc june-doc--error", "data-theme": resolvedTheme, role: "alert", children: [
-      /* @__PURE__ */ jsx8("p", { className: "june-doc__draft-text", children: "This document could not be displayed." }),
-      /* @__PURE__ */ jsxs4("details", { children: [
-        /* @__PURE__ */ jsx8("summary", { children: "Show raw content" }),
-        /* @__PURE__ */ jsx8("pre", { className: "june-doc__raw", children: contentKey })
+    return /* @__PURE__ */ jsxs10("div", { className: "june-doc june-doc--error", "data-theme": resolvedTheme, role: "alert", children: [
+      /* @__PURE__ */ jsx13("p", { className: "june-doc__draft-text", children: "This document could not be displayed." }),
+      /* @__PURE__ */ jsxs10("details", { children: [
+        /* @__PURE__ */ jsx13("summary", { children: "Show raw content" }),
+        /* @__PURE__ */ jsx13("pre", { className: "june-doc__raw", children: contentKey })
       ] })
     ] });
   }
-  if (!editor) return /* @__PURE__ */ jsx8(DocumentDraft, { title, state: "loading" });
+  if (!editor) return /* @__PURE__ */ jsx13(DocumentDraft, { title, state: "loading" });
   const isDraft = recordStatus === "draft";
-  return /* @__PURE__ */ jsxs4(
+  const classes = ["june-doc", fullscreen ? "june-doc--fullscreen" : "", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs10(
     "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__ */ jsxs4("div", { className: "june-doc__header", children: [
-          /* @__PURE__ */ jsx8(DocumentTitle, { value: title, disabled: !editable, onChange: handleTitle }),
-          isDraft ? /* @__PURE__ */ jsx8("span", { className: "june-doc__badge", children: "AI draft" }) : null
-        ] }),
-        pending ? /* @__PURE__ */ jsxs4("div", { className: "june-doc__banner", role: "status", children: [
-          /* @__PURE__ */ jsxs4("span", { children: [
+        /* @__PURE__ */ jsx13(
+          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__ */ jsxs10("div", { className: "june-doc__banner", role: "status", children: [
+          /* @__PURE__ */ jsxs10("span", { children: [
             "The assistant suggested changes that overlap your edits (",
             pending.conflicts,
             " ",
             pending.conflicts === 1 ? "section" : "sections",
             ")."
           ] }),
-          /* @__PURE__ */ jsxs4("span", { className: "june-doc__banner-actions", children: [
-            /* @__PURE__ */ jsx8("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("merge"), children: "Merge, keep my edits" }),
-            /* @__PURE__ */ jsx8("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("replace"), children: "Use AI version" }),
-            /* @__PURE__ */ jsx8("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("keep"), children: "Keep mine" })
+          /* @__PURE__ */ jsxs10("span", { className: "june-doc__banner-actions", children: [
+            /* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("merge"), children: "Merge, keep my edits" }),
+            /* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("replace"), children: "Use AI version" }),
+            /* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("keep"), children: "Keep mine" })
           ] })
         ] }) : null,
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx13(
           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__ */ jsx8(DocumentContent, { editor }),
-        /* @__PURE__ */ jsxs4("div", { className: "june-doc__footer", "aria-live": "polite", children: [
-          /* @__PURE__ */ jsxs4("span", { children: [
-            words,
-            " words"
+        findOpen ? /* @__PURE__ */ jsx13(DocumentFindBar, { editor, editable, onClose: () => setFindOpen(false), onNotice: flash }) : null,
+        editable ? /* @__PURE__ */ jsx13(DocumentBubbleMenu, { editor }) : null,
+        /* @__PURE__ */ jsx13(DocumentContent, { editor, layout, zoom, showMarks, onMetrics: setMetrics }),
+        /* @__PURE__ */ jsxs10("div", { className: "june-doc__footer", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "june-doc__stats", children: [
+            layout === "page" ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+              /* @__PURE__ */ jsxs10("span", { children: [
+                "Page ",
+                metrics.page,
+                " of ",
+                metrics.pages
+              ] }),
+              /* @__PURE__ */ jsx13("span", { className: "june-doc__stats-sep", "aria-hidden": "true" })
+            ] }) : null,
+            /* @__PURE__ */ jsxs10("span", { children: [
+              words,
+              " words"
+            ] })
           ] }),
-          /* @__PURE__ */ jsx8("span", { children: notice ?? SAVE_LABEL[saveState] })
+          /* @__PURE__ */ jsx13("span", { className: "june-doc__status", "aria-live": "polite", "data-state": notice ? "notice" : saveState, children: notice ?? SAVE_LABEL[saveState] }),
+          /* @__PURE__ */ jsxs10("div", { className: "june-doc__zoom", role: "group", "aria-label": "Zoom", children: [
+            /* @__PURE__ */ jsx13("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__ */ jsx13(Icon, { name: "minus", size: 14 }) }),
+            /* @__PURE__ */ jsxs10("button", { type: "button", className: "june-doc__zoom-value", "aria-label": "Reset zoom", title: "Reset zoom", onClick: () => setZoom(1), children: [
+              Math.round(zoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx13("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__ */ jsx13(Icon, { name: "plus", size: 14 }) })
+          ] })
         ] })
       ]
     }
@@ -2074,7 +3459,7 @@ function DocumentEditorImpl(props) {
 }
 
 // src/components/document-editor/document-component.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var DOCUMENT_COMPONENT_DESCRIPTION = 'Custom component. An editable document. DocumentEditor(documentId, title, content, documentType?, status?, editable?, exportFormats?). Place it in the root container (Card or Stack). "content" is the full document body as one Markdown string. Reuse documentId when revising the same document. Use it only when the user asks to create or revise a document.';
 var documentProps = z.object({
   documentId: z.string().describe("Stable id. Reuse it when revising the same document."),
@@ -2088,12 +3473,12 @@ var documentProps = z.object({
 function DocumentEditor(props) {
   const { isStreaming } = useJuneRuntime();
   if (props.generating || isStreaming) {
-    return /* @__PURE__ */ jsx9(DocumentDraft, { title: props.title, state: "drafting" });
+    return /* @__PURE__ */ jsx14(DocumentDraft, { title: props.title, state: "drafting" });
   }
-  return /* @__PURE__ */ jsx9(DocumentEditorImpl, { ...props });
+  return /* @__PURE__ */ jsx14(DocumentEditorImpl, { ...props });
 }
 function OpenUIDocument({ props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx14(
     DocumentEditor,
     {
       documentId: props.documentId,
@@ -2113,11 +3498,15 @@ var JuneDocumentEditorComponent = defineComponent2({
   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
@@ -2164,7 +3553,7 @@ function documentPromptOptions(options = {}) {
 var attr = (value) => value.replace(/"/g, "&quot;");
 async function serializeDocumentsForAgent(options = {}) {
   const store = options.store ?? getDefaultDocumentStore();
-  const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-C6ILFMRP.js");
+  const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-RKD5SLXR.js");
   return store.list().filter((r) => !options.ids || options.ids.includes(r.id)).map(
     (r) => `<document id="${attr(r.id)}" title="${attr(r.title)}"${r.documentType ? ` type="${attr(r.documentType)}"` : ""}>
 ${docToMarkdown2(r.json)}
@@ -2177,9 +3566,9 @@ import { openuiLibrary } from "@openuidev/react-ui";
 var juneLibrary = withDocumentEditor(openuiLibrary);
 
 // src/core/JuneUI.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function JuneUI({ library = juneLibrary, ...props }) {
-  return /* @__PURE__ */ jsx10(JuneRenderer, { library, ...props });
+  return /* @__PURE__ */ jsx15(JuneRenderer, { library, ...props });
 }
 export {
   ALL_EXPORT_FORMATS,
@@ -2208,17 +3597,21 @@ export {
   getDefaultDocumentStore,
   getDocumentEditorInstructions,
   getDocumentEditorRules,
+  isDocumentEcho,
   isJuneError,
   jsonFieldExtractor,
   juneLibrary,
   lightTheme,
   listDocumentExporters,
   mergeDocuments,
+  readDocumentFromProgram,
   registerDocumentExporter,
+  rememberDocumentEcho,
   runAction,
   serializeDocumentsForAgent,
   sseToText,
   toJuneError,
+  updateDocumentInProgram,
   useDocumentOptions,
   useJuneRuntime,
   useJuneStream,