@arbidocs/blocks 0.4.99 → 0.4.101

package/dist/{chunk-44TPPPRJ.cjs → chunk-FAGQTB3D.cjs}

@@ -12,6 +12,7 @@ var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var template = require('@arbidocs/coedit/template');
+var editor = require('@docx-editor.dev/core/editor');
 var server = require('react-dom/server');
 var Y = require('yjs');
 var coedit = require('@arbidocs/coedit');
@@ -896,18 +897,18 @@ function ReviewCardSlot({ children }) {
 var DocxEditorReview = Object.assign(DocxEditorReviewRail, { Card: ReviewCardSlot });
 
 // src/docx/mentions.ts
-function mentionCandidates(mentions2) {
+function mentionCandidates(mentions) {
   return [
     { id: "arbi", label: "ARBI", kind: "assistant" },
-    ...mentions2.filter((person) => person.name.trim()).map((person) => ({
+    ...mentions.filter((person) => person.name.trim()).map((person) => ({
       id: person.id,
       label: person.name,
       kind: person.kind === "agent" ? "assistant" : "user"
     }))
   ];
 }
-function mentionedDocxRecipients(text, mentions2) {
-  return chunk7UTB4PHM_cjs.extractMentions(text, mentionCandidates(mentions2)).map((person) => person.id);
+function mentionedDocxRecipients(text, mentions) {
+  return chunk7UTB4PHM_cjs.extractMentions(text, mentionCandidates(mentions)).map((person) => person.id);
 }
 var ActivityContext = React3.createContext({});
 function DocxCommentActivity() {
@@ -983,7 +984,7 @@ function DocxCommentActivity() {
 }
 function DocxMentions({
   children,
-  mentions: mentions2 = [],
+  mentions = [],
   initialCommentId,
   requestAgent,
   getAgentStatus,
@@ -1042,7 +1043,7 @@ function DocxMentions({
   const [suggestions, setSuggestions] = React3.useState(null);
   const [selected, setSelected] = React3.useState(0);
   const candidates = chunk7UTB4PHM_cjs.filterMentionCandidates(
-    mentionCandidates(mentions2),
+    mentionCandidates(mentions),
     suggestions?.query || ""
   ).slice(0, 8);
   React3.useEffect(() => {
@@ -1063,7 +1064,7 @@ function DocxMentions({
         }));
     };
     const hasAgent = submission.recipientIds.some(
-      (id) => id === "arbi" || mentions2.some((person) => person.id === id && person.kind === "agent")
+      (id) => id === "arbi" || mentions.some((person) => person.id === id && person.kind === "agent")
     );
     if (hasAgent) update("delivering");
     void requestAgent({
@@ -1097,7 +1098,7 @@ function DocxMentions({
         "error"
       );
     });
-  }, [review.items, requestAgent, getAgentStatus, mentions2, notify]);
+  }, [review.items, requestAgent, getAgentStatus, mentions, notify]);
   const choose = (name) => {
     const field = input.current;
     if (!field || !suggestions) return;
@@ -1115,7 +1116,7 @@ function DocxMentions({
       '[data-testid="review-draft-input"], [data-testid="review-reply-input"]'
     );
     if (!field || field.readOnly || !requestAgent) return false;
-    const recipientIds = mentionedDocxRecipients(field.value, mentions2);
+    const recipientIds = mentionedDocxRecipients(field.value, mentions);
     if (!recipientIds.length) return false;
     pending.current = {
       ids: new Set(review.items.filter((i) => i.kind === "comment").map((i) => i.item.id)),
@@ -1162,7 +1163,7 @@ function DocxMentions({
           (entry) => entry.kind === "comment" && entry.parentId === commentId
         );
         const author = replies.at(-1)?.author || target.author;
-        const agent = mentions2.find((person) => person.kind === "agent" && person.name === author);
+        const agent = mentions.find((person) => person.kind === "agent" && person.name === author);
         if (agent || author === "ARBI" || author === "Assistant")
           prefixMention(
             field,
@@ -1240,7 +1241,7 @@ function DocxMentions({
                 onMouseDown: (event) => event.preventDefault(),
                 onClick: (event) => {
                   event.stopPropagation();
-                  if (!mentionedDocxRecipients(field.value, mentions2).includes("arbi"))
+                  if (!mentionedDocxRecipients(field.value, mentions).includes("arbi"))
                     prefixMention(field);
                   else field.focus();
                 },
@@ -1295,7 +1296,6 @@ function definitionTooltip(definition) {
   const line = `\u201C${definition.term}\u201D${definition.rest}`.replace(/\s+/g, " ").trim();
   return line.length > 255 ? `${line.slice(0, 254)}\u2026` : line;
 }
-var definitionParagraphText = (definition) => `\u201C${definition.term}\u201D${definition.rest}`;
 function definitionParagraphXml(definition, bookmark, id = 0) {
   return `<w:p><w:bookmarkStart w:id="${id}" w:name="${chunkAOFATOT3_cjs.esc(bookmark)}"/>${textRun("\u201C")}${textRun(
     definition.term,
@@ -1416,95 +1416,6 @@ function insertDefinedTerm(port, definition, options = {}) {
   port.setCaret({ paragraphId: caret.paragraphId, offset: caret.offset + definition.term.length });
   return { addedDefinition };
 }
-var escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-var mentions = (text, term) => new RegExp(`(^|[^\\p{L}\\p{N}])${escapeRegExp(term)}($|[^\\p{L}\\p{N}])`, "iu").test(text);
-function updateDefinitions(port, definitions) {
-  const result = {
-    added: [],
-    refreshed: [],
-    reordered: [],
-    unused: [],
-    unknown: []
-  };
-  let paragraphs = port.paragraphs();
-  const linked = new Set(
-    paragraphs.flatMap(
-      (p) => p.links.map((l) => l.anchor).filter((a) => a.startsWith(chunkAOFATOT3_cjs.DEFINITION_BOOKMARK_PREFIX))
-    )
-  );
-  const declared = /* @__PURE__ */ new Map();
-  for (const p of paragraphs)
-    for (const b of p.bookmarks)
-      if (b.startsWith(chunkAOFATOT3_cjs.DEFINITION_BOOKMARK_PREFIX) && !declared.has(b)) declared.set(b, p);
-  const factOf = (bookmark) => {
-    const id = chunkAOFATOT3_cjs.definitionIdOfBookmark(bookmark);
-    return id ? definitions.get(id) : void 0;
-  };
-  for (const bookmark of [...linked, ...declared.keys()])
-    if (!factOf(bookmark) && !result.unknown.includes(bookmark)) result.unknown.push(bookmark);
-  const section = findDefinitionsSection(paragraphs);
-  const rewrite = /* @__PURE__ */ new Map();
-  for (const [bookmark, paragraph] of declared) {
-    const fact = factOf(bookmark);
-    if (fact && paragraph.text !== definitionParagraphText(fact)) {
-      rewrite.set(paragraph.id, fact);
-      result.refreshed.push(fact.term);
-    }
-  }
-  if (section) {
-    let previous = null;
-    for (let i = section.start; i < section.end; i++) {
-      const p = paragraphs[i];
-      const term = termOf(p);
-      if (term === null) continue;
-      const bookmark = p.bookmarks.find((b) => b.startsWith(chunkAOFATOT3_cjs.DEFINITION_BOOKMARK_PREFIX));
-      const fact = bookmark ? factOf(bookmark) : void 0;
-      if (previous !== null && chunkAOFATOT3_cjs.compareTerms(term, previous) < 0 && fact) {
-        if (!rewrite.has(p.id)) result.reordered.push(fact.term);
-        rewrite.set(p.id, fact);
-        continue;
-      }
-      previous = term;
-    }
-  }
-  for (const id of [...rewrite.keys()].reverse()) {
-    const index = paragraphs.findIndex((p) => p.id === id);
-    const previous = paragraphs[index - 1];
-    const target = paragraphs[index];
-    if (!previous) continue;
-    port.deleteRange(
-      { paragraphId: previous.id, offset: previous.text.length },
-      { paragraphId: target.id, offset: target.text.length }
-    );
-    paragraphs = port.paragraphs();
-  }
-  const toAdd = [...rewrite.values()];
-  for (const bookmark of linked) {
-    const fact = factOf(bookmark);
-    if (fact && !declared.has(bookmark) && !toAdd.some((d) => d.id === fact.id)) {
-      toAdd.push(fact);
-      result.added.push(fact.term);
-    }
-  }
-  toAdd.sort((a, b) => chunkAOFATOT3_cjs.compareTerms(a.term, b.term));
-  for (const definition of toAdd) addDefinition(port, definition);
-  paragraphs = port.paragraphs();
-  const after = findDefinitionsSection(paragraphs);
-  if (after) {
-    const inSection = (i) => i >= after.title && i < after.end;
-    const outside = paragraphs.filter((_, i) => !inSection(i));
-    const linkedNow = new Set(outside.flatMap((p) => p.links.map((l) => l.anchor)));
-    const outsideText = outside.map((p) => p.text).join("\n");
-    for (let i = after.start; i < after.end; i++) {
-      const p = paragraphs[i];
-      const term = termOf(p);
-      if (term === null) continue;
-      const used = p.bookmarks.some((b) => linkedNow.has(b)) || mentions(outsideText, term);
-      if (!used) result.unused.push({ term, paragraphId: p.id });
-    }
-  }
-  return result;
-}
 function definitionOfAnchor(anchor, definitions) {
   const id = chunkAOFATOT3_cjs.definitionIdOfBookmark(anchor.replace(/^#/, ""));
   return id ? definitions.get(id) : void 0;
@@ -1712,7 +1623,6 @@ var MAX_GROUPS = 8;
 var STALE_AFTER_MS = 3e4;
 var DEFAULT_DEFINED_TERMS_LABELS = {
   insert: "Defined term",
-  update: "Update definitions",
   search: "Search defined terms",
   allAgreements: "All definitions",
   loading: "Loading definitions\u2026",
@@ -1720,18 +1630,7 @@ var DEFAULT_DEFINED_TERMS_LABELS = {
   noMatch: "No defined term matches.",
   hint: "Enter to insert \xB7 Esc to close",
   preferred: "Preferred",
-  alsoIn: (source) => `Also defined${source ? ` in ${source}` : ""}`,
-  updated: "Definitions updated",
-  updateSummary: (r) => [
-    r.added.length ? `${r.added.length} added` : "",
-    r.refreshed.length ? `${r.refreshed.length} reworded` : "",
-    r.reordered.length ? `${r.reordered.length} reordered` : ""
-  ].filter(Boolean).join(" \xB7 ") || "The Definitions section is up to date.",
-  unusedTitle: "Defined but never used",
-  unusedNone: "Every definition in the section is used.",
-  unknownTitle: "Links to definitions that no longer exist",
-  show: "Show",
-  close: "Close"
+  alsoIn: (source) => `Also defined${source ? ` in ${source}` : ""}`
 };
 var DefinedTermsContext = React3.createContext(null);
 var useDefinedTerms = () => React3.useContext(DefinedTermsContext);
@@ -1757,7 +1656,6 @@ function DefinedTermsProvider({
   const [labelId, setLabelId] = React3.useState(null);
   const [picker, setPicker] = React3.useState(null);
   const [selected, setSelected] = React3.useState(0);
-  const [report, setReport] = React3.useState(null);
   const marker = React3.useRef(null);
   const dismissedAt = React3.useRef(null);
   const refresh = React3.useCallback(
@@ -1916,31 +1814,9 @@ function DefinedTermsProvider({
     window.addEventListener("keydown", keys, true);
     return () => window.removeEventListener("keydown", keys, true);
   }, [picker, rows, selected, pick]);
-  const update = React3.useCallback(() => {
-    if (!editor || !editable) return;
-    void refresh(true).then((list) => {
-      const definitions = new Map(
-        list.flatMap((s) => {
-          const d = chunkAOFATOT3_cjs.toDefinition(s);
-          return d ? [[d.id, d]] : [];
-        })
-      );
-      const surface = editor.surface;
-      const before = surface?.state().selection?.head;
-      const paraId = before && surface?.session.paraIdOf(before.paragraphId);
-      const result = run(() => updateDefinitions(editorPort(editor), definitions));
-      const node = paraId && surface?.session.nodeIdOf(paraId);
-      if (result && before && node) {
-        const point = { paragraphId: node, offset: before.offset };
-        surface.setSelection({ anchor: point, head: point });
-        holdCaret(editor);
-      }
-      if (result) setReport(result);
-    });
-  }, [editor, editable, refresh, run]);
   const value = React3.useMemo(
-    () => load && editable ? { openPicker, update, labels: l } : null,
-    [load, editable, openPicker, update, l]
+    () => load && editable ? { openPicker, labels: l } : null,
+    [load, editable, openPicker, l]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(DefinedTermsContext.Provider, { value, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { ref: marker, hidden: true }),
@@ -1975,50 +1851,7 @@ function DefinedTermsProvider({
         }
       ),
       document.body
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open: !!report, onOpenChange: (open) => !open && setReport(null), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      ui.DialogContent,
-      {
-        className: "max-h-[85dvh] overflow-y-auto",
-        "data-testid": "docx-definitions-report",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogHeader, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { children: l.updated }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.DialogDescription, { children: report && l.updateSummary(report) })
-          ] }),
-          report && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 font-medium", children: l.unusedTitle }),
-              report.unused.length ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", "data-testid": "docx-definitions-unused", children: report.unused.map((u) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: u.term }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Button,
-                  {
-                    size: "sm",
-                    variant: "ghost",
-                    onClick: () => {
-                      const surface = editor?.surface;
-                      surface?.setSelection({
-                        anchor: { paragraphId: u.paragraphId, offset: 0 },
-                        head: { paragraphId: u.paragraphId, offset: 0 }
-                      });
-                      surface?.revealParagraph(u.paragraphId);
-                      setReport(null);
-                    },
-                    children: l.show
-                  }
-                )
-              ] }, u.paragraphId)) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: l.unusedNone })
-            ] }),
-            report.unknown.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 font-medium", children: l.unknownTitle }),
-              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "list-disc pl-5 text-muted-foreground", children: report.unknown.map((name) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: name }, name)) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.DialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "outline", onClick: () => setReport(null), children: l.close }) })
-        ]
-      }
-    ) })
+    )
   ] });
 }
 function DefinedTermMenu({
@@ -2355,6 +2188,241 @@ function HouseTemplateProvider({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(HouseTemplateContext.Provider, { value: enabled ? value : null, children });
 }
+function RibbonMenu({
+  label,
+  icon,
+  children,
+  className,
+  testId,
+  title
+}) {
+  const [open, setOpen] = React3.useState(false);
+  const element = React3.useRef(null);
+  React3.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__ */ jsxRuntime.jsxs("div", { className: "native-docx-ribbon-menu", ref: element, children: [
+    /* @__PURE__ */ jsxRuntime.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
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "native-docx-ribbon-popover",
+        role: "group",
+        "aria-label": label,
+        onMouseDown: (event) => {
+          if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement))
+            event.preventDefault();
+        },
+        children: typeof children === "function" ? children(() => setOpen(false)) : children
+      }
+    )
+  ] });
+}
+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$1, bytes, prompt, caret) {
+  const image = react.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$1.focus();
+    restoreCaret(editor$1, caret);
+    result = await editor.executeImageCommand(editor$1, {
+      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 = react.useDocxEditor();
+  const loaded2 = react.useEditorState((snapshot) => !snapshot.isLoading);
+  React3.useEffect(() => {
+    if (!editor || !loaded2) return;
+    mounted.push(editor);
+    return () => void mounted.splice(mounted.indexOf(editor), 1);
+  }, [editor, loaded2]);
+}
+function GenerateImageButton({ generation }) {
+  const editor = react.useDocxEditor();
+  const [prompt, setPrompt] = React3.useState("");
+  const [aspectRatio, setAspectRatio] = React3.useState(AUTO);
+  const [busy, setBusy] = React3.useState(false);
+  const [error, setError] = React3.useState("");
+  const abort = React3.useRef(null);
+  const close = React3.useRef(() => {
+  });
+  const editable = react.useEditorState((snapshot) => snapshot.editable);
+  const generating = React3.useSyncExternalStore(subscribe, () => running > 0);
+  async function run() {
+    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__ */ jsxRuntime.jsx(
+    RibbonMenu,
+    {
+      label: generating ? "Generating image\u2026" : "Generate image",
+      icon: generating ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "native-docx-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { size: 16 }),
+      testId: "docx-generate-image",
+      children: (dismiss) => {
+        close.current = dismiss;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "form",
+          {
+            className: "native-docx-form native-docx-generate-image",
+            onSubmit: (event) => {
+              event.preventDefault();
+              void run();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                "Describe the image",
+                /* @__PURE__ */ jsxRuntime.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 run();
+                    }
+                  }
+                )
+              ] }),
+              generation.aspectRatios && generation.aspectRatios.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                "Aspect ratio",
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "select",
+                  {
+                    value: aspectRatio,
+                    disabled: busy,
+                    onChange: (event) => setAspectRatio(event.target.value),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: AUTO, children: "Auto" }),
+                      generation.aspectRatios.map((ratio) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: ratio.value, children: ratio.label }, ratio.value))
+                    ]
+                  }
+                )
+              ] }),
+              busy && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { role: "alert", children: error }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-form-actions", children: busy ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => abort.current?.abort(), children: "Cancel" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "submit",
+                  disabled: !prompt.trim(),
+                  "data-testid": "docx-generate-image-submit",
+                  children: "Generate"
+                }
+              ) })
+            ]
+          }
+        );
+      }
+    }
+  );
+}
 function wordDraftHtml(markdown) {
   const template = document.createElement("template");
   template.innerHTML = server.renderToStaticMarkup(/* @__PURE__ */ jsxRuntime.jsx(ui.AiMarkdown, { children: markdown }));
@@ -2442,61 +2510,6 @@ var WordDraftStream = class {
     }
   }
 };
-function RibbonMenu({
-  label,
-  icon,
-  children,
-  className,
-  testId,
-  title
-}) {
-  const [open, setOpen] = React3.useState(false);
-  const element = React3.useRef(null);
-  React3.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__ */ jsxRuntime.jsxs("div", { className: "native-docx-ribbon-menu", ref: element, children: [
-    /* @__PURE__ */ jsxRuntime.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
-      }
-    ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "native-docx-ribbon-popover",
-        role: "group",
-        "aria-label": label,
-        onMouseDown: (event) => {
-          if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement))
-            event.preventDefault();
-        },
-        children: typeof children === "function" ? children(() => setOpen(false)) : children
-      }
-    )
-  ] });
-}
 
 // src/docx/wordStyles.ts
 var QUICK_STYLES = ["Normal", "Title", "heading 1", "heading 2", "heading 3"];
@@ -2786,6 +2799,679 @@ function WordShortcuts({ scope }) {
   }, [scope]);
   return null;
 }
+
+// src/docx/layout/presets.ts
+var TWIPS_PER_INCH = 1440;
+var MARGIN_PRESETS = [
+  { id: "normal", label: "Normal", top: 1440, right: 1440, bottom: 1440, left: 1440 },
+  { id: "narrow", label: "Narrow", top: 720, right: 720, bottom: 720, left: 720 },
+  { id: "moderate", label: "Moderate", top: 1440, right: 1080, bottom: 1440, left: 1080 },
+  { id: "wide", label: "Wide", top: 1440, right: 2880, bottom: 1440, left: 2880 }
+];
+var PAPER_SIZES = [
+  { id: "letter", label: "Letter", width: 12240, height: 15840 },
+  { id: "legal", label: "Legal", width: 12240, height: 20160 },
+  { id: "a4", label: "A4", width: 11906, height: 16838 },
+  { id: "a5", label: "A5", width: 8391, height: 11906 },
+  { id: "executive", label: "Executive", width: 10440, height: 15120 }
+];
+var TOLERANCE = 20;
+var near = (a, b) => Math.abs(a - b) <= TOLERANCE;
+function matchMargins(setup) {
+  if (!setup) return null;
+  const m = setup.marginsTwips;
+  return MARGIN_PRESETS.find(
+    (p) => near(p.top, m.top) && near(p.right, m.right) && near(p.bottom, m.bottom) && near(p.left, m.left)
+  )?.id ?? null;
+}
+function matchPaper(setup) {
+  if (!setup) return null;
+  const short = Math.min(setup.pageWidthTwips, setup.pageHeightTwips);
+  const long = Math.max(setup.pageWidthTwips, setup.pageHeightTwips);
+  return PAPER_SIZES.find((p) => near(p.width, short) && near(p.height, long))?.id ?? null;
+}
+function orientedSize(paper, orientation) {
+  return orientation === "landscape" ? { pageWidthTwips: paper.height, pageHeightTwips: paper.width } : { pageWidthTwips: paper.width, pageHeightTwips: paper.height };
+}
+function inches(twips) {
+  return `${Number((twips / TWIPS_PER_INCH).toFixed(2))}"`;
+}
+function paperDescription(paper) {
+  return `${inches(paper.width)} \xD7 ${inches(paper.height)}`;
+}
+var COLUMNS_UNSUPPORTED = "Text columns are not available in this editor yet. Documents that already use columns display and save them unchanged.";
+function RibbonGallery({
+  label,
+  choices,
+  current,
+  onPick,
+  close,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-gallery", role: "menu", "aria-label": label, "data-testid": testId, children: choices.map((choice) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "menuitemradio",
+      "aria-checked": current === choice.id,
+      disabled: choice.disabled,
+      title: choice.title,
+      "data-choice": choice.id,
+      onClick: () => {
+        onPick(choice.id);
+        close();
+      },
+      children: [
+        choice.icon,
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "native-docx-gallery-text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-gallery-label", children: choice.label }),
+          choice.detail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-gallery-detail", children: choice.detail })
+        ] })
+      ]
+    },
+    choice.id
+  )) });
+}
+var marginDetail = (p) => `Top ${inches(p.top)} \xB7 Bottom ${inches(p.bottom)} \xB7 Left ${inches(p.left)} \xB7 Right ${inches(p.right)}`;
+function Margins({ setup, apply, openDialog }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label: "Margins", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Scaling, { size: 16 }), testId: "docx-layout-margins", children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RibbonGallery,
+      {
+        label: "Margins",
+        current: matchMargins(setup),
+        close,
+        choices: MARGIN_PRESETS.map((p) => ({
+          id: p.id,
+          label: p.label,
+          detail: marginDetail(p)
+        })),
+        onPick: (id) => {
+          const p = MARGIN_PRESETS.find((m) => m.id === id);
+          apply({
+            marginTopTwips: p.top,
+            marginRightTwips: p.right,
+            marginBottomTwips: p.bottom,
+            marginLeftTwips: p.left,
+            scope: "section"
+          });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "native-docx-gallery-more",
+        onClick: () => {
+          close();
+          openDialog();
+        },
+        children: "Custom margins\u2026"
+      }
+    )
+  ] }) });
+}
+function Orientation({ setup, apply }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RibbonMenu,
+    {
+      label: "Orientation",
+      icon: setup?.orientation === "landscape" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RectangleHorizontal, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RectangleVertical, { size: 16 }),
+      testId: "docx-layout-orientation",
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
+        RibbonGallery,
+        {
+          label: "Orientation",
+          current: setup?.orientation,
+          close,
+          choices: [
+            { id: "portrait", label: "Portrait", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RectangleVertical, { size: 16 }) },
+            { id: "landscape", label: "Landscape", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RectangleHorizontal, { size: 16 }) }
+          ],
+          onPick: (id) => apply({ orientation: id, scope: "section" })
+        }
+      )
+    }
+  );
+}
+function Size({ setup, apply, openDialog }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label: "Size", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { size: 16 }), testId: "docx-layout-size", children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RibbonGallery,
+      {
+        label: "Size",
+        current: matchPaper(setup),
+        close,
+        choices: PAPER_SIZES.map((p) => ({
+          id: p.id,
+          label: p.label,
+          detail: paperDescription(p)
+        })),
+        onPick: (id) => apply({
+          ...orientedSize(
+            PAPER_SIZES.find((p) => p.id === id),
+            setup?.orientation
+          ),
+          scope: "section"
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "native-docx-gallery-more",
+        onClick: () => {
+          close();
+          openDialog();
+        },
+        children: "More paper sizes\u2026"
+      }
+    )
+  ] }) });
+}
+var COLUMN_BREAK = { type: "insertBreak", kind: "column" };
+function Breaks() {
+  const page = react.useEditorCommand("insert.pageBreak");
+  const nextPage = react.useEditorCommand("insert.sectionBreakNextPage");
+  const continuous = react.useEditorCommand("insert.sectionBreakContinuous");
+  const column = react.useEditorCommand(COLUMN_BREAK);
+  const rows = [
+    { id: "page", label: "Page", detail: "Start the next page here", command: page },
+    { id: "column", label: "Column", detail: "Start the next column here", command: column },
+    {
+      id: "nextPage",
+      label: "Next Page",
+      detail: "Section break: new section on the next page",
+      command: nextPage
+    },
+    {
+      id: "continuous",
+      label: "Continuous",
+      detail: "Section break: new section on the same page",
+      command: continuous
+    }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label: "Breaks", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SeparatorHorizontal, { size: 16 }), testId: "docx-layout-breaks", children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
+    RibbonGallery,
+    {
+      label: "Breaks",
+      close,
+      choices: rows.map((row) => ({
+        id: row.id,
+        label: row.label,
+        detail: row.detail,
+        disabled: !row.command.isEnabled,
+        title: row.command.disabledReason ?? void 0
+      })),
+      onPick: (id) => void rows.find((row) => row.id === id)?.command.execute()
+    }
+  ) });
+}
+function LayoutButtons() {
+  const { pageSetup, apply } = react.usePageSetup();
+  const [dialog, setDialog] = React3.useState(false);
+  const props = { setup: pageSetup, apply, openDialog: () => setDialog(true) };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Margins, { ...props }),
+    /* @__PURE__ */ jsxRuntime.jsx(Orientation, { ...props }),
+    /* @__PURE__ */ jsxRuntime.jsx(Size, { ...props }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.DocxEditor.Toolbar.Action,
+      {
+        label: "Columns",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns2, { size: 16 }),
+        disabled: true,
+        disabledReason: COLUMNS_UNSUPPORTED,
+        className: "native-docx-layout-columns"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Breaks, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.DocxEditor.Toolbar.Action,
+      {
+        label: "Page Setup\u2026",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { size: 16 }),
+        onSelect: () => setDialog(true),
+        className: "native-docx-layout-page-setup"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.PageSetupDialog, { open: dialog, onClose: () => setDialog(false) })
+  ] });
+}
+var ROW_ABOVE = { type: "insertRow", where: "above" };
+var ROW_BELOW = { type: "insertRow", where: "below" };
+var COLUMN_LEFT = { type: "insertColumn", where: "left" };
+var COLUMN_RIGHT = { type: "insertColumn", where: "right" };
+var MERGE = { type: "mergeCells" };
+var SPLIT = { type: "splitCell", rows: 1, cols: 2 };
+var HEADER_ROW = { type: "toggleHeaderRow" };
+var DELETE_ROW = { type: "deleteRow" };
+var DELETE_COLUMN = { type: "deleteColumn" };
+var DELETE_TABLE = { type: "deleteTable" };
+var ALIGN_TOP = { type: "setTableCellVerticalAlignment", alignment: "top" };
+var ALIGN_CENTER = { type: "setTableCellVerticalAlignment", alignment: "center" };
+var ALIGN_BOTTOM = { type: "setTableCellVerticalAlignment", alignment: "bottom" };
+function useRows(rows) {
+  return rows.map((row) => ({ ...row, state: react.useEditorCommand(row.command) }));
+}
+function CommandGallery({
+  label,
+  icon,
+  testId,
+  rows
+}) {
+  const bound = useRows(rows);
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label, icon, testId, children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
+    RibbonGallery,
+    {
+      label,
+      close,
+      choices: bound.map((row) => ({
+        id: row.id,
+        label: row.label,
+        icon: row.icon,
+        disabled: !row.state.isEnabled,
+        title: row.state.disabledReason ?? void 0
+      })),
+      onPick: (id) => void bound.find((row) => row.id === id)?.state.execute()
+    }
+  ) });
+}
+function CommandAction({
+  command,
+  label,
+  icon,
+  testId
+}) {
+  const state = react.useEditorCommand(command);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.DocxEditor.Toolbar.Action,
+    {
+      label,
+      icon,
+      active: state.isActive,
+      disabled: !state.isEnabled,
+      disabledReason: state.disabledReason ?? void 0,
+      onSelect: () => void state.execute(),
+      className: `native-docx-table-${testId}`
+    }
+  );
+}
+function TableButtons() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommandAction,
+      {
+        command: ROW_ABOVE,
+        label: "Insert row above",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BetweenHorizontalStart, { size: 16 }),
+        testId: "row-above"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommandAction,
+      {
+        command: ROW_BELOW,
+        label: "Insert row below",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BetweenHorizontalEnd, { size: 16 }),
+        testId: "row-below"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommandAction,
+      {
+        command: COLUMN_LEFT,
+        label: "Insert column left",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BetweenVerticalStart, { size: 16 }),
+        testId: "column-left"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommandAction,
+      {
+        command: COLUMN_RIGHT,
+        label: "Insert column right",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BetweenVerticalEnd, { size: 16 }),
+        testId: "column-right"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommandGallery,
+      {
+        label: "Delete",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 16 }),
+        testId: "docx-table-delete",
+        rows: [
+          { id: "row", label: "Delete row", command: DELETE_ROW },
+          { id: "column", label: "Delete column", command: DELETE_COLUMN },
+          { id: "table", label: "Delete table", command: DELETE_TABLE }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommandAction,
+      {
+        command: MERGE,
+        label: "Merge cells",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Merge, { size: 16 }),
+        testId: "merge"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(CommandAction, { command: SPLIT, label: "Split cell", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Split, { size: 16 }), testId: "split" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommandAction,
+      {
+        command: HEADER_ROW,
+        label: "Repeat header row",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading, { size: 16 }),
+        testId: "header-row"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CommandGallery,
+      {
+        label: "Cell alignment",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignVerticalJustifyCenter, { size: 16 }),
+        testId: "docx-table-align",
+        rows: [
+          {
+            id: "top",
+            label: "Top",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignVerticalJustifyStart, { size: 16 }),
+            command: ALIGN_TOP
+          },
+          {
+            id: "center",
+            label: "Center",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignVerticalJustifyCenter, { size: 16 }),
+            command: ALIGN_CENTER
+          },
+          {
+            id: "bottom",
+            label: "Bottom",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignVerticalJustifyEnd, { size: 16 }),
+            command: ALIGN_BOTTOM
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableBorderTarget, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableBorderStyle, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableBorderWidth, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableBorderColor, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableCellFill, {})
+  ] });
+}
+var CAPTION_LABELS = ["Figure", "Table", "Equation"];
+var CAPTION_STYLES = chunkAOFATOT3_cjs.stylesXml(
+  "",
+  '<w:style w:type="paragraph" w:default="1" w:styleId="Normal"><w:name w:val="Normal"/><w:qFormat/></w:style><w:style w:type="paragraph" w:styleId="Caption"><w:name w:val="caption"/><w:basedOn w:val="Normal"/><w:next w:val="Normal"/><w:uiPriority w:val="35"/><w:unhideWhenUsed/><w:qFormat/><w:pPr><w:spacing w:after="200" w:line="240" w:lineRule="auto"/></w:pPr><w:rPr><w:i/><w:iCs/><w:color w:val="44546A"/><w:sz w:val="18"/><w:szCs w:val="18"/></w:rPr></w:style>'
+);
+function seqIdentifier(instruction) {
+  const match = /^\s*SEQ\s+("[^"]+"|\S+)/i.exec(instruction);
+  return match ? match[1].replace(/"/g, "") : null;
+}
+function countSeqFields(root, label, throughId) {
+  let count = 0;
+  let done = false;
+  const target = label.toLowerCase();
+  const visit = (node) => {
+    if (done) return;
+    if (node.localName === "fldSimple") {
+      const instr = node.attributes?.find((a) => a.localName === "instr")?.value ?? "";
+      if (seqIdentifier(instr)?.toLowerCase() === target) count++;
+    } else if (node.localName === "instrText") {
+      const text = (node.children ?? []).map((c) => c.value ?? "").join("");
+      if (seqIdentifier(text)?.toLowerCase() === target) count++;
+    }
+    node.children?.forEach(visit);
+    if (throughId && node.id === throughId) done = true;
+  };
+  visit(root);
+  return count;
+}
+function captionParagraphXml(label, number, text) {
+  const run = (value) => `<w:r><w:t xml:space="preserve">${chunkAOFATOT3_cjs.esc(value)}</w:t></w:r>`;
+  const rest = text.trim() ? `: ${text.trim()}` : "";
+  return `<w:p><w:pPr><w:pStyle w:val="Caption"/></w:pPr>${run(`${label} `)}<w:fldSimple w:instr=" SEQ ${chunkAOFATOT3_cjs.esc(label)} \\* ARABIC "><w:r><w:t>${number}</w:t></w:r></w:fldSimple>${rest ? run(rest) : ""}</w:p>`;
+}
+function base642(bytes) {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 32768)
+    binary += String.fromCharCode(...bytes.subarray(i, i + 32768));
+  return btoa(binary);
+}
+function captionFragmentHtml(label, number, text, revision) {
+  const untracked = chunkAOFATOT3_cjs.docxPackage({
+    document: chunkAOFATOT3_cjs.documentXml(captionParagraphXml(label, number, text)),
+    styles: CAPTION_STYLES,
+    title: "Caption"
+  });
+  const bytes = revision ? template.trackInsertion(untracked, revision, true) : untracked;
+  return `<div data-docx-fragment="${base642(bytes)}" data-docx-fragment-end="covered"></div>`;
+}
+var TRANSFORMS = Object.fromEntries(
+  ["rotateCW", "rotateCCW", "flipH", "flipV"].map((action) => [
+    action,
+    { type: "transformImage", action }
+  ])
+);
+function TransformAction({
+  action,
+  label,
+  icon
+}) {
+  const state = react.useEditorCommand(TRANSFORMS[action]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.DocxEditor.Toolbar.Action,
+    {
+      label,
+      icon,
+      disabled: !state.isEnabled,
+      disabledReason: state.disabledReason ?? void 0,
+      onSelect: () => void state.execute(),
+      className: `native-docx-picture-${action}`
+    }
+  );
+}
+function insertCaption(editor, label, text, track) {
+  const surface = editor.surface;
+  const selection = surface?.state().selection;
+  if (!surface || !selection) return null;
+  const { paragraphId } = selection.head;
+  const number = countSeqFields(
+    surface.session.part().root,
+    label,
+    paragraphId
+  ) + 1;
+  const ids = surface.session.paragraphIds();
+  const next = ids[ids.indexOf(paragraphId) + 1];
+  const caption = `${label} ${number}${text.trim() ? `: ${text.trim()}` : ""}`;
+  const outcome = track({
+    label: `Inserted caption: ${caption}`,
+    inserted: (inserted) => inserted !== null,
+    insert: (revision) => {
+      if (next) {
+        surface.setSelection({
+          anchor: { paragraphId: next, offset: 0 },
+          head: { paragraphId: next, offset: 0 }
+        });
+      } else {
+        editor.exec({ type: "selectAll" });
+        const end = surface.state().selection?.head;
+        if (!end) return null;
+        surface.setSelection({ anchor: end, head: end });
+        surface.splitParagraph();
+      }
+      const ok2 = editor.exec({
+        type: "paste",
+        text: caption,
+        html: captionFragmentHtml(label, number, text, revision)
+      }).ok;
+      return ok2 ? number : null;
+    }
+  });
+  return outcome?.result ?? null;
+}
+function CaptionButton({ defaultLabel = "Figure" }) {
+  const editor = react.useDocxEditor();
+  const track = useTrackedOrNoted();
+  const [label, setLabel] = React3.useState(defaultLabel);
+  const [text, setText] = React3.useState("");
+  const [error, setError] = React3.useState("");
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label: "Insert caption", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Captions, { size: 16 }), testId: "docx-insert-caption", children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      className: "native-docx-form",
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (!editor) return;
+        try {
+          if (insertCaption(editor, label, text, track) === null)
+            return setError("The caption could not be inserted here.");
+          setText("");
+          setError("");
+          close();
+          editor.focus();
+        } catch (failure) {
+          setError(failure instanceof Error ? failure.message : String(failure));
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "Label",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              value: label,
+              onChange: (event) => setLabel(event.target.value),
+              children: CAPTION_LABELS.map((value) => /* @__PURE__ */ jsxRuntime.jsx("option", { children: value }, value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          "Caption",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              autoFocus: true,
+              value: text,
+              placeholder: "Optional text after the number",
+              "data-testid": "docx-caption-text",
+              onChange: (event) => setText(event.target.value)
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", children: error }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", "data-testid": "docx-caption-insert", children: "Insert" })
+      ]
+    }
+  ) });
+}
+function PictureButtons() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ImageWrap, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ImageProperties, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ImageAltText, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(TransformAction, { action: "rotateCW", label: "Rotate right 90\xB0", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCw, { size: 16 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TransformAction, { action: "rotateCCW", label: "Rotate left 90\xB0", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 16 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TransformAction,
+      {
+        action: "flipH",
+        label: "Flip horizontal",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FlipHorizontal2, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(TransformAction, { action: "flipV", label: "Flip vertical", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FlipVertical2, { size: 16 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(CaptionButton, {})
+  ] });
+}
+var LAYOUT_TAB = "Layout";
+var TABLE_TAB = "Table";
+var PICTURE_TAB = "Picture";
+function useContextualTabs(tab) {
+  const inTable = react.useEditorState((snapshot) => snapshot.table !== null);
+  const onPicture = react.useEditorState((snapshot) => snapshot.image !== null);
+  const tabs = [...inTable ? [TABLE_TAB] : [], ...onPicture ? [PICTURE_TAB] : []];
+  const contextual = tab === TABLE_TAB || tab === PICTURE_TAB;
+  return { tabs, shown: contextual && !tabs.includes(tab) ? "Home" : tab };
+}
+function LayoutTabContent({ tab }) {
+  if (tab === LAYOUT_TAB) return /* @__PURE__ */ jsxRuntime.jsx(LayoutButtons, {});
+  if (tab === TABLE_TAB) return /* @__PURE__ */ jsxRuntime.jsx(TableButtons, {});
+  if (tab === PICTURE_TAB) return /* @__PURE__ */ jsxRuntime.jsx(PictureButtons, {});
+  return null;
+}
+var contains = (node, id) => node.id === id || (node.children ?? []).some((child) => contains(child, id));
+function firstParagraph(node) {
+  for (const child of node.children ?? []) {
+    if (child.kind === "paragraph" && child.id) return child.id;
+    if (child.localName === "tbl") continue;
+    const nested = firstParagraph(child);
+    if (nested) return nested;
+  }
+  return null;
+}
+function tableCells(root, paragraphId) {
+  let table = null;
+  const find = (node) => {
+    if (node.localName === "tbl" && contains(node, paragraphId)) table = node;
+    for (const child of node.children ?? []) if (contains(child, paragraphId)) find(child);
+  };
+  find(root);
+  if (!table) return null;
+  const cells = [];
+  let index = -1;
+  const rows = (node) => (node.children ?? []).flatMap(
+    (child) => child.localName === "tr" ? [child] : child.localName === "tbl" ? [] : rows(child)
+  );
+  for (const row of rows(table))
+    for (const cell of (row.children ?? []).filter((child) => child.localName === "tc")) {
+      const first = firstParagraph(cell);
+      if (!first) continue;
+      if (contains(cell, paragraphId)) index = cells.length;
+      cells.push(first);
+    }
+  return index < 0 ? null : { cells, index };
+}
+function TableTabKeys({ scope }) {
+  const editor = react.useDocxEditor();
+  const latest = React3.useRef(editor);
+  latest.current = editor;
+  React3.useEffect(() => {
+    const element = scope.current;
+    if (!element) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Tab" || event.ctrlKey || event.metaKey || event.altKey) return;
+      const editor2 = latest.current;
+      const surface = editor2?.surface;
+      const head = surface?.state().selection?.head;
+      if (!editor2 || !surface || !head) return;
+      const root = () => surface.session.part().root;
+      const table = tableCells(root(), head.paragraphId);
+      if (!table) return;
+      event.preventDefault();
+      event.stopPropagation();
+      let target = table.cells[table.index + (event.shiftKey ? -1 : 1)];
+      if (!target && !event.shiftKey && editor2.exec({ type: "insertRow", where: "below" }).ok) {
+        const grown = tableCells(
+          root(),
+          surface.state().selection?.head.paragraphId ?? head.paragraphId
+        );
+        target = grown?.cells[table.cells.length] ?? "";
+      }
+      if (!target) return;
+      const point = { paragraphId: target, offset: 0 };
+      surface.setSelection({ anchor: point, head: point });
+    };
+    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;
@@ -2925,48 +3611,39 @@ function DocxParticipants({ session }) {
 function DefinedTermButtons() {
   const terms = useDefinedTerms();
   if (!terms) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "native-docx-ribbon-trigger",
-        "aria-label": terms.labels.insert,
-        title: `${terms.labels.insert} (type @@)`,
-        "data-testid": "docx-insert-defined-term",
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: (event) => terms.openPicker(event.currentTarget),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookA, { size: 16 })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "native-docx-ribbon-trigger",
-        "aria-label": terms.labels.update,
-        title: terms.labels.update,
-        "data-testid": "docx-update-definitions",
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => terms.update(),
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListRestart, { size: 16 })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: "native-docx-ribbon-trigger",
+      "aria-label": terms.labels.insert,
+      title: `${terms.labels.insert} (type @@)`,
+      "data-testid": "docx-insert-defined-term",
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: (event) => terms.openPicker(event.currentTarget),
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookA, { size: 16 })
+    }
+  );
 }
 function DocxRibbon({
   onSave,
-  badge
+  badge,
+  imageGeneration
 }) {
-  const [tab, setTab] = React3.useState("Home");
+  const [selected, setTab] = React3.useState("Home");
+  const contextual = useContextualTabs(selected);
+  useGenerateImageTarget();
+  const tab = contextual.shown;
   const t = react.useChromeTranslate();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-ribbon", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("select", { "aria-label": "Ribbon tab", value: tab, onChange: (event) => setTab(event.target.value), children: [
       /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Home" }),
       /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Insert" }),
       /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Design" }),
+      /* @__PURE__ */ jsxRuntime.jsx("option", { children: LAYOUT_TAB }),
       /* @__PURE__ */ jsxRuntime.jsx("option", { children: "References" }),
-      /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Review" })
+      /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Review" }),
+      contextual.tabs.map((name) => /* @__PURE__ */ jsxRuntime.jsx("option", { children: name }, name))
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.DocxEditor.Toolbar, { t, preset: false, onSave, children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Undo, {}),
@@ -2997,10 +3674,14 @@ function DocxRibbon({
       tab === "Insert" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableInsert, {}),
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ImageInsert, {}),
+        imageGeneration && /* @__PURE__ */ jsxRuntime.jsx(GenerateImageButton, { generation: imageGeneration }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Button, { slotId: "insert.pageBreak" }),
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Link, {}),
         /* @__PURE__ */ jsxRuntime.jsx(DefinedTermButtons, {}),
         /* @__PURE__ */ jsxRuntime.jsx(QuickParts, {})
       ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableCellFill, { hidden: true }),
+      /* @__PURE__ */ jsxRuntime.jsx(LayoutTabContent, { tab }),
       tab === "Design" && /* @__PURE__ */ jsxRuntime.jsx(HouseTemplatePanel, {}),
       tab === "References" && /* @__PURE__ */ jsxRuntime.jsx(NoteButtons, {}),
       tab === "Review" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -3376,6 +4057,10 @@ function NativeDocxEditor({
                         DocxRibbon,
                         {
                           onSave: () => void saveVersion(),
+                          imageGeneration: adapter.imageGeneration && {
+                            notify: adapter.notify,
+                            ...adapter.imageGeneration
+                          },
                           badge: (
                             // Says the document is shared live, in place of a title row above the ribbon.
                             ready.room && ready.canEdit && !snapshot ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: "Edits sync live with everyone who has this document open", children: "Co-edit mode" }) : void 0
@@ -3383,6 +4068,7 @@ function NativeDocxEditor({
                         }
                       ),
                       !stream && /* @__PURE__ */ jsxRuntime.jsx(WordShortcuts, { scope: stageRef }),
+                      !stream && /* @__PURE__ */ jsxRuntime.jsx(TableTabKeys, { scope: stageRef }),
                       /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
@@ -3525,6 +4211,7 @@ exports.DocxEditorReview = DocxEditorReview;
 exports.DocxMentions = DocxMentions;
 exports.DocxParticipants = DocxParticipants;
 exports.DocxRibbon = DocxRibbon;
+exports.GenerateImageButton = GenerateImageButton;
 exports.HouseTemplateProvider = HouseTemplateProvider;
 exports.NativeDocxEditor = NativeDocxEditor;
 exports.builtinHouseTemplate = builtinHouseTemplate;
@@ -3539,12 +4226,11 @@ exports.reviewModule = reviewModule;
 exports.structuralPort = structuralPort;
 exports.templateFileName = templateFileName;
 exports.trackedOrNoted = trackedOrNoted;
-exports.updateDefinitions = updateDefinitions;
 exports.useDefinedTerms = useDefinedTerms;
 exports.useHouseTemplate = useHouseTemplate;
 exports.useReview = useReview;
 exports.useReviewItem = useReviewItem;
 exports.useTrackedOrNoted = useTrackedOrNoted;
 exports.withDirectEditing = withDirectEditing;
-//# sourceMappingURL=chunk-44TPPPRJ.cjs.map
-//# sourceMappingURL=chunk-44TPPPRJ.cjs.map
+//# sourceMappingURL=chunk-FAGQTB3D.cjs.map
+//# sourceMappingURL=chunk-FAGQTB3D.cjs.map