@w100n/documents 0.12.1 → 0.14.0

package/dist/{TextEditor-SPEVB5HX.js → TextEditor-VBHWUOZR.js}

@@ -4,11 +4,12 @@ import {
 } from "./chunk-QDH7EZAF.js";
 import {
   useLive
-} from "./chunk-5NT5ALOF.js";
+} from "./chunk-RCQODE2Z.js";
 import {
   a4,
   align,
   changes,
+  cleanPaste,
   clear,
   decide,
   entries,
@@ -19,10 +20,13 @@ import {
   locate,
   notes,
   paging,
+  replace,
+  searching,
+  spacing,
   suggesting,
   toMarkdown,
   track
-} from "./chunk-UWASFTDF.js";
+} from "./chunk-5MH4WDW4.js";
 import {
   rove,
   useRestore
@@ -30,7 +34,7 @@ import {
 import {
   readDocx,
   writeDocx
-} from "./chunk-BKUFGMEA.js";
+} from "./chunk-DR3TTJWZ.js";
 import "./chunk-ISOOUYLI.js";
 
 // src/editor/TextEditor.tsx
@@ -47,8 +51,9 @@ import {
   BetweenVerticalStart,
   Bold,
   Check,
-  CheckCheck,
   ChevronDown,
+  ChevronUp,
+  CloudAlert,
   Code,
   FilePenLine,
   Highlighter,
@@ -62,29 +67,36 @@ import {
   ListIndentIncrease,
   ListOrdered,
   ListTree,
-  Maximize2,
+  Grid3x3,
+  Image,
   MessageSquarePlus,
   MessagesSquare,
-  Minus,
-  MoveHorizontal,
+  PaintBucket,
+  PaintRoller,
+  Search,
+  PanelLeft,
+  PanelRight,
+  Ruler,
   PanelTop,
   Pencil,
   Plus,
+  Minus,
   Redo2,
   RemoveFormatting,
   Reply,
   RotateCcw,
   Save,
-  SeparatorHorizontal,
   Strikethrough,
   Table,
+  Subscript,
+  Superscript,
   TableCellsMerge,
   TableColumnsSplit,
-  TableOfContents,
   TableRowsSplit,
   Trash2,
   Underline,
   Undo2,
+  UnfoldVertical,
   WifiOff,
   X
 } from "lucide-react";
@@ -143,10 +155,14 @@ function DocxView({ bytes, onOutline, failed }) {
 
 // src/editor/TextEditor.tsx
 import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var legal = { width: 816, height: 1344 };
+var cm = (px) => Math.round(px / 96 * 254) / 100;
 var inks = ["#0f172a", "#475569", "#dc2626", "#ea580c", "#ca8a04", "#16a34a", "#0891b2", "#2563eb", "#7c3aed", "#db2777"];
 var glows = ["#fef08a", "#bbf7d0", "#bfdbfe", "#fbcfe8", "#fed7aa", "#ddd6fe"];
+var faces = ["Arial", "Calibri", "Cambria", "Courier New", "Georgia", "Inter", "Roboto", "Times New Roman", "Verdana"];
+var sizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
 var uid = () => Math.random().toString(36).slice(2, 10);
-function TextEditor({ kind, bytes, t, language, rights, host, together, documentId, onSaved, onOutline, onPanel, slot, guard }) {
+function TextEditor({ kind, bytes, t, language, rights, host, together, documentId, onSaved, onOutline, onReading, onPanel, slot, head, file, guard }) {
   const docx = kind === "docx";
   const can = { edit: !!host?.save && !!rights?.edit, comment: !!host?.comment && !!rights && (rights.comment || rights.edit) };
   const source = useLoad(async () => {
@@ -160,8 +176,9 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
   const baseline = useRef2(null);
   const anchors = useRef2(/* @__PURE__ */ new Map());
   const scroller = useRef2(null);
-  const [tab, setTab] = useState2(can.edit ? "home" : can.comment ? "review" : "view");
+  const root = useRef2(null);
   const [pop, setPop] = useState2(null);
+  const [more, setMore] = useState2(() => typeof localStorage !== "undefined" && localStorage.getItem("w100n-docs-more") === "1");
   const [zoom, setZoom] = useState2(null);
   const [layout, setLayout] = useState2(null);
   const [room, setRoom] = useState2(0);
@@ -178,6 +195,14 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
   const [editing, setEditing] = useState2(null);
   const [dropping, setDropping] = useState2(null);
   const [failed, setFailed] = useState2(false);
+  const [paint, setPaint] = useState2(null);
+  const [query, setQuery] = useState2("");
+  const [swap, setSwap] = useState2("");
+  const [matchCase, setMatchCase] = useState2(false);
+  const [count, setCount] = useState2({ words: 0, pages: 0 });
+  const [marg, setMarg] = useState2(null);
+  const [unsetup, setUnsetup] = useState2(false);
+  const [draft2, setDraft2] = useState2(null);
   useRestore(pop !== null);
   useRestore(editing !== null);
   useRestore(dropping !== null);
@@ -187,7 +212,7 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
     editable: can.edit && (!live || !!shared),
     immediatelyRender: true,
     shouldRerenderOnTransaction: false,
-    editorProps: { attributes: { class: "w100n-docs-prose w100n-text-body", "aria-label": t.documentText } },
+    editorProps: { attributes: { class: "w100n-docs-prose w100n-text-body", "aria-label": t.documentText }, transformPastedHTML: cleanPaste },
     onCreate: ({ editor: made }) => {
       if (source.data && !live) baseline.current = { bytes, doc: made.state.doc, base: source.data.md && track(source.data.md, made.state.doc) };
     }
@@ -213,6 +238,15 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
         link: e.isActive("link"),
         color: e.getAttributes("textStyle").color ?? null,
         glow: e.isActive("highlight"),
+        font: e.getAttributes("textStyle").fontFamily ?? null,
+        size: e.getAttributes("textStyle").fontSize ?? null,
+        fill: e.getAttributes("tableCell").background ?? e.getAttributes("tableHeader").background ?? null,
+        bare: e.getAttributes("table").borders === "none",
+        sup: e.isActive("superscript"),
+        sub: e.isActive("subscript"),
+        img: e.isActive("image") ? e.getAttributes("image").wrap ?? "inline" : null,
+        line: block.attrs.line ?? null,
+        after: block.attrs.after ?? null,
         undo: e.can().undo(),
         redo: e.can().redo(),
         empty,
@@ -223,6 +257,7 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
           });
           return at;
         })(),
+        find: (({ at, hits }) => `${at}/${hits.length}`)(searching.getState(e.state)),
         suggest: !!suggesting.getState(e.state)?.on,
         revs: docx ? changes(e.state.doc) : [],
         dirty: !!baseline.current && !e.state.doc.eq(baseline.current.doc)
@@ -230,9 +265,43 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
     }
   });
   const page = layout ?? source.data?.page ?? a4;
+  const print = () => {
+    if (!editor) return;
+    const frame = document.createElement("iframe");
+    frame.style.cssText = "position:fixed;width:0;height:0;border:0;opacity:0";
+    document.body.append(frame);
+    const [mt, mr, mb, ml] = page.margins;
+    const size = docx ? `${page.width}px ${page.height}px` : "A4";
+    frame.contentDocument.open();
+    frame.contentDocument.write(`<!DOCTYPE html><html><head><meta charset="utf-8"><title>${editor.state.doc.firstChild?.textContent.slice(0, 80).replace(/[<&]/g, "") ?? ""}</title><style>
+@page { size: ${size}; margin: ${docx ? `${mt}px ${mr}px ${mb}px ${ml}px` : "20mm"}; }
+body { margin: 0; font: 11pt/1.5 Arial, sans-serif; color: #111; }
+h1 { font-size: 20pt; } h2 { font-size: 15pt; } h3 { font-size: 13pt; }
+table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #94a3b8; padding: 4px 6px; vertical-align: top; } table[data-borders='none'] td, table[data-borders='none'] th { border-color: transparent; }
+img { max-width: 100%; } img[data-wrap='left'] { float: left; margin: 0 12pt 6pt 0; } img[data-wrap='right'] { float: right; margin: 0 0 6pt 12pt; }
+[data-type='page-break'], .page-break { break-after: page; height: 0; overflow: hidden; }
+</style></head><body>${editor.getHTML()}</body></html>`);
+    frame.contentDocument.close();
+    frame.contentWindow.focus();
+    frame.contentWindow.print();
+    setTimeout(() => frame.remove(), 1e3);
+  };
+  const marginal = marg ?? (source.data && "marginal" in source.data ? source.data.marginal : null) ?? { header: "", footer: "", numbers: false };
+  useEffect(() => {
+    if (editor && docx && source.data) editor.view.dispatch(editor.state.tr.setMeta(paging, { page, marks: { header: marginal.header, footer: marginal.footer } }));
+  }, [editor, source.data, page, marginal.header, marginal.footer]);
   useEffect(() => {
-    if (editor && docx && source.data) editor.view.dispatch(editor.state.tr.setMeta(paging, { page }));
-  }, [editor, source.data, page]);
+    if (!shared || !docx) return;
+    const map = shared.doc.getMap("setup");
+    const sync = () => {
+      const v = map.toJSON();
+      if (v.page) setLayout(v.page);
+      if (v.header !== void 0 || v.footer !== void 0 || v.numbers !== void 0) setMarg({ header: v.header ?? "", footer: v.footer ?? "", numbers: !!v.numbers });
+    };
+    sync();
+    map.observe(sync);
+    return () => map.unobserve(sync);
+  }, [shared, docx]);
   const loaded = useLoad((signal) => host?.comments ? host.comments(documentId, { signal }) : Promise.resolve([]), [host, documentId]);
   const all = [...loaded.data ?? [], ...added].flatMap((c) => c.id in changed ? changed[c.id] ?? [] : [c]).filter((c) => !c.replyTo || changed[c.replyTo] !== null);
   const open = all.filter((c) => !c.replyTo && !c.resolved);
@@ -242,8 +311,8 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
     if (!editor || !source.data) return;
     const have = new Map(notes.getState(editor.state).spots.map((s) => [s.id, s]));
     const fresh = open.filter((c) => !have.has(c.id));
-    const found = locate(editor.state.doc, fresh.map((c) => ({ id: c.id, quote: c.quote, anchor: anchors.current.get(c.id) })));
-    editor.view.dispatch(editor.state.tr.setMeta(notes, { spots: [...open.flatMap((c) => have.get(c.id) ?? []), ...found] }));
+    const found2 = locate(editor.state.doc, fresh.map((c) => ({ id: c.id, quote: c.quote, anchor: anchors.current.get(c.id) })));
+    editor.view.dispatch(editor.state.tr.setMeta(notes, { spots: [...open.flatMap((c) => have.get(c.id) ?? []), ...found2] }));
   }, [editor, source.data, openIds]);
   useEffect(() => {
     if (editor && source.data) editor.view.dispatch(editor.state.tr.setMeta(notes, { active }));
@@ -261,6 +330,8 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
           editor.commands.setTextSelection(offset + 1);
         } });
       });
+      const text = editor.state.doc.textBetween(0, editor.state.doc.content.size, " ", " ");
+      setCount({ words: (text.match(/[\p{L}\p{N}]+(?:['’-][\p{L}\p{N}]+)*/gu) ?? []).length, pages: scroller.current?.querySelectorAll(".w100n-text-gap").length ?? 0 });
       const key = JSON.stringify(list.map((h) => [h.id, h.level, h.text]));
       if (key === last2) return;
       last2 = key;
@@ -277,7 +348,35 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
       editor.off("update", later);
     };
   }, [editor, source.data, onOutline]);
-  const dirty = live ? live.pending : !!state?.dirty;
+  useEffect(() => {
+    const el = scroller.current;
+    if (!el || !editor || !onReading) return;
+    let frame = 0;
+    let last2 = "";
+    const look = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const line = el.getBoundingClientRect().top + el.clientHeight / 3;
+        let id = null;
+        editor.state.doc.forEach((node, offset) => {
+          const dom = node.type.name === "heading" && node.textContent.trim() ? editor.view.nodeDOM(offset) : null;
+          if (dom && dom.getBoundingClientRect().top <= line) id = `h${offset}`;
+        });
+        const room2 = el.scrollHeight - el.clientHeight;
+        const progress = room2 > 0 ? Math.round(el.scrollTop / room2 * 100) / 100 : 1;
+        if (`${id}:${progress}` === last2) return;
+        last2 = `${id}:${progress}`;
+        onReading({ documentId, id, progress });
+      });
+    };
+    look();
+    el.addEventListener("scroll", look, { passive: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      el.removeEventListener("scroll", look);
+    };
+  }, [editor, source.data, onReading, documentId]);
+  const dirty = live ? live.pending : !!state?.dirty || unsetup;
   const unsent = live ? live.unsynced && can.edit : dirty;
   useEffect(() => {
     if (!guard || live || !dirty || !source.data || !editor) return;
@@ -286,6 +385,11 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
       guard.current = null;
     };
   });
+  useEffect(() => {
+    if (live || !dirty || !can.edit || saving === "busy" || !editor) return;
+    const timer = window.setTimeout(() => void save(true), 3e3);
+    return () => clearTimeout(timer);
+  });
   useEffect(() => {
     if (!unsent) return;
     const stop = (e) => e.preventDefault();
@@ -299,6 +403,30 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
     watch.observe(el);
     return () => watch.disconnect();
   }, [editor, source.data]);
+  useEffect(() => {
+    const el = root.current;
+    if (!el) return;
+    const open2 = () => {
+      setPop("find");
+      el.querySelector(".w100n-text-find input")?.focus();
+    };
+    el.addEventListener("docs-find", open2);
+    return () => el.removeEventListener("docs-find", open2);
+  }, [editor, source.data]);
+  useEffect(() => {
+    const shown = pop === "find" ? query : "";
+    if (editor && searching.getState(editor.state).query !== shown) editor.view.dispatch(editor.state.tr.setMeta(searching, { query: shown }));
+  }, [editor, pop, query]);
+  useEffect(() => {
+    const press = (e) => {
+      if (!(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || e.key.toLowerCase() !== "p") return;
+      e.preventDefault();
+      e.stopPropagation();
+      print();
+    };
+    window.addEventListener("keydown", press, true);
+    return () => window.removeEventListener("keydown", press, true);
+  });
   useEffect(() => {
     if (!pop) return;
     const close = (e) => {
@@ -309,7 +437,7 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
   }, [pop]);
   if (source.error) return docx ? /* @__PURE__ */ jsx2("div", { className: "w100n-docs-scroll", children: /* @__PURE__ */ jsx2(DocxView, { bytes, onOutline, failed: t.failed }) }) : /* @__PURE__ */ jsx2("div", { className: "w100n-docs-empty", children: t.failed });
   if (!source.data || !editor || !state || live && !live.ready && !live.late && !live.denied) return /* @__PURE__ */ jsx2("div", { className: "w100n-docs-empty", children: t.loading });
-  const save = async () => {
+  const save = async (auto = false) => {
     if (live) {
       if (!can.edit || !live.ready || !live.online || !live.pending || saving === "busy") return false;
       setSaving("busy");
@@ -319,17 +447,18 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
     }
     const was = baseline.current;
     const doc = editor.state.doc;
-    if (!can.edit || !was || saving === "busy" || doc.eq(was.doc)) return false;
+    if (!can.edit || !was || saving === "busy" || doc.eq(was.doc) && !unsetup) return false;
     setSaving("busy");
     try {
       const md = was.base && toMarkdown(doc, was.base);
-      const out = md ? new TextEncoder().encode(md.text).buffer : await writeDocx(was.bytes, editor.getJSON());
-      await host.save(documentId, out, t.editedNote);
+      const out = md ? new TextEncoder().encode(md.text).buffer : await writeDocx(was.bytes, editor.getJSON(), void 0, unsetup ? { page, ...marginal } : void 0);
+      await host.save(documentId, out, auto ? t.autosavedNote : t.editedNote, auto);
       baseline.current = { bytes: md ? out : was.bytes, doc, base: md ? md.base : null };
       if (!md && editor.state.doc === doc) {
         const fresh = (await readDocx(out)).doc;
         if (editor.state.doc === doc && renew(fresh)) baseline.current = { bytes: out, doc: editor.state.doc, base: null };
       }
+      setUnsetup(false);
       setSaving("done");
       onSaved?.();
       return true;
@@ -357,7 +486,6 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
   };
   const linkUp = () => {
     setHref(editor.getAttributes("link").href ?? "");
-    setTab("insert");
     setPop("link");
   };
   const putLink = () => {
@@ -458,20 +586,22 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
   const keys = (e) => {
     if (e.defaultPrevented) return;
     const key = e.key.toLowerCase();
-    const mod = e.metaKey || e.ctrlKey;
-    if (key === "escape" && (pop || draft)) {
+    const mod2 = e.metaKey || e.ctrlKey;
+    if (key === "escape" && (pop || draft || paint)) {
       e.stopPropagation();
-      if (pop) setPop(null);
+      if (paint) setPaint(null);
+      else if (pop) setPop(null);
       else drop();
       return;
     }
-    if (!mod) return;
+    if (!mod2) return;
     const act = (run) => {
       e.preventDefault();
       run();
     };
     if (key === "s" && can.edit) act(() => void save());
     else if (key === "k" && can.edit) act(linkUp);
+    else if (key === "f" && !e.altKey) act(() => setPop("find"));
     else if (key === "m" && e.altKey && can.comment) act(begin);
     else if (!can.edit || e.altKey) return;
     else if (key === "]" || key === "[") act(() => indent(editor, key === "]" ? 1 : -1));
@@ -502,14 +632,6 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
     ["quote", named((s) => /quote/i.test(s.name)) || t.quote, () => editor.chain().focus().clearNodes().setParagraph().setBlockquote().run()],
     ["code", t.code, () => editor.chain().focus().setCodeBlock().run()]
   ];
-  const tabs = [
-    ...can.edit ? [["home", t.home], ["insert", t.insert]] : [],
-    ...can.edit && docx ? [["layout", t.layout]] : [],
-    ...can.edit ? [["refs", t.references]] : [],
-    ...host?.comments && (can.comment || open.length > 0) ? [["review", t.review]] : [],
-    ["view", t.viewTab]
-  ];
-  const shown = tabs.some(([key]) => key === tab) ? tab : "view";
   const margins = [[t.marginsNormal, [96, 96, 96, 96]], [t.marginsNarrow, [48, 48, 48, 48]], [t.marginsWide, [96, 192, 96, 192]]];
   const when = (iso) => new Intl.DateTimeFormat(language, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }).format(new Date(iso));
   const person = (c) => /* @__PURE__ */ jsxs2("header", { children: [
@@ -573,10 +695,273 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
       setPop(null);
     }, children: /* @__PURE__ */ jsx2("i", { style: { background: c } }) }, i))
   ] });
-  let tools = null;
-  if (shown === "home") tools = /* @__PURE__ */ jsxs2(Fragment3, { children: [
+  const mod = /Mac|iPhone|iPad/.test(navigator.platform) ? "\u2318" : "Ctrl+";
+  const item = (label, run, more2 = {}) => ({ label, run, ...more2 });
+  const insertToc = () => {
+    const at = editor.state.selection.$from.before(1);
+    editor.chain().focus().insertContentAt(at, { type: "toc", attrs: { entries: JSON.stringify(entries(editor.state.doc, !docx, at - 1)) } }).run();
+  };
+  const suggest = () => editor.view.dispatch(editor.state.tr.setMeta(suggesting, { on: !state.suggest, me: host?.me.name ?? "" }));
+  const aligns = [[AlignLeft, t.alignLeft, "left"], [AlignCenter, t.alignCenter, "center"], [AlignRight, t.alignRight, "right"], [AlignJustify, t.justify, "justify"]];
+  const lines = [[1, t.single], [1.15, "1.15"], [1.5, "1.5"], [2, t.double]];
+  const menus = [
+    ["file", t.menuFile, [
+      ...can.edit ? [
+        item(t.save, () => void save(), { keys: `${mod}S`, off: !dirty }),
+        item(t.print, print, { keys: `${mod}P` }),
+        ...docx ? ["-", item(t.pageSetup, () => setDraft2({ width: page.width, height: page.height, margins: page.margins.map(cm), ...marginal }))] : []
+      ] : [],
+      ...can.edit && (file?.formats.length || file?.copy || file?.rename) ? ["-"] : [],
+      ...(file?.formats ?? []).map((f) => item(`${t.downloadAs} ${f === "md" ? "Markdown" : f.toUpperCase()}`, () => file.download(f))),
+      !!file?.copy && item(t.makeCopy, file.copy),
+      !!file?.rename && item(t.rename, file.rename)
+    ]],
+    ["edit", t.menuEdit, can.edit ? [
+      item(t.undo, () => editor.chain().focus().undo().run(), { keys: `${mod}Z`, off: !state.undo }),
+      item(t.redo, () => editor.chain().focus().redo().run(), { keys: `${mod}\u21E7Z`, off: !state.redo }),
+      "-",
+      item(t.findReplace, () => setPop("find"), { keys: `${mod}F` }),
+      "-",
+      item(t.clearFormat, () => clear(editor), { keys: `${mod}\\` })
+    ] : []],
+    ["view", t.viewTab, [
+      item(t.zoomIn, () => zoomBy(10)),
+      item(t.zoomOut, () => zoomBy(-10)),
+      docx && item(t.fitWidth, () => setZoom(null), { on: zoom === null }),
+      item(t.fit, () => setZoom(100)),
+      "-",
+      item(t.outline, () => onPanel?.("outline")),
+      "-",
+      item([docx && count.pages ? `${t.pages}: ${count.pages}` : "", `${t.words}: ${count.words.toLocaleString(language)}`].filter(Boolean).join(" \xB7 "), () => {
+      }, { off: true })
+    ]],
+    ["insert", t.insert, can.edit ? [
+      item(t.table, () => setPop("table")),
+      item(t.image, () => {
+        setHref("");
+        setPop("image");
+      }),
+      item(t.link, linkUp, { keys: `${mod}K` }),
+      docx && item(t.pageBreak, () => editor.chain().focus().insertContent({ type: "pageBreak" }).run(), { keys: `${mod}\u21B5` }),
+      item(t.rule, () => editor.chain().focus().setHorizontalRule().run()),
+      "-",
+      state.toc < 0 ? item(t.tocInsert, insertToc) : item(t.tocRemove, () => editor.chain().focus().deleteRange({ from: state.toc, to: state.toc + editor.state.doc.nodeAt(state.toc).nodeSize }).run()),
+      can.comment && item(t.addComment, begin, { off: state.empty, keys: `${mod}\u2325M` })
+    ] : []],
+    ["format", t.menuFormat, can.edit ? [
+      ...styles.map(([key, label, run]) => item(label, run, { on: state.style === key })),
+      "-",
+      item(t.bold, () => editor.chain().focus().toggleBold().run(), { on: state.bold, keys: `${mod}B` }),
+      item(t.italic, () => editor.chain().focus().toggleItalic().run(), { on: state.italic, keys: `${mod}I` }),
+      docx && item(t.underline, () => editor.chain().focus().toggleUnderline().run(), { on: state.underline, keys: `${mod}U` }),
+      item(t.strike, () => editor.chain().focus().toggleStrike().run(), { on: state.strike }),
+      docx && item(t.superscript, () => editor.chain().focus().toggleMark("superscript").run(), { on: state.sup, keys: `${mod}.` }),
+      docx && item(t.subscript, () => editor.chain().focus().toggleMark("subscript").run(), { on: state.sub, keys: `${mod},` }),
+      ...docx ? [
+        "-",
+        ...aligns.map(([, label, value]) => item(label, () => align(editor, value), { on: state.align === value })),
+        "-",
+        ...lines.map(([v, label]) => item(`${t.lineSpacing}: ${label}`, () => spacing(editor, { line: v }), { on: state.line === v }))
+      ] : [],
+      "-",
+      item(t.bullets, () => editor.chain().focus().toggleBulletList().run(), { on: state.bullets }),
+      item(t.numbers, () => editor.chain().focus().toggleOrderedList().run(), { on: state.numbers }),
+      item(t.tasks, () => editor.chain().focus().toggleTaskList().run(), { on: state.tasks }),
+      "-",
+      item(t.outdent, () => indent(editor, -1), { keys: `${mod}[` }),
+      item(t.indent, () => indent(editor, 1), { keys: `${mod}]` })
+    ] : []],
+    ["tools", t.menuTools, [
+      docx && can.edit && item(t.suggest, suggest, { on: state.suggest }),
+      docx && can.edit && state.revs.length > 0 && item(t.acceptAll, () => decide(editor, true)),
+      docx && can.edit && state.revs.length > 0 && item(t.rejectAll, () => decide(editor, false)),
+      !!host?.comments && (can.comment || open.length > 0) && item(t.comments, () => onPanel?.("comments"))
+    ]]
+  ];
+  const menu = ([key, label, list]) => /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-text-menu-button", "data-pop": true, "aria-haspopup": "menu", "aria-expanded": pop === key, onClick: () => pick(key), children: label }),
+    pop === key && /* @__PURE__ */ jsx2("span", { className: "w100n-text-pop w100n-text-menu", role: "menu", "aria-label": label, children: list.filter((x) => x !== false).map((x, i) => x === "-" ? /* @__PURE__ */ jsx2("hr", {}, i) : /* @__PURE__ */ jsxs2("button", { type: "button", role: x.on === void 0 ? "menuitem" : "menuitemcheckbox", "aria-checked": x.on, disabled: x.off, onClick: () => {
+      setPop(null);
+      x.run();
+    }, children: [
+      /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+      /* @__PURE__ */ jsx2("span", { children: x.label }),
+      x.keys && /* @__PURE__ */ jsx2("kbd", { children: x.keys })
+    ] }, i)) })
+  ] }, key);
+  const seek = (next) => {
+    editor.view.dispatch(editor.state.tr.setMeta(searching, next));
+    const found2 = searching.getState(editor.state);
+    const hit = found2.hits[found2.at];
+    if (hit && next.at !== void 0) {
+      editor.commands.setTextSelection(hit);
+      editor.view.dom.querySelector(".w100n-found.is-current")?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  };
+  const found = searching.getState(editor.state);
+  const finder = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "find", "aria-label": t.findReplace, title: t.findReplace, onClick: () => pick("find"), children: /* @__PURE__ */ jsx2(Search, { "aria-hidden": true }) }),
+    pop === "find" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-find", role: "search", "aria-label": t.findReplace, children: [
+      /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            autoFocus: true,
+            value: query,
+            placeholder: t.find,
+            "aria-label": t.find,
+            onFocus: (e) => e.currentTarget.select(),
+            onChange: (e) => {
+              setQuery(e.target.value);
+              seek({ query: e.target.value, at: 0 });
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                seek({ at: (found?.at ?? 0) + (e.shiftKey ? -1 : 1) });
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2("small", { "aria-live": "polite", children: query ? found?.hits.length ? `${(found.at ?? 0) + 1} / ${found.hits.length}` : t.noHits : "" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t.previous, title: t.previous, disabled: !found?.hits.length, onClick: () => seek({ at: found.at - 1 }), children: /* @__PURE__ */ jsx2(ChevronUp, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t.next, title: t.next, disabled: !found?.hits.length, onClick: () => seek({ at: found.at + 1 }), children: /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true }) })
+      ] }),
+      can.edit && /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
+        /* @__PURE__ */ jsx2("input", { value: swap, placeholder: t.replaceWith, "aria-label": t.replaceWith, onChange: (e) => setSwap(e.target.value) }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", disabled: !found?.hits.length, onClick: () => {
+          replace(editor, swap, false);
+          seek({});
+        }, children: t.replaceOne }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-docs-action", disabled: !found?.hits.length, onClick: () => {
+          replace(editor, swap, true);
+          seek({});
+        }, children: t.replaceAll })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-setup-check", children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: matchCase, onChange: (e) => {
+          setMatchCase(e.target.checked);
+          seek({ matchCase: e.target.checked, at: 0 });
+        } }),
+        t.matchCase
+      ] })
+    ] })
+  ] });
+  const formats = ["bold", "italic", "underline", "strike", "code", "highlight", "textStyle", "superscript", "subscript"];
+  const take = (keep2) => {
+    if (paint && !keep2) return setPaint(null);
+    const { $from } = editor.state.selection;
+    const marks = (editor.state.storedMarks ?? $from.marks()).filter((m) => formats.includes(m.type.name)).map((m) => ({ type: m.type.name, attrs: m.attrs }));
+    setPaint({ marks, block: { align: $from.parent.attrs.align, line: $from.parent.attrs.line, after: $from.parent.attrs.after }, keep: keep2 });
+  };
+  const lay = () => {
+    if (!paint || editor.state.selection.empty) return;
+    const chain = editor.chain().focus();
+    for (const name of formats) chain.unsetMark(name);
+    for (const m of paint.marks) chain.setMark(m.type, m.attrs);
+    chain.run();
+    align(editor, paint.block.align);
+    spacing(editor, { line: paint.block.line, after: paint.block.after });
+    if (!paint.keep) setPaint(null);
+  };
+  const fontPicker = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-size": "mid", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "font", "aria-label": t.font, title: t.font, onClick: () => pick("font"), children: [
+      /* @__PURE__ */ jsx2("span", { style: { fontFamily: state.font ?? void 0 }, children: state.font ?? t.defaultFont }),
+      /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
+    ] }),
+    pop === "font" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.font, children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": !state.font, onClick: () => {
+        editor.chain().focus().unsetFontFamily().run();
+        setPop(null);
+      }, children: t.defaultFont }),
+      faces.map((f) => /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": state.font === f, style: { fontFamily: f }, onClick: () => {
+        editor.chain().focus().setFontFamily(f).run();
+        setPop(null);
+      }, children: f }, f))
+    ] })
+  ] });
+  const sizePicker = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-size": "small", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "size", "aria-label": t.fontSize, title: t.fontSize, onClick: () => pick("size"), children: [
+      state.size ? parseFloat(state.size) : t.defaultFont,
+      /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
+    ] }),
+    pop === "size" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.fontSize, children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": !state.size, onClick: () => {
+        editor.chain().focus().unsetFontSize().run();
+        setPop(null);
+      }, children: t.defaultFont }),
+      sizes.map((n) => /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": state.size !== null && parseFloat(state.size) === n, onClick: () => {
+        editor.chain().focus().setFontSize(`${n}pt`).run();
+        setPop(null);
+      }, children: n }, n))
+    ] })
+  ] });
+  const spacer = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "spacing", "aria-label": t.lineSpacing, title: t.lineSpacing, onClick: () => pick("spacing"), children: /* @__PURE__ */ jsx2(UnfoldVertical, { "aria-hidden": true }) }),
+    pop === "spacing" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.lineSpacing, children: [
+      lines.map(([v, label]) => /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": state.line === v, onClick: () => {
+        spacing(editor, { line: v });
+        setPop(null);
+      }, children: label }, v)),
+      /* @__PURE__ */ jsx2("hr", {}),
+      /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": false, onClick: () => {
+        spacing(editor, { after: state.after === 0 ? 8 : 0 });
+        setPop(null);
+      }, children: state.after === 0 ? t.spaceAfter : t.noSpaceAfter })
+    ] })
+  ] });
+  const applySetup = () => {
+    const d = draft2;
+    const next = { width: d.width, height: d.height, margins: d.margins.map((v) => Math.round(v / 2.54 * 96 * 100) / 100) };
+    const marks = { header: d.header.trim(), footer: d.footer.trim(), numbers: d.numbers };
+    if (shared) shared.doc.transact(() => {
+      const map = shared.doc.getMap("setup");
+      map.set("page", next);
+      for (const [key, v] of Object.entries(marks)) map.set(key, v);
+    });
+    else {
+      setLayout(next);
+      setMarg(marks);
+      setUnsetup(true);
+    }
+    setDraft2(null);
+  };
+  const zooms = [50, 75, 90, 100, 125, 150, 200];
+  const zoomer = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-size": "small", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "zoom", "aria-label": t.zoom, title: t.zoom, onClick: () => pick("zoom"), children: [
+      percent,
+      "%",
+      /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
+    ] }),
+    pop === "zoom" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.zoom, children: [
+      docx && /* @__PURE__ */ jsx2("button", { type: "button", role: "option", "aria-selected": zoom === null, onClick: () => {
+        setZoom(null);
+        setPop(null);
+      }, children: t.fitWidth }),
+      zooms.map((z) => /* @__PURE__ */ jsxs2("button", { type: "button", role: "option", "aria-selected": zoom === z, onClick: () => {
+        setZoom(z);
+        setPop(null);
+      }, children: [
+        z,
+        "%"
+      ] }, z))
+    ] })
+  ] });
+  const Aligned = aligns.find(([, , value]) => value === state.align)?.[0] ?? AlignLeft;
+  const aligner = /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "align", "aria-label": t.align, title: t.align, onClick: () => pick("align"), children: /* @__PURE__ */ jsx2(Aligned, { "aria-hidden": true }) }),
+    pop === "align" && /* @__PURE__ */ jsx2("span", { className: "w100n-text-pop", role: "group", "aria-label": t.align, children: /* @__PURE__ */ jsx2("span", { className: "w100n-text-tools", children: aligns.map(([icon, label, value], i) => /* @__PURE__ */ jsx2(Fragment2, { children: tool(icon, label, () => {
+      align(editor, value);
+      setPop(null);
+    }, state.align === value) }, i)) }) })
+  ] });
+  const widen = () => {
+    localStorage.setItem("w100n-docs-more", more ? "" : "1");
+    setMore(!more);
+  };
+  const main = can.edit ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
     /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
-      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "style", "aria-label": t.paragraphStyle, title: t.paragraphStyle, onClick: () => pick("style"), children: [
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-picker", "data-size": "mid", "data-pop": true, "aria-haspopup": "listbox", "aria-expanded": pop === "style", "aria-label": t.paragraphStyle, title: t.paragraphStyle, onClick: () => pick("style"), children: [
         styles.find(([key]) => key === state.style)?.[1] ?? t.normal,
         /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
       ] }),
@@ -599,8 +984,7 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
     gap,
     tool(Bold, t.bold, () => editor.chain().focus().toggleBold().run(), state.bold),
     tool(Italic, t.italic, () => editor.chain().focus().toggleItalic().run(), state.italic),
-    docx && tool(Underline, t.underline, () => editor.chain().focus().toggleUnderline().run(), state.underline),
-    tool(Strikethrough, t.strike, () => editor.chain().focus().toggleStrike().run(), state.strike),
+    docx ? tool(Underline, t.underline, () => editor.chain().focus().toggleUnderline().run(), state.underline) : tool(Strikethrough, t.strike, () => editor.chain().focus().toggleStrike().run(), state.strike),
     !docx && tool(Code, t.code, () => editor.chain().focus().toggleCode().run(), state.code),
     docx && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
       /* @__PURE__ */ jsxs2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "color", "aria-label": t.textColour, title: t.textColour, onClick: () => pick("color"), children: [
@@ -609,60 +993,34 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
       ] }),
       pop === "color" && swatches(inks, state.color, (c) => c ? editor.chain().focus().setColor(c).run() : editor.chain().focus().unsetColor().run(), t.automatic)
     ] }),
-    docx && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
-      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "mark", "aria-pressed": state.glow, "aria-label": t.highlight, title: t.highlight, onClick: () => pick("mark"), children: /* @__PURE__ */ jsx2(Highlighter, { "aria-hidden": true }) }),
-      pop === "mark" && swatches(glows, null, (c) => c ? editor.chain().focus().setHighlight({ color: c }).run() : editor.chain().focus().unsetHighlight().run(), t.noColour)
-    ] }),
     gap,
+    docx && aligner,
     tool(List, t.bullets, () => editor.chain().focus().toggleBulletList().run(), state.bullets),
     tool(ListOrdered, t.numbers, () => editor.chain().focus().toggleOrderedList().run(), state.numbers),
-    tool(ListChecks, t.tasks, () => editor.chain().focus().toggleTaskList().run(), state.tasks),
-    docx && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-      gap,
-      [[AlignLeft, t.alignLeft, "left"], [AlignCenter, t.alignCenter, "center"], [AlignRight, t.alignRight, "right"], [AlignJustify, t.justify, "justify"]].map(([icon, label, value], i) => /* @__PURE__ */ jsx2(Fragment2, { children: tool(icon, label, () => align(editor, value), state.align === value) }, i))
-    ] }),
+    !docx && tool(ListChecks, t.tasks, () => editor.chain().focus().toggleTaskList().run(), state.tasks),
     gap,
-    tool(ListIndentDecrease, t.outdent, () => indent(editor, -1)),
-    tool(ListIndentIncrease, t.indent, () => indent(editor, 1)),
-    tool(RemoveFormatting, t.clearFormat, () => clear(editor))
-  ] });
-  else if (shown === "insert") tools = /* @__PURE__ */ jsxs2(Fragment3, { children: [
     /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
-      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "table", "aria-label": t.table, title: t.table, onClick: () => pick("table"), children: /* @__PURE__ */ jsx2(Table, { "aria-hidden": true }) }),
-      pop === "table" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-grid", role: "group", "aria-label": t.table, onPointerLeave: () => setGrid({ rows: 0, cols: 0 }), children: [
-        /* @__PURE__ */ jsx2("span", { children: Array.from({ length: 48 }, (_, i) => {
-          const rows = Math.floor(i / 8) + 1;
-          const cols = i % 8 + 1;
-          return /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              "aria-label": `${rows} \xD7 ${cols}`,
-              "data-on": rows <= grid.rows && cols <= grid.cols,
-              onPointerEnter: () => setGrid({ rows, cols }),
-              onClick: () => {
-                editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
-                setPop(null);
-              }
-            },
-            i
-          );
-        }) }),
-        /* @__PURE__ */ jsx2("small", { children: grid.rows ? `${grid.rows} \xD7 ${grid.cols}` : t.table })
+      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "link", "aria-pressed": state.link, "aria-label": t.link, title: t.link, onClick: () => pop === "link" ? setPop(null) : linkUp(), children: /* @__PURE__ */ jsx2(Link, { "aria-hidden": true }) }),
+      pop === "link" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-form", children: [
+        /* @__PURE__ */ jsx2("input", { autoFocus: true, value: href, placeholder: t.linkAddress, "aria-label": t.linkAddress, onChange: (e) => setHref(e.target.value), onKeyDown: (e) => {
+          if (e.key === "Enter") putLink();
+        } }),
+        /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
+          state.link && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-pdf-link", onClick: () => {
+            editor.chain().focus().extendMarkRange("link").unsetLink().run();
+            setPop(null);
+          }, children: [
+            /* @__PURE__ */ jsx2(Link2Off, { "aria-hidden": true }),
+            t.unlink
+          ] }),
+          /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !href.trim(), onClick: putLink, children: [
+            /* @__PURE__ */ jsx2(Link, { "aria-hidden": true }),
+            t.apply
+          ] })
+        ] })
       ] })
     ] }),
-    state.table && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-      tool(BetweenHorizontalStart, t.rowAbove, () => editor.chain().focus().addRowBefore().run()),
-      tool(BetweenHorizontalEnd, t.rowBelow, () => editor.chain().focus().addRowAfter().run()),
-      tool(BetweenVerticalStart, t.columnLeft, () => editor.chain().focus().addColumnBefore().run()),
-      tool(BetweenVerticalEnd, t.columnRight, () => editor.chain().focus().addColumnAfter().run()),
-      tool(PanelTop, t.headerRow, () => editor.chain().focus().toggleHeaderRow().run()),
-      docx && tool(TableCellsMerge, t.mergeCells, () => editor.chain().focus().mergeOrSplit().run()),
-      tool(TableRowsSplit, t.deleteRow, () => editor.chain().focus().deleteRow().run()),
-      tool(TableColumnsSplit, t.deleteColumn, () => editor.chain().focus().deleteColumn().run()),
-      tool(Trash2, t.deleteTable, () => editor.chain().focus().deleteTable().run())
-    ] }),
-    gap,
+    can.comment && tool(MessageSquarePlus, t.addComment, begin, void 0, state.empty),
     /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
       /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "image", "aria-label": t.image, title: t.image, onClick: () => {
         setHref("");
@@ -689,14 +1047,14 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
           docx && /* @__PURE__ */ jsxs2("label", { className: "w100n-pdf-link", children: [
             t.chooseFile,
             /* @__PURE__ */ jsx2("input", { type: "file", accept: "image/png,image/jpeg,image/gif", hidden: true, onChange: (e) => {
-              const file = e.target.files?.[0];
-              if (!file) return;
+              const file2 = e.target.files?.[0];
+              if (!file2) return;
               const reader = new FileReader();
               reader.onload = () => {
-                editor.chain().focus().setImage({ src: String(reader.result), alt: file.name }).run();
+                editor.chain().focus().setImage({ src: String(reader.result), alt: file2.name }).run();
                 setPop(null);
               };
-              reader.readAsDataURL(file);
+              reader.readAsDataURL(file2);
             } })
           ] }),
           /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !href.trim(), onClick: () => {
@@ -710,162 +1068,215 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
       ] })
     ] }),
     /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
-      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "link", "aria-pressed": state.link, "aria-label": t.link, title: t.link, onClick: () => pop === "link" ? setPop(null) : linkUp(), children: /* @__PURE__ */ jsx2(Link, { "aria-hidden": true }) }),
-      pop === "link" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-form", children: [
-        /* @__PURE__ */ jsx2("input", { autoFocus: true, value: href, placeholder: t.linkAddress, "aria-label": t.linkAddress, onChange: (e) => setHref(e.target.value), onKeyDown: (e) => {
-          if (e.key === "Enter") putLink();
-        } }),
-        /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
-          state.link && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-pdf-link", onClick: () => {
-            editor.chain().focus().extendMarkRange("link").unsetLink().run();
-            setPop(null);
-          }, children: [
-            /* @__PURE__ */ jsx2(Link2Off, { "aria-hidden": true }),
-            t.unlink
-          ] }),
-          /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !href.trim(), onClick: putLink, children: [
-            /* @__PURE__ */ jsx2(Link, { "aria-hidden": true }),
-            t.apply
-          ] })
-        ] })
+      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "table", "aria-label": t.table, title: t.table, onClick: () => pick("table"), children: /* @__PURE__ */ jsx2(Table, { "aria-hidden": true }) }),
+      pop === "table" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-grid", role: "group", "aria-label": t.table, onPointerLeave: () => setGrid({ rows: 0, cols: 0 }), children: [
+        /* @__PURE__ */ jsx2("span", { children: Array.from({ length: 48 }, (_, i) => {
+          const rows = Math.floor(i / 8) + 1;
+          const cols = i % 8 + 1;
+          return /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${rows} \xD7 ${cols}`,
+              "data-on": rows <= grid.rows && cols <= grid.cols,
+              onPointerEnter: () => setGrid({ rows, cols }),
+              onClick: () => {
+                editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                setPop(null);
+              }
+            },
+            i
+          );
+        }) }),
+        /* @__PURE__ */ jsx2("small", { children: grid.rows ? `${grid.rows} \xD7 ${grid.cols}` : t.table })
       ] })
     ] }),
-    docx && tool(SeparatorHorizontal, t.pageBreak, () => editor.chain().focus().insertContent({ type: "pageBreak" }).run()),
-    tool(Minus, t.rule, () => editor.chain().focus().setHorizontalRule().run())
-  ] });
-  else if (shown === "layout") tools = /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    /* @__PURE__ */ jsx2("span", { className: "w100n-text-label", children: t.pageSize }),
-    [["A4", a4], ["Letter", letter]].map(([label, size], i) => /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        className: "w100n-text-word",
-        "aria-pressed": Math.abs(page.width - size.width) < 2 && Math.abs(page.height - size.height) < 2,
-        onClick: () => setLayout({ ...page, width: size.width, height: size.height }),
-        children: label
-      },
-      i
-    )),
     gap,
-    /* @__PURE__ */ jsx2("span", { className: "w100n-text-label", children: t.margins }),
-    margins.map(([label, values], i) => /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        className: "w100n-text-word",
-        "aria-pressed": values.every((v, n) => Math.abs(page.margins[n] - v) < 2),
-        onClick: () => setLayout({ ...page, margins: values }),
-        children: label
-      },
-      i
-    ))
-  ] });
-  else if (shown === "refs") tools = /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    state.toc < 0 ? /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", onClick: () => {
-      const at = editor.state.selection.$from.before(1);
-      editor.chain().focus().insertContentAt(at, { type: "toc", attrs: { entries: JSON.stringify(entries(editor.state.doc, !docx, at - 1)) } }).run();
-    }, children: [
-      /* @__PURE__ */ jsx2(TableOfContents, { "aria-hidden": true }),
-      t.tocInsert
-    ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
-      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-word", onClick: () => editor.view.nodeDOM(state.toc)?.scrollIntoView({ behavior: "smooth", block: "start" }), children: [
-        /* @__PURE__ */ jsx2(TableOfContents, { "aria-hidden": true }),
-        t.tocGo
-      ] }),
-      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "red", onClick: () => editor.chain().focus().deleteRange({ from: state.toc, to: state.toc + editor.state.doc.nodeAt(state.toc).nodeSize }).run(), children: [
-        /* @__PURE__ */ jsx2(Trash2, { "aria-hidden": true }),
-        t.tocRemove
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx2("span", { className: "w100n-text-label", children: t.tocHint })
-  ] });
-  else if (shown === "review") tools = /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    can.comment && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: state.empty, onClick: begin, children: [
-      /* @__PURE__ */ jsx2(MessageSquarePlus, { "aria-hidden": true }),
-      t.addComment
+    /* @__PURE__ */ jsx2("button", { type: "button", "aria-expanded": more, "aria-label": more ? t.fewerTools : t.moreTools, title: more ? t.fewerTools : t.moreTools, onClick: widen, children: more ? /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true }) : /* @__PURE__ */ jsx2(ChevronUp, { "aria-hidden": true }) })
+  ] }) : /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-word", onClick: () => onPanel?.("outline"), children: [
+      /* @__PURE__ */ jsx2(ListTree, { "aria-hidden": true }),
+      t.outline
     ] }),
-    docx && can.edit && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          type: "button",
-          className: "w100n-text-word",
-          "aria-pressed": state.suggest,
-          onClick: () => editor.view.dispatch(editor.state.tr.setMeta(suggesting, { on: !state.suggest, me: host?.me.name ?? "" })),
-          children: [
-            /* @__PURE__ */ jsx2(FilePenLine, { "aria-hidden": true }),
-            t.suggest
-          ]
-        }
-      ),
-      state.revs.length > 0 && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-        /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "green", onClick: () => decide(editor, true), children: [
-          /* @__PURE__ */ jsx2(CheckCheck, { "aria-hidden": true }),
-          t.acceptAll
-        ] }),
-        /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "red", onClick: () => decide(editor, false), children: [
-          /* @__PURE__ */ jsx2(X, { "aria-hidden": true }),
-          t.rejectAll
-        ] })
+    can.comment && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      /* @__PURE__ */ jsx2("span", { className: "w100n-text-grow" }),
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: state.empty, onClick: begin, children: [
+        /* @__PURE__ */ jsx2(MessageSquarePlus, { "aria-hidden": true }),
+        t.addComment
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-word", onClick: () => onPanel?.("comments"), children: [
+    !!host?.comments && (can.comment || open.length > 0) && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-word", onClick: () => onPanel?.("comments"), children: [
       /* @__PURE__ */ jsx2(MessagesSquare, { "aria-hidden": true }),
       t.comments,
       /* @__PURE__ */ jsx2("b", { children: open.length })
     ] })
   ] });
-  else tools = /* @__PURE__ */ jsxs2(Fragment3, { children: [
-    tool(Minus, t.zoomOut, () => zoomBy(-10)),
-    /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-zoom", children: [
-      percent,
-      "%"
+  const extra = can.edit && more && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    docx && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      fontPicker,
+      sizePicker,
+      gap
+    ] }),
+    docx && tool(Strikethrough, t.strike, () => editor.chain().focus().toggleStrike().run(), state.strike),
+    docx && tool(Superscript, t.superscript, () => editor.chain().focus().toggleMark("superscript").run(), state.sup),
+    docx && tool(Subscript, t.subscript, () => editor.chain().focus().toggleMark("subscript").run(), state.sub),
+    docx && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "mark", "aria-pressed": state.glow, "aria-label": t.highlight, title: t.highlight, onClick: () => pick("mark"), children: /* @__PURE__ */ jsx2(Highlighter, { "aria-hidden": true }) }),
+      pop === "mark" && swatches(glows, null, (c) => c ? editor.chain().focus().setHighlight({ color: c }).run() : editor.chain().focus().unsetHighlight().run(), t.noColour)
+    ] }),
+    docx && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      gap,
+      spacer
     ] }),
-    tool(Plus, t.zoomIn, () => zoomBy(10)),
-    docx && tool(MoveHorizontal, t.fitWidth, () => setZoom(null), zoom === null),
-    tool(Maximize2, t.fit, () => setZoom(100)),
+    tool(ListIndentDecrease, t.outdent, () => indent(editor, -1)),
+    tool(ListIndentIncrease, t.indent, () => indent(editor, 1)),
+    docx && tool(ListChecks, t.tasks, () => editor.chain().focus().toggleTaskList().run(), state.tasks),
     gap,
-    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-word", onClick: () => onPanel?.("outline"), children: [
-      /* @__PURE__ */ jsx2(ListTree, { "aria-hidden": true }),
-      t.outline
+    /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t.painter, title: paint ? t.painterHint : t.painter, "aria-pressed": !!paint, onClick: () => take(false), onDoubleClick: () => take(true), children: /* @__PURE__ */ jsx2(PaintRoller, { "aria-hidden": true }) }),
+    tool(RemoveFormatting, t.clearFormat, () => clear(editor)),
+    docx && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      gap,
+      tool(FilePenLine, t.suggest, suggest, state.suggest)
     ] })
   ] });
-  const sheet = docx ? { "--page-w": `${page.width}px`, "--page-h": `${page.height}px`, "--mt": `${page.margins[0]}px`, "--mr": `${page.margins[1]}px`, "--mb": `${page.margins[2]}px`, "--ml": `${page.margins[3]}px` } : void 0;
-  return /* @__PURE__ */ jsxs2("div", { className: "w100n-text", "data-kind": kind, onKeyDown: keys, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "w100n-text-ribbon", role: "toolbar", "aria-label": t.textTools, onKeyDown: rove, onPointerDown: (e) => {
-      if (e.target.closest("button")) e.preventDefault();
-    }, children: [
-      (tabs.length > 1 || live) && /* @__PURE__ */ jsxs2("div", { className: "w100n-text-tabs", children: [
-        /* @__PURE__ */ jsx2("span", { role: "tablist", "aria-label": t.textTools, children: tabs.length > 1 && tabs.map(([key, label]) => /* @__PURE__ */ jsx2("button", { type: "button", role: "tab", "aria-selected": shown === key, onClick: () => {
-          setTab(key);
-          setPop(null);
-        }, children: label }, key)) }),
-        (can.edit || live) && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-end", children: [
-          live && (live.ready ? !live.online : live.late || live.denied) && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-live", title: live.denied ? void 0 : t.offlineHint, children: [
-            /* @__PURE__ */ jsx2(WifiOff, { "aria-hidden": true }),
-            live.denied ? t.liveOff : t.offline
-          ] }),
-          live && live.people.length > 0 && /* @__PURE__ */ jsx2("span", { className: "w100n-text-people", role: "group", "aria-label": t.people, children: live.people.map((p) => /* @__PURE__ */ jsx2("span", { className: "w100n-text-face", title: p.me ? `${p.name} (${t.you})` : p.name, style: { "--face": p.color }, children: p.avatarUrl ? /* @__PURE__ */ jsx2("img", { src: p.avatarUrl, alt: "" }) : p.name.slice(0, 1).toUpperCase() }, p.id)) }),
-          state.suggest && /* @__PURE__ */ jsx2("span", { className: "w100n-docs-badge", children: t.suggesting }),
-          can.edit && /* @__PURE__ */ jsxs2(Fragment3, { children: [
-            tool(Undo2, t.undo, () => editor.chain().focus().undo().run(), void 0, !state.undo),
-            tool(Redo2, t.redo, () => editor.chain().focus().redo().run(), void 0, !state.redo),
-            saving === "failed" && /* @__PURE__ */ jsx2("span", { className: "w100n-docs-muted", children: t.saveFailed }),
-            /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !dirty || saving === "busy" || !!live && !live.online, onClick: () => void save(), children: [
-              /* @__PURE__ */ jsx2(Save, { "aria-hidden": true }),
-              saving === "busy" ? t.saving : !dirty && saving === "done" ? t.saved : t.save
-            ] })
-          ] })
-        ] })
+  const context = can.edit && (state.table ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    tool(BetweenHorizontalStart, t.rowAbove, () => editor.chain().focus().addRowBefore().run()),
+    tool(BetweenHorizontalEnd, t.rowBelow, () => editor.chain().focus().addRowAfter().run()),
+    tool(BetweenVerticalStart, t.columnLeft, () => editor.chain().focus().addColumnBefore().run()),
+    tool(BetweenVerticalEnd, t.columnRight, () => editor.chain().focus().addColumnAfter().run()),
+    tool(PanelTop, t.headerRow, () => editor.chain().focus().toggleHeaderRow().run()),
+    docx && tool(TableCellsMerge, t.mergeCells, () => editor.chain().focus().mergeOrSplit().run()),
+    docx && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-anchor", children: [
+      /* @__PURE__ */ jsxs2("button", { type: "button", "data-pop": true, "aria-expanded": pop === "fill", "aria-label": t.cellFill, title: t.cellFill, onClick: () => pick("fill"), children: [
+        /* @__PURE__ */ jsx2(PaintBucket, { "aria-hidden": true }),
+        /* @__PURE__ */ jsx2("i", { className: "w100n-text-bar", style: { background: state.fill ?? "transparent" } })
       ] }),
-      /* @__PURE__ */ jsx2("div", { className: "w100n-text-tools", role: "group", "aria-label": tabs.find(([key]) => key === shown)?.[1], children: tools })
+      pop === "fill" && swatches(glows, state.fill, (c) => editor.chain().focus().setCellAttribute("background", c).run(), t.noColour)
     ] }),
-    /* @__PURE__ */ jsx2("div", { ref: scroller, className: "w100n-text-scroll", onClick: (e) => {
+    docx && tool(Grid3x3, t.tableBorders, () => editor.chain().focus().updateAttributes("table", { borders: state.bare ? null : "none" }).run(), !state.bare),
+    tool(TableRowsSplit, t.deleteRow, () => editor.chain().focus().deleteRow().run()),
+    tool(TableColumnsSplit, t.deleteColumn, () => editor.chain().focus().deleteColumn().run()),
+    tool(Trash2, t.deleteTable, () => editor.chain().focus().deleteTable().run())
+  ] }) : state.img && /* @__PURE__ */ jsx2(Fragment3, { children: [[Image, t.wrapInline, "inline"], [PanelLeft, t.wrapLeft, "left"], [PanelRight, t.wrapRight, "right"]].map(([icon, label, value]) => /* @__PURE__ */ jsx2(Fragment2, { children: tool(icon, label, () => editor.chain().focus().updateAttributes("image", { wrap: value === "inline" ? null : value }).run(), state.img === value) }, value)) }));
+  const status = (can.edit || live) && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-end", children: [
+    live && (live.ready ? !live.online : live.late || live.denied) && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-live", title: live.denied ? void 0 : t.offlineHint, children: [
+      /* @__PURE__ */ jsx2(WifiOff, { "aria-hidden": true }),
+      live.denied ? t.liveOff : t.offline
+    ] }),
+    state.suggest && /* @__PURE__ */ jsx2("span", { className: "w100n-docs-badge", children: t.suggesting }),
+    can.edit && saving === "failed" && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-saved", title: `${t.save} (${mod}S)`, onClick: () => void save(), children: [
+      /* @__PURE__ */ jsx2(CloudAlert, { "aria-hidden": true }),
+      /* @__PURE__ */ jsx2("span", { children: t.saveFailed })
+    ] }),
+    live && live.people.length > 0 && /* @__PURE__ */ jsx2("span", { className: "w100n-text-people", role: "group", "aria-label": t.people, children: live.people.map((p) => /* @__PURE__ */ jsx2("span", { className: "w100n-text-face", title: p.me ? `${p.name} (${t.you})` : p.name, style: { "--face": p.color }, children: p.avatarUrl ? /* @__PURE__ */ jsx2("img", { src: p.avatarUrl, alt: "" }) : p.name.split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase() }, p.id)) })
+  ] });
+  const menubar = /* @__PURE__ */ jsx2("span", { className: "w100n-text-menus", role: "menubar", "aria-label": t.textTools, children: menus.filter(([, , list]) => list.some((x) => x && x !== "-")).map(menu) });
+  const keep = (e) => {
+    if (e.target.closest("button")) e.preventDefault();
+  };
+  const sheet = docx ? { "--page-w": `${page.width}px`, "--page-h": `${page.height}px`, "--mt": `${page.margins[0]}px`, "--mr": `${page.margins[1]}px`, "--mb": `${page.margins[2]}px`, "--ml": `${page.margins[3]}px` } : void 0;
+  return /* @__PURE__ */ jsxs2("div", { ref: root, className: "w100n-text", "data-kind": kind, "data-docs-find": true, onKeyDown: keys, children: [
+    head ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+      head.menus && createPortal(/* @__PURE__ */ jsx2("div", { className: "w100n-text-ribbon w100n-text-docbar", onKeyDown: rove, onPointerDown: keep, children: menubar }), head.menus),
+      head.status && status && createPortal(/* @__PURE__ */ jsx2("div", { className: "w100n-text-ribbon w100n-text-docbar", onPointerDown: keep, children: status }), head.status)
+    ] }) : /* @__PURE__ */ jsxs2("div", { className: "w100n-text-ribbon w100n-text-top", onKeyDown: rove, onPointerDown: keep, children: [
+      menubar,
+      status
+    ] }),
+    /* @__PURE__ */ jsx2("div", { ref: scroller, className: "w100n-text-scroll", "data-paint": !!paint, onMouseUp: lay, onClick: (e) => {
       const id = e.target.closest("[data-note]")?.getAttribute("data-note");
       if (!id) return;
       setActive(id);
       onPanel?.("comments");
     }, children: /* @__PURE__ */ jsx2("div", { className: "w100n-text-zoomed", style: { zoom: percent / 100 }, children: /* @__PURE__ */ jsx2("div", { className: docx ? "w100n-text-sheet" : "w100n-docs-page w100n-text-column", style: sheet, children: /* @__PURE__ */ jsx2(EditorContent, { editor }) }) }) }),
+    /* @__PURE__ */ jsx2("div", { className: "w100n-text-ribbon w100n-text-corner", "data-side": "left", onPointerDown: keep, children: /* @__PURE__ */ jsxs2("div", { className: "w100n-text-tools", role: "group", "aria-label": t.zoom, children: [
+      tool(Minus, t.zoomOut, () => zoomBy(-10)),
+      zoomer,
+      tool(Plus, t.zoomIn, () => zoomBy(10))
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "w100n-text-ribbon w100n-text-island", role: "toolbar", "aria-label": t.textTools, onKeyDown: rove, onPointerDown: keep, children: [
+      context && /* @__PURE__ */ jsx2("div", { className: "w100n-text-tools", role: "group", "aria-label": state.table ? t.table : t.image, children: context }),
+      extra && /* @__PURE__ */ jsx2("div", { className: "w100n-text-tools", role: "group", "aria-label": t.moreTools, children: extra }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-text-tools", role: "group", "aria-label": t.textTools, children: main })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "w100n-text-ribbon w100n-text-corner", "data-side": "right", onPointerDown: keep, children: /* @__PURE__ */ jsxs2("div", { className: "w100n-text-tools", role: "group", "aria-label": t.findReplace, children: [
+      can.edit && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        tool(Undo2, t.undo, () => editor.chain().focus().undo().run(), void 0, !state.undo),
+        tool(Redo2, t.redo, () => editor.chain().focus().redo().run(), void 0, !state.redo),
+        gap
+      ] }),
+      finder
+    ] }) }),
+    draft2 && /* @__PURE__ */ jsx2("div", { className: "w100n-pdf-back", onKeyDown: (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setDraft2(null);
+      }
+    }, children: /* @__PURE__ */ jsxs2("form", { className: "w100n-pdf-dialog w100n-setup", role: "dialog", "aria-modal": true, "aria-label": t.pageSetup, onSubmit: (e) => {
+      e.preventDefault();
+      applySetup();
+    }, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-new-head", children: [
+        /* @__PURE__ */ jsx2("span", { className: "w100n-new-tile", "data-tone": "blue", children: /* @__PURE__ */ jsx2(Ruler, { "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx2("b", { className: "w100n-pdf-dialog-title", children: t.pageSetup }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-docs-close", onClick: () => setDraft2(null), "aria-label": t.close, title: t.close, children: /* @__PURE__ */ jsx2(X, { "aria-hidden": true }) })
+      ] }),
+      /* @__PURE__ */ jsx2("p", { className: "w100n-docs-caption", children: t.pageSize }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-docs-chips", role: "group", "aria-label": t.pageSize, children: [["A4", a4], ["Letter", letter], ["Legal", legal]].map(([label, size]) => {
+        const land = draft2.width > draft2.height;
+        const on = Math.abs(Math.min(draft2.width, draft2.height) - size.width) < 2 && Math.abs(Math.max(draft2.width, draft2.height) - size.height) < 2;
+        return /* @__PURE__ */ jsx2("button", { type: "button", "aria-pressed": on, onClick: () => setDraft2({ ...draft2, width: land ? size.height : size.width, height: land ? size.width : size.height }), children: label }, label);
+      }) }),
+      /* @__PURE__ */ jsx2("p", { className: "w100n-docs-caption", children: t.orientation }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-docs-chips", role: "group", "aria-label": t.orientation, children: [[false, t.portrait], [true, t.landscape]].map(([land, label]) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": draft2.width > draft2.height === land,
+          onClick: () => {
+            if (draft2.width > draft2.height !== land) setDraft2({ ...draft2, width: draft2.height, height: draft2.width });
+          },
+          children: label
+        },
+        label
+      )) }),
+      /* @__PURE__ */ jsx2("p", { className: "w100n-docs-caption", children: t.marginsCm }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-docs-chips", role: "group", "aria-label": t.margins, children: margins.map(([label, values]) => /* @__PURE__ */ jsx2("button", { type: "button", "aria-pressed": values.every((v, n) => Math.abs(cm(v) - draft2.margins[n]) < 0.05), onClick: () => setDraft2({ ...draft2, margins: values.map(cm) }), children: label }, label)) }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-setup-grid", children: [t.mTop, t.mRight, t.mBottom, t.mLeft].map((label, n) => /* @__PURE__ */ jsxs2("label", { children: [
+        /* @__PURE__ */ jsx2("span", { children: label }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            className: "w100n-docs-field",
+            type: "number",
+            min: 0,
+            max: 10,
+            step: 0.1,
+            value: draft2.margins[n],
+            onChange: (e) => setDraft2({ ...draft2, margins: draft2.margins.map((v, i) => i === n ? Math.max(0, Math.min(10, Number(e.target.value) || 0)) : v) })
+          }
+        )
+      ] }, n)) }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-setup-line", children: [
+        /* @__PURE__ */ jsx2("span", { children: t.headerText }),
+        /* @__PURE__ */ jsx2("input", { className: "w100n-docs-field", value: draft2.header, onChange: (e) => setDraft2({ ...draft2, header: e.target.value }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-setup-line", children: [
+        /* @__PURE__ */ jsx2("span", { children: t.footerText }),
+        /* @__PURE__ */ jsx2("input", { className: "w100n-docs-field", value: draft2.footer, onChange: (e) => setDraft2({ ...draft2, footer: e.target.value }) })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "w100n-setup-check", children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: draft2.numbers, onChange: (e) => setDraft2({ ...draft2, numbers: e.target.checked }) }),
+        t.pageNumbers
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-pdf-dialog-end", children: [
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => setDraft2(null), children: t.cancel }),
+        /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", onClick: applySetup, children: [
+          /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+          t.apply
+        ] })
+      ] })
+    ] }) }),
     slot && createPortal(/* @__PURE__ */ jsxs2("div", { className: "w100n-text-notes", children: [
       draft && /* @__PURE__ */ jsxs2("div", { className: "w100n-text-card w100n-text-draft", children: [
         /* @__PURE__ */ jsx2("blockquote", { children: draft.quote }),
@@ -980,4 +1391,4 @@ function TextEditor({ kind, bytes, t, language, rights, host, together, document
 export {
   TextEditor as default
 };
-//# sourceMappingURL=TextEditor-SPEVB5HX.js.map
+//# sourceMappingURL=TextEditor-VBHWUOZR.js.map