@arbidocs/blocks 0.4.96 → 0.4.98

package/dist/{chunk-K27SDLLN.js → chunk-FIEAWH4K.js}

@@ -1,14 +1,15 @@
 "use client";
 import { stylesXml, definitionBookmark, DEFINITION_BOOKMARK_PREFIX, compareTerms, groupDefinitions, definitionLabels, filterTermGroups, toDefinition, definitionIdOfBookmark, esc, parseDefinition, docxPackage, documentXml } from './chunk-D3QPYKZG.js';
-import { filterMentionCandidates, MentionMenu, findMentionQuery, listOptionId, extractMentions } from './chunk-AA3PT6KR.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 React3, { createContext, useContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
-import { useDocxEditor, ReviewRailContext, useEditorSnapshot, useChromeTranslate, DocxEditor, createFontSource } from '@docx-editor.dev/react';
+import { useDocxEditor, ReviewRailContext, useEditorSnapshot, useChromeTranslate, DocxEditor, createFontSource, useParagraphStyle, useEditorCommand } from '@docx-editor.dev/react';
 import { AiMarkdown, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Button, DialogFooter, cn, splitMarkdownBlocks } from '@arbidocs/react/ui';
-import { MessageSquarePlus, MessageSquare, PencilLine, ChevronLeft, ChevronRight, X, ChevronUp, ChevronDown, CheckCheck, RotateCcw, CircleCheck, Trash2, Check, SendHorizontal, Type, Ellipsis, RefreshCw, WifiOff, Download, Save, BookA, ListRestart } from 'lucide-react';
+import { MessageSquarePlus, MessageSquare, PencilLine, ChevronLeft, ChevronRight, X, ChevronUp, ChevronDown, CheckCheck, RotateCcw, CircleCheck, Trash2, Check, SendHorizontal, Type, Ellipsis, RefreshCw, WifiOff, Download, Save, BookA, ListRestart, Blocks, Superscript, NotebookText } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
+import { defaultLegalTemplate, listBuildingBlocks, attachedTemplateOf, linkedLevelStyles, styleDivergence, buildingBlockFragment, fragmentClipboardHtml, newFromTemplate } from '@arbidocs/coedit/template';
 import { renderToStaticMarkup } from 'react-dom/server';
 import * as Y from 'yjs';
 import { DOCUMENT_COLLABORATION_VERSIONS, collaborationModule } from '@arbidocs/coedit';
@@ -2122,6 +2123,130 @@ function DefinedTermHover({
     document.body
   );
 }
+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
+}) {
+  const editor = useDocxEditor();
+  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 {
+      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));
+    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 result = withDirectEditing(
+          editor,
+          () => editor.exec({ type: "paste", text: "", html: fragmentClipboardHtml(fragment) })
+        );
+        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;
+      }
+    },
+    [editor, editable, template, notify, refresh]
+  );
+  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"
+        );
+      }
+    } : 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 });
+}
 function wordDraftHtml(markdown) {
   const template = document.createElement("template");
   template.innerHTML = renderToStaticMarkup(/* @__PURE__ */ jsx(AiMarkdown, { children: markdown }));
@@ -2209,57 +2334,13 @@ var WordDraftStream = class {
     }
   }
 };
-function contentPath(documentId) {
-  const match = /^(doc-[A-Za-z0-9]+)@v([1-9][0-9]*)$/.exec(documentId);
-  return match ? `/${encodeURIComponent(match[1])}/content?version=${match[2]}` : `/${encodeURIComponent(documentId)}/content`;
-}
-var drafts = /* @__PURE__ */ new Map();
-var stateBytes = (room) => Y.encodeStateAsUpdate(room.ydoc);
-var encodeState = (room) => {
-  let binary = "";
-  for (const byte of stateBytes(room)) binary += String.fromCharCode(byte);
-  return btoa(binary);
-};
-function covered(room, vector, receipt) {
-  const decode = (value) => Uint8Array.from(atob(value), (c) => c.charCodeAt(0));
-  const server = Y.decodeStateVector(decode(vector)), local = Y.decodeStateVector(Y.encodeStateVector(room.ydoc));
-  for (const [client, clock] of local) if ((server.get(client) || 0) < clock) return false;
-  const deleted = Y.decodeUpdate(stateBytes(room)).ds.clients;
-  const saved = Y.decodeUpdate(decode(receipt)).ds.clients;
-  for (const [client, ranges] of deleted)
-    for (const range of ranges) {
-      if (!(saved.get(client) || []).some(
-        (s) => s.clock <= range.clock && s.clock + s.len >= range.clock + range.len
-      ))
-        return false;
-    }
-  return true;
-}
-var EditorBoundary = class extends React3.Component {
-  state = {};
-  static getDerivedStateFromError(error) {
-    return { error };
-  }
-  render() {
-    return this.state.error ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "native-docx-error", children: [
-      "Could not render this Word document: ",
-      this.state.error.message
-    ] }) : this.props.children;
-  }
-};
-function DocxParticipants({ session }) {
-  const [people, setPeople] = useState([]);
-  useEffect(() => {
-    if (!session) return;
-    setPeople(session.participants());
-    return session.subscribeParticipants(setPeople);
-  }, [session]);
-  return /* @__PURE__ */ jsx("div", { className: "native-docx-presence", "aria-label": "People viewing this document", children: people.map((p) => /* @__PURE__ */ jsx("span", { className: "native-docx-avatar", title: p.name, children: p.name.split(" ").map((s) => s[0]).slice(0, 2).join("") }, p.actorId)) });
-}
 function RibbonMenu({
   label,
   icon,
-  children
+  children,
+  className,
+  testId,
+  title
 }) {
   const [open, setOpen] = useState(false);
   const element = useRef(null);
@@ -2283,10 +2364,11 @@ function RibbonMenu({
       "button",
       {
         type: "button",
-        className: "native-docx-ribbon-trigger",
+        className: ["native-docx-ribbon-trigger", className].filter(Boolean).join(" "),
         "aria-label": label,
-        title: label,
+        title: title ?? label,
         "aria-expanded": open,
+        "data-testid": testId,
         onMouseDown: (event) => event.preventDefault(),
         onClick: () => setOpen((value) => !value),
         children: icon
@@ -2302,11 +2384,436 @@ function RibbonMenu({
           if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement))
             event.preventDefault();
         },
-        children
+        children: typeof children === "function" ? children(() => setOpen(false)) : children
       }
     )
   ] });
 }
+
+// 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 styleLabel(name) {
+  return name === name.toLowerCase() ? name.replace(/(^|\s)(\w)/g, (m) => m.toUpperCase()) : name;
+}
+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;
+}
+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;
+}
+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
+  };
+}
+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
+    ),
+    [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",
+      {
+        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",
+      {
+        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__ */ jsxs(
+      "ul",
+      {
+        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" })
+        ]
+      }
+    )
+  ] });
+}
+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 })
+    }
+  );
+}
+function useInsertNote(kind) {
+  const command = useEditorCommand(kind === "footnote" ? "insert.footnote" : "insert.endnote");
+  const { options } = useParagraphStyle();
+  const editor = useDocxEditor();
+  const insert = () => {
+    if (!command.execute()) return false;
+    const text = findStyle(options, `${kind} text`);
+    if (text && editor)
+      withDirectEditing(
+        editor,
+        () => editor.exec({ type: "setParagraphStyle", styleId: text.styleId })
+      );
+    return true;
+  };
+  return { insert, isEnabled: command.isEnabled, disabledReason: command.disabledReason };
+}
+function NoteAction({
+  kind,
+  label,
+  shortcut,
+  icon
+}) {
+  const note = useInsertNote(kind);
+  return /* @__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,
+      {
+        kind: "footnote",
+        label: "Insert footnote",
+        shortcut: "Ctrl+Alt+F",
+        icon: /* @__PURE__ */ jsx(Superscript, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NoteAction,
+      {
+        kind: "endnote",
+        label: "Insert endnote",
+        shortcut: "Ctrl+Alt+D",
+        icon: /* @__PURE__ */ jsx(NotebookText, { size: 16 })
+      }
+    )
+  ] });
+}
+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 };
+  useEffect(() => {
+    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;
+}
+function QuickParts() {
+  const house = useHouseTemplate();
+  if (!house || house.blocks.length === 0) return null;
+  const categories = [...new Set(house.blocks.map((b) => b.category))];
+  return /* @__PURE__ */ jsx(RibbonMenu, { label: "Quick Parts", icon: /* @__PURE__ */ jsx(Blocks, { size: 16 }), testId: "docx-quick-parts", children: (close) => /* @__PURE__ */ jsxs("div", { className: "native-docx-quick-parts", "data-testid": "docx-quick-parts-panel", children: [
+    categories.map((category) => /* @__PURE__ */ jsxs("section", { "aria-label": category, children: [
+      /* @__PURE__ */ jsx("h3", { children: category }),
+      /* @__PURE__ */ jsx("ul", { children: house.blocks.filter((b) => b.category === category).map((block) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: !house.editable,
+          title: block.description || block.name,
+          onClick: () => {
+            close();
+            house.insertBlock(block.name);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "native-docx-quick-part-name", children: block.name }),
+            /* @__PURE__ */ jsx("span", { className: "native-docx-quick-part-preview", children: block.text })
+          ]
+        }
+      ) }, block.name)) })
+    ] }, category)),
+    /* @__PURE__ */ jsxs("p", { className: "native-docx-quick-parts-source", children: [
+      "From ",
+      house.template.name
+    ] })
+  ] }) });
+}
+var SOURCE = {
+  workspace: "This workspace's house template",
+  deployment: "The house template for all workspaces",
+  builtin: "ARBI\u2019s built-in template (no house template has been set)"
+};
+function download(bytes, name) {
+  const isTemplate = !/\.docx$/i.test(name);
+  const url = URL.createObjectURL(
+    new Blob([bytes], {
+      type: isTemplate ? "application/vnd.openxmlformats-officedocument.wordprocessingml.template" : "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+    })
+  );
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = /\.(dotx|docx)$/i.test(name) ? name : `${name}.dotx`;
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 5e3);
+}
+function HouseTemplatePanel() {
+  const house = useHouseTemplate();
+  if (!house) return null;
+  const summary = divergenceSummary(house.divergence);
+  return /* @__PURE__ */ jsx(
+    RibbonMenu,
+    {
+      label: "House template",
+      className: "native-docx-style-trigger",
+      testId: "docx-house-template",
+      icon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "native-docx-style-current", children: "House template" }),
+        /* @__PURE__ */ jsx(ChevronDown, { size: 12, "aria-hidden": true })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { className: "native-docx-house-template", "data-testid": "docx-house-template-panel", children: [
+        /* @__PURE__ */ jsxs("p", { children: [
+          /* @__PURE__ */ jsx("strong", { children: house.template.name }),
+          /* @__PURE__ */ jsx("br", {}),
+          SOURCE[house.template.source],
+          ". New documents start from it."
+        ] }),
+        /* @__PURE__ */ jsx("p", { "data-testid": "docx-house-template-status", children: house.divergence === null ? "Comparing this document\u2019s styles\u2026" : !house.basedOnTemplate ? "This document was not started from the house template." : summary ?? "This document\u2019s styles match the house template." }),
+        /* @__PURE__ */ jsxs("div", { className: "native-docx-house-template-actions", children: [
+          /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => download(house.template.bytes, house.template.name), children: [
+            /* @__PURE__ */ jsx(Download, { size: 14 }),
+            " Download template"
+          ] }),
+          house.setAsHouseTemplate && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-testid": "docx-set-house-template",
+              onClick: () => void house.setAsHouseTemplate(),
+              children: "Use this document as the house template"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function contentPath(documentId) {
+  const match = /^(doc-[A-Za-z0-9]+)@v([1-9][0-9]*)$/.exec(documentId);
+  return match ? `/${encodeURIComponent(match[1])}/content?version=${match[2]}` : `/${encodeURIComponent(documentId)}/content`;
+}
+var drafts = /* @__PURE__ */ new Map();
+var stateBytes = (room) => Y.encodeStateAsUpdate(room.ydoc);
+var encodeState = (room) => {
+  let binary = "";
+  for (const byte of stateBytes(room)) binary += String.fromCharCode(byte);
+  return btoa(binary);
+};
+function covered(room, vector, receipt) {
+  const decode = (value) => Uint8Array.from(atob(value), (c) => c.charCodeAt(0));
+  const server = Y.decodeStateVector(decode(vector)), local = Y.decodeStateVector(Y.encodeStateVector(room.ydoc));
+  for (const [client, clock] of local) if ((server.get(client) || 0) < clock) return false;
+  const deleted = Y.decodeUpdate(stateBytes(room)).ds.clients;
+  const saved = Y.decodeUpdate(decode(receipt)).ds.clients;
+  for (const [client, ranges] of deleted)
+    for (const range of ranges) {
+      if (!(saved.get(client) || []).some(
+        (s) => s.clock <= range.clock && s.clock + s.len >= range.clock + range.len
+      ))
+        return false;
+    }
+  return true;
+}
+var EditorBoundary = class extends React3.Component {
+  state = {};
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    return this.state.error ? /* @__PURE__ */ jsxs("div", { role: "alert", className: "native-docx-error", children: [
+      "Could not render this Word document: ",
+      this.state.error.message
+    ] }) : this.props.children;
+  }
+};
+function DocxParticipants({ session }) {
+  const [people, setPeople] = useState([]);
+  useEffect(() => {
+    if (!session) return;
+    setPeople(session.participants());
+    return session.subscribeParticipants(setPeople);
+  }, [session]);
+  return /* @__PURE__ */ jsx("div", { className: "native-docx-presence", "aria-label": "People viewing this document", children: people.map((p) => /* @__PURE__ */ jsx("span", { className: "native-docx-avatar", title: p.name, children: p.name.split(" ").map((s) => s[0]).slice(0, 2).join("") }, p.actorId)) });
+}
 function DefinedTermButtons() {
   const terms = useDefinedTerms();
   if (!terms) return null;
@@ -2349,6 +2856,8 @@ function DocxRibbon({
     /* @__PURE__ */ jsxs("select", { "aria-label": "Ribbon tab", value: tab, onChange: (event) => setTab(event.target.value), children: [
       /* @__PURE__ */ jsx("option", { children: "Home" }),
       /* @__PURE__ */ jsx("option", { children: "Insert" }),
+      /* @__PURE__ */ jsx("option", { children: "Design" }),
+      /* @__PURE__ */ jsx("option", { children: "References" }),
       /* @__PURE__ */ jsx("option", { children: "Review" })
     ] }),
     /* @__PURE__ */ jsxs(DocxEditor.Toolbar, { t, preset: false, onSave, children: [
@@ -2356,6 +2865,7 @@ function DocxRibbon({
       /* @__PURE__ */ jsx(DocxEditor.Toolbar.Redo, {}),
       /* @__PURE__ */ jsx(DocxEditor.Toolbar.Save, {}),
       tab === "Home" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(StyleGallery, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Bold, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Italic, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Underline, {}),
@@ -2366,7 +2876,6 @@ function DocxRibbon({
           /* @__PURE__ */ jsx(DocxEditor.Toolbar.Highlight, {})
         ] }),
         /* @__PURE__ */ jsxs(RibbonMenu, { label: "More formatting", icon: /* @__PURE__ */ jsx(Ellipsis, { size: 16 }), children: [
-          /* @__PURE__ */ jsx(DocxEditor.Toolbar.StylePicker, {}),
           /* @__PURE__ */ jsx(DocxEditor.Toolbar.Alignment, {}),
           /* @__PURE__ */ jsx(DocxEditor.Toolbar.BulletList, {}),
           /* @__PURE__ */ jsx(DocxEditor.Toolbar.NumberedList, {}),
@@ -2381,8 +2890,11 @@ function DocxRibbon({
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.TableInsert, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.ImageInsert, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Link, {}),
-        /* @__PURE__ */ jsx(DefinedTermButtons, {})
+        /* @__PURE__ */ jsx(DefinedTermButtons, {}),
+        /* @__PURE__ */ jsx(QuickParts, {})
       ] }),
+      tab === "Design" && /* @__PURE__ */ jsx(HouseTemplatePanel, {}),
+      tab === "References" && /* @__PURE__ */ jsx(NoteButtons, {}),
       tab === "Review" && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.EditingMode, {}),
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Comments, {}),
@@ -2456,11 +2968,16 @@ function NativeDocxEditor({
     async function start() {
       const fonts = await adapter.loadFonts();
       if (isDraft || snapshot) {
-        const data = isDraft ? !streamRef.current && drafts.get(documentId) || await (await adapter.request("/prepare", {
+        const data = isDraft ? !streamRef.current && drafts.get(documentId) || (draftContent === "" && adapter.houseTemplate ? await (async () => {
+          const template = await resolveHouseTemplate(adapter.houseTemplate);
+          return newFromTemplate(template.bytes, {
+            attachedTemplate: templateFileName(template)
+          });
+        })() : await (await adapter.request("/prepare", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ content: draftContent })
-        })).arrayBuffer() : await (await adapter.request(contentPath(documentId))).arrayBuffer();
+        })).arrayBuffer()) : await (await adapter.request(contentPath(documentId))).arrayBuffer();
         if (!cancelled) {
           setReady({
             document: new Uint8Array(data),
@@ -2722,67 +3239,78 @@ function NativeDocxEditor({
               if (change.source !== "load") changed();
             },
             onFontError: (e) => setError(e.message),
-            children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx(
               DefinedTermsProvider,
               {
                 load: adapter.definitions,
                 editable: !stream && !snapshot && ready.canEdit,
                 notify: adapter.notify,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    DocxEditor.RevisionMarkup,
-                    {
-                      insertions: { mark: "underline", color: "blue" },
-                      deletions: { mark: "strikethrough", color: "red" },
-                      movedFrom: { mark: "doubleStrikethrough", color: "green" },
-                      movedTo: { mark: "doubleUnderline", color: "green" },
-                      trackMoves: true
-                    }
-                  ),
-                  !stream && /* @__PURE__ */ jsx(
-                    DocxRibbon,
-                    {
-                      onSave: () => void saveVersion(),
-                      badge: (
-                        // Says the document is shared live, in place of a title row above the ribbon.
-                        ready.room && ready.canEdit && !snapshot ? /* @__PURE__ */ jsx("span", { title: "Edits sync live with everyone who has this document open", children: "Co-edit mode" }) : void 0
+                children: /* @__PURE__ */ jsxs(
+                  HouseTemplateProvider,
+                  {
+                    enabled: !stream,
+                    host: adapter.houseTemplate,
+                    documentId: isDraft || snapshot ? void 0 : documentId,
+                    editable: !stream && !snapshot && ready.canEdit,
+                    notify: adapter.notify,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        DocxEditor.RevisionMarkup,
+                        {
+                          insertions: { mark: "underline", color: "blue" },
+                          deletions: { mark: "strikethrough", color: "red" },
+                          movedFrom: { mark: "doubleStrikethrough", color: "green" },
+                          movedTo: { mark: "doubleUnderline", color: "green" },
+                          trackMoves: true
+                        }
+                      ),
+                      !stream && /* @__PURE__ */ jsx(
+                        DocxRibbon,
+                        {
+                          onSave: () => void saveVersion(),
+                          badge: (
+                            // Says the document is shared live, in place of a title row above the ribbon.
+                            ready.room && ready.canEdit && !snapshot ? /* @__PURE__ */ jsx("span", { title: "Edits sync live with everyone who has this document open", children: "Co-edit mode" }) : void 0
+                          )
+                        }
+                      ),
+                      !stream && /* @__PURE__ */ jsx(WordShortcuts, { scope: stageRef }),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "native-docx-stage",
+                          ref: stageRef,
+                          onMouseDownCapture: (event) => {
+                            if (event.button === 2 && ref.current?.getSelectionPlacement())
+                              event.preventDefault();
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(DocxEditor.Viewport, { className: "native-docx-viewport", children: [
+                              /* @__PURE__ */ jsx(DocxEditor.Content, {}),
+                              /* @__PURE__ */ jsx(
+                                DocxMentions,
+                                {
+                                  initialCommentId,
+                                  mentions: adapter.mentions,
+                                  notify: adapter.notify,
+                                  getAgentStatus: adapter.getAgentStatus,
+                                  requestAgent: adapter.requestAgent ? (request) => adapter.requestAgent(documentId, request) : void 0,
+                                  children: /* @__PURE__ */ jsx(DocxEditorReview, { children: () => /* @__PURE__ */ jsx(DocxEditorReview.Card, { children: /* @__PURE__ */ jsx(DocxCommentActivity, {}) }) })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(DocxEditor.HeaderFooterChrome, {}),
+                              /* @__PURE__ */ jsx(DocxEditor.NotesChrome, {}),
+                              /* @__PURE__ */ jsx(DocxEditor.Equation, {}),
+                              /* @__PURE__ */ jsx(DocxEditor.HyperLink, {}),
+                              /* @__PURE__ */ jsx(DocxEditor.ContextMenu, {})
+                            ] }),
+                            /* @__PURE__ */ jsx(DocxEditor.PageNumber, {})
+                          ]
+                        }
                       )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: "native-docx-stage",
-                      ref: stageRef,
-                      onMouseDownCapture: (event) => {
-                        if (event.button === 2 && ref.current?.getSelectionPlacement())
-                          event.preventDefault();
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxs(DocxEditor.Viewport, { className: "native-docx-viewport", children: [
-                          /* @__PURE__ */ jsx(DocxEditor.Content, {}),
-                          /* @__PURE__ */ jsx(
-                            DocxMentions,
-                            {
-                              initialCommentId,
-                              mentions: adapter.mentions,
-                              notify: adapter.notify,
-                              getAgentStatus: adapter.getAgentStatus,
-                              requestAgent: adapter.requestAgent ? (request) => adapter.requestAgent(documentId, request) : void 0,
-                              children: /* @__PURE__ */ jsx(DocxEditorReview, { children: () => /* @__PURE__ */ jsx(DocxEditorReview.Card, { children: /* @__PURE__ */ jsx(DocxCommentActivity, {}) }) })
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(DocxEditor.HeaderFooterChrome, {}),
-                          /* @__PURE__ */ jsx(DocxEditor.NotesChrome, {}),
-                          /* @__PURE__ */ jsx(DocxEditor.Equation, {}),
-                          /* @__PURE__ */ jsx(DocxEditor.HyperLink, {}),
-                          /* @__PURE__ */ jsx(DocxEditor.ContextMenu, {})
-                        ] }),
-                        /* @__PURE__ */ jsx(DocxEditor.PageNumber, {})
-                      ]
-                    }
-                  )
-                ]
+                    ]
+                  }
+                )
               }
             )
           }
@@ -2879,6 +3407,6 @@ async function loadFonts(baseUrl) {
   };
 }
 
-export { DEFAULT_DEFINED_TERMS_LABELS, DEFINED_TERM_TRIGGER, DefinedTermsProvider, DocxCommentActivity, DocxEditorReview, DocxMentions, DocxParticipants, DocxRibbon, NativeDocxEditor, editorPort, findDefinitionsSection, insertDefinedTerm, loadDocxFonts, normalizeDocxExport, reviewModule, updateDefinitions, useDefinedTerms, useReview, useReviewItem, withDirectEditing };
-//# sourceMappingURL=chunk-K27SDLLN.js.map
-//# sourceMappingURL=chunk-K27SDLLN.js.map
+export { BUILTIN_TEMPLATE_NAME, DEFAULT_DEFINED_TERMS_LABELS, DEFINED_TERM_TRIGGER, DefinedTermsProvider, DocxCommentActivity, DocxEditorReview, DocxMentions, DocxParticipants, DocxRibbon, HouseTemplateProvider, NativeDocxEditor, builtinHouseTemplate, contentPath, editorPort, findDefinitionsSection, insertDefinedTerm, loadDocxFonts, normalizeDocxExport, resolveHouseTemplate, reviewModule, templateFileName, updateDefinitions, useDefinedTerms, useHouseTemplate, useReview, useReviewItem, withDirectEditing };
+//# sourceMappingURL=chunk-FIEAWH4K.js.map
+//# sourceMappingURL=chunk-FIEAWH4K.js.map