oasis-editor 0.0.103 → 0.0.105

package/dist/{index-DLL7O0m4.js → index-DdcPkCmB.js}

@@ -2444,7 +2444,7 @@ function OasisBrandMark(props) {
     return _el$;
   })();
 }
-var _tmpl$$R = /* @__PURE__ */ template(`<div class=oasis-editor-import-progress-label>`), _tmpl$2$A = /* @__PURE__ */ template(`<div role=status aria-live=polite><div class=oasis-editor-import-card><div class=oasis-editor-import-title></div><div class=oasis-editor-import-progress-track><div>`), _tmpl$3$o = /* @__PURE__ */ template(`<span class=oasis-editor-import-done-icon>Done`);
+var _tmpl$$R = /* @__PURE__ */ template(`<div class=oasis-editor-import-progress-label>`), _tmpl$2$A = /* @__PURE__ */ template(`<div role=status aria-live=polite><div class=oasis-editor-import-card><div class=oasis-editor-import-title></div><div class=oasis-editor-import-progress-track><div>`), _tmpl$3$p = /* @__PURE__ */ template(`<span class=oasis-editor-import-done-icon>Done`);
 function OasisEditorLoading(props) {
   const t = useI18n();
   const variant = () => props.variant ?? "overlay";
@@ -2468,7 +2468,7 @@ function OasisEditorLoading(props) {
         var _el$6 = _tmpl$$R();
         insert(_el$6, (() => {
           var _c$ = memo(() => !!isDone());
-          return () => _c$() ? _tmpl$3$o() : `${pct()}%`;
+          return () => _c$() ? _tmpl$3$p() : `${pct()}%`;
         })());
         return _el$6;
       }
@@ -2519,7 +2519,7 @@ function OasisEditorAppLazy(props = {}) {
     onCleanup(() => {
       cancelled = true;
     });
-    import("./OasisEditorApp-CLzJ9zyp.js").then((m) => {
+    import("./OasisEditorApp-CwVZxG1m.js").then((m) => {
       cancelled = true;
       setProgress(1);
       setTimeout(() => setApp(() => m.OasisEditorApp), 180);
@@ -4982,7 +4982,7 @@ function mount(target, props = {}) {
     unmount: () => client.dispose()
   });
 }
-var _tmpl$$Q = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none aria-hidden=true><text x=2 y=18 font-family="'Segoe UI', Arial, sans-serif"font-size=14 font-weight=700 fill=currentColor>ab</text><text x=15.5 y=11 font-family="'Segoe UI', Arial, sans-serif"font-size=10 font-weight=700 fill=#c00000>1`), _tmpl$2$z = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"aria-hidden=true><g fill=currentColor><path d="M3.375 4.875 L7.125 8.625 L3.375 12.375 L2.25 11.25 L4.875 8.625 L2.25 6 Z"></path><rect x=10.125 y=6 width=9 height=1.6875 rx=0.25></rect><rect x=5.625 y=10.875 width=13.5 height=1.6875 rx=0.25></rect><rect x=5.625 y=15.75 width=13.5 height=1.6875 rx=0.25>`), _tmpl$3$n = /* @__PURE__ */ template(`<i>`);
+var _tmpl$$Q = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none aria-hidden=true><text x=2 y=18 font-family="'Segoe UI', Arial, sans-serif"font-size=14 font-weight=700 fill=currentColor>ab</text><text x=15.5 y=11 font-family="'Segoe UI', Arial, sans-serif"font-size=10 font-weight=700 fill=#c00000>1`), _tmpl$2$z = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"aria-hidden=true><g fill=currentColor><path d="M3.375 4.875 L7.125 8.625 L3.375 12.375 L2.25 11.25 L4.875 8.625 L2.25 6 Z"></path><rect x=10.125 y=6 width=9 height=1.6875 rx=0.25></rect><rect x=5.625 y=10.875 width=13.5 height=1.6875 rx=0.25></rect><rect x=5.625 y=15.75 width=13.5 height=1.6875 rx=0.25>`), _tmpl$3$o = /* @__PURE__ */ template(`<i>`);
 const FootnoteIcon = () => _tmpl$$Q();
 const SpecialIndentFirstLineIcon = () => _tmpl$2$z();
 const CUSTOM_ICONS = {
@@ -4999,7 +4999,7 @@ function ToolIcon(props) {
     },
     get fallback() {
       return (() => {
-        var _el$3 = _tmpl$3$n();
+        var _el$3 = _tmpl$3$o();
         createRenderEffect(() => setAttribute(_el$3, "data-lucide", props.name));
         return _el$3;
       })();
@@ -5007,7 +5007,7 @@ function ToolIcon(props) {
     children: (render2) => render2()()
   });
 }
-var _tmpl$$P = /* @__PURE__ */ template(`<div class=oasis-menubar role=menubar>`), _tmpl$2$y = /* @__PURE__ */ template(`<div class=oasis-menubar-dropdown role=menu>`), _tmpl$3$m = /* @__PURE__ */ template(`<div class=oasis-menubar-menu><div class=oasis-menubar-button role=menuitem aria-haspopup=true>`), _tmpl$4$h = /* @__PURE__ */ template(`<div class=oasis-menubar-separator role=separator>`), _tmpl$5$e = /* @__PURE__ */ template(`<span class=oasis-menubar-item-icon aria-hidden=true>`), _tmpl$6$7 = /* @__PURE__ */ template(`<span class=oasis-menubar-shortcut>`), _tmpl$7$3 = /* @__PURE__ */ template(`<i class=oasis-menubar-submenu-icon data-lucide=chevron-right>`), _tmpl$8$2 = /* @__PURE__ */ template(`<div class=oasis-menubar-submenu role=menu>`), _tmpl$9$1 = /* @__PURE__ */ template(`<div class=oasis-menubar-item role=menuitem><span class=oasis-menubar-item-main><span>`);
+var _tmpl$$P = /* @__PURE__ */ template(`<div class=oasis-menubar role=menubar>`), _tmpl$2$y = /* @__PURE__ */ template(`<div class=oasis-menubar-dropdown role=menu>`), _tmpl$3$n = /* @__PURE__ */ template(`<div class=oasis-menubar-menu><div class=oasis-menubar-button role=menuitem aria-haspopup=true>`), _tmpl$4$i = /* @__PURE__ */ template(`<div class=oasis-menubar-separator role=separator>`), _tmpl$5$f = /* @__PURE__ */ template(`<span class=oasis-menubar-item-icon aria-hidden=true>`), _tmpl$6$8 = /* @__PURE__ */ template(`<span class=oasis-menubar-shortcut>`), _tmpl$7$3 = /* @__PURE__ */ template(`<i class=oasis-menubar-submenu-icon data-lucide=chevron-right>`), _tmpl$8$2 = /* @__PURE__ */ template(`<div class=oasis-menubar-submenu role=menu>`), _tmpl$9$1 = /* @__PURE__ */ template(`<div class=oasis-menubar-item role=menuitem><span class=oasis-menubar-item-main><span>`);
 function Menubar(props) {
   const t = useI18n();
   const [activeMenu, setActiveMenu] = createSignal(null);
@@ -5081,7 +5081,7 @@ function Menubar(props) {
         return topLevelItems();
       },
       children: (topLevel) => (() => {
-        var _el$2 = _tmpl$3$m(), _el$3 = _el$2.firstChild;
+        var _el$2 = _tmpl$3$n(), _el$3 = _el$2.firstChild;
         _el$2.addEventListener("mouseenter", () => {
           if (activeMenu() && activeMenu() !== topLevel.id) {
             setActiveMenu(topLevel.id);
@@ -5141,7 +5141,7 @@ function MenuNode(props) {
   } = props;
   const isSeparator = (_a = node.item) == null ? void 0 : _a.separator;
   if (isSeparator) {
-    return _tmpl$4$h();
+    return _tmpl$4$i();
   }
   const hasChildren = node.children.length > 0;
   const [showSub, setShowSub] = createSignal(false);
@@ -5176,7 +5176,7 @@ function MenuNode(props) {
         return icon();
       },
       get children() {
-        var _el$8 = _tmpl$5$e();
+        var _el$8 = _tmpl$5$f();
         insert(_el$8, createComponent(ToolIcon, {
           get name() {
             return icon();
@@ -5192,7 +5192,7 @@ function MenuNode(props) {
         return (_a2 = node.item) == null ? void 0 : _a2.shortcut;
       },
       get children() {
-        var _el$0 = _tmpl$6$7();
+        var _el$0 = _tmpl$6$8();
         insert(_el$0, () => node.item.shortcut);
         return _el$0;
       }
@@ -13089,6 +13089,50 @@ function getTableCellContentWidthForParagraph(document2, paragraphId, activeSect
     cellWidth - horizontalChrome
   );
 }
+const cache = /* @__PURE__ */ new WeakMap();
+function getOrCreateStylesBucket(byStyles, styles) {
+  let bucket = byStyles.get(styles);
+  if (!bucket) {
+    bucket = /* @__PURE__ */ new Map();
+    byStyles.set(styles, bucket);
+  }
+  return bucket;
+}
+function resolveCachedTableCellParagraph(source, formatting, styles) {
+  var _a;
+  const inherited = resolveTableParagraphInheritance(
+    formatting == null ? void 0 : formatting.paragraphStyle,
+    (_a = source.style) == null ? void 0 : _a.styleId,
+    styles
+  );
+  const signature = JSON.stringify([
+    inherited ?? null,
+    (formatting == null ? void 0 : formatting.textStyle) ?? null
+  ]);
+  let perParagraph = cache.get(source);
+  if (!perParagraph) {
+    perParagraph = { noStyles: /* @__PURE__ */ new Map(), byStyles: /* @__PURE__ */ new WeakMap() };
+    cache.set(source, perParagraph);
+  }
+  const bucket = styles ? getOrCreateStylesBucket(perParagraph.byStyles, styles) : perParagraph.noStyles;
+  const cached = bucket.get(signature);
+  if (cached) {
+    return cached;
+  }
+  const resolved = {
+    ...source,
+    style: {
+      ...inherited,
+      ...source.style
+    },
+    runs: source.runs.map((run) => ({
+      ...run,
+      styles: { ...formatting == null ? void 0 : formatting.textStyle, ...run.styles }
+    }))
+  };
+  bucket.set(signature, resolved);
+  return resolved;
+}
 const DEFAULT_FONT_SIZE$1 = 14.6667;
 const DEFAULT_LINE_HEIGHT = 1.15;
 const DEFAULT_TABLE_CELL_HORIZONTAL_PADDING_PX = 14.4;
@@ -13222,24 +13266,9 @@ function estimateTableRowHeight(row, styles, measurer, defaultTabStop, contentWi
     const cell = {
       ...sourceCell,
       style: (formatting == null ? void 0 : formatting.cellStyle) ?? sourceCell.style,
-      blocks: sourceCell.blocks.map((paragraph) => {
-        var _a3;
-        return {
-          ...paragraph,
-          style: {
-            ...resolveTableParagraphInheritance(
-              formatting == null ? void 0 : formatting.paragraphStyle,
-              (_a3 = paragraph.style) == null ? void 0 : _a3.styleId,
-              styles
-            ),
-            ...paragraph.style
-          },
-          runs: paragraph.runs.map((run) => ({
-            ...run,
-            styles: { ...formatting == null ? void 0 : formatting.textStyle, ...run.styles }
-          }))
-        };
-      })
+      blocks: sourceCell.blocks.map(
+        (paragraph) => resolveCachedTableCellParagraph(paragraph, formatting, styles)
+      )
     };
     if (cell.vMerge === "continue") return 0;
     let columnWidthPx;
@@ -15656,24 +15685,13 @@ function buildCanvasTableLayout(options) {
       const cell = {
         ...sourceCell,
         style: formatting.cellStyle,
-        blocks: sourceCell.blocks.map((paragraph) => {
-          var _a2;
-          return {
-            ...paragraph,
-            style: {
-              ...resolveTableParagraphInheritance(
-                formatting.paragraphStyle,
-                (_a2 = paragraph.style) == null ? void 0 : _a2.styleId,
-                state.document.styles
-              ),
-              ...paragraph.style
-            },
-            runs: paragraph.runs.map((run) => ({
-              ...run,
-              styles: { ...formatting.textStyle, ...run.styles }
-            }))
-          };
-        })
+        blocks: sourceCell.blocks.map(
+          (paragraph) => resolveCachedTableCellParagraph(
+            paragraph,
+            formatting,
+            state.document.styles
+          )
+        )
       };
       const effectiveRow = formatting.rowStyle;
       const rowSpan = Math.max(1, cell.rowSpan ?? 1);
@@ -16772,7 +16790,7 @@ function getCaretRectFromSnapshot(snapshot, position2, paragraphOffset) {
   );
   return rectFromBox(slot.left, slot.top, 1, slot.height || line.height);
 }
-var _tmpl$$N = /* @__PURE__ */ template(`<span class=oasis-outline-title>`), _tmpl$2$x = /* @__PURE__ */ template(`<div class=oasis-outline-list>`), _tmpl$3$l = /* @__PURE__ */ template(`<div class=oasis-outline-panel><div class=oasis-outline-header><button class=oasis-outline-toggle><i>`), _tmpl$4$g = /* @__PURE__ */ template(`<div class=oasis-outline-empty>`), _tmpl$5$d = /* @__PURE__ */ template(`<div class=oasis-outline-item>`);
+var _tmpl$$N = /* @__PURE__ */ template(`<span class=oasis-outline-title>`), _tmpl$2$x = /* @__PURE__ */ template(`<div class=oasis-outline-list>`), _tmpl$3$m = /* @__PURE__ */ template(`<div class=oasis-outline-panel><div class=oasis-outline-header><button class=oasis-outline-toggle><i>`), _tmpl$4$h = /* @__PURE__ */ template(`<div class=oasis-outline-empty>`), _tmpl$5$e = /* @__PURE__ */ template(`<div class=oasis-outline-item>`);
 function OutlinePanel(props) {
   const t = useI18n();
   const [collapsed, setCollapsed] = createSignal(props.defaultCollapsed ?? false);
@@ -16841,7 +16859,7 @@ function OutlinePanel(props) {
     }
   });
   return (() => {
-    var _el$ = _tmpl$3$l(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.firstChild;
+    var _el$ = _tmpl$3$m(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.firstChild;
     insert(_el$2, createComponent(Show, {
       get when() {
         return !collapsed();
@@ -16865,7 +16883,7 @@ function OutlinePanel(props) {
           },
           get fallback() {
             return (() => {
-              var _el$7 = _tmpl$4$g();
+              var _el$7 = _tmpl$4$h();
               insert(_el$7, () => t("outline.empty"));
               return _el$7;
             })();
@@ -16876,7 +16894,7 @@ function OutlinePanel(props) {
                 return items();
               },
               children: (item) => (() => {
-                var _el$8 = _tmpl$5$d();
+                var _el$8 = _tmpl$5$e();
                 _el$8.$$click = () => props.onNavigate(item.anchor);
                 insert(_el$8, () => item.text);
                 createRenderEffect((_p$) => {
@@ -17340,7 +17358,7 @@ function Popover(props) {
     }
   })];
 }
-var _tmpl$$J = /* @__PURE__ */ template(`<div>`), _tmpl$2$u = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-dropdown>`), _tmpl$3$k = /* @__PURE__ */ template(`<i>`), _tmpl$4$f = /* @__PURE__ */ template(`<span class=oasis-editor-tool-button-label>`), _tmpl$5$c = /* @__PURE__ */ template(`<i data-lucide=chevron-down class=oasis-editor-dropdown-chevron>`), _tmpl$6$6 = /* @__PURE__ */ template(`<button type=button class="oasis-editor-tool-button oasis-editor-tool-button-dropdown"aria-haspopup=menu>`);
+var _tmpl$$J = /* @__PURE__ */ template(`<div>`), _tmpl$2$u = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-dropdown>`), _tmpl$3$l = /* @__PURE__ */ template(`<i>`), _tmpl$4$g = /* @__PURE__ */ template(`<span class=oasis-editor-tool-button-label>`), _tmpl$5$d = /* @__PURE__ */ template(`<i data-lucide=chevron-down class=oasis-editor-dropdown-chevron>`), _tmpl$6$7 = /* @__PURE__ */ template(`<button type=button class="oasis-editor-tool-button oasis-editor-tool-button-dropdown"aria-haspopup=menu>`);
 function Menu(props) {
   const [open, setOpen] = createSignal(false);
   const ariaLabel = () => props.tooltip || props.label || "";
@@ -17360,7 +17378,7 @@ function Menu(props) {
       },
       onPanelMouseLeave: void 0,
       trigger: (api) => (() => {
-        var _el$3 = _tmpl$6$6();
+        var _el$3 = _tmpl$6$7();
         _el$3.$$click = () => api.toggle();
         use((el) => api.ref(el), _el$3);
         insert(_el$3, createComponent(Show, {
@@ -17368,7 +17386,7 @@ function Menu(props) {
             return props.icon;
           },
           get children() {
-            var _el$4 = _tmpl$3$k();
+            var _el$4 = _tmpl$3$l();
             createRenderEffect(() => setAttribute(_el$4, "data-lucide", props.icon));
             return _el$4;
           }
@@ -17378,7 +17396,7 @@ function Menu(props) {
             return props.label;
           },
           get children() {
-            var _el$5 = _tmpl$4$f();
+            var _el$5 = _tmpl$4$g();
             insert(_el$5, () => props.label);
             return _el$5;
           }
@@ -17388,7 +17406,7 @@ function Menu(props) {
             return !props.hideChevron;
           },
           get children() {
-            return _tmpl$5$c();
+            return _tmpl$5$d();
           }
         }), null);
         createRenderEffect((_p$) => {
@@ -17536,7 +17554,7 @@ function SplitButton(props) {
   });
 }
 delegateEvents(["click"]);
-var _tmpl$$F = /* @__PURE__ */ template(`<i data-lucide=type>`), _tmpl$2$t = /* @__PURE__ */ template(`<button type=button class=oasis-editor-color-menu-action role=menuitem><span class=oasis-editor-color-menu-action-swatch></span><span>`), _tmpl$3$j = /* @__PURE__ */ template(`<div class=oasis-editor-color-menu-section><div class=oasis-editor-color-menu-heading></div><div class=oasis-editor-color-theme-grid>`), _tmpl$4$e = /* @__PURE__ */ template(`<div class=oasis-editor-color-menu-section><div class=oasis-editor-color-menu-heading></div><div class=oasis-editor-color-standard-grid>`), _tmpl$5$b = /* @__PURE__ */ template(`<button type=button class=oasis-editor-color-menu-action role=menuitem><span class="oasis-editor-color-menu-action-swatch oasis-editor-color-menu-more-swatch"></span><span>`), _tmpl$6$5 = /* @__PURE__ */ template(`<input type=color class=oasis-editor-color-custom-input>`), _tmpl$7$2 = /* @__PURE__ */ template(`<span class=oasis-editor-color-split-icon><i></i><span class=oasis-editor-color-split-indicator>`), _tmpl$8$1 = /* @__PURE__ */ template(`<i data-lucide=slash>`), _tmpl$9 = /* @__PURE__ */ template(`<div class=oasis-editor-color-theme-column>`), _tmpl$0 = /* @__PURE__ */ template(`<button type=button class=oasis-editor-color-swatch>`);
+var _tmpl$$F = /* @__PURE__ */ template(`<i data-lucide=type>`), _tmpl$2$t = /* @__PURE__ */ template(`<button type=button class=oasis-editor-color-menu-action role=menuitem><span class=oasis-editor-color-menu-action-swatch></span><span>`), _tmpl$3$k = /* @__PURE__ */ template(`<div class=oasis-editor-color-menu-section><div class=oasis-editor-color-menu-heading></div><div class=oasis-editor-color-theme-grid>`), _tmpl$4$f = /* @__PURE__ */ template(`<div class=oasis-editor-color-menu-section><div class=oasis-editor-color-menu-heading></div><div class=oasis-editor-color-standard-grid>`), _tmpl$5$c = /* @__PURE__ */ template(`<button type=button class=oasis-editor-color-menu-action role=menuitem><span class="oasis-editor-color-menu-action-swatch oasis-editor-color-menu-more-swatch"></span><span>`), _tmpl$6$6 = /* @__PURE__ */ template(`<input type=color class=oasis-editor-color-custom-input>`), _tmpl$7$2 = /* @__PURE__ */ template(`<span class=oasis-editor-color-split-icon><i></i><span class=oasis-editor-color-split-indicator>`), _tmpl$8$1 = /* @__PURE__ */ template(`<i data-lucide=slash>`), _tmpl$9 = /* @__PURE__ */ template(`<div class=oasis-editor-color-theme-column>`), _tmpl$0 = /* @__PURE__ */ template(`<button type=button class=oasis-editor-color-swatch>`);
 const normalizeColor = (value) => (value == null ? void 0 : value.trim().toLowerCase()) ?? "";
 function ColorPicker(props) {
   const [isOpen, setIsOpen] = createSignal(false);
@@ -17619,7 +17637,7 @@ function ColorPicker(props) {
           return _el$;
         }
       }), (() => {
-        var _el$5 = _tmpl$3$j(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+        var _el$5 = _tmpl$3$k(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
         insert(_el$6, () => props.themeColorsLabel);
         insert(_el$7, createComponent(For, {
           get each() {
@@ -17659,7 +17677,7 @@ function ColorPicker(props) {
         }));
         return _el$5;
       })(), (() => {
-        var _el$8 = _tmpl$4$e(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
+        var _el$8 = _tmpl$4$f(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
         insert(_el$9, () => props.standardColorsLabel);
         insert(_el$0, createComponent(For, {
           get each() {
@@ -17696,13 +17714,13 @@ function ColorPicker(props) {
         },
         get children() {
           return [(() => {
-            var _el$1 = _tmpl$5$b(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
+            var _el$1 = _tmpl$5$c(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
             _el$1.$$click = () => customColorInputRef == null ? void 0 : customColorInputRef.click();
             insert(_el$11, () => props.moreColorsLabel);
             createRenderEffect(() => setAttribute(_el$1, "data-testid", `${props.testId}-more-colors`));
             return _el$1;
           })(), (() => {
-            var _el$12 = _tmpl$6$5();
+            var _el$12 = _tmpl$6$6();
             _el$12.$$input = (event) => applyColor(event.currentTarget.value);
             var _ref$ = customColorInputRef;
             typeof _ref$ === "function" ? use(_ref$, _el$12) : customColorInputRef = _el$12;
@@ -17724,7 +17742,7 @@ function ColorPicker(props) {
   });
 }
 delegateEvents(["click", "input"]);
-var _tmpl$$E = /* @__PURE__ */ template(`<div class=oasis-editor-table-grid-picker-status>`), _tmpl$2$s = /* @__PURE__ */ template(`<div class=oasis-editor-table-grid-picker-grid>`), _tmpl$3$i = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-dropdown>`), _tmpl$4$d = /* @__PURE__ */ template(`<button type=button class=oasis-editor-tool-button><i>`), _tmpl$5$a = /* @__PURE__ */ template(`<button type=button class=oasis-editor-table-grid-picker-cell>`);
+var _tmpl$$E = /* @__PURE__ */ template(`<div class=oasis-editor-table-grid-picker-status>`), _tmpl$2$s = /* @__PURE__ */ template(`<div class=oasis-editor-table-grid-picker-grid>`), _tmpl$3$j = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-dropdown>`), _tmpl$4$e = /* @__PURE__ */ template(`<button type=button class=oasis-editor-tool-button><i>`), _tmpl$5$b = /* @__PURE__ */ template(`<button type=button class=oasis-editor-table-grid-picker-cell>`);
 function GridPicker(props) {
   const t = useI18n();
   const [isOpen, setIsOpen] = createSignal(false);
@@ -17799,7 +17817,7 @@ function GridPicker(props) {
     return h.row === 0 || h.col === 0 ? t("toolbar.table") : `${h.row} × ${h.col}`;
   };
   return (() => {
-    var _el$ = _tmpl$3$i();
+    var _el$ = _tmpl$3$j();
     insert(_el$, createComponent(Popover, {
       get open() {
         return isOpen();
@@ -17811,7 +17829,7 @@ function GridPicker(props) {
         col: 0
       }),
       trigger: (api) => (() => {
-        var _el$4 = _tmpl$4$d(), _el$5 = _el$4.firstChild;
+        var _el$4 = _tmpl$4$e(), _el$5 = _el$4.firstChild;
         _el$4.$$click = () => api.toggle();
         use((el) => api.ref(el), _el$4);
         createRenderEffect((_p$) => {
@@ -17847,7 +17865,7 @@ function GridPicker(props) {
                 return cols();
               },
               children: (c) => (() => {
-                var _el$6 = _tmpl$5$a();
+                var _el$6 = _tmpl$5$b();
                 _el$6.$$click = () => selectGridSize(r, c);
                 _el$6.$$mousedown = (event) => event.preventDefault();
                 _el$6.addEventListener("mouseenter", () => setHover({
@@ -17937,7 +17955,7 @@ const DEFAULT_PALETTE = {
   standardColors: STANDARD_COLORS,
   allowCustom: true
 };
-var _tmpl$$D = /* @__PURE__ */ template(`<button type=button class=oasis-editor-style-gallery-card role=option><span>`), _tmpl$2$r = /* @__PURE__ */ template(`<div class=oasis-editor-style-gallery-grid>`), _tmpl$3$h = /* @__PURE__ */ template(`<div class=oasis-editor-style-gallery><div class=oasis-editor-style-gallery-ribbon><div class=oasis-editor-style-gallery-strip role=listbox></div><button type=button class=oasis-editor-style-gallery-expand aria-haspopup=listbox><i data-lucide=chevron-down>`), _tmpl$4$c = /* @__PURE__ */ template(`<option>`);
+var _tmpl$$D = /* @__PURE__ */ template(`<button type=button class=oasis-editor-style-gallery-card role=option><span>`), _tmpl$2$r = /* @__PURE__ */ template(`<div class=oasis-editor-style-gallery-grid>`), _tmpl$3$i = /* @__PURE__ */ template(`<div class=oasis-editor-style-gallery><div class=oasis-editor-style-gallery-ribbon><div class=oasis-editor-style-gallery-strip role=listbox></div><button type=button class=oasis-editor-style-gallery-expand aria-haspopup=listbox><i data-lucide=chevron-down>`), _tmpl$4$d = /* @__PURE__ */ template(`<option>`);
 function getQuickStyles(styles) {
   const applicable = styles.filter((style2) => style2.type !== "table" && (!style2.semiHidden || style2.unhideWhenUsed && style2.isUsed));
   const hasQuickStyles = applicable.some((style2) => style2.qFormat === true);
@@ -18048,7 +18066,7 @@ function StyleGallery(props) {
     panelRole: "listbox",
     panelTestId,
     trigger: (popover) => (() => {
-      var _el$4 = _tmpl$3$h(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+      var _el$4 = _tmpl$3$i(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
       var _ref$ = popover.ref;
       typeof _ref$ === "function" ? use(_ref$, _el$4) : popover.ref = _el$4;
       insert(_el$4, createComponent(Select, {
@@ -18072,7 +18090,7 @@ function StyleGallery(props) {
               return styles();
             },
             children: (style2) => (() => {
-              var _el$8 = _tmpl$4$c();
+              var _el$8 = _tmpl$4$d();
               insert(_el$8, () => style2.name);
               createRenderEffect(() => _el$8.value = style2.id);
               return _el$8;
@@ -18105,7 +18123,7 @@ function StyleGallery(props) {
   });
 }
 delegateEvents(["click", "keydown"]);
-var _tmpl$$C = /* @__PURE__ */ template(`<option value>`), _tmpl$2$q = /* @__PURE__ */ template(`<option>`), _tmpl$3$g = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-item style=align-items:center>`);
+var _tmpl$$C = /* @__PURE__ */ template(`<option value>`), _tmpl$2$q = /* @__PURE__ */ template(`<option>`), _tmpl$3$h = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-item style=align-items:center>`);
 function renderMenuContent(content, api) {
   if (content.kind === "custom") {
     return content.render(api);
@@ -18434,7 +18452,7 @@ function ToolbarItemRenderer(props) {
   const binding = bindItem(props.item, props.api);
   const component = () => resolveRenderer(props.item.type);
   return (() => {
-    var _el$3 = _tmpl$3$g();
+    var _el$3 = _tmpl$3$h();
     insert(_el$3, createComponent(Show, {
       get when() {
         return component();
@@ -18546,6 +18564,70 @@ const RIBBON_GROUP_ORDER = {
     general: 10
   }
 };
+const DEFAULT_RESIZE_STATES = [
+  "full",
+  "compact",
+  "collapsed"
+];
+const DEFAULT_GROUP_RESIZE_POLICY = {
+  states: DEFAULT_RESIZE_STATES,
+  priority: 50,
+  compactMinWidth: 96,
+  collapsedMinWidth: 68,
+  collapsedIcon: "ellipsis",
+  compactLabels: "show"
+};
+const STYLE_GALLERY_CARD_WIDTH = 106;
+const STYLE_GALLERY_EXPAND_WIDTH = 24;
+const STYLE_GALLERY_BORDER_WIDTH = 2;
+const RIBBON_GROUP_RESIZE_DEFAULTS = {
+  home: {
+    styles: {
+      priority: 10,
+      states: ["full", "compact", "collapsed"],
+      compactMinWidth: 132,
+      collapsedIcon: "palette"
+    },
+    paragraph: {
+      priority: 15,
+      states: ["full", "collapsed"],
+      collapsedMinWidth: 74,
+      collapsedIcon: "pilcrow"
+    },
+    clipboard: {
+      priority: 20,
+      states: ["full", "collapsed"],
+      collapsedIcon: "clipboard"
+    },
+    font: {
+      priority: 30,
+      states: ["full", "collapsed"],
+      collapsedMinWidth: 74,
+      collapsedIcon: "type"
+    }
+  },
+  insert: {
+    illustrations: { priority: 25, collapsedIcon: "image" },
+    tables: { priority: 30, collapsedIcon: "table" },
+    links: { priority: 35, collapsedIcon: "link" },
+    accessibility: { priority: 20, collapsedIcon: "file-text" },
+    footnotes: { priority: 15, collapsedIcon: "footnote" }
+  },
+  layout: {
+    paragraph: { priority: 30, compactMinWidth: 112, collapsedIcon: "ruler" },
+    table: { priority: 20, collapsedIcon: "table" },
+    section: { priority: 40, compactMinWidth: 148, collapsedIcon: "layout" }
+  },
+  file: {
+    document: { priority: 10, collapsedIcon: "file" }
+  },
+  references: {
+    footnotes: { priority: 10, collapsedIcon: "footnote" }
+  },
+  plugins: {
+    general: { priority: 50, collapsedIcon: "plug" }
+  }
+};
 function normalizeRibbonTab(tab) {
   return tab ?? DEFAULT_RIBBON_TAB;
 }
@@ -18558,6 +18640,30 @@ function normalizeRibbonRow(row) {
 function isLargeRibbonItem(item) {
   return "ribbonSize" in item && item.ribbonSize === "large";
 }
+function normalizeResizeStates(states) {
+  const source = (states == null ? void 0 : states.length) ? states : DEFAULT_RESIZE_STATES;
+  const unique = source.filter(
+    (state, index) => source.indexOf(state) === index
+  );
+  return unique.includes("full") ? unique : ["full", ...unique];
+}
+function mergeRibbonGroupResizePolicy(tab, group, itemPolicy) {
+  var _a;
+  const tabDefaults = ((_a = RIBBON_GROUP_RESIZE_DEFAULTS[tab]) == null ? void 0 : _a[group]) ?? {};
+  const merged = {
+    ...DEFAULT_GROUP_RESIZE_POLICY,
+    ...tabDefaults,
+    ...itemPolicy
+  };
+  return {
+    states: normalizeResizeStates(merged.states),
+    priority: merged.priority ?? DEFAULT_GROUP_RESIZE_POLICY.priority,
+    compactMinWidth: merged.compactMinWidth ?? DEFAULT_GROUP_RESIZE_POLICY.compactMinWidth,
+    collapsedMinWidth: merged.collapsedMinWidth ?? DEFAULT_GROUP_RESIZE_POLICY.collapsedMinWidth,
+    collapsedIcon: merged.collapsedIcon ?? DEFAULT_GROUP_RESIZE_POLICY.collapsedIcon,
+    compactLabels: merged.compactLabels ?? DEFAULT_GROUP_RESIZE_POLICY.compactLabels
+  };
+}
 function ribbonGroupLabel(group, t) {
   const key = GROUP_LABEL_KEYS[group];
   return key ? t(key) : group;
@@ -18566,6 +18672,7 @@ function buildRibbonGroups(items, tab, t) {
   const groups = /* @__PURE__ */ new Map();
   const tabGroupOrder = RIBBON_GROUP_ORDER[tab] ?? {};
   items.forEach((item, index) => {
+    var _a;
     if (normalizeRibbonTab(item.tab) !== tab) {
       return;
     }
@@ -18579,11 +18686,27 @@ function buildRibbonGroups(items, tab, t) {
         label: ribbonGroupLabel(groupId, t),
         largeItems: [],
         rows: { 1: [], 2: [] },
-        order: groupOrder
+        order: groupOrder,
+        resizePolicy: mergeRibbonGroupResizePolicy(
+          tab,
+          groupId,
+          item.ribbonGroupResize
+        )
       };
       groups.set(groupId, group);
     }
     group.order = Math.min(group.order, groupOrder);
+    group.resizePolicy = {
+      ...group.resizePolicy,
+      ...Object.fromEntries(
+        Object.entries(item.ribbonGroupResize ?? {}).filter(
+          ([, value]) => value !== void 0
+        )
+      ),
+      states: normalizeResizeStates(
+        ((_a = item.ribbonGroupResize) == null ? void 0 : _a.states) ?? group.resizePolicy.states
+      )
+    };
     if (isLargeRibbonItem(item)) {
       group.largeItems.push(item);
     } else {
@@ -18592,6 +18715,154 @@ function buildRibbonGroups(items, tab, t) {
   });
   return Array.from(groups.values()).sort((a, b) => a.order - b.order);
 }
+function estimatedRibbonGroupWidths(group) {
+  const normalCount = group.rows[1].length + group.rows[2].length;
+  const largeCount = group.largeItems.length;
+  const full = Math.max(
+    group.resizePolicy.collapsedMinWidth,
+    largeCount * 72 + Math.max(group.rows[1].length, group.rows[2].length) * 30
+  );
+  return {
+    full,
+    compact: Math.max(
+      group.resizePolicy.compactMinWidth,
+      Math.ceil(full * (largeCount > 0 || normalCount > 6 ? 0.72 : 0.84))
+    ),
+    collapsed: group.resizePolicy.collapsedMinWidth
+  };
+}
+function widthForState(state, widths) {
+  return widths[state];
+}
+function widthForResolvedState(group, state, widths, allocatedWidths) {
+  return state === "compact" ? allocatedWidths.get(group.id) ?? widths.compact : widthForState(state, widths);
+}
+function snapCompactWidthToWholeItems(group, desiredWidth, minWidth, maxWidth) {
+  if (group.id !== "styles") {
+    return Math.min(maxWidth, Math.max(minWidth, desiredWidth));
+  }
+  const chromeWidth = STYLE_GALLERY_EXPAND_WIDTH + STYLE_GALLERY_BORDER_WIDTH;
+  if (maxWidth < STYLE_GALLERY_CARD_WIDTH + chromeWidth) {
+    return Math.min(maxWidth, Math.max(minWidth, desiredWidth));
+  }
+  const cardSlots = Math.max(
+    1,
+    Math.floor((desiredWidth - chromeWidth) / STYLE_GALLERY_CARD_WIDTH)
+  );
+  const snapped = cardSlots * STYLE_GALLERY_CARD_WIDTH + chromeWidth;
+  return Math.min(maxWidth, Math.max(minWidth, snapped));
+}
+function resolveResponsiveRibbonGroups(groups, availableWidth, measurements = {}) {
+  const states = /* @__PURE__ */ new Map();
+  const widths = /* @__PURE__ */ new Map();
+  const allocatedWidths = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const estimated = estimatedRibbonGroupWidths(group);
+    const measured = measurements[group.id] ?? {};
+    const full = Math.max(
+      estimated.full,
+      Math.ceil(measured.full ?? estimated.full)
+    );
+    widths.set(group.id, {
+      full,
+      compact: Math.min(
+        full,
+        Math.max(
+          group.resizePolicy.compactMinWidth,
+          Math.ceil(measured.compact ?? estimated.compact)
+        )
+      ),
+      collapsed: Math.min(
+        full,
+        Math.max(
+          group.resizePolicy.collapsedMinWidth,
+          Math.ceil(measured.collapsed ?? estimated.collapsed)
+        )
+      )
+    });
+    states.set(group.id, "full");
+  }
+  if (availableWidth !== null && Number.isFinite(availableWidth)) {
+    let currentWidth = groups.reduce(
+      (sum, group) => sum + widthForState("full", widths.get(group.id)),
+      0
+    );
+    const targetWidth = Math.max(0, availableWidth);
+    while (currentWidth > targetWidth) {
+      const candidates = groups.map((group) => {
+        const groupStates = group.resizePolicy.states;
+        const currentState = states.get(group.id) ?? "full";
+        const currentIndex = groupStates.indexOf(currentState);
+        const nextState = currentIndex >= 0 ? groupStates[currentIndex + 1] : void 0;
+        if (!nextState) return null;
+        const groupWidths2 = widths.get(group.id);
+        const currentWidth2 = widthForResolvedState(
+          group,
+          currentState,
+          groupWidths2,
+          allocatedWidths
+        );
+        const saving = currentWidth2 - widthForState(nextState, groupWidths2);
+        return saving > 0 ? { group, nextState, saving, currentState, currentIndex } : null;
+      }).filter(
+        (candidate) => Boolean(candidate)
+      ).sort(
+        (a, b) => a.currentIndex - b.currentIndex || b.group.order - a.group.order || a.group.resizePolicy.priority - b.group.resizePolicy.priority || b.saving - a.saving
+      );
+      const next = candidates[0];
+      if (!next) break;
+      const groupWidths = widths.get(next.group.id);
+      const currentStateWidth = widthForResolvedState(
+        next.group,
+        next.currentState,
+        groupWidths,
+        allocatedWidths
+      );
+      const deficit = currentWidth - targetWidth;
+      const nextStateWidth = next.nextState === "compact" ? snapCompactWidthToWholeItems(
+        next.group,
+        currentStateWidth - deficit,
+        groupWidths.compact,
+        groupWidths.full
+      ) : widthForState(next.nextState, groupWidths);
+      const actualSaving = currentStateWidth - nextStateWidth;
+      states.set(next.group.id, next.nextState);
+      if (next.nextState === "compact") {
+        allocatedWidths.set(next.group.id, nextStateWidth);
+      } else {
+        allocatedWidths.delete(next.group.id);
+      }
+      currentWidth -= actualSaving;
+    }
+    let slack = targetWidth - currentWidth;
+    if (slack > 0) {
+      for (const group of groups.filter((candidate) => states.get(candidate.id) === "compact").sort(
+        (a, b) => b.order - a.order || a.resizePolicy.priority - b.resizePolicy.priority
+      )) {
+        const groupWidths = widths.get(group.id);
+        const compactWidth = groupWidths.compact;
+        const maxExtra = groupWidths.full - compactWidth;
+        if (maxExtra <= 0) continue;
+        const allocated = snapCompactWidthToWholeItems(
+          group,
+          compactWidth + slack,
+          compactWidth,
+          groupWidths.full
+        );
+        const consumed = allocated - compactWidth;
+        if (consumed <= 0) continue;
+        allocatedWidths.set(group.id, allocated);
+        slack -= consumed;
+        if (slack <= 0) break;
+      }
+    }
+  }
+  return groups.map((group) => ({
+    ...group,
+    resizeState: states.get(group.id) ?? "full",
+    allocatedWidth: allocatedWidths.get(group.id)
+  }));
+}
 var _tmpl$$B = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-tabs role=tablist>`), _tmpl$2$p = /* @__PURE__ */ template(`<button type=button class=oasis-editor-ribbon-tab role=tab>`);
 function RibbonTabs(props) {
   const tabs = buildRibbonTabDefinitions(useI18n());
@@ -18665,67 +18936,183 @@ function RibbonRow(props) {
     return _el$;
   })();
 }
-var _tmpl$$z = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-large-items>`), _tmpl$2$o = /* @__PURE__ */ template(`<section class=oasis-editor-ribbon-group><div class=oasis-editor-ribbon-group-rows><div class=oasis-editor-ribbon-normal-rows></div></div><div class=oasis-editor-ribbon-group-label>`);
+var _tmpl$$z = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-large-items>`), _tmpl$2$o = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-group-rows><div class=oasis-editor-ribbon-normal-rows>`), _tmpl$3$g = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-group-label>`), _tmpl$4$c = /* @__PURE__ */ template(`<section class=oasis-editor-ribbon-group>`), _tmpl$5$a = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-collapsed-items>`), _tmpl$6$5 = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-group-rows>`);
+function groupItems(group) {
+  return [...group.largeItems, ...group.rows[1], ...group.rows[2]];
+}
+function groupStyle(group) {
+  return group.resizeState === "compact" && group.allocatedWidth ? {
+    "--oasis-ribbon-group-compact-width": `${group.allocatedWidth}px`
+  } : {};
+}
 function RibbonGroup(props) {
   return (() => {
-    var _el$ = _tmpl$2$o(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$2.nextSibling;
-    insert(_el$2, createComponent(Show, {
+    var _el$ = _tmpl$4$c();
+    insert(_el$, createComponent(Show, {
       get when() {
-        return props.group.largeItems.length > 0;
+        return props.group.resizeState !== "collapsed";
+      },
+      get fallback() {
+        return [(() => {
+          var _el$6 = _tmpl$6$5();
+          insert(_el$6, createComponent(Menu, {
+            get icon() {
+              return props.group.resizePolicy.collapsedIcon;
+            },
+            get label() {
+              return props.group.label;
+            },
+            get tooltip() {
+              return props.group.label;
+            },
+            get testId() {
+              return `editor-ribbon-group-${props.group.id}`;
+            },
+            ribbonSize: "large",
+            panelClass: "oasis-editor-ribbon-collapsed-menu",
+            get children() {
+              var _el$7 = _tmpl$5$a();
+              insert(_el$7, createComponent(For, {
+                get each() {
+                  return groupItems(props.group);
+                },
+                children: (item) => createComponent(ToolbarItemRenderer, {
+                  item,
+                  get api() {
+                    return props.api;
+                  }
+                })
+              }));
+              return _el$7;
+            }
+          }));
+          return _el$6;
+        })(), (() => {
+          var _el$8 = _tmpl$3$g();
+          insert(_el$8, () => props.group.label);
+          return _el$8;
+        })()];
       },
       get children() {
-        var _el$3 = _tmpl$$z();
-        insert(_el$3, createComponent(For, {
-          get each() {
-            return props.group.largeItems;
-          },
-          children: (item) => createComponent(ToolbarItemRenderer, {
-            item,
+        return [(() => {
+          var _el$2 = _tmpl$2$o(), _el$4 = _el$2.firstChild;
+          insert(_el$2, createComponent(Show, {
+            get when() {
+              return props.group.largeItems.length > 0;
+            },
+            get children() {
+              var _el$3 = _tmpl$$z();
+              insert(_el$3, createComponent(For, {
+                get each() {
+                  return props.group.largeItems;
+                },
+                children: (item) => createComponent(ToolbarItemRenderer, {
+                  item,
+                  get api() {
+                    return props.api;
+                  }
+                })
+              }));
+              return _el$3;
+            }
+          }), _el$4);
+          insert(_el$4, createComponent(RibbonRow, {
+            get items() {
+              return props.group.rows[1];
+            },
             get api() {
               return props.api;
             }
-          })
-        }));
-        return _el$3;
-      }
-    }), _el$4);
-    insert(_el$4, createComponent(RibbonRow, {
-      get items() {
-        return props.group.rows[1];
-      },
-      get api() {
-        return props.api;
-      }
-    }), null);
-    insert(_el$4, createComponent(RibbonRow, {
-      get items() {
-        return props.group.rows[2];
-      },
-      get api() {
-        return props.api;
+          }), null);
+          insert(_el$4, createComponent(RibbonRow, {
+            get items() {
+              return props.group.rows[2];
+            },
+            get api() {
+              return props.api;
+            }
+          }), null);
+          return _el$2;
+        })(), (() => {
+          var _el$5 = _tmpl$3$g();
+          insert(_el$5, () => props.group.label);
+          return _el$5;
+        })()];
       }
-    }), null);
-    insert(_el$5, () => props.group.label);
+    }));
     createRenderEffect((_p$) => {
-      var _v$ = props.group.id, _v$2 = props.group.label;
-      _v$ !== _p$.e && setAttribute(_el$, "data-ribbon-group", _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+      var _v$ = !!(props.group.resizeState === "compact"), _v$2 = !!(props.group.resizeState === "collapsed"), _v$3 = !!(props.group.resizeState === "compact" && props.group.resizePolicy.compactLabels === "hide"), _v$4 = props.group.id, _v$5 = props.group.resizeState, _v$6 = props.group.label, _v$7 = groupStyle(props.group);
+      _v$ !== _p$.e && _el$.classList.toggle("oasis-editor-ribbon-group-compact", _p$.e = _v$);
+      _v$2 !== _p$.t && _el$.classList.toggle("oasis-editor-ribbon-group-collapsed", _p$.t = _v$2);
+      _v$3 !== _p$.a && _el$.classList.toggle("oasis-editor-ribbon-group-compact-hide-labels", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$, "data-ribbon-group", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$, "data-ribbon-state", _p$.i = _v$5);
+      _v$6 !== _p$.n && setAttribute(_el$, "aria-label", _p$.n = _v$6);
+      _p$.s = style(_el$, _v$7, _p$.s);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
     });
     return _el$;
   })();
 }
 var _tmpl$$y = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-panel role=tabpanel data-testid=editor-ribbon-panel>`);
 function RibbonPanel(props) {
-  const groups = () => buildRibbonGroups(props.items(), props.activeTab(), props.api.t);
+  const [availableWidth, setAvailableWidth] = createSignal(null);
+  const [measurements, setMeasurements] = createSignal({});
+  let panelRef;
+  const groups = createMemo(() => buildRibbonGroups(props.items(), props.activeTab(), props.api.t));
+  const resolvedGroups = createMemo(() => resolveResponsiveRibbonGroups(groups(), availableWidth(), measurements()));
+  const measureGroups = () => {
+    var _a;
+    const panel = panelRef;
+    if (!panel) return;
+    const panelBox = panel.getBoundingClientRect();
+    const nextMeasurements = {
+      ...measurements()
+    };
+    for (const el of Array.from(panel.querySelectorAll("[data-ribbon-group]"))) {
+      const id = el.dataset.ribbonGroup;
+      if (!id || el.dataset.ribbonState !== "full") continue;
+      const width = Math.ceil(el.getBoundingClientRect().width);
+      if (width > 0) {
+        nextMeasurements[id] = {
+          ...nextMeasurements[id],
+          full: Math.max(((_a = nextMeasurements[id]) == null ? void 0 : _a.full) ?? 0, width)
+        };
+      }
+    }
+    setMeasurements(nextMeasurements);
+    setAvailableWidth(Math.floor(panelBox.width));
+  };
+  onMount(() => {
+    const panel = panelRef;
+    if (!panel) return;
+    const observer2 = new ResizeObserver(() => {
+      requestAnimationFrame(measureGroups);
+    });
+    observer2.observe(panel);
+    requestAnimationFrame(measureGroups);
+    onCleanup(() => observer2.disconnect());
+  });
+  createEffect(() => {
+    props.activeTab();
+    props.items();
+    requestAnimationFrame(measureGroups);
+  });
   return (() => {
     var _el$ = _tmpl$$y();
+    var _ref$ = panelRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : panelRef = _el$;
     insert(_el$, createComponent(For, {
       get each() {
-        return groups();
+        return resolvedGroups();
       },
       children: (group) => createComponent(RibbonGroup, {
         group,