oasis-editor 0.0.102 → 0.0.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2444,7 +2444,7 @@ function OasisBrandMark(props) {
2444
2444
  return _el$;
2445
2445
  })();
2446
2446
  }
2447
- 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`);
2447
+ 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`);
2448
2448
  function OasisEditorLoading(props) {
2449
2449
  const t = useI18n();
2450
2450
  const variant = () => props.variant ?? "overlay";
@@ -2468,7 +2468,7 @@ function OasisEditorLoading(props) {
2468
2468
  var _el$6 = _tmpl$$R();
2469
2469
  insert(_el$6, (() => {
2470
2470
  var _c$ = memo(() => !!isDone());
2471
- return () => _c$() ? _tmpl$3$o() : `${pct()}%`;
2471
+ return () => _c$() ? _tmpl$3$p() : `${pct()}%`;
2472
2472
  })());
2473
2473
  return _el$6;
2474
2474
  }
@@ -2519,7 +2519,7 @@ function OasisEditorAppLazy(props = {}) {
2519
2519
  onCleanup(() => {
2520
2520
  cancelled = true;
2521
2521
  });
2522
- import("./OasisEditorApp-DDtlPHus.js").then((m) => {
2522
+ import("./OasisEditorApp-Bmif284h.js").then((m) => {
2523
2523
  cancelled = true;
2524
2524
  setProgress(1);
2525
2525
  setTimeout(() => setApp(() => m.OasisEditorApp), 180);
@@ -4982,7 +4982,7 @@ function mount(target, props = {}) {
4982
4982
  unmount: () => client.dispose()
4983
4983
  });
4984
4984
  }
4985
- 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>`);
4985
+ 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>`);
4986
4986
  const FootnoteIcon = () => _tmpl$$Q();
4987
4987
  const SpecialIndentFirstLineIcon = () => _tmpl$2$z();
4988
4988
  const CUSTOM_ICONS = {
@@ -4999,7 +4999,7 @@ function ToolIcon(props) {
4999
4999
  },
5000
5000
  get fallback() {
5001
5001
  return (() => {
5002
- var _el$3 = _tmpl$3$n();
5002
+ var _el$3 = _tmpl$3$o();
5003
5003
  createRenderEffect(() => setAttribute(_el$3, "data-lucide", props.name));
5004
5004
  return _el$3;
5005
5005
  })();
@@ -5007,7 +5007,7 @@ function ToolIcon(props) {
5007
5007
  children: (render2) => render2()()
5008
5008
  });
5009
5009
  }
5010
- 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>`);
5010
+ 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>`);
5011
5011
  function Menubar(props) {
5012
5012
  const t = useI18n();
5013
5013
  const [activeMenu, setActiveMenu] = createSignal(null);
@@ -5081,7 +5081,7 @@ function Menubar(props) {
5081
5081
  return topLevelItems();
5082
5082
  },
5083
5083
  children: (topLevel) => (() => {
5084
- var _el$2 = _tmpl$3$m(), _el$3 = _el$2.firstChild;
5084
+ var _el$2 = _tmpl$3$n(), _el$3 = _el$2.firstChild;
5085
5085
  _el$2.addEventListener("mouseenter", () => {
5086
5086
  if (activeMenu() && activeMenu() !== topLevel.id) {
5087
5087
  setActiveMenu(topLevel.id);
@@ -5141,7 +5141,7 @@ function MenuNode(props) {
5141
5141
  } = props;
5142
5142
  const isSeparator = (_a = node.item) == null ? void 0 : _a.separator;
5143
5143
  if (isSeparator) {
5144
- return _tmpl$4$h();
5144
+ return _tmpl$4$i();
5145
5145
  }
5146
5146
  const hasChildren = node.children.length > 0;
5147
5147
  const [showSub, setShowSub] = createSignal(false);
@@ -5176,7 +5176,7 @@ function MenuNode(props) {
5176
5176
  return icon();
5177
5177
  },
5178
5178
  get children() {
5179
- var _el$8 = _tmpl$5$e();
5179
+ var _el$8 = _tmpl$5$f();
5180
5180
  insert(_el$8, createComponent(ToolIcon, {
5181
5181
  get name() {
5182
5182
  return icon();
@@ -5192,7 +5192,7 @@ function MenuNode(props) {
5192
5192
  return (_a2 = node.item) == null ? void 0 : _a2.shortcut;
5193
5193
  },
5194
5194
  get children() {
5195
- var _el$0 = _tmpl$6$7();
5195
+ var _el$0 = _tmpl$6$8();
5196
5196
  insert(_el$0, () => node.item.shortcut);
5197
5197
  return _el$0;
5198
5198
  }
@@ -16772,7 +16772,7 @@ function getCaretRectFromSnapshot(snapshot, position2, paragraphOffset) {
16772
16772
  );
16773
16773
  return rectFromBox(slot.left, slot.top, 1, slot.height || line.height);
16774
16774
  }
16775
- 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>`);
16775
+ 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>`);
16776
16776
  function OutlinePanel(props) {
16777
16777
  const t = useI18n();
16778
16778
  const [collapsed, setCollapsed] = createSignal(props.defaultCollapsed ?? false);
@@ -16841,7 +16841,7 @@ function OutlinePanel(props) {
16841
16841
  }
16842
16842
  });
16843
16843
  return (() => {
16844
- var _el$ = _tmpl$3$l(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.firstChild;
16844
+ var _el$ = _tmpl$3$m(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$4.firstChild;
16845
16845
  insert(_el$2, createComponent(Show, {
16846
16846
  get when() {
16847
16847
  return !collapsed();
@@ -16865,7 +16865,7 @@ function OutlinePanel(props) {
16865
16865
  },
16866
16866
  get fallback() {
16867
16867
  return (() => {
16868
- var _el$7 = _tmpl$4$g();
16868
+ var _el$7 = _tmpl$4$h();
16869
16869
  insert(_el$7, () => t("outline.empty"));
16870
16870
  return _el$7;
16871
16871
  })();
@@ -16876,7 +16876,7 @@ function OutlinePanel(props) {
16876
16876
  return items();
16877
16877
  },
16878
16878
  children: (item) => (() => {
16879
- var _el$8 = _tmpl$5$d();
16879
+ var _el$8 = _tmpl$5$e();
16880
16880
  _el$8.$$click = () => props.onNavigate(item.anchor);
16881
16881
  insert(_el$8, () => item.text);
16882
16882
  createRenderEffect((_p$) => {
@@ -17340,7 +17340,7 @@ function Popover(props) {
17340
17340
  }
17341
17341
  })];
17342
17342
  }
17343
- 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>`);
17343
+ 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>`);
17344
17344
  function Menu(props) {
17345
17345
  const [open, setOpen] = createSignal(false);
17346
17346
  const ariaLabel = () => props.tooltip || props.label || "";
@@ -17360,7 +17360,7 @@ function Menu(props) {
17360
17360
  },
17361
17361
  onPanelMouseLeave: void 0,
17362
17362
  trigger: (api) => (() => {
17363
- var _el$3 = _tmpl$6$6();
17363
+ var _el$3 = _tmpl$6$7();
17364
17364
  _el$3.$$click = () => api.toggle();
17365
17365
  use((el) => api.ref(el), _el$3);
17366
17366
  insert(_el$3, createComponent(Show, {
@@ -17368,7 +17368,7 @@ function Menu(props) {
17368
17368
  return props.icon;
17369
17369
  },
17370
17370
  get children() {
17371
- var _el$4 = _tmpl$3$k();
17371
+ var _el$4 = _tmpl$3$l();
17372
17372
  createRenderEffect(() => setAttribute(_el$4, "data-lucide", props.icon));
17373
17373
  return _el$4;
17374
17374
  }
@@ -17378,7 +17378,7 @@ function Menu(props) {
17378
17378
  return props.label;
17379
17379
  },
17380
17380
  get children() {
17381
- var _el$5 = _tmpl$4$f();
17381
+ var _el$5 = _tmpl$4$g();
17382
17382
  insert(_el$5, () => props.label);
17383
17383
  return _el$5;
17384
17384
  }
@@ -17388,7 +17388,7 @@ function Menu(props) {
17388
17388
  return !props.hideChevron;
17389
17389
  },
17390
17390
  get children() {
17391
- return _tmpl$5$c();
17391
+ return _tmpl$5$d();
17392
17392
  }
17393
17393
  }), null);
17394
17394
  createRenderEffect((_p$) => {
@@ -17536,7 +17536,7 @@ function SplitButton(props) {
17536
17536
  });
17537
17537
  }
17538
17538
  delegateEvents(["click"]);
17539
- 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>`);
17539
+ 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>`);
17540
17540
  const normalizeColor = (value) => (value == null ? void 0 : value.trim().toLowerCase()) ?? "";
17541
17541
  function ColorPicker(props) {
17542
17542
  const [isOpen, setIsOpen] = createSignal(false);
@@ -17619,7 +17619,7 @@ function ColorPicker(props) {
17619
17619
  return _el$;
17620
17620
  }
17621
17621
  }), (() => {
17622
- var _el$5 = _tmpl$3$j(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
17622
+ var _el$5 = _tmpl$3$k(), _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
17623
17623
  insert(_el$6, () => props.themeColorsLabel);
17624
17624
  insert(_el$7, createComponent(For, {
17625
17625
  get each() {
@@ -17659,7 +17659,7 @@ function ColorPicker(props) {
17659
17659
  }));
17660
17660
  return _el$5;
17661
17661
  })(), (() => {
17662
- var _el$8 = _tmpl$4$e(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
17662
+ var _el$8 = _tmpl$4$f(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
17663
17663
  insert(_el$9, () => props.standardColorsLabel);
17664
17664
  insert(_el$0, createComponent(For, {
17665
17665
  get each() {
@@ -17696,13 +17696,13 @@ function ColorPicker(props) {
17696
17696
  },
17697
17697
  get children() {
17698
17698
  return [(() => {
17699
- var _el$1 = _tmpl$5$b(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
17699
+ var _el$1 = _tmpl$5$c(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
17700
17700
  _el$1.$$click = () => customColorInputRef == null ? void 0 : customColorInputRef.click();
17701
17701
  insert(_el$11, () => props.moreColorsLabel);
17702
17702
  createRenderEffect(() => setAttribute(_el$1, "data-testid", `${props.testId}-more-colors`));
17703
17703
  return _el$1;
17704
17704
  })(), (() => {
17705
- var _el$12 = _tmpl$6$5();
17705
+ var _el$12 = _tmpl$6$6();
17706
17706
  _el$12.$$input = (event) => applyColor(event.currentTarget.value);
17707
17707
  var _ref$ = customColorInputRef;
17708
17708
  typeof _ref$ === "function" ? use(_ref$, _el$12) : customColorInputRef = _el$12;
@@ -17724,7 +17724,7 @@ function ColorPicker(props) {
17724
17724
  });
17725
17725
  }
17726
17726
  delegateEvents(["click", "input"]);
17727
- 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>`);
17727
+ 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>`);
17728
17728
  function GridPicker(props) {
17729
17729
  const t = useI18n();
17730
17730
  const [isOpen, setIsOpen] = createSignal(false);
@@ -17799,7 +17799,7 @@ function GridPicker(props) {
17799
17799
  return h.row === 0 || h.col === 0 ? t("toolbar.table") : `${h.row} × ${h.col}`;
17800
17800
  };
17801
17801
  return (() => {
17802
- var _el$ = _tmpl$3$i();
17802
+ var _el$ = _tmpl$3$j();
17803
17803
  insert(_el$, createComponent(Popover, {
17804
17804
  get open() {
17805
17805
  return isOpen();
@@ -17811,7 +17811,7 @@ function GridPicker(props) {
17811
17811
  col: 0
17812
17812
  }),
17813
17813
  trigger: (api) => (() => {
17814
- var _el$4 = _tmpl$4$d(), _el$5 = _el$4.firstChild;
17814
+ var _el$4 = _tmpl$4$e(), _el$5 = _el$4.firstChild;
17815
17815
  _el$4.$$click = () => api.toggle();
17816
17816
  use((el) => api.ref(el), _el$4);
17817
17817
  createRenderEffect((_p$) => {
@@ -17847,7 +17847,7 @@ function GridPicker(props) {
17847
17847
  return cols();
17848
17848
  },
17849
17849
  children: (c) => (() => {
17850
- var _el$6 = _tmpl$5$a();
17850
+ var _el$6 = _tmpl$5$b();
17851
17851
  _el$6.$$click = () => selectGridSize(r, c);
17852
17852
  _el$6.$$mousedown = (event) => event.preventDefault();
17853
17853
  _el$6.addEventListener("mouseenter", () => setHover({
@@ -17937,7 +17937,7 @@ const DEFAULT_PALETTE = {
17937
17937
  standardColors: STANDARD_COLORS,
17938
17938
  allowCustom: true
17939
17939
  };
17940
- 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>`);
17940
+ 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>`);
17941
17941
  function getQuickStyles(styles) {
17942
17942
  const applicable = styles.filter((style2) => style2.type !== "table" && (!style2.semiHidden || style2.unhideWhenUsed && style2.isUsed));
17943
17943
  const hasQuickStyles = applicable.some((style2) => style2.qFormat === true);
@@ -18048,7 +18048,7 @@ function StyleGallery(props) {
18048
18048
  panelRole: "listbox",
18049
18049
  panelTestId,
18050
18050
  trigger: (popover) => (() => {
18051
- var _el$4 = _tmpl$3$h(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
18051
+ var _el$4 = _tmpl$3$i(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
18052
18052
  var _ref$ = popover.ref;
18053
18053
  typeof _ref$ === "function" ? use(_ref$, _el$4) : popover.ref = _el$4;
18054
18054
  insert(_el$4, createComponent(Select, {
@@ -18072,7 +18072,7 @@ function StyleGallery(props) {
18072
18072
  return styles();
18073
18073
  },
18074
18074
  children: (style2) => (() => {
18075
- var _el$8 = _tmpl$4$c();
18075
+ var _el$8 = _tmpl$4$d();
18076
18076
  insert(_el$8, () => style2.name);
18077
18077
  createRenderEffect(() => _el$8.value = style2.id);
18078
18078
  return _el$8;
@@ -18105,7 +18105,7 @@ function StyleGallery(props) {
18105
18105
  });
18106
18106
  }
18107
18107
  delegateEvents(["click", "keydown"]);
18108
- 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>`);
18108
+ 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>`);
18109
18109
  function renderMenuContent(content, api) {
18110
18110
  if (content.kind === "custom") {
18111
18111
  return content.render(api);
@@ -18434,7 +18434,7 @@ function ToolbarItemRenderer(props) {
18434
18434
  const binding = bindItem(props.item, props.api);
18435
18435
  const component = () => resolveRenderer(props.item.type);
18436
18436
  return (() => {
18437
- var _el$3 = _tmpl$3$g();
18437
+ var _el$3 = _tmpl$3$h();
18438
18438
  insert(_el$3, createComponent(Show, {
18439
18439
  get when() {
18440
18440
  return component();
@@ -18546,6 +18546,70 @@ const RIBBON_GROUP_ORDER = {
18546
18546
  general: 10
18547
18547
  }
18548
18548
  };
18549
+ const DEFAULT_RESIZE_STATES = [
18550
+ "full",
18551
+ "compact",
18552
+ "collapsed"
18553
+ ];
18554
+ const DEFAULT_GROUP_RESIZE_POLICY = {
18555
+ states: DEFAULT_RESIZE_STATES,
18556
+ priority: 50,
18557
+ compactMinWidth: 96,
18558
+ collapsedMinWidth: 68,
18559
+ collapsedIcon: "ellipsis",
18560
+ compactLabels: "show"
18561
+ };
18562
+ const STYLE_GALLERY_CARD_WIDTH = 106;
18563
+ const STYLE_GALLERY_EXPAND_WIDTH = 24;
18564
+ const STYLE_GALLERY_BORDER_WIDTH = 2;
18565
+ const RIBBON_GROUP_RESIZE_DEFAULTS = {
18566
+ home: {
18567
+ styles: {
18568
+ priority: 10,
18569
+ states: ["full", "compact", "collapsed"],
18570
+ compactMinWidth: 132,
18571
+ collapsedIcon: "palette"
18572
+ },
18573
+ paragraph: {
18574
+ priority: 15,
18575
+ states: ["full", "collapsed"],
18576
+ collapsedMinWidth: 74,
18577
+ collapsedIcon: "pilcrow"
18578
+ },
18579
+ clipboard: {
18580
+ priority: 20,
18581
+ states: ["full", "collapsed"],
18582
+ collapsedIcon: "clipboard"
18583
+ },
18584
+ font: {
18585
+ priority: 30,
18586
+ states: ["full", "collapsed"],
18587
+ collapsedMinWidth: 74,
18588
+ collapsedIcon: "type"
18589
+ }
18590
+ },
18591
+ insert: {
18592
+ illustrations: { priority: 25, collapsedIcon: "image" },
18593
+ tables: { priority: 30, collapsedIcon: "table" },
18594
+ links: { priority: 35, collapsedIcon: "link" },
18595
+ accessibility: { priority: 20, collapsedIcon: "file-text" },
18596
+ footnotes: { priority: 15, collapsedIcon: "footnote" }
18597
+ },
18598
+ layout: {
18599
+ paragraph: { priority: 30, compactMinWidth: 112, collapsedIcon: "ruler" },
18600
+ table: { priority: 20, collapsedIcon: "table" },
18601
+ section: { priority: 40, compactMinWidth: 148, collapsedIcon: "layout" }
18602
+ },
18603
+ file: {
18604
+ document: { priority: 10, collapsedIcon: "file" }
18605
+ },
18606
+ references: {
18607
+ footnotes: { priority: 10, collapsedIcon: "footnote" }
18608
+ },
18609
+ plugins: {
18610
+ general: { priority: 50, collapsedIcon: "plug" }
18611
+ }
18612
+ };
18549
18613
  function normalizeRibbonTab(tab) {
18550
18614
  return tab ?? DEFAULT_RIBBON_TAB;
18551
18615
  }
@@ -18558,6 +18622,30 @@ function normalizeRibbonRow(row) {
18558
18622
  function isLargeRibbonItem(item) {
18559
18623
  return "ribbonSize" in item && item.ribbonSize === "large";
18560
18624
  }
18625
+ function normalizeResizeStates(states) {
18626
+ const source = (states == null ? void 0 : states.length) ? states : DEFAULT_RESIZE_STATES;
18627
+ const unique = source.filter(
18628
+ (state, index) => source.indexOf(state) === index
18629
+ );
18630
+ return unique.includes("full") ? unique : ["full", ...unique];
18631
+ }
18632
+ function mergeRibbonGroupResizePolicy(tab, group, itemPolicy) {
18633
+ var _a;
18634
+ const tabDefaults = ((_a = RIBBON_GROUP_RESIZE_DEFAULTS[tab]) == null ? void 0 : _a[group]) ?? {};
18635
+ const merged = {
18636
+ ...DEFAULT_GROUP_RESIZE_POLICY,
18637
+ ...tabDefaults,
18638
+ ...itemPolicy
18639
+ };
18640
+ return {
18641
+ states: normalizeResizeStates(merged.states),
18642
+ priority: merged.priority ?? DEFAULT_GROUP_RESIZE_POLICY.priority,
18643
+ compactMinWidth: merged.compactMinWidth ?? DEFAULT_GROUP_RESIZE_POLICY.compactMinWidth,
18644
+ collapsedMinWidth: merged.collapsedMinWidth ?? DEFAULT_GROUP_RESIZE_POLICY.collapsedMinWidth,
18645
+ collapsedIcon: merged.collapsedIcon ?? DEFAULT_GROUP_RESIZE_POLICY.collapsedIcon,
18646
+ compactLabels: merged.compactLabels ?? DEFAULT_GROUP_RESIZE_POLICY.compactLabels
18647
+ };
18648
+ }
18561
18649
  function ribbonGroupLabel(group, t) {
18562
18650
  const key = GROUP_LABEL_KEYS[group];
18563
18651
  return key ? t(key) : group;
@@ -18566,6 +18654,7 @@ function buildRibbonGroups(items, tab, t) {
18566
18654
  const groups = /* @__PURE__ */ new Map();
18567
18655
  const tabGroupOrder = RIBBON_GROUP_ORDER[tab] ?? {};
18568
18656
  items.forEach((item, index) => {
18657
+ var _a;
18569
18658
  if (normalizeRibbonTab(item.tab) !== tab) {
18570
18659
  return;
18571
18660
  }
@@ -18579,11 +18668,27 @@ function buildRibbonGroups(items, tab, t) {
18579
18668
  label: ribbonGroupLabel(groupId, t),
18580
18669
  largeItems: [],
18581
18670
  rows: { 1: [], 2: [] },
18582
- order: groupOrder
18671
+ order: groupOrder,
18672
+ resizePolicy: mergeRibbonGroupResizePolicy(
18673
+ tab,
18674
+ groupId,
18675
+ item.ribbonGroupResize
18676
+ )
18583
18677
  };
18584
18678
  groups.set(groupId, group);
18585
18679
  }
18586
18680
  group.order = Math.min(group.order, groupOrder);
18681
+ group.resizePolicy = {
18682
+ ...group.resizePolicy,
18683
+ ...Object.fromEntries(
18684
+ Object.entries(item.ribbonGroupResize ?? {}).filter(
18685
+ ([, value]) => value !== void 0
18686
+ )
18687
+ ),
18688
+ states: normalizeResizeStates(
18689
+ ((_a = item.ribbonGroupResize) == null ? void 0 : _a.states) ?? group.resizePolicy.states
18690
+ )
18691
+ };
18587
18692
  if (isLargeRibbonItem(item)) {
18588
18693
  group.largeItems.push(item);
18589
18694
  } else {
@@ -18592,6 +18697,154 @@ function buildRibbonGroups(items, tab, t) {
18592
18697
  });
18593
18698
  return Array.from(groups.values()).sort((a, b) => a.order - b.order);
18594
18699
  }
18700
+ function estimatedRibbonGroupWidths(group) {
18701
+ const normalCount = group.rows[1].length + group.rows[2].length;
18702
+ const largeCount = group.largeItems.length;
18703
+ const full = Math.max(
18704
+ group.resizePolicy.collapsedMinWidth,
18705
+ largeCount * 72 + Math.max(group.rows[1].length, group.rows[2].length) * 30
18706
+ );
18707
+ return {
18708
+ full,
18709
+ compact: Math.max(
18710
+ group.resizePolicy.compactMinWidth,
18711
+ Math.ceil(full * (largeCount > 0 || normalCount > 6 ? 0.72 : 0.84))
18712
+ ),
18713
+ collapsed: group.resizePolicy.collapsedMinWidth
18714
+ };
18715
+ }
18716
+ function widthForState(state, widths) {
18717
+ return widths[state];
18718
+ }
18719
+ function widthForResolvedState(group, state, widths, allocatedWidths) {
18720
+ return state === "compact" ? allocatedWidths.get(group.id) ?? widths.compact : widthForState(state, widths);
18721
+ }
18722
+ function snapCompactWidthToWholeItems(group, desiredWidth, minWidth, maxWidth) {
18723
+ if (group.id !== "styles") {
18724
+ return Math.min(maxWidth, Math.max(minWidth, desiredWidth));
18725
+ }
18726
+ const chromeWidth = STYLE_GALLERY_EXPAND_WIDTH + STYLE_GALLERY_BORDER_WIDTH;
18727
+ if (maxWidth < STYLE_GALLERY_CARD_WIDTH + chromeWidth) {
18728
+ return Math.min(maxWidth, Math.max(minWidth, desiredWidth));
18729
+ }
18730
+ const cardSlots = Math.max(
18731
+ 1,
18732
+ Math.floor((desiredWidth - chromeWidth) / STYLE_GALLERY_CARD_WIDTH)
18733
+ );
18734
+ const snapped = cardSlots * STYLE_GALLERY_CARD_WIDTH + chromeWidth;
18735
+ return Math.min(maxWidth, Math.max(minWidth, snapped));
18736
+ }
18737
+ function resolveResponsiveRibbonGroups(groups, availableWidth, measurements = {}) {
18738
+ const states = /* @__PURE__ */ new Map();
18739
+ const widths = /* @__PURE__ */ new Map();
18740
+ const allocatedWidths = /* @__PURE__ */ new Map();
18741
+ for (const group of groups) {
18742
+ const estimated = estimatedRibbonGroupWidths(group);
18743
+ const measured = measurements[group.id] ?? {};
18744
+ const full = Math.max(
18745
+ estimated.full,
18746
+ Math.ceil(measured.full ?? estimated.full)
18747
+ );
18748
+ widths.set(group.id, {
18749
+ full,
18750
+ compact: Math.min(
18751
+ full,
18752
+ Math.max(
18753
+ group.resizePolicy.compactMinWidth,
18754
+ Math.ceil(measured.compact ?? estimated.compact)
18755
+ )
18756
+ ),
18757
+ collapsed: Math.min(
18758
+ full,
18759
+ Math.max(
18760
+ group.resizePolicy.collapsedMinWidth,
18761
+ Math.ceil(measured.collapsed ?? estimated.collapsed)
18762
+ )
18763
+ )
18764
+ });
18765
+ states.set(group.id, "full");
18766
+ }
18767
+ if (availableWidth !== null && Number.isFinite(availableWidth)) {
18768
+ let currentWidth = groups.reduce(
18769
+ (sum, group) => sum + widthForState("full", widths.get(group.id)),
18770
+ 0
18771
+ );
18772
+ const targetWidth = Math.max(0, availableWidth);
18773
+ while (currentWidth > targetWidth) {
18774
+ const candidates = groups.map((group) => {
18775
+ const groupStates = group.resizePolicy.states;
18776
+ const currentState = states.get(group.id) ?? "full";
18777
+ const currentIndex = groupStates.indexOf(currentState);
18778
+ const nextState = currentIndex >= 0 ? groupStates[currentIndex + 1] : void 0;
18779
+ if (!nextState) return null;
18780
+ const groupWidths2 = widths.get(group.id);
18781
+ const currentWidth2 = widthForResolvedState(
18782
+ group,
18783
+ currentState,
18784
+ groupWidths2,
18785
+ allocatedWidths
18786
+ );
18787
+ const saving = currentWidth2 - widthForState(nextState, groupWidths2);
18788
+ return saving > 0 ? { group, nextState, saving, currentState, currentIndex } : null;
18789
+ }).filter(
18790
+ (candidate) => Boolean(candidate)
18791
+ ).sort(
18792
+ (a, b) => a.currentIndex - b.currentIndex || b.group.order - a.group.order || a.group.resizePolicy.priority - b.group.resizePolicy.priority || b.saving - a.saving
18793
+ );
18794
+ const next = candidates[0];
18795
+ if (!next) break;
18796
+ const groupWidths = widths.get(next.group.id);
18797
+ const currentStateWidth = widthForResolvedState(
18798
+ next.group,
18799
+ next.currentState,
18800
+ groupWidths,
18801
+ allocatedWidths
18802
+ );
18803
+ const deficit = currentWidth - targetWidth;
18804
+ const nextStateWidth = next.nextState === "compact" ? snapCompactWidthToWholeItems(
18805
+ next.group,
18806
+ currentStateWidth - deficit,
18807
+ groupWidths.compact,
18808
+ groupWidths.full
18809
+ ) : widthForState(next.nextState, groupWidths);
18810
+ const actualSaving = currentStateWidth - nextStateWidth;
18811
+ states.set(next.group.id, next.nextState);
18812
+ if (next.nextState === "compact") {
18813
+ allocatedWidths.set(next.group.id, nextStateWidth);
18814
+ } else {
18815
+ allocatedWidths.delete(next.group.id);
18816
+ }
18817
+ currentWidth -= actualSaving;
18818
+ }
18819
+ let slack = targetWidth - currentWidth;
18820
+ if (slack > 0) {
18821
+ for (const group of groups.filter((candidate) => states.get(candidate.id) === "compact").sort(
18822
+ (a, b) => b.order - a.order || a.resizePolicy.priority - b.resizePolicy.priority
18823
+ )) {
18824
+ const groupWidths = widths.get(group.id);
18825
+ const compactWidth = groupWidths.compact;
18826
+ const maxExtra = groupWidths.full - compactWidth;
18827
+ if (maxExtra <= 0) continue;
18828
+ const allocated = snapCompactWidthToWholeItems(
18829
+ group,
18830
+ compactWidth + slack,
18831
+ compactWidth,
18832
+ groupWidths.full
18833
+ );
18834
+ const consumed = allocated - compactWidth;
18835
+ if (consumed <= 0) continue;
18836
+ allocatedWidths.set(group.id, allocated);
18837
+ slack -= consumed;
18838
+ if (slack <= 0) break;
18839
+ }
18840
+ }
18841
+ }
18842
+ return groups.map((group) => ({
18843
+ ...group,
18844
+ resizeState: states.get(group.id) ?? "full",
18845
+ allocatedWidth: allocatedWidths.get(group.id)
18846
+ }));
18847
+ }
18595
18848
  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>`);
18596
18849
  function RibbonTabs(props) {
18597
18850
  const tabs = buildRibbonTabDefinitions(useI18n());
@@ -18665,67 +18918,183 @@ function RibbonRow(props) {
18665
18918
  return _el$;
18666
18919
  })();
18667
18920
  }
18668
- 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>`);
18921
+ 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>`);
18922
+ function groupItems(group) {
18923
+ return [...group.largeItems, ...group.rows[1], ...group.rows[2]];
18924
+ }
18925
+ function groupStyle(group) {
18926
+ return group.resizeState === "compact" && group.allocatedWidth ? {
18927
+ "--oasis-ribbon-group-compact-width": `${group.allocatedWidth}px`
18928
+ } : {};
18929
+ }
18669
18930
  function RibbonGroup(props) {
18670
18931
  return (() => {
18671
- var _el$ = _tmpl$2$o(), _el$2 = _el$.firstChild, _el$4 = _el$2.firstChild, _el$5 = _el$2.nextSibling;
18672
- insert(_el$2, createComponent(Show, {
18932
+ var _el$ = _tmpl$4$c();
18933
+ insert(_el$, createComponent(Show, {
18673
18934
  get when() {
18674
- return props.group.largeItems.length > 0;
18935
+ return props.group.resizeState !== "collapsed";
18936
+ },
18937
+ get fallback() {
18938
+ return [(() => {
18939
+ var _el$6 = _tmpl$6$5();
18940
+ insert(_el$6, createComponent(Menu, {
18941
+ get icon() {
18942
+ return props.group.resizePolicy.collapsedIcon;
18943
+ },
18944
+ get label() {
18945
+ return props.group.label;
18946
+ },
18947
+ get tooltip() {
18948
+ return props.group.label;
18949
+ },
18950
+ get testId() {
18951
+ return `editor-ribbon-group-${props.group.id}`;
18952
+ },
18953
+ ribbonSize: "large",
18954
+ panelClass: "oasis-editor-ribbon-collapsed-menu",
18955
+ get children() {
18956
+ var _el$7 = _tmpl$5$a();
18957
+ insert(_el$7, createComponent(For, {
18958
+ get each() {
18959
+ return groupItems(props.group);
18960
+ },
18961
+ children: (item) => createComponent(ToolbarItemRenderer, {
18962
+ item,
18963
+ get api() {
18964
+ return props.api;
18965
+ }
18966
+ })
18967
+ }));
18968
+ return _el$7;
18969
+ }
18970
+ }));
18971
+ return _el$6;
18972
+ })(), (() => {
18973
+ var _el$8 = _tmpl$3$g();
18974
+ insert(_el$8, () => props.group.label);
18975
+ return _el$8;
18976
+ })()];
18675
18977
  },
18676
18978
  get children() {
18677
- var _el$3 = _tmpl$$z();
18678
- insert(_el$3, createComponent(For, {
18679
- get each() {
18680
- return props.group.largeItems;
18681
- },
18682
- children: (item) => createComponent(ToolbarItemRenderer, {
18683
- item,
18979
+ return [(() => {
18980
+ var _el$2 = _tmpl$2$o(), _el$4 = _el$2.firstChild;
18981
+ insert(_el$2, createComponent(Show, {
18982
+ get when() {
18983
+ return props.group.largeItems.length > 0;
18984
+ },
18985
+ get children() {
18986
+ var _el$3 = _tmpl$$z();
18987
+ insert(_el$3, createComponent(For, {
18988
+ get each() {
18989
+ return props.group.largeItems;
18990
+ },
18991
+ children: (item) => createComponent(ToolbarItemRenderer, {
18992
+ item,
18993
+ get api() {
18994
+ return props.api;
18995
+ }
18996
+ })
18997
+ }));
18998
+ return _el$3;
18999
+ }
19000
+ }), _el$4);
19001
+ insert(_el$4, createComponent(RibbonRow, {
19002
+ get items() {
19003
+ return props.group.rows[1];
19004
+ },
18684
19005
  get api() {
18685
19006
  return props.api;
18686
19007
  }
18687
- })
18688
- }));
18689
- return _el$3;
18690
- }
18691
- }), _el$4);
18692
- insert(_el$4, createComponent(RibbonRow, {
18693
- get items() {
18694
- return props.group.rows[1];
18695
- },
18696
- get api() {
18697
- return props.api;
18698
- }
18699
- }), null);
18700
- insert(_el$4, createComponent(RibbonRow, {
18701
- get items() {
18702
- return props.group.rows[2];
18703
- },
18704
- get api() {
18705
- return props.api;
19008
+ }), null);
19009
+ insert(_el$4, createComponent(RibbonRow, {
19010
+ get items() {
19011
+ return props.group.rows[2];
19012
+ },
19013
+ get api() {
19014
+ return props.api;
19015
+ }
19016
+ }), null);
19017
+ return _el$2;
19018
+ })(), (() => {
19019
+ var _el$5 = _tmpl$3$g();
19020
+ insert(_el$5, () => props.group.label);
19021
+ return _el$5;
19022
+ })()];
18706
19023
  }
18707
- }), null);
18708
- insert(_el$5, () => props.group.label);
19024
+ }));
18709
19025
  createRenderEffect((_p$) => {
18710
- var _v$ = props.group.id, _v$2 = props.group.label;
18711
- _v$ !== _p$.e && setAttribute(_el$, "data-ribbon-group", _p$.e = _v$);
18712
- _v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
19026
+ 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);
19027
+ _v$ !== _p$.e && _el$.classList.toggle("oasis-editor-ribbon-group-compact", _p$.e = _v$);
19028
+ _v$2 !== _p$.t && _el$.classList.toggle("oasis-editor-ribbon-group-collapsed", _p$.t = _v$2);
19029
+ _v$3 !== _p$.a && _el$.classList.toggle("oasis-editor-ribbon-group-compact-hide-labels", _p$.a = _v$3);
19030
+ _v$4 !== _p$.o && setAttribute(_el$, "data-ribbon-group", _p$.o = _v$4);
19031
+ _v$5 !== _p$.i && setAttribute(_el$, "data-ribbon-state", _p$.i = _v$5);
19032
+ _v$6 !== _p$.n && setAttribute(_el$, "aria-label", _p$.n = _v$6);
19033
+ _p$.s = style(_el$, _v$7, _p$.s);
18713
19034
  return _p$;
18714
19035
  }, {
18715
19036
  e: void 0,
18716
- t: void 0
19037
+ t: void 0,
19038
+ a: void 0,
19039
+ o: void 0,
19040
+ i: void 0,
19041
+ n: void 0,
19042
+ s: void 0
18717
19043
  });
18718
19044
  return _el$;
18719
19045
  })();
18720
19046
  }
18721
19047
  var _tmpl$$y = /* @__PURE__ */ template(`<div class=oasis-editor-ribbon-panel role=tabpanel data-testid=editor-ribbon-panel>`);
18722
19048
  function RibbonPanel(props) {
18723
- const groups = () => buildRibbonGroups(props.items(), props.activeTab(), props.api.t);
19049
+ const [availableWidth, setAvailableWidth] = createSignal(null);
19050
+ const [measurements, setMeasurements] = createSignal({});
19051
+ let panelRef;
19052
+ const groups = createMemo(() => buildRibbonGroups(props.items(), props.activeTab(), props.api.t));
19053
+ const resolvedGroups = createMemo(() => resolveResponsiveRibbonGroups(groups(), availableWidth(), measurements()));
19054
+ const measureGroups = () => {
19055
+ var _a;
19056
+ const panel = panelRef;
19057
+ if (!panel) return;
19058
+ const panelBox = panel.getBoundingClientRect();
19059
+ const nextMeasurements = {
19060
+ ...measurements()
19061
+ };
19062
+ for (const el of Array.from(panel.querySelectorAll("[data-ribbon-group]"))) {
19063
+ const id = el.dataset.ribbonGroup;
19064
+ if (!id || el.dataset.ribbonState !== "full") continue;
19065
+ const width = Math.ceil(el.getBoundingClientRect().width);
19066
+ if (width > 0) {
19067
+ nextMeasurements[id] = {
19068
+ ...nextMeasurements[id],
19069
+ full: Math.max(((_a = nextMeasurements[id]) == null ? void 0 : _a.full) ?? 0, width)
19070
+ };
19071
+ }
19072
+ }
19073
+ setMeasurements(nextMeasurements);
19074
+ setAvailableWidth(Math.floor(panelBox.width));
19075
+ };
19076
+ onMount(() => {
19077
+ const panel = panelRef;
19078
+ if (!panel) return;
19079
+ const observer2 = new ResizeObserver(() => {
19080
+ requestAnimationFrame(measureGroups);
19081
+ });
19082
+ observer2.observe(panel);
19083
+ requestAnimationFrame(measureGroups);
19084
+ onCleanup(() => observer2.disconnect());
19085
+ });
19086
+ createEffect(() => {
19087
+ props.activeTab();
19088
+ props.items();
19089
+ requestAnimationFrame(measureGroups);
19090
+ });
18724
19091
  return (() => {
18725
19092
  var _el$ = _tmpl$$y();
19093
+ var _ref$ = panelRef;
19094
+ typeof _ref$ === "function" ? use(_ref$, _el$) : panelRef = _el$;
18726
19095
  insert(_el$, createComponent(For, {
18727
19096
  get each() {
18728
- return groups();
19097
+ return resolvedGroups();
18729
19098
  },
18730
19099
  children: (group) => createComponent(RibbonGroup, {
18731
19100
  group,
@@ -33413,8 +33782,11 @@ function emptyOrUndefined(obj) {
33413
33782
  function mergeStyles(base, local) {
33414
33783
  return emptyOrUndefined({ ...base ?? {}, ...local ?? {} });
33415
33784
  }
33416
- function parseShdFill(element) {
33417
- return normalizeImportedHexColor(getAttributeValue(element, "fill"));
33785
+ function parseShdFill(element, colors) {
33786
+ const fill = normalizeImportedHexColor(getAttributeValue(element, "fill"));
33787
+ if (fill) return fill;
33788
+ if (colors) return resolveThemeColor(element, colors);
33789
+ return void 0;
33418
33790
  }
33419
33791
  function parseW14SolidFillColor(solidFillEl) {
33420
33792
  const srgbClr = getFirstChildByTagNameNS(solidFillEl, WORD14_NS, "srgbClr");
@@ -33933,7 +34305,7 @@ function parseRunStyle(runProperties, theme) {
33933
34305
  styles.highlight = highlightValue;
33934
34306
  }
33935
34307
  const shd = getFirstChildByTagNameNS(runProperties, WORD_NS, "shd");
33936
- const shdFill = parseShdFill(shd);
34308
+ const shdFill = parseShdFill(shd, theme.colors);
33937
34309
  if (shdFill) {
33938
34310
  styles.shading = shdFill;
33939
34311
  }
@@ -34044,7 +34416,7 @@ function parseParagraphTabs(paragraphProperties) {
34044
34416
  }
34045
34417
  return tabs;
34046
34418
  }
34047
- function parseParagraphStyle$1(paragraphProperties) {
34419
+ function parseParagraphStyle$1(paragraphProperties, colors) {
34048
34420
  if (!paragraphProperties) {
34049
34421
  return void 0;
34050
34422
  }
@@ -34151,7 +34523,7 @@ function parseParagraphStyle$1(paragraphProperties) {
34151
34523
  if (borderLeft) style2.borderLeft = borderLeft;
34152
34524
  }
34153
34525
  const shading = getFirstChildByTagNameNS(paragraphProperties, WORD_NS, "shd");
34154
- const shadingFill = parseShdFill(shading);
34526
+ const shadingFill = parseShdFill(shading, colors);
34155
34527
  if (shadingFill) {
34156
34528
  style2.shading = shadingFill;
34157
34529
  }
@@ -34560,7 +34932,7 @@ function parseTableCellBorders(cellProperties) {
34560
34932
  getFirstChildByTagNameNS(cellProperties, WORD_NS, "tcBorders")
34561
34933
  );
34562
34934
  }
34563
- function parseTableCellStyle(cellProperties, tableDefaultMargins) {
34935
+ function parseTableCellStyle(cellProperties, tableDefaultMargins, colors) {
34564
34936
  if (!cellProperties) {
34565
34937
  {
34566
34938
  return void 0;
@@ -34575,7 +34947,7 @@ function parseTableCellStyle(cellProperties, tableDefaultMargins) {
34575
34947
  ...{}
34576
34948
  };
34577
34949
  const shading = getFirstChildByTagNameNS(cellProperties, WORD_NS, "shd");
34578
- const fill = parseShdFill(shading);
34950
+ const fill = parseShdFill(shading, colors);
34579
34951
  if (fill) {
34580
34952
  style2.shading = fill;
34581
34953
  }
@@ -34646,7 +35018,7 @@ function parseTableCellStyle(cellProperties, tableDefaultMargins) {
34646
35018
  style2.propertyRevision = {
34647
35019
  ...parseRevisionMetadata(change),
34648
35020
  type: "property",
34649
- previous: parseTableCellStyle(previousProperties) ?? {}
35021
+ previous: parseTableCellStyle(previousProperties, void 0, colors) ?? {}
34650
35022
  };
34651
35023
  }
34652
35024
  const inserted = getFirstChildByTagNameNS(cellProperties, WORD_NS, "cellIns");
@@ -34733,8 +35105,12 @@ function parseImportedStyles(stylesXml, theme) {
34733
35105
  const defaultParagraphStyle = pPrDefault ? {
34734
35106
  spacingBefore: 0,
34735
35107
  spacingAfter: 0,
34736
- ...withDocxImplicitSingleLineHeight(parseParagraphStyle$1(pPrDefault))
34737
- } : withDocxImplicitSingleLineHeight(parseParagraphStyle$1(pPrDefault));
35108
+ ...withDocxImplicitSingleLineHeight(
35109
+ parseParagraphStyle$1(pPrDefault, theme.colors)
35110
+ )
35111
+ } : withDocxImplicitSingleLineHeight(
35112
+ parseParagraphStyle$1(pPrDefault, theme.colors)
35113
+ );
34738
35114
  const defaultTextStyle = parseRunStyle(rPrDefault, theme);
34739
35115
  const styles = {};
34740
35116
  let defaultParagraphStyleId;
@@ -34767,7 +35143,8 @@ function parseImportedStyles(stylesXml, theme) {
34767
35143
  const uiPriority = Number.isInteger(parsedUiPriority) && parsedUiPriority >= 0 ? parsedUiPriority : void 0;
34768
35144
  const paragraphStyle = withDocxImplicitSingleLineHeight(
34769
35145
  parseParagraphStyle$1(
34770
- getFirstChildByTagNameNS(styleElement, WORD_NS, "pPr")
35146
+ getFirstChildByTagNameNS(styleElement, WORD_NS, "pPr"),
35147
+ theme.colors
34771
35148
  )
34772
35149
  );
34773
35150
  const textStyle = parseRunStyle(
@@ -34796,12 +35173,12 @@ function parseImportedStyles(stylesXml, theme) {
34796
35173
  const condType = getAttributeValue(tblStylePr, "type");
34797
35174
  if (!condType) continue;
34798
35175
  const tcPr = getFirstChildByTagNameNS(tblStylePr, WORD_NS, "tcPr");
34799
- const conditionalCellStyle = parseTableCellStyle(tcPr);
35176
+ const conditionalCellStyle = parseTableCellStyle(tcPr, void 0, theme.colors);
34800
35177
  const conditionalTableStyle = parseTableStyle(
34801
35178
  getFirstChildByTagNameNS(tblStylePr, WORD_NS, "tblPr")
34802
35179
  );
34803
35180
  const shd = getFirstChildByTagNameNS(tcPr, WORD_NS, "shd");
34804
- const fill = parseShdFill(shd);
35181
+ const fill = parseShdFill(shd, theme.colors);
34805
35182
  const condTextStyle = parseRunStyle(
34806
35183
  getFirstChildByTagNameNS(tblStylePr, WORD_NS, "rPr"),
34807
35184
  theme
@@ -34812,7 +35189,8 @@ function parseImportedStyles(stylesXml, theme) {
34812
35189
  )
34813
35190
  );
34814
35191
  const condParagraphStyle = parseParagraphStyle$1(
34815
- getFirstChildByTagNameNS(tblStylePr, WORD_NS, "pPr")
35192
+ getFirstChildByTagNameNS(tblStylePr, WORD_NS, "pPr"),
35193
+ theme.colors
34816
35194
  );
34817
35195
  const condRowStyle = parseTableRowStyle(
34818
35196
  getFirstChildByTagNameNS(tblStylePr, WORD_NS, "trPr")
@@ -36307,7 +36685,7 @@ async function parseParagraphNodes(paragraphNode, numberingMaps, zip, relsMap, a
36307
36685
  parseNestedBlocks
36308
36686
  );
36309
36687
  const parsedStyle = withDocxImplicitSingleLineHeight(
36310
- parseParagraphStyle$1(paragraphProperties)
36688
+ parseParagraphStyle$1(paragraphProperties, theme.colors)
36311
36689
  );
36312
36690
  const markRunStyle = parseRunStyle(
36313
36691
  getFirstChildByTagNameNS(paragraphProperties, WORD_NS, "rPr"),
@@ -36464,7 +36842,7 @@ async function parseTableNode(tableNode, numberingMaps, zip, relsMap, assets, th
36464
36842
  continue;
36465
36843
  }
36466
36844
  const vMerge = getTableCellVMerge(cellProperties);
36467
- const cellStyle = parseTableCellStyle(cellProperties);
36845
+ const cellStyle = parseTableCellStyle(cellProperties, void 0, theme.colors);
36468
36846
  const cell = createEditorTableCell(
36469
36847
  paragraphs.length > 0 ? paragraphs : [createEditorParagraphFromRuns([{ text: "" }])],
36470
36848
  colSpan,
@@ -37634,7 +38012,7 @@ function importDocxInWorker(buffer, options = {}) {
37634
38012
  const worker = new Worker(
37635
38013
  new URL(
37636
38014
  /* @vite-ignore */
37637
- "" + new URL("assets/importDocxWorker-GkXQ7kFj.js", import.meta.url).href,
38015
+ "" + new URL("assets/importDocxWorker-thqRCD9m.js", import.meta.url).href,
37638
38016
  import.meta.url
37639
38017
  ),
37640
38018
  {