oasis-editor 0.0.117 → 0.0.118

package/dist/{OasisEditorApp-DijR5F-O.js → OasisEditorApp-DxTXNB8H.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { E as EMPTY_PROJECTION_CONTEXT, d as domTextMeasurer, g as getProjectedParagraphBlockHeight, e as estimateTableBlockHeight, p as projectParagraphLayout, a as getPageBodyBottom, b as getPageBodyTop, c as getPageContentWidth, F as FOOTNOTE_MARKER_GUTTER_PX, f as getParagraphText, h as getBlockParagraphs, i as getRunFootnoteReference, l as listReferencedEndnotes, j as getFootnoteDisplayMarker, k as createProjectionContext, m as getDocumentSections, n as getRunField, o as projectBlocksLayout, u as useContext, s as splitProps, q as spread, r as mergeProps, t as memo, v as insert, w as createComponent, x as createRenderEffect, y as setAttribute, S as Show, z as className, A as For, B as createContext, C as template, D as createUniqueId, G as style, H as visitRun, I as assertNever, J as createSignal, K as createEditorStateFromDocument, L as createInitialEditorState, M as STANDARD_FONT_SIZES_PT, N as fontSizePxToPt, O as probeLocalFontFamilies, P as createEditorParagraphFromRuns, Q as isInlineObjectRun, R as createEditorStyledRun, T as getParagraphLength, U as getActiveZone, V as getActiveSectionIndex, W as getParagraphs, X as normalizeSelection, Y as positionToParagraphOffset, Z as paragraphOffsetToPosition, _ as clampPosition, $ as findParagraphIndex, a0 as createCollapsedSelection, a1 as isSelectionCollapsed, a2 as parseFontSizePtToPx, a3 as formatFontSizePt, a4 as createEditorParagraph, a5 as findParagraphTableLocation, a6 as buildTableCellLayout, a7 as PT_PER_PX, a8 as createEditorTableCell, a9 as createEditorTableRow, aa as createEditorTable, ab as PX_PER_POINT, ac as underlineStyleToCssDecorationStyle, ad as resolveImageSrc, ae as listKindForTag, af as isParagraphTag, ag as collectInlineRuns, ah as parseParagraphStyle, ai as getRunImage, aj as InlineShell, ak as BalloonShell, al as DocumentShell, am as createMemo, an as getCaretRectFromSnapshot, ao as getParagraphRectFromSnapshot, ap as CaretOverlay, aq as setStyleProperty, ar as Button, as as useI18n, at as createEffect, au as TextField, av as Dialog, aw as SelectField, ax as UNDERLINE_STYLE_OPTIONS, ay as delegateEvents, az as Checkbox, aA as Tabs, aB as FieldRow, aC as NumberField, aD as createStore, aE as reconcile, aF as addEventListener, aG as onMount, aH as onCleanup, aI as use, aJ as PluginUiHost, aK as OasisEditorEditor, aL as OasisBrandMark, aM as setPreciseFontPreference, aN as setWelcomeSeen, aO as enablePreciseFontMode, aP as TWIPS_PER_POINT, aQ as PX_PER_INCH, aR as TWIPS_PER_INCH, aS as normalizeHex6, aT as TABLE_CONDITIONAL_FLAG_ATTRIBUTES, aU as TABLE_BORDER_EDGE_KEYS, aV as resolveEffectiveParagraphStyle, aW as resolveEffectiveTextStyleForParagraph, aX as EMU_PER_PT, aY as OOXML_ROTATION_UNITS, aZ as OOXML_PERCENT_DENOMINATOR, a_ as parseHexColorToRgb255, a$ as EMU_PER_PX, b0 as getRunEndnoteReference, b1 as iterateFootnoteReferenceRuns, b2 as iterateEndnoteReferenceRuns, b3 as imageContentTypeDefaults, b4 as getRunFieldChar, b5 as getRunFieldInstruction, b6 as createEditorRun, b7 as JSZip, b8 as imageExtensionFromMime, b9 as pxToPt$1, ba as resolveFloatingObjectRect, bb as getTextBoxFloatingGeometry, bc as getPresetPathSegments, bd as buildListLabels, be as DEFAULT_FONT_SIZE_PX, bf as resolveGradientAxis, bg as isDoubleUnderlineStyle, bh as isWavyUnderlineStyle, bi as underlineStyleLineWidthPx, bj as WAVY_UNDERLINE_WAVELENGTH_PX, bk as WAVY_UNDERLINE_AMPLITUDE_PX, bl as DOUBLE_UNDERLINE_OFFSET_PX, bm as underlineStyleDashArray, bn as EMPHASIS_GLYPH, bo as rgb255ToHex, bp as getImageFloatingGeometry, bq as textStyleToFontSizePt, br as TEXT_BASELINE_RATIO, bs as resolveOpenTypeFeatureTags, bt as resolveDecorationLineY, bu as DOUBLE_STRIKE_OFFSET_PX, bv as resolveListLabel, bw as getListLabelInset, bx as getAlignedListLabelInset, by as getParagraphBorderInsets, bz as buildSegmentTable, bA as buildCanvasTableLayout, bB as resolveCanvasTableWidth, bC as resolveFloatingTableRect, bD as normalizeFamily, bE as ROBOTO_FONT_FILES, bF as loadFontAsset, bG as OFFICE_COMPAT_FONT_FAMILIES, bH as BinaryReader, bI as buildSfnt, bJ as defaultFontDecoderRegistry, bK as SfntFontProgram, bL as collectPdfFontFamilies, bM as outlineFrom, bN as getPageHeaderZoneTop, bO as getPageColumnRects, bP as findFootnoteReference, bQ as resolveImporterForFile, bR as roundTo, bS as getDocumentSectionsCanonical, bT as getDocumentParagraphsCanonical, bU as getDocumentParagraphs, bV as getDocumentPageSettings, bW as getTableCellContentWidthForParagraph, bX as layoutMetricsEpoch, bY as bumpLayoutMetricsEpoch, bZ as createCanvasLayoutSnapshotProvider, b_ as on, b$ as debounce, c0 as unwrap, c1 as perfTimer, c2 as getRunTextBox, c3 as createEditorDocument, c4 as resolveResizedDimensions, c5 as resolveTextBoxRenderHeight, c6 as getToolbarStyleState, c7 as VERTICAL_HIT_WEIGHT, c8 as getCachedCanvasImage, c9 as measureParagraphMinContentWidthPx, ca as getEditableBlocksForZone, cb as findParagraphLocation, cc as createSectionBoundaryParagraph, cd as normalizePageSettings, ce as DEFAULT_EDITOR_PAGE_SETTINGS, cf as markStart, cg as markEnd, ch as getParagraphEntries, ci as getParagraphById, cj as createEditorFootnote, ck as createFootnoteReferenceRun, cl as renumberFootnotes, cm as getHeadingLevel, cn as preciseFontModeVersion, co as isPreciseFontModeEnabled, cp as resolveNamedTextStyle, cq as togglePreciseFontMode, cr as nextFontSizePt, cs as previousFontSizePt, ct as fontSizePtToPx, cu as createDefaultToolbarPreset, cv as MenuRegistry, cw as createToolbarRegistry, cx as Editor, cy as resolveCommandRef, cz as commandRefName, cA as createOasisEditorClient, cB as createEditorZoom, cC as startLongTaskObserver, cD as installGlobalReport, cE as applyStoredPreciseFontPreference, cF as getWelcomeSeen, cG as isLocalFontAccessSupported, cH as EDITOR_SCROLL_PADDING_PX, cI as Toolbar, cJ as OasisEditorLoading, cK as I18nProvider, cL as createTranslator, cM as createEditorLogger, cN as registerDomStatsSurface } from "./index-Comlrue1.js";
+import { E as EMPTY_PROJECTION_CONTEXT, d as domTextMeasurer, g as getProjectedParagraphBlockHeight, e as estimateTableBlockHeight, p as projectParagraphLayout, a as getPageBodyBottom, b as getPageBodyTop, c as getPageContentWidth, F as FOOTNOTE_MARKER_GUTTER_PX, f as getParagraphText, h as getBlockParagraphs, i as getRunFootnoteReference, l as listReferencedEndnotes, j as getFootnoteDisplayMarker, k as createProjectionContext, m as getDocumentSections, n as getRunField, o as projectBlocksLayout, u as useContext, s as splitProps, q as spread, r as mergeProps, t as memo, v as insert, w as createComponent, x as createRenderEffect, y as setAttribute, S as Show, z as className, A as For, B as createContext, C as template, D as createUniqueId, G as style, H as visitRun, I as assertNever, J as createSignal, K as createEditorStateFromDocument, L as createInitialEditorState, M as STANDARD_FONT_SIZES_PT, N as fontSizePxToPt, O as probeLocalFontFamilies, P as createEditorParagraphFromRuns, Q as isInlineObjectRun, R as createEditorStyledRun, T as getParagraphLength, U as getActiveZone, V as getActiveSectionIndex, W as getParagraphs, X as normalizeSelection, Y as positionToParagraphOffset, Z as paragraphOffsetToPosition, _ as clampPosition, $ as findParagraphIndex, a0 as createCollapsedSelection, a1 as isSelectionCollapsed, a2 as parseFontSizePtToPx, a3 as formatFontSizePt, a4 as createEditorParagraph, a5 as findParagraphTableLocation, a6 as buildTableCellLayout, a7 as PT_PER_PX, a8 as createEditorTableCell, a9 as createEditorTableRow, aa as createEditorTable, ab as PX_PER_POINT, ac as underlineStyleToCssDecorationStyle, ad as resolveImageSrc, ae as listKindForTag, af as isParagraphTag, ag as collectInlineRuns, ah as parseParagraphStyle, ai as getRunImage, aj as InlineShell, ak as BalloonShell, al as DocumentShell, am as createMemo, an as getCaretRectFromSnapshot, ao as getParagraphRectFromSnapshot, ap as CaretOverlay, aq as setStyleProperty, ar as Button, as as useI18n, at as createEffect, au as TextField, av as Dialog, aw as SelectField, ax as UNDERLINE_STYLE_OPTIONS, ay as delegateEvents, az as Text, aA as Checkbox, aB as StatusText, aC as FieldGroup, aD as Tabs, aE as FieldRow, aF as NumberField, aG as createStore, aH as reconcile, aI as TextAreaField, aJ as SurfaceButton, aK as ActionRow, aL as onMount, aM as onCleanup, aN as use, aO as PluginUiHost, aP as OasisEditorEditor, aQ as OasisBrandMark, aR as setPreciseFontPreference, aS as setWelcomeSeen, aT as enablePreciseFontMode, aU as TWIPS_PER_POINT, aV as PX_PER_INCH, aW as TWIPS_PER_INCH, aX as normalizeHex6, aY as TABLE_CONDITIONAL_FLAG_ATTRIBUTES, aZ as TABLE_BORDER_EDGE_KEYS, a_ as resolveEffectiveParagraphStyle, a$ as resolveEffectiveTextStyleForParagraph, b0 as EMU_PER_PT, b1 as OOXML_ROTATION_UNITS, b2 as OOXML_PERCENT_DENOMINATOR, b3 as parseHexColorToRgb255, b4 as EMU_PER_PX, b5 as getRunEndnoteReference, b6 as iterateFootnoteReferenceRuns, b7 as iterateEndnoteReferenceRuns, b8 as imageContentTypeDefaults, b9 as getRunFieldChar, ba as getRunFieldInstruction, bb as createEditorRun, bc as JSZip, bd as imageExtensionFromMime, be as pxToPt$1, bf as resolveFloatingObjectRect, bg as getTextBoxFloatingGeometry, bh as getPresetPathSegments, bi as buildListLabels, bj as DEFAULT_FONT_SIZE_PX, bk as resolveGradientAxis, bl as isDoubleUnderlineStyle, bm as isWavyUnderlineStyle, bn as underlineStyleLineWidthPx, bo as WAVY_UNDERLINE_WAVELENGTH_PX, bp as WAVY_UNDERLINE_AMPLITUDE_PX, bq as DOUBLE_UNDERLINE_OFFSET_PX, br as underlineStyleDashArray, bs as EMPHASIS_GLYPH, bt as rgb255ToHex, bu as getImageFloatingGeometry, bv as textStyleToFontSizePt, bw as TEXT_BASELINE_RATIO, bx as resolveOpenTypeFeatureTags, by as resolveDecorationLineY, bz as DOUBLE_STRIKE_OFFSET_PX, bA as resolveListLabel, bB as getListLabelInset, bC as getAlignedListLabelInset, bD as getParagraphBorderInsets, bE as buildSegmentTable, bF as buildCanvasTableLayout, bG as resolveCanvasTableWidth, bH as resolveFloatingTableRect, bI as normalizeFamily, bJ as ROBOTO_FONT_FILES, bK as loadFontAsset, bL as OFFICE_COMPAT_FONT_FAMILIES, bM as BinaryReader, bN as buildSfnt, bO as defaultFontDecoderRegistry, bP as SfntFontProgram, bQ as collectPdfFontFamilies, bR as outlineFrom, bS as getPageHeaderZoneTop, bT as getPageColumnRects, bU as findFootnoteReference, bV as resolveImporterForFile, bW as roundTo, bX as getDocumentSectionsCanonical, bY as getDocumentParagraphsCanonical, bZ as getDocumentParagraphs, b_ as getDocumentPageSettings, b$ as getTableCellContentWidthForParagraph, c0 as layoutMetricsEpoch, c1 as bumpLayoutMetricsEpoch, c2 as createCanvasLayoutSnapshotProvider, c3 as on, c4 as debounce, c5 as unwrap, c6 as perfTimer, c7 as getRunTextBox, c8 as createEditorDocument, c9 as resolveResizedDimensions, ca as resolveTextBoxRenderHeight, cb as getToolbarStyleState, cc as VERTICAL_HIT_WEIGHT, cd as getCachedCanvasImage, ce as measureParagraphMinContentWidthPx, cf as getEditableBlocksForZone, cg as findParagraphLocation, ch as createSectionBoundaryParagraph, ci as normalizePageSettings, cj as DEFAULT_EDITOR_PAGE_SETTINGS, ck as markStart, cl as markEnd, cm as getParagraphEntries, cn as getParagraphById, co as createEditorFootnote, cp as createFootnoteReferenceRun, cq as renumberFootnotes, cr as getHeadingLevel, cs as preciseFontModeVersion, ct as isPreciseFontModeEnabled, cu as resolveNamedTextStyle, cv as togglePreciseFontMode, cw as nextFontSizePt, cx as previousFontSizePt, cy as fontSizePtToPx, cz as createDefaultToolbarPreset, cA as MenuRegistry, cB as createToolbarRegistry, cC as Editor, cD as resolveCommandRef, cE as commandRefName, cF as createOasisEditorClient, cG as createEditorZoom, cH as startLongTaskObserver, cI as installGlobalReport, cJ as applyStoredPreciseFontPreference, cK as getWelcomeSeen, cL as isLocalFontAccessSupported, cM as EDITOR_SCROLL_PADDING_PX, cN as Toolbar, cO as OasisEditorLoading, cP as I18nProvider, cQ as createTranslator, cR as createEditorLogger, cS as registerDomStatsSurface } from "./index-DxemmUXw.js";
 function projectHeaderFooterBlocksWithDependencies(blocks, deps, context = {}) {
   const {
     pageIndex,
@@ -606,7 +606,7 @@ function projectDocumentLayout(document2, maxPageHeightOverride, measuredHeights
     pages: applyFootnotesToPages(pages, footnoteContext)
   };
 }
-var _tmpl$$g = /* @__PURE__ */ template(`<span class=oasis-editor-ui-field-description>`), _tmpl$2$4 = /* @__PURE__ */ template(`<label><input type=radio class=oasis-editor-ui-radio-input><span class=oasis-editor-ui-checkbox-copy><span class=oasis-editor-ui-field-label>`), _tmpl$3$3 = /* @__PURE__ */ template(`<span class=oasis-editor-ui-field-label>`), _tmpl$4$1 = /* @__PURE__ */ template(`<div role=radiogroup>`);
+var _tmpl$$g = /* @__PURE__ */ template(`<span class=oasis-editor-ui-field-description>`), _tmpl$2$6 = /* @__PURE__ */ template(`<label><input type=radio class=oasis-editor-ui-radio-input><span class=oasis-editor-ui-checkbox-copy><span class=oasis-editor-ui-field-label>`), _tmpl$3$5 = /* @__PURE__ */ template(`<span class=oasis-editor-ui-field-label>`), _tmpl$4$2 = /* @__PURE__ */ template(`<div role=radiogroup>`);
 const RadioGroupCtx = createContext();
 function Radio$1(props) {
   const fallbackId = createUniqueId();
@@ -617,7 +617,7 @@ function Radio$1(props) {
   const checked = () => group ? group.value() === local.value : Boolean(local.checked);
   const disabled = () => Boolean(local.disabled) || (group ? group.disabled() : false);
   return (() => {
-    var _el$ = _tmpl$2$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+    var _el$ = _tmpl$2$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
     _el$2.addEventListener("change", (event) => {
       var _a2;
       if (group) group.onSelect(local.value);
@@ -681,13 +681,13 @@ function RadioGroup(props) {
   return createComponent(RadioGroupCtx.Provider, {
     value: ctx,
     get children() {
-      var _el$6 = _tmpl$4$1();
+      var _el$6 = _tmpl$4$2();
       insert(_el$6, createComponent(Show, {
         get when() {
           return props.label;
         },
         get children() {
-          var _el$7 = _tmpl$3$3();
+          var _el$7 = _tmpl$3$5();
           insert(_el$7, () => props.label);
           return _el$7;
         }
@@ -31448,7 +31448,7 @@ function DropCaret(props) {
     })
   });
 }
-var _tmpl$$e = /* @__PURE__ */ template(`<div class=oasis-editor-table-resize-guide>`), _tmpl$2$3 = /* @__PURE__ */ template(`<img class=oasis-editor-image-ghost>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class=oasis-editor-table-ghost>`);
+var _tmpl$$e = /* @__PURE__ */ template(`<div class=oasis-editor-table-resize-guide>`), _tmpl$2$5 = /* @__PURE__ */ template(`<img class=oasis-editor-image-ghost>`), _tmpl$3$4 = /* @__PURE__ */ template(`<div class=oasis-editor-table-ghost>`);
 function EditorDragLayers(props) {
   return [createComponent(Show, {
     get when() {
@@ -31486,7 +31486,7 @@ function EditorDragLayers(props) {
       return memo(() => !!props.imageOps.dragging())() && props.imageOps.draggedImageInfo();
     },
     children: (info) => (() => {
-      var _el$2 = _tmpl$2$3();
+      var _el$2 = _tmpl$2$5();
       createRenderEffect((_p$) => {
         var _v$4 = info().src, _v$5 = `${info().width}px`, _v$6 = `${info().height}px`, _v$7 = `${props.imageOps.mousePos().x - info().offsetX}px`, _v$8 = `${props.imageOps.mousePos().y - info().offsetY}px`;
         _v$4 !== _p$.e && setAttribute(_el$2, "src", _p$.e = _v$4);
@@ -31509,7 +31509,7 @@ function EditorDragLayers(props) {
       return memo(() => !!props.tableDrag.dragging())() && props.tableDrag.draggedTableInfo();
     },
     children: (info) => (() => {
-      var _el$3 = _tmpl$3$2();
+      var _el$3 = _tmpl$3$4();
       createRenderEffect((_p$) => {
         var _v$9 = `${info().width}px`, _v$0 = `${info().height}px`, _v$1 = `${props.tableDrag.mousePos().x - info().offsetX}px`, _v$10 = `${props.tableDrag.mousePos().y - info().offsetY}px`;
         _v$9 !== _p$.e && setStyleProperty(_el$3, "width", _p$.e = _v$9);
@@ -32395,229 +32395,332 @@ function FontTab(props) {
   })();
 }
 delegateEvents(["input"]);
-var _tmpl$$b = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-advanced-panel"><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><label class="oasis-editor-dialog-label oasis-editor-font-dialog-by-label"></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><label class="oasis-editor-dialog-label oasis-editor-font-dialog-by-label"></label></div><div class="oasis-editor-font-dialog-word-row oasis-editor-font-dialog-kerning-row"><span class="oasis-editor-dialog-help-text oasis-editor-font-dialog-kerning-suffix"></span></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend></fieldset><p class=oasis-editor-dialog-help-text data-testid=editor-font-dialog-advanced-placeholder>`);
+var _tmpl$$b = /* @__PURE__ */ template(`<div class=oasis-editor-font-dialog-word-row>`), _tmpl$2$4 = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-word-row oasis-editor-font-dialog-kerning-row">`), _tmpl$3$3 = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-advanced-panel">`);
 function AdvancedFontTab(props) {
   const t = useI18n();
   const {
     ctrl
   } = props;
   return (() => {
-    var _el$ = _tmpl$$b(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$9.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$2.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$12.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling;
-    insert(_el$3, () => t("dialog.font.advancedCharacterSpacingGroup"));
-    insert(_el$5, () => t("dialog.font.advancedScale"));
-    insert(_el$4, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().characterScale || "100";
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("characterScale", value),
-      "data-testid": "editor-font-dialog-advanced-scale",
-      get options() {
-        return WORD_CHARACTER_SCALES.map((scale) => ({
-          value: String(scale),
-          label: `${scale}%`
-        }));
-      }
-    }), null);
-    insert(_el$7, () => t("dialog.font.advancedSpacing"));
-    insert(_el$6, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().spacingMode;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("spacingMode", value),
-      "data-testid": "editor-font-dialog-advanced-spacing-mode",
-      get options() {
-        return [{
-          value: "normal",
-          label: t("dialog.font.advancedNormal")
-        }, {
-          value: "expanded",
-          label: t("dialog.font.advancedExpanded")
-        }, {
-          value: "condensed",
-          label: t("dialog.font.advancedCondensed")
-        }];
-      }
-    }), _el$8);
-    insert(_el$8, () => t("dialog.font.advancedBy"));
-    insert(_el$6, createComponent(TextField, {
-      "class": "oasis-editor-font-dialog-small-input",
-      get value() {
-        return ctrl.advancedTabValues().spacingAmount;
-      },
-      get disabled() {
-        return ctrl.advancedTabValues().spacingMode === "normal";
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("spacingAmount", value),
-      "data-testid": "editor-font-dialog-advanced-spacing-amount"
-    }), null);
-    insert(_el$0, () => t("dialog.font.advancedPosition"));
-    insert(_el$9, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().positionMode;
+    var _el$ = _tmpl$3$3();
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedCharacterSpacingGroup");
       },
-      onChange: (value) => ctrl.updateAdvancedTab("positionMode", value),
-      "data-testid": "editor-font-dialog-advanced-position-mode",
-      get options() {
-        return [{
-          value: "normal",
-          label: t("dialog.font.advancedNormal")
-        }, {
-          value: "raised",
-          label: t("dialog.font.advancedRaised")
-        }, {
-          value: "lowered",
-          label: t("dialog.font.advancedLowered")
-        }];
-      }
-    }), _el$1);
-    insert(_el$1, () => t("dialog.font.advancedBy"));
-    insert(_el$9, createComponent(TextField, {
-      "class": "oasis-editor-font-dialog-small-input",
-      get value() {
-        return ctrl.advancedTabValues().positionAmount;
-      },
-      get disabled() {
-        return ctrl.advancedTabValues().positionMode === "normal";
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("positionAmount", value),
-      "data-testid": "editor-font-dialog-advanced-position-amount"
-    }), null);
-    insert(_el$10, createComponent(Checkbox, {
-      "class": "oasis-editor-font-dialog-kerning-toggle",
-      get label() {
-        return t("dialog.font.advancedKerning");
-      },
-      get checked() {
-        return ctrl.advancedTabValues().kerningEnabled;
-      },
-      onChange: (checked) => ctrl.setAdvancedTabValues((current) => ({
-        ...current,
-        kerningEnabled: checked,
-        kerningThreshold: checked ? current.kerningThreshold || "1" : current.kerningThreshold
-      })),
-      "data-testid": "editor-font-dialog-advanced-kerning-enabled"
-    }), _el$11);
-    insert(_el$10, createComponent(TextField, {
-      "class": "oasis-editor-font-dialog-kerning-input",
-      get value() {
-        return ctrl.advancedTabValues().kerningThreshold;
-      },
-      get disabled() {
-        return !ctrl.advancedTabValues().kerningEnabled;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("kerningThreshold", value),
-      "data-testid": "editor-font-dialog-advanced-kerning"
-    }), _el$11);
-    insert(_el$11, () => t("dialog.font.advancedKerningAbove"));
-    insert(_el$13, () => t("dialog.font.advancedOpenTypeGroup"));
-    insert(_el$15, () => t("dialog.font.advancedLigatures"));
-    insert(_el$14, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().ligatures;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("ligatures", value),
-      "data-testid": "editor-font-dialog-advanced-ligatures",
-      get options() {
-        return [{
-          value: "",
-          label: t("dialog.font.advancedDefault")
-        }, {
-          value: "none",
-          label: t("dialog.font.advancedLigaturesNone")
-        }, {
-          value: "standard",
-          label: t("dialog.font.advancedLigaturesStandard")
-        }, {
-          value: "contextual",
-          label: t("dialog.font.advancedLigaturesContextual")
-        }, {
-          value: "historical",
-          label: t("dialog.font.advancedLigaturesHistorical")
-        }, {
-          value: "standardContextual",
-          label: t("dialog.font.advancedLigaturesStandardContextual")
-        }];
-      }
-    }), null);
-    insert(_el$17, () => t("dialog.font.advancedNumberSpacing"));
-    insert(_el$16, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().numberSpacing;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("numberSpacing", value),
-      "data-testid": "editor-font-dialog-advanced-number-spacing",
-      get options() {
-        return [{
-          value: "",
-          label: t("dialog.font.advancedDefault")
-        }, {
-          value: "proportional",
-          label: t("dialog.font.advancedNumberSpacingProportional")
-        }, {
-          value: "tabular",
-          label: t("dialog.font.advancedNumberSpacingTabular")
-        }];
+      get children() {
+        return [(() => {
+          var _el$2 = _tmpl$$b();
+          insert(_el$2, createComponent(Text, {
+            "class": "oasis-editor-dialog-label",
+            get children() {
+              return t("dialog.font.advancedScale");
+            }
+          }), null);
+          insert(_el$2, createComponent(SelectField, {
+            get value() {
+              return ctrl.advancedTabValues().characterScale || "100";
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("characterScale", value),
+            "data-testid": "editor-font-dialog-advanced-scale",
+            get options() {
+              return WORD_CHARACTER_SCALES.map((scale) => ({
+                value: String(scale),
+                label: `${scale}%`
+              }));
+            }
+          }), null);
+          return _el$2;
+        })(), (() => {
+          var _el$3 = _tmpl$$b();
+          insert(_el$3, createComponent(Text, {
+            "class": "oasis-editor-dialog-label",
+            get children() {
+              return t("dialog.font.advancedSpacing");
+            }
+          }), null);
+          insert(_el$3, createComponent(SelectField, {
+            get value() {
+              return ctrl.advancedTabValues().spacingMode;
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("spacingMode", value),
+            "data-testid": "editor-font-dialog-advanced-spacing-mode",
+            get options() {
+              return [{
+                value: "normal",
+                label: t("dialog.font.advancedNormal")
+              }, {
+                value: "expanded",
+                label: t("dialog.font.advancedExpanded")
+              }, {
+                value: "condensed",
+                label: t("dialog.font.advancedCondensed")
+              }];
+            }
+          }), null);
+          insert(_el$3, createComponent(Text, {
+            "class": "oasis-editor-dialog-label oasis-editor-font-dialog-by-label",
+            get children() {
+              return t("dialog.font.advancedBy");
+            }
+          }), null);
+          insert(_el$3, createComponent(TextField, {
+            "class": "oasis-editor-font-dialog-small-input",
+            get value() {
+              return ctrl.advancedTabValues().spacingAmount;
+            },
+            get disabled() {
+              return ctrl.advancedTabValues().spacingMode === "normal";
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("spacingAmount", value),
+            "data-testid": "editor-font-dialog-advanced-spacing-amount"
+          }), null);
+          return _el$3;
+        })(), (() => {
+          var _el$4 = _tmpl$$b();
+          insert(_el$4, createComponent(Text, {
+            "class": "oasis-editor-dialog-label",
+            get children() {
+              return t("dialog.font.advancedPosition");
+            }
+          }), null);
+          insert(_el$4, createComponent(SelectField, {
+            get value() {
+              return ctrl.advancedTabValues().positionMode;
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("positionMode", value),
+            "data-testid": "editor-font-dialog-advanced-position-mode",
+            get options() {
+              return [{
+                value: "normal",
+                label: t("dialog.font.advancedNormal")
+              }, {
+                value: "raised",
+                label: t("dialog.font.advancedRaised")
+              }, {
+                value: "lowered",
+                label: t("dialog.font.advancedLowered")
+              }];
+            }
+          }), null);
+          insert(_el$4, createComponent(Text, {
+            "class": "oasis-editor-dialog-label oasis-editor-font-dialog-by-label",
+            get children() {
+              return t("dialog.font.advancedBy");
+            }
+          }), null);
+          insert(_el$4, createComponent(TextField, {
+            "class": "oasis-editor-font-dialog-small-input",
+            get value() {
+              return ctrl.advancedTabValues().positionAmount;
+            },
+            get disabled() {
+              return ctrl.advancedTabValues().positionMode === "normal";
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("positionAmount", value),
+            "data-testid": "editor-font-dialog-advanced-position-amount"
+          }), null);
+          return _el$4;
+        })(), (() => {
+          var _el$5 = _tmpl$2$4();
+          insert(_el$5, createComponent(Checkbox, {
+            "class": "oasis-editor-font-dialog-kerning-toggle",
+            get label() {
+              return t("dialog.font.advancedKerning");
+            },
+            get checked() {
+              return ctrl.advancedTabValues().kerningEnabled;
+            },
+            onChange: (checked) => ctrl.setAdvancedTabValues((current) => ({
+              ...current,
+              kerningEnabled: checked,
+              kerningThreshold: checked ? current.kerningThreshold || "1" : current.kerningThreshold
+            })),
+            "data-testid": "editor-font-dialog-advanced-kerning-enabled"
+          }), null);
+          insert(_el$5, createComponent(TextField, {
+            "class": "oasis-editor-font-dialog-kerning-input",
+            get value() {
+              return ctrl.advancedTabValues().kerningThreshold;
+            },
+            get disabled() {
+              return !ctrl.advancedTabValues().kerningEnabled;
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("kerningThreshold", value),
+            "data-testid": "editor-font-dialog-advanced-kerning"
+          }), null);
+          insert(_el$5, createComponent(StatusText, {
+            "class": "oasis-editor-dialog-help-text oasis-editor-font-dialog-kerning-suffix",
+            get children() {
+              return t("dialog.font.advancedKerningAbove");
+            }
+          }), null);
+          return _el$5;
+        })()];
       }
     }), null);
-    insert(_el$19, () => t("dialog.font.advancedNumberForm"));
-    insert(_el$18, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().numberForm;
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedOpenTypeGroup");
       },
-      onChange: (value) => ctrl.updateAdvancedTab("numberForm", value),
-      "data-testid": "editor-font-dialog-advanced-number-form",
-      get options() {
-        return [{
-          value: "",
-          label: t("dialog.font.advancedDefault")
-        }, {
-          value: "lining",
-          label: t("dialog.font.advancedNumberFormLining")
-        }, {
-          value: "oldStyle",
-          label: t("dialog.font.advancedNumberFormOldStyle")
-        }];
+      get children() {
+        return [(() => {
+          var _el$6 = _tmpl$$b();
+          insert(_el$6, createComponent(Text, {
+            "class": "oasis-editor-dialog-label",
+            get children() {
+              return t("dialog.font.advancedLigatures");
+            }
+          }), null);
+          insert(_el$6, createComponent(SelectField, {
+            get value() {
+              return ctrl.advancedTabValues().ligatures;
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("ligatures", value),
+            "data-testid": "editor-font-dialog-advanced-ligatures",
+            get options() {
+              return [{
+                value: "",
+                label: t("dialog.font.advancedDefault")
+              }, {
+                value: "none",
+                label: t("dialog.font.advancedLigaturesNone")
+              }, {
+                value: "standard",
+                label: t("dialog.font.advancedLigaturesStandard")
+              }, {
+                value: "contextual",
+                label: t("dialog.font.advancedLigaturesContextual")
+              }, {
+                value: "historical",
+                label: t("dialog.font.advancedLigaturesHistorical")
+              }, {
+                value: "standardContextual",
+                label: t("dialog.font.advancedLigaturesStandardContextual")
+              }];
+            }
+          }), null);
+          return _el$6;
+        })(), (() => {
+          var _el$7 = _tmpl$$b();
+          insert(_el$7, createComponent(Text, {
+            "class": "oasis-editor-dialog-label",
+            get children() {
+              return t("dialog.font.advancedNumberSpacing");
+            }
+          }), null);
+          insert(_el$7, createComponent(SelectField, {
+            get value() {
+              return ctrl.advancedTabValues().numberSpacing;
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("numberSpacing", value),
+            "data-testid": "editor-font-dialog-advanced-number-spacing",
+            get options() {
+              return [{
+                value: "",
+                label: t("dialog.font.advancedDefault")
+              }, {
+                value: "proportional",
+                label: t("dialog.font.advancedNumberSpacingProportional")
+              }, {
+                value: "tabular",
+                label: t("dialog.font.advancedNumberSpacingTabular")
+              }];
+            }
+          }), null);
+          return _el$7;
+        })(), (() => {
+          var _el$8 = _tmpl$$b();
+          insert(_el$8, createComponent(Text, {
+            "class": "oasis-editor-dialog-label",
+            get children() {
+              return t("dialog.font.advancedNumberForm");
+            }
+          }), null);
+          insert(_el$8, createComponent(SelectField, {
+            get value() {
+              return ctrl.advancedTabValues().numberForm;
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("numberForm", value),
+            "data-testid": "editor-font-dialog-advanced-number-form",
+            get options() {
+              return [{
+                value: "",
+                label: t("dialog.font.advancedDefault")
+              }, {
+                value: "lining",
+                label: t("dialog.font.advancedNumberFormLining")
+              }, {
+                value: "oldStyle",
+                label: t("dialog.font.advancedNumberFormOldStyle")
+              }];
+            }
+          }), null);
+          return _el$8;
+        })(), (() => {
+          var _el$9 = _tmpl$$b();
+          insert(_el$9, createComponent(Text, {
+            "class": "oasis-editor-dialog-label",
+            get children() {
+              return t("dialog.font.advancedStylisticSet");
+            }
+          }), null);
+          insert(_el$9, createComponent(SelectField, {
+            get value() {
+              return ctrl.advancedTabValues().stylisticSet;
+            },
+            onChange: (value) => ctrl.updateAdvancedTab("stylisticSet", value),
+            "data-testid": "editor-font-dialog-advanced-stylistic-set",
+            get options() {
+              return [{
+                value: "",
+                label: t("dialog.font.advancedDefault")
+              }, ...Array.from({
+                length: 20
+              }, (_, index) => index + 1).map((set) => ({
+                value: String(set),
+                label: String(set)
+              }))];
+            }
+          }), null);
+          return _el$9;
+        })(), createComponent(Checkbox, {
+          "class": "oasis-editor-font-dialog-contextual-toggle",
+          get label() {
+            return t("dialog.font.advancedContextualAlternates");
+          },
+          get checked() {
+            return ctrl.advancedTabValues().contextualAlternates;
+          },
+          onChange: (checked) => ctrl.updateAdvancedTab("contextualAlternates", checked),
+          "data-testid": "editor-font-dialog-advanced-contextual-alternates"
+        })];
       }
     }), null);
-    insert(_el$21, () => t("dialog.font.advancedStylisticSet"));
-    insert(_el$20, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().stylisticSet;
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedPreviewGroup");
       },
-      onChange: (value) => ctrl.updateAdvancedTab("stylisticSet", value),
-      "data-testid": "editor-font-dialog-advanced-stylistic-set",
-      get options() {
-        return [{
-          value: "",
-          label: t("dialog.font.advancedDefault")
-        }, ...Array.from({
-          length: 20
-        }, (_, index) => index + 1).map((set) => ({
-          value: String(set),
-          label: String(set)
-        }))];
+      get children() {
+        return createComponent(FontPreview, {
+          "class": "oasis-editor-dialog-preview oasis-editor-font-dialog-advanced-preview",
+          testId: "editor-font-dialog-advanced-preview",
+          get style() {
+            return ctrl.previewStyle();
+          }
+        });
       }
     }), null);
-    insert(_el$12, createComponent(Checkbox, {
-      "class": "oasis-editor-font-dialog-contextual-toggle",
-      get label() {
-        return t("dialog.font.advancedContextualAlternates");
-      },
-      get checked() {
-        return ctrl.advancedTabValues().contextualAlternates;
-      },
-      onChange: (checked) => ctrl.updateAdvancedTab("contextualAlternates", checked),
-      "data-testid": "editor-font-dialog-advanced-contextual-alternates"
-    }), null);
-    insert(_el$23, () => t("dialog.font.advancedPreviewGroup"));
-    insert(_el$22, createComponent(FontPreview, {
-      "class": "oasis-editor-dialog-preview oasis-editor-font-dialog-advanced-preview",
-      testId: "editor-font-dialog-advanced-preview",
-      get style() {
-        return ctrl.previewStyle();
+    insert(_el$, createComponent(StatusText, {
+      as: "p",
+      "class": "oasis-editor-dialog-help-text",
+      "data-testid": "editor-font-dialog-advanced-placeholder",
+      get children() {
+        return ctrl.advancedValidationError() || t("dialog.font.advancedPlaceholder");
       }
     }), null);
-    insert(_el$24, () => ctrl.advancedValidationError() || t("dialog.font.advancedPlaceholder"));
     return _el$;
   })();
 }
@@ -32686,7 +32789,7 @@ function FontDialog(props) {
     }
   });
 }
-var _tmpl$$a = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-border-color></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-shading>`), _tmpl$2$2 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><div class=oasis-editor-dialog-style-row>`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><div class=oasis-editor-dialog-preview data-testid=editor-paragraph-dialog-preview>`);
+var _tmpl$$a = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-border-color></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-shading>`), _tmpl$2$3 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><div class=oasis-editor-dialog-style-row>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><div class=oasis-editor-dialog-preview data-testid=editor-paragraph-dialog-preview>`);
 const DEFAULT_BORDER_WIDTH_PT$1 = 0.5;
 const DEFAULT_BORDER_COLOR$1 = "#000000";
 function parseNumber$1(value) {
@@ -33029,7 +33132,7 @@ function ParagraphDialog(props) {
         createRenderEffect(() => _el$7.value = shading() || "#ffffff");
         return _el$;
       })(), (() => {
-        var _el$8 = _tmpl$2$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
+        var _el$8 = _tmpl$2$3(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
         insert(_el$0, () => t("paragraph.borderSidesLabel"));
         insert(_el$1, createComponent(Checkbox, {
           get label() {
@@ -33085,7 +33188,7 @@ function ParagraphDialog(props) {
         }), null);
         return _el$8;
       })(), (() => {
-        var _el$10 = _tmpl$3$1(), _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling;
+        var _el$10 = _tmpl$3$2(), _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling;
         insert(_el$11, () => t("paragraph.preview"));
         insert(_el$12, () => t("paragraph.previewText"));
         createRenderEffect((_$p) => style(_el$12, previewStyle(), _$p));
@@ -33303,13 +33406,13 @@ function NumField(label, value, setter, testId, disabled = false, allowNegative
     "data-testid": testId
   });
 }
-var _tmpl$$9 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-style-row>`);
+var _tmpl$$9 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row>`), _tmpl$2$2 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-style-row>`);
 function TableTabPanel(props) {
   const t = useI18n();
   const form = () => props.ctrl.form;
   const set = props.ctrl.set;
   return (() => {
-    var _el$ = _tmpl$2$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$5.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
+    var _el$ = _tmpl$2$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$5.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
     insert(_el$3, () => t("table.sizeSection"));
     insert(_el$4, () => NumField(t("table.preferredWidth"), () => form().tableWidth, (v) => set("tableWidth", v), "editor-table-properties-table-width"), null);
     insert(_el$4, createComponent(SelectField, {
@@ -33567,7 +33670,7 @@ function ColumnTabPanel(props) {
     return _el$;
   })();
 }
-var _tmpl$$6 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row></div><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-style-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-table-properties-border-color></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-table-properties-shading></div></div><div class=oasis-editor-dialog-style-row></div><div class=oasis-editor-table-properties-cell-preview data-testid=editor-table-properties-cell-preview>`);
+var _tmpl$$6 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-style-row>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row>`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-cell-preview data-testid=editor-table-properties-cell-preview>`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row>`);
 function CellTabPanel(props) {
   const t = useI18n();
   const form = () => props.ctrl.form;
@@ -33585,7 +33688,7 @@ function CellTabPanel(props) {
   });
   const borderDisabled = () => form().borderStyle === "none";
   return (() => {
-    var _el$ = _tmpl$$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$10.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$1.nextSibling, _el$17 = _el$16.nextSibling;
+    var _el$ = _tmpl$4$1(), _el$2 = _el$.firstChild;
     insert(_el$2, () => NumField(t("table.cellWidth"), () => form().cellWidth, (v) => set("cellWidth", v), "editor-table-properties-cell-width"), null);
     insert(_el$2, createComponent(SelectField, {
       "class": "oasis-editor-dialog-input-group-grow",
@@ -33645,218 +33748,267 @@ function CellTabPanel(props) {
         }];
       }
     }), null);
-    insert(_el$4, () => t("table.options"));
-    insert(_el$5, createComponent(Checkbox, {
-      get label() {
-        return t("table.noWrap");
-      },
-      get checked() {
-        return form().cellNoWrap;
-      },
-      onChange: (v) => set("cellNoWrap", v),
-      "data-testid": "editor-table-properties-cell-nowrap"
-    }), null);
-    insert(_el$5, createComponent(Checkbox, {
-      get label() {
-        return t("table.fitText");
-      },
-      get checked() {
-        return form().cellFitText;
-      },
-      onChange: (v) => set("cellFitText", v),
-      "data-testid": "editor-table-properties-cell-fit-text"
-    }), null);
-    insert(_el$5, createComponent(Checkbox, {
-      get label() {
-        return t("table.hideMark");
-      },
-      get checked() {
-        return form().cellHideMark;
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.options");
       },
-      onChange: (v) => set("cellHideMark", v),
-      "data-testid": "editor-table-properties-cell-hide-mark"
-    }), null);
-    insert(_el$7, () => t("table.cellMargins"));
-    insert(_el$8, () => NumField(t("paragraph.borderSideTop"), () => form().marginTop, (v) => set("marginTop", v), "editor-table-properties-margin-top"), null);
-    insert(_el$8, () => NumField(t("paragraph.borderSideRight"), () => form().marginRight, (v) => set("marginRight", v), "editor-table-properties-margin-right"), null);
-    insert(_el$8, () => NumField(t("paragraph.borderSideBottom"), () => form().marginBottom, (v) => set("marginBottom", v), "editor-table-properties-margin-bottom"), null);
-    insert(_el$8, () => NumField(t("paragraph.borderSideLeft"), () => form().marginLeft, (v) => set("marginLeft", v), "editor-table-properties-margin-left"), null);
-    insert(_el$0, () => t("paragraph.bordersSection"));
-    insert(_el$1, createComponent(SelectField, {
-      "class": "oasis-editor-dialog-input-group-grow",
-      get label() {
-        return t("paragraph.borderStyleLabel");
-      },
-      get value() {
-        return form().borderStyle;
-      },
-      onChange: (value) => {
-        const next = value;
-        set("borderStyle", next);
-        if (next === "none") {
-          set("borderTop", false);
-          set("borderRight", false);
-          set("borderBottom", false);
-          set("borderLeft", false);
-          set("borderStart", false);
-          set("borderEnd", false);
-          set("borderTlBr", false);
-          set("borderTrBl", false);
-        } else if (!form().borderTop && !form().borderRight && !form().borderBottom && !form().borderLeft) {
-          set("borderTop", true);
-          set("borderRight", true);
-          set("borderBottom", true);
-          set("borderLeft", true);
-        }
-      },
-      "data-testid": "editor-table-properties-border-style",
-      get options() {
-        return [{
-          value: "none",
-          label: t("paragraph.borderNone")
-        }, {
-          value: "solid",
-          label: t("paragraph.borderSolid")
-        }, {
-          value: "dashed",
-          label: t("paragraph.borderDashed")
-        }, {
-          value: "dotted",
-          label: t("paragraph.borderDotted")
-        }];
+      get children() {
+        var _el$3 = _tmpl$$6();
+        insert(_el$3, createComponent(Checkbox, {
+          get label() {
+            return t("table.noWrap");
+          },
+          get checked() {
+            return form().cellNoWrap;
+          },
+          onChange: (v) => set("cellNoWrap", v),
+          "data-testid": "editor-table-properties-cell-nowrap"
+        }), null);
+        insert(_el$3, createComponent(Checkbox, {
+          get label() {
+            return t("table.fitText");
+          },
+          get checked() {
+            return form().cellFitText;
+          },
+          onChange: (v) => set("cellFitText", v),
+          "data-testid": "editor-table-properties-cell-fit-text"
+        }), null);
+        insert(_el$3, createComponent(Checkbox, {
+          get label() {
+            return t("table.hideMark");
+          },
+          get checked() {
+            return form().cellHideMark;
+          },
+          onChange: (v) => set("cellHideMark", v),
+          "data-testid": "editor-table-properties-cell-hide-mark"
+        }), null);
+        return _el$3;
       }
-    }), _el$10);
-    insert(_el$1, () => NumField(t("paragraph.borderWidthLabel"), () => form().borderWidth, (v) => set("borderWidth", v), "editor-table-properties-border-width", borderDisabled()), _el$10);
-    insert(_el$11, () => t("paragraph.borderColorLabel"));
-    _el$12.$$input = (e) => set("borderColor", e.currentTarget.value);
-    insert(_el$14, () => t("paragraph.shadingLabel"));
-    _el$15.$$input = (e) => set("shading", e.currentTarget.value);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("paragraph.borderSideTop");
-      },
-      get checked() {
-        return form().borderTop;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderTop", v),
-      "data-testid": "editor-table-properties-border-top"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("paragraph.borderSideRight");
-      },
-      get checked() {
-        return form().borderRight;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderRight", v),
-      "data-testid": "editor-table-properties-border-right"
     }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("paragraph.borderSideBottom");
-      },
-      get checked() {
-        return form().borderBottom;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderBottom", v),
-      "data-testid": "editor-table-properties-border-bottom"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("paragraph.borderSideLeft");
-      },
-      get checked() {
-        return form().borderLeft;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderLeft", v),
-      "data-testid": "editor-table-properties-border-left"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("table.borderStart");
-      },
-      get checked() {
-        return form().borderStart;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderStart", v),
-      "data-testid": "editor-table-properties-border-start"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("table.borderEnd");
-      },
-      get checked() {
-        return form().borderEnd;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderEnd", v),
-      "data-testid": "editor-table-properties-border-end"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("table.borderTlBr");
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.cellMargins");
       },
-      get checked() {
-        return form().borderTlBr;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderTlBr", v),
-      "data-testid": "editor-table-properties-border-tlbr"
+      get children() {
+        var _el$4 = _tmpl$2$1();
+        insert(_el$4, () => NumField(t("paragraph.borderSideTop"), () => form().marginTop, (v) => set("marginTop", v), "editor-table-properties-margin-top"), null);
+        insert(_el$4, () => NumField(t("paragraph.borderSideRight"), () => form().marginRight, (v) => set("marginRight", v), "editor-table-properties-margin-right"), null);
+        insert(_el$4, () => NumField(t("paragraph.borderSideBottom"), () => form().marginBottom, (v) => set("marginBottom", v), "editor-table-properties-margin-bottom"), null);
+        insert(_el$4, () => NumField(t("paragraph.borderSideLeft"), () => form().marginLeft, (v) => set("marginLeft", v), "editor-table-properties-margin-left"), null);
+        return _el$4;
+      }
     }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("table.borderTrBl");
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("paragraph.bordersSection");
       },
-      get checked() {
-        return form().borderTrBl;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderTrBl", v),
-      "data-testid": "editor-table-properties-border-trbl"
+      get children() {
+        return [(() => {
+          var _el$5 = _tmpl$2$1();
+          insert(_el$5, createComponent(SelectField, {
+            "class": "oasis-editor-dialog-input-group-grow",
+            get label() {
+              return t("paragraph.borderStyleLabel");
+            },
+            get value() {
+              return form().borderStyle;
+            },
+            onChange: (value) => {
+              const next = value;
+              set("borderStyle", next);
+              if (next === "none") {
+                set("borderTop", false);
+                set("borderRight", false);
+                set("borderBottom", false);
+                set("borderLeft", false);
+                set("borderStart", false);
+                set("borderEnd", false);
+                set("borderTlBr", false);
+                set("borderTrBl", false);
+              } else if (!form().borderTop && !form().borderRight && !form().borderBottom && !form().borderLeft) {
+                set("borderTop", true);
+                set("borderRight", true);
+                set("borderBottom", true);
+                set("borderLeft", true);
+              }
+            },
+            "data-testid": "editor-table-properties-border-style",
+            get options() {
+              return [{
+                value: "none",
+                label: t("paragraph.borderNone")
+              }, {
+                value: "solid",
+                label: t("paragraph.borderSolid")
+              }, {
+                value: "dashed",
+                label: t("paragraph.borderDashed")
+              }, {
+                value: "dotted",
+                label: t("paragraph.borderDotted")
+              }];
+            }
+          }), null);
+          insert(_el$5, () => NumField(t("paragraph.borderWidthLabel"), () => form().borderWidth, (v) => set("borderWidth", v), "editor-table-properties-border-width", borderDisabled()), null);
+          insert(_el$5, createComponent(TextField, {
+            type: "color",
+            "class": "oasis-editor-dialog-input-group",
+            controlClass: "oasis-editor-dialog-input",
+            get label() {
+              return t("paragraph.borderColorLabel");
+            },
+            get value() {
+              return form().borderColor || DEFAULT_BORDER_COLOR;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (value) => set("borderColor", value),
+            "data-testid": "editor-table-properties-border-color"
+          }), null);
+          insert(_el$5, createComponent(TextField, {
+            type: "color",
+            "class": "oasis-editor-dialog-input-group",
+            controlClass: "oasis-editor-dialog-input",
+            get label() {
+              return t("paragraph.shadingLabel");
+            },
+            get value() {
+              return form().shading || "#ffffff";
+            },
+            onChange: (value) => set("shading", value),
+            "data-testid": "editor-table-properties-shading"
+          }), null);
+          return _el$5;
+        })(), (() => {
+          var _el$6 = _tmpl$$6();
+          insert(_el$6, createComponent(Checkbox, {
+            get label() {
+              return t("paragraph.borderSideTop");
+            },
+            get checked() {
+              return form().borderTop;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (v) => set("borderTop", v),
+            "data-testid": "editor-table-properties-border-top"
+          }), null);
+          insert(_el$6, createComponent(Checkbox, {
+            get label() {
+              return t("paragraph.borderSideRight");
+            },
+            get checked() {
+              return form().borderRight;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (v) => set("borderRight", v),
+            "data-testid": "editor-table-properties-border-right"
+          }), null);
+          insert(_el$6, createComponent(Checkbox, {
+            get label() {
+              return t("paragraph.borderSideBottom");
+            },
+            get checked() {
+              return form().borderBottom;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (v) => set("borderBottom", v),
+            "data-testid": "editor-table-properties-border-bottom"
+          }), null);
+          insert(_el$6, createComponent(Checkbox, {
+            get label() {
+              return t("paragraph.borderSideLeft");
+            },
+            get checked() {
+              return form().borderLeft;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (v) => set("borderLeft", v),
+            "data-testid": "editor-table-properties-border-left"
+          }), null);
+          insert(_el$6, createComponent(Checkbox, {
+            get label() {
+              return t("table.borderStart");
+            },
+            get checked() {
+              return form().borderStart;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (v) => set("borderStart", v),
+            "data-testid": "editor-table-properties-border-start"
+          }), null);
+          insert(_el$6, createComponent(Checkbox, {
+            get label() {
+              return t("table.borderEnd");
+            },
+            get checked() {
+              return form().borderEnd;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (v) => set("borderEnd", v),
+            "data-testid": "editor-table-properties-border-end"
+          }), null);
+          insert(_el$6, createComponent(Checkbox, {
+            get label() {
+              return t("table.borderTlBr");
+            },
+            get checked() {
+              return form().borderTlBr;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (v) => set("borderTlBr", v),
+            "data-testid": "editor-table-properties-border-tlbr"
+          }), null);
+          insert(_el$6, createComponent(Checkbox, {
+            get label() {
+              return t("table.borderTrBl");
+            },
+            get checked() {
+              return form().borderTrBl;
+            },
+            get disabled() {
+              return borderDisabled();
+            },
+            onChange: (v) => set("borderTrBl", v),
+            "data-testid": "editor-table-properties-border-trbl"
+          }), null);
+          return _el$6;
+        })(), (() => {
+          var _el$7 = _tmpl$3$1();
+          createRenderEffect((_$p) => style(_el$7, borderPreview(), _$p));
+          return _el$7;
+        })()];
+      }
     }), null);
-    createRenderEffect((_p$) => {
-      var _v$ = borderDisabled(), _v$2 = borderPreview();
-      _v$ !== _p$.e && (_el$12.disabled = _p$.e = _v$);
-      _p$.t = style(_el$17, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    createRenderEffect(() => _el$12.value = form().borderColor || DEFAULT_BORDER_COLOR);
-    createRenderEffect(() => _el$15.value = form().shading || "#ffffff");
     return _el$;
   })();
 }
-delegateEvents(["input"]);
-var _tmpl$$5 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><textarea class="oasis-editor-ui-input oasis-editor-table-properties-textarea"data-testid=editor-table-properties-alt-description>`);
+var _tmpl$$5 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel>`);
 function AltTextTabPanel(props) {
   const t = useI18n();
   const form = () => props.ctrl.form;
   const set = props.ctrl.set;
   return (() => {
-    var _el$ = _tmpl$$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+    var _el$ = _tmpl$$5();
     insert(_el$, createComponent(TextField, {
       get label() {
         return t("table.altTitle");
@@ -33866,14 +34018,22 @@ function AltTextTabPanel(props) {
       },
       onChange: (v) => set("altTitle", v),
       "data-testid": "editor-table-properties-alt-title"
-    }), _el$2);
-    insert(_el$3, () => t("table.altDescription"));
-    _el$4.$$input = (e) => set("altDescription", e.currentTarget.value);
-    createRenderEffect(() => _el$4.value = form().altDescription);
+    }), null);
+    insert(_el$, createComponent(TextAreaField, {
+      "class": "oasis-editor-dialog-input-group",
+      get label() {
+        return t("table.altDescription");
+      },
+      controlClass: "oasis-editor-table-properties-textarea",
+      get value() {
+        return form().altDescription;
+      },
+      onChange: (value) => set("altDescription", value),
+      "data-testid": "editor-table-properties-alt-description"
+    }), null);
     return _el$;
   })();
 }
-delegateEvents(["input"]);
 function TablePropertiesDialog(props) {
   const t = useI18n();
   const ctrl = useTablePropertiesController(props);
@@ -33960,7 +34120,7 @@ function TablePropertiesDialog(props) {
     }
   });
 }
-var _tmpl$$4 = /* @__PURE__ */ template(`<div class=oasis-editor-find-replace-dialog><div class=oasis-editor-fr-header><span></span><button class=oasis-editor-fr-close><i data-lucide=x></i></button></div><div class=oasis-editor-fr-body><div class=oasis-editor-fr-input-group><div class=oasis-editor-fr-input-wrapper><input type=text autofocus class=oasis-editor-fr-input><span class=oasis-editor-fr-counter></span></div><div class=oasis-editor-fr-actions><button><i data-lucide=chevron-up></i></button><button><i data-lucide=chevron-down></i></button></div></div><div class=oasis-editor-fr-input-group><input type=text class=oasis-editor-fr-input><div class=oasis-editor-fr-actions><button class=oasis-editor-fr-btn-text></button><button class=oasis-editor-fr-btn-text></button></div></div><div class=oasis-editor-fr-options><label class=oasis-editor-fr-checkbox><input type=checkbox><span></span></label><label class=oasis-editor-fr-checkbox><input type=checkbox><span>`);
+var _tmpl$$4 = /* @__PURE__ */ template(`<div class=oasis-editor-find-replace-dialog><div class=oasis-editor-fr-header></div><div class=oasis-editor-fr-body><div class=oasis-editor-fr-input-group><div class=oasis-editor-fr-input-wrapper></div></div><div class=oasis-editor-fr-input-group>`);
 function FindReplaceDialog(props) {
   const t = useI18n();
   const {
@@ -33983,64 +34143,143 @@ function FindReplaceDialog(props) {
       return fr.isOpen();
     },
     get children() {
-      var _el$ = _tmpl$$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$7.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$6.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$11.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$17.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.nextSibling;
+      var _el$ = _tmpl$$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling;
       _el$.$$keydown = handleKeyDown;
-      insert(_el$3, () => t("find.title"));
-      _el$4.$$click = () => fr.setIsOpen(false);
-      _el$8.$$input = (e) => fr.setSearchTerm(e.currentTarget.value);
-      insert(_el$9, (() => {
-        var _c$ = memo(() => fr.matches().length > 0);
-        return () => _c$() ? `${fr.currentIndex() + 1} / ${fr.matches().length}` : t("find.noMatches");
-      })());
-      addEventListener(_el$1, "click", fr.findPrevious, true);
-      addEventListener(_el$10, "click", fr.findNext, true);
-      _el$12.$$input = (e) => fr.setReplaceTerm(e.currentTarget.value);
-      addEventListener(_el$14, "click", fr.replace, true);
-      insert(_el$14, () => t("replace.one"));
-      addEventListener(_el$15, "click", fr.replaceAll, true);
-      insert(_el$15, () => t("replace.allBtn"));
-      _el$18.addEventListener("change", (e) => fr.setFindOptions({
-        ...fr.findOptions(),
-        matchCase: e.currentTarget.checked
-      }));
-      insert(_el$19, () => t("find.matchCase"));
-      _el$21.addEventListener("change", (e) => fr.setFindOptions({
-        ...fr.findOptions(),
-        wholeWord: e.currentTarget.checked
-      }));
-      insert(_el$22, () => t("find.wholeWord"));
-      createRenderEffect((_p$) => {
-        var _v$ = t("generic.close"), _v$2 = t("find.placeholder"), _v$3 = fr.matches().length === 0, _v$4 = t("find.prevTooltip"), _v$5 = fr.matches().length === 0, _v$6 = t("find.nextTooltip"), _v$7 = t("replace.placeholder"), _v$8 = fr.matches().length === 0, _v$9 = fr.matches().length === 0;
-        _v$ !== _p$.e && setAttribute(_el$4, "aria-label", _p$.e = _v$);
-        _v$2 !== _p$.t && setAttribute(_el$8, "placeholder", _p$.t = _v$2);
-        _v$3 !== _p$.a && (_el$1.disabled = _p$.a = _v$3);
-        _v$4 !== _p$.o && setAttribute(_el$1, "title", _p$.o = _v$4);
-        _v$5 !== _p$.i && (_el$10.disabled = _p$.i = _v$5);
-        _v$6 !== _p$.n && setAttribute(_el$10, "title", _p$.n = _v$6);
-        _v$7 !== _p$.s && setAttribute(_el$12, "placeholder", _p$.s = _v$7);
-        _v$8 !== _p$.h && (_el$14.disabled = _p$.h = _v$8);
-        _v$9 !== _p$.r && (_el$15.disabled = _p$.r = _v$9);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0,
-        a: void 0,
-        o: void 0,
-        i: void 0,
-        n: void 0,
-        s: void 0,
-        h: void 0,
-        r: void 0
-      });
-      createRenderEffect(() => _el$8.value = fr.searchTerm());
-      createRenderEffect(() => _el$12.value = fr.replaceTerm());
-      createRenderEffect(() => _el$18.checked = fr.findOptions().matchCase);
-      createRenderEffect(() => _el$21.checked = fr.findOptions().wholeWord);
+      insert(_el$2, createComponent(Text, {
+        get children() {
+          return t("find.title");
+        }
+      }), null);
+      insert(_el$2, createComponent(SurfaceButton, {
+        "class": "oasis-editor-fr-close",
+        icon: "x",
+        onClick: () => fr.setIsOpen(false),
+        get label() {
+          return t("generic.close");
+        }
+      }), null);
+      insert(_el$5, createComponent(TextField, {
+        type: "text",
+        get placeholder() {
+          return t("find.placeholder");
+        },
+        get value() {
+          return fr.searchTerm();
+        },
+        onChange: (value) => fr.setSearchTerm(value),
+        autofocus: true,
+        controlClass: "oasis-editor-fr-input"
+      }), null);
+      insert(_el$5, createComponent(StatusText, {
+        "class": "oasis-editor-fr-counter",
+        get children() {
+          return memo(() => fr.matches().length > 0)() ? `${fr.currentIndex() + 1} / ${fr.matches().length}` : t("find.noMatches");
+        }
+      }), null);
+      insert(_el$4, createComponent(ActionRow, {
+        "class": "oasis-editor-fr-actions",
+        wrap: false,
+        get children() {
+          return [createComponent(SurfaceButton, {
+            get onClick() {
+              return fr.findPrevious;
+            },
+            get disabled() {
+              return fr.matches().length === 0;
+            },
+            icon: "chevron-up",
+            get label() {
+              return t("find.prevTooltip");
+            }
+          }), createComponent(SurfaceButton, {
+            get onClick() {
+              return fr.findNext;
+            },
+            get disabled() {
+              return fr.matches().length === 0;
+            },
+            icon: "chevron-down",
+            get label() {
+              return t("find.nextTooltip");
+            }
+          })];
+        }
+      }), null);
+      insert(_el$6, createComponent(TextField, {
+        type: "text",
+        get placeholder() {
+          return t("replace.placeholder");
+        },
+        get value() {
+          return fr.replaceTerm();
+        },
+        onChange: (value) => fr.setReplaceTerm(value),
+        controlClass: "oasis-editor-fr-input"
+      }), null);
+      insert(_el$6, createComponent(ActionRow, {
+        "class": "oasis-editor-fr-actions",
+        wrap: false,
+        get children() {
+          return [createComponent(SurfaceButton, {
+            "class": "oasis-editor-fr-btn-text",
+            get onClick() {
+              return fr.replace;
+            },
+            get disabled() {
+              return fr.matches().length === 0;
+            },
+            get children() {
+              return t("replace.one");
+            }
+          }), createComponent(SurfaceButton, {
+            "class": "oasis-editor-fr-btn-text",
+            get onClick() {
+              return fr.replaceAll;
+            },
+            get disabled() {
+              return fr.matches().length === 0;
+            },
+            get children() {
+              return t("replace.allBtn");
+            }
+          })];
+        }
+      }), null);
+      insert(_el$3, createComponent(ActionRow, {
+        "class": "oasis-editor-fr-options",
+        get children() {
+          return [createComponent(Checkbox, {
+            "class": "oasis-editor-fr-checkbox",
+            get label() {
+              return t("find.matchCase");
+            },
+            get checked() {
+              return fr.findOptions().matchCase;
+            },
+            onChange: (checked) => fr.setFindOptions({
+              ...fr.findOptions(),
+              matchCase: checked
+            })
+          }), createComponent(Checkbox, {
+            "class": "oasis-editor-fr-checkbox",
+            get label() {
+              return t("find.wholeWord");
+            },
+            get checked() {
+              return fr.findOptions().wholeWord;
+            },
+            onChange: (checked) => fr.setFindOptions({
+              ...fr.findOptions(),
+              wholeWord: checked
+            })
+          })];
+        }
+      }), null);
       return _el$;
     }
   });
 }
-delegateEvents(["keydown", "click", "input"]);
+delegateEvents(["keydown"]);
 var _tmpl$$3 = /* @__PURE__ */ template(`<div class=oasis-editor-context-menu role=menu data-testid=editor-context-menu>`), _tmpl$2 = /* @__PURE__ */ template(`<i>`), _tmpl$3 = /* @__PURE__ */ template(`<span class=oasis-editor-context-menu-shortcut>`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button class=oasis-editor-context-menu-item role=menuitem><span class=oasis-editor-context-menu-label>`), _tmpl$5 = /* @__PURE__ */ template(`<div class=oasis-editor-context-menu-separator>`), _tmpl$6 = /* @__PURE__ */ template(`<i data-lucide=check style=visibility:hidden>`);
 function ContextMenu(props) {
   let menuRef;