oasis-editor 0.0.130 → 0.0.131

package/dist/{index-CX5iCo8O.js → index-BXo_oqOC.js}

@@ -2586,7 +2586,7 @@ function OasisBrandMark(props) {
     return _el$;
   })();
 }
-var _tmpl$$10 = /* @__PURE__ */ template(`<div class=oasis-editor-import-progress-label>`), _tmpl$2$C = /* @__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$q = /* @__PURE__ */ template(`<span class=oasis-editor-import-done-icon>Done`);
+var _tmpl$$10 = /* @__PURE__ */ template(`<div class=oasis-editor-import-progress-label>`), _tmpl$2$D = /* @__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$r = /* @__PURE__ */ template(`<span class=oasis-editor-import-done-icon>Done`);
 function OasisEditorLoading(props) {
   const t = useI18n();
   const variant = () => props.variant ?? "overlay";
@@ -2596,7 +2596,7 @@ function OasisEditorLoading(props) {
   };
   const isDone = () => (pct() ?? 0) >= 100;
   return (() => {
-    var _el$ = _tmpl$2$C(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild;
+    var _el$ = _tmpl$2$D(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild;
     insert(_el$2, createComponent(OasisBrandMark, {
       height: 40,
       "class": "oasis-editor-loading-mark"
@@ -2610,7 +2610,7 @@ function OasisEditorLoading(props) {
         var _el$6 = _tmpl$$10();
         insert(_el$6, (() => {
           var _c$ = memo(() => !!isDone());
-          return () => _c$() ? _tmpl$3$q() : `${pct()}%`;
+          return () => _c$() ? _tmpl$3$r() : `${pct()}%`;
         })());
         return _el$6;
       }
@@ -2661,7 +2661,7 @@ function OasisEditorAppLazy(props = {}) {
     onCleanup(() => {
       cancelled = true;
     });
-    import("./OasisEditorApp-BQvsqccA.js").then((m) => {
+    import("./OasisEditorApp-Dn2I2b-M.js").then((m) => {
       cancelled = true;
       setProgress(1);
       setTimeout(() => setApp(() => m.OasisEditorApp), 180);
@@ -5248,9 +5248,9 @@ function mount(target, props = {}) {
     unmount: () => client.dispose()
   });
 }
-var _tmpl$$$ = /* @__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$B = /* @__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$p = /* @__PURE__ */ template(`<i>`);
+var _tmpl$$$ = /* @__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$C = /* @__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$q = /* @__PURE__ */ template(`<i>`);
 const FootnoteIcon = () => _tmpl$$$();
-const SpecialIndentFirstLineIcon = () => _tmpl$2$B();
+const SpecialIndentFirstLineIcon = () => _tmpl$2$C();
 const CUSTOM_ICONS = {
   footnote: FootnoteIcon,
   specialIndentFirstLine: SpecialIndentFirstLineIcon
@@ -5265,7 +5265,7 @@ function ToolIcon(props) {
     },
     get fallback() {
       return (() => {
-        var _el$3 = _tmpl$3$p();
+        var _el$3 = _tmpl$3$q();
         createRenderEffect(() => setAttribute(_el$3, "data-lucide", props.name));
         return _el$3;
       })();
@@ -5338,7 +5338,7 @@ function Text$1(props) {
     }
   }));
 }
-var _tmpl$$Z = /* @__PURE__ */ template(`<div class=oasis-menubar role=menubar>`), _tmpl$2$A = /* @__PURE__ */ template(`<div class=oasis-menubar-dropdown role=menu>`), _tmpl$3$o = /* @__PURE__ */ template(`<div class=oasis-menubar-menu>`), _tmpl$4$j = /* @__PURE__ */ template(`<div class=oasis-menubar-separator role=separator>`), _tmpl$5$d = /* @__PURE__ */ template(`<i class=oasis-menubar-submenu-icon data-lucide=chevron-right>`), _tmpl$6$8 = /* @__PURE__ */ template(`<div class=oasis-menubar-submenu role=menu>`);
+var _tmpl$$Z = /* @__PURE__ */ template(`<div class=oasis-menubar role=menubar>`), _tmpl$2$B = /* @__PURE__ */ template(`<div class=oasis-menubar-dropdown role=menu>`), _tmpl$3$p = /* @__PURE__ */ template(`<div class=oasis-menubar-menu>`), _tmpl$4$j = /* @__PURE__ */ template(`<div class=oasis-menubar-separator role=separator>`), _tmpl$5$d = /* @__PURE__ */ template(`<i class=oasis-menubar-submenu-icon data-lucide=chevron-right>`), _tmpl$6$9 = /* @__PURE__ */ template(`<div class=oasis-menubar-submenu role=menu>`);
 function Menubar(props) {
   const t = useI18n();
   const [activeMenu, setActiveMenu] = createSignal(null);
@@ -5412,7 +5412,7 @@ function Menubar(props) {
         return topLevelItems();
       },
       children: (topLevel) => (() => {
-        var _el$2 = _tmpl$3$o();
+        var _el$2 = _tmpl$3$p();
         _el$2.addEventListener("mouseenter", () => {
           if (activeMenu() && activeMenu() !== topLevel.id) {
             setActiveMenu(topLevel.id);
@@ -5447,7 +5447,7 @@ function Menubar(props) {
             return activeMenu() === topLevel.id;
           },
           get children() {
-            var _el$3 = _tmpl$2$A();
+            var _el$3 = _tmpl$2$B();
             insert(_el$3, createComponent(For, {
               get each() {
                 return topLevel.children;
@@ -5561,7 +5561,7 @@ function MenuNode(props) {
           return showSub() && hasChildren;
         },
         get children() {
-          var _el$6 = _tmpl$6$8();
+          var _el$6 = _tmpl$6$9();
           insert(_el$6, createComponent(For, {
             get each() {
               return node.children;
@@ -5678,7 +5678,7 @@ function getCaretRectFromSnapshot(snapshot, position2, paragraphOffset) {
   );
   return rectFromBox(slot.left, slot.top, 1, slot.height || line.height);
 }
-var _tmpl$$X = /* @__PURE__ */ template(`<span class=oasis-outline-title>`), _tmpl$2$z = /* @__PURE__ */ template(`<div class=oasis-outline-list>`), _tmpl$3$n = /* @__PURE__ */ template(`<div class=oasis-outline-panel><div class=oasis-outline-header><button class=oasis-outline-toggle><i>`), _tmpl$4$i = /* @__PURE__ */ template(`<div class=oasis-outline-empty>`), _tmpl$5$c = /* @__PURE__ */ template(`<div class=oasis-outline-item>`);
+var _tmpl$$X = /* @__PURE__ */ template(`<span class=oasis-outline-title>`), _tmpl$2$A = /* @__PURE__ */ template(`<div class=oasis-outline-list>`), _tmpl$3$o = /* @__PURE__ */ template(`<div class=oasis-outline-panel><div class=oasis-outline-header><button class=oasis-outline-toggle><i>`), _tmpl$4$i = /* @__PURE__ */ template(`<div class=oasis-outline-empty>`), _tmpl$5$c = /* @__PURE__ */ template(`<div class=oasis-outline-item>`);
 function OutlinePanel(props) {
   const t = useI18n();
   const [collapsed, setCollapsed] = createSignal(props.defaultCollapsed ?? false);
@@ -5749,7 +5749,7 @@ function OutlinePanel(props) {
     }
   });
   return (() => {
-    var _el$ = _tmpl$3$n(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.firstChild;
+    var _el$ = _tmpl$3$o(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.firstChild;
     insert(_el$2, createComponent(Show, {
       get when() {
         return !collapsed();
@@ -5766,7 +5766,7 @@ function OutlinePanel(props) {
         return !collapsed();
       },
       get children() {
-        var _el$6 = _tmpl$2$z();
+        var _el$6 = _tmpl$2$A();
         insert(_el$6, createComponent(Show, {
           get when() {
             return items().length > 0;
@@ -5823,7 +5823,7 @@ function OutlinePanel(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$W = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-overflow-manager style="display:flex;align-items:center;flex:1 1 0%;min-width:0;position:relative;margin-right:8px"><button type=button class="oasis-editor-tool-button oasis-editor-tool-button-dropdown oasis-editor-toolbar-more-measure"aria-hidden=true tabindex=-1 style=position:absolute;visibility:hidden;pointer-events:none;right:0><i data-lucide=ellipsis></i></button><div style="display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;overflow:hidden"></div><div style=flex-shrink:0;padding-left:8px;padding-right:16px;align-items:center><button type=button class="oasis-editor-tool-button oasis-editor-tool-button-dropdown"data-testid=editor-toolbar-overflow-dropdown><i data-lucide=ellipsis></i></button></div><div class="oasis-editor-toolbar-overflow-dropdown-menu oasis-editor-toolbar-overflow-menu"style="flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:8px;background:var(--oasis-paper);border:1px solid var(--oasis-toolbar-border);border-radius:var(--oasis-radius);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);max-width:calc(100vw - 16px);overflow-x:hidden;overflow-y:auto">`), _tmpl$2$y = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-item-wrapper style=display:flex;align-items:center;flex-shrink:0>`);
+var _tmpl$$W = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-overflow-manager style="display:flex;align-items:center;flex:1 1 0%;min-width:0;position:relative;margin-right:8px"><button type=button class="oasis-editor-tool-button oasis-editor-tool-button-dropdown oasis-editor-toolbar-more-measure"aria-hidden=true tabindex=-1 style=position:absolute;visibility:hidden;pointer-events:none;right:0><i data-lucide=ellipsis></i></button><div style="display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;overflow:hidden"></div><div style=flex-shrink:0;padding-left:8px;padding-right:16px;align-items:center><button type=button class="oasis-editor-tool-button oasis-editor-tool-button-dropdown"data-testid=editor-toolbar-overflow-dropdown><i data-lucide=ellipsis></i></button></div><div class="oasis-editor-toolbar-overflow-dropdown-menu oasis-editor-toolbar-overflow-menu"style="flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px;padding:8px;background:var(--oasis-paper);border:1px solid var(--oasis-toolbar-border);border-radius:var(--oasis-radius);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);max-width:calc(100vw - 16px);overflow-x:hidden;overflow-y:auto">`), _tmpl$2$z = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-item-wrapper style=display:flex;align-items:center;flex-shrink:0>`);
 function ToolbarOverflowManager(props) {
   const t = useI18n();
   const [overflowCount, setOverflowCount] = createSignal(0);
@@ -5979,7 +5979,7 @@ function ToolbarOverflowManager(props) {
         return items();
       },
       children: (item) => (() => {
-        var _el$7 = _tmpl$2$y();
+        var _el$7 = _tmpl$2$z();
         insert(_el$7, item);
         return _el$7;
       })()
@@ -6055,12 +6055,12 @@ function resolveLabel(item, api) {
   if (item.labelKey) return api.t(item.labelKey);
   return void 0;
 }
-var _tmpl$$V = /* @__PURE__ */ template(`<span>`), _tmpl$2$x = /* @__PURE__ */ template(`<button type=button>`);
+var _tmpl$$V = /* @__PURE__ */ template(`<span>`), _tmpl$2$y = /* @__PURE__ */ template(`<button type=button>`);
 function Button$1(props) {
   const [local, others] = splitProps(props, ["icon", "label", "active", "tooltip", "wide", "ribbonSize", "aria-label", "class", "classList"]);
   const ariaLabel = () => local["aria-label"] || local.tooltip || local.label || "";
   return (() => {
-    var _el$ = _tmpl$2$x();
+    var _el$ = _tmpl$2$y();
     spread(_el$, mergeProps({
       get ["class"]() {
         return `oasis-editor-tool-button ${local.class || ""}`;
@@ -6248,12 +6248,12 @@ function Popover(props) {
     }
   })];
 }
-var _tmpl$$T = /* @__PURE__ */ template(`<div>`), _tmpl$2$w = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-dropdown>`), _tmpl$3$m = /* @__PURE__ */ template(`<i>`), _tmpl$4$h = /* @__PURE__ */ template(`<span class=oasis-editor-tool-button-label>`), _tmpl$5$b = /* @__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>`);
+var _tmpl$$T = /* @__PURE__ */ template(`<div>`), _tmpl$2$x = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-dropdown>`), _tmpl$3$n = /* @__PURE__ */ template(`<i>`), _tmpl$4$h = /* @__PURE__ */ template(`<span class=oasis-editor-tool-button-label>`), _tmpl$5$b = /* @__PURE__ */ template(`<i data-lucide=chevron-down class=oasis-editor-dropdown-chevron>`), _tmpl$6$8 = /* @__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 || "";
   return (() => {
-    var _el$ = _tmpl$2$w();
+    var _el$ = _tmpl$2$x();
     insert(_el$, createComponent(Popover, {
       get open() {
         return open();
@@ -6268,7 +6268,7 @@ function Menu(props) {
       },
       onPanelMouseLeave: void 0,
       trigger: (api) => (() => {
-        var _el$3 = _tmpl$6$7();
+        var _el$3 = _tmpl$6$8();
         _el$3.$$click = () => api.toggle();
         use((el) => api.ref(el), _el$3);
         insert(_el$3, createComponent(Show, {
@@ -6276,7 +6276,7 @@ function Menu(props) {
             return props.icon;
           },
           get children() {
-            var _el$4 = _tmpl$3$m();
+            var _el$4 = _tmpl$3$n();
             createRenderEffect(() => setAttribute(_el$4, "data-lucide", props.icon));
             return _el$4;
           }
@@ -6336,10 +6336,10 @@ function Menu(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$S = /* @__PURE__ */ template(`<select>`);
+var _tmpl$$S = /* @__PURE__ */ template(`<select>`), _tmpl$2$w = /* @__PURE__ */ template(`<span class=oasis-editor-tool-select-ribbon-large-label>`), _tmpl$3$m = /* @__PURE__ */ template(`<div class=oasis-editor-tool-select-ribbon-large-wrap>`);
 function Select(props) {
   let selectRef;
-  const [local, others] = splitProps(props, ["wide", "small", "class", "tooltip", "aria-label", "value"]);
+  const [local, others] = splitProps(props, ["wide", "small", "class", "tooltip", "aria-label", "value", "label", "ribbonSize"]);
   const ariaLabel = () => local["aria-label"] || local.tooltip || "";
   createEffect(() => {
     const nextValue = local.value;
@@ -6351,7 +6351,7 @@ function Select(props) {
       selectRef.value = serialized;
     }
   });
-  return (() => {
+  const select = () => (() => {
     var _el$ = _tmpl$$S();
     var _ref$ = selectRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : selectRef = _el$;
@@ -6362,7 +6362,8 @@ function Select(props) {
       get classList() {
         return {
           "oasis-editor-tool-select-wide": local.wide,
-          "oasis-editor-tool-select-small": local.small
+          "oasis-editor-tool-select-small": local.small,
+          "oasis-editor-tool-select-ribbon-large": local.ribbonSize === "large"
         };
       },
       get title() {
@@ -6378,6 +6379,29 @@ function Select(props) {
     insert(_el$, () => others.children);
     return _el$;
   })();
+  return createComponent(Show, {
+    get when() {
+      return local.ribbonSize === "large";
+    },
+    get fallback() {
+      return select();
+    },
+    get children() {
+      var _el$2 = _tmpl$3$m();
+      insert(_el$2, createComponent(Show, {
+        get when() {
+          return local.label;
+        },
+        get children() {
+          var _el$3 = _tmpl$2$w();
+          insert(_el$3, () => local.label);
+          return _el$3;
+        }
+      }), null);
+      insert(_el$2, select, null);
+      return _el$2;
+    }
+  });
 }
 var _tmpl$$R = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-separator>`);
 function Separator(props) {
@@ -6412,17 +6436,18 @@ function SplitButton(props) {
       insert(_el$2, () => props.mainContent);
       _el$3.$$click = () => api.toggle();
       createRenderEffect((_p$) => {
-        var _v$ = props.rootClass ?? "oasis-editor-color-split", _v$2 = !!(props.rootActive ?? api.open), _v$3 = props.tooltip, _v$4 = props.mainTestId, _v$5 = props.mainAriaLabel ?? props.tooltip, _v$6 = props.mainPressed, _v$7 = !!api.open, _v$8 = props.menuTestId, _v$9 = props.menuAriaLabel ?? `${props.tooltip ?? ""} menu`, _v$0 = api.open;
+        var _v$ = props.rootClass ?? "oasis-editor-color-split", _v$2 = !!(props.rootActive ?? api.open), _v$3 = !!(props.ribbonSize === "large"), _v$4 = props.tooltip, _v$5 = props.mainTestId, _v$6 = props.mainAriaLabel ?? props.tooltip, _v$7 = props.mainPressed, _v$8 = !!api.open, _v$9 = props.menuTestId, _v$0 = props.menuAriaLabel ?? `${props.tooltip ?? ""} menu`, _v$1 = api.open;
         _v$ !== _p$.e && className(_el$, _p$.e = _v$);
         _v$2 !== _p$.t && _el$.classList.toggle("oasis-editor-color-split-active", _p$.t = _v$2);
-        _v$3 !== _p$.a && setAttribute(_el$, "title", _p$.a = _v$3);
-        _v$4 !== _p$.o && setAttribute(_el$2, "data-testid", _p$.o = _v$4);
-        _v$5 !== _p$.i && setAttribute(_el$2, "aria-label", _p$.i = _v$5);
-        _v$6 !== _p$.n && setAttribute(_el$2, "aria-pressed", _p$.n = _v$6);
-        _v$7 !== _p$.s && _el$3.classList.toggle("oasis-editor-color-split-open", _p$.s = _v$7);
-        _v$8 !== _p$.h && setAttribute(_el$3, "data-testid", _p$.h = _v$8);
-        _v$9 !== _p$.r && setAttribute(_el$3, "aria-label", _p$.r = _v$9);
-        _v$0 !== _p$.d && setAttribute(_el$3, "aria-expanded", _p$.d = _v$0);
+        _v$3 !== _p$.a && _el$.classList.toggle("oasis-editor-color-split-ribbon-large", _p$.a = _v$3);
+        _v$4 !== _p$.o && setAttribute(_el$, "title", _p$.o = _v$4);
+        _v$5 !== _p$.i && setAttribute(_el$2, "data-testid", _p$.i = _v$5);
+        _v$6 !== _p$.n && setAttribute(_el$2, "aria-label", _p$.n = _v$6);
+        _v$7 !== _p$.s && setAttribute(_el$2, "aria-pressed", _p$.s = _v$7);
+        _v$8 !== _p$.h && _el$3.classList.toggle("oasis-editor-color-split-open", _p$.h = _v$8);
+        _v$9 !== _p$.r && setAttribute(_el$3, "data-testid", _p$.r = _v$9);
+        _v$0 !== _p$.d && setAttribute(_el$3, "aria-label", _p$.d = _v$0);
+        _v$1 !== _p$.l && setAttribute(_el$3, "aria-expanded", _p$.l = _v$1);
         return _p$;
       }, {
         e: void 0,
@@ -6434,7 +6459,8 @@ function SplitButton(props) {
         s: void 0,
         h: void 0,
         r: void 0,
-        d: void 0
+        d: void 0,
+        l: void 0
       });
       return _el$;
     })(),
@@ -6444,7 +6470,7 @@ function SplitButton(props) {
   });
 }
 delegateEvents(["click"]);
-var _tmpl$$P = /* @__PURE__ */ template(`<i data-lucide=type>`), _tmpl$2$v = /* @__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$l = /* @__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$g = /* @__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$a = /* @__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>`);
+var _tmpl$$P = /* @__PURE__ */ template(`<i data-lucide=type>`), _tmpl$2$v = /* @__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$l = /* @__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$g = /* @__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$a = /* @__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$7 = /* @__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(`<span>`), _tmpl$9 = /* @__PURE__ */ template(`<i data-lucide=slash>`), _tmpl$0 = /* @__PURE__ */ template(`<div class=oasis-editor-color-theme-column>`), _tmpl$1 = /* @__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);
@@ -6470,6 +6496,9 @@ function ColorPicker(props) {
     get tooltip() {
       return props.tooltip;
     },
+    get ribbonSize() {
+      return props.ribbonSize;
+    },
     panelClass: "oasis-editor-color-menu",
     panelRole: "menu",
     onPanelMouseLeave: () => setPreviewColor(null),
@@ -6487,7 +6516,7 @@ function ColorPicker(props) {
       return `${props.tooltip} menu`;
     },
     get mainContent() {
-      return (() => {
+      return [(() => {
         var _el$13 = _tmpl$7$2(), _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling;
         createRenderEffect((_p$) => {
           var _v$3 = props.icon, _v$4 = !displayColor(), _v$5 = displayColor() ?? void 0;
@@ -6501,7 +6530,16 @@ function ColorPicker(props) {
           a: void 0
         });
         return _el$13;
-      })();
+      })(), createComponent(Show, {
+        get when() {
+          return props.label;
+        },
+        get children() {
+          var _el$16 = _tmpl$8$1();
+          insert(_el$16, () => props.label);
+          return _el$16;
+        }
+      })];
     },
     get children() {
       return [createComponent(Show, {
@@ -6516,7 +6554,7 @@ function ColorPicker(props) {
               return props.kind === "color";
             },
             get fallback() {
-              return _tmpl$8$1();
+              return _tmpl$9();
             },
             get children() {
               return _tmpl$$P();
@@ -6534,24 +6572,24 @@ function ColorPicker(props) {
             return props.palette.themeColors;
           },
           children: (theme) => (() => {
-            var _el$17 = _tmpl$9();
-            insert(_el$17, createComponent(For, {
+            var _el$18 = _tmpl$0();
+            insert(_el$18, createComponent(For, {
               get each() {
                 return theme.values;
               },
               children: (color) => (() => {
-                var _el$18 = _tmpl$0();
-                _el$18.$$click = () => applyColor(color);
-                _el$18.addEventListener("blur", () => setPreviewColor(null));
-                _el$18.addEventListener("focus", () => setPreviewColor(color));
-                _el$18.addEventListener("mouseenter", () => setPreviewColor(color));
-                setStyleProperty(_el$18, "background-color", color);
+                var _el$19 = _tmpl$1();
+                _el$19.$$click = () => applyColor(color);
+                _el$19.addEventListener("blur", () => setPreviewColor(null));
+                _el$19.addEventListener("focus", () => setPreviewColor(color));
+                _el$19.addEventListener("mouseenter", () => setPreviewColor(color));
+                setStyleProperty(_el$19, "background-color", color);
                 createRenderEffect((_p$) => {
                   var _v$6 = !!(activeColor() === normalizeColor(color)), _v$7 = `${theme.name} ${color}`, _v$8 = `${theme.name} ${color}`, _v$9 = `${props.testId}-theme-swatch-${color.replace("#", "")}`;
-                  _v$6 !== _p$.e && _el$18.classList.toggle("oasis-editor-color-swatch-active", _p$.e = _v$6);
-                  _v$7 !== _p$.t && setAttribute(_el$18, "title", _p$.t = _v$7);
-                  _v$8 !== _p$.a && setAttribute(_el$18, "aria-label", _p$.a = _v$8);
-                  _v$9 !== _p$.o && setAttribute(_el$18, "data-testid", _p$.o = _v$9);
+                  _v$6 !== _p$.e && _el$19.classList.toggle("oasis-editor-color-swatch-active", _p$.e = _v$6);
+                  _v$7 !== _p$.t && setAttribute(_el$19, "title", _p$.t = _v$7);
+                  _v$8 !== _p$.a && setAttribute(_el$19, "aria-label", _p$.a = _v$8);
+                  _v$9 !== _p$.o && setAttribute(_el$19, "data-testid", _p$.o = _v$9);
                   return _p$;
                 }, {
                   e: void 0,
@@ -6559,10 +6597,10 @@ function ColorPicker(props) {
                   a: void 0,
                   o: void 0
                 });
-                return _el$18;
+                return _el$19;
               })()
             }));
-            return _el$17;
+            return _el$18;
           })()
         }));
         return _el$5;
@@ -6574,18 +6612,18 @@ function ColorPicker(props) {
             return props.palette.standardColors;
           },
           children: (swatch) => (() => {
-            var _el$19 = _tmpl$0();
-            _el$19.$$click = () => applyColor(swatch.value);
-            _el$19.addEventListener("blur", () => setPreviewColor(null));
-            _el$19.addEventListener("focus", () => setPreviewColor(swatch.value));
-            _el$19.addEventListener("mouseenter", () => setPreviewColor(swatch.value));
+            var _el$20 = _tmpl$1();
+            _el$20.$$click = () => applyColor(swatch.value);
+            _el$20.addEventListener("blur", () => setPreviewColor(null));
+            _el$20.addEventListener("focus", () => setPreviewColor(swatch.value));
+            _el$20.addEventListener("mouseenter", () => setPreviewColor(swatch.value));
             createRenderEffect((_p$) => {
               var _v$0 = !!(activeColor() === normalizeColor(swatch.value)), _v$1 = swatch.value, _v$10 = swatch.name, _v$11 = swatch.name, _v$12 = `${props.testId}-standard-swatch-${swatch.value.replace("#", "")}`;
-              _v$0 !== _p$.e && _el$19.classList.toggle("oasis-editor-color-swatch-active", _p$.e = _v$0);
-              _v$1 !== _p$.t && setStyleProperty(_el$19, "background-color", _p$.t = _v$1);
-              _v$10 !== _p$.a && setAttribute(_el$19, "title", _p$.a = _v$10);
-              _v$11 !== _p$.o && setAttribute(_el$19, "aria-label", _p$.o = _v$11);
-              _v$12 !== _p$.i && setAttribute(_el$19, "data-testid", _p$.i = _v$12);
+              _v$0 !== _p$.e && _el$20.classList.toggle("oasis-editor-color-swatch-active", _p$.e = _v$0);
+              _v$1 !== _p$.t && setStyleProperty(_el$20, "background-color", _p$.t = _v$1);
+              _v$10 !== _p$.a && setAttribute(_el$20, "title", _p$.a = _v$10);
+              _v$11 !== _p$.o && setAttribute(_el$20, "aria-label", _p$.o = _v$11);
+              _v$12 !== _p$.i && setAttribute(_el$20, "data-testid", _p$.i = _v$12);
               return _p$;
             }, {
               e: void 0,
@@ -6594,7 +6632,7 @@ function ColorPicker(props) {
               o: void 0,
               i: void 0
             });
-            return _el$19;
+            return _el$20;
           })()
         }));
         return _el$8;
@@ -6610,7 +6648,7 @@ function ColorPicker(props) {
             createRenderEffect(() => setAttribute(_el$1, "data-testid", `${props.testId}-more-colors`));
             return _el$1;
           })(), (() => {
-            var _el$12 = _tmpl$6$6();
+            var _el$12 = _tmpl$6$7();
             _el$12.$$input = (event) => applyColor(event.currentTarget.value);
             var _ref$ = customColorInputRef;
             typeof _ref$ === "function" ? use(_ref$, _el$12) : customColorInputRef = _el$12;
@@ -6632,7 +6670,7 @@ function ColorPicker(props) {
   });
 }
 delegateEvents(["click", "input"]);
-var _tmpl$$O = /* @__PURE__ */ template(`<div class=oasis-editor-table-grid-picker-status>`), _tmpl$2$u = /* @__PURE__ */ template(`<div class=oasis-editor-table-grid-picker-grid>`), _tmpl$3$k = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-dropdown>`), _tmpl$4$f = /* @__PURE__ */ template(`<button type=button class=oasis-editor-tool-button><i>`), _tmpl$5$9 = /* @__PURE__ */ template(`<button type=button class=oasis-editor-table-grid-picker-cell>`);
+var _tmpl$$O = /* @__PURE__ */ template(`<div class=oasis-editor-table-grid-picker-status>`), _tmpl$2$u = /* @__PURE__ */ template(`<div class=oasis-editor-table-grid-picker-grid>`), _tmpl$3$k = /* @__PURE__ */ template(`<div class=oasis-editor-toolbar-dropdown>`), _tmpl$4$f = /* @__PURE__ */ template(`<span>`), _tmpl$5$9 = /* @__PURE__ */ template(`<button type=button class=oasis-editor-tool-button><i>`), _tmpl$6$6 = /* @__PURE__ */ template(`<button type=button class=oasis-editor-table-grid-picker-cell>`);
 function GridPicker(props) {
   const t = useI18n();
   const [isOpen, setIsOpen] = createSignal(false);
@@ -6719,23 +6757,35 @@ function GridPicker(props) {
         col: 0
       }),
       trigger: (api) => (() => {
-        var _el$4 = _tmpl$4$f(), _el$5 = _el$4.firstChild;
+        var _el$4 = _tmpl$5$9(), _el$5 = _el$4.firstChild;
         _el$4.$$click = () => api.toggle();
         use((el) => api.ref(el), _el$4);
+        insert(_el$4, createComponent(Show, {
+          get when() {
+            return props.label;
+          },
+          get children() {
+            var _el$6 = _tmpl$4$f();
+            insert(_el$6, () => props.label);
+            return _el$6;
+          }
+        }), null);
         createRenderEffect((_p$) => {
-          var _v$3 = !!api.open, _v$4 = tooltip(), _v$5 = tooltip(), _v$6 = props.testId, _v$7 = icon();
+          var _v$3 = !!api.open, _v$4 = !!(props.ribbonSize === "large"), _v$5 = tooltip(), _v$6 = tooltip(), _v$7 = props.testId, _v$8 = icon();
           _v$3 !== _p$.e && _el$4.classList.toggle("oasis-editor-tool-button-active", _p$.e = _v$3);
-          _v$4 !== _p$.t && setAttribute(_el$4, "title", _p$.t = _v$4);
-          _v$5 !== _p$.a && setAttribute(_el$4, "aria-label", _p$.a = _v$5);
-          _v$6 !== _p$.o && setAttribute(_el$4, "data-testid", _p$.o = _v$6);
-          _v$7 !== _p$.i && setAttribute(_el$5, "data-lucide", _p$.i = _v$7);
+          _v$4 !== _p$.t && _el$4.classList.toggle("oasis-editor-tool-button-ribbon-large", _p$.t = _v$4);
+          _v$5 !== _p$.a && setAttribute(_el$4, "title", _p$.a = _v$5);
+          _v$6 !== _p$.o && setAttribute(_el$4, "aria-label", _p$.o = _v$6);
+          _v$7 !== _p$.i && setAttribute(_el$4, "data-testid", _p$.i = _v$7);
+          _v$8 !== _p$.n && setAttribute(_el$5, "data-lucide", _p$.n = _v$8);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0,
           o: void 0,
-          i: void 0
+          i: void 0,
+          n: void 0
         });
         return _el$4;
       })(),
@@ -6755,17 +6805,17 @@ function GridPicker(props) {
                 return cols();
               },
               children: (c) => (() => {
-                var _el$6 = _tmpl$5$9();
-                _el$6.$$click = () => selectGridSize(r, c);
-                _el$6.$$mousedown = (event) => event.preventDefault();
-                _el$6.addEventListener("mouseenter", () => setHover({
+                var _el$7 = _tmpl$6$6();
+                _el$7.$$click = () => selectGridSize(r, c);
+                _el$7.$$mousedown = (event) => event.preventDefault();
+                _el$7.addEventListener("mouseenter", () => setHover({
                   row: r,
                   col: c
                 }));
-                setAttribute(_el$6, "data-testid", `editor-toolbar-table-grid-${r}x${c}`);
-                setAttribute(_el$6, "aria-label", `${r} × ${c}`);
-                createRenderEffect(() => _el$6.classList.toggle("oasis-editor-table-grid-picker-cell-active", !!(r <= hover().row && c <= hover().col)));
-                return _el$6;
+                setAttribute(_el$7, "data-testid", `editor-toolbar-table-grid-${r}x${c}`);
+                setAttribute(_el$7, "aria-label", `${r} × ${c}`);
+                createRenderEffect(() => _el$7.classList.toggle("oasis-editor-table-grid-picker-cell-active", !!(r <= hover().row && c <= hover().col)));
+                return _el$7;
               })()
             })
           }));
@@ -7188,6 +7238,12 @@ function RenderSelect(props) {
     get tooltip() {
       return resolveTooltip(props.item, props.api);
     },
+    get label() {
+      return resolveLabel(props.item, props.api);
+    },
+    get ribbonSize() {
+      return props.item.ribbonSize;
+    },
     onChange,
     get children() {
       return [createComponent(Show, {
@@ -7249,6 +7305,12 @@ function RenderColorPicker(props) {
     get tooltip() {
       return resolveTooltip(props.item, props.api) ?? "";
     },
+    get label() {
+      return resolveLabel(props.item, props.api);
+    },
+    get ribbonSize() {
+      return props.item.ribbonSize;
+    },
     get testId() {
       return props.item.testId ?? props.item.id;
     },
@@ -7290,6 +7352,12 @@ function RenderGridPicker(props) {
     get icon() {
       return props.item.iconName;
     },
+    get label() {
+      return resolveLabel(props.item, props.api);
+    },
+    get ribbonSize() {
+      return props.item.ribbonSize;
+    },
     get maxRows() {
       return props.item.maxRows;
     },
@@ -43839,6 +43907,8 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-insert-image",
     iconName: "image",
     tooltipKey: "toolbar.image",
+    labelKey: "toolbar.image",
+    ribbonSize: "large",
     command: "insertImage"
   });
   items.push({
@@ -43847,6 +43917,8 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-insert-shape",
     iconName: "shapes",
     tooltipKey: "toolbar.shapes",
+    labelKey: "toolbar.shapes",
+    ribbonSize: "large",
     panelClass: "oasis-editor-shape-gallery-panel",
     content: {
       kind: "custom",
@@ -43858,6 +43930,8 @@ function createDefaultToolbarPreset(t) {
     id: "editor-toolbar-insert-table",
     testId: "editor-toolbar-insert-table",
     tooltipKey: "toolbar.table",
+    labelKey: "toolbar.table",
+    ribbonSize: "large",
     command: "insertTable"
   });
   items.push({
@@ -43866,7 +43940,9 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-link",
     iconName: "link",
     command: "link",
-    tooltip: `${t("toolbar.link")} (${mod}+K)`
+    tooltip: `${t("toolbar.link")} (${mod}+K)`,
+    labelKey: "toolbar.link",
+    ribbonSize: "large"
   });
   items.push({
     type: "button",
@@ -43874,7 +43950,9 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-unlink",
     iconName: "unlink",
     command: "unlink",
-    tooltipKey: "toolbar.unlink"
+    tooltipKey: "toolbar.unlink",
+    labelKey: "toolbar.unlink",
+    ribbonSize: "large"
   });
   items.push({
     type: "button",
@@ -43882,7 +43960,9 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-footnote",
     iconName: "footnote",
     command: "insertFootnote",
-    tooltip: `${t("toolbar.footnote")} (${mod}+Alt+F)`
+    tooltip: `${t("toolbar.footnote")} (${mod}+Alt+F)`,
+    labelKey: "toolbar.footnote",
+    ribbonSize: "large"
   });
   items.push({
     type: "button",
@@ -43890,6 +43970,8 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-image-alt",
     iconName: "file-text",
     tooltipKey: "toolbar.alt",
+    labelKey: "toolbar.alt",
+    ribbonSize: "large",
     command: "editImageAlt",
     isVisible: (api) => api.commands.state("editImageAlt").isEnabled
   });
@@ -43899,6 +43981,8 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-image-caption",
     iconName: "subtitles",
     tooltipKey: "toolbar.imageCaption",
+    labelKey: "toolbar.imageCaption",
+    ribbonSize: "large",
     command: "insertImageCaption",
     isVisible: (api) => api.commands.state("insertImageCaption").isEnabled
   });
@@ -44001,6 +44085,7 @@ function createDefaultToolbarPreset(t) {
   items.push({
     type: "custom",
     id: "editor-toolbar-metrics",
+    ribbonSize: "large",
     render: (api) => MetricGroup({ api })
   });
   items.push({ type: "separator", id: "sep-metrics" });
@@ -44011,7 +44096,9 @@ function createDefaultToolbarPreset(t) {
       testId: spec.id,
       iconName: spec.icon,
       command: spec.command,
-      tooltipKey: spec.tooltipKey
+      tooltipKey: spec.tooltipKey,
+      labelKey: spec.tooltipKey,
+      ribbonSize: "large"
     });
   }
   for (const spec of TABLE_DESIGN_TOGGLES) {
@@ -44021,7 +44108,8 @@ function createDefaultToolbarPreset(t) {
       testId: spec.id,
       command: spec.command,
       labelKey: spec.labelKey,
-      tooltipKey: spec.labelKey
+      tooltipKey: spec.labelKey,
+      ribbonSize: "large"
     });
   }
   items.push({
@@ -44031,7 +44119,9 @@ function createDefaultToolbarPreset(t) {
     kind: "shading",
     command: "tableCellShading",
     defaultValue: "#f1f5f9",
-    tooltipKey: "table.cellColor"
+    tooltipKey: "table.cellColor",
+    labelKey: "table.cellColor",
+    ribbonSize: "large"
   });
   items.push({
     type: "button",
@@ -44039,7 +44129,9 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-tbl-borders",
     iconName: "frame",
     command: "tableCellBorders",
-    tooltipKey: "table.applyBorders"
+    tooltipKey: "table.applyBorders",
+    labelKey: "table.applyBorders",
+    ribbonSize: "large"
   });
   items.push({
     type: "button",
@@ -44047,13 +44139,17 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-tbl-no-borders",
     iconName: "square",
     command: "tableCellNoBorders",
-    tooltipKey: "table.removeBorders"
+    tooltipKey: "table.removeBorders",
+    labelKey: "table.removeBorders",
+    ribbonSize: "large"
   });
   items.push({
     type: "select",
     id: "editor-toolbar-tbl-style",
     testId: "editor-toolbar-tbl-style",
     tooltipKey: "table.tableStyle",
+    labelKey: "table.tableStyle",
+    ribbonSize: "large",
     placeholder: t("table.tableStyle"),
     width: "wide",
     command: "setTableStyle",
@@ -44065,7 +44161,9 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-tbl-distribute-rows",
     iconName: "rows",
     command: "tableDistributeRows",
-    tooltipKey: "table.distributeRows"
+    tooltipKey: "table.distributeRows",
+    labelKey: "table.distributeRows",
+    ribbonSize: "large"
   });
   items.push({
     type: "button",
@@ -44073,7 +44171,9 @@ function createDefaultToolbarPreset(t) {
     testId: "editor-toolbar-tbl-distribute-cols",
     iconName: "columns",
     command: "tableDistributeColumns",
-    tooltipKey: "table.distributeColumns"
+    tooltipKey: "table.distributeColumns",
+    labelKey: "table.distributeColumns",
+    ribbonSize: "large"
   });
   items.push({
     type: "toggle",
@@ -44082,7 +44182,8 @@ function createDefaultToolbarPreset(t) {
     iconName: "move-horizontal",
     command: "tableToggleAutoFit",
     labelKey: "table.autoFit",
-    tooltipKey: "table.autoFit"
+    tooltipKey: "table.autoFit",
+    ribbonSize: "large"
   });
   items.push({
     type: "custom",