@arbidocs/blocks 0.4.99 → 0.4.100

package/dist/{chunk-44TPPPRJ.cjs → chunk-B7P73VHX.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');
@@ -2355,6 +2356,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 +2678,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 +2967,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;
@@ -2956,17 +3810,23 @@ function DefinedTermButtons() {
 }
 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 +3857,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 +4240,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 +4251,7 @@ function NativeDocxEditor({
                         }
                       ),
                       !stream && /* @__PURE__ */ jsxRuntime.jsx(WordShortcuts, { scope: stageRef }),
+                      !stream && /* @__PURE__ */ jsxRuntime.jsx(TableTabKeys, { scope: stageRef }),
                       /* @__PURE__ */ jsxRuntime.jsxs(
                         "div",
                         {
@@ -3525,6 +4394,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;
@@ -3546,5 +4416,5 @@ exports.useReview = useReview;
 exports.useReviewItem = useReviewItem;
 exports.useTrackedOrNoted = useTrackedOrNoted;
 exports.withDirectEditing = withDirectEditing;
-//# sourceMappingURL=chunk-44TPPPRJ.cjs.map
-//# sourceMappingURL=chunk-44TPPPRJ.cjs.map
+//# sourceMappingURL=chunk-B7P73VHX.cjs.map
+//# sourceMappingURL=chunk-B7P73VHX.cjs.map