@arbidocs/blocks 0.4.102 → 0.4.103

package/dist/{chunk-FAGQTB3D.cjs → chunk-O33EBMIX.cjs}

@@ -2194,7 +2194,9 @@ function RibbonMenu({
   children,
   className,
   testId,
-  title
+  title,
+  keepMounted = false,
+  popoverClassName
 }) {
   const [open, setOpen] = React3.useState(false);
   const element = React3.useRef(null);
@@ -2228,12 +2230,13 @@ function RibbonMenu({
         children: icon
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
+    (open || keepMounted) && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "native-docx-ribbon-popover",
+        className: ["native-docx-ribbon-popover", popoverClassName].filter(Boolean).join(" "),
         role: "group",
         "aria-label": label,
+        hidden: !open,
         onMouseDown: (event) => {
           if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement))
             event.preventDefault();
@@ -2511,6 +2514,163 @@ var WordDraftStream = class {
   }
 };
 
+// src/docx/overflowPlan.ts
+function planOverflow(items, available, moreWidth) {
+  const collapsed = /* @__PURE__ */ new Set();
+  let used = items.reduce((sum, item) => sum + item.width, 0);
+  if (used <= available) return collapsed;
+  used += moreWidth;
+  const order = items.map((item, index) => ({ item, index })).sort((a, b) => a.item.priority - b.item.priority || b.index - a.index);
+  for (const { item } of order) {
+    if (used <= available) break;
+    collapsed.add(item.id);
+    used -= item.width;
+  }
+  return collapsed;
+}
+var Overflow = React3.createContext(null);
+var MORE_WIDTH = 32;
+var sameSet = (a, b) => a.size === b.size && [...a].every((id) => b.has(id));
+function RibbonOverflow({ tab, children }) {
+  const row = React3.useRef(null);
+  const items = React3.useRef(/* @__PURE__ */ new Map());
+  const widths = React3.useRef(/* @__PURE__ */ new Map());
+  const [version, setVersion] = React3.useState(0);
+  const [collapsed, setCollapsed] = React3.useState(() => /* @__PURE__ */ new Set());
+  const [slots, setSlots] = React3.useState({});
+  const [menu, setMenu] = React3.useState([]);
+  const register = React3.useCallback((id, item) => {
+    items.current.set(id, item);
+    setVersion((v) => v + 1);
+    return () => {
+      if (items.current.get(id) === item) items.current.delete(id);
+      setVersion((v) => v + 1);
+    };
+  }, []);
+  const plan = React3.useCallback(() => {
+    const element = row.current;
+    if (!element) return;
+    const gap = parseFloat(getComputedStyle(element).columnGap) || 0;
+    const ordered = Array.from(element.querySelectorAll("[data-ribbon-item]")).map((node) => node.dataset.ribbonItem).filter((id) => items.current.has(id));
+    const measured = ordered.map((id) => {
+      const { element: node, priority } = items.current.get(id);
+      if (!node.hidden) {
+        const width = node.getBoundingClientRect().width;
+        widths.current.set(id, width ? width + gap : 0);
+      }
+      return { id, priority, width: widths.current.get(id) ?? 0 };
+    });
+    const next = planOverflow(measured, element.clientWidth, MORE_WIDTH);
+    setCollapsed((current) => sameSet(current, next) ? current : next);
+    const entries = ordered.filter((id) => next.has(id)).map((id) => ({ id, label: items.current.get(id).label }));
+    setMenu(
+      (current) => current.length === entries.length && current.every((entry, i) => entry.id === entries[i].id && entry.label === entries[i].label) ? current : entries
+    );
+  }, []);
+  React3.useLayoutEffect(plan, [plan, version, tab, collapsed]);
+  React3.useLayoutEffect(() => {
+    const element = row.current;
+    if (!element) return;
+    const observer = new ResizeObserver(() => plan());
+    observer.observe(element);
+    for (const item of items.current.values()) observer.observe(item.element);
+    return () => observer.disconnect();
+  }, [plan, version]);
+  const slotRef = React3.useCallback(
+    (id) => (node) => setSlots((current) => {
+      if (node ? current[id] === node : !(id in current)) return current;
+      const next = { ...current };
+      if (node) next[id] = node;
+      else delete next[id];
+      return next;
+    }),
+    []
+  );
+  const context = React3.useMemo(() => ({ collapsed, slots, register }), [collapsed, slots, register]);
+  const shown = menu.filter((entry) => collapsed.has(entry.id));
+  return /* @__PURE__ */ jsxRuntime.jsx(Overflow.Provider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-ribbon-row", ref: row, "data-testid": "docx-ribbon-row", children: [
+    children,
+    shown.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      RibbonMenu,
+      {
+        label: "More",
+        title: "More commands",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { size: 16 }),
+        testId: "docx-ribbon-more",
+        keepMounted: true,
+        popoverClassName: "native-docx-ribbon-more",
+        children: (close) => /* @__PURE__ */ jsxRuntime.jsx(MoreRows, { entries: shown, slotRef, close })
+      },
+      tab
+    )
+  ] }) });
+}
+function MoreRows({
+  entries,
+  slotRef,
+  close
+}) {
+  const refs = React3.useRef(/* @__PURE__ */ new Map());
+  const refFor = (id) => {
+    let ref = refs.current.get(id);
+    if (!ref) refs.current.set(id, ref = slotRef(id));
+    return ref;
+  };
+  const list = React3.useRef(null);
+  const latest = React3.useRef(close);
+  latest.current = close;
+  React3.useEffect(() => {
+    const element = list.current;
+    if (!element) return;
+    const onClick = (event) => {
+      const target = event.target;
+      const row = target.closest(".native-docx-ribbon-more-row");
+      if (!row) return;
+      const control = row.querySelector(".native-docx-ribbon-more-control");
+      if (!control.contains(target)) {
+        control.querySelector("button:not([disabled])")?.click();
+        return;
+      }
+      const button = target.closest("button");
+      if (button && !button.disabled && !control.querySelector(".native-docx-ribbon-popover")?.contains(button) && !button.hasAttribute("aria-expanded") && !button.hasAttribute("aria-haspopup"))
+        latest.current();
+    };
+    element.addEventListener("click", onClick, true);
+    return () => element.removeEventListener("click", onClick, true);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-ribbon-more-list", ref: list, children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-ribbon-more-row", "data-ribbon-more": entry.id, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-ribbon-more-control", ref: refFor(entry.id) }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-ribbon-more-label", children: entry.label })
+  ] }, entry.id)) });
+}
+function RibbonItem({
+  id,
+  label,
+  priority = 0,
+  children
+}) {
+  const context = React3.useContext(Overflow);
+  const element = React3.useRef(null);
+  const register = context?.register;
+  React3.useLayoutEffect(() => {
+    if (!register || !element.current) return;
+    return register(id, { label, priority, element: element.current });
+  }, [register, id, label, priority]);
+  if (!context) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  const collapsed = context.collapsed.has(id);
+  const slot = context.slots[id];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: element,
+      className: "native-docx-ribbon-item",
+      "data-ribbon-item": id,
+      hidden: collapsed || void 0,
+      children: collapsed ? slot ? reactDom.createPortal(children, slot) : null : children
+    }
+  );
+}
+
 // src/docx/wordStyles.ts
 var QUICK_STYLES = ["Normal", "Title", "heading 1", "heading 2", "heading 3"];
 function findStyle(options, name) {
@@ -2696,18 +2856,87 @@ function StyleGallery() {
     }
   );
 }
+var W = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
+var DEFAULT_PARAGRAPH_FONT = {
+  id: "DefaultParagraphFont",
+  type: "character",
+  xml: '<w:style w:type="character" w:default="1" w:styleId="DefaultParagraphFont"><w:name w:val="Default Paragraph Font"/><w:uiPriority w:val="1"/><w:semiHidden/><w:unhideWhenUsed/></w:style>'
+};
+function stylesOf(kind) {
+  const Kind = kind === "footnote" ? "Footnote" : "Endnote";
+  const text = `${Kind}Text`;
+  return [
+    {
+      id: text,
+      type: "paragraph",
+      xml: `<w:style w:type="paragraph" w:styleId="${text}"><w:name w:val="${kind} text"/><w:basedOn w:val="Normal"/><w:link w:val="${text}Char"/><w:uiPriority w:val="99"/><w:semiHidden/><w:unhideWhenUsed/><w:pPr><w:spacing w:after="0" w:line="240" w:lineRule="auto"/></w:pPr><w:rPr><w:sz w:val="20"/><w:szCs w:val="20"/></w:rPr></w:style>`
+    },
+    {
+      id: `${text}Char`,
+      type: "character",
+      xml: `<w:style w:type="character" w:customStyle="1" w:styleId="${text}Char"><w:name w:val="${Kind} Text Char"/><w:basedOn w:val="DefaultParagraphFont"/><w:link w:val="${text}"/><w:uiPriority w:val="99"/><w:semiHidden/><w:rPr><w:sz w:val="20"/><w:szCs w:val="20"/></w:rPr></w:style>`
+    },
+    {
+      id: `${Kind}Reference`,
+      type: "character",
+      xml: `<w:style w:type="character" w:styleId="${Kind}Reference"><w:name w:val="${kind} reference"/><w:basedOn w:val="DefaultParagraphFont"/><w:uiPriority w:val="99"/><w:semiHidden/><w:unhideWhenUsed/><w:rPr><w:vertAlign w:val="superscript"/></w:rPr></w:style>`
+    }
+  ];
+}
+function noteTextStyle(styles, kind) {
+  const paragraph = styles.filter((style) => style.type === "paragraph");
+  const id = kind === "footnote" ? "FootnoteText" : "EndnoteText";
+  return paragraph.find((style) => style.name.toLowerCase() === `${kind} text`)?.styleId ?? paragraph.find((style) => style.styleId === id)?.styleId;
+}
+function missingNoteStyles(styles, kind) {
+  const has = (type, id) => styles.some((style) => style.type === type && style.styleId === id);
+  const text = noteTextStyle(styles, kind);
+  const missing = stylesOf(kind).filter(
+    (style) => style.type === "paragraph" ? !text : !has("character", style.id)
+  );
+  if (!missing.length) return [];
+  const base = has("character", DEFAULT_PARAGRAPH_FONT.id) ? [] : [DEFAULT_PARAGRAPH_FONT];
+  return [...base, ...missing].map((style) => style.xml);
+}
+var CONTENT_TYPES = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/word/document.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml"/><Override PartName="/word/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml"/></Types>';
+function stylesOnlyClipboardHtml(styles) {
+  const fragment = fflate.zipSync({
+    "[Content_Types].xml": fflate.strToU8(CONTENT_TYPES),
+    "_rels/.rels": fflate.strToU8(
+      '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>'
+    ),
+    "word/document.xml": fflate.strToU8(
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:document xmlns:w="${W}"><w:body><w:p/></w:body></w:document>`
+    ),
+    "word/_rels/document.xml.rels": fflate.strToU8(
+      '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rIdStyles" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/></Relationships>'
+    ),
+    "word/styles.xml": fflate.strToU8(
+      `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<w:styles xmlns:w="${W}">${styles.join("")}</w:styles>`
+    )
+  });
+  return template.fragmentClipboardHtml(fragment, false);
+}
+function ensureNoteStyles(editor, kind, direct = (fn) => fn()) {
+  if (!editor.can({ type: "insertNote", noteKind: kind }).ok) return void 0;
+  const missing = missingNoteStyles(editor.getDocumentStyles(), kind);
+  if (missing.length)
+    direct(() => editor.exec({ type: "paste", text: "", html: stylesOnlyClipboardHtml(missing) }));
+  return noteTextStyle(editor.getDocumentStyles(), kind);
+}
 function useInsertNote(kind) {
   const command = react.useEditorCommand(kind === "footnote" ? "insert.footnote" : "insert.endnote");
-  const { options } = react.useParagraphStyle();
   const editor = react.useDocxEditor();
   const insert = () => {
+    const text = editor && ensureNoteStyles(editor, kind, (fn) => withDirectEditing(editor, fn));
     if (!command.execute()) return false;
-    const text = findStyle(options, `${kind} text`);
-    if (text && editor)
-      withDirectEditing(
-        editor,
-        () => editor.exec({ type: "setParagraphStyle", styleId: text.styleId })
-      );
+    if (editor) {
+      if (text)
+        withDirectEditing(editor, () => editor.exec({ type: "setParagraphStyle", styleId: text }));
+      editor.exec({ type: "insertText", text: " " });
+    }
     return true;
   };
   return { insert, isEnabled: command.isEnabled, disabledReason: command.disabledReason };
@@ -2719,7 +2948,7 @@ function NoteAction({
   icon
 }) {
   const note = useInsertNote(kind);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: `references-${kind}`, label, children: /* @__PURE__ */ jsxRuntime.jsx(
     react.DocxEditor.Toolbar.Action,
     {
       label: `${label} (${shortcut})`,
@@ -2729,7 +2958,7 @@ function NoteAction({
       onSelect: () => void note.insert(),
       className: `native-docx-insert-${kind}`
     }
-  );
+  ) });
 }
 function NoteButtons() {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -3014,10 +3243,10 @@ function LayoutButtons() {
   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(
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "layout-margins", label: "Margins", children: /* @__PURE__ */ jsxRuntime.jsx(Margins, { ...props }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "layout-orientation", label: "Orientation", children: /* @__PURE__ */ jsxRuntime.jsx(Orientation, { ...props }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "layout-size", label: "Size", children: /* @__PURE__ */ jsxRuntime.jsx(Size, { ...props }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "layout-columns", label: "Columns", children: /* @__PURE__ */ jsxRuntime.jsx(
       react.DocxEditor.Toolbar.Action,
       {
         label: "Columns",
@@ -3026,9 +3255,9 @@ function LayoutButtons() {
         disabledReason: COLUMNS_UNSUPPORTED,
         className: "native-docx-layout-columns"
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Breaks, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "layout-breaks", label: "Breaks", children: /* @__PURE__ */ jsxRuntime.jsx(Breaks, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "layout-page-setup", label: "Page Setup\u2026", children: /* @__PURE__ */ jsxRuntime.jsx(
       react.DocxEditor.Toolbar.Action,
       {
         label: "Page Setup\u2026",
@@ -3036,7 +3265,7 @@ function LayoutButtons() {
         onSelect: () => setDialog(true),
         className: "native-docx-layout-page-setup"
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.PageSetupDialog, { open: dialog, onClose: () => setDialog(false) })
   ] });
 }
@@ -3063,7 +3292,7 @@ function CommandGallery({
   rows
 }) {
   const bound = useRows(rows);
-  return /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label, icon, testId, children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: testId, label, children: /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label, icon, testId, children: (close) => /* @__PURE__ */ jsxRuntime.jsx(
     RibbonGallery,
     {
       label,
@@ -3077,7 +3306,7 @@ function CommandGallery({
       })),
       onPick: (id) => void bound.find((row) => row.id === id)?.state.execute()
     }
-  ) });
+  ) }) });
 }
 function CommandAction({
   command,
@@ -3086,7 +3315,7 @@ function CommandAction({
   testId
 }) {
   const state = react.useEditorCommand(command);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: `table-${testId}`, label, children: /* @__PURE__ */ jsxRuntime.jsx(
     react.DocxEditor.Toolbar.Action,
     {
       label,
@@ -3097,7 +3326,7 @@ function CommandAction({
       onSelect: () => void state.execute(),
       className: `native-docx-table-${testId}`
     }
-  );
+  ) });
 }
 function TableButtons() {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -3197,11 +3426,11 @@ function TableButtons() {
         ]
       }
     ),
-    /* @__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, {})
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "table-border-target", label: "Borders", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableBorderTarget, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "table-border-style", label: "Border style", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableBorderStyle, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "table-border-width", label: "Border width", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableBorderWidth, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "table-border-color", label: "Border color", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableBorderColor, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "table-cell-fill", label: "Shading", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableCellFill, {}) })
   ] });
 }
 var CAPTION_LABELS = ["Figure", "Table", "Equation"];
@@ -3264,7 +3493,7 @@ function TransformAction({
   icon
 }) {
   const state = react.useEditorCommand(TRANSFORMS[action]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: `picture-${action}`, label, children: /* @__PURE__ */ jsxRuntime.jsx(
     react.DocxEditor.Toolbar.Action,
     {
       label,
@@ -3274,7 +3503,7 @@ function TransformAction({
       onSelect: () => void state.execute(),
       className: `native-docx-picture-${action}`
     }
-  );
+  ) });
 }
 function insertCaption(editor, label, text, track) {
   const surface = editor.surface;
@@ -3372,9 +3601,9 @@ function CaptionButton({ defaultLabel = "Figure" }) {
 }
 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(RibbonItem, { id: "picture-wrap", label: "Wrap text", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ImageWrap, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "picture-properties", label: "Size and position", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ImageProperties, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "picture-alt-text", label: "Alt text", children: /* @__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(
@@ -3386,7 +3615,7 @@ function PictureButtons() {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(TransformAction, { action: "flipV", label: "Flip vertical", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FlipVertical2, { size: 16 }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(CaptionButton, {})
+    /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "picture-caption", label: "Insert caption", children: /* @__PURE__ */ jsxRuntime.jsx(CaptionButton, {}) })
   ] });
 }
 var LAYOUT_TAB = "Layout";
@@ -3649,46 +3878,48 @@ function DocxRibbon({
       /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Undo, {}),
       /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Redo, {}),
       /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Save, {}),
-      tab === "Home" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StyleGallery, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Bold, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Italic, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Underline, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(RibbonMenu, { label: "Font", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { size: 16 }), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.FontFamily, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.FontSize, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.FontColor, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Highlight, {})
+      /* @__PURE__ */ jsxRuntime.jsxs(RibbonOverflow, { tab, children: [
+        tab === "Home" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "home-style", label: "Styles", priority: 80, children: /* @__PURE__ */ jsxRuntime.jsx(StyleGallery, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "home-bold", label: "Bold", priority: 100, children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Bold, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "home-italic", label: "Italic", priority: 95, children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Italic, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "home-underline", label: "Underline", priority: 90, children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Underline, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "home-font", label: "Font", priority: 60, children: /* @__PURE__ */ jsxRuntime.jsxs(RibbonMenu, { label: "Font", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { size: 16 }), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.FontFamily, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.FontSize, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.FontColor, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Highlight, {})
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "home-more-formatting", label: "More formatting", priority: 50, children: /* @__PURE__ */ jsxRuntime.jsxs(RibbonMenu, { label: "More formatting", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pilcrow, { size: 16 }), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Alignment, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.BulletList, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.NumberedList, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.LineSpacing, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Indent, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Outdent, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Strike, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ClearFormatting, {})
+          ] }) })
+        ] }),
+        tab === "Insert" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "insert-table", label: "Table", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableInsert, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "insert-picture", label: "Picture", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ImageInsert, {}) }),
+          imageGeneration && /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "insert-generate-image", label: "Generate image", children: /* @__PURE__ */ jsxRuntime.jsx(GenerateImageButton, { generation: imageGeneration }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "insert-page-break", label: "Page break", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Button, { slotId: "insert.pageBreak" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "insert-link", label: "Link", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Link, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "insert-defined-term", label: "Defined term", children: /* @__PURE__ */ jsxRuntime.jsx(DefinedTermButtons, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "insert-quick-parts", label: "Quick Parts", children: /* @__PURE__ */ jsxRuntime.jsx(QuickParts, {}) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(RibbonMenu, { label: "More formatting", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { size: 16 }), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Alignment, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.BulletList, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.NumberedList, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.LineSpacing, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Indent, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Outdent, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Strike, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.ClearFormatting, {})
+        /* @__PURE__ */ jsxRuntime.jsx(LayoutTabContent, { tab }),
+        tab === "Design" && /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "design-house-template", label: "House template", children: /* @__PURE__ */ jsxRuntime.jsx(HouseTemplatePanel, {}) }),
+        tab === "References" && /* @__PURE__ */ jsxRuntime.jsx(NoteButtons, {}),
+        tab === "Review" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "review-editing-mode", label: "Editing mode", priority: 10, children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.EditingMode, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "review-comments", label: "Comments", children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Comments, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RibbonItem, { id: "review-options", label: "Review options", children: /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label: "Review options", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UsersRound, { size: 16 }), children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Reviewers, {}) }) })
         ] })
       ] }),
-      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: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.EditingMode, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Comments, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label: "Review options", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { size: 16 }), children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Reviewers, {}) })
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.TableCellFill, { hidden: true })
     ] }),
     badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-ribbon-badge", "data-testid": "docx-ribbon-badge", children: badge })
   ] });
@@ -4232,5 +4463,5 @@ exports.useReview = useReview;
 exports.useReviewItem = useReviewItem;
 exports.useTrackedOrNoted = useTrackedOrNoted;
 exports.withDirectEditing = withDirectEditing;
-//# sourceMappingURL=chunk-FAGQTB3D.cjs.map
-//# sourceMappingURL=chunk-FAGQTB3D.cjs.map
+//# sourceMappingURL=chunk-O33EBMIX.cjs.map
+//# sourceMappingURL=chunk-O33EBMIX.cjs.map