@arbidocs/blocks 0.4.105 → 0.4.107

package/dist/{chunk-W2RTZOK3.js → chunk-2SJTXYRM.js}

@@ -3,20 +3,20 @@ import { FactPassageItem } from './chunk-HFZ45FD3.js';
 import { stylesXml, definitionBookmark, groupDefinitions, definitionLabels, filterTermGroups, esc, hyperlinkRelationship, docxPackage, documentXml, definitionIdOfBookmark, compareTerms, parseDefinition } from './chunk-EPHGD4YV.js';
 import { filterMentionCandidates, MentionMenu, findMentionQuery, listOptionId, extractMentions, useListKeyNav } from './chunk-AA3PT6KR.js';
 import { unzipSync, strFromU8, strToU8, zipSync } from 'fflate';
-import { collectReviewItems, revisionItemsOf } from '@docx-editor.dev/core/store';
-import React4, { createContext, useContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo, useSyncExternalStore } from 'react';
-import { useDocxEditor, ReviewRailContext, useEditorSnapshot, useEditorState, useChromeTranslate, DocxEditor, createFontSource, useParagraphStyle, normalizeImageBytes, usePageSetup, useEditorCommand } from '@docx-editor.dev/react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import { AiMarkdown, Dialog, DialogContent, DialogHeader, DialogTitle, cn, DialogDescription, Button, DialogFooter, Tabs, TabsList, TabsTrigger, TabsContent, Input, splitMarkdownBlocks } from '@arbidocs/react/ui';
-import { MessageSquarePlus, MessageSquare, PencilLine, ChevronLeft, ChevronRight, X, ChevronUp, ChevronDown, CheckCheck, RotateCcw, CircleCheck, Trash2, Check, SendHorizontal, Loader2, Sparkles, Type, Pilcrow, UsersRound, RefreshCw, WifiOff, Download, Save, Ellipsis, BookA, Blocks, Link2, Superscript, NotebookText, RefreshCcw, Columns2, Settings2, BetweenHorizontalStart, BetweenHorizontalEnd, BetweenVerticalStart, BetweenVerticalEnd, Merge, Split, Heading, AlignVerticalJustifyStart, AlignVerticalJustifyCenter, AlignVerticalJustifyEnd, RotateCw, FlipHorizontal2, FlipVertical2, Scaling, RectangleVertical, RectangleHorizontal, FileText, SeparatorHorizontal, Captions } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React4, { createContext, useContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
-import { defaultLegalTemplate, listBuildingBlocks, attachedTemplateOf, linkedLevelStyles, styleDivergence, buildingBlockFragment, fragmentClipboardHtml, trackInsertion, newFromTemplate } from '@arbidocs/coedit/template';
-import { resolveNumberingLevel, resolveStoryListItems, buildStyleCascadeTable, withNumberingStyleLinks, buildNumberingIndex } from '@docx-editor.dev/core/layout';
-import { executeImageCommand } from '@docx-editor.dev/core/editor';
-import { renderToStaticMarkup } from 'react-dom/server';
+import { collectReviewItems, revisionItemsOf } from '@docx-editor.dev/core/store';
+import { useDocxEditor, ReviewRailContext, useEditorSnapshot, useEditorState, useChromeTranslate, DocxEditor, useParagraphStyle, normalizeImageBytes, usePageSetup, useEditorCommand } from '@docx-editor.dev/react';
+import { MessageSquarePlus, MessageSquare, PencilLine, ChevronLeft, ChevronRight, X, ChevronUp, ChevronDown, CheckCheck, RotateCcw, CircleCheck, Trash2, Check, SendHorizontal, Loader2, Sparkles, Type, Pilcrow, UsersRound, RefreshCw, WifiOff, Download, Save, Ellipsis, BookA, Blocks, Link2, Superscript, NotebookText, RefreshCcw, Columns2, Settings2, BetweenHorizontalStart, BetweenHorizontalEnd, BetweenVerticalStart, BetweenVerticalEnd, Merge, Split, Heading, AlignVerticalJustifyStart, AlignVerticalJustifyCenter, AlignVerticalJustifyEnd, RotateCw, FlipHorizontal2, FlipVertical2, Scaling, RectangleVertical, RectangleHorizontal, FileText, SeparatorHorizontal, Captions } from 'lucide-react';
 import * as Y from 'yjs';
 import { DOCUMENT_COLLABORATION_VERSIONS, collaborationModule } from '@arbidocs/coedit';
 import { createHocuspocusCollaboration } from '@arbidocs/coedit/hocuspocus';
+import { defaultLegalTemplate, listBuildingBlocks, attachedTemplateOf, linkedLevelStyles, styleDivergence, buildingBlockFragment, fragmentClipboardHtml, trackInsertion, newFromTemplate } from '@arbidocs/coedit/template';
+import { resolveNumberingLevel, resolveStoryListItems, buildStyleCascadeTable, withNumberingStyleLinks, buildNumberingIndex } from '@docx-editor.dev/core/layout';
+import { executeImageCommand } from '@docx-editor.dev/core/editor';
 
 function normalizeDocxExport(data) {
   const files = unzipSync(new Uint8Array(data));
@@ -82,6 +82,93 @@ function normalizeDocxExport(data) {
   if (!changed) return data;
   return zipSync(files).slice().buffer;
 }
+function wordDraftHtml(markdown) {
+  const template = document.createElement("template");
+  template.innerHTML = renderToStaticMarkup(/* @__PURE__ */ jsx(AiMarkdown, { children: markdown }));
+  template.content.querySelectorAll('button, svg, [data-testid="code-block-header"]').forEach((node) => node.remove());
+  template.content.querySelectorAll('[data-testid="markdown-code-block"]').forEach((node) => {
+    const pre = node.querySelector("pre");
+    if (pre) node.replaceWith(pre);
+  });
+  return template.innerHTML;
+}
+function requireEdit(result) {
+  if (!result.ok) throw new Error(result.reason);
+}
+var WordDraftStream = class {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  editor;
+  committed = [];
+  pending;
+  resetAfterFailure = false;
+  update(content, complete) {
+    const blocks = splitMarkdownBlocks(content);
+    const completeCount = complete ? blocks.length : Math.max(0, blocks.length - 1);
+    requireEdit(this.editor.setEditingMode("editing"));
+    try {
+      if (this.resetAfterFailure || this.committed.some((block, index) => blocks[index] !== block)) {
+        requireEdit(this.editor.exec({ type: "selectAll" }));
+        requireEdit(this.editor.exec({ type: "deleteText" }));
+        this.committed = [];
+        this.pending = void 0;
+        this.resetAfterFailure = false;
+      }
+      for (let index = this.committed.length; index < blocks.length; index++) {
+        const tail = this.editor.query({ type: "paragraphs" }).at(-1);
+        const start = this.pending?.start || tail?.paraId;
+        if (!start) throw new Error("The draft insertion paragraph is unavailable.");
+        requireEdit(
+          this.editor.exec(
+            this.pending ? {
+              type: "setSelection",
+              range: { from: { paraId: start }, to: { paraId: this.pending.end } }
+            } : { type: "setSelection", anchor: { paraId: start } }
+          )
+        );
+        const html = wordDraftHtml(blocks[index]) + "<p></p>";
+        const element = document.createElement("div");
+        element.innerHTML = html;
+        const startIndex = this.editor.query({ type: "paragraphs" }).findIndex((p) => p.paraId === start);
+        requireEdit(this.editor.exec({ type: "paste", html, text: element.textContent || "" }));
+        const inserted = this.editor.query({ type: "paragraphs" }).slice(startIndex);
+        let headingIndex = 0;
+        for (const heading of Array.from(element.querySelectorAll("h1,h2,h3,h4,h5,h6"))) {
+          const match = inserted.findIndex(
+            (p, i) => i >= headingIndex && p.text === heading.textContent
+          );
+          if (match >= 0 && inserted[match].paraId) {
+            requireEdit(
+              this.editor.exec({
+                type: "setSelection",
+                anchor: { paraId: inserted[match].paraId }
+              })
+            );
+            requireEdit(
+              this.editor.exec({
+                type: "setParagraphStyle",
+                styleId: `Heading${heading.tagName.slice(1)}`
+              })
+            );
+            headingIndex = match + 1;
+          }
+        }
+        const end = this.editor.query({ type: "paragraphs" }).at(-1)?.paraId;
+        if (!end) throw new Error("The draft continuation paragraph is unavailable.");
+        if (index < completeCount) {
+          this.committed.push(blocks[index]);
+          this.pending = void 0;
+        } else this.pending = { start, end };
+      }
+    } catch (error) {
+      this.resetAfterFailure = true;
+      throw error;
+    } finally {
+      requireEdit(this.editor.setEditingMode("viewing"));
+    }
+  }
+};
 function findNode(node, id) {
   if (node.id === id) return node;
   for (const child of node.children ?? []) {
@@ -105,6 +192,22 @@ function reviewModule() {
     }
   };
 }
+
+// src/docx/review/commentText.ts
+var SKIP = /* @__PURE__ */ new Set(["delText", "instrText", "delInstrText", "pPr", "rPr"]);
+function inline(node) {
+  if (node.kind === "textValue") return node.value ?? "";
+  if (node.localName && SKIP.has(node.localName)) return "";
+  if (node.localName === "br" || node.localName === "cr") return "\n";
+  if (node.localName === "tab") return "	";
+  return (node.children ?? []).map(inline).join("");
+}
+function commentText(entry) {
+  if (entry.kind !== "comment") return entry.text;
+  const blocks = entry.item?.comment?.blocks ?? [];
+  const text = blocks.map(inline).join("\n").trim();
+  return text || entry.text;
+}
 var NONE = [];
 var ok = (result) => result?.ok === true;
 function useReview() {
@@ -140,22 +243,6 @@ var ReviewItemContext = createContext(null);
 function useReviewItem() {
   return useContext(ReviewItemContext);
 }
-
-// src/docx/review/commentText.ts
-var SKIP = /* @__PURE__ */ new Set(["delText", "instrText", "delInstrText", "pPr", "rPr"]);
-function inline(node) {
-  if (node.kind === "textValue") return node.value ?? "";
-  if (node.localName && SKIP.has(node.localName)) return "";
-  if (node.localName === "br" || node.localName === "cr") return "\n";
-  if (node.localName === "tab") return "	";
-  return (node.children ?? []).map(inline).join("");
-}
-function commentText(entry) {
-  if (entry.kind !== "comment") return entry.text;
-  const blocks = entry.item?.comment?.blocks ?? [];
-  const text = blocks.map(inline).join("\n").trim();
-  return text || entry.text;
-}
 var CARD_GAP = 8;
 var CLUSTER_GAP = 24;
 var REVIEW_MARGIN_MIN_WIDTH = 900;
@@ -1793,6 +1880,8 @@ function structuralPort(editor) {
     }
   };
 }
+
+// src/docx/structural/useTrackedOrNoted.ts
 var DocxAuthorContext = createContext("You");
 function useTrackedOrNoted() {
   const editor = useDocxEditor();
@@ -2176,1796 +2265,1529 @@ function DefinedTermMenu({
     }
   );
 }
-var BUILTIN_TEMPLATE_NAME = "ARBI legal template";
-var templateFileName = (t) => /\.(dotx|dotm|docx|docm)$/i.test(t.name) ? t.name : `${t.name}.dotx`;
-var builtin;
-function builtinHouseTemplate() {
-  builtin ??= { bytes: defaultLegalTemplate(), name: BUILTIN_TEMPLATE_NAME, source: "builtin" };
-  return builtin;
-}
-async function resolveHouseTemplate(host) {
-  if (!host) return builtinHouseTemplate();
-  try {
-    return await host.load();
-  } catch {
-    return builtinHouseTemplate();
-  }
-}
-var HouseTemplateContext = createContext(null);
-var useHouseTemplate = () => useContext(HouseTemplateContext);
-function HouseTemplateProvider({
-  host,
-  documentId,
-  editable,
-  notify,
-  enabled = true,
-  children
+function RibbonMenu({
+  label,
+  icon,
+  children,
+  className,
+  testId,
+  title,
+  keepMounted = false,
+  popoverClassName
 }) {
-  const editor = useDocxEditor();
-  const track = useTrackedOrNoted();
-  const [template, setTemplate] = useState(builtinHouseTemplate);
-  const [divergence, setDivergence] = useState(null);
-  const [basedOnTemplate, setBasedOnTemplate] = useState(false);
-  const [levels, setLevels] = useState({});
-  const [generation, setGeneration] = useState(0);
+  const [open, setOpen] = useState(false);
+  const element = useRef(null);
   useEffect(() => {
-    let live = true;
-    void resolveHouseTemplate(host).then((t) => live && setTemplate(t));
-    return () => {
-      live = false;
+    if (!open) return;
+    const dismiss = (event) => {
+      if (!element.current?.contains(event.target)) setOpen(false);
     };
-  }, [host]);
-  const blocks = useMemo(() => {
-    try {
-      return listBuildingBlocks(template.bytes);
-    } catch {
-      return [];
-    }
-  }, [template]);
-  useEffect(() => {
-    if (!editor || !enabled) return;
-    let live = true;
-    void editor.save().then((saved) => {
-      if (!live || !saved) return;
-      const bytes = new Uint8Array(saved);
-      setBasedOnTemplate(attachedTemplateOf(bytes) === templateFileName(template));
-      setLevels(linkedLevelStyles(bytes));
-      setDivergence(styleDivergence(bytes, template.bytes));
-    }).catch(() => live && setDivergence(null));
+    const escape = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", dismiss);
+    document.addEventListener("keydown", escape);
     return () => {
-      live = false;
+      document.removeEventListener("pointerdown", dismiss);
+      document.removeEventListener("keydown", escape);
     };
-  }, [editor, template, generation, enabled]);
-  const refresh = useCallback(() => setGeneration((g) => g + 1), []);
-  const insertBlock = useCallback(
-    (name) => {
-      if (!editor || !editable) return false;
-      const fragment = buildingBlockFragment(template.bytes, name);
-      if (!fragment) return false;
-      try {
-        const result = track({
-          label: `Inserted Quick Part: ${name}`,
-          insert: (revision) => editor.exec({
-            type: "paste",
-            text: "",
-            html: fragmentClipboardHtml(
-              revision ? trackInsertion(fragment, revision, true) : fragment
-            )
-          }),
-          inserted: (r) => r.ok
-        })?.result;
-        if (!result?.ok) throw new Error(result?.reason ?? "The block could not be inserted here.");
-        refresh();
-        return true;
-      } catch (failure) {
-        notify?.(
-          failure instanceof Error ? failure.message : "Could not insert the block.",
-          "error"
-        );
-        return false;
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { className: "native-docx-ribbon-menu", ref: element, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: ["native-docx-ribbon-trigger", className].filter(Boolean).join(" "),
+        "aria-label": label,
+        title: title ?? label,
+        "aria-expanded": open,
+        "data-testid": testId,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => setOpen((value) => !value),
+        children: icon
       }
-    },
-    [editor, editable, template, notify, refresh, track]
-  );
-  const setAsHouseTemplate = useMemo(
-    () => host?.setFromDocument && documentId ? async () => {
-      try {
-        await host.setFromDocument(documentId);
-        setTemplate(await resolveHouseTemplate(host));
-        notify?.("This document is now the house template for new documents.", "success");
-      } catch (failure) {
-        notify?.(
-          failure instanceof Error ? failure.message : "Could not set the house template.",
-          "error"
-        );
+    ),
+    (open || keepMounted) && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: ["native-docx-ribbon-popover", popoverClassName].filter(Boolean).join(" "),
+        role: "group",
+        "aria-label": label,
+        hidden: !open,
+        onMouseDown: (event) => {
+          if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement))
+            event.preventDefault();
+        },
+        children: typeof children === "function" ? children(() => setOpen(false)) : children
       }
-    } : void 0,
-    [host, documentId, notify]
-  );
-  const value = useMemo(
-    () => ({
-      template,
-      blocks,
-      divergence,
-      basedOnTemplate,
-      levels,
-      insertBlock,
-      refresh,
-      setAsHouseTemplate,
-      editable
-    }),
-    [
-      template,
-      blocks,
-      divergence,
-      basedOnTemplate,
-      levels,
-      insertBlock,
-      refresh,
-      setAsHouseTemplate,
-      editable
-    ]
-  );
-  return /* @__PURE__ */ jsx(HouseTemplateContext.Provider, { value: enabled ? value : null, children });
+    )
+  ] });
 }
 
-// src/docx/references/numbering.ts
-var numbers = (level) => !!level && level.numFmt !== "bullet" && level.numFmt !== "none" && (level.lvlText ?? level.markerText ?? "").length > 0;
-function paragraphNumber(order, items, levelOf, paragraphId) {
-  const item = items.get(paragraphId);
-  if (!item || !numbers(item)) return null;
-  const at = order.indexOf(paragraphId);
-  const markerAt = (ilvl) => {
-    if (ilvl === item.ilvl) return item.markerText;
-    for (let i = at - 1; i >= 0; i--) {
-      const other = items.get(order[i]);
-      if (other && other.numId === item.numId && other.ilvl === ilvl) return other.markerText;
-    }
-    return null;
-  };
-  const chain = [];
-  const texts = [];
-  for (let u = item.ilvl; u >= 0; u--) {
-    const level = levelOf(item.numId, u);
-    if (!level || !numbers(level)) continue;
-    if (u !== item.ilvl && texts.some((t) => t.includes(`%${u + 1}`))) continue;
-    chain.push(u);
-    texts.push(level.lvlText);
-  }
-  const value = chain.reverse().map((u) => markerAt(u) ?? "").join("");
-  if (!value) return null;
-  return value.length > 1 && value.endsWith(".") ? value.slice(0, -1) : value;
-}
-function listTargets(paragraphs, items, levelOf) {
-  const order = paragraphs.map((p) => p.id);
-  const out = [];
-  for (const p of paragraphs) {
-    const text = p.text.replace(//g, "").trim();
-    if (!text) continue;
-    const number = paragraphNumber(order, items, levelOf, p.id);
-    const item = items.get(p.id);
-    if (number !== null)
-      out.push({
-        paragraphId: p.id,
-        kind: "numbered",
-        number,
-        marker: item?.markerText ?? "",
-        text,
-        heading: p.heading,
-        level: item?.ilvl ?? 0
-      });
-    else if (p.heading)
-      out.push({
-        paragraphId: p.id,
-        kind: "heading",
-        number: null,
-        marker: "",
-        text,
-        heading: true,
-        level: 0
-      });
+// src/docx/overflowPlan.ts
+function planOverflow(items, available, moreWidth) {
+  const collapsed = /* @__PURE__ */ new Set();
+  let used = items.reduce((sum, item) => sum + item.width, 0);
+  if (used <= available) return collapsed;
+  used += moreWidth;
+  const order = items.map((item, index) => ({ item, index })).sort((a, b) => a.item.priority - b.item.priority || b.index - a.index);
+  for (const { item } of order) {
+    if (used <= available) break;
+    collapsed.add(item.id);
+    used -= item.width;
   }
-  return out;
+  return collapsed;
 }
-function filterTargets(targets, query) {
-  const q = query.trim().toLowerCase();
-  if (!q) return [...targets];
-  return targets.filter(
-    (t) => (t.number ?? "").toLowerCase().startsWith(q) || t.text.toLowerCase().includes(q)
+var Overflow = createContext(null);
+var MORE_WIDTH = 32;
+var sameSet = (a, b) => a.size === b.size && [...a].every((id) => b.has(id));
+function RibbonOverflow({ tab, children }) {
+  const row = useRef(null);
+  const items = useRef(/* @__PURE__ */ new Map());
+  const widths = useRef(/* @__PURE__ */ new Map());
+  const [version, setVersion] = useState(0);
+  const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
+  const [slots, setSlots] = useState({});
+  const [menu, setMenu] = useState([]);
+  const register = useCallback((id, item) => {
+    items.current.set(id, item);
+    setVersion((v) => v + 1);
+    return () => {
+      if (items.current.get(id) === item) items.current.delete(id);
+      setVersion((v) => v + 1);
+    };
+  }, []);
+  const plan = useCallback(() => {
+    const element = row.current;
+    if (!element) return;
+    const gap = parseFloat(getComputedStyle(element).columnGap) || 0;
+    const ordered = Array.from(element.querySelectorAll("[data-ribbon-item]")).map((node) => node.dataset.ribbonItem).filter((id) => items.current.has(id));
+    const measured = ordered.map((id) => {
+      const { element: node, priority } = items.current.get(id);
+      if (!node.hidden) {
+        const width = node.getBoundingClientRect().width;
+        widths.current.set(id, width ? width + gap : 0);
+      }
+      return { id, priority, width: widths.current.get(id) ?? 0 };
+    });
+    const next = planOverflow(measured, element.clientWidth, MORE_WIDTH);
+    setCollapsed((current) => sameSet(current, next) ? current : next);
+    const entries = ordered.filter((id) => next.has(id)).map((id) => ({ id, label: items.current.get(id).label }));
+    setMenu(
+      (current) => current.length === entries.length && current.every((entry, i) => entry.id === entries[i].id && entry.label === entries[i].label) ? current : entries
+    );
+  }, []);
+  useLayoutEffect(plan, [plan, version, tab, collapsed]);
+  useLayoutEffect(() => {
+    const element = row.current;
+    if (!element) return;
+    const observer = new ResizeObserver(() => plan());
+    observer.observe(element);
+    for (const item of items.current.values()) observer.observe(item.element);
+    return () => observer.disconnect();
+  }, [plan, version]);
+  const slotRef = useCallback(
+    (id) => (node) => setSlots((current) => {
+      if (node ? current[id] === node : !(id in current)) return current;
+      const next = { ...current };
+      if (node) next[id] = node;
+      else delete next[id];
+      return next;
+    }),
+    []
   );
+  const context = useMemo(() => ({ collapsed, slots, register }), [collapsed, slots, register]);
+  const shown = menu.filter((entry) => collapsed.has(entry.id));
+  return /* @__PURE__ */ jsx(Overflow.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { className: "native-docx-ribbon-row", ref: row, "data-testid": "docx-ribbon-row", children: [
+    children,
+    shown.length > 0 && /* @__PURE__ */ jsx(
+      RibbonMenu,
+      {
+        label: "More",
+        title: "More commands",
+        icon: /* @__PURE__ */ jsx(Ellipsis, { size: 16 }),
+        testId: "docx-ribbon-more",
+        keepMounted: true,
+        popoverClassName: "native-docx-ribbon-more",
+        children: (close) => /* @__PURE__ */ jsx(MoreRows, { entries: shown, slotRef, close })
+      },
+      tab
+    )
+  ] }) });
 }
-
-// src/docx/references/commands.ts
-var REF_BOOKMARK_PREFIX = "_Ref";
-function newRefBookmark(taken, random = Math.random) {
-  for (; ; ) {
-    const name = `${REF_BOOKMARK_PREFIX}${String(Math.floor(random() * 9e8) + 1e8)}`;
-    if (!taken.has(name)) return name;
-  }
-}
-var styled = (style) => style ? `<w:rPr><w:rStyle w:val="${style}"/></w:rPr>` : "";
-var run = (text, style) => `<w:r>${styled(style)}<w:t xml:space="preserve">${esc(text)}</w:t></w:r>`;
-function refFieldXml(instruction, cached) {
-  const r = (inner) => `<w:r>${styled(CROSS_REFERENCE_STYLE)}${inner}</w:r>`;
-  return `${r('<w:fldChar w:fldCharType="begin"/>')}${r(
-    `<w:instrText xml:space="preserve"> ${esc(instruction)} </w:instrText>`
-  )}${r('<w:fldChar w:fldCharType="separate"/>')}${run(cached, CROSS_REFERENCE_STYLE)}${r(
-    '<w:fldChar w:fldCharType="end"/>'
-  )}`;
+function MoreRows({
+  entries,
+  slotRef,
+  close
+}) {
+  const refs = useRef(/* @__PURE__ */ new Map());
+  const refFor = (id) => {
+    let ref = refs.current.get(id);
+    if (!ref) refs.current.set(id, ref = slotRef(id));
+    return ref;
+  };
+  const list = useRef(null);
+  const latest = useRef(close);
+  latest.current = close;
+  useEffect(() => {
+    const element = list.current;
+    if (!element) return;
+    const onClick = (event) => {
+      const target = event.target;
+      const row = target.closest(".native-docx-ribbon-more-row");
+      if (!row) return;
+      const control = row.querySelector(".native-docx-ribbon-more-control");
+      if (!control.contains(target)) {
+        control.querySelector("button:not([disabled])")?.click();
+        return;
+      }
+      const button = target.closest("button");
+      if (button && !button.disabled && !control.querySelector(".native-docx-ribbon-popover")?.contains(button) && !button.hasAttribute("aria-expanded") && !button.hasAttribute("aria-haspopup"))
+        latest.current();
+    };
+    element.addEventListener("click", onClick, true);
+    return () => element.removeEventListener("click", onClick, true);
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "native-docx-ribbon-more-list", ref: list, children: entries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "native-docx-ribbon-more-row", "data-ribbon-more": entry.id, children: [
+    /* @__PURE__ */ jsx("span", { className: "native-docx-ribbon-more-control", ref: refFor(entry.id) }),
+    /* @__PURE__ */ jsx("span", { className: "native-docx-ribbon-more-label", children: entry.label })
+  ] }, entry.id)) });
 }
-var refTooltip = (value, mode) => mode === "number" ? `Cross-reference to clause ${value}` : `Cross-reference to \u201C${value}\u201D`;
-function crossReferenceXml(bookmark, mode, value) {
-  return `<w:hyperlink w:anchor="${esc(bookmark)}" w:tooltip="${esc(
-    refTooltip(value, mode)
-  )}" w:history="1">${refFieldXml(refInstruction(bookmark, mode), value)}</w:hyperlink>`;
-}
-var refInstruction = (bookmark, mode) => mode === "number" ? `REF ${bookmark} \\r \\h` : `REF ${bookmark} \\h`;
-var refResult = (target, mode) => mode === "number" && target.number ? target.number : target.text;
-var allBookmarks = (port) => new Set(port.paragraphs().flatMap((p) => p.bookmarks));
-function ensureTargetBookmark(port, target, mode) {
-  const paragraph = port.paragraphs().find((p) => p.id === target.paragraphId);
-  if (!paragraph) throw new Error("That clause is no longer in the document.");
-  const existing = paragraph.bookmarks.find((b) => b.startsWith(REF_BOOKMARK_PREFIX));
-  if (existing && mode === "number") return existing;
-  const name = newRefBookmark(allBookmarks(port));
-  const start = `<w:bookmarkStart w:id="0" w:name="${name}"/>`;
-  const end = '<w:bookmarkEnd w:id="0"/>';
-  if (mode === "number") {
-    port.setCaret({ paragraphId: paragraph.id, offset: 0 });
-    if (!port.paste(`<w:p>${start}${end}</w:p>`, "", false))
-      throw new Error("The cross-reference target could not be marked.");
-    return name;
-  }
-  const runs = port.runsXml(paragraph.id);
-  if (!runs) throw new Error("This heading cannot be referred to by its text; use its number.");
-  port.deleteRange(
-    { paragraphId: paragraph.id, offset: 0 },
-    { paragraphId: paragraph.id, offset: paragraph.text.length }
-  );
-  if (!port.paste(`<w:p>${start}${runs}${end}</w:p>`, paragraph.text, false))
-    throw new Error("The cross-reference target could not be marked.");
-  return name;
-}
-function pastePoint(port, caret) {
-  const paragraph = port.paragraphs().find((p) => p.id === caret.paragraphId);
-  if (paragraph?.text[caret.offset - 1] !== FIELD_ATOM) return caret;
-  port.setCaret(caret);
-  port.typeText(" ");
-  return { paragraphId: caret.paragraphId, offset: caret.offset + 1 };
-}
-function markCrossReferenceTarget(port, target, mode) {
-  if (mode === "number" && !target.number) mode = "text";
-  const bookmark = ensureTargetBookmark(port, target, mode);
-  return { bookmark, mode, value: refResult(target, mode) };
-}
-function insertCrossReferenceField(port, { bookmark, mode, value }, caret) {
-  caret = pastePoint(port, caret);
-  port.setCaret(caret);
-  if (!port.paste(`<w:p>${crossReferenceXml(bookmark, mode, value)}</w:p>`, value, false))
-    throw new Error("The cross-reference could not be inserted.");
-  port.setCaret({ paragraphId: caret.paragraphId, offset: caret.offset + 1 });
-  return { bookmark };
-}
-function insertCrossReference(port, target, mode, caret) {
-  return insertCrossReferenceField(port, markCrossReferenceTarget(port, target, mode), caret);
-}
-var documentReferenceTooltip = (text, appName = "ARBI") => `Cross-reference: ${text} \u2014 opens in ${appName}`;
-function insertDocumentReference(port, reference, caret) {
-  const text = reference.text.trim();
-  if (!text) throw new Error("Enter the reference text.");
-  const tooltip = documentReferenceTooltip(text, reference.appName).slice(0, 255);
-  caret = pastePoint(port, caret);
-  port.setCaret(caret);
-  const link = `<w:p><w:hyperlink r:id="rIdRef1"${tooltip ? ` w:tooltip="${esc(tooltip)}"` : ""} w:history="1">${run(text, CROSS_REFERENCE_STYLE)}</w:hyperlink></w:p>`;
-  if (!port.paste(link, text, false, hyperlinkRelationship("rIdRef1", reference.url)))
-    throw new Error("The reference could not be inserted.");
-  port.setCaret({ paragraphId: caret.paragraphId, offset: caret.offset + text.length });
-}
-var REF_FIELD = /^REF\s+(\S+)((?:\s+\\[A-Za-z*]+(?:\s+MERGEFORMAT)?)*)\s*$/i;
-function staleCrossReferences(port) {
-  const paragraphs = port.paragraphs();
-  if (!paragraphs.some((p) => p.fields?.length)) return [];
-  const items = port.listItems();
-  const order = paragraphs.map((p) => p.id);
-  const owner = /* @__PURE__ */ new Map();
-  for (const p of paragraphs) for (const b of p.bookmarks) if (!owner.has(b)) owner.set(b, p.id);
-  const out = [];
-  for (const p of paragraphs)
-    for (const field of p.fields ?? []) {
-      const match = REF_FIELD.exec(field.instruction);
-      if (!match || !match[1].startsWith(REF_BOOKMARK_PREFIX)) continue;
-      const switches = match[2].toLowerCase();
-      const mode = /\\[rwn]\b/.test(switches) ? "number" : "text";
-      const target = owner.get(match[1]);
-      const base = {
-        paragraphId: p.id,
-        offset: field.offset,
-        instruction: field.instruction,
-        cached: field.result,
-        bookmark: match[1],
-        mode
-      };
-      if (!target) {
-        out.push({ ...base, value: null });
-        continue;
-      }
-      const value = /\\[rwn]\b/.test(switches) ? switches.includes("\\r") ? paragraphNumber(order, items, port.levelOf, target) : null : (paragraphs.find((x) => x.id === target)?.text ?? "").replace(//g, "").trim();
-      if (value && value !== field.result.trim()) out.push({ ...base, value });
+function RibbonItem({
+  id,
+  label,
+  priority = 0,
+  children
+}) {
+  const context = useContext(Overflow);
+  const element = useRef(null);
+  const register = context?.register;
+  useLayoutEffect(() => {
+    if (!register || !element.current) return;
+    return register(id, { label, priority, element: element.current });
+  }, [register, id, label, priority]);
+  if (!context) return /* @__PURE__ */ jsx(Fragment, { children });
+  const collapsed = context.collapsed.has(id);
+  const slot = context.slots[id];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: element,
+      className: "native-docx-ribbon-item",
+      "data-ribbon-item": id,
+      hidden: collapsed || void 0,
+      children: collapsed ? slot ? createPortal(children, slot) : null : children
     }
-  return out;
-}
-function brokenCrossReferences(port) {
-  return port.paragraphs().flatMap(
-    (p) => (p.marks ?? []).filter((m) => m.styleId === BROKEN_CROSS_REFERENCE_STYLE).map((m) => ({ paragraphId: p.id, offset: m.offset, text: m.text }))
-  );
-}
-function refreshCrossReferences(port) {
-  const stale = staleCrossReferences(port).sort(
-    (a, b) => a.paragraphId === b.paragraphId ? b.offset - a.offset : 0
   );
-  let refreshed = 0;
-  for (const ref of stale) {
-    const paragraph = port.paragraphs().find((p) => p.id === ref.paragraphId);
-    if (!paragraph || paragraph.text[ref.offset - 1] === FIELD_ATOM) continue;
-    const at = { paragraphId: ref.paragraphId, offset: ref.offset };
-    port.deleteRange(at, { paragraphId: ref.paragraphId, offset: ref.offset + 1 });
-    port.setCaret(at);
-    const text = ref.value ?? (ref.cached.trim() || ref.bookmark);
-    const body = ref.value === null ? run(text, BROKEN_CROSS_REFERENCE_STYLE) : crossReferenceXml(ref.bookmark, ref.mode, ref.value);
-    if (port.paste(`<w:p>${body}</w:p>`, text, false) && ref.value !== null) refreshed++;
-  }
-  return { refreshed, broken: brokenCrossReferences(port) };
 }
 
-// src/docx/references/passages.ts
-function shortTitle(title) {
-  const base = title.replace(/\.[A-Za-z0-9]{1,5}$/, "").trim();
-  const defined = /\(\s*(?:the\s+)?["“'‘]([^"”'’]{1,30})["”'’]\s*\)/i.exec(base);
-  return defined ? defined[1] : base;
-}
-function passageClause(text) {
-  const first = text.trim().split("\n")[0] ?? "";
-  const match = /^(?:#+\s*)?(?:\*\*)?(?:clause|section|article)?\s*(\d+(?:\.\d+)*)[.)]?(?:\*\*)?\s+\S/i.exec(
-    first
-  );
-  return match ? match[1] : null;
-}
-function referenceText(title, passage) {
-  const name = shortTitle(title);
-  const clause = passageClause(passage.text);
-  if (clause) return `${name}, clause ${clause}`;
-  if (passage.page) return `${name}, p. ${passage.page}`;
-  return name;
+// src/docx/wordStyles.ts
+var QUICK_STYLES = ["Normal", "Title", "heading 1", "heading 2", "heading 3"];
+function findStyle(options, name) {
+  const wanted = name.toLowerCase();
+  const id = name.replace(/(^|\s)(\w)/g, (_, _s, c) => c.toUpperCase());
+  return options.find((o) => o.name.toLowerCase() === wanted) ?? options.find((o) => o.styleId.toLowerCase() === id.toLowerCase());
 }
-function passageExcerpt(text, max = 280) {
-  const plain = text.replace(/[#*_`>|]+/g, " ").replace(/\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\s+/g, " ").trim();
-  return plain.length > max ? `${plain.slice(0, max - 1)}\u2026` : plain;
+function styleLabel(name) {
+  return name === name.toLowerCase() ? name.replace(/(^|\s)(\w)/g, (m) => m.toUpperCase()) : name;
 }
-function filterPassages(passages, query) {
-  const q = query.trim().toLowerCase();
-  return q ? passages.filter((p) => p.text.toLowerCase().includes(q)) : [...passages];
+function wordShortcut(event) {
+  const mod = event.ctrlKey || event.metaKey;
+  if (!mod) return null;
+  if (event.altKey && !event.shiftKey) {
+    switch (event.code) {
+      case "KeyF":
+        return "footnote";
+      case "KeyD":
+        return "endnote";
+      case "Digit1":
+      case "Numpad1":
+        return "heading 1";
+      case "Digit2":
+      case "Numpad2":
+        return "heading 2";
+      case "Digit3":
+      case "Numpad3":
+        return "heading 3";
+    }
+  }
+  if (event.shiftKey && !event.altKey && event.code === "KeyN") return "Normal";
+  return null;
 }
-var RUN_PARTS = /* @__PURE__ */ new Set(["rPr", "t", "tab", "br", "lastRenderedPageBreak"]);
-var SKIPPED = /* @__PURE__ */ new Set(["pPr", "bookmarkStart", "bookmarkEnd", "proofErr", "permStart", "permEnd"]);
-function serialize(node) {
-  if (node.kind === "textValue") return esc(node.value ?? "");
-  const name = `${node.prefix ?? "w"}:${node.localName}`;
-  const attrs = (node.attributes ?? []).map((a) => ` ${a.prefix ? `${a.prefix}:` : ""}${a.localName}="${esc(a.value)}"`).join("");
-  const children = (node.children ?? []).map((c) => serialize(c)).join("");
-  return children ? `<${name}${attrs}>${children}</${name}>` : `<${name}${attrs}/>`;
+function divergenceSummary(divergence) {
+  if (!divergence) return null;
+  const changed = divergence.styles.filter((s) => s.kind === "changed").map((s) => styleLabel(s.name));
+  const missing = divergence.styles.filter((s) => s.kind === "missing").map((s) => styleLabel(s.name));
+  const parts = [
+    divergence.docDefaults ? "default text formatting" : "",
+    changed.length ? `${changed.length === 1 ? "style" : "styles"} ${changed.slice(0, 6).join(", ")}${changed.length > 6 ? "\u2026" : ""}` : "",
+    missing.length ? `${missing.length} house ${missing.length === 1 ? "style" : "styles"} missing` : ""
+  ].filter(Boolean);
+  return parts.length ? `Differs from the house template: ${parts.join("; ")}.` : null;
 }
-function paragraphRunsXml(paragraph) {
-  const runs = [];
-  for (const child of paragraph.children ?? []) {
-    if (child.localName && SKIPPED.has(child.localName)) continue;
-    if (child.localName !== "r") return null;
-    if ((child.children ?? []).some((c) => !c.localName || !RUN_PARTS.has(c.localName))) return null;
-    runs.push(serialize(child));
-  }
-  return runs.length ? runs.join("") : null;
+var BUILTIN_TEMPLATE_NAME = "ARBI legal template";
+var templateFileName = (t) => /\.(dotx|dotm|docx|docm)$/i.test(t.name) ? t.name : `${t.name}.dotx`;
+var builtin;
+function builtinHouseTemplate() {
+  builtin ??= { bytes: defaultLegalTemplate(), name: BUILTIN_TEMPLATE_NAME, source: "builtin" };
+  return builtin;
 }
-function findNode2(node, id) {
-  if (node.id === id) return node;
-  for (const child of node.children ?? []) {
-    const found = findNode2(child, id);
-    if (found) return found;
+async function resolveHouseTemplate(host) {
+  if (!host) return builtinHouseTemplate();
+  try {
+    return await host.load();
+  } catch {
+    return builtinHouseTemplate();
   }
-  return void 0;
 }
-function referencesPort(editor, revision) {
-  const base = editorPort(editor, revision);
-  const session = () => {
-    const s = editor.surface?.session;
-    if (!s) throw new Error("The document is not open.");
-    return s;
-  };
-  const root = () => session().part().root;
-  let numbering;
-  let cascade;
-  const index = () => {
-    if (!numbering) {
-      const s = session();
-      cascade = buildStyleCascadeTable(s.stylesRoot(), void 0, s.settingsRoot());
-      numbering = withNumberingStyleLinks(buildNumberingIndex(s.numberingRoot()), cascade);
-    }
-    return numbering;
-  };
-  return {
-    ...base,
-    listItems: () => {
-      const body = root().children?.find((n) => n.kind === "body");
-      const items = resolveStoryListItems(
-        body?.children ?? [],
-        index(),
-        cascade
-      );
-      const out = /* @__PURE__ */ new Map();
-      for (const [id, item] of items)
-        out.set(id, {
-          numId: item.numId,
-          ilvl: item.ilvl,
-          markerText: item.markerText,
-          numFmt: item.numFmt
-        });
-      return out;
-    },
-    levelOf: (numId, ilvl) => {
-      const level = resolveNumberingLevel(index(), numId, ilvl)?.level;
-      return level ? { lvlText: level.lvlText, numFmt: level.numFmt } : null;
-    },
-    runsXml: (paragraphId) => {
-      const node = findNode2(root(), paragraphId);
-      return node ? paragraphRunsXml(node) : null;
-    }
-  };
-}
-
-// src/docx/beforeSave.ts
-var hooks = /* @__PURE__ */ new WeakMap();
-function onBeforeSave(editor, fn) {
-  let set = hooks.get(editor);
-  if (!set) hooks.set(editor, set = /* @__PURE__ */ new Set());
-  set.add(fn);
-  return () => set.delete(fn);
-}
-function runBeforeSave(editor) {
-  if (!editor) return;
-  for (const fn of hooks.get(editor) ?? [])
-    try {
-      fn();
-    } catch {
-    }
-}
-var DEFAULT_CROSS_REFERENCES_LABELS = {
-  insert: "Insert cross-reference",
-  title: "Insert cross-reference",
-  description: "Refer to a clause of this document, or to a passage of another document.",
-  thisDocument: "This document",
-  otherDocument: "Another document",
-  filterTargets: "Find a clause or heading",
-  noTargets: "This document has no numbered clauses or headings yet.",
-  number: "Paragraph number",
-  text: "Heading text",
-  insertAs: "Insert",
-  chooseDocument: "Choose a document",
-  filterPassages: "Find a passage",
-  loadingPassages: "Loading passages\u2026",
-  noPassages: "No passage matches.",
-  referenceText: "Reference text",
-  insertButton: "Insert",
-  cancel: "Cancel",
-  clause: (number) => `Clause ${number}`,
-  heading: "Heading",
-  update: "Update cross-references",
-  updated: "Cross-references updated",
-  updateSummary: (refreshed) => refreshed ? `${refreshed} cross-reference${refreshed === 1 ? "" : "s"} brought up to date.` : "Every cross-reference is up to date.",
-  brokenTitle: "Broken cross-references",
-  brokenNone: "No cross-reference points at a deleted target.",
-  brokenHelp: "Their target was deleted: the last text is kept and marked. Insert the reference again to repair it.",
-  brokenCard: "Broken cross-reference",
-  brokenCardBody: "Its target was deleted. Update cross-references to mark it.",
-  show: "Show",
-  close: "Close"
-};
-var CrossReferencesContext = createContext(null);
-var useCrossReferences = () => useContext(CrossReferencesContext);
-function CrossReferencesProvider({
-  children,
-  editable,
-  references,
+var HouseTemplateContext = createContext(null);
+var useHouseTemplate = () => useContext(HouseTemplateContext);
+function HouseTemplateProvider({
+  host,
   documentId,
+  editable,
   notify,
-  labels
+  enabled = true,
+  children
 }) {
   const editor = useDocxEditor();
   const track = useTrackedOrNoted();
-  const l = useMemo(() => ({ ...DEFAULT_CROSS_REFERENCES_LABELS, ...labels }), [labels]);
-  const [dialog, setDialog] = useState(
-    null
-  );
-  const marker = useRef(null);
-  const [viewer, setViewer] = useState(null);
-  useEffect(() => setViewer(marker.current?.closest(".native-docx-viewer") ?? null), []);
-  const openDialog = useCallback(() => {
-    if (!editor || !editable) return;
+  const [template, setTemplate] = useState(builtinHouseTemplate);
+  const [divergence, setDivergence] = useState(null);
+  const [basedOnTemplate, setBasedOnTemplate] = useState(false);
+  const [levels, setLevels] = useState({});
+  const [generation, setGeneration] = useState(0);
+  useEffect(() => {
+    let live = true;
+    void resolveHouseTemplate(host).then((t) => live && setTemplate(t));
+    return () => {
+      live = false;
+    };
+  }, [host]);
+  const blocks = useMemo(() => {
     try {
-      const port = referencesPort(editor);
-      const caret = port.caret();
-      if (!caret) return notify?.("Place the cursor where the reference should go.", "error");
-      setDialog({ caret, targets: listTargets(port.paragraphs(), port.listItems(), port.levelOf) });
-    } catch (error) {
-      notify?.(error instanceof Error ? error.message : "Could not read the document.", "error");
+      return listBuildingBlocks(template.bytes);
+    } catch {
+      return [];
     }
-  }, [editor, editable, notify]);
-  const run2 = useCallback(
-    (label, prepare, insert) => {
-      if (!editor) return;
+  }, [template]);
+  useEffect(() => {
+    if (!editor || !enabled) return;
+    let live = true;
+    void editor.save().then((saved) => {
+      if (!live || !saved) return;
+      const bytes = new Uint8Array(saved);
+      setBasedOnTemplate(attachedTemplateOf(bytes) === templateFileName(template));
+      setLevels(linkedLevelStyles(bytes));
+      setDivergence(styleDivergence(bytes, template.bytes));
+    }).catch(() => live && setDivergence(null));
+    return () => {
+      live = false;
+    };
+  }, [editor, template, generation, enabled]);
+  const refresh = useCallback(() => setGeneration((g) => g + 1), []);
+  const insertBlock = useCallback(
+    (name) => {
+      if (!editor || !editable) return false;
+      const fragment = buildingBlockFragment(template.bytes, name);
+      if (!fragment) return false;
       try {
-        const prepared = withDirectEditing(editor, prepare);
-        if (dialog) referencesPort(editor).setCaret(dialog.caret);
-        track({ label, insert: (revision) => insert(prepared, revision), inserted: () => true });
-        setDialog(null);
-        editor.surface?.focus();
-        holdCaret(editor);
-      } catch (error) {
+        const result = track({
+          label: `Inserted Quick Part: ${name}`,
+          insert: (revision) => editor.exec({
+            type: "paste",
+            text: "",
+            html: fragmentClipboardHtml(
+              revision ? trackInsertion(fragment, revision, true) : fragment
+            )
+          }),
+          inserted: (r) => r.ok
+        })?.result;
+        if (!result?.ok) throw new Error(result?.reason ?? "The block could not be inserted here.");
+        refresh();
+        return true;
+      } catch (failure) {
         notify?.(
-          error instanceof Error ? error.message : "Could not insert the reference.",
+          failure instanceof Error ? failure.message : "Could not insert the block.",
           "error"
         );
+        return false;
       }
     },
-    [editor, dialog, track, notify]
+    [editor, editable, template, notify, refresh, track]
   );
-  useEffect(() => {
-    if (!editor || !editable) return;
-    const refresh = () => {
+  const setAsHouseTemplate = useMemo(
+    () => host?.setFromDocument && documentId ? async () => {
       try {
-        const port = referencesPort(editor);
-        if (!port.paragraphs().some((p) => p.fields?.length)) return;
-        preservingCaret(editor, () => withDirectEditing(editor, () => refreshCrossReferences(port)));
-      } catch {
+        await host.setFromDocument(documentId);
+        setTemplate(await resolveHouseTemplate(host));
+        notify?.("This document is now the house template for new documents.", "success");
+      } catch (failure) {
+        notify?.(
+          failure instanceof Error ? failure.message : "Could not set the house template.",
+          "error"
+        );
       }
-    };
-    const off = onBeforeSave(editor, refresh);
-    const timer = setTimeout(refresh, 1500);
-    return () => {
-      off();
-      clearTimeout(timer);
-    };
-  }, [editor, editable]);
-  const [report, setReport] = useState(null);
-  const update = useCallback(() => {
-    if (!editor || !editable) return;
-    try {
-      const result = preservingCaret(
-        editor,
-        () => withDirectEditing(editor, () => refreshCrossReferences(referencesPort(editor)))
-      );
-      setReport(result);
-    } catch (error) {
-      notify?.(
-        error instanceof Error ? error.message : "Could not update cross-references.",
-        "error"
-      );
-    }
-  }, [editor, editable, notify]);
-  const [passages, setPassages] = useState({});
-  const loadPassages = useCallback(
-    (id) => {
-      if (!references || passages[id]) return;
-      setPassages((p) => ({ ...p, [id]: "loading" }));
-      references.passages(id).then((list) => setPassages((p) => ({ ...p, [id]: list }))).catch(() => setPassages((p) => ({ ...p, [id]: [] })));
-    },
-    [references, passages]
+    } : void 0,
+    [host, documentId, notify]
   );
-  useEffect(() => {
-    if (!viewer || !references) return;
-    const targetOf = (event) => {
-      const link = event.target?.closest?.(
-        'a.docx-hyperlink[data-docx-link-kind="external"]'
-      );
-      if (!link || !viewer.contains(link)) return null;
-      const mouse = event;
-      if (mouse.button !== 0 || mouse.ctrlKey || mouse.metaKey || mouse.shiftKey) return null;
-      return references.targetOf(link.getAttribute("href") ?? "");
-    };
-    const take = (event) => {
-      const target = targetOf(event);
-      if (!target) return;
-      event.preventDefault();
-      event.stopPropagation();
-      if (event.type === "click") references.open(target);
-    };
-    const types = ["pointerdown", "mousedown", "pointerup", "mouseup", "click"];
-    for (const type of types) window.addEventListener(type, take, true);
-    return () => {
-      for (const type of types) window.removeEventListener(type, take, true);
-    };
-  }, [viewer, references]);
   const value = useMemo(
-    () => editable ? { openDialog, update, labels: l } : null,
-    [editable, openDialog, update, l]
+    () => ({
+      template,
+      blocks,
+      divergence,
+      basedOnTemplate,
+      levels,
+      insertBlock,
+      refresh,
+      setAsHouseTemplate,
+      editable
+    }),
+    [
+      template,
+      blocks,
+      divergence,
+      basedOnTemplate,
+      levels,
+      insertBlock,
+      refresh,
+      setAsHouseTemplate,
+      editable
+    ]
   );
-  const resolveInternal = (href) => {
-    if (!editor) return null;
-    const name = href.replace(/^#/, "");
-    try {
-      const port = referencesPort(editor);
-      const paragraphs = port.paragraphs();
-      const target = paragraphs.find((p) => p.bookmarks.includes(name));
-      if (!target) return { title: l.brokenCard, body: l.brokenCardBody };
-      const number = paragraphNumber(
-        paragraphs.map((p) => p.id),
-        port.listItems(),
-        port.levelOf,
-        target.id
-      );
-      return {
-        title: number ? l.clause(number) : l.heading,
-        body: passageExcerpt(target.text.replace(//g, ""))
-      };
-    } catch {
-      return null;
-    }
+  return /* @__PURE__ */ jsx(HouseTemplateContext.Provider, { value: enabled ? value : null, children });
+}
+var FILTER_FROM = 8;
+function previewStyle(option) {
+  const { fontFamily, fontSizePt, bold, italic, color } = option.preview;
+  return {
+    fontFamily: fontFamily ? `"${fontFamily}", serif` : void 0,
+    // In the face of the style, but within a row: 9-18pt.
+    fontSize: fontSizePt ? `${Math.min(18, Math.max(9, fontSizePt))}pt` : void 0,
+    fontWeight: bold ? 700 : void 0,
+    fontStyle: italic ? "italic" : void 0,
+    color: color ? `#${color}` : void 0
   };
-  return /* @__PURE__ */ jsxs(CrossReferencesContext.Provider, { value, children: [
-    /* @__PURE__ */ jsx("span", { ref: marker, hidden: true }),
-    children,
-    /* @__PURE__ */ jsx(
-      LinkHoverCard,
-      {
-        root: viewer,
-        matches: (href) => href.startsWith(`#${REF_BOOKMARK_PREFIX}`),
-        resolve: resolveInternal,
-        testId: "docx-cross-reference-card"
-      }
+}
+function Gallery({ close }) {
+  const { value, setValue, options, isEnabled } = useParagraphStyle();
+  const editor = useDocxEditor();
+  const house = useHouseTemplate();
+  const changed = new Set(
+    house?.basedOnTemplate ? house.divergence?.styles.filter((s) => s.kind === "changed").map((s) => s.styleId) : []
+  );
+  const [query, setQuery] = useState("");
+  const quick = useMemo(
+    () => QUICK_STYLES.map((name) => findStyle(options, name)).filter(
+      (o) => !!o
     ),
-    references && /* @__PURE__ */ jsx(
-      LinkHoverCard,
+    [options]
+  );
+  const shown = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return q ? options.filter(
+      (o) => o.name.toLowerCase().includes(q) || o.styleId.toLowerCase().includes(q)
+    ) : options;
+  }, [options, query]);
+  const apply = (option) => {
+    setValue(option.styleId);
+    close();
+    editor?.surface?.focus();
+  };
+  const nav = useListKeyNav({
+    open: true,
+    items: shown,
+    onPick: apply,
+    onDismiss: close,
+    resetKey: query
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "native-docx-style-gallery", "data-testid": "docx-style-gallery", children: [
+    quick.length > 0 && /* @__PURE__ */ jsx("div", { className: "native-docx-style-quick", role: "group", "aria-label": "Quick styles", children: quick.map((option) => /* @__PURE__ */ jsx(
+      "button",
       {
-        root: viewer,
-        matches: (href) => !!references.targetOf(href),
-        resolve: (href) => {
-          const target = references.targetOf(href);
-          if (!target) return null;
-          const list = passages[target.documentId];
-          if (!list) loadPassages(target.documentId);
-          const passage = Array.isArray(list) ? list.find((p) => p.chunkId === target.chunkId) : void 0;
-          return passage ? {
-            body: passageExcerpt(passage.text),
-            footer: passage.page ? `p. ${passage.page}` : void 0
-          } : null;
-        },
-        testId: "docx-cross-reference-card"
-      }
-    ),
-    dialog && /* @__PURE__ */ jsx(
-      CrossReferenceDialog,
+        type: "button",
+        "aria-pressed": value === option.styleId,
+        disabled: !isEnabled,
+        "data-style-id": option.styleId,
+        title: styleLabel(option.name),
+        onClick: () => apply(option),
+        children: /* @__PURE__ */ jsx("span", { style: previewStyle(option), children: styleLabel(option.name) })
+      },
+      option.styleId
+    )) }),
+    options.length > FILTER_FROM && /* @__PURE__ */ jsx(
+      "input",
       {
-        targets: dialog.targets,
-        references,
-        documentId,
-        passages,
-        loadPassages,
-        labels: l,
-        onCancel: () => setDialog(null),
-        onClosed: () => editor?.surface?.focus(),
-        onInsertTarget: (target, mode) => run2(
-          `Inserted cross-reference: ${refResult(target, mode)}`,
-          () => markCrossReferenceTarget(referencesPort(editor), target, mode),
-          (marked, revision) => insertCrossReferenceField(referencesPort(editor, revision), marked, dialog.caret)
-        ),
-        onInsertPassage: (target, text) => run2(
-          `Inserted cross-reference: ${text}`,
-          () => void 0,
-          (_, revision) => insertDocumentReference(
-            referencesPort(editor, revision),
-            { text, url: references.linkFor(target), appName: references.appName },
-            dialog.caret
-          )
-        )
+        className: "native-docx-style-filter",
+        placeholder: "Find a style",
+        "aria-label": "Find a style",
+        value: query,
+        autoFocus: true,
+        onChange: (event) => setQuery(event.target.value),
+        onKeyDown: (event) => {
+          nav.handleKeyDown(event);
+        },
+        ...nav.comboboxProps
       }
     ),
-    /* @__PURE__ */ jsx(Dialog, { open: !!report, onOpenChange: (open) => !open && setReport(null), children: /* @__PURE__ */ jsxs(
-      DialogContent,
+    /* @__PURE__ */ jsxs(
+      "ul",
       {
-        className: "max-h-[85dvh] overflow-y-auto",
-        "data-testid": "docx-cross-references-report",
+        className: "native-docx-style-list",
+        role: "listbox",
+        id: nav.listboxId,
+        "aria-label": "Document styles",
         children: [
-          /* @__PURE__ */ jsxs(DialogHeader, { children: [
-            /* @__PURE__ */ jsx(DialogTitle, { children: l.updated }),
-            /* @__PURE__ */ jsx(DialogDescription, { children: report && l.updateSummary(report.refreshed) })
-          ] }),
-          report && /* @__PURE__ */ jsxs("section", { className: "space-y-1 text-sm", children: [
-            /* @__PURE__ */ jsx("h3", { className: "font-medium", children: l.brokenTitle }),
-            report.broken.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: l.brokenHelp }),
-              /* @__PURE__ */ jsx("ul", { className: "space-y-1", "data-testid": "docx-cross-references-broken", children: report.broken.map((b) => /* @__PURE__ */ jsxs(
-                "li",
-                {
-                  className: "flex items-center justify-between gap-2",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-red-text", children: b.text }),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        size: "sm",
-                        variant: "ghost",
-                        onClick: () => {
-                          const point = { paragraphId: b.paragraphId, offset: b.offset };
-                          editor?.surface?.setSelection({ anchor: point, head: point });
-                          editor?.surface?.revealParagraph(b.paragraphId);
-                          setReport(null);
-                        },
-                        children: l.show
-                      }
-                    )
-                  ]
-                },
-                `${b.paragraphId}:${b.offset}`
-              )) })
-            ] }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: l.brokenNone })
-          ] }),
-          /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setReport(null), children: l.close }) })
+          shown.map((option, index) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              id: listOptionId(nav.listboxId, index),
+              role: "option",
+              "aria-selected": value === option.styleId,
+              "aria-disabled": !isEnabled,
+              "data-active": index === nav.selectedIndex || void 0,
+              "data-style-id": option.styleId,
+              onMouseEnter: () => nav.setSelectedIndex(index),
+              onClick: () => isEnabled && apply(option),
+              children: [
+                /* @__PURE__ */ jsx("span", { style: previewStyle(option), children: styleLabel(option.name) }),
+                changed.has(option.styleId) && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "native-docx-style-diverged",
+                    title: "Defined differently from the house template",
+                    "aria-label": "Defined differently from the house template"
+                  }
+                )
+              ]
+            },
+            option.styleId
+          )),
+          shown.length === 0 && /* @__PURE__ */ jsx("li", { className: "native-docx-style-empty", children: "No matching style" })
         ]
       }
-    ) })
+    )
   ] });
 }
-function CrossReferenceDialog({
-  targets,
-  references,
-  documentId,
-  passages,
-  loadPassages,
-  labels,
-  onCancel,
-  onInsertTarget,
-  onInsertPassage,
-  onClosed
-}) {
-  const l = { ...DEFAULT_CROSS_REFERENCES_LABELS, ...labels };
-  const [tab, setTab] = useState("this");
-  const [query, setQuery] = useState("");
-  const [chosen, setChosen] = useState(null);
-  const [mode, setMode] = useState("number");
-  const shown = useMemo(() => filterTargets(targets, query), [targets, query]);
-  const effectiveMode = chosen?.number ? mode : "text";
-  const [documents, setDocuments] = useState(null);
-  const [docId, setDocId] = useState(null);
-  const [passageQuery, setPassageQuery] = useState("");
-  const [passage, setPassage] = useState(null);
-  const [text, setText] = useState("");
-  useEffect(() => {
-    if (tab !== "other" || !references || documents) return;
-    references.documents().then((list2) => setDocuments(list2.filter((d) => d.id !== documentId))).catch(() => setDocuments([]));
-  }, [tab, references, documents, documentId]);
-  const chooseDocument = (id) => {
-    setDocId(id);
-    setPassage(null);
-    setText("");
-    loadPassages(id);
-  };
-  const title = documents?.find((d) => d.id === docId)?.title ?? "";
-  const list = docId ? passages[docId] : void 0;
-  const shownPassages = Array.isArray(list) ? filterPassages(list, passageQuery) : [];
-  const canInsert = tab === "this" ? !!chosen : !!(docId && passage && text.trim());
+function StyleGallery() {
+  const { value, options } = useParagraphStyle();
+  const current = options.find((o) => o.styleId === value);
+  const name = current ? styleLabel(current.name) : "Styles";
+  const house = useHouseTemplate();
+  const diverged = house?.basedOnTemplate ? divergenceSummary(house.divergence) : null;
+  return /* @__PURE__ */ jsx(
+    RibbonMenu,
+    {
+      label: "Styles",
+      title: diverged ? `Styles. ${diverged}` : void 0,
+      className: "native-docx-style-trigger",
+      testId: "docx-style-trigger",
+      icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "native-docx-style-current", "data-testid": "docx-current-style", children: name }),
+        diverged && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "native-docx-style-diverged",
+            "data-testid": "docx-style-diverged",
+            "aria-label": diverged
+          }
+        ),
+        /* @__PURE__ */ jsx(ChevronDown, { size: 12, "aria-hidden": true })
+      ] }),
+      children: (close) => /* @__PURE__ */ jsx(Gallery, { close })
+    }
+  );
+}
+var W = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
+var DEFAULT_PARAGRAPH_FONT = {
+  id: "DefaultParagraphFont",
+  type: "character",
+  xml: '<w:style w:type="character" w:default="1" w:styleId="DefaultParagraphFont"><w:name w:val="Default Paragraph Font"/><w:uiPriority w:val="1"/><w:semiHidden/><w:unhideWhenUsed/></w:style>'
+};
+function stylesOf(kind) {
+  const Kind = kind === "footnote" ? "Footnote" : "Endnote";
+  const text = `${Kind}Text`;
+  return [
+    {
+      id: text,
+      type: "paragraph",
+      xml: `<w:style w:type="paragraph" w:styleId="${text}"><w:name w:val="${kind} text"/><w:basedOn w:val="Normal"/><w:link w:val="${text}Char"/><w:uiPriority w:val="99"/><w:semiHidden/><w:unhideWhenUsed/><w:pPr><w:spacing w:after="0" w:line="240" w:lineRule="auto"/></w:pPr><w:rPr><w:sz w:val="20"/><w:szCs w:val="20"/></w:rPr></w:style>`
+    },
+    {
+      id: `${text}Char`,
+      type: "character",
+      xml: `<w:style w:type="character" w:customStyle="1" w:styleId="${text}Char"><w:name w:val="${Kind} Text Char"/><w:basedOn w:val="DefaultParagraphFont"/><w:link w:val="${text}"/><w:uiPriority w:val="99"/><w:semiHidden/><w:rPr><w:sz w:val="20"/><w:szCs w:val="20"/></w:rPr></w:style>`
+    },
+    {
+      id: `${Kind}Reference`,
+      type: "character",
+      xml: `<w:style w:type="character" w:styleId="${Kind}Reference"><w:name w:val="${kind} reference"/><w:basedOn w:val="DefaultParagraphFont"/><w:uiPriority w:val="99"/><w:semiHidden/><w:unhideWhenUsed/><w:rPr><w:vertAlign w:val="superscript"/></w:rPr></w:style>`
+    }
+  ];
+}
+function noteTextStyle(styles, kind) {
+  const paragraph = styles.filter((style) => style.type === "paragraph");
+  const id = kind === "footnote" ? "FootnoteText" : "EndnoteText";
+  return paragraph.find((style) => style.name.toLowerCase() === `${kind} text`)?.styleId ?? paragraph.find((style) => style.styleId === id)?.styleId;
+}
+function missingNoteStyles(styles, kind) {
+  const has = (type, id) => styles.some((style) => style.type === type && style.styleId === id);
+  const text = noteTextStyle(styles, kind);
+  const missing = stylesOf(kind).filter(
+    (style) => style.type === "paragraph" ? !text : !has("character", style.id)
+  );
+  if (!missing.length) return [];
+  const base = has("character", DEFAULT_PARAGRAPH_FONT.id) ? [] : [DEFAULT_PARAGRAPH_FONT];
+  return [...base, ...missing].map((style) => style.xml);
+}
+var CONTENT_TYPES = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/><Override PartName="/word/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml"/></Types>';
+function stylesOnlyClipboardHtml(styles) {
+  const fragment = zipSync({
+    "[Content_Types].xml": strToU8(CONTENT_TYPES),
+    "_rels/.rels": strToU8(
+      '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>'
+    ),
+    "word/document.xml": strToU8(
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:document xmlns:w="${W}"><w:body><w:p/></w:body></w:document>`
+    ),
+    "word/_rels/document.xml.rels": strToU8(
+      '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rIdStyles" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/></Relationships>'
+    ),
+    "word/styles.xml": strToU8(
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:styles xmlns:w="${W}">${styles.join("")}</w:styles>`
+    )
+  });
+  return fragmentClipboardHtml(fragment, false);
+}
+function ensureNoteStyles(editor, kind, direct = (fn) => fn()) {
+  if (!editor.can({ type: "insertNote", noteKind: kind }).ok) return void 0;
+  const missing = missingNoteStyles(editor.getDocumentStyles(), kind);
+  if (missing.length)
+    direct(() => editor.exec({ type: "paste", text: "", html: stylesOnlyClipboardHtml(missing) }));
+  return noteTextStyle(editor.getDocumentStyles(), kind);
+}
+function useInsertNote(kind) {
+  const command = useEditorCommand(kind === "footnote" ? "insert.footnote" : "insert.endnote");
+  const editor = useDocxEditor();
   const insert = () => {
-    if (tab === "this" && chosen) onInsertTarget(chosen, effectiveMode);
-    if (tab === "other" && docId && passage)
-      onInsertPassage(
-        { documentId: docId, chunkId: passage.chunkId, page: passage.page ?? null },
-        text
-      );
+    const text = editor && ensureNoteStyles(editor, kind, (fn) => withDirectEditing(editor, fn));
+    if (!command.execute()) return false;
+    if (editor) {
+      if (text)
+        withDirectEditing(editor, () => editor.exec({ type: "setParagraphStyle", styleId: text }));
+      editor.exec({ type: "insertText", text: " " });
+    }
+    return true;
   };
-  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (open) => !open && onCancel(), children: /* @__PURE__ */ jsxs(
-    DialogContent,
+  return { insert, isEnabled: command.isEnabled, disabledReason: command.disabledReason };
+}
+function NoteAction({
+  kind,
+  label,
+  shortcut,
+  icon
+}) {
+  const note = useInsertNote(kind);
+  return /* @__PURE__ */ jsx(RibbonItem, { id: `references-${kind}`, label, children: /* @__PURE__ */ jsx(
+    DocxEditor.Toolbar.Action,
     {
-      className: "max-h-[85dvh] overflow-y-auto",
-      "data-testid": "docx-cross-reference-dialog",
-      onCloseAutoFocus: (event) => {
-        if (!onClosed) return;
-        event.preventDefault();
-        onClosed();
-      },
-      children: [
-        /* @__PURE__ */ jsxs(DialogHeader, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: l.title }),
-          /* @__PURE__ */ jsx(DialogDescription, { children: l.description })
-        ] }),
-        /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), children: [
-          /* @__PURE__ */ jsxs(TabsList, { children: [
-            /* @__PURE__ */ jsx(TabsTrigger, { value: "this", "data-testid": "docx-cross-reference-this", children: l.thisDocument }),
-            references && /* @__PURE__ */ jsx(TabsTrigger, { value: "other", "data-testid": "docx-cross-reference-other", children: l.otherDocument })
-          ] }),
-          /* @__PURE__ */ jsxs(TabsContent, { value: "this", className: "space-y-3", children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: query,
-                placeholder: l.filterTargets,
-                "aria-label": l.filterTargets,
-                onChange: (e) => setQuery(e.target.value),
-                "data-testid": "docx-cross-reference-filter"
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                role: "listbox",
-                "aria-label": l.filterTargets,
-                className: "max-h-64 space-y-0.5 overflow-y-auto rounded-md border border-border p-1",
-                children: [
-                  shown.length === 0 && /* @__PURE__ */ jsx("p", { className: "p-2 text-sm text-muted-foreground", children: l.noTargets }),
-                  shown.map((t) => /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      role: "option",
-                      "aria-selected": chosen?.paragraphId === t.paragraphId,
-                      "data-testid": "docx-cross-reference-target",
-                      onClick: () => setChosen(t),
-                      onDoubleClick: () => onInsertTarget(t, t.number ? mode : "text"),
-                      className: cn(
-                        "flex w-full items-baseline gap-2 rounded px-2 py-1 text-left text-sm",
-                        chosen?.paragraphId === t.paragraphId ? "bg-accent" : "hover:bg-accent/50"
-                      ),
-                      style: { paddingLeft: 8 + t.level * 16 },
-                      children: [
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: t.marker || l.heading }),
-                        /* @__PURE__ */ jsx("span", { className: cn("truncate", t.heading && "font-medium"), children: t.text })
-                      ]
-                    },
-                    t.paragraphId
-                  ))
-                ]
-              }
-            ),
-            chosen && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 text-sm", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: l.insertAs }),
-              chosen.number && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    name: "cross-reference-mode",
-                    checked: effectiveMode === "number",
-                    onChange: () => setMode("number")
-                  }
-                ),
-                l.number
-              ] }),
-              /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    name: "cross-reference-mode",
-                    checked: effectiveMode === "text",
-                    onChange: () => setMode("text")
-                  }
-                ),
-                l.text
-              ] }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "ml-auto rounded bg-muted px-2 py-0.5",
-                  "data-testid": "docx-cross-reference-preview",
-                  children: refResult(chosen, effectiveMode)
-                }
-              )
-            ] })
-          ] }),
-          references && /* @__PURE__ */ jsxs(TabsContent, { value: "other", className: "space-y-3", children: [
-            references.renderDocumentPicker ? references.renderDocumentPicker(chooseDocument, docId) : /* @__PURE__ */ jsxs(
-              "select",
-              {
-                className: "h-9 w-full rounded-md border border-border bg-background px-2 text-sm",
-                "aria-label": l.chooseDocument,
-                value: docId ?? "",
-                onChange: (e) => e.target.value && chooseDocument(e.target.value),
-                "data-testid": "docx-cross-reference-document",
-                children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: l.chooseDocument }),
-                  (documents ?? []).map((d) => /* @__PURE__ */ jsx("option", { value: d.id, children: d.title }, d.id))
-                ]
-              }
-            ),
-            docId && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  value: passageQuery,
-                  placeholder: l.filterPassages,
-                  "aria-label": l.filterPassages,
-                  onChange: (e) => setPassageQuery(e.target.value),
-                  "data-testid": "docx-cross-reference-passage-filter"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "max-h-64 space-y-1 overflow-y-auto",
-                  "data-testid": "docx-cross-reference-passages",
-                  children: list === "loading" || list === void 0 ? /* @__PURE__ */ jsx("p", { className: "p-2 text-sm text-muted-foreground", children: l.loadingPassages }) : shownPassages.length === 0 ? /* @__PURE__ */ jsx("p", { className: "p-2 text-sm text-muted-foreground", children: l.noPassages }) : shownPassages.map((p, i) => /* @__PURE__ */ jsx(
-                    FactPassageItem,
-                    {
-                      index: i,
-                      page: p.page,
-                      excerpt: passageExcerpt(p.text, 200),
-                      isViewing: passage?.chunkId === p.chunkId,
-                      onSelect: () => {
-                        setPassage(p);
-                        setText(referenceText(title, p));
-                      },
-                      testId: "docx-cross-reference-passage"
-                    },
-                    p.chunkId
-                  ))
-                }
-              ),
-              passage && /* @__PURE__ */ jsxs("label", { className: "block space-y-1 text-sm", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: l.referenceText }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    value: text,
-                    onChange: (e) => setText(e.target.value),
-                    "data-testid": "docx-cross-reference-text"
-                  }
-                )
-              ] })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(DialogFooter, { children: [
-          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onCancel, children: l.cancel }),
-          /* @__PURE__ */ jsx(Button, { disabled: !canInsert, onClick: insert, "data-testid": "docx-cross-reference-insert", children: l.insertButton })
-        ] })
-      ]
+      label: `${label} (${shortcut})`,
+      icon,
+      disabled: !note.isEnabled,
+      disabledReason: note.disabledReason ?? void 0,
+      onSelect: () => void note.insert(),
+      className: `native-docx-insert-${kind}`
     }
   ) });
 }
-function RibbonMenu({
-  label,
-  icon,
-  children,
-  className,
-  testId,
-  title,
-  keepMounted = false,
-  popoverClassName
-}) {
-  const [open, setOpen] = useState(false);
-  const element = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const dismiss = (event) => {
-      if (!element.current?.contains(event.target)) setOpen(false);
-    };
-    const escape = (event) => {
-      if (event.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("pointerdown", dismiss);
-    document.addEventListener("keydown", escape);
-    return () => {
-      document.removeEventListener("pointerdown", dismiss);
-      document.removeEventListener("keydown", escape);
-    };
-  }, [open]);
-  return /* @__PURE__ */ jsxs("div", { className: "native-docx-ribbon-menu", ref: element, children: [
+function NoteButtons() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      "button",
+      NoteAction,
       {
-        type: "button",
-        className: ["native-docx-ribbon-trigger", className].filter(Boolean).join(" "),
-        "aria-label": label,
-        title: title ?? label,
-        "aria-expanded": open,
-        "data-testid": testId,
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => setOpen((value) => !value),
-        children: icon
+        kind: "footnote",
+        label: "Insert footnote",
+        shortcut: "Ctrl+Alt+F",
+        icon: /* @__PURE__ */ jsx(Superscript, { size: 16 })
       }
     ),
-    (open || keepMounted) && /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx(
+      NoteAction,
       {
-        className: ["native-docx-ribbon-popover", popoverClassName].filter(Boolean).join(" "),
-        role: "group",
-        "aria-label": label,
-        hidden: !open,
-        onMouseDown: (event) => {
-          if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement))
-            event.preventDefault();
-        },
-        children: typeof children === "function" ? children(() => setOpen(false)) : children
+        kind: "endnote",
+        label: "Insert endnote",
+        shortcut: "Ctrl+Alt+D",
+        icon: /* @__PURE__ */ jsx(NotebookText, { size: 16 })
       }
     )
   ] });
 }
-var titleOf = (prompt) => {
-  const line = prompt.trim().split("\n")[0];
-  return line.length > 80 ? `${line.slice(0, 79)}\u2026` : line;
-};
-function rememberCaret(editor) {
-  const surface = editor.surface;
-  const head = surface?.state().selection?.head;
-  if (!surface || !head) return null;
-  return { paraId: surface.session.paraIdOf(head.paragraphId), ...head };
-}
-var mounted = [];
-var running = 0;
-var listeners = /* @__PURE__ */ new Set();
-var setRunning = (delta) => {
-  running += delta;
-  listeners.forEach((listener) => listener());
-};
-var subscribe = (listener) => {
-  listeners.add(listener);
-  return () => void listeners.delete(listener);
-};
-function insertionTarget(origin, caret, editors = mounted) {
-  if (editors.includes(origin) && origin.surface) return origin;
-  const paraId = caret?.paraId;
-  if (!paraId) return null;
-  for (let i = editors.length - 1; i >= 0; i--) {
-    const session = editors[i].surface?.session;
-    if (session?.nodeIdOf(paraId)) return editors[i];
-  }
-  return null;
-}
-function restoreCaret(editor, caret) {
-  const surface = editor.surface;
-  if (!surface || !caret) return;
-  const paragraphId = caret.paraId && surface.session.nodeIdOf(caret.paraId) || caret.paragraphId;
-  if (!surface.session.paragraphIds().includes(paragraphId)) return;
-  const point = { paragraphId, offset: caret.offset };
-  surface.setSelection({ anchor: point, head: point });
-}
-async function insertGeneratedImage(editor, bytes, prompt, caret) {
-  const image = normalizeImageBytes(bytes);
-  if (!image.ok) throw new Error("The generated image is not in a format Word can embed.");
-  let result;
-  for (let attempt = 0; attempt < 3 && !result?.ok; attempt++) {
-    editor.focus();
-    restoreCaret(editor, caret);
-    result = await executeImageCommand(editor, {
-      type: "insertImage",
-      data: image.bytes,
-      mime: image.mime,
-      widthPoints: image.widthPoints,
-      heightPoints: image.heightPoints,
-      description: prompt.trim(),
-      title: titleOf(prompt)
-    });
-    if (!result.ok && result.reason !== "stale drawing selection") break;
-  }
-  if (!result?.ok) throw new Error(result?.reason || "The picture could not be inserted here.");
-}
-var AUTO = "";
-function useGenerateImageTarget() {
+function WordShortcuts({ scope }) {
+  const footnote = useInsertNote("footnote");
+  const endnote = useInsertNote("endnote");
+  const styles = useParagraphStyle();
   const editor = useDocxEditor();
-  const loaded2 = useEditorState((snapshot) => !snapshot.isLoading);
+  const levels = useHouseTemplate()?.levels;
+  const latest = useRef({ footnote, endnote, styles, editor, levels });
+  latest.current = { footnote, endnote, styles, editor, levels };
   useEffect(() => {
-    if (!editor || !loaded2) return;
-    mounted.push(editor);
-    return () => void mounted.splice(mounted.indexOf(editor), 1);
-  }, [editor, loaded2]);
-}
-function GenerateImageButton({ generation }) {
-  const editor = useDocxEditor();
-  const [prompt, setPrompt] = useState("");
-  const [aspectRatio, setAspectRatio] = useState(AUTO);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState("");
-  const abort = useRef(null);
-  const close = useRef(() => {
-  });
-  const editable = useEditorState((snapshot) => snapshot.editable);
-  const generating = useSyncExternalStore(subscribe, () => running > 0);
-  async function run2() {
-    if (!editor || !prompt.trim() || busy) return;
-    const caret = rememberCaret(editor);
-    const controller = new AbortController();
-    abort.current = controller;
-    setBusy(true);
-    setRunning(1);
-    setError("");
-    try {
-      const bytes = await generation.generate(prompt.trim(), {
-        aspectRatio: aspectRatio || void 0,
-        signal: controller.signal
-      });
-      if (controller.signal.aborted) return;
-      const target = insertionTarget(editor, caret);
-      if (!target) throw new Error("The document was closed before the generated image was ready.");
-      await insertGeneratedImage(target, bytes, prompt, caret);
-      setPrompt("");
-      close.current();
-      generation.notify?.("Generated image inserted", "success");
-    } catch (failure) {
-      if (controller.signal.aborted) return;
-      const message = failure instanceof Error ? failure.message : String(failure);
-      setError(message);
-      generation.notify?.(message, "error");
-    } finally {
-      abort.current = null;
-      setRunning(-1);
-      setBusy(false);
-    }
-  }
-  if (!editable && !generating) return null;
-  return /* @__PURE__ */ jsx(
-    RibbonMenu,
-    {
-      label: generating ? "Generating image\u2026" : "Generate image",
-      icon: generating ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "native-docx-spin" }) : /* @__PURE__ */ jsx(Sparkles, { size: 16 }),
-      testId: "docx-generate-image",
-      children: (dismiss) => {
-        close.current = dismiss;
-        return /* @__PURE__ */ jsxs(
-          "form",
-          {
-            className: "native-docx-form native-docx-generate-image",
-            onSubmit: (event) => {
-              event.preventDefault();
-              void run2();
-            },
-            children: [
-              /* @__PURE__ */ jsxs("label", { children: [
-                "Describe the image",
-                /* @__PURE__ */ jsx(
-                  "textarea",
-                  {
-                    autoFocus: true,
-                    rows: 3,
-                    value: prompt,
-                    disabled: busy,
-                    placeholder: "A watercolour of a lighthouse at dawn",
-                    "data-testid": "docx-generate-image-prompt",
-                    onChange: (event) => setPrompt(event.target.value),
-                    onKeyDown: (event) => {
-                      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) void run2();
-                    }
-                  }
-                )
-              ] }),
-              generation.aspectRatios && generation.aspectRatios.length > 0 && /* @__PURE__ */ jsxs("label", { children: [
-                "Aspect ratio",
-                /* @__PURE__ */ jsxs(
-                  "select",
-                  {
-                    value: aspectRatio,
-                    disabled: busy,
-                    onChange: (event) => setAspectRatio(event.target.value),
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: AUTO, children: "Auto" }),
-                      generation.aspectRatios.map((ratio) => /* @__PURE__ */ jsx("option", { value: ratio.value, children: ratio.label }, ratio.value))
-                    ]
-                  }
-                )
-              ] }),
-              busy && /* @__PURE__ */ jsx("p", { role: "status", "data-testid": "docx-generate-image-status", children: "Generating\u2026 the picture is inserted where your cursor was. You can keep writing." }),
-              error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
-              /* @__PURE__ */ jsx("div", { className: "native-docx-form-actions", children: busy ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => abort.current?.abort(), children: "Cancel" }) : /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "submit",
-                  disabled: !prompt.trim(),
-                  "data-testid": "docx-generate-image-submit",
-                  children: "Generate"
-                }
-              ) })
-            ]
-          }
-        );
+    const element = scope.current;
+    if (!element) return;
+    const onKeyDown = (event) => {
+      if (outlineTab(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      const action = wordShortcut(event);
+      if (!action) return;
+      const { footnote: footnote2, endnote: endnote2, styles: styles2, editor: editor2 } = latest.current;
+      if (action === "footnote" || action === "endnote") {
+        if (!(action === "footnote" ? footnote2 : endnote2).insert()) return;
+      } else {
+        const style = findStyle(styles2.options, action);
+        if (!style) return;
+        styles2.setValue(style.styleId);
       }
+      event.preventDefault();
+      event.stopPropagation();
+      editor2?.surface?.focus();
+    };
+    const outlineTab = (event) => {
+      if (event.key !== "Tab" || event.ctrlKey || event.metaKey || event.altKey) return false;
+      const { editor: editor2, levels: levels2, styles: styles2 } = latest.current;
+      const current = editor2?.getSelectionFormatting()?.styleId;
+      const link = current ? levels2?.[current] : void 0;
+      const target = event.shiftKey ? link?.previous : link?.next;
+      if (!target || !editor2 || editorPort(editor2).caret()?.offset !== 0) return false;
+      styles2.setValue(target);
+      return true;
+    };
+    element.addEventListener("keydown", onKeyDown, true);
+    return () => element.removeEventListener("keydown", onKeyDown, true);
+  }, [scope]);
+  return null;
+}
+
+// src/docx/beforeSave.ts
+var hooks = /* @__PURE__ */ new WeakMap();
+function onBeforeSave(editor, fn) {
+  let set = hooks.get(editor);
+  if (!set) hooks.set(editor, set = /* @__PURE__ */ new Set());
+  set.add(fn);
+  return () => set.delete(fn);
+}
+function runBeforeSave(editor) {
+  if (!editor) return;
+  for (const fn of hooks.get(editor) ?? [])
+    try {
+      fn();
+    } catch {
+    }
+}
+
+// src/docx/references/numbering.ts
+var numbers = (level) => !!level && level.numFmt !== "bullet" && level.numFmt !== "none" && (level.lvlText ?? level.markerText ?? "").length > 0;
+function paragraphNumber(order, items, levelOf, paragraphId) {
+  const item = items.get(paragraphId);
+  if (!item || !numbers(item)) return null;
+  const at = order.indexOf(paragraphId);
+  const markerAt = (ilvl) => {
+    if (ilvl === item.ilvl) return item.markerText;
+    for (let i = at - 1; i >= 0; i--) {
+      const other = items.get(order[i]);
+      if (other && other.numId === item.numId && other.ilvl === ilvl) return other.markerText;
     }
+    return null;
+  };
+  const chain = [];
+  const texts = [];
+  for (let u = item.ilvl; u >= 0; u--) {
+    const level = levelOf(item.numId, u);
+    if (!level || !numbers(level)) continue;
+    if (u !== item.ilvl && texts.some((t) => t.includes(`%${u + 1}`))) continue;
+    chain.push(u);
+    texts.push(level.lvlText);
+  }
+  const value = chain.reverse().map((u) => markerAt(u) ?? "").join("");
+  if (!value) return null;
+  return value.length > 1 && value.endsWith(".") ? value.slice(0, -1) : value;
+}
+function listTargets(paragraphs, items, levelOf) {
+  const order = paragraphs.map((p) => p.id);
+  const out = [];
+  for (const p of paragraphs) {
+    const text = p.text.replace(//g, "").trim();
+    if (!text) continue;
+    const number = paragraphNumber(order, items, levelOf, p.id);
+    const item = items.get(p.id);
+    if (number !== null)
+      out.push({
+        paragraphId: p.id,
+        kind: "numbered",
+        number,
+        marker: item?.markerText ?? "",
+        text,
+        heading: p.heading,
+        level: item?.ilvl ?? 0
+      });
+    else if (p.heading)
+      out.push({
+        paragraphId: p.id,
+        kind: "heading",
+        number: null,
+        marker: "",
+        text,
+        heading: true,
+        level: 0
+      });
+  }
+  return out;
+}
+function filterTargets(targets, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return [...targets];
+  return targets.filter(
+    (t) => (t.number ?? "").toLowerCase().startsWith(q) || t.text.toLowerCase().includes(q)
   );
 }
-function wordDraftHtml(markdown) {
-  const template = document.createElement("template");
-  template.innerHTML = renderToStaticMarkup(/* @__PURE__ */ jsx(AiMarkdown, { children: markdown }));
-  template.content.querySelectorAll('button, svg, [data-testid="code-block-header"]').forEach((node) => node.remove());
-  template.content.querySelectorAll('[data-testid="markdown-code-block"]').forEach((node) => {
-    const pre = node.querySelector("pre");
-    if (pre) node.replaceWith(pre);
-  });
-  return template.innerHTML;
+
+// src/docx/references/commands.ts
+var REF_BOOKMARK_PREFIX = "_Ref";
+function newRefBookmark(taken, random = Math.random) {
+  for (; ; ) {
+    const name = `${REF_BOOKMARK_PREFIX}${String(Math.floor(random() * 9e8) + 1e8)}`;
+    if (!taken.has(name)) return name;
+  }
 }
-function requireEdit(result) {
-  if (!result.ok) throw new Error(result.reason);
+var styled = (style) => style ? `<w:rPr><w:rStyle w:val="${style}"/></w:rPr>` : "";
+var run = (text, style) => `<w:r>${styled(style)}<w:t xml:space="preserve">${esc(text)}</w:t></w:r>`;
+function refFieldXml(instruction, cached) {
+  const r = (inner) => `<w:r>${styled(CROSS_REFERENCE_STYLE)}${inner}</w:r>`;
+  return `${r('<w:fldChar w:fldCharType="begin"/>')}${r(
+    `<w:instrText xml:space="preserve"> ${esc(instruction)} </w:instrText>`
+  )}${r('<w:fldChar w:fldCharType="separate"/>')}${run(cached, CROSS_REFERENCE_STYLE)}${r(
+    '<w:fldChar w:fldCharType="end"/>'
+  )}`;
 }
-var WordDraftStream = class {
-  constructor(editor) {
-    this.editor = editor;
+var refTooltip = (value, mode) => mode === "number" ? `Cross-reference to clause ${value}` : `Cross-reference to \u201C${value}\u201D`;
+function crossReferenceXml(bookmark, mode, value) {
+  return `<w:hyperlink w:anchor="${esc(bookmark)}" w:tooltip="${esc(
+    refTooltip(value, mode)
+  )}" w:history="1">${refFieldXml(refInstruction(bookmark, mode), value)}</w:hyperlink>`;
+}
+var refInstruction = (bookmark, mode) => mode === "number" ? `REF ${bookmark} \\r \\h` : `REF ${bookmark} \\h`;
+var refResult = (target, mode) => mode === "number" && target.number ? target.number : target.text;
+var allBookmarks = (port) => new Set(port.paragraphs().flatMap((p) => p.bookmarks));
+function ensureTargetBookmark(port, target, mode) {
+  const paragraph = port.paragraphs().find((p) => p.id === target.paragraphId);
+  if (!paragraph) throw new Error("That clause is no longer in the document.");
+  const existing = paragraph.bookmarks.find((b) => b.startsWith(REF_BOOKMARK_PREFIX));
+  if (existing && mode === "number") return existing;
+  const name = newRefBookmark(allBookmarks(port));
+  const start = `<w:bookmarkStart w:id="0" w:name="${name}"/>`;
+  const end = '<w:bookmarkEnd w:id="0"/>';
+  if (mode === "number") {
+    port.setCaret({ paragraphId: paragraph.id, offset: 0 });
+    if (!port.paste(`<w:p>${start}${end}</w:p>`, "", false))
+      throw new Error("The cross-reference target could not be marked.");
+    return name;
   }
-  editor;
-  committed = [];
-  pending;
-  resetAfterFailure = false;
-  update(content, complete) {
-    const blocks = splitMarkdownBlocks(content);
-    const completeCount = complete ? blocks.length : Math.max(0, blocks.length - 1);
-    requireEdit(this.editor.setEditingMode("editing"));
-    try {
-      if (this.resetAfterFailure || this.committed.some((block, index) => blocks[index] !== block)) {
-        requireEdit(this.editor.exec({ type: "selectAll" }));
-        requireEdit(this.editor.exec({ type: "deleteText" }));
-        this.committed = [];
-        this.pending = void 0;
-        this.resetAfterFailure = false;
-      }
-      for (let index = this.committed.length; index < blocks.length; index++) {
-        const tail = this.editor.query({ type: "paragraphs" }).at(-1);
-        const start = this.pending?.start || tail?.paraId;
-        if (!start) throw new Error("The draft insertion paragraph is unavailable.");
-        requireEdit(
-          this.editor.exec(
-            this.pending ? {
-              type: "setSelection",
-              range: { from: { paraId: start }, to: { paraId: this.pending.end } }
-            } : { type: "setSelection", anchor: { paraId: start } }
-          )
-        );
-        const html = wordDraftHtml(blocks[index]) + "<p></p>";
-        const element = document.createElement("div");
-        element.innerHTML = html;
-        const startIndex = this.editor.query({ type: "paragraphs" }).findIndex((p) => p.paraId === start);
-        requireEdit(this.editor.exec({ type: "paste", html, text: element.textContent || "" }));
-        const inserted = this.editor.query({ type: "paragraphs" }).slice(startIndex);
-        let headingIndex = 0;
-        for (const heading of Array.from(element.querySelectorAll("h1,h2,h3,h4,h5,h6"))) {
-          const match = inserted.findIndex(
-            (p, i) => i >= headingIndex && p.text === heading.textContent
-          );
-          if (match >= 0 && inserted[match].paraId) {
-            requireEdit(
-              this.editor.exec({
-                type: "setSelection",
-                anchor: { paraId: inserted[match].paraId }
-              })
-            );
-            requireEdit(
-              this.editor.exec({
-                type: "setParagraphStyle",
-                styleId: `Heading${heading.tagName.slice(1)}`
-              })
-            );
-            headingIndex = match + 1;
-          }
-        }
-        const end = this.editor.query({ type: "paragraphs" }).at(-1)?.paraId;
-        if (!end) throw new Error("The draft continuation paragraph is unavailable.");
-        if (index < completeCount) {
-          this.committed.push(blocks[index]);
-          this.pending = void 0;
-        } else this.pending = { start, end };
+  const runs = port.runsXml(paragraph.id);
+  if (!runs) throw new Error("This heading cannot be referred to by its text; use its number.");
+  port.deleteRange(
+    { paragraphId: paragraph.id, offset: 0 },
+    { paragraphId: paragraph.id, offset: paragraph.text.length }
+  );
+  if (!port.paste(`<w:p>${start}${runs}${end}</w:p>`, paragraph.text, false))
+    throw new Error("The cross-reference target could not be marked.");
+  return name;
+}
+function pastePoint(port, caret) {
+  const paragraph = port.paragraphs().find((p) => p.id === caret.paragraphId);
+  if (paragraph?.text[caret.offset - 1] !== FIELD_ATOM) return caret;
+  port.setCaret(caret);
+  port.typeText(" ");
+  return { paragraphId: caret.paragraphId, offset: caret.offset + 1 };
+}
+function markCrossReferenceTarget(port, target, mode) {
+  if (mode === "number" && !target.number) mode = "text";
+  const bookmark = ensureTargetBookmark(port, target, mode);
+  return { bookmark, mode, value: refResult(target, mode) };
+}
+function insertCrossReferenceField(port, { bookmark, mode, value }, caret) {
+  caret = pastePoint(port, caret);
+  port.setCaret(caret);
+  if (!port.paste(`<w:p>${crossReferenceXml(bookmark, mode, value)}</w:p>`, value, false))
+    throw new Error("The cross-reference could not be inserted.");
+  port.setCaret({ paragraphId: caret.paragraphId, offset: caret.offset + 1 });
+  return { bookmark };
+}
+function insertCrossReference(port, target, mode, caret) {
+  return insertCrossReferenceField(port, markCrossReferenceTarget(port, target, mode), caret);
+}
+var documentReferenceTooltip = (text, appName = "ARBI") => `Cross-reference: ${text} \u2014 opens in ${appName}`;
+function insertDocumentReference(port, reference, caret) {
+  const text = reference.text.trim();
+  if (!text) throw new Error("Enter the reference text.");
+  const tooltip = documentReferenceTooltip(text, reference.appName).slice(0, 255);
+  caret = pastePoint(port, caret);
+  port.setCaret(caret);
+  const link = `<w:p><w:hyperlink r:id="rIdRef1"${tooltip ? ` w:tooltip="${esc(tooltip)}"` : ""} w:history="1">${run(text, CROSS_REFERENCE_STYLE)}</w:hyperlink></w:p>`;
+  if (!port.paste(link, text, false, hyperlinkRelationship("rIdRef1", reference.url)))
+    throw new Error("The reference could not be inserted.");
+  port.setCaret({ paragraphId: caret.paragraphId, offset: caret.offset + text.length });
+}
+var REF_FIELD = /^REF\s+(\S+)((?:\s+\\[A-Za-z*]+(?:\s+MERGEFORMAT)?)*)\s*$/i;
+function staleCrossReferences(port) {
+  const paragraphs = port.paragraphs();
+  if (!paragraphs.some((p) => p.fields?.length)) return [];
+  const items = port.listItems();
+  const order = paragraphs.map((p) => p.id);
+  const owner = /* @__PURE__ */ new Map();
+  for (const p of paragraphs) for (const b of p.bookmarks) if (!owner.has(b)) owner.set(b, p.id);
+  const out = [];
+  for (const p of paragraphs)
+    for (const field of p.fields ?? []) {
+      const match = REF_FIELD.exec(field.instruction);
+      if (!match || !match[1].startsWith(REF_BOOKMARK_PREFIX)) continue;
+      const switches = match[2].toLowerCase();
+      const mode = /\\[rwn]\b/.test(switches) ? "number" : "text";
+      const target = owner.get(match[1]);
+      const base = {
+        paragraphId: p.id,
+        offset: field.offset,
+        instruction: field.instruction,
+        cached: field.result,
+        bookmark: match[1],
+        mode
+      };
+      if (!target) {
+        out.push({ ...base, value: null });
+        continue;
       }
-    } catch (error) {
-      this.resetAfterFailure = true;
-      throw error;
-    } finally {
-      requireEdit(this.editor.setEditingMode("viewing"));
+      const value = /\\[rwn]\b/.test(switches) ? switches.includes("\\r") ? paragraphNumber(order, items, port.levelOf, target) : null : (paragraphs.find((x) => x.id === target)?.text ?? "").replace(//g, "").trim();
+      if (value && value !== field.result.trim()) out.push({ ...base, value });
     }
+  return out;
+}
+function brokenCrossReferences(port) {
+  return port.paragraphs().flatMap(
+    (p) => (p.marks ?? []).filter((m) => m.styleId === BROKEN_CROSS_REFERENCE_STYLE).map((m) => ({ paragraphId: p.id, offset: m.offset, text: m.text }))
+  );
+}
+function refreshCrossReferences(port) {
+  const stale = staleCrossReferences(port).sort(
+    (a, b) => a.paragraphId === b.paragraphId ? b.offset - a.offset : 0
+  );
+  let refreshed = 0;
+  for (const ref of stale) {
+    const paragraph = port.paragraphs().find((p) => p.id === ref.paragraphId);
+    if (!paragraph || paragraph.text[ref.offset - 1] === FIELD_ATOM) continue;
+    const at = { paragraphId: ref.paragraphId, offset: ref.offset };
+    port.deleteRange(at, { paragraphId: ref.paragraphId, offset: ref.offset + 1 });
+    port.setCaret(at);
+    const text = ref.value ?? (ref.cached.trim() || ref.bookmark);
+    const body = ref.value === null ? run(text, BROKEN_CROSS_REFERENCE_STYLE) : crossReferenceXml(ref.bookmark, ref.mode, ref.value);
+    if (port.paste(`<w:p>${body}</w:p>`, text, false) && ref.value !== null) refreshed++;
   }
-};
+  return { refreshed, broken: brokenCrossReferences(port) };
+}
 
-// src/docx/overflowPlan.ts
-function planOverflow(items, available, moreWidth) {
-  const collapsed = /* @__PURE__ */ new Set();
-  let used = items.reduce((sum, item) => sum + item.width, 0);
-  if (used <= available) return collapsed;
-  used += moreWidth;
-  const order = items.map((item, index) => ({ item, index })).sort((a, b) => a.item.priority - b.item.priority || b.index - a.index);
-  for (const { item } of order) {
-    if (used <= available) break;
-    collapsed.add(item.id);
-    used -= item.width;
-  }
-  return collapsed;
+// src/docx/references/passages.ts
+function shortTitle(title) {
+  const base = title.replace(/\.[A-Za-z0-9]{1,5}$/, "").trim();
+  const defined = /\(\s*(?:the\s+)?["“'‘]([^"”'’]{1,30})["”'’]\s*\)/i.exec(base);
+  return defined ? defined[1] : base;
 }
-var Overflow = createContext(null);
-var MORE_WIDTH = 32;
-var sameSet = (a, b) => a.size === b.size && [...a].every((id) => b.has(id));
-function RibbonOverflow({ tab, children }) {
-  const row = useRef(null);
-  const items = useRef(/* @__PURE__ */ new Map());
-  const widths = useRef(/* @__PURE__ */ new Map());
-  const [version, setVersion] = useState(0);
-  const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
-  const [slots, setSlots] = useState({});
-  const [menu, setMenu] = useState([]);
-  const register = useCallback((id, item) => {
-    items.current.set(id, item);
-    setVersion((v) => v + 1);
-    return () => {
-      if (items.current.get(id) === item) items.current.delete(id);
-      setVersion((v) => v + 1);
-    };
-  }, []);
-  const plan = useCallback(() => {
-    const element = row.current;
-    if (!element) return;
-    const gap = parseFloat(getComputedStyle(element).columnGap) || 0;
-    const ordered = Array.from(element.querySelectorAll("[data-ribbon-item]")).map((node) => node.dataset.ribbonItem).filter((id) => items.current.has(id));
-    const measured = ordered.map((id) => {
-      const { element: node, priority } = items.current.get(id);
-      if (!node.hidden) {
-        const width = node.getBoundingClientRect().width;
-        widths.current.set(id, width ? width + gap : 0);
-      }
-      return { id, priority, width: widths.current.get(id) ?? 0 };
-    });
-    const next = planOverflow(measured, element.clientWidth, MORE_WIDTH);
-    setCollapsed((current) => sameSet(current, next) ? current : next);
-    const entries = ordered.filter((id) => next.has(id)).map((id) => ({ id, label: items.current.get(id).label }));
-    setMenu(
-      (current) => current.length === entries.length && current.every((entry, i) => entry.id === entries[i].id && entry.label === entries[i].label) ? current : entries
-    );
-  }, []);
-  useLayoutEffect(plan, [plan, version, tab, collapsed]);
-  useLayoutEffect(() => {
-    const element = row.current;
-    if (!element) return;
-    const observer = new ResizeObserver(() => plan());
-    observer.observe(element);
-    for (const item of items.current.values()) observer.observe(item.element);
-    return () => observer.disconnect();
-  }, [plan, version]);
-  const slotRef = useCallback(
-    (id) => (node) => setSlots((current) => {
-      if (node ? current[id] === node : !(id in current)) return current;
-      const next = { ...current };
-      if (node) next[id] = node;
-      else delete next[id];
-      return next;
-    }),
-    []
+function passageClause(text) {
+  const first = text.trim().split("\n")[0] ?? "";
+  const match = /^(?:#+\s*)?(?:\*\*)?(?:clause|section|article)?\s*(\d+(?:\.\d+)*)[.)]?(?:\*\*)?\s+\S/i.exec(
+    first
   );
-  const context = useMemo(() => ({ collapsed, slots, register }), [collapsed, slots, register]);
-  const shown = menu.filter((entry) => collapsed.has(entry.id));
-  return /* @__PURE__ */ jsx(Overflow.Provider, { value: context, children: /* @__PURE__ */ jsxs("div", { className: "native-docx-ribbon-row", ref: row, "data-testid": "docx-ribbon-row", children: [
-    children,
-    shown.length > 0 && /* @__PURE__ */ jsx(
-      RibbonMenu,
-      {
-        label: "More",
-        title: "More commands",
-        icon: /* @__PURE__ */ jsx(Ellipsis, { size: 16 }),
-        testId: "docx-ribbon-more",
-        keepMounted: true,
-        popoverClassName: "native-docx-ribbon-more",
-        children: (close) => /* @__PURE__ */ jsx(MoreRows, { entries: shown, slotRef, close })
-      },
-      tab
-    )
-  ] }) });
+  return match ? match[1] : null;
 }
-function MoreRows({
-  entries,
-  slotRef,
-  close
-}) {
-  const refs = useRef(/* @__PURE__ */ new Map());
-  const refFor = (id) => {
-    let ref = refs.current.get(id);
-    if (!ref) refs.current.set(id, ref = slotRef(id));
-    return ref;
-  };
-  const list = useRef(null);
-  const latest = useRef(close);
-  latest.current = close;
-  useEffect(() => {
-    const element = list.current;
-    if (!element) return;
-    const onClick = (event) => {
-      const target = event.target;
-      const row = target.closest(".native-docx-ribbon-more-row");
-      if (!row) return;
-      const control = row.querySelector(".native-docx-ribbon-more-control");
-      if (!control.contains(target)) {
-        control.querySelector("button:not([disabled])")?.click();
-        return;
-      }
-      const button = target.closest("button");
-      if (button && !button.disabled && !control.querySelector(".native-docx-ribbon-popover")?.contains(button) && !button.hasAttribute("aria-expanded") && !button.hasAttribute("aria-haspopup"))
-        latest.current();
-    };
-    element.addEventListener("click", onClick, true);
-    return () => element.removeEventListener("click", onClick, true);
-  }, []);
-  return /* @__PURE__ */ jsx("div", { className: "native-docx-ribbon-more-list", ref: list, children: entries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "native-docx-ribbon-more-row", "data-ribbon-more": entry.id, children: [
-    /* @__PURE__ */ jsx("span", { className: "native-docx-ribbon-more-control", ref: refFor(entry.id) }),
-    /* @__PURE__ */ jsx("span", { className: "native-docx-ribbon-more-label", children: entry.label })
-  ] }, entry.id)) });
+function referenceText(title, passage) {
+  const name = shortTitle(title);
+  const clause = passageClause(passage.text);
+  if (clause) return `${name}, clause ${clause}`;
+  if (passage.page) return `${name}, p. ${passage.page}`;
+  return name;
 }
-function RibbonItem({
-  id,
-  label,
-  priority = 0,
-  children
-}) {
-  const context = useContext(Overflow);
-  const element = useRef(null);
-  const register = context?.register;
-  useLayoutEffect(() => {
-    if (!register || !element.current) return;
-    return register(id, { label, priority, element: element.current });
-  }, [register, id, label, priority]);
-  if (!context) return /* @__PURE__ */ jsx(Fragment, { children });
-  const collapsed = context.collapsed.has(id);
-  const slot = context.slots[id];
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref: element,
-      className: "native-docx-ribbon-item",
-      "data-ribbon-item": id,
-      hidden: collapsed || void 0,
-      children: collapsed ? slot ? createPortal(children, slot) : null : children
-    }
-  );
+function passageExcerpt(text, max = 280) {
+  const plain = text.replace(/[#*_`>|]+/g, " ").replace(/\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\s+/g, " ").trim();
+  return plain.length > max ? `${plain.slice(0, max - 1)}\u2026` : plain;
 }
-
-// src/docx/wordStyles.ts
-var QUICK_STYLES = ["Normal", "Title", "heading 1", "heading 2", "heading 3"];
-function findStyle(options, name) {
-  const wanted = name.toLowerCase();
-  const id = name.replace(/(^|\s)(\w)/g, (_, _s, c) => c.toUpperCase());
-  return options.find((o) => o.name.toLowerCase() === wanted) ?? options.find((o) => o.styleId.toLowerCase() === id.toLowerCase());
+function filterPassages(passages, query) {
+  const q = query.trim().toLowerCase();
+  return q ? passages.filter((p) => p.text.toLowerCase().includes(q)) : [...passages];
 }
-function styleLabel(name) {
-  return name === name.toLowerCase() ? name.replace(/(^|\s)(\w)/g, (m) => m.toUpperCase()) : name;
+var RUN_PARTS = /* @__PURE__ */ new Set(["rPr", "t", "tab", "br", "lastRenderedPageBreak"]);
+var SKIPPED = /* @__PURE__ */ new Set(["pPr", "bookmarkStart", "bookmarkEnd", "proofErr", "permStart", "permEnd"]);
+function serialize(node) {
+  if (node.kind === "textValue") return esc(node.value ?? "");
+  const name = `${node.prefix ?? "w"}:${node.localName}`;
+  const attrs = (node.attributes ?? []).map((a) => ` ${a.prefix ? `${a.prefix}:` : ""}${a.localName}="${esc(a.value)}"`).join("");
+  const children = (node.children ?? []).map((c) => serialize(c)).join("");
+  return children ? `<${name}${attrs}>${children}</${name}>` : `<${name}${attrs}/>`;
 }
-function wordShortcut(event) {
-  const mod = event.ctrlKey || event.metaKey;
-  if (!mod) return null;
-  if (event.altKey && !event.shiftKey) {
-    switch (event.code) {
-      case "KeyF":
-        return "footnote";
-      case "KeyD":
-        return "endnote";
-      case "Digit1":
-      case "Numpad1":
-        return "heading 1";
-      case "Digit2":
-      case "Numpad2":
-        return "heading 2";
-      case "Digit3":
-      case "Numpad3":
-        return "heading 3";
-    }
+function paragraphRunsXml(paragraph) {
+  const runs = [];
+  for (const child of paragraph.children ?? []) {
+    if (child.localName && SKIPPED.has(child.localName)) continue;
+    if (child.localName !== "r") return null;
+    if ((child.children ?? []).some((c) => !c.localName || !RUN_PARTS.has(c.localName))) return null;
+    runs.push(serialize(child));
+  }
+  return runs.length ? runs.join("") : null;
+}
+function findNode2(node, id) {
+  if (node.id === id) return node;
+  for (const child of node.children ?? []) {
+    const found = findNode2(child, id);
+    if (found) return found;
   }
-  if (event.shiftKey && !event.altKey && event.code === "KeyN") return "Normal";
-  return null;
-}
-function divergenceSummary(divergence) {
-  if (!divergence) return null;
-  const changed = divergence.styles.filter((s) => s.kind === "changed").map((s) => styleLabel(s.name));
-  const missing = divergence.styles.filter((s) => s.kind === "missing").map((s) => styleLabel(s.name));
-  const parts = [
-    divergence.docDefaults ? "default text formatting" : "",
-    changed.length ? `${changed.length === 1 ? "style" : "styles"} ${changed.slice(0, 6).join(", ")}${changed.length > 6 ? "\u2026" : ""}` : "",
-    missing.length ? `${missing.length} house ${missing.length === 1 ? "style" : "styles"} missing` : ""
-  ].filter(Boolean);
-  return parts.length ? `Differs from the house template: ${parts.join("; ")}.` : null;
+  return void 0;
 }
-var FILTER_FROM = 8;
-function previewStyle(option) {
-  const { fontFamily, fontSizePt, bold, italic, color } = option.preview;
+function referencesPort(editor, revision) {
+  const base = editorPort(editor, revision);
+  const session = () => {
+    const s = editor.surface?.session;
+    if (!s) throw new Error("The document is not open.");
+    return s;
+  };
+  const root = () => session().part().root;
+  let numbering;
+  let cascade;
+  const index = () => {
+    if (!numbering) {
+      const s = session();
+      cascade = buildStyleCascadeTable(s.stylesRoot(), void 0, s.settingsRoot());
+      numbering = withNumberingStyleLinks(buildNumberingIndex(s.numberingRoot()), cascade);
+    }
+    return numbering;
+  };
   return {
-    fontFamily: fontFamily ? `"${fontFamily}", serif` : void 0,
-    // In the face of the style, but within a row: 9-18pt.
-    fontSize: fontSizePt ? `${Math.min(18, Math.max(9, fontSizePt))}pt` : void 0,
-    fontWeight: bold ? 700 : void 0,
-    fontStyle: italic ? "italic" : void 0,
-    color: color ? `#${color}` : void 0
+    ...base,
+    listItems: () => {
+      const body = root().children?.find((n) => n.kind === "body");
+      const items = resolveStoryListItems(
+        body?.children ?? [],
+        index(),
+        cascade
+      );
+      const out = /* @__PURE__ */ new Map();
+      for (const [id, item] of items)
+        out.set(id, {
+          numId: item.numId,
+          ilvl: item.ilvl,
+          markerText: item.markerText,
+          numFmt: item.numFmt
+        });
+      return out;
+    },
+    levelOf: (numId, ilvl) => {
+      const level = resolveNumberingLevel(index(), numId, ilvl)?.level;
+      return level ? { lvlText: level.lvlText, numFmt: level.numFmt } : null;
+    },
+    runsXml: (paragraphId) => {
+      const node = findNode2(root(), paragraphId);
+      return node ? paragraphRunsXml(node) : null;
+    }
   };
 }
-function Gallery({ close }) {
-  const { value, setValue, options, isEnabled } = useParagraphStyle();
+var DEFAULT_CROSS_REFERENCES_LABELS = {
+  insert: "Insert cross-reference",
+  title: "Insert cross-reference",
+  description: "Refer to a clause of this document, or to a passage of another document.",
+  thisDocument: "This document",
+  otherDocument: "Another document",
+  filterTargets: "Find a clause or heading",
+  noTargets: "This document has no numbered clauses or headings yet.",
+  number: "Paragraph number",
+  text: "Heading text",
+  insertAs: "Insert",
+  chooseDocument: "Choose a document",
+  filterPassages: "Find a passage",
+  loadingPassages: "Loading passages\u2026",
+  noPassages: "No passage matches.",
+  referenceText: "Reference text",
+  insertButton: "Insert",
+  cancel: "Cancel",
+  clause: (number) => `Clause ${number}`,
+  heading: "Heading",
+  update: "Update cross-references",
+  updated: "Cross-references updated",
+  updateSummary: (refreshed) => refreshed ? `${refreshed} cross-reference${refreshed === 1 ? "" : "s"} brought up to date.` : "Every cross-reference is up to date.",
+  brokenTitle: "Broken cross-references",
+  brokenNone: "No cross-reference points at a deleted target.",
+  brokenHelp: "Their target was deleted: the last text is kept and marked. Insert the reference again to repair it.",
+  brokenCard: "Broken cross-reference",
+  brokenCardBody: "Its target was deleted. Update cross-references to mark it.",
+  show: "Show",
+  close: "Close"
+};
+var CrossReferencesContext = createContext(null);
+var useCrossReferences = () => useContext(CrossReferencesContext);
+function CrossReferencesProvider({
+  children,
+  editable,
+  references,
+  documentId,
+  notify,
+  labels
+}) {
   const editor = useDocxEditor();
-  const house = useHouseTemplate();
-  const changed = new Set(
-    house?.basedOnTemplate ? house.divergence?.styles.filter((s) => s.kind === "changed").map((s) => s.styleId) : []
+  const track = useTrackedOrNoted();
+  const l = useMemo(() => ({ ...DEFAULT_CROSS_REFERENCES_LABELS, ...labels }), [labels]);
+  const [dialog, setDialog] = useState(
+    null
   );
-  const [query, setQuery] = useState("");
-  const quick = useMemo(
-    () => QUICK_STYLES.map((name) => findStyle(options, name)).filter(
-      (o) => !!o
-    ),
-    [options]
+  const marker = useRef(null);
+  const [viewer, setViewer] = useState(null);
+  useEffect(() => setViewer(marker.current?.closest(".native-docx-viewer") ?? null), []);
+  const openDialog = useCallback(() => {
+    if (!editor || !editable) return;
+    try {
+      const port = referencesPort(editor);
+      const caret = port.caret();
+      if (!caret) return notify?.("Place the cursor where the reference should go.", "error");
+      setDialog({ caret, targets: listTargets(port.paragraphs(), port.listItems(), port.levelOf) });
+    } catch (error) {
+      notify?.(error instanceof Error ? error.message : "Could not read the document.", "error");
+    }
+  }, [editor, editable, notify]);
+  const run2 = useCallback(
+    (label, prepare, insert) => {
+      if (!editor) return;
+      try {
+        const prepared = withDirectEditing(editor, prepare);
+        if (dialog) referencesPort(editor).setCaret(dialog.caret);
+        track({ label, insert: (revision) => insert(prepared, revision), inserted: () => true });
+        setDialog(null);
+        editor.surface?.focus();
+        holdCaret(editor);
+      } catch (error) {
+        notify?.(
+          error instanceof Error ? error.message : "Could not insert the reference.",
+          "error"
+        );
+      }
+    },
+    [editor, dialog, track, notify]
   );
-  const shown = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return q ? options.filter(
-      (o) => o.name.toLowerCase().includes(q) || o.styleId.toLowerCase().includes(q)
-    ) : options;
-  }, [options, query]);
-  const apply = (option) => {
-    setValue(option.styleId);
-    close();
-    editor?.surface?.focus();
+  useEffect(() => {
+    if (!editor || !editable) return;
+    const refresh = () => {
+      try {
+        const port = referencesPort(editor);
+        if (!port.paragraphs().some((p) => p.fields?.length)) return;
+        preservingCaret(editor, () => withDirectEditing(editor, () => refreshCrossReferences(port)));
+      } catch {
+      }
+    };
+    const off = onBeforeSave(editor, refresh);
+    const timer = setTimeout(refresh, 1500);
+    return () => {
+      off();
+      clearTimeout(timer);
+    };
+  }, [editor, editable]);
+  const [report, setReport] = useState(null);
+  const update = useCallback(() => {
+    if (!editor || !editable) return;
+    try {
+      const result = preservingCaret(
+        editor,
+        () => withDirectEditing(editor, () => refreshCrossReferences(referencesPort(editor)))
+      );
+      setReport(result);
+    } catch (error) {
+      notify?.(
+        error instanceof Error ? error.message : "Could not update cross-references.",
+        "error"
+      );
+    }
+  }, [editor, editable, notify]);
+  const [passages, setPassages] = useState({});
+  const loadPassages = useCallback(
+    (id) => {
+      if (!references || passages[id]) return;
+      setPassages((p) => ({ ...p, [id]: "loading" }));
+      references.passages(id).then((list) => setPassages((p) => ({ ...p, [id]: list }))).catch(() => setPassages((p) => ({ ...p, [id]: [] })));
+    },
+    [references, passages]
+  );
+  useEffect(() => {
+    if (!viewer || !references) return;
+    const targetOf = (event) => {
+      const link = event.target?.closest?.(
+        'a.docx-hyperlink[data-docx-link-kind="external"]'
+      );
+      if (!link || !viewer.contains(link)) return null;
+      const mouse = event;
+      if (mouse.button !== 0 || mouse.ctrlKey || mouse.metaKey || mouse.shiftKey) return null;
+      return references.targetOf(link.getAttribute("href") ?? "");
+    };
+    const take = (event) => {
+      const target = targetOf(event);
+      if (!target) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.type === "click") references.open(target);
+    };
+    const types = ["pointerdown", "mousedown", "pointerup", "mouseup", "click"];
+    for (const type of types) window.addEventListener(type, take, true);
+    return () => {
+      for (const type of types) window.removeEventListener(type, take, true);
+    };
+  }, [viewer, references]);
+  const value = useMemo(
+    () => editable ? { openDialog, update, labels: l } : null,
+    [editable, openDialog, update, l]
+  );
+  const resolveInternal = (href) => {
+    if (!editor) return null;
+    const name = href.replace(/^#/, "");
+    try {
+      const port = referencesPort(editor);
+      const paragraphs = port.paragraphs();
+      const target = paragraphs.find((p) => p.bookmarks.includes(name));
+      if (!target) return { title: l.brokenCard, body: l.brokenCardBody };
+      const number = paragraphNumber(
+        paragraphs.map((p) => p.id),
+        port.listItems(),
+        port.levelOf,
+        target.id
+      );
+      return {
+        title: number ? l.clause(number) : l.heading,
+        body: passageExcerpt(target.text.replace(//g, ""))
+      };
+    } catch {
+      return null;
+    }
   };
-  const nav = useListKeyNav({
-    open: true,
-    items: shown,
-    onPick: apply,
-    onDismiss: close,
-    resetKey: query
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "native-docx-style-gallery", "data-testid": "docx-style-gallery", children: [
-    quick.length > 0 && /* @__PURE__ */ jsx("div", { className: "native-docx-style-quick", role: "group", "aria-label": "Quick styles", children: quick.map((option) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-pressed": value === option.styleId,
-        disabled: !isEnabled,
-        "data-style-id": option.styleId,
-        title: styleLabel(option.name),
-        onClick: () => apply(option),
-        children: /* @__PURE__ */ jsx("span", { style: previewStyle(option), children: styleLabel(option.name) })
-      },
-      option.styleId
-    )) }),
-    options.length > FILTER_FROM && /* @__PURE__ */ jsx(
-      "input",
+  return /* @__PURE__ */ jsxs(CrossReferencesContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx("span", { ref: marker, hidden: true }),
+    children,
+    /* @__PURE__ */ jsx(
+      LinkHoverCard,
       {
-        className: "native-docx-style-filter",
-        placeholder: "Find a style",
-        "aria-label": "Find a style",
-        value: query,
-        autoFocus: true,
-        onChange: (event) => setQuery(event.target.value),
-        onKeyDown: (event) => {
-          nav.handleKeyDown(event);
-        },
-        ...nav.comboboxProps
+        root: viewer,
+        matches: (href) => href.startsWith(`#${REF_BOOKMARK_PREFIX}`),
+        resolve: resolveInternal,
+        testId: "docx-cross-reference-card"
       }
     ),
-    /* @__PURE__ */ jsxs(
-      "ul",
+    references && /* @__PURE__ */ jsx(
+      LinkHoverCard,
       {
-        className: "native-docx-style-list",
-        role: "listbox",
-        id: nav.listboxId,
-        "aria-label": "Document styles",
-        children: [
-          shown.map((option, index) => /* @__PURE__ */ jsxs(
-            "li",
-            {
-              id: listOptionId(nav.listboxId, index),
-              role: "option",
-              "aria-selected": value === option.styleId,
-              "aria-disabled": !isEnabled,
-              "data-active": index === nav.selectedIndex || void 0,
-              "data-style-id": option.styleId,
-              onMouseEnter: () => nav.setSelectedIndex(index),
-              onClick: () => isEnabled && apply(option),
-              children: [
-                /* @__PURE__ */ jsx("span", { style: previewStyle(option), children: styleLabel(option.name) }),
-                changed.has(option.styleId) && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: "native-docx-style-diverged",
-                    title: "Defined differently from the house template",
-                    "aria-label": "Defined differently from the house template"
-                  }
-                )
-              ]
-            },
-            option.styleId
-          )),
-          shown.length === 0 && /* @__PURE__ */ jsx("li", { className: "native-docx-style-empty", children: "No matching style" })
-        ]
+        root: viewer,
+        matches: (href) => !!references.targetOf(href),
+        resolve: (href) => {
+          const target = references.targetOf(href);
+          if (!target) return null;
+          const list = passages[target.documentId];
+          if (!list) loadPassages(target.documentId);
+          const passage = Array.isArray(list) ? list.find((p) => p.chunkId === target.chunkId) : void 0;
+          return passage ? {
+            body: passageExcerpt(passage.text),
+            footer: passage.page ? `p. ${passage.page}` : void 0
+          } : null;
+        },
+        testId: "docx-cross-reference-card"
       }
-    )
-  ] });
-}
-function StyleGallery() {
-  const { value, options } = useParagraphStyle();
-  const current = options.find((o) => o.styleId === value);
-  const name = current ? styleLabel(current.name) : "Styles";
-  const house = useHouseTemplate();
-  const diverged = house?.basedOnTemplate ? divergenceSummary(house.divergence) : null;
-  return /* @__PURE__ */ jsx(
-    RibbonMenu,
-    {
-      label: "Styles",
-      title: diverged ? `Styles. ${diverged}` : void 0,
-      className: "native-docx-style-trigger",
-      testId: "docx-style-trigger",
-      icon: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: "native-docx-style-current", "data-testid": "docx-current-style", children: name }),
-        diverged && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "native-docx-style-diverged",
-            "data-testid": "docx-style-diverged",
-            "aria-label": diverged
-          }
-        ),
-        /* @__PURE__ */ jsx(ChevronDown, { size: 12, "aria-hidden": true })
-      ] }),
-      children: (close) => /* @__PURE__ */ jsx(Gallery, { close })
-    }
-  );
-}
-var W = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
-var DEFAULT_PARAGRAPH_FONT = {
-  id: "DefaultParagraphFont",
-  type: "character",
-  xml: '<w:style w:type="character" w:default="1" w:styleId="DefaultParagraphFont"><w:name w:val="Default Paragraph Font"/><w:uiPriority w:val="1"/><w:semiHidden/><w:unhideWhenUsed/></w:style>'
-};
-function stylesOf(kind) {
-  const Kind = kind === "footnote" ? "Footnote" : "Endnote";
-  const text = `${Kind}Text`;
-  return [
-    {
-      id: text,
-      type: "paragraph",
-      xml: `<w:style w:type="paragraph" w:styleId="${text}"><w:name w:val="${kind} text"/><w:basedOn w:val="Normal"/><w:link w:val="${text}Char"/><w:uiPriority w:val="99"/><w:semiHidden/><w:unhideWhenUsed/><w:pPr><w:spacing w:after="0" w:line="240" w:lineRule="auto"/></w:pPr><w:rPr><w:sz w:val="20"/><w:szCs w:val="20"/></w:rPr></w:style>`
-    },
-    {
-      id: `${text}Char`,
-      type: "character",
-      xml: `<w:style w:type="character" w:customStyle="1" w:styleId="${text}Char"><w:name w:val="${Kind} Text Char"/><w:basedOn w:val="DefaultParagraphFont"/><w:link w:val="${text}"/><w:uiPriority w:val="99"/><w:semiHidden/><w:rPr><w:sz w:val="20"/><w:szCs w:val="20"/></w:rPr></w:style>`
-    },
-    {
-      id: `${Kind}Reference`,
-      type: "character",
-      xml: `<w:style w:type="character" w:styleId="${Kind}Reference"><w:name w:val="${kind} reference"/><w:basedOn w:val="DefaultParagraphFont"/><w:uiPriority w:val="99"/><w:semiHidden/><w:unhideWhenUsed/><w:rPr><w:vertAlign w:val="superscript"/></w:rPr></w:style>`
-    }
-  ];
-}
-function noteTextStyle(styles, kind) {
-  const paragraph = styles.filter((style) => style.type === "paragraph");
-  const id = kind === "footnote" ? "FootnoteText" : "EndnoteText";
-  return paragraph.find((style) => style.name.toLowerCase() === `${kind} text`)?.styleId ?? paragraph.find((style) => style.styleId === id)?.styleId;
-}
-function missingNoteStyles(styles, kind) {
-  const has = (type, id) => styles.some((style) => style.type === type && style.styleId === id);
-  const text = noteTextStyle(styles, kind);
-  const missing = stylesOf(kind).filter(
-    (style) => style.type === "paragraph" ? !text : !has("character", style.id)
-  );
-  if (!missing.length) return [];
-  const base = has("character", DEFAULT_PARAGRAPH_FONT.id) ? [] : [DEFAULT_PARAGRAPH_FONT];
-  return [...base, ...missing].map((style) => style.xml);
-}
-var CONTENT_TYPES = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/><Override PartName="/word/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml"/></Types>';
-function stylesOnlyClipboardHtml(styles) {
-  const fragment = zipSync({
-    "[Content_Types].xml": strToU8(CONTENT_TYPES),
-    "_rels/.rels": strToU8(
-      '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>'
-    ),
-    "word/document.xml": strToU8(
-      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<w:document xmlns:w="${W}"><w:body><w:p/></w:body></w:document>`
     ),
-    "word/_rels/document.xml.rels": strToU8(
-      '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rIdStyles" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/></Relationships>'
-    ),
-    "word/styles.xml": strToU8(
-      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<w:styles xmlns:w="${W}">${styles.join("")}</w:styles>`
-    )
-  });
-  return fragmentClipboardHtml(fragment, false);
-}
-function ensureNoteStyles(editor, kind, direct = (fn) => fn()) {
-  if (!editor.can({ type: "insertNote", noteKind: kind }).ok) return void 0;
-  const missing = missingNoteStyles(editor.getDocumentStyles(), kind);
-  if (missing.length)
-    direct(() => editor.exec({ type: "paste", text: "", html: stylesOnlyClipboardHtml(missing) }));
-  return noteTextStyle(editor.getDocumentStyles(), kind);
-}
-function useInsertNote(kind) {
-  const command = useEditorCommand(kind === "footnote" ? "insert.footnote" : "insert.endnote");
-  const editor = useDocxEditor();
-  const insert = () => {
-    const text = editor && ensureNoteStyles(editor, kind, (fn) => withDirectEditing(editor, fn));
-    if (!command.execute()) return false;
-    if (editor) {
-      if (text)
-        withDirectEditing(editor, () => editor.exec({ type: "setParagraphStyle", styleId: text }));
-      editor.exec({ type: "insertText", text: " " });
-    }
-    return true;
-  };
-  return { insert, isEnabled: command.isEnabled, disabledReason: command.disabledReason };
-}
-function NoteAction({
-  kind,
-  label,
-  shortcut,
-  icon
-}) {
-  const note = useInsertNote(kind);
-  return /* @__PURE__ */ jsx(RibbonItem, { id: `references-${kind}`, label, children: /* @__PURE__ */ jsx(
-    DocxEditor.Toolbar.Action,
-    {
-      label: `${label} (${shortcut})`,
-      icon,
-      disabled: !note.isEnabled,
-      disabledReason: note.disabledReason ?? void 0,
-      onSelect: () => void note.insert(),
-      className: `native-docx-insert-${kind}`
-    }
-  ) });
-}
-function NoteButtons() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      NoteAction,
+    dialog && /* @__PURE__ */ jsx(
+      CrossReferenceDialog,
       {
-        kind: "footnote",
-        label: "Insert footnote",
-        shortcut: "Ctrl+Alt+F",
-        icon: /* @__PURE__ */ jsx(Superscript, { size: 16 })
+        targets: dialog.targets,
+        references,
+        documentId,
+        passages,
+        loadPassages,
+        labels: l,
+        onCancel: () => setDialog(null),
+        onClosed: () => editor?.surface?.focus(),
+        onInsertTarget: (target, mode) => run2(
+          `Inserted cross-reference: ${refResult(target, mode)}`,
+          () => markCrossReferenceTarget(referencesPort(editor), target, mode),
+          (marked, revision) => insertCrossReferenceField(referencesPort(editor, revision), marked, dialog.caret)
+        ),
+        onInsertPassage: (target, text) => run2(
+          `Inserted cross-reference: ${text}`,
+          () => void 0,
+          (_, revision) => insertDocumentReference(
+            referencesPort(editor, revision),
+            { text, url: references.linkFor(target), appName: references.appName },
+            dialog.caret
+          )
+        )
       }
     ),
-    /* @__PURE__ */ jsx(
-      NoteAction,
+    /* @__PURE__ */ jsx(Dialog, { open: !!report, onOpenChange: (open) => !open && setReport(null), children: /* @__PURE__ */ jsxs(
+      DialogContent,
       {
-        kind: "endnote",
-        label: "Insert endnote",
-        shortcut: "Ctrl+Alt+D",
-        icon: /* @__PURE__ */ jsx(NotebookText, { size: 16 })
+        className: "max-h-[85dvh] overflow-y-auto",
+        "data-testid": "docx-cross-references-report",
+        children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: l.updated }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: report && l.updateSummary(report.refreshed) })
+          ] }),
+          report && /* @__PURE__ */ jsxs("section", { className: "space-y-1 text-sm", children: [
+            /* @__PURE__ */ jsx("h3", { className: "font-medium", children: l.brokenTitle }),
+            report.broken.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: l.brokenHelp }),
+              /* @__PURE__ */ jsx("ul", { className: "space-y-1", "data-testid": "docx-cross-references-broken", children: report.broken.map((b) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: "flex items-center justify-between gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-red-text", children: b.text }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "sm",
+                        variant: "ghost",
+                        onClick: () => {
+                          const point = { paragraphId: b.paragraphId, offset: b.offset };
+                          editor?.surface?.setSelection({ anchor: point, head: point });
+                          editor?.surface?.revealParagraph(b.paragraphId);
+                          setReport(null);
+                        },
+                        children: l.show
+                      }
+                    )
+                  ]
+                },
+                `${b.paragraphId}:${b.offset}`
+              )) })
+            ] }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: l.brokenNone })
+          ] }),
+          /* @__PURE__ */ jsx(DialogFooter, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setReport(null), children: l.close }) })
+        ]
       }
-    )
+    ) })
   ] });
 }
-function WordShortcuts({ scope }) {
-  const footnote = useInsertNote("footnote");
-  const endnote = useInsertNote("endnote");
-  const styles = useParagraphStyle();
-  const editor = useDocxEditor();
-  const levels = useHouseTemplate()?.levels;
-  const latest = useRef({ footnote, endnote, styles, editor, levels });
-  latest.current = { footnote, endnote, styles, editor, levels };
+function CrossReferenceDialog({
+  targets,
+  references,
+  documentId,
+  passages,
+  loadPassages,
+  labels,
+  onCancel,
+  onInsertTarget,
+  onInsertPassage,
+  onClosed
+}) {
+  const l = { ...DEFAULT_CROSS_REFERENCES_LABELS, ...labels };
+  const [tab, setTab] = useState("this");
+  const [query, setQuery] = useState("");
+  const [chosen, setChosen] = useState(null);
+  const [mode, setMode] = useState("number");
+  const shown = useMemo(() => filterTargets(targets, query), [targets, query]);
+  const effectiveMode = chosen?.number ? mode : "text";
+  const [documents, setDocuments] = useState(null);
+  const [docId, setDocId] = useState(null);
+  const [passageQuery, setPassageQuery] = useState("");
+  const [passage, setPassage] = useState(null);
+  const [text, setText] = useState("");
   useEffect(() => {
-    const element = scope.current;
-    if (!element) return;
-    const onKeyDown = (event) => {
-      if (outlineTab(event)) {
+    if (tab !== "other" || !references || documents) return;
+    references.documents().then((list2) => setDocuments(list2.filter((d) => d.id !== documentId))).catch(() => setDocuments([]));
+  }, [tab, references, documents, documentId]);
+  const chooseDocument = (id) => {
+    setDocId(id);
+    setPassage(null);
+    setText("");
+    loadPassages(id);
+  };
+  const title = documents?.find((d) => d.id === docId)?.title ?? "";
+  const list = docId ? passages[docId] : void 0;
+  const shownPassages = Array.isArray(list) ? filterPassages(list, passageQuery) : [];
+  const canInsert = tab === "this" ? !!chosen : !!(docId && passage && text.trim());
+  const insert = () => {
+    if (tab === "this" && chosen) onInsertTarget(chosen, effectiveMode);
+    if (tab === "other" && docId && passage)
+      onInsertPassage(
+        { documentId: docId, chunkId: passage.chunkId, page: passage.page ?? null },
+        text
+      );
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (open) => !open && onCancel(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: "max-h-[85dvh] overflow-y-auto",
+      "data-testid": "docx-cross-reference-dialog",
+      onCloseAutoFocus: (event) => {
+        if (!onClosed) return;
         event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      const action = wordShortcut(event);
-      if (!action) return;
-      const { footnote: footnote2, endnote: endnote2, styles: styles2, editor: editor2 } = latest.current;
-      if (action === "footnote" || action === "endnote") {
-        if (!(action === "footnote" ? footnote2 : endnote2).insert()) return;
-      } else {
-        const style = findStyle(styles2.options, action);
-        if (!style) return;
-        styles2.setValue(style.styleId);
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      editor2?.surface?.focus();
-    };
-    const outlineTab = (event) => {
-      if (event.key !== "Tab" || event.ctrlKey || event.metaKey || event.altKey) return false;
-      const { editor: editor2, levels: levels2, styles: styles2 } = latest.current;
-      const current = editor2?.getSelectionFormatting()?.styleId;
-      const link = current ? levels2?.[current] : void 0;
-      const target = event.shiftKey ? link?.previous : link?.next;
-      if (!target || !editor2 || editorPort(editor2).caret()?.offset !== 0) return false;
-      styles2.setValue(target);
-      return true;
-    };
-    element.addEventListener("keydown", onKeyDown, true);
-    return () => element.removeEventListener("keydown", onKeyDown, true);
-  }, [scope]);
-  return null;
+        onClosed();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogHeader, { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: l.title }),
+          /* @__PURE__ */ jsx(DialogDescription, { children: l.description })
+        ] }),
+        /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), children: [
+          /* @__PURE__ */ jsxs(TabsList, { children: [
+            /* @__PURE__ */ jsx(TabsTrigger, { value: "this", "data-testid": "docx-cross-reference-this", children: l.thisDocument }),
+            references && /* @__PURE__ */ jsx(TabsTrigger, { value: "other", "data-testid": "docx-cross-reference-other", children: l.otherDocument })
+          ] }),
+          /* @__PURE__ */ jsxs(TabsContent, { value: "this", className: "space-y-3", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: query,
+                placeholder: l.filterTargets,
+                "aria-label": l.filterTargets,
+                onChange: (e) => setQuery(e.target.value),
+                "data-testid": "docx-cross-reference-filter"
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "listbox",
+                "aria-label": l.filterTargets,
+                className: "max-h-64 space-y-0.5 overflow-y-auto rounded-md border border-border p-1",
+                children: [
+                  shown.length === 0 && /* @__PURE__ */ jsx("p", { className: "p-2 text-sm text-muted-foreground", children: l.noTargets }),
+                  shown.map((t) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": chosen?.paragraphId === t.paragraphId,
+                      "data-testid": "docx-cross-reference-target",
+                      onClick: () => setChosen(t),
+                      onDoubleClick: () => onInsertTarget(t, t.number ? mode : "text"),
+                      className: cn(
+                        "flex w-full items-baseline gap-2 rounded px-2 py-1 text-left text-sm",
+                        chosen?.paragraphId === t.paragraphId ? "bg-accent" : "hover:bg-accent/50"
+                      ),
+                      style: { paddingLeft: 8 + t.level * 16 },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: t.marker || l.heading }),
+                        /* @__PURE__ */ jsx("span", { className: cn("truncate", t.heading && "font-medium"), children: t.text })
+                      ]
+                    },
+                    t.paragraphId
+                  ))
+                ]
+              }
+            ),
+            chosen && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: l.insertAs }),
+              chosen.number && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "cross-reference-mode",
+                    checked: effectiveMode === "number",
+                    onChange: () => setMode("number")
+                  }
+                ),
+                l.number
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "cross-reference-mode",
+                    checked: effectiveMode === "text",
+                    onChange: () => setMode("text")
+                  }
+                ),
+                l.text
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "ml-auto rounded bg-muted px-2 py-0.5",
+                  "data-testid": "docx-cross-reference-preview",
+                  children: refResult(chosen, effectiveMode)
+                }
+              )
+            ] })
+          ] }),
+          references && /* @__PURE__ */ jsxs(TabsContent, { value: "other", className: "space-y-3", children: [
+            references.renderDocumentPicker ? references.renderDocumentPicker(chooseDocument, docId) : /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: "h-9 w-full rounded-md border border-border bg-background px-2 text-sm",
+                "aria-label": l.chooseDocument,
+                value: docId ?? "",
+                onChange: (e) => e.target.value && chooseDocument(e.target.value),
+                "data-testid": "docx-cross-reference-document",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: l.chooseDocument }),
+                  (documents ?? []).map((d) => /* @__PURE__ */ jsx("option", { value: d.id, children: d.title }, d.id))
+                ]
+              }
+            ),
+            docId && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: passageQuery,
+                  placeholder: l.filterPassages,
+                  "aria-label": l.filterPassages,
+                  onChange: (e) => setPassageQuery(e.target.value),
+                  "data-testid": "docx-cross-reference-passage-filter"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "max-h-64 space-y-1 overflow-y-auto",
+                  "data-testid": "docx-cross-reference-passages",
+                  children: list === "loading" || list === void 0 ? /* @__PURE__ */ jsx("p", { className: "p-2 text-sm text-muted-foreground", children: l.loadingPassages }) : shownPassages.length === 0 ? /* @__PURE__ */ jsx("p", { className: "p-2 text-sm text-muted-foreground", children: l.noPassages }) : shownPassages.map((p, i) => /* @__PURE__ */ jsx(
+                    FactPassageItem,
+                    {
+                      index: i,
+                      page: p.page,
+                      excerpt: passageExcerpt(p.text, 200),
+                      isViewing: passage?.chunkId === p.chunkId,
+                      onSelect: () => {
+                        setPassage(p);
+                        setText(referenceText(title, p));
+                      },
+                      testId: "docx-cross-reference-passage"
+                    },
+                    p.chunkId
+                  ))
+                }
+              ),
+              passage && /* @__PURE__ */ jsxs("label", { className: "block space-y-1 text-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: l.referenceText }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    value: text,
+                    onChange: (e) => setText(e.target.value),
+                    "data-testid": "docx-cross-reference-text"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onCancel, children: l.cancel }),
+          /* @__PURE__ */ jsx(Button, { disabled: !canInsert, onClick: insert, "data-testid": "docx-cross-reference-insert", children: l.insertButton })
+        ] })
+      ]
+    }
+  ) });
 }
 function CrossReferenceButton() {
   const references = useCrossReferences();
@@ -4632,6 +4454,186 @@ function LayoutTabContent({ tab }) {
   if (tab === PICTURE_TAB) return /* @__PURE__ */ jsx(PictureButtons, {});
   return null;
 }
+var titleOf = (prompt) => {
+  const line = prompt.trim().split("\n")[0];
+  return line.length > 80 ? `${line.slice(0, 79)}\u2026` : line;
+};
+function rememberCaret(editor) {
+  const surface = editor.surface;
+  const head = surface?.state().selection?.head;
+  if (!surface || !head) return null;
+  return { paraId: surface.session.paraIdOf(head.paragraphId), ...head };
+}
+var mounted = [];
+var running = 0;
+var listeners = /* @__PURE__ */ new Set();
+var setRunning = (delta) => {
+  running += delta;
+  listeners.forEach((listener) => listener());
+};
+var subscribe = (listener) => {
+  listeners.add(listener);
+  return () => void listeners.delete(listener);
+};
+function insertionTarget(origin, caret, editors = mounted) {
+  if (editors.includes(origin) && origin.surface) return origin;
+  const paraId = caret?.paraId;
+  if (!paraId) return null;
+  for (let i = editors.length - 1; i >= 0; i--) {
+    const session = editors[i].surface?.session;
+    if (session?.nodeIdOf(paraId)) return editors[i];
+  }
+  return null;
+}
+function restoreCaret(editor, caret) {
+  const surface = editor.surface;
+  if (!surface || !caret) return;
+  const paragraphId = caret.paraId && surface.session.nodeIdOf(caret.paraId) || caret.paragraphId;
+  if (!surface.session.paragraphIds().includes(paragraphId)) return;
+  const point = { paragraphId, offset: caret.offset };
+  surface.setSelection({ anchor: point, head: point });
+}
+async function insertGeneratedImage(editor, bytes, prompt, caret) {
+  const image = normalizeImageBytes(bytes);
+  if (!image.ok) throw new Error("The generated image is not in a format Word can embed.");
+  let result;
+  for (let attempt = 0; attempt < 3 && !result?.ok; attempt++) {
+    editor.focus();
+    restoreCaret(editor, caret);
+    result = await executeImageCommand(editor, {
+      type: "insertImage",
+      data: image.bytes,
+      mime: image.mime,
+      widthPoints: image.widthPoints,
+      heightPoints: image.heightPoints,
+      description: prompt.trim(),
+      title: titleOf(prompt)
+    });
+    if (!result.ok && result.reason !== "stale drawing selection") break;
+  }
+  if (!result?.ok) throw new Error(result?.reason || "The picture could not be inserted here.");
+}
+var AUTO = "";
+function useGenerateImageTarget() {
+  const editor = useDocxEditor();
+  const loaded = useEditorState((snapshot) => !snapshot.isLoading);
+  useEffect(() => {
+    if (!editor || !loaded) return;
+    mounted.push(editor);
+    return () => void mounted.splice(mounted.indexOf(editor), 1);
+  }, [editor, loaded]);
+}
+function GenerateImageButton({ generation }) {
+  const editor = useDocxEditor();
+  const [prompt, setPrompt] = useState("");
+  const [aspectRatio, setAspectRatio] = useState(AUTO);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const abort = useRef(null);
+  const close = useRef(() => {
+  });
+  const editable = useEditorState((snapshot) => snapshot.editable);
+  const generating = useSyncExternalStore(subscribe, () => running > 0);
+  async function run2() {
+    if (!editor || !prompt.trim() || busy) return;
+    const caret = rememberCaret(editor);
+    const controller = new AbortController();
+    abort.current = controller;
+    setBusy(true);
+    setRunning(1);
+    setError("");
+    try {
+      const bytes = await generation.generate(prompt.trim(), {
+        aspectRatio: aspectRatio || void 0,
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
+      const target = insertionTarget(editor, caret);
+      if (!target) throw new Error("The document was closed before the generated image was ready.");
+      await insertGeneratedImage(target, bytes, prompt, caret);
+      setPrompt("");
+      close.current();
+      generation.notify?.("Generated image inserted", "success");
+    } catch (failure) {
+      if (controller.signal.aborted) return;
+      const message = failure instanceof Error ? failure.message : String(failure);
+      setError(message);
+      generation.notify?.(message, "error");
+    } finally {
+      abort.current = null;
+      setRunning(-1);
+      setBusy(false);
+    }
+  }
+  if (!editable && !generating) return null;
+  return /* @__PURE__ */ jsx(
+    RibbonMenu,
+    {
+      label: generating ? "Generating image\u2026" : "Generate image",
+      icon: generating ? /* @__PURE__ */ jsx(Loader2, { size: 16, className: "native-docx-spin" }) : /* @__PURE__ */ jsx(Sparkles, { size: 16 }),
+      testId: "docx-generate-image",
+      children: (dismiss) => {
+        close.current = dismiss;
+        return /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: "native-docx-form native-docx-generate-image",
+            onSubmit: (event) => {
+              event.preventDefault();
+              void run2();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("label", { children: [
+                "Describe the image",
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    autoFocus: true,
+                    rows: 3,
+                    value: prompt,
+                    disabled: busy,
+                    placeholder: "A watercolour of a lighthouse at dawn",
+                    "data-testid": "docx-generate-image-prompt",
+                    onChange: (event) => setPrompt(event.target.value),
+                    onKeyDown: (event) => {
+                      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) void run2();
+                    }
+                  }
+                )
+              ] }),
+              generation.aspectRatios && generation.aspectRatios.length > 0 && /* @__PURE__ */ jsxs("label", { children: [
+                "Aspect ratio",
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    value: aspectRatio,
+                    disabled: busy,
+                    onChange: (event) => setAspectRatio(event.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: AUTO, children: "Auto" }),
+                      generation.aspectRatios.map((ratio) => /* @__PURE__ */ jsx("option", { value: ratio.value, children: ratio.label }, ratio.value))
+                    ]
+                  }
+                )
+              ] }),
+              busy && /* @__PURE__ */ jsx("p", { role: "status", "data-testid": "docx-generate-image-status", children: "Generating\u2026 the picture is inserted where your cursor was. You can keep writing." }),
+              error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
+              /* @__PURE__ */ jsx("div", { className: "native-docx-form-actions", children: busy ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => abort.current?.abort(), children: "Cancel" }) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "submit",
+                  disabled: !prompt.trim(),
+                  "data-testid": "docx-generate-image-submit",
+                  children: "Generate"
+                }
+              ) })
+            ]
+          }
+        );
+      }
+    }
+  );
+}
 var contains = (node, id) => node.id === id || (node.children ?? []).some((child) => contains(child, id));
 function firstParagraph(node) {
   for (const child of node.children ?? []) {
@@ -4927,6 +4929,19 @@ function DocxRibbon({
     badge && /* @__PURE__ */ jsx("span", { className: "native-docx-ribbon-badge", "data-testid": "docx-ribbon-badge", children: badge })
   ] });
 }
+function CompactToolbar() {
+  const t = useChromeTranslate();
+  return /* @__PURE__ */ jsxs(DocxEditor.Toolbar, { t, preset: false, children: [
+    /* @__PURE__ */ jsx(DocxEditor.Toolbar.Undo, {}),
+    /* @__PURE__ */ jsx(DocxEditor.Toolbar.Redo, {}),
+    /* @__PURE__ */ jsx(DocxEditor.Toolbar.Bold, {}),
+    /* @__PURE__ */ jsx(DocxEditor.Toolbar.Italic, {}),
+    /* @__PURE__ */ jsx(DocxEditor.Toolbar.Underline, {}),
+    /* @__PURE__ */ jsx(DocxEditor.Toolbar.BulletList, {}),
+    /* @__PURE__ */ jsx(DocxEditor.Toolbar.NumberedList, {}),
+    /* @__PURE__ */ jsx(DocxEditor.Toolbar.Link, {})
+  ] });
+}
 var fixedZoomMode = { type: "fixed" };
 function NativeDocxEditor({
   documentId,
@@ -4936,7 +4951,9 @@ function NativeDocxEditor({
   snapshot = false,
   onSaved,
   stream,
-  adapter
+  adapter,
+  compact = false,
+  stateRef
 }) {
   const [ready, setReady] = useState(), [error, setError] = useState(""), [retry, setRetry] = useState(0);
   const [status, setStatus] = useState("Connecting\u2026"), [dirty, setDirty] = useState(false), [saving, setSaving] = useState(false), [offline, setOffline] = useState(false);
@@ -5107,6 +5124,14 @@ function NativeDocxEditor({
       room?.destroy();
     };
   }, [documentId, isDraft, snapshot, retry]);
+  useEffect(() => {
+    if (!stateRef) return;
+    const room = ready?.room;
+    stateRef.current = () => room ? encodeState(room) : void 0;
+    return () => {
+      stateRef.current = null;
+    };
+  }, [stateRef, ready?.room]);
   useEffect(() => {
     adapter.onDirtyChange?.(dirty);
     const beforeUnload = (e) => {
@@ -5190,7 +5215,7 @@ function NativeDocxEditor({
       if (!pageWidth) return;
       const style = getComputedStyle(viewport);
       const available = viewport.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
-      const zoom = Math.max(0.1, Math.min(2.5, available / pageWidth));
+      const zoom = Math.max(0.1, Math.min(compact ? 1 : 2.5, available / pageWidth));
       if (Math.abs(editor.getZoom() - zoom) > 1e-3) editor.setZoom(zoom);
     };
     const resize = new ResizeObserver(fit);
@@ -5226,7 +5251,7 @@ function NativeDocxEditor({
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: "native-docx-viewer",
+      className: compact ? "native-docx-viewer native-docx-compact" : "native-docx-viewer",
       "data-testid": "native-docx-editor",
       "aria-busy": !!stream?.busy,
       "data-generation-state": stream ? stream.busy ? "generating" : stream.error ? "stopped" : "generated" : "ready",
@@ -5255,7 +5280,7 @@ function NativeDocxEditor({
             document: ready.document,
             modules: ready.modules,
             fonts: ready.fonts,
-            mode: stream || isDraft && ready.canEdit && !snapshot ? "edit" : !ready.canEdit || snapshot ? "view" : "suggesting",
+            mode: stream || isDraft && ready.canEdit && !snapshot || compact && ready.canEdit ? "edit" : !ready.canEdit || snapshot ? "view" : "suggesting",
             reviewDisplayMode: "all-markup",
             zoomMode: fixedZoomMode,
             author: ready.author,
@@ -5296,7 +5321,8 @@ function NativeDocxEditor({
                               trackMoves: true
                             }
                           ),
-                          !stream && /* @__PURE__ */ jsx(
+                          compact && !stream && /* @__PURE__ */ jsx(CompactToolbar, {}),
+                          !compact && !stream && /* @__PURE__ */ jsx(
                             DocxRibbon,
                             {
                               onSave: () => void saveVersion(),
@@ -5335,13 +5361,13 @@ function NativeDocxEditor({
                                       children: /* @__PURE__ */ jsx(DocxEditorReview, { children: () => /* @__PURE__ */ jsx(DocxEditorReview.Card, { children: /* @__PURE__ */ jsx(DocxCommentActivity, {}) }) })
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(DocxEditor.HeaderFooterChrome, {}),
-                                  /* @__PURE__ */ jsx(DocxEditor.NotesChrome, {}),
+                                  !compact && /* @__PURE__ */ jsx(DocxEditor.HeaderFooterChrome, {}),
+                                  !compact && /* @__PURE__ */ jsx(DocxEditor.NotesChrome, {}),
                                   /* @__PURE__ */ jsx(DocxEditor.Equation, {}),
                                   /* @__PURE__ */ jsx(DocxEditor.HyperLink, {}),
                                   /* @__PURE__ */ jsx(DocxEditor.ContextMenu, { children: /* @__PURE__ */ jsx(DocxContextMenuExtras, {}) })
                                 ] }),
-                                /* @__PURE__ */ jsx(DocxEditor.PageNumber, {})
+                                !compact && /* @__PURE__ */ jsx(DocxEditor.PageNumber, {})
                               ]
                             }
                           )
@@ -5360,11 +5386,19 @@ function NativeDocxEditor({
             status
           ] }),
           /* @__PURE__ */ jsx(DocxParticipants, { session: ready?.room?.session }),
-          /* @__PURE__ */ jsxs("button", { onClick: () => void exportDocument(), disabled: !ready, "aria-label": "Download DOCX", children: [
-            /* @__PURE__ */ jsx(Download, { size: 14 }),
-            "DOCX"
-          ] }),
-          !snapshot && !stream && ready?.canEdit && /* @__PURE__ */ jsxs(
+          !compact && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => void exportDocument(),
+              disabled: !ready,
+              "aria-label": "Download DOCX",
+              children: [
+                /* @__PURE__ */ jsx(Download, { size: 14 }),
+                "DOCX"
+              ]
+            }
+          ),
+          !compact && !snapshot && !stream && ready?.canEdit && /* @__PURE__ */ jsxs(
             "button",
             {
               className: "native-docx-save",
@@ -5382,70 +5416,7 @@ function NativeDocxEditor({
     }
   );
 }
-var loaded = /* @__PURE__ */ new Map();
-function loadDocxFonts(baseUrl = "/native-docx/fonts") {
-  let promise = loaded.get(baseUrl);
-  if (!promise) {
-    promise = loadFonts(baseUrl).catch((error) => {
-      loaded.delete(baseUrl);
-      throw error;
-    });
-    loaded.set(baseUrl, promise);
-  }
-  return promise;
-}
-async function loadFonts(baseUrl) {
-  const families = ["Liberation Serif", "Liberation Sans", "Liberation Mono"];
-  const variants = [
-    { suffix: "Regular", weight: 400, style: "normal" },
-    { suffix: "Bold", weight: 700, style: "normal" },
-    { suffix: "Italic", weight: 400, style: "italic" },
-    { suffix: "BoldItalic", weight: 700, style: "italic" }
-  ];
-  const sources = await Promise.all(
-    families.flatMap(
-      (family) => variants.map(async (face) => {
-        const r = await fetch(
-          `${baseUrl.replace(/\/$/, "")}/${family.replace(" ", "")}-${face.suffix}.ttf`
-        );
-        if (!r.ok) throw new Error(`Could not load the document font ${family}.`);
-        const result = createFontSource(new Uint8Array(await r.arrayBuffer()), {
-          family,
-          weight: face.weight,
-          style: face.style
-        });
-        if ("failure" in result)
-          throw new Error(`Could not initialize the document font ${family}.`);
-        return result.source;
-      })
-    )
-  );
-  const aliases = {
-    "Times New Roman": "Liberation Serif",
-    Cambria: "Liberation Serif",
-    "DejaVu Serif": "Liberation Serif",
-    Calibri: "Liberation Sans",
-    Aptos: "Liberation Sans",
-    Arial: "Liberation Sans",
-    Helvetica: "Liberation Sans",
-    "Courier New": "Liberation Mono",
-    "DejaVu Sans Mono": "Liberation Mono"
-  };
-  return {
-    epoch: 1,
-    maxFontBytes: 12 * 1024 * 1024,
-    sources,
-    defaultFont: { family: "Liberation Serif", sizeHalfPoints: 22 },
-    supportedFamilies: [...families, ...Object.keys(aliases)],
-    substitutions: Object.entries(aliases).flatMap(
-      ([from, to]) => variants.map((face) => ({
-        from: { family: from, weight: face.weight, style: face.style },
-        to: { family: to, weight: face.weight, style: face.style }
-      }))
-    )
-  };
-}
 
-export { BUILTIN_TEMPLATE_NAME, CrossReferenceDialog, CrossReferencesProvider, DEFAULT_CROSS_REFERENCES_LABELS, DEFAULT_DEFINED_TERMS_LABELS, DEFINED_TERM_TRIGGER, DefinedTermsProvider, DocxAuthorContext, DocxCommentActivity, DocxEditorReview, DocxMentions, DocxParticipants, DocxRibbon, GenerateImageButton, HouseTemplateProvider, LinkHoverCard, NativeDocxEditor, builtinHouseTemplate, contentPath, editorPort, findDefinitionsSection, insertCrossReference, insertDefinedTerm, insertDocumentReference, listTargets, loadDocxFonts, normalizeDocxExport, paragraphNumber, referenceText, referencesPort, resolveHouseTemplate, reviewModule, shortTitle, structuralPort, templateFileName, trackedOrNoted, useCrossReferences, useDefinedTerms, useHouseTemplate, useReview, useReviewItem, useTrackedOrNoted, withDirectEditing };
-//# sourceMappingURL=chunk-W2RTZOK3.js.map
-//# sourceMappingURL=chunk-W2RTZOK3.js.map
+export { BUILTIN_TEMPLATE_NAME, CrossReferenceDialog, CrossReferencesProvider, DEFAULT_CROSS_REFERENCES_LABELS, DEFAULT_DEFINED_TERMS_LABELS, DEFINED_TERM_TRIGGER, DefinedTermsProvider, DocxAuthorContext, DocxCommentActivity, DocxEditorReview, DocxMentions, DocxParticipants, DocxRibbon, GenerateImageButton, HouseTemplateProvider, LinkHoverCard, NativeDocxEditor, builtinHouseTemplate, contentPath, editorPort, findDefinitionsSection, insertCrossReference, insertDefinedTerm, insertDocumentReference, listTargets, normalizeDocxExport, paragraphNumber, referenceText, referencesPort, resolveHouseTemplate, reviewModule, shortTitle, structuralPort, templateFileName, trackedOrNoted, useCrossReferences, useDefinedTerms, useHouseTemplate, useReview, useReviewItem, useTrackedOrNoted, withDirectEditing };
+//# sourceMappingURL=chunk-2SJTXYRM.js.map
+//# sourceMappingURL=chunk-2SJTXYRM.js.map