@w100n/documents 0.4.0 → 0.11.0

package/dist/TextEditor-4YETNX4T.js

@@ -0,0 +1,983 @@
+'use client';
+import {
+  useLoad
+} from "./chunk-QDH7EZAF.js";
+import {
+  useLive
+} from "./chunk-FPGPEIW5.js";
+import {
+  a4,
+  align,
+  changes,
+  clear,
+  decide,
+  entries,
+  fromMarkdown,
+  indent,
+  kit,
+  letter,
+  locate,
+  notes,
+  paging,
+  suggesting,
+  toMarkdown,
+  track
+} from "./chunk-EM4U6OC5.js";
+import {
+  rove,
+  useRestore
+} from "./chunk-TDP6OJET.js";
+import {
+  readDocx,
+  writeDocx
+} from "./chunk-TNSN4ZQ5.js";
+import "./chunk-ISOOUYLI.js";
+
+// src/editor/TextEditor.tsx
+import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Baseline,
+  BetweenHorizontalEnd,
+  BetweenHorizontalStart,
+  BetweenVerticalEnd,
+  BetweenVerticalStart,
+  Bold,
+  Check,
+  CheckCheck,
+  ChevronDown,
+  Code,
+  FilePenLine,
+  Highlighter,
+  ImagePlus,
+  Italic,
+  Link,
+  Link2Off,
+  List,
+  ListChecks,
+  ListIndentDecrease,
+  ListIndentIncrease,
+  ListOrdered,
+  ListTree,
+  Maximize2,
+  MessageSquarePlus,
+  MessagesSquare,
+  Minus,
+  MoveHorizontal,
+  PanelTop,
+  Pencil,
+  Plus,
+  Redo2,
+  RemoveFormatting,
+  Reply,
+  RotateCcw,
+  Save,
+  SeparatorHorizontal,
+  Strikethrough,
+  Table,
+  TableCellsMerge,
+  TableColumnsSplit,
+  TableOfContents,
+  TableRowsSplit,
+  Trash2,
+  Underline,
+  Undo2,
+  WifiOff,
+  X
+} from "lucide-react";
+import { Fragment as Fragment2, useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+
+// src/viewers/DocxView.tsx
+import { useLayoutEffect, useRef, useState } from "react";
+
+// src/viewers/headings.ts
+var last = 0;
+function collect(root, selector, level = (el) => Number(el.tagName.slice(1))) {
+  return [...root.querySelectorAll(selector)].flatMap((el) => {
+    const text = el.textContent?.trim() ?? "";
+    if (!text) return [];
+    if (!el.id) el.id = `w100n-docs-h${++last}`;
+    return [{ id: el.id, level: Math.min(3, Math.max(1, level(el) || 1)), text }];
+  });
+}
+
+// src/viewers/DocxView.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DocxView({ bytes, onOutline, failed }) {
+  const box = useRef(null);
+  const [error, setError] = useState(false);
+  useLayoutEffect(() => {
+    let live = true;
+    let width = 0;
+    const root = box.current;
+    const fit = () => {
+      const wrapper = root.querySelector(".w100n-docx-wrapper");
+      if (wrapper && width) wrapper.style.zoom = String(Math.min(1, root.clientWidth / width));
+    };
+    const watch = new ResizeObserver(fit);
+    root.replaceChildren();
+    setError(false);
+    import("docx-preview").then(({ renderAsync }) => renderAsync(bytes, root, void 0, { inWrapper: true, className: "w100n-docx", ignoreLastRenderedPageBreak: true })).then(() => {
+      if (!live) return;
+      width = Math.max(0, ...[...root.querySelectorAll("section.w100n-docx")].map((page) => page.offsetWidth));
+      fit();
+      watch.observe(root);
+      onOutline(collect(root, '[class*="heading"]', (el) => Number(/heading(\d)/i.exec(el.className)?.[1] ?? 1)));
+    }).catch(() => {
+      if (live) setError(true);
+    });
+    return () => {
+      live = false;
+      watch.disconnect();
+    };
+  }, [bytes, onOutline]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    error && /* @__PURE__ */ jsx("p", { className: "w100n-docs-note", children: failed }),
+    /* @__PURE__ */ jsx("div", { ref: box, className: "w100n-docs-docx" })
+  ] });
+}
+
+// src/editor/TextEditor.tsx
+import { Fragment as Fragment3, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var inks = ["#0f172a", "#475569", "#dc2626", "#ea580c", "#ca8a04", "#16a34a", "#0891b2", "#2563eb", "#7c3aed", "#db2777"];
+var glows = ["#fef08a", "#bbf7d0", "#bfdbfe", "#fbcfe8", "#fed7aa", "#ddd6fe"];
+var uid = () => Math.random().toString(36).slice(2, 10);
+function TextEditor({ kind, bytes, t, language, rights, host, together, documentId, onSaved, onOutline, onPanel, slot, guard }) {
+  const docx = kind === "docx";
+  const can = { edit: !!host?.save && !!rights?.edit, comment: !!host?.comment && !!rights && (rights.comment || rights.edit) };
+  const source = useLoad(async () => {
+    if (docx) return { ...await readDocx(bytes), md: null };
+    const md = fromMarkdown(new TextDecoder().decode(bytes));
+    return { doc: md.doc, md, styles: [], page: a4 };
+  }, [bytes, kind]);
+  const live = useLive(together ? host : void 0, documentId, kind, bytes, source.data?.doc, language, can.edit, onSaved);
+  const shared = live?.ready ? live.wire : null;
+  if (live?.readonly) can.edit = false;
+  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 [pop, setPop] = useState2(null);
+  const [zoom, setZoom] = useState2(null);
+  const [layout, setLayout] = useState2(null);
+  const [room, setRoom] = useState2(0);
+  const [saving, setSaving] = useState2("idle");
+  const [href, setHref] = useState2("");
+  const [grid, setGrid] = useState2({ rows: 0, cols: 0 });
+  const [draft, setDraft] = useState2(null);
+  const [reply, setReply] = useState2(null);
+  const [active, setActive] = useState2(null);
+  const [resolved, setResolved] = useState2(false);
+  const [posting, setPosting] = useState2("idle");
+  const [added, setAdded] = useState2([]);
+  const [changed, setChanged] = useState2({});
+  const [editing, setEditing] = useState2(null);
+  const [dropping, setDropping] = useState2(null);
+  const [failed, setFailed] = useState2(false);
+  useRestore(pop !== null);
+  useRestore(editing !== null);
+  useRestore(dropping !== null);
+  const editor = useEditor({
+    extensions: kit(kind, t, shared),
+    content: shared ? null : source.data?.doc ?? null,
+    editable: can.edit && (!live || !!shared),
+    immediatelyRender: true,
+    shouldRerenderOnTransaction: false,
+    editorProps: { attributes: { class: "w100n-docs-prose w100n-text-body", "aria-label": t.documentText } },
+    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) };
+    }
+  }, [source.data, can.edit, shared]);
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: e }) => {
+      if (!e) return null;
+      const { $from, empty } = e.state.selection;
+      const block = $from.parent;
+      return {
+        style: e.isActive("codeBlock") ? "code" : block.type.name === "heading" ? `h${block.attrs.level}` : e.isActive("blockquote") ? "quote" : "normal",
+        bold: e.isActive("bold"),
+        italic: e.isActive("italic"),
+        underline: e.isActive("underline"),
+        strike: e.isActive("strike"),
+        code: e.isActive("code"),
+        bullets: e.isActive("bulletList"),
+        numbers: e.isActive("orderedList"),
+        tasks: e.isActive("taskList"),
+        align: block.attrs.align ?? "left",
+        table: e.isActive("table"),
+        link: e.isActive("link"),
+        color: e.getAttributes("textStyle").color ?? null,
+        glow: e.isActive("highlight"),
+        undo: e.can().undo(),
+        redo: e.can().redo(),
+        empty,
+        toc: (() => {
+          let at = -1;
+          e.state.doc.forEach((node, pos) => {
+            if (at < 0 && node.type.name === "toc") at = pos;
+          });
+          return at;
+        })(),
+        suggest: !!suggesting.getState(e.state)?.on,
+        revs: docx ? changes(e.state.doc) : [],
+        dirty: !!baseline.current && !e.state.doc.eq(baseline.current.doc)
+      };
+    }
+  });
+  const page = layout ?? source.data?.page ?? a4;
+  useEffect(() => {
+    if (editor && docx && source.data) editor.view.dispatch(editor.state.tr.setMeta(paging, { page }));
+  }, [editor, source.data, page]);
+  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);
+  const threads = all.filter((c) => !c.replyTo && (resolved || !c.resolved)).sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+  const openIds = open.map((c) => c.id).join();
+  useEffect(() => {
+    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] }));
+  }, [editor, source.data, openIds]);
+  useEffect(() => {
+    if (editor && source.data) editor.view.dispatch(editor.state.tr.setMeta(notes, { active }));
+  }, [editor, source.data, active]);
+  useEffect(() => {
+    if (!editor || !source.data) return;
+    let timer = 0;
+    let last2 = "";
+    const run = () => {
+      const list = [];
+      editor.state.doc.forEach((node, offset) => {
+        if (node.type.name !== "heading" || !node.textContent.trim()) return;
+        list.push({ id: `h${offset}`, level: Math.min(3, node.attrs.level), text: node.textContent.trim(), go: () => {
+          editor.view.nodeDOM(offset)?.scrollIntoView({ behavior: "smooth", block: "start" });
+          editor.commands.setTextSelection(offset + 1);
+        } });
+      });
+      const key = JSON.stringify(list.map((h) => [h.id, h.level, h.text]));
+      if (key === last2) return;
+      last2 = key;
+      onOutline(list);
+    };
+    const later = () => {
+      clearTimeout(timer);
+      timer = window.setTimeout(run, 300);
+    };
+    run();
+    editor.on("update", later);
+    return () => {
+      clearTimeout(timer);
+      editor.off("update", later);
+    };
+  }, [editor, source.data, onOutline]);
+  const dirty = live ? live.pending : !!state?.dirty;
+  const unsent = live ? live.unsynced && can.edit : dirty;
+  useEffect(() => {
+    if (!guard || live || !dirty || !source.data || !editor) return;
+    guard.current = save;
+    return () => {
+      guard.current = null;
+    };
+  });
+  useEffect(() => {
+    if (!unsent) return;
+    const stop = (e) => e.preventDefault();
+    window.addEventListener("beforeunload", stop);
+    return () => window.removeEventListener("beforeunload", stop);
+  }, [unsent]);
+  useEffect(() => {
+    const el = scroller.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const watch = new ResizeObserver(() => setRoom(el.clientWidth));
+    watch.observe(el);
+    return () => watch.disconnect();
+  }, [editor, source.data]);
+  useEffect(() => {
+    if (!pop) return;
+    const close = (e) => {
+      if (!e.target.closest(".w100n-text-pop, [data-pop]")) setPop(null);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [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 () => {
+    if (live) {
+      if (!can.edit || !live.ready || !live.online || !live.pending || saving === "busy") return false;
+      setSaving("busy");
+      const ok = await live.save();
+      setSaving(ok ? "done" : "failed");
+      return ok;
+    }
+    const was = baseline.current;
+    const doc = editor.state.doc;
+    if (!can.edit || !was || saving === "busy" || doc.eq(was.doc)) 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);
+      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 };
+      }
+      setSaving("done");
+      onSaved?.();
+      return true;
+    } catch {
+      setSaving("failed");
+      return false;
+    }
+  };
+  const renew = (fresh) => {
+    const at = [];
+    const refs = [];
+    editor.state.doc.descendants((node, pos) => {
+      if (node.isBlock) at.push(pos);
+    });
+    editor.schema.nodeFromJSON(fresh).descendants((node) => {
+      if (node.isBlock) refs.push(node.type.name, node.attrs.ref);
+    });
+    if (refs.length !== at.length * 2 || at.some((pos, i) => editor.state.doc.nodeAt(pos).type.name !== refs[i * 2])) return false;
+    const tr = editor.state.tr.setMeta("addToHistory", false);
+    at.forEach((pos, i) => {
+      if (tr.doc.nodeAt(pos).attrs.ref !== refs[i * 2 + 1]) tr.setNodeAttribute(pos, "ref", refs[i * 2 + 1]);
+    });
+    editor.view.dispatch(tr);
+    return true;
+  };
+  const linkUp = () => {
+    setHref(editor.getAttributes("link").href ?? "");
+    setTab("insert");
+    setPop("link");
+  };
+  const putLink = () => {
+    const value = href.trim();
+    const chain = editor.chain().focus();
+    if (!value) chain.extendMarkRange("link").unsetLink().run();
+    else if (editor.state.selection.empty && !editor.isActive("link")) chain.insertContent({ type: "text", text: value, marks: [{ type: "link", attrs: { href: value } }] }).run();
+    else chain.extendMarkRange("link").setLink({ href: value }).run();
+    setPop(null);
+  };
+  const begin = () => {
+    const { from, to, empty } = editor.state.selection;
+    if (empty || !can.comment) return;
+    editor.view.dispatch(editor.state.tr.setMeta(notes, { pending: { from, to } }));
+    setDraft({ quote: editor.state.doc.textBetween(from, to, "\n", " "), body: "" });
+    setPosting("idle");
+    onPanel?.("comments");
+  };
+  const drop = () => {
+    editor.view.dispatch(editor.state.tr.setMeta(notes, { pending: null }));
+    setDraft(null);
+  };
+  const post = async () => {
+    if (!draft?.body.trim() || !host?.comment || posting === "busy") return;
+    setPosting("busy");
+    try {
+      const anchor = uid();
+      const made = await host.comment(documentId, { body: draft.body.trim(), quote: draft.quote, replyTo: null, anchor });
+      anchors.current.set(made.id, anchor);
+      const range = notes.getState(editor.state).pending;
+      editor.view.dispatch(editor.state.tr.setMeta(notes, { pending: null, spots: [...notes.getState(editor.state).spots, ...range ? [{ id: made.id, ...range }] : []] }));
+      setAdded((list) => [...list, made]);
+      setDraft(null);
+      setActive(made.id);
+      setPosting("idle");
+    } catch {
+      setPosting("failed");
+    }
+  };
+  const answer = async (parent) => {
+    if (!reply?.body.trim() || !host?.comment || posting === "busy") return;
+    setPosting("busy");
+    try {
+      const made = await host.comment(documentId, { body: reply.body.trim(), quote: parent.quote, replyTo: parent.id, anchor: anchors.current.get(parent.id) ?? "" });
+      setAdded((list) => [...list, made]);
+      setReply(null);
+      setPosting("idle");
+    } catch {
+      setPosting("failed");
+    }
+  };
+  const settle = async (c) => {
+    try {
+      await host.resolveComment(documentId, c.id, !c.resolved);
+      setChanged((list) => ({ ...list, [c.id]: { ...c, resolved: !c.resolved } }));
+    } catch {
+      setPosting("failed");
+    }
+  };
+  const change = async (id, body) => {
+    if (posting === "busy") return;
+    setPosting("busy");
+    setFailed(false);
+    try {
+      let made = null;
+      if (body === null) await host.deleteComment(documentId, id);
+      else made = await host.editComment(documentId, id, body);
+      setChanged((list) => ({ ...list, [id]: made }));
+      setEditing(null);
+      setDropping(null);
+      if (body === null && active === id) setActive(null);
+    } catch {
+      setFailed(true);
+    }
+    setPosting("idle");
+  };
+  const mine = (c) => c.author.id === host?.me.id;
+  const drops = (c) => mine(c) || c.author.id.startsWith("guest:") && !!rights?.edit;
+  const show = (c) => {
+    setActive(c.id);
+    const spot = notes.getState(editor.state).spots.find((s) => s.id === c.id);
+    if (!spot) return;
+    const at = editor.view.domAtPos(spot.from).node;
+    (at instanceof HTMLElement ? at : at.parentElement)?.scrollIntoView({ behavior: "smooth", block: "center" });
+  };
+  const suggested = [...state.revs.reduce((all2, c) => {
+    const key = `${c.kind}:${c.id}`;
+    const was = all2.get(key);
+    all2.set(key, was ? { ...was, text: `${was.text} ${c.text}` } : c);
+    return all2;
+  }, /* @__PURE__ */ new Map()).values()];
+  const jump = (at) => {
+    const dom = editor.view.domAtPos(at).node;
+    (dom instanceof HTMLElement ? dom : dom.parentElement)?.scrollIntoView({ behavior: "smooth", block: "center" });
+  };
+  const percent = zoom ?? (docx && room ? Math.max(10, Math.min(100, Math.floor((room - 24) / page.width * 100))) : 100);
+  const zoomBy = (d) => setZoom(Math.min(200, Math.max(30, percent + d)));
+  const keys = (e) => {
+    if (e.defaultPrevented) return;
+    const key = e.key.toLowerCase();
+    const mod = e.metaKey || e.ctrlKey;
+    if (key === "escape" && (pop || draft)) {
+      e.stopPropagation();
+      if (pop) setPop(null);
+      else drop();
+      return;
+    }
+    if (!mod) 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 === "m" && e.altKey && can.comment) act(begin);
+    else if (!can.edit || e.altKey) return;
+    else if (key === "]" || key === "[") act(() => indent(editor, key === "]" ? 1 : -1));
+    else if (key === "\\") act(() => clear(editor));
+    else if (key === "enter" && docx) act(() => editor.chain().focus().insertContent({ type: "pageBreak" }).run());
+    else if (e.shiftKey && docx && ["l", "e", "r", "j"].includes(key)) act(() => align(editor, { l: "left", e: "center", r: "right", j: "justify" }[key]));
+  };
+  const tool = (icon, label, run, pressed, disabled) => {
+    const Icon = icon;
+    return /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": label, title: label, "aria-pressed": pressed, disabled, onClick: () => {
+      run();
+    }, children: /* @__PURE__ */ jsx2(Icon, { "aria-hidden": true }) });
+  };
+  const gap = /* @__PURE__ */ jsx2("span", { className: "w100n-pdf-gap" });
+  const known = source.data.styles;
+  const named = (test) => {
+    const name = known.find(test)?.name;
+    return name && `${name[0].toUpperCase()}${name.slice(1)}`;
+  };
+  const levels = docx ? [1, 2, 3, 4, 5, 6].filter((level) => level <= 4 || named((s) => s.heading === level)) : [1, 2, 3, 4];
+  const styles = [
+    ["normal", t.normal, () => editor.chain().focus().clearNodes().setParagraph().run()],
+    ...levels.map((level) => [
+      `h${level}`,
+      named((s) => s.heading === level && !/^title$/i.test(s.name)) || `${t.heading} ${level}`,
+      () => editor.chain().focus().setHeading({ level }).run()
+    ]),
+    ["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: [
+    c.author.avatarUrl ? /* @__PURE__ */ jsx2("img", { className: "w100n-text-face", src: c.author.avatarUrl, alt: "" }) : /* @__PURE__ */ jsx2("span", { className: "w100n-text-face", "aria-hidden": true, children: c.author.name.slice(0, 1).toUpperCase() }),
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-text-who", children: [
+      /* @__PURE__ */ jsxs2("b", { children: [
+        c.author.name,
+        c.author.id.startsWith("guest:") && /* @__PURE__ */ jsx2("span", { className: "w100n-docs-badge", children: t.guest })
+      ] }),
+      /* @__PURE__ */ jsx2("small", { children: when(c.createdAt) })
+    ] }),
+    drops(c) && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-own", onClick: (e) => e.stopPropagation(), children: [
+      mine(c) && host.editComment && /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": t.editComment, title: t.editComment, onClick: () => {
+        setDropping(null);
+        setEditing({ id: c.id, body: c.body });
+      }, children: /* @__PURE__ */ jsx2(Pencil, { "aria-hidden": true }) }),
+      host.deleteComment && /* @__PURE__ */ jsx2("button", { type: "button", "data-tone": "red", "aria-label": t.delete, title: t.delete, onClick: () => {
+        setEditing(null);
+        setDropping(c.id);
+      }, children: /* @__PURE__ */ jsx2(Trash2, { "aria-hidden": true }) })
+    ] })
+  ] });
+  const words = (c) => editing?.id === c.id ? /* @__PURE__ */ jsxs2("div", { className: "w100n-text-reply w100n-text-edit", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        autoFocus: true,
+        value: editing.body,
+        "aria-label": t.editComment,
+        onChange: (e) => setEditing({ ...editing, body: e.target.value }),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && editing.body.trim()) void change(c.id, editing.body.trim());
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => setEditing(null), children: t.cancel }),
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !editing.body.trim() || editing.body.trim() === c.body || posting === "busy", onClick: () => void change(c.id, editing.body.trim()), children: [
+        /* @__PURE__ */ jsx2(Save, { "aria-hidden": true }),
+        t.save
+      ] })
+    ] })
+  ] }) : dropping === c.id ? /* @__PURE__ */ jsxs2("div", { className: "w100n-text-confirm", role: "group", "aria-label": t.delete, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx2("p", { children: c.replyTo || !all.some((r) => r.replyTo === c.id) ? t.deleteAsk : t.deleteThread }),
+    /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", autoFocus: true, onClick: () => setDropping(null), children: t.cancel }),
+      /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "red", disabled: posting === "busy", onClick: () => void change(c.id, null), children: [
+        /* @__PURE__ */ jsx2(Trash2, { "aria-hidden": true }),
+        t.delete
+      ] })
+    ] })
+  ] }) : /* @__PURE__ */ jsx2("p", { children: c.body });
+  const pick = (next) => setPop(pop === next ? null : next);
+  const swatches = (list, current, set, none) => /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-swatches", role: "group", children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-text-none", onClick: () => {
+      set(null);
+      setPop(null);
+    }, children: none }),
+    list.map((c, i) => /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": c, "aria-pressed": current === c, onClick: () => {
+      set(c);
+      setPop(null);
+    }, children: /* @__PURE__ */ jsx2("i", { style: { background: c } }) }, i))
+  ] });
+  let tools = null;
+  if (shown === "home") tools = /* @__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: [
+        styles.find(([key]) => key === state.style)?.[1] ?? t.normal,
+        /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": true })
+      ] }),
+      pop === "style" && /* @__PURE__ */ jsx2("span", { className: "w100n-text-pop w100n-text-styles", role: "listbox", "aria-label": t.paragraphStyle, children: styles.map(([key, label, run]) => /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "data-style": key,
+          "aria-selected": state.style === key,
+          onClick: () => {
+            run();
+            setPop(null);
+          },
+          children: label
+        },
+        key
+      )) })
+    ] }),
+    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(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: [
+        /* @__PURE__ */ jsx2(Baseline, { "aria-hidden": true }),
+        /* @__PURE__ */ jsx2("i", { className: "w100n-text-bar", style: { background: state.color ?? "currentColor" } })
+      ] }),
+      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,
+    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))
+    ] }),
+    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 })
+      ] })
+    ] }),
+    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,
+    /* @__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("");
+        pick("image");
+      }, children: /* @__PURE__ */ jsx2(ImagePlus, { "aria-hidden": true }) }),
+      pop === "image" && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-pop w100n-text-form", children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            autoFocus: true,
+            value: href,
+            placeholder: t.imageLink,
+            "aria-label": t.imageLink,
+            onChange: (e) => setHref(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && href.trim()) {
+                editor.chain().focus().setImage({ src: href.trim() }).run();
+                setPop(null);
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "w100n-docs-row", children: [
+          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 reader = new FileReader();
+              reader.onload = () => {
+                editor.chain().focus().setImage({ src: String(reader.result), alt: file.name }).run();
+                setPop(null);
+              };
+              reader.readAsDataURL(file);
+            } })
+          ] }),
+          /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !href.trim(), onClick: () => {
+            editor.chain().focus().setImage({ src: href.trim() }).run();
+            setPop(null);
+          }, children: [
+            /* @__PURE__ */ jsx2(ImagePlus, { "aria-hidden": true }),
+            t.put
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__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
+          ] })
+        ] })
+      ] })
+    ] }),
+    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
+    ] }),
+    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
+        ] })
+      ] })
+    ] }),
+    /* @__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,
+      "%"
+    ] }),
+    tool(Plus, t.zoomIn, () => zoomBy(10)),
+    docx && tool(MoveHorizontal, t.fitWidth, () => setZoom(null), zoom === null),
+    tool(Maximize2, t.fit, () => setZoom(100)),
+    gap,
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-text-word", onClick: () => onPanel?.("outline"), children: [
+      /* @__PURE__ */ jsx2(ListTree, { "aria-hidden": true }),
+      t.outline
+    ] })
+  ] });
+  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
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "w100n-text-tools", role: "group", "aria-label": tabs.find(([key]) => key === shown)?.[1], children: tools })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { ref: scroller, className: "w100n-text-scroll", 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 }) }) }) }),
+    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 }),
+        /* @__PURE__ */ jsx2(
+          "textarea",
+          {
+            autoFocus: true,
+            value: draft.body,
+            placeholder: t.writeComment,
+            "aria-label": t.writeComment,
+            onChange: (e) => setDraft({ ...draft, body: e.target.value }),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void post();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+          /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: drop, children: t.cancel }),
+          /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !draft.body.trim() || posting === "busy", onClick: () => void post(), children: [
+            /* @__PURE__ */ jsx2(MessageSquarePlus, { "aria-hidden": true }),
+            t.post
+          ] })
+        ] })
+      ] }),
+      suggested.length > 0 && /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        /* @__PURE__ */ jsxs2("p", { className: "w100n-docs-caption", children: [
+          /* @__PURE__ */ jsx2(FilePenLine, { "aria-hidden": true }),
+          t.suggestions,
+          /* @__PURE__ */ jsx2("span", { children: suggested.length })
+        ] }),
+        suggested.map((c, i) => /* @__PURE__ */ jsxs2("article", { className: "w100n-text-card w100n-text-change", "data-kind": c.kind, onClick: () => jump(c.from), children: [
+          /* @__PURE__ */ jsxs2("header", { children: [
+            /* @__PURE__ */ jsx2("span", { className: "w100n-text-face", "aria-hidden": true, children: (c.author || "?").slice(0, 1).toUpperCase() }),
+            /* @__PURE__ */ jsxs2("span", { className: "w100n-text-who", children: [
+              /* @__PURE__ */ jsx2("b", { children: c.author || t.someone }),
+              c.date && /* @__PURE__ */ jsx2("small", { children: when(c.date) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("p", { children: [
+            c.kind === "insertion" ? t.added : t.removed,
+            " ",
+            /* @__PURE__ */ jsx2("q", { children: c.text })
+          ] }),
+          can.edit && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-actions", onClick: (e) => e.stopPropagation(), children: [
+            /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "green", onClick: () => decide(editor, true, c.id), children: [
+              /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+              t.accept
+            ] }),
+            /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "red", onClick: () => decide(editor, false, c.id), children: [
+              /* @__PURE__ */ jsx2(X, { "aria-hidden": true }),
+              t.reject
+            ] })
+          ] })
+        ] }, i))
+      ] }),
+      posting === "failed" && /* @__PURE__ */ jsx2("p", { className: "w100n-docs-muted", role: "alert", children: t.commentFailed }),
+      failed && /* @__PURE__ */ jsx2("p", { className: "w100n-docs-muted", role: "alert", children: t.changeFailed }),
+      /* @__PURE__ */ jsxs2("div", { className: "w100n-docs-row", children: [
+        /* @__PURE__ */ jsxs2("p", { className: "w100n-docs-caption", children: [
+          /* @__PURE__ */ jsx2(MessagesSquare, { "aria-hidden": true }),
+          t.comments,
+          /* @__PURE__ */ jsx2("span", { children: open.length })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { className: "w100n-docs-chips", children: /* @__PURE__ */ jsx2("button", { type: "button", "aria-pressed": resolved, onClick: () => setResolved(!resolved), children: t.showResolved }) })
+      ] }),
+      !threads.length && !draft && /* @__PURE__ */ jsx2("p", { className: "w100n-docs-muted", children: can.comment ? t.commentHint : t.noComments }),
+      threads.map((c) => /* @__PURE__ */ jsxs2("article", { className: "w100n-text-card", "aria-current": active === c.id, "data-resolved": c.resolved, onClick: () => show(c), children: [
+        person(c),
+        c.quote && /* @__PURE__ */ jsx2("blockquote", { children: c.quote }),
+        words(c),
+        all.filter((r) => r.replyTo === c.id).map((r) => /* @__PURE__ */ jsxs2("div", { className: "w100n-text-reply", children: [
+          person(r),
+          words(r)
+        ] }, r.id)),
+        reply?.id === c.id && /* @__PURE__ */ jsxs2("div", { className: "w100n-text-reply", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx2(
+            "textarea",
+            {
+              autoFocus: true,
+              value: reply.body,
+              placeholder: t.writeComment,
+              "aria-label": t.reply,
+              onChange: (e) => setReply({ ...reply, body: e.target.value }),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void answer(c);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs2("span", { className: "w100n-pdf-dialog-end", children: [
+            /* @__PURE__ */ jsx2("button", { type: "button", className: "w100n-pdf-link", onClick: () => setReply(null), children: t.cancel }),
+            /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", disabled: !reply.body.trim() || posting === "busy", onClick: () => void answer(c), children: [
+              /* @__PURE__ */ jsx2(Reply, { "aria-hidden": true }),
+              t.reply
+            ] })
+          ] })
+        ] }),
+        can.comment && reply?.id !== c.id && /* @__PURE__ */ jsxs2("span", { className: "w100n-text-actions", onClick: (e) => e.stopPropagation(), children: [
+          c.resolved && /* @__PURE__ */ jsx2("span", { className: "w100n-docs-badge", children: t.resolved }),
+          !c.resolved && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", onClick: () => setReply({ id: c.id, body: "" }), children: [
+            /* @__PURE__ */ jsx2(Reply, { "aria-hidden": true }),
+            t.reply
+          ] }),
+          host?.resolveComment && /* @__PURE__ */ jsxs2("button", { type: "button", className: "w100n-docs-action", "data-tone": "green", onClick: () => void settle(c), children: [
+            c.resolved ? /* @__PURE__ */ jsx2(RotateCcw, { "aria-hidden": true }) : /* @__PURE__ */ jsx2(Check, { "aria-hidden": true }),
+            c.resolved ? t.reopen : t.resolve
+          ] })
+        ] })
+      ] }, c.id))
+    ] }), slot)
+  ] });
+}
+export {
+  TextEditor as default
+};
+//# sourceMappingURL=TextEditor-4YETNX4T.js.map