oasis-editor 0.0.116 → 0.0.118

package/dist/{OasisEditorApp-DY_N4M54.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 getPageContentWidth, b as getPageBodyTop, c as getPageBodyBottom, l as listReferencedEndnotes, f as getFootnoteDisplayMarker, h as createProjectionContext, i as getDocumentSections, j as buildFootnoteReservations, M as MAX_FOOTNOTE_LAYOUT_ITERATIONS, r as reservationSignature, k as applyFootnotesToPages, m as getRunField, n as projectBlocksLayout, v as visitRun, o as assertNever, q as createSignal, s as createEditorStateFromDocument, t as createInitialEditorState, S as STANDARD_FONT_SIZES_PT, u as fontSizePxToPt, w as probeLocalFontFamilies, x as createEditorParagraphFromRuns, y as isInlineObjectRun, z as createEditorStyledRun, A as getParagraphLength, B as getParagraphText, C as getActiveZone, D as getActiveSectionIndex, F as getParagraphs, G as normalizeSelection, H as positionToParagraphOffset, I as paragraphOffsetToPosition, J as clampPosition, K as findParagraphIndex, L as createCollapsedSelection, N as isSelectionCollapsed, O as parseFontSizePtToPx, P as formatFontSizePt, Q as createEditorParagraph, R as getBlockParagraphs, T as findParagraphTableLocation, U as buildTableCellLayout, V as PT_PER_PX, W as createEditorTableCell, X as createEditorTableRow, Y as createEditorTable, Z as PX_PER_POINT, _ as underlineStyleToCssDecorationStyle, $ as resolveImageSrc, a0 as listKindForTag, a1 as isParagraphTag, a2 as collectInlineRuns, a3 as parseParagraphStyle, a4 as getRunImage, a5 as InlineShell, a6 as BalloonShell, a7 as DocumentShell, a8 as createMemo, a9 as getCaretRectFromSnapshot, aa as getParagraphRectFromSnapshot, ab as createComponent, ac as CaretOverlay, ad as Show, ae as createRenderEffect, af as style, ag as setAttribute, ah as setStyleProperty, ai as memo, aj as template, ak as addEventListener, al as insert, am as delegateEvents, an as useI18n, ao as createEffect, ap as use, aq as Dialog, ar as className, as as For, at as UNDERLINE_STYLE_OPTIONS, au as Tabs, av as createStore, aw as reconcile, ax as onMount, ay as onCleanup, az as PluginUiHost, aA as OasisEditorEditor, aB as OasisBrandMark, aC as setPreciseFontPreference, aD as setWelcomeSeen, aE as enablePreciseFontMode, aF as TWIPS_PER_POINT, aG as PX_PER_INCH, aH as TWIPS_PER_INCH, aI as normalizeHex6, aJ as TABLE_CONDITIONAL_FLAG_ATTRIBUTES, aK as TABLE_BORDER_EDGE_KEYS, aL as resolveEffectiveParagraphStyle, aM as resolveEffectiveTextStyleForParagraph, aN as EMU_PER_PT, aO as OOXML_ROTATION_UNITS, aP as OOXML_PERCENT_DENOMINATOR, aQ as parseHexColorToRgb255, aR as EMU_PER_PX, aS as getRunFootnoteReference, aT as getRunEndnoteReference, aU as iterateFootnoteReferenceRuns, aV as iterateEndnoteReferenceRuns, aW as imageContentTypeDefaults, aX as getRunFieldChar, aY as getRunFieldInstruction, aZ as createEditorRun, a_ as JSZip, a$ as imageExtensionFromMime, b0 as pxToPt$1, b1 as resolveFloatingObjectRect, b2 as getTextBoxFloatingGeometry, b3 as getPresetPathSegments, b4 as buildListLabels, b5 as DEFAULT_FONT_SIZE_PX, b6 as resolveGradientAxis, b7 as isDoubleUnderlineStyle, b8 as isWavyUnderlineStyle, b9 as underlineStyleLineWidthPx, ba as WAVY_UNDERLINE_WAVELENGTH_PX, bb as WAVY_UNDERLINE_AMPLITUDE_PX, bc as DOUBLE_UNDERLINE_OFFSET_PX, bd as underlineStyleDashArray, be as EMPHASIS_GLYPH, bf as rgb255ToHex, bg as getImageFloatingGeometry, bh as textStyleToFontSizePt, bi as TEXT_BASELINE_RATIO, bj as resolveOpenTypeFeatureTags, bk as resolveDecorationLineY, bl as DOUBLE_STRIKE_OFFSET_PX, bm as resolveListLabel, bn as getListLabelInset, bo as getAlignedListLabelInset, bp as getParagraphBorderInsets, bq as buildSegmentTable, br as buildCanvasTableLayout, bs as resolveCanvasTableWidth, bt as resolveFloatingTableRect, bu as normalizeFamily, bv as ROBOTO_FONT_FILES, bw as loadFontAsset, bx as OFFICE_COMPAT_FONT_FAMILIES, by as BinaryReader, bz as buildSfnt, bA as defaultFontDecoderRegistry, bB as SfntFontProgram, bC as collectPdfFontFamilies, bD as outlineFrom, bE as getPageHeaderZoneTop, bF as getPageColumnRects, bG as findFootnoteReference, bH as FOOTNOTE_MARKER_GUTTER_PX, bI as resolveImporterForFile, bJ as roundTo, bK as getDocumentSectionsCanonical, bL as getDocumentParagraphsCanonical, bM as getDocumentParagraphs, bN as getDocumentPageSettings, bO as getTableCellContentWidthForParagraph, bP as layoutMetricsEpoch, bQ as bumpLayoutMetricsEpoch, bR as createCanvasLayoutSnapshotProvider, bS as on, bT as debounce, bU as unwrap, bV as perfTimer, bW as getRunTextBox, bX as createEditorDocument, bY as resolveResizedDimensions, bZ as resolveTextBoxRenderHeight, b_ as getToolbarStyleState, b$ as VERTICAL_HIT_WEIGHT, c0 as getCachedCanvasImage, c1 as measureParagraphMinContentWidthPx, c2 as getEditableBlocksForZone, c3 as findParagraphLocation, c4 as createSectionBoundaryParagraph, c5 as normalizePageSettings, c6 as DEFAULT_EDITOR_PAGE_SETTINGS, c7 as markStart, c8 as markEnd, c9 as getParagraphEntries, ca as getParagraphById, cb as createEditorFootnote, cc as createFootnoteReferenceRun, cd as renumberFootnotes, ce as getHeadingLevel, cf as preciseFontModeVersion, cg as isPreciseFontModeEnabled, ch as resolveNamedTextStyle, ci as togglePreciseFontMode, cj as nextFontSizePt, ck as previousFontSizePt, cl as fontSizePtToPx, cm as createDefaultToolbarPreset, cn as MenuRegistry, co as createToolbarRegistry, cp as Editor, cq as resolveCommandRef, cr as commandRefName, cs as createOasisEditorClient, ct as createEditorZoom, cu as startLongTaskObserver, cv as installGlobalReport, cw as applyStoredPreciseFontPreference, cx as getWelcomeSeen, cy as isLocalFontAccessSupported, cz as EDITOR_SCROLL_PADDING_PX, cA as Toolbar, cB as OasisEditorLoading, cC as I18nProvider, cD as createTranslator, cE as createEditorLogger, cF as registerDomStatsSurface } from "./index-DLKF27_V.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,
@@ -77,6 +77,148 @@ function projectHeaderFooterBlocks(blocks, context = {}) {
     }
   );
 }
+const FOOTNOTE_SEPARATOR_HEIGHT = 10;
+const FOOTNOTE_BLOCK_GAP = 2;
+const MAX_FOOTNOTE_LAYOUT_ITERATIONS = 4;
+function getProjectedBlocksHeight$1(blocks) {
+  if (!blocks || blocks.length === 0) {
+    return 0;
+  }
+  return blocks.reduce((sum, block) => sum + block.estimatedHeight, 0);
+}
+function collectFootnoteReferencesFromBlock(block) {
+  var _a2, _b2;
+  const result = [];
+  const appendFromParagraph = (paragraph, startOffset, endOffset) => {
+    let runStart = 0;
+    for (const run of paragraph.runs) {
+      const runEnd = runStart + run.text.length;
+      const footnoteReference = getRunFootnoteReference(run);
+      if (footnoteReference && runEnd > startOffset && runStart < endOffset) {
+        result.push(footnoteReference.footnoteId);
+      }
+      runStart = runEnd;
+    }
+  };
+  if (block.sourceBlock.type === "paragraph") {
+    appendFromParagraph(
+      block.sourceBlock,
+      ((_a2 = block.layout) == null ? void 0 : _a2.startOffset) ?? 0,
+      ((_b2 = block.layout) == null ? void 0 : _b2.endOffset) ?? getParagraphText(block.sourceBlock).length
+    );
+    return result;
+  }
+  for (const paragraph of getBlockParagraphs(block.sourceBlock)) {
+    appendFromParagraph(paragraph, 0, getParagraphText(paragraph).length);
+  }
+  return result;
+}
+function collectPageFootnoteReferenceIds(page) {
+  const seen = /* @__PURE__ */ new Set();
+  const ids = [];
+  for (const block of page.blocks) {
+    for (const footnoteId of collectFootnoteReferencesFromBlock(block)) {
+      if (seen.has(footnoteId)) continue;
+      seen.add(footnoteId);
+      ids.push(footnoteId);
+    }
+  }
+  return ids;
+}
+function projectFootnoteBlocksForPage(document2, footnoteReferenceIds, page, totalPages, measuredHeights, measuredParagraphLayouts, measurer, projectBlocks) {
+  var _a2, _b2, _c;
+  const contentWidth = Math.max(
+    24,
+    getPageContentWidth(page.pageSettings) - FOOTNOTE_MARKER_GUTTER_PX
+  );
+  const blocks = [];
+  for (const footnoteId of footnoteReferenceIds) {
+    const footnote = (_b2 = (_a2 = document2.footnotes) == null ? void 0 : _a2.items) == null ? void 0 : _b2[footnoteId];
+    if (!footnote) continue;
+    const projected = projectBlocks(footnote.blocks, {
+      pageIndex: page.index,
+      totalPages,
+      measuredHeights,
+      measuredParagraphLayouts,
+      styles: document2.styles,
+      contentWidth,
+      measurer,
+      defaultTabStop: (_c = document2.settings) == null ? void 0 : _c.defaultTabStop
+    });
+    for (const block of projected) {
+      blocks.push({
+        ...block,
+        blockId: `${footnoteId}:${block.blockId}`
+      });
+    }
+  }
+  return blocks;
+}
+function buildFootnoteReservations(pages, context) {
+  const reservations = /* @__PURE__ */ new Map();
+  for (const page of pages) {
+    const footnoteReferenceIds = collectPageFootnoteReferenceIds(page);
+    if (footnoteReferenceIds.length === 0) continue;
+    const footnoteBlocks = projectFootnoteBlocksForPage(
+      context.document,
+      footnoteReferenceIds,
+      page,
+      context.totalPages,
+      context.measuredHeights,
+      context.measuredParagraphLayouts,
+      context.measurer,
+      context.projectBlocks
+    );
+    if (footnoteBlocks.length === 0) continue;
+    const blockGaps = Math.max(0, footnoteBlocks.length - 1) * FOOTNOTE_BLOCK_GAP;
+    reservations.set(
+      page.index,
+      FOOTNOTE_SEPARATOR_HEIGHT + getProjectedBlocksHeight$1(footnoteBlocks) + blockGaps
+    );
+  }
+  return reservations;
+}
+function reservationSignature(reservations) {
+  return [...reservations.entries()].sort(([left], [right]) => left - right).map(([pageIndex, height]) => `${pageIndex}:${Math.round(height)}`).join("|");
+}
+function applyFootnotesToPages(pages, context) {
+  return pages.map((page) => {
+    const footnoteReferenceIds = collectPageFootnoteReferenceIds(page);
+    if (footnoteReferenceIds.length === 0) {
+      return {
+        ...page,
+        footnoteBlocks: void 0,
+        footnoteReferenceIds: void 0,
+        footnoteTop: void 0,
+        footnoteSeparatorTop: void 0
+      };
+    }
+    const footnoteBlocks = projectFootnoteBlocksForPage(
+      context.document,
+      footnoteReferenceIds,
+      page,
+      context.totalPages,
+      context.measuredHeights,
+      context.measuredParagraphLayouts,
+      context.measurer,
+      context.projectBlocks
+    );
+    const bodyBottom = page.bodyBottom ?? getPageBodyBottom(page.pageSettings);
+    const footnoteSeparatorTop = Math.max(
+      page.bodyTop ?? getPageBodyTop(page.pageSettings),
+      bodyBottom
+    );
+    const footnoteTop = footnoteSeparatorTop + FOOTNOTE_SEPARATOR_HEIGHT;
+    return {
+      ...page,
+      footnoteBlocks,
+      footnoteReferenceIds,
+      footnoteSeparatorTop,
+      footnoteTop,
+      bodyBottom
+    };
+  });
+}
 function getProjectedBlocksHeight(blocks) {
   if (!blocks || blocks.length === 0) {
     return 0;
@@ -464,6 +606,163 @@ function projectDocumentLayout(document2, maxPageHeightOverride, measuredHeights
     pages: applyFootnotesToPages(pages, footnoteContext)
   };
 }
+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();
+  const group = useContext(RadioGroupCtx);
+  const [local, others] = splitProps(props, ["label", "description", "value", "onChange", "class", "id", "checked", "name", "disabled"]);
+  const id = () => local.id ?? fallbackId;
+  const descriptionId = () => `${id()}-description`;
+  const checked = () => group ? group.value() === local.value : Boolean(local.checked);
+  const disabled = () => Boolean(local.disabled) || (group ? group.disabled() : false);
+  return (() => {
+    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);
+      (_a2 = local.onChange) == null ? void 0 : _a2.call(local, event.currentTarget.checked);
+    });
+    spread(_el$2, mergeProps({
+      get id() {
+        return id();
+      },
+      get name() {
+        return local.name ?? (group == null ? void 0 : group.name);
+      },
+      get value() {
+        return local.value;
+      },
+      get checked() {
+        return checked();
+      },
+      get disabled() {
+        return disabled();
+      },
+      get ["aria-describedby"]() {
+        return memo(() => !!local.description)() ? descriptionId() : void 0;
+      }
+    }, others), false, false);
+    insert(_el$4, () => local.label);
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return local.description;
+      },
+      get children() {
+        var _el$5 = _tmpl$$g();
+        insert(_el$5, () => local.description);
+        createRenderEffect(() => setAttribute(_el$5, "id", descriptionId()));
+        return _el$5;
+      }
+    }), null);
+    createRenderEffect((_p$) => {
+      var _v$ = `oasis-editor-ui-radio ${local.class ?? ""}`, _v$2 = id();
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && setAttribute(_el$, "for", _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
+    return _el$;
+  })();
+}
+function RadioGroup(props) {
+  const fallbackName = createUniqueId();
+  const ctx = {
+    name: props.name ?? fallbackName,
+    value: () => props.value,
+    onSelect: (value) => {
+      var _a2;
+      return (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value);
+    },
+    disabled: () => Boolean(props.disabled)
+  };
+  return createComponent(RadioGroupCtx.Provider, {
+    value: ctx,
+    get children() {
+      var _el$6 = _tmpl$4$2();
+      insert(_el$6, createComponent(Show, {
+        get when() {
+          return props.label;
+        },
+        get children() {
+          var _el$7 = _tmpl$3$5();
+          insert(_el$7, () => props.label);
+          return _el$7;
+        }
+      }), null);
+      insert(_el$6, createComponent(Show, {
+        get when() {
+          return props.options;
+        },
+        get fallback() {
+          return props.children;
+        },
+        get children() {
+          return createComponent(For, {
+            get each() {
+              return props.options;
+            },
+            children: (option) => createComponent(Radio$1, {
+              get value() {
+                return option.value;
+              },
+              get label() {
+                return option.label;
+              },
+              get description() {
+                return option.description;
+              },
+              get disabled() {
+                return option.disabled;
+              }
+            })
+          });
+        }
+      }), null);
+      createRenderEffect((_p$) => {
+        var _v$3 = `oasis-editor-ui-radio-group ${props.class ?? ""}`, _v$4 = props.label;
+        _v$3 !== _p$.e && className(_el$6, _p$.e = _v$3);
+        _v$4 !== _p$.t && setAttribute(_el$6, "aria-label", _p$.t = _v$4);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$6;
+    }
+  });
+}
+var _tmpl$$f = /* @__PURE__ */ template(`<label><input type=checkbox class=oasis-editor-ui-toggle-chip-input><span class=oasis-editor-ui-toggle-chip-label>`);
+function ToggleChip(props) {
+  const [local, others] = splitProps(props, ["label", "labelStyle", "onChange", "class", "checked"]);
+  return (() => {
+    var _el$ = _tmpl$$f(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    _el$2.addEventListener("change", (event) => {
+      var _a2;
+      return (_a2 = local.onChange) == null ? void 0 : _a2.call(local, event.currentTarget.checked);
+    });
+    spread(_el$2, mergeProps({
+      get checked() {
+        return local.checked;
+      }
+    }, others), false, false);
+    insert(_el$3, () => local.label);
+    createRenderEffect((_p$) => {
+      var _v$ = `oasis-editor-ui-toggle-chip ${local.class ?? ""}`, _v$2 = !!Boolean(local.checked), _v$3 = local.labelStyle;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && _el$.classList.toggle("is-active", _p$.t = _v$2);
+      _p$.a = style(_el$3, _v$3, _p$.a);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+}
 function cloneStyle(style2) {
   return style2 ? { ...style2 } : void 0;
 }
@@ -31149,14 +31448,14 @@ function DropCaret(props) {
     })
   });
 }
-var _tmpl$$d = /* @__PURE__ */ template(`<div class=oasis-editor-table-resize-guide>`), _tmpl$2$7 = /* @__PURE__ */ template(`<img class=oasis-editor-image-ghost>`), _tmpl$3$4 = /* @__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() {
       return props.tableResize.resizing();
     },
     children: (resizing) => (() => {
-      var _el$ = _tmpl$$d();
+      var _el$ = _tmpl$$e();
       createRenderEffect((_p$) => {
         var _v$ = !!(resizing().type === "column"), _v$2 = !!(resizing().type === "row"), _v$3 = {
           ...resizing().type === "column" ? {
@@ -31187,7 +31486,7 @@ function EditorDragLayers(props) {
       return memo(() => !!props.imageOps.dragging())() && props.imageOps.draggedImageInfo();
     },
     children: (info) => (() => {
-      var _el$2 = _tmpl$2$7();
+      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);
@@ -31300,24 +31599,31 @@ function EditorDragLayers(props) {
     })
   })];
 }
-var _tmpl$$c = /* @__PURE__ */ template(`<button class="oasis-editor-dialog-button oasis-editor-dialog-button-secondary">`), _tmpl$2$6 = /* @__PURE__ */ template(`<button class="oasis-editor-dialog-button oasis-editor-dialog-button-primary">`);
 function DialogFooter(props) {
-  return [(() => {
-    var _el$ = _tmpl$$c();
-    addEventListener(_el$, "click", props.onCancel, true);
-    insert(_el$, () => props.cancelLabel);
-    createRenderEffect(() => setAttribute(_el$, "data-testid", props.cancelTestId));
-    return _el$;
-  })(), (() => {
-    var _el$2 = _tmpl$2$6();
-    addEventListener(_el$2, "click", props.onConfirm, true);
-    insert(_el$2, () => props.confirmLabel);
-    createRenderEffect(() => setAttribute(_el$2, "data-testid", props.confirmTestId));
-    return _el$2;
-  })()];
-}
-delegateEvents(["click"]);
-var _tmpl$$b = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=text class=oasis-editor-dialog-input>`);
+  return [createComponent(Button, {
+    variant: "secondary",
+    get onClick() {
+      return props.onCancel;
+    },
+    get ["data-testid"]() {
+      return props.cancelTestId;
+    },
+    get children() {
+      return props.cancelLabel;
+    }
+  }), createComponent(Button, {
+    variant: "primary",
+    get onClick() {
+      return props.onConfirm;
+    },
+    get ["data-testid"]() {
+      return props.confirmTestId;
+    },
+    get children() {
+      return props.confirmLabel;
+    }
+  })];
+}
 function TextInputDialog(props) {
   const t = useI18n();
   const [value, setValue] = createSignal(props.initialValue);
@@ -31365,28 +31671,30 @@ function TextInputDialog(props) {
       });
     },
     get children() {
-      var _el$ = _tmpl$$b(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-      insert(_el$2, () => props.label);
-      _el$3.$$keydown = (e) => e.key === "Enter" && handleConfirm();
-      _el$3.$$input = (e) => setValue(e.currentTarget.value);
-      var _ref$ = inputRef;
-      typeof _ref$ === "function" ? use(_ref$, _el$3) : inputRef = _el$3;
-      createRenderEffect((_p$) => {
-        var _a2;
-        var _v$ = props.placeholder, _v$2 = (_a2 = props.testIds) == null ? void 0 : _a2.input;
-        _v$ !== _p$.e && setAttribute(_el$3, "placeholder", _p$.e = _v$);
-        _v$2 !== _p$.t && setAttribute(_el$3, "data-testid", _p$.t = _v$2);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
+      return createComponent(TextField, {
+        ref(r$) {
+          var _ref$ = inputRef;
+          typeof _ref$ === "function" ? _ref$(r$) : inputRef = r$;
+        },
+        get label() {
+          return props.label;
+        },
+        get value() {
+          return value();
+        },
+        onChange: setValue,
+        onKeyDown: (e) => e.key === "Enter" && handleConfirm(),
+        get placeholder() {
+          return props.placeholder;
+        },
+        get ["data-testid"]() {
+          var _a2;
+          return (_a2 = props.testIds) == null ? void 0 : _a2.input;
+        }
       });
-      createRenderEffect(() => _el$3.value = value());
-      return _el$;
     }
   });
 }
-delegateEvents(["input", "keydown"]);
 function LinkDialog(props) {
   const t = useI18n();
   return createComponent(TextInputDialog, {
@@ -31797,11 +32105,11 @@ function useFontDialogController(props) {
     handleApply
   };
 }
-var _tmpl$$a = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$d = /* @__PURE__ */ template(`<div>`);
 function FontPreview(props) {
   const t = useI18n();
   return (() => {
-    var _el$ = _tmpl$$a();
+    var _el$ = _tmpl$$d();
     insert(_el$, () => t("dialog.font.previewText"));
     createRenderEffect((_p$) => {
       var _v$ = props.class ?? "oasis-editor-dialog-preview", _v$2 = props.testId, _v$3 = props.style;
@@ -31817,133 +32125,253 @@ function FontPreview(props) {
     return _el$;
   })();
 }
-var _tmpl$$9 = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-font-panel"><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><input class=oasis-editor-dialog-input data-testid=editor-font-dialog-family-filter></div></div><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><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-family><option value>—</option></select></div><div class="oasis-editor-dialog-input-group oasis-editor-font-dialog-size-group"><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-size><option value>—</option></select></div></div><div class=oasis-editor-dialog-row><div class="oasis-editor-dialog-input-group oasis-editor-font-dialog-custom-size-group"><label class=oasis-editor-dialog-label></label><input class=oasis-editor-dialog-input data-testid=editor-font-dialog-custom-size><span class=oasis-editor-dialog-help-text></span></div><div class="oasis-editor-dialog-input-group oasis-editor-font-dialog-style-list-group"><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-style-list><option value=regular></option><option value=italic></option><option value=bold></option><option value=boldItalic></option></select></div></div><div class="oasis-editor-dialog-row oasis-editor-font-dialog-color-row"><div class="oasis-editor-dialog-input-group oasis-editor-font-dialog-color-mode-group"><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-color-mode><option value=automatic></option><option value=custom></option></select><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-color></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-highlight></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-shading></div></div><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><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-underline-style><option value=none></option></select></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-underline-color></div></div><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><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-bold><span style=font-weight:700></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-italic><span style=font-style:italic></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-underline><span style=text-decoration:underline></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-strike><span style=text-decoration:line-through></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-double-strike><span></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-superscript><span></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-subscript><span></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-small-caps><span></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-all-caps><span></span></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-font-dialog-hidden><span></span></label></div></div></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label>`), _tmpl$2$5 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$$c = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-font-panel"><div class=oasis-editor-dialog-row></div><div class=oasis-editor-dialog-row></div><div class=oasis-editor-dialog-row><div class="oasis-editor-dialog-input-group oasis-editor-font-dialog-custom-size-group"><span class=oasis-editor-dialog-help-text></span></div></div><div class="oasis-editor-dialog-row oasis-editor-font-dialog-color-row"><div class="oasis-editor-dialog-input-group oasis-editor-font-dialog-color-mode-group"><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-color-mode><option value=automatic></option><option value=custom></option></select><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-color></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-highlight></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-shading></div></div><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-color data-testid=editor-font-dialog-underline-color></div></div><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></div></div></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label>`);
 function FontTab(props) {
   const t = useI18n();
   const {
     ctrl
   } = props;
+  const effectToggles = () => [{
+    testId: "editor-font-dialog-bold",
+    label: t("dialog.font.bold"),
+    labelStyle: {
+      "font-weight": 700
+    },
+    checked: () => ctrl.fontTabValues().bold,
+    onChange: (checked) => ctrl.updateFontTab("bold", checked)
+  }, {
+    testId: "editor-font-dialog-italic",
+    label: t("dialog.font.italic"),
+    labelStyle: {
+      "font-style": "italic"
+    },
+    checked: () => ctrl.fontTabValues().italic,
+    onChange: (checked) => ctrl.updateFontTab("italic", checked)
+  }, {
+    testId: "editor-font-dialog-underline",
+    label: t("dialog.font.underline"),
+    labelStyle: {
+      "text-decoration": "underline"
+    },
+    checked: () => ctrl.fontTabValues().underline,
+    onChange: (checked) => ctrl.setFontTabValues((current) => ({
+      ...current,
+      underline: checked,
+      underlineStyle: checked ? current.underlineStyle === "none" ? "single" : current.underlineStyle : "none"
+    }))
+  }, {
+    testId: "editor-font-dialog-strike",
+    label: t("dialog.font.strike"),
+    labelStyle: {
+      "text-decoration": "line-through"
+    },
+    checked: () => ctrl.fontTabValues().strike,
+    onChange: (checked) => ctrl.setFontTabValues((current) => ({
+      ...current,
+      strike: checked,
+      doubleStrike: checked ? false : current.doubleStrike
+    }))
+  }, {
+    testId: "editor-font-dialog-double-strike",
+    label: t("dialog.font.doubleStrike"),
+    checked: () => ctrl.fontTabValues().doubleStrike,
+    onChange: (checked) => ctrl.setFontTabValues((current) => ({
+      ...current,
+      doubleStrike: checked,
+      strike: checked ? false : current.strike
+    }))
+  }, {
+    testId: "editor-font-dialog-superscript",
+    label: t("toolbar.superscript"),
+    checked: () => ctrl.fontTabValues().superscript,
+    onChange: (checked) => ctrl.setFontTabValues((current) => ({
+      ...current,
+      superscript: checked,
+      subscript: checked ? false : current.subscript
+    }))
+  }, {
+    testId: "editor-font-dialog-subscript",
+    label: t("toolbar.subscript"),
+    checked: () => ctrl.fontTabValues().subscript,
+    onChange: (checked) => ctrl.setFontTabValues((current) => ({
+      ...current,
+      subscript: checked,
+      superscript: checked ? false : current.superscript
+    }))
+  }, {
+    testId: "editor-font-dialog-small-caps",
+    label: t("dialog.font.smallCaps"),
+    checked: () => ctrl.fontTabValues().smallCaps,
+    onChange: (checked) => ctrl.updateFontTab("smallCaps", checked)
+  }, {
+    testId: "editor-font-dialog-all-caps",
+    label: t("dialog.font.allCaps"),
+    checked: () => ctrl.fontTabValues().allCaps,
+    onChange: (checked) => ctrl.updateFontTab("allCaps", checked)
+  }, {
+    testId: "editor-font-dialog-hidden",
+    label: t("dialog.font.hidden"),
+    checked: () => ctrl.fontTabValues().hidden,
+    onChange: (checked) => ctrl.updateFontTab("hidden", checked)
+  }];
   return (() => {
-    var _el$ = _tmpl$$9(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$2.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
-    _el$9.firstChild;
-    var _el$1 = _el$7.nextSibling, _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
-    _el$11.firstChild;
-    var _el$13 = _el$6.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.nextSibling, _el$18 = _el$14.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.nextSibling, _el$25 = _el$13.nextSibling, _el$26 = _el$25.firstChild, _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, _el$31 = _el$28.nextSibling, _el$32 = _el$26.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling, _el$35 = _el$32.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$36.nextSibling, _el$38 = _el$25.nextSibling, _el$39 = _el$38.firstChild, _el$40 = _el$39.firstChild, _el$41 = _el$40.nextSibling, _el$42 = _el$41.firstChild, _el$43 = _el$39.nextSibling, _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$38.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.firstChild, _el$49 = _el$48.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling, _el$53 = _el$50.nextSibling, _el$54 = _el$53.firstChild, _el$55 = _el$54.nextSibling, _el$56 = _el$53.nextSibling, _el$57 = _el$56.firstChild, _el$58 = _el$57.nextSibling, _el$59 = _el$56.nextSibling, _el$60 = _el$59.firstChild, _el$61 = _el$60.nextSibling, _el$62 = _el$59.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$63.nextSibling, _el$65 = _el$62.nextSibling, _el$66 = _el$65.firstChild, _el$67 = _el$66.nextSibling, _el$68 = _el$65.nextSibling, _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling, _el$71 = _el$68.nextSibling, _el$72 = _el$71.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$71.nextSibling, _el$75 = _el$74.firstChild, _el$76 = _el$75.nextSibling, _el$77 = _el$74.nextSibling, _el$78 = _el$77.firstChild, _el$79 = _el$78.nextSibling, _el$80 = _el$46.nextSibling, _el$81 = _el$80.firstChild;
-    insert(_el$4, () => t("dialog.font.familyFilter"));
-    _el$5.$$input = (e) => ctrl.updateFontTab("familyFilter", e.currentTarget.value);
-    insert(_el$8, () => t("dialog.font.family"));
-    _el$9.addEventListener("change", (e) => ctrl.updateFontTab("fontFamily", e.currentTarget.value));
-    insert(_el$9, createComponent(For, {
-      get each() {
-        return ctrl.visibleFamilyOptions();
+    var _el$ = _tmpl$$c(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$4.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$0.nextSibling, _el$12 = _el$8.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$12.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$7.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$18.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$26 = _el$22.nextSibling, _el$27 = _el$26.firstChild;
+    insert(_el$2, createComponent(TextField, {
+      "class": "oasis-editor-dialog-input-group-grow",
+      get label() {
+        return t("dialog.font.familyFilter");
+      },
+      get value() {
+        return ctrl.fontTabValues().familyFilter;
       },
-      children: (family) => (() => {
-        var _el$82 = _tmpl$2$5();
-        _el$82.value = family;
-        insert(_el$82, family);
-        return _el$82;
-      })()
+      onChange: (value) => ctrl.updateFontTab("familyFilter", value),
+      "data-testid": "editor-font-dialog-family-filter"
+    }));
+    insert(_el$3, createComponent(SelectField, {
+      "class": "oasis-editor-dialog-input-group-grow",
+      get label() {
+        return t("dialog.font.family");
+      },
+      get value() {
+        return ctrl.fontTabValues().fontFamily;
+      },
+      onChange: (value) => ctrl.updateFontTab("fontFamily", value),
+      "data-testid": "editor-font-dialog-family",
+      get options() {
+        return [{
+          value: "",
+          label: "—"
+        }, ...ctrl.visibleFamilyOptions().map((family) => ({
+          value: family,
+          label: family
+        }))];
+      }
     }), null);
-    insert(_el$10, () => t("dialog.font.size"));
-    _el$11.addEventListener("change", (e) => ctrl.updateFontTab("fontSize", e.currentTarget.value));
-    insert(_el$11, createComponent(For, {
-      get each() {
-        return ctrl.effectiveSizeOptions();
+    insert(_el$3, createComponent(SelectField, {
+      "class": "oasis-editor-font-dialog-size-group",
+      get label() {
+        return t("dialog.font.size");
       },
-      children: (size) => (() => {
-        var _el$83 = _tmpl$2$5();
-        insert(_el$83, size);
-        createRenderEffect(() => _el$83.value = String(size));
-        return _el$83;
-      })()
+      get value() {
+        return ctrl.fontTabValues().fontSize;
+      },
+      onChange: (value) => ctrl.updateFontTab("fontSize", value),
+      "data-testid": "editor-font-dialog-size",
+      get options() {
+        return [{
+          value: "",
+          label: "—"
+        }, ...ctrl.effectiveSizeOptions().map((size) => ({
+          value: String(size),
+          label: String(size)
+        }))];
+      }
     }), null);
-    insert(_el$15, () => t("dialog.font.customSize"));
-    _el$16.$$input = (e) => ctrl.updateFontTab("fontSize", e.currentTarget.value);
-    insert(_el$17, () => ctrl.customSizeError());
-    insert(_el$19, () => t("dialog.font.styleList"));
-    _el$20.addEventListener("change", (e) => ctrl.applyFontStylePreset(e.currentTarget.value));
-    insert(_el$21, () => t("dialog.font.styleRegular"));
-    insert(_el$22, () => t("dialog.font.styleItalic"));
-    insert(_el$23, () => t("dialog.font.styleBold"));
-    insert(_el$24, () => t("dialog.font.styleBoldItalic"));
-    insert(_el$27, () => t("dialog.font.color"));
-    _el$28.addEventListener("change", (e) => ctrl.updateFontTab("colorMode", e.currentTarget.value));
-    insert(_el$29, () => t("toolbar.colorAutomatic"));
-    insert(_el$30, () => t("dialog.font.customColor"));
-    _el$31.$$input = (e) => ctrl.setFontTabValues((current) => ({
+    insert(_el$5, createComponent(TextField, {
+      get label() {
+        return t("dialog.font.customSize");
+      },
+      get value() {
+        return ctrl.fontTabValues().fontSize;
+      },
+      onChange: (value) => ctrl.updateFontTab("fontSize", value),
+      "data-testid": "editor-font-dialog-custom-size"
+    }), _el$6);
+    insert(_el$6, () => ctrl.customSizeError());
+    insert(_el$4, createComponent(SelectField, {
+      "class": "oasis-editor-font-dialog-style-list-group",
+      get label() {
+        return t("dialog.font.styleList");
+      },
+      get value() {
+        return ctrl.selectedFontStyle();
+      },
+      onChange: (value) => ctrl.applyFontStylePreset(value),
+      "data-testid": "editor-font-dialog-style-list",
+      get options() {
+        return [{
+          value: "regular",
+          label: t("dialog.font.styleRegular")
+        }, {
+          value: "italic",
+          label: t("dialog.font.styleItalic")
+        }, {
+          value: "bold",
+          label: t("dialog.font.styleBold")
+        }, {
+          value: "boldItalic",
+          label: t("dialog.font.styleBoldItalic")
+        }];
+      }
+    }), null);
+    insert(_el$9, () => t("dialog.font.color"));
+    _el$0.addEventListener("change", (e) => ctrl.updateFontTab("colorMode", e.currentTarget.value));
+    insert(_el$1, () => t("toolbar.colorAutomatic"));
+    insert(_el$10, () => t("dialog.font.customColor"));
+    _el$11.$$input = (e) => ctrl.setFontTabValues((current) => ({
       ...current,
       color: e.currentTarget.value,
       colorMode: "custom"
     }));
-    insert(_el$33, () => t("dialog.font.highlight"));
-    _el$34.$$input = (e) => ctrl.updateFontTab("highlight", e.currentTarget.value);
-    insert(_el$36, () => t("dialog.font.shading"));
-    _el$37.$$input = (e) => ctrl.updateFontTab("shading", e.currentTarget.value);
-    insert(_el$40, () => t("dialog.font.underlineStyle"));
-    _el$41.addEventListener("change", (e) => ctrl.setFontTabValues((current) => ({
-      ...current,
-      underlineStyle: e.currentTarget.value,
-      underline: e.currentTarget.value !== "none"
-    })));
-    insert(_el$42, () => t("toolbar.underlineRemove"));
-    insert(_el$41, createComponent(For, {
-      each: UNDERLINE_STYLE_OPTIONS,
-      children: (option) => (() => {
-        var _el$84 = _tmpl$2$5();
-        insert(_el$84, () => t(option.labelKey));
-        createRenderEffect(() => _el$84.value = option.value);
-        return _el$84;
-      })()
-    }), null);
-    insert(_el$44, () => t("dialog.font.underlineColor"));
-    _el$45.$$input = (e) => ctrl.setFontTabValues((current) => ({
+    insert(_el$13, () => t("dialog.font.highlight"));
+    _el$14.$$input = (e) => ctrl.updateFontTab("highlight", e.currentTarget.value);
+    insert(_el$16, () => t("dialog.font.shading"));
+    _el$17.$$input = (e) => ctrl.updateFontTab("shading", e.currentTarget.value);
+    insert(_el$18, createComponent(SelectField, {
+      "class": "oasis-editor-dialog-input-group-grow",
+      get label() {
+        return t("dialog.font.underlineStyle");
+      },
+      get value() {
+        return ctrl.fontTabValues().underlineStyle;
+      },
+      onChange: (value) => ctrl.setFontTabValues((current) => ({
+        ...current,
+        underlineStyle: value,
+        underline: value !== "none"
+      })),
+      "data-testid": "editor-font-dialog-underline-style",
+      get options() {
+        return [{
+          value: "none",
+          label: t("toolbar.underlineRemove")
+        }, ...UNDERLINE_STYLE_OPTIONS.map((option) => ({
+          value: option.value,
+          label: t(option.labelKey)
+        }))];
+      }
+    }), _el$19);
+    insert(_el$20, () => t("dialog.font.underlineColor"));
+    _el$21.$$input = (e) => ctrl.setFontTabValues((current) => ({
       ...current,
       underlineColor: e.currentTarget.value,
       underline: current.underlineStyle !== "none"
     }));
-    insert(_el$48, () => t("dialog.font.style"));
-    _el$51.addEventListener("change", (e) => ctrl.updateFontTab("bold", e.currentTarget.checked));
-    insert(_el$52, () => t("dialog.font.bold"));
-    _el$54.addEventListener("change", (e) => ctrl.updateFontTab("italic", e.currentTarget.checked));
-    insert(_el$55, () => t("dialog.font.italic"));
-    _el$57.addEventListener("change", (e) => ctrl.setFontTabValues((current) => ({
-      ...current,
-      underline: e.currentTarget.checked,
-      underlineStyle: e.currentTarget.checked ? current.underlineStyle === "none" ? "single" : current.underlineStyle : "none"
-    })));
-    insert(_el$58, () => t("dialog.font.underline"));
-    _el$60.addEventListener("change", (e) => ctrl.setFontTabValues((current) => ({
-      ...current,
-      strike: e.currentTarget.checked,
-      doubleStrike: e.currentTarget.checked ? false : current.doubleStrike
-    })));
-    insert(_el$61, () => t("dialog.font.strike"));
-    _el$63.addEventListener("change", (e) => ctrl.setFontTabValues((current) => ({
-      ...current,
-      doubleStrike: e.currentTarget.checked,
-      strike: e.currentTarget.checked ? false : current.strike
-    })));
-    insert(_el$64, () => t("dialog.font.doubleStrike"));
-    _el$66.addEventListener("change", (e) => ctrl.setFontTabValues((current) => ({
-      ...current,
-      superscript: e.currentTarget.checked,
-      subscript: e.currentTarget.checked ? false : current.subscript
-    })));
-    insert(_el$67, () => t("toolbar.superscript"));
-    _el$69.addEventListener("change", (e) => ctrl.setFontTabValues((current) => ({
-      ...current,
-      subscript: e.currentTarget.checked,
-      superscript: e.currentTarget.checked ? false : current.superscript
-    })));
-    insert(_el$70, () => t("toolbar.subscript"));
-    _el$72.addEventListener("change", (e) => ctrl.updateFontTab("smallCaps", e.currentTarget.checked));
-    insert(_el$73, () => t("dialog.font.smallCaps"));
-    _el$75.addEventListener("change", (e) => ctrl.updateFontTab("allCaps", e.currentTarget.checked));
-    insert(_el$76, () => t("dialog.font.allCaps"));
-    _el$78.addEventListener("change", (e) => ctrl.updateFontTab("hidden", e.currentTarget.checked));
-    insert(_el$79, () => t("dialog.font.hidden"));
-    insert(_el$81, () => t("dialog.font.preview"));
-    insert(_el$80, createComponent(FontPreview, {
+    insert(_el$24, () => t("dialog.font.style"));
+    insert(_el$25, createComponent(For, {
+      get each() {
+        return effectToggles();
+      },
+      children: (toggle) => createComponent(ToggleChip, {
+        get label() {
+          return toggle.label;
+        },
+        get labelStyle() {
+          return toggle.labelStyle;
+        },
+        get checked() {
+          return toggle.checked();
+        },
+        get onChange() {
+          return toggle.onChange;
+        },
+        get ["data-testid"]() {
+          return toggle.testId;
+        }
+      })
+    }));
+    insert(_el$27, () => t("dialog.font.preview"));
+    insert(_el$26, createComponent(FontPreview, {
       testId: "editor-font-dialog-preview",
       get style() {
         return ctrl.previewStyle();
@@ -31951,154 +32379,351 @@ function FontTab(props) {
     }), null);
     createRenderEffect((_p$) => {
       var _v$ = ctrl.fontTabValues().colorMode === "automatic", _v$2 = ctrl.fontTabValues().underlineStyle === "none";
-      _v$ !== _p$.e && (_el$31.disabled = _p$.e = _v$);
-      _v$2 !== _p$.t && (_el$45.disabled = _p$.t = _v$2);
+      _v$ !== _p$.e && (_el$11.disabled = _p$.e = _v$);
+      _v$2 !== _p$.t && (_el$21.disabled = _p$.t = _v$2);
       return _p$;
     }, {
       e: void 0,
       t: void 0
     });
-    createRenderEffect(() => _el$5.value = ctrl.fontTabValues().familyFilter);
-    createRenderEffect(() => _el$9.value = ctrl.fontTabValues().fontFamily);
-    createRenderEffect(() => _el$11.value = ctrl.fontTabValues().fontSize);
-    createRenderEffect(() => _el$16.value = ctrl.fontTabValues().fontSize);
-    createRenderEffect(() => _el$20.value = ctrl.selectedFontStyle());
-    createRenderEffect(() => _el$28.value = ctrl.fontTabValues().colorMode);
-    createRenderEffect(() => _el$31.value = ctrl.fontTabValues().color);
-    createRenderEffect(() => _el$34.value = ctrl.fontTabValues().highlight || DEFAULT_HIGHLIGHT);
-    createRenderEffect(() => _el$37.value = ctrl.fontTabValues().shading || DEFAULT_SHADING);
-    createRenderEffect(() => _el$41.value = ctrl.fontTabValues().underlineStyle);
-    createRenderEffect(() => _el$45.value = ctrl.fontTabValues().underlineColor || DEFAULT_COLOR);
-    createRenderEffect(() => _el$51.checked = ctrl.fontTabValues().bold);
-    createRenderEffect(() => _el$54.checked = ctrl.fontTabValues().italic);
-    createRenderEffect(() => _el$57.checked = ctrl.fontTabValues().underline);
-    createRenderEffect(() => _el$60.checked = ctrl.fontTabValues().strike);
-    createRenderEffect(() => _el$63.checked = ctrl.fontTabValues().doubleStrike);
-    createRenderEffect(() => _el$66.checked = ctrl.fontTabValues().superscript);
-    createRenderEffect(() => _el$69.checked = ctrl.fontTabValues().subscript);
-    createRenderEffect(() => _el$72.checked = ctrl.fontTabValues().smallCaps);
-    createRenderEffect(() => _el$75.checked = ctrl.fontTabValues().allCaps);
-    createRenderEffect(() => _el$78.checked = ctrl.fontTabValues().hidden);
+    createRenderEffect(() => _el$0.value = ctrl.fontTabValues().colorMode);
+    createRenderEffect(() => _el$11.value = ctrl.fontTabValues().color);
+    createRenderEffect(() => _el$14.value = ctrl.fontTabValues().highlight || DEFAULT_HIGHLIGHT);
+    createRenderEffect(() => _el$17.value = ctrl.fontTabValues().shading || DEFAULT_SHADING);
+    createRenderEffect(() => _el$21.value = ctrl.fontTabValues().underlineColor || DEFAULT_COLOR);
     return _el$;
   })();
 }
 delegateEvents(["input"]);
-var _tmpl$$8 = /* @__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><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-advanced-scale></select></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-advanced-spacing-mode><option value=normal></option><option value=expanded></option><option value=condensed></option></select><label class="oasis-editor-dialog-label oasis-editor-font-dialog-by-label"></label><input class="oasis-editor-dialog-input oasis-editor-font-dialog-small-input"data-testid=editor-font-dialog-advanced-spacing-amount></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-advanced-position-mode><option value=normal></option><option value=raised></option><option value=lowered></option></select><label class="oasis-editor-dialog-label oasis-editor-font-dialog-by-label"></label><input class="oasis-editor-dialog-input oasis-editor-font-dialog-small-input"data-testid=editor-font-dialog-advanced-position-amount></div><div class="oasis-editor-font-dialog-word-row oasis-editor-font-dialog-kerning-row"><label class="oasis-editor-dialog-style-toggle oasis-editor-font-dialog-kerning-toggle"><input type=checkbox data-testid=editor-font-dialog-advanced-kerning-enabled><span></span></label><input class="oasis-editor-dialog-input oasis-editor-font-dialog-kerning-input"data-testid=editor-font-dialog-advanced-kerning><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><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-advanced-ligatures><option value></option><option value=none></option><option value=standard></option><option value=contextual></option><option value=historical></option><option value=standardContextual></option></select></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-advanced-number-spacing><option value></option><option value=proportional></option><option value=tabular></option></select></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-advanced-number-form><option value></option><option value=lining></option><option value=oldStyle></option></select></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-advanced-stylistic-set><option value></option></select></div><label class="oasis-editor-dialog-style-toggle oasis-editor-font-dialog-contextual-toggle"><input type=checkbox data-testid=editor-font-dialog-advanced-contextual-alternates><span></span></label></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>`), _tmpl$2$4 = /* @__PURE__ */ template(`<option>%`), _tmpl$3$3 = /* @__PURE__ */ template(`<option>`);
+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$$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.nextSibling, _el$11 = _el$9.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$7.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$15.nextSibling, _el$20 = _el$19.nextSibling, _el$21 = _el$13.nextSibling, _el$22 = _el$21.firstChild, _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling, _el$25 = _el$22.nextSibling, _el$26 = _el$25.nextSibling, _el$27 = _el$2.nextSibling, _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling, _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$34 = _el$33.nextSibling, _el$35 = _el$34.nextSibling, _el$36 = _el$35.nextSibling, _el$37 = _el$36.nextSibling, _el$38 = _el$29.nextSibling, _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling, _el$43 = _el$42.nextSibling, _el$44 = _el$38.nextSibling, _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling, _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling, _el$49 = _el$48.nextSibling, _el$50 = _el$44.nextSibling, _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling, _el$53 = _el$52.firstChild, _el$54 = _el$50.nextSibling, _el$55 = _el$54.firstChild, _el$56 = _el$55.nextSibling, _el$57 = _el$27.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$57.nextSibling;
-    insert(_el$3, () => t("dialog.font.advancedCharacterSpacingGroup"));
-    insert(_el$5, () => t("dialog.font.advancedScale"));
-    _el$6.addEventListener("change", (e) => ctrl.updateAdvancedTab("characterScale", e.currentTarget.value));
-    insert(_el$6, createComponent(For, {
-      each: WORD_CHARACTER_SCALES,
-      children: (scale) => (() => {
-        var _el$60 = _tmpl$2$4(), _el$61 = _el$60.firstChild;
-        insert(_el$60, scale, _el$61);
-        createRenderEffect(() => _el$60.value = String(scale));
-        return _el$60;
-      })()
-    }));
-    insert(_el$8, () => t("dialog.font.advancedSpacing"));
-    _el$9.addEventListener("change", (e) => ctrl.updateAdvancedTab("spacingMode", e.currentTarget.value));
-    insert(_el$0, () => t("dialog.font.advancedNormal"));
-    insert(_el$1, () => t("dialog.font.advancedExpanded"));
-    insert(_el$10, () => t("dialog.font.advancedCondensed"));
-    insert(_el$11, () => t("dialog.font.advancedBy"));
-    _el$12.$$input = (e) => ctrl.updateAdvancedTab("spacingAmount", e.currentTarget.value);
-    insert(_el$14, () => t("dialog.font.advancedPosition"));
-    _el$15.addEventListener("change", (e) => ctrl.updateAdvancedTab("positionMode", e.currentTarget.value));
-    insert(_el$16, () => t("dialog.font.advancedNormal"));
-    insert(_el$17, () => t("dialog.font.advancedRaised"));
-    insert(_el$18, () => t("dialog.font.advancedLowered"));
-    insert(_el$19, () => t("dialog.font.advancedBy"));
-    _el$20.$$input = (e) => ctrl.updateAdvancedTab("positionAmount", e.currentTarget.value);
-    _el$23.addEventListener("change", (e) => ctrl.setAdvancedTabValues((current) => ({
-      ...current,
-      kerningEnabled: e.currentTarget.checked,
-      kerningThreshold: e.currentTarget.checked ? current.kerningThreshold || "1" : current.kerningThreshold
-    })));
-    insert(_el$24, () => t("dialog.font.advancedKerning"));
-    _el$25.$$input = (e) => ctrl.updateAdvancedTab("kerningThreshold", e.currentTarget.value);
-    insert(_el$26, () => t("dialog.font.advancedKerningAbove"));
-    insert(_el$28, () => t("dialog.font.advancedOpenTypeGroup"));
-    insert(_el$30, () => t("dialog.font.advancedLigatures"));
-    _el$31.addEventListener("change", (e) => ctrl.updateAdvancedTab("ligatures", e.currentTarget.value));
-    insert(_el$32, () => t("dialog.font.advancedDefault"));
-    insert(_el$33, () => t("dialog.font.advancedLigaturesNone"));
-    insert(_el$34, () => t("dialog.font.advancedLigaturesStandard"));
-    insert(_el$35, () => t("dialog.font.advancedLigaturesContextual"));
-    insert(_el$36, () => t("dialog.font.advancedLigaturesHistorical"));
-    insert(_el$37, () => t("dialog.font.advancedLigaturesStandardContextual"));
-    insert(_el$39, () => t("dialog.font.advancedNumberSpacing"));
-    _el$40.addEventListener("change", (e) => ctrl.updateAdvancedTab("numberSpacing", e.currentTarget.value));
-    insert(_el$41, () => t("dialog.font.advancedDefault"));
-    insert(_el$42, () => t("dialog.font.advancedNumberSpacingProportional"));
-    insert(_el$43, () => t("dialog.font.advancedNumberSpacingTabular"));
-    insert(_el$45, () => t("dialog.font.advancedNumberForm"));
-    _el$46.addEventListener("change", (e) => ctrl.updateAdvancedTab("numberForm", e.currentTarget.value));
-    insert(_el$47, () => t("dialog.font.advancedDefault"));
-    insert(_el$48, () => t("dialog.font.advancedNumberFormLining"));
-    insert(_el$49, () => t("dialog.font.advancedNumberFormOldStyle"));
-    insert(_el$51, () => t("dialog.font.advancedStylisticSet"));
-    _el$52.addEventListener("change", (e) => ctrl.updateAdvancedTab("stylisticSet", e.currentTarget.value));
-    insert(_el$53, () => t("dialog.font.advancedDefault"));
-    insert(_el$52, createComponent(For, {
-      get each() {
-        return Array.from({
-          length: 20
-        }, (_, index) => index + 1);
+    var _el$ = _tmpl$3$3();
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedCharacterSpacingGroup");
       },
-      children: (set) => (() => {
-        var _el$62 = _tmpl$3$3();
-        insert(_el$62, set);
-        createRenderEffect(() => _el$62.value = String(set));
-        return _el$62;
-      })()
+      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);
-    _el$55.addEventListener("change", (e) => ctrl.updateAdvancedTab("contextualAlternates", e.currentTarget.checked));
-    insert(_el$56, () => t("dialog.font.advancedContextualAlternates"));
-    insert(_el$58, () => t("dialog.font.advancedPreviewGroup"));
-    insert(_el$57, 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(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedOpenTypeGroup");
+      },
+      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$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedPreviewGroup");
+      },
+      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$, 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$59, () => ctrl.advancedValidationError() || t("dialog.font.advancedPlaceholder"));
-    createRenderEffect((_p$) => {
-      var _v$ = ctrl.advancedTabValues().spacingMode === "normal", _v$2 = ctrl.advancedTabValues().positionMode === "normal", _v$3 = !ctrl.advancedTabValues().kerningEnabled;
-      _v$ !== _p$.e && (_el$12.disabled = _p$.e = _v$);
-      _v$2 !== _p$.t && (_el$20.disabled = _p$.t = _v$2);
-      _v$3 !== _p$.a && (_el$25.disabled = _p$.a = _v$3);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    createRenderEffect(() => _el$6.value = ctrl.advancedTabValues().characterScale || "100");
-    createRenderEffect(() => _el$9.value = ctrl.advancedTabValues().spacingMode);
-    createRenderEffect(() => _el$12.value = ctrl.advancedTabValues().spacingAmount);
-    createRenderEffect(() => _el$15.value = ctrl.advancedTabValues().positionMode);
-    createRenderEffect(() => _el$20.value = ctrl.advancedTabValues().positionAmount);
-    createRenderEffect(() => _el$23.checked = ctrl.advancedTabValues().kerningEnabled);
-    createRenderEffect(() => _el$25.value = ctrl.advancedTabValues().kerningThreshold);
-    createRenderEffect(() => _el$31.value = ctrl.advancedTabValues().ligatures);
-    createRenderEffect(() => _el$40.value = ctrl.advancedTabValues().numberSpacing);
-    createRenderEffect(() => _el$46.value = ctrl.advancedTabValues().numberForm);
-    createRenderEffect(() => _el$52.value = ctrl.advancedTabValues().stylisticSet);
-    createRenderEffect(() => _el$55.checked = ctrl.advancedTabValues().contextualAlternates);
     return _el$;
   })();
 }
-delegateEvents(["input"]);
-var _tmpl$$7 = /* @__PURE__ */ template(`<button class="oasis-editor-dialog-button oasis-editor-dialog-button-secondary"data-testid=editor-font-dialog-cancel>`), _tmpl$2$3 = /* @__PURE__ */ template(`<button class="oasis-editor-dialog-button oasis-editor-dialog-button-primary"data-testid=editor-font-dialog-apply>`);
 function FontDialog(props) {
   const t = useI18n();
   const ctrl = useFontDialogController(props);
@@ -32116,17 +32741,22 @@ function FontDialog(props) {
     bodyClass: "oasis-editor-font-dialog-body",
     size: "font",
     get footer() {
-      return [(() => {
-        var _el$ = _tmpl$$7();
-        addEventListener(_el$, "click", props.onClose, true);
-        insert(_el$, () => t("generic.cancel"));
-        return _el$;
-      })(), (() => {
-        var _el$2 = _tmpl$2$3();
-        addEventListener(_el$2, "click", ctrl.handleApply, true);
-        insert(_el$2, () => t("generic.ok"));
-        return _el$2;
-      })()];
+      return createComponent(DialogFooter, {
+        get onCancel() {
+          return props.onClose;
+        },
+        get onConfirm() {
+          return ctrl.handleApply;
+        },
+        get cancelLabel() {
+          return t("generic.cancel");
+        },
+        get confirmLabel() {
+          return t("generic.ok");
+        },
+        cancelTestId: "editor-font-dialog-cancel",
+        confirmTestId: "editor-font-dialog-apply"
+      });
     },
     get children() {
       return createComponent(Tabs, {
@@ -32159,8 +32789,7 @@ function FontDialog(props) {
     }
   });
 }
-delegateEvents(["click"]);
-var _tmpl$$6 = /* @__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><select class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-align><option value=left></option><option value=center></option><option value=right></option><option value=justify>`), _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><input type=number class=oasis-editor-dialog-input step=1 data-testid=editor-paragraph-dialog-indent-left></div><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><input type=number class=oasis-editor-dialog-input step=1 data-testid=editor-paragraph-dialog-indent-right>`), _tmpl$3$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><select class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-special><option value=none></option><option value=firstLine></option><option value=hanging></option></select></div><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><input type=number class=oasis-editor-dialog-input min=0 step=1 data-testid=editor-paragraph-dialog-special-by>`), _tmpl$4$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><input type=number class=oasis-editor-dialog-input min=0 step=1 data-testid=editor-paragraph-dialog-spacing-before></div><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><input type=number class=oasis-editor-dialog-input min=0 step=1 data-testid=editor-paragraph-dialog-spacing-after></div><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><input type=number class=oasis-editor-dialog-input min=0.5 step=0.05 data-testid=editor-paragraph-dialog-line-height>`), _tmpl$5$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><select class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-border-style><option value=none></option><option value=solid></option><option value=dashed></option><option value=dotted></option></select></div><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><input type=number class=oasis-editor-dialog-input min=0 step=0.25 data-testid=editor-paragraph-dialog-border-width></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-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$6$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><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-paragraph-dialog-border-side-top></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-paragraph-dialog-border-side-right></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-paragraph-dialog-border-side-bottom></label><label class=oasis-editor-dialog-style-toggle><input type=checkbox data-testid=editor-paragraph-dialog-border-side-left>`), _tmpl$7$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) {
@@ -32171,16 +32800,16 @@ function parseNumber$1(value) {
 function ParagraphDialog(props) {
   const t = useI18n();
   const [align, setAlign] = createSignal("");
-  const [indentLeft, setIndentLeft] = createSignal("");
-  const [indentRight, setIndentRight] = createSignal("");
+  const [indentLeft, setIndentLeft] = createSignal(null);
+  const [indentRight, setIndentRight] = createSignal(null);
   const [special, setSpecial] = createSignal("none");
-  const [specialBy, setSpecialBy] = createSignal("");
-  const [spacingBefore, setSpacingBefore] = createSignal("");
-  const [spacingAfter, setSpacingAfter] = createSignal("");
-  const [lineHeight, setLineHeight] = createSignal("");
+  const [specialBy, setSpecialBy] = createSignal(null);
+  const [spacingBefore, setSpacingBefore] = createSignal(null);
+  const [spacingAfter, setSpacingAfter] = createSignal(null);
+  const [lineHeight, setLineHeight] = createSignal(null);
   const [shading, setShading] = createSignal("");
   const [borderStyle, setBorderStyle] = createSignal("none");
-  const [borderWidth, setBorderWidth] = createSignal("");
+  const [borderWidth, setBorderWidth] = createSignal(null);
   const [borderColor, setBorderColor] = createSignal("");
   const [sideTop, setSideTop] = createSignal(false);
   const [sideRight, setSideRight] = createSignal(false);
@@ -32189,15 +32818,15 @@ function ParagraphDialog(props) {
   createEffect(() => {
     if (props.isOpen) {
       setAlign(props.initial.align ?? "");
-      setIndentLeft(props.initial.indentLeft ?? "");
-      setIndentRight(props.initial.indentRight ?? "");
-      setSpacingBefore(props.initial.spacingBefore ?? "");
-      setSpacingAfter(props.initial.spacingAfter ?? "");
-      setLineHeight(props.initial.lineHeight ?? "");
+      setIndentLeft(parseNumber$1(props.initial.indentLeft ?? ""));
+      setIndentRight(parseNumber$1(props.initial.indentRight ?? ""));
+      setSpacingBefore(parseNumber$1(props.initial.spacingBefore ?? ""));
+      setSpacingAfter(parseNumber$1(props.initial.spacingAfter ?? ""));
+      setLineHeight(parseNumber$1(props.initial.lineHeight ?? ""));
       setShading(props.initial.shading ?? "");
       const initialBorderStyle = props.initial.borderStyle;
       setBorderStyle(initialBorderStyle === "solid" || initialBorderStyle === "dashed" || initialBorderStyle === "dotted" ? initialBorderStyle : "none");
-      setBorderWidth(props.initial.borderWidth ?? "");
+      setBorderWidth(parseNumber$1(props.initial.borderWidth ?? ""));
       setBorderColor(props.initial.borderColor ?? "");
       setSideTop(props.initial.borderSideTop ?? false);
       setSideRight(props.initial.borderSideRight ?? false);
@@ -32207,24 +32836,24 @@ function ParagraphDialog(props) {
       const hanging = parseNumber$1(props.initial.indentHanging ?? "");
       if (hanging !== null && hanging > 0) {
         setSpecial("hanging");
-        setSpecialBy(props.initial.indentHanging ?? "");
+        setSpecialBy(hanging);
       } else if (firstLine !== null && firstLine > 0) {
         setSpecial("firstLine");
-        setSpecialBy(props.initial.indentFirstLine ?? "");
+        setSpecialBy(firstLine);
       } else {
         setSpecial("none");
-        setSpecialBy("");
+        setSpecialBy(null);
       }
     }
   });
   const previewStyle = createMemo(() => {
-    const lh = parseNumber$1(lineHeight());
-    const left = parseNumber$1(indentLeft());
-    const right = parseNumber$1(indentRight());
-    const firstLine = special() === "firstLine" ? parseNumber$1(specialBy()) : null;
-    const hanging = special() === "hanging" ? parseNumber$1(specialBy()) : null;
+    const lh = lineHeight();
+    const left = indentLeft();
+    const right = indentRight();
+    const firstLine = special() === "firstLine" ? specialBy() : null;
+    const hanging = special() === "hanging" ? specialBy() : null;
     const textIndent = firstLine !== null ? firstLine : hanging !== null ? -hanging : null;
-    const borderCss = borderStyle() !== "none" ? `${parseNumber$1(borderWidth()) ?? DEFAULT_BORDER_WIDTH_PT$1}pt ${borderStyle()} ${borderColor().trim() || DEFAULT_BORDER_COLOR$1}` : void 0;
+    const borderCss = borderStyle() !== "none" ? `${borderWidth() ?? DEFAULT_BORDER_WIDTH_PT$1}pt ${borderStyle()} ${borderColor().trim() || DEFAULT_BORDER_COLOR$1}` : void 0;
     return {
       "text-align": align() || void 0,
       "line-height": lh !== null && lh > 0 ? String(lh) : void 0,
@@ -32248,7 +32877,7 @@ function ParagraphDialog(props) {
         left: null
       };
     }
-    const width = parseNumber$1(borderWidth());
+    const width = borderWidth();
     const border = {
       type: style2,
       width: width !== null && width > 0 ? width : DEFAULT_BORDER_WIDTH_PT$1,
@@ -32262,16 +32891,16 @@ function ParagraphDialog(props) {
     };
   };
   const handleApply = () => {
-    const by = parseNumber$1(specialBy());
+    const by = specialBy();
     props.onApply({
       align: align() || null,
-      indentLeft: parseNumber$1(indentLeft()),
-      indentRight: parseNumber$1(indentRight()),
+      indentLeft: indentLeft(),
+      indentRight: indentRight(),
       indentFirstLine: special() === "firstLine" ? by : null,
       indentHanging: special() === "hanging" ? by : null,
-      spacingBefore: parseNumber$1(spacingBefore()),
-      spacingAfter: parseNumber$1(spacingAfter()),
-      lineHeight: parseNumber$1(lineHeight()),
+      spacingBefore: spacingBefore(),
+      spacingAfter: spacingAfter(),
+      lineHeight: lineHeight(),
       shading: shading().trim() || null,
       borders: resolveBorders()
     }, props.initial);
@@ -32304,137 +32933,271 @@ function ParagraphDialog(props) {
       });
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling;
-        insert(_el$3, () => t("paragraph.alignLabel"));
-        _el$4.addEventListener("change", (e) => setAlign(e.currentTarget.value));
-        insert(_el$5, () => t("paragraph.alignLeft"));
-        insert(_el$6, () => t("paragraph.alignCenter"));
-        insert(_el$7, () => t("paragraph.alignRight"));
-        insert(_el$8, () => t("paragraph.alignJustify"));
-        createRenderEffect(() => _el$4.value = align());
-        return _el$;
-      })(), (() => {
-        var _el$9 = _tmpl$2$2(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$0.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
-        insert(_el$1, () => t("paragraph.indentLeftLabel"));
-        _el$10.$$input = (e) => setIndentLeft(e.currentTarget.value);
-        insert(_el$12, () => t("paragraph.indentRightLabel"));
-        _el$13.$$input = (e) => setIndentRight(e.currentTarget.value);
-        createRenderEffect(() => _el$10.value = indentLeft());
-        createRenderEffect(() => _el$13.value = indentRight());
-        return _el$9;
-      })(), (() => {
-        var _el$14 = _tmpl$3$2(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$19.nextSibling, _el$21 = _el$15.nextSibling, _el$22 = _el$21.firstChild, _el$23 = _el$22.nextSibling;
-        insert(_el$16, () => t("paragraph.specialLabel"));
-        _el$17.addEventListener("change", (e) => {
-          const next = e.currentTarget.value;
-          setSpecial(next);
-          if (next === "none") setSpecialBy("");
-        });
-        insert(_el$18, () => t("paragraph.specialNone"));
-        insert(_el$19, () => t("paragraph.specialFirstLine"));
-        insert(_el$20, () => t("paragraph.specialHanging"));
-        insert(_el$22, () => t("paragraph.specialByLabel"));
-        _el$23.$$input = (e) => setSpecialBy(e.currentTarget.value);
-        createRenderEffect(() => _el$23.disabled = special() === "none");
-        createRenderEffect(() => _el$17.value = special());
-        createRenderEffect(() => _el$23.value = specialBy());
-        return _el$14;
-      })(), (() => {
-        var _el$24 = _tmpl$4$2(), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$27 = _el$26.nextSibling, _el$28 = _el$25.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, _el$31 = _el$28.nextSibling, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling;
-        insert(_el$26, () => t("paragraph.spacingBeforeLabel"));
-        _el$27.$$input = (e) => setSpacingBefore(e.currentTarget.value);
-        insert(_el$29, () => t("paragraph.spacingAfterLabel"));
-        _el$30.$$input = (e) => setSpacingAfter(e.currentTarget.value);
-        insert(_el$32, () => t("paragraph.lineSpacingLabel"));
-        _el$33.$$input = (e) => setLineHeight(e.currentTarget.value);
-        createRenderEffect(() => _el$27.value = spacingBefore());
-        createRenderEffect(() => _el$30.value = spacingAfter());
-        createRenderEffect(() => _el$33.value = lineHeight());
-        return _el$24;
-      })(), (() => {
-        var _el$34 = _tmpl$5$2(), _el$35 = _el$34.firstChild, _el$36 = _el$35.firstChild, _el$37 = _el$36.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$39.nextSibling, _el$41 = _el$40.nextSibling, _el$42 = _el$35.nextSibling, _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling, _el$45 = _el$42.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, _el$48 = _el$45.nextSibling, _el$49 = _el$48.firstChild, _el$50 = _el$49.nextSibling;
-        insert(_el$36, () => t("paragraph.borderStyleLabel"));
-        _el$37.addEventListener("change", (e) => {
-          const next = e.currentTarget.value;
-          setBorderStyle(next);
-          if (next === "none") {
-            setSideTop(false);
-            setSideRight(false);
-            setSideBottom(false);
-            setSideLeft(false);
-          } else if (!sideTop() && !sideRight() && !sideBottom() && !sideLeft()) {
-            setSideTop(true);
-            setSideRight(true);
-            setSideBottom(true);
-            setSideLeft(true);
+      return [createComponent(FieldRow, {
+        get children() {
+          return createComponent(SelectField, {
+            get label() {
+              return t("paragraph.alignLabel");
+            },
+            get value() {
+              return align();
+            },
+            onChange: setAlign,
+            "data-testid": "editor-paragraph-dialog-align",
+            get options() {
+              return [{
+                value: "left",
+                label: t("paragraph.alignLeft")
+              }, {
+                value: "center",
+                label: t("paragraph.alignCenter")
+              }, {
+                value: "right",
+                label: t("paragraph.alignRight")
+              }, {
+                value: "justify",
+                label: t("paragraph.alignJustify")
+              }];
+            }
+          });
+        }
+      }), createComponent(FieldRow, {
+        get children() {
+          return [createComponent(NumberField, {
+            get label() {
+              return t("paragraph.indentLeftLabel");
+            },
+            step: "1",
+            get value() {
+              return indentLeft() ?? "";
+            },
+            onChange: setIndentLeft,
+            "data-testid": "editor-paragraph-dialog-indent-left"
+          }), createComponent(NumberField, {
+            get label() {
+              return t("paragraph.indentRightLabel");
+            },
+            step: "1",
+            get value() {
+              return indentRight() ?? "";
+            },
+            onChange: setIndentRight,
+            "data-testid": "editor-paragraph-dialog-indent-right"
+          })];
+        }
+      }), createComponent(FieldRow, {
+        get children() {
+          return [createComponent(SelectField, {
+            get label() {
+              return t("paragraph.specialLabel");
+            },
+            get value() {
+              return special();
+            },
+            onChange: (value) => {
+              const next = value;
+              setSpecial(next);
+              if (next === "none") setSpecialBy(null);
+            },
+            "data-testid": "editor-paragraph-dialog-special",
+            get options() {
+              return [{
+                value: "none",
+                label: t("paragraph.specialNone")
+              }, {
+                value: "firstLine",
+                label: t("paragraph.specialFirstLine")
+              }, {
+                value: "hanging",
+                label: t("paragraph.specialHanging")
+              }];
+            }
+          }), createComponent(NumberField, {
+            get label() {
+              return t("paragraph.specialByLabel");
+            },
+            min: "0",
+            step: "1",
+            get disabled() {
+              return special() === "none";
+            },
+            get value() {
+              return specialBy() ?? "";
+            },
+            onChange: setSpecialBy,
+            "data-testid": "editor-paragraph-dialog-special-by"
+          })];
+        }
+      }), createComponent(FieldRow, {
+        get children() {
+          return [createComponent(NumberField, {
+            get label() {
+              return t("paragraph.spacingBeforeLabel");
+            },
+            min: "0",
+            step: "1",
+            get value() {
+              return spacingBefore() ?? "";
+            },
+            onChange: setSpacingBefore,
+            "data-testid": "editor-paragraph-dialog-spacing-before"
+          }), createComponent(NumberField, {
+            get label() {
+              return t("paragraph.spacingAfterLabel");
+            },
+            min: "0",
+            step: "1",
+            get value() {
+              return spacingAfter() ?? "";
+            },
+            onChange: setSpacingAfter,
+            "data-testid": "editor-paragraph-dialog-spacing-after"
+          }), createComponent(NumberField, {
+            get label() {
+              return t("paragraph.lineSpacingLabel");
+            },
+            min: "0.5",
+            step: "0.05",
+            get value() {
+              return lineHeight() ?? "";
+            },
+            onChange: setLineHeight,
+            "data-testid": "editor-paragraph-dialog-line-height"
+          })];
+        }
+      }), (() => {
+        var _el$ = _tmpl$$a(), _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;
+        insert(_el$, createComponent(SelectField, {
+          "class": "oasis-editor-dialog-input-group-grow",
+          get label() {
+            return t("paragraph.borderStyleLabel");
+          },
+          get value() {
+            return borderStyle();
+          },
+          onChange: (value) => {
+            const next = value;
+            setBorderStyle(next);
+            if (next === "none") {
+              setSideTop(false);
+              setSideRight(false);
+              setSideBottom(false);
+              setSideLeft(false);
+            } else if (!sideTop() && !sideRight() && !sideBottom() && !sideLeft()) {
+              setSideTop(true);
+              setSideRight(true);
+              setSideBottom(true);
+              setSideLeft(true);
+            }
+          },
+          "data-testid": "editor-paragraph-dialog-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")
+            }];
           }
-        });
-        insert(_el$38, () => t("paragraph.borderNone"));
-        insert(_el$39, () => t("paragraph.borderSolid"));
-        insert(_el$40, () => t("paragraph.borderDashed"));
-        insert(_el$41, () => t("paragraph.borderDotted"));
-        insert(_el$43, () => t("paragraph.borderWidthLabel"));
-        _el$44.$$input = (e) => setBorderWidth(e.currentTarget.value);
-        insert(_el$46, () => t("paragraph.borderColorLabel"));
-        _el$47.$$input = (e) => setBorderColor(e.currentTarget.value);
-        insert(_el$49, () => t("paragraph.shadingLabel"));
-        _el$50.$$input = (e) => setShading(e.currentTarget.value);
-        createRenderEffect((_p$) => {
-          var _v$ = borderStyle() === "none", _v$2 = borderStyle() === "none";
-          _v$ !== _p$.e && (_el$44.disabled = _p$.e = _v$);
-          _v$2 !== _p$.t && (_el$47.disabled = _p$.t = _v$2);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0
-        });
-        createRenderEffect(() => _el$37.value = borderStyle());
-        createRenderEffect(() => _el$44.value = borderWidth());
-        createRenderEffect(() => _el$47.value = borderColor() || DEFAULT_BORDER_COLOR$1);
-        createRenderEffect(() => _el$50.value = shading() || "#ffffff");
-        return _el$34;
+        }), _el$2);
+        insert(_el$, createComponent(NumberField, {
+          "class": "oasis-editor-dialog-input-group-grow",
+          get label() {
+            return t("paragraph.borderWidthLabel");
+          },
+          min: "0",
+          step: "0.25",
+          get disabled() {
+            return borderStyle() === "none";
+          },
+          get value() {
+            return borderWidth() ?? "";
+          },
+          onChange: setBorderWidth,
+          "data-testid": "editor-paragraph-dialog-border-width"
+        }), _el$2);
+        insert(_el$3, () => t("paragraph.borderColorLabel"));
+        _el$4.$$input = (e) => setBorderColor(e.currentTarget.value);
+        insert(_el$6, () => t("paragraph.shadingLabel"));
+        _el$7.$$input = (e) => setShading(e.currentTarget.value);
+        createRenderEffect(() => _el$4.disabled = borderStyle() === "none");
+        createRenderEffect(() => _el$4.value = borderColor() || DEFAULT_BORDER_COLOR$1);
+        createRenderEffect(() => _el$7.value = shading() || "#ffffff");
+        return _el$;
       })(), (() => {
-        var _el$51 = _tmpl$6$2(), _el$52 = _el$51.firstChild, _el$53 = _el$52.firstChild, _el$54 = _el$53.nextSibling, _el$55 = _el$54.firstChild, _el$56 = _el$55.firstChild, _el$57 = _el$55.nextSibling, _el$58 = _el$57.firstChild, _el$59 = _el$57.nextSibling, _el$60 = _el$59.firstChild, _el$61 = _el$59.nextSibling, _el$62 = _el$61.firstChild;
-        insert(_el$53, () => t("paragraph.borderSidesLabel"));
-        _el$56.addEventListener("change", (e) => setSideTop(e.currentTarget.checked));
-        insert(_el$55, () => t("paragraph.borderSideTop"), null);
-        _el$58.addEventListener("change", (e) => setSideRight(e.currentTarget.checked));
-        insert(_el$57, () => t("paragraph.borderSideRight"), null);
-        _el$60.addEventListener("change", (e) => setSideBottom(e.currentTarget.checked));
-        insert(_el$59, () => t("paragraph.borderSideBottom"), null);
-        _el$62.addEventListener("change", (e) => setSideLeft(e.currentTarget.checked));
-        insert(_el$61, () => t("paragraph.borderSideLeft"), null);
-        createRenderEffect((_p$) => {
-          var _v$3 = borderStyle() === "none", _v$4 = borderStyle() === "none", _v$5 = borderStyle() === "none", _v$6 = borderStyle() === "none";
-          _v$3 !== _p$.e && (_el$56.disabled = _p$.e = _v$3);
-          _v$4 !== _p$.t && (_el$58.disabled = _p$.t = _v$4);
-          _v$5 !== _p$.a && (_el$60.disabled = _p$.a = _v$5);
-          _v$6 !== _p$.o && (_el$62.disabled = _p$.o = _v$6);
-          return _p$;
-        }, {
-          e: void 0,
-          t: void 0,
-          a: void 0,
-          o: void 0
-        });
-        createRenderEffect(() => _el$56.checked = sideTop());
-        createRenderEffect(() => _el$58.checked = sideRight());
-        createRenderEffect(() => _el$60.checked = sideBottom());
-        createRenderEffect(() => _el$62.checked = sideLeft());
-        return _el$51;
+        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() {
+            return t("paragraph.borderSideTop");
+          },
+          get disabled() {
+            return borderStyle() === "none";
+          },
+          get checked() {
+            return sideTop();
+          },
+          onChange: setSideTop,
+          "data-testid": "editor-paragraph-dialog-border-side-top"
+        }), null);
+        insert(_el$1, createComponent(Checkbox, {
+          get label() {
+            return t("paragraph.borderSideRight");
+          },
+          get disabled() {
+            return borderStyle() === "none";
+          },
+          get checked() {
+            return sideRight();
+          },
+          onChange: setSideRight,
+          "data-testid": "editor-paragraph-dialog-border-side-right"
+        }), null);
+        insert(_el$1, createComponent(Checkbox, {
+          get label() {
+            return t("paragraph.borderSideBottom");
+          },
+          get disabled() {
+            return borderStyle() === "none";
+          },
+          get checked() {
+            return sideBottom();
+          },
+          onChange: setSideBottom,
+          "data-testid": "editor-paragraph-dialog-border-side-bottom"
+        }), null);
+        insert(_el$1, createComponent(Checkbox, {
+          get label() {
+            return t("paragraph.borderSideLeft");
+          },
+          get disabled() {
+            return borderStyle() === "none";
+          },
+          get checked() {
+            return sideLeft();
+          },
+          onChange: setSideLeft,
+          "data-testid": "editor-paragraph-dialog-border-side-left"
+        }), null);
+        return _el$8;
       })(), (() => {
-        var _el$63 = _tmpl$7$1(), _el$64 = _el$63.firstChild, _el$65 = _el$64.nextSibling;
-        insert(_el$64, () => t("paragraph.preview"));
-        insert(_el$65, () => t("paragraph.previewText"));
-        createRenderEffect((_$p) => style(_el$65, previewStyle(), _$p));
-        return _el$63;
+        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));
+        return _el$10;
       })()];
     }
   });
 }
 delegateEvents(["input"]);
-var _tmpl$$5 = /* @__PURE__ */ template(`<div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><input type=number class=oasis-editor-dialog-input step=1>`), _tmpl$2$1 = /* @__PURE__ */ template(`<label class=oasis-editor-dialog-style-toggle><input type=checkbox>`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row><label class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><span class=oasis-editor-dialog-label></span><select class=oasis-editor-dialog-input data-testid=editor-table-properties-floating-h-anchor><option value=margin></option><option value=page></option><option value=text></option></select></label><label class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><span class=oasis-editor-dialog-label></span><select class=oasis-editor-dialog-input data-testid=editor-table-properties-floating-v-anchor><option value=margin></option><option value=page></option><option value=text>`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row><label class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><span class=oasis-editor-dialog-label></span><select class=oasis-editor-dialog-input data-testid=editor-table-properties-floating-x-align><option value></option></select></label><label class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><span class=oasis-editor-dialog-label></span><select class=oasis-editor-dialog-input data-testid=editor-table-properties-floating-y-align><option value>`), _tmpl$5$1 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row>`), _tmpl$6$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 class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-table-properties-table-width-unit><option value=points></option><option value=percent></option></select></div></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-style-row></div><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-style-row>`), _tmpl$7 = /* @__PURE__ */ template(`<label class=oasis-editor-dialog-style-toggle><input type=radio name=table-align>`), _tmpl$8 = /* @__PURE__ */ template(`<option>`), _tmpl$9 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><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><select class=oasis-editor-dialog-input data-testid=editor-table-properties-row-height-rule><option value></option><option value=atLeast></option><option value=exact></option></select></div></div><div class=oasis-editor-dialog-style-row>`), _tmpl$0 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row>`), _tmpl$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><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><select class=oasis-editor-dialog-input data-testid=editor-table-properties-cell-valign><option value></option><option value=top></option><option value=middle></option><option value=bottom></option></select></div><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-table-properties-cell-direction><option value></option><option value=lrTb>lrTb</option><option value=tbRl>tbRl</option><option value=btLr>btLr</option><option value=lrTbV>lrTbV</option><option value=tbRlV>tbRlV</option></select></div></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 oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-table-properties-border-style><option value=none></option><option value=solid></option><option value=dashed></option><option value=dotted></option></select></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-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>`), _tmpl$10 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input class=oasis-editor-dialog-input data-testid=editor-table-properties-alt-title></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><textarea class="oasis-editor-dialog-input oasis-editor-table-properties-textarea"data-testid=editor-table-properties-alt-description>`);
 const DEFAULT_BORDER_WIDTH_PT = 0.5;
 const DEFAULT_BORDER_COLOR = "#000000";
 function parseNumber(value) {
@@ -32456,241 +33219,8 @@ function resolveBorder(style2, widthValue, colorValue) {
     color: colorValue.trim() || DEFAULT_BORDER_COLOR
   };
 }
-function numericInput(label, value, setter, testId, disabled = false, allowNegative = false) {
-  return (() => {
-    var _el$ = _tmpl$$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    insert(_el$2, label);
-    _el$3.$$input = (e) => setter(e.currentTarget.value);
-    setAttribute(_el$3, "min", allowNegative ? void 0 : "0");
-    _el$3.disabled = disabled;
-    setAttribute(_el$3, "data-testid", testId);
-    createRenderEffect(() => _el$3.value = value());
-    return _el$;
-  })();
-}
-function checkbox(label, checked, setter, testId, disabled = false) {
-  return (() => {
-    var _el$4 = _tmpl$2$1(), _el$5 = _el$4.firstChild;
-    _el$5.addEventListener("change", (e) => setter(e.currentTarget.checked));
-    _el$5.disabled = disabled;
-    setAttribute(_el$5, "data-testid", testId);
-    insert(_el$4, label, null);
-    createRenderEffect(() => _el$5.checked = checked());
-    return _el$4;
-  })();
-}
-function TableTabPanel(p) {
-  const t = useI18n();
-  return (() => {
-    var _el$6 = _tmpl$6$1(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$7.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.nextSibling, _el$17 = _el$13.nextSibling, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling;
-    insert(_el$8, () => t("table.sizeSection"));
-    insert(_el$9, () => numericInput(t("table.preferredWidth"), () => p.form.tableWidth, (v) => p.set("tableWidth", v), "editor-table-properties-table-width"), _el$0);
-    insert(_el$1, () => t("table.measureIn"));
-    _el$10.addEventListener("change", (e) => p.set("tableWidthUnit", e.currentTarget.value));
-    insert(_el$11, () => t("table.points"));
-    insert(_el$12, () => t("table.percent"));
-    insert(_el$14, () => t("table.alignmentSection"));
-    insert(_el$15, () => ["left", "center", "right"].map((align) => (() => {
-      var _el$43 = _tmpl$7(), _el$44 = _el$43.firstChild;
-      _el$44.addEventListener("change", () => p.set("tableAlign", align));
-      setAttribute(_el$44, "data-testid", `editor-table-properties-align-${align}`);
-      insert(_el$43, () => t(`table.align${align[0].toUpperCase()}${align.slice(1)}`), null);
-      createRenderEffect(() => _el$44.checked = p.form.tableAlign === align);
-      return _el$43;
-    })()));
-    insert(_el$16, () => numericInput(t("table.indentFromLeft"), () => p.form.tableIndentLeft, (v) => p.set("tableIndentLeft", v), "editor-table-properties-indent-left"));
-    insert(_el$18, () => t("table.textWrappingSection"));
-    insert(_el$19, () => checkbox(t("table.wrapNone"), () => p.form.tableWrapping === "none", () => p.set("tableWrapping", "none"), "editor-table-properties-wrap-none"), null);
-    insert(_el$19, () => checkbox(t("table.wrapAround"), () => p.form.tableWrapping === "around", () => p.set("tableWrapping", "around"), "editor-table-properties-wrap-around"), null);
-    insert(_el$17, createComponent(Show, {
-      get when() {
-        return p.form.tableWrapping === "around";
-      },
-      get children() {
-        return [(() => {
-          var _el$20 = _tmpl$3$1(), _el$21 = _el$20.firstChild, _el$22 = _el$21.firstChild, _el$23 = _el$22.nextSibling, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$26 = _el$25.nextSibling, _el$27 = _el$21.nextSibling, _el$28 = _el$27.firstChild, _el$29 = _el$28.nextSibling, _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling, _el$32 = _el$31.nextSibling;
-          insert(_el$22, () => t("table.horizontalAnchor"));
-          _el$23.addEventListener("change", (e) => p.set("floatingHorizontalAnchor", e.currentTarget.value));
-          insert(_el$24, () => t("table.anchorMargin"));
-          insert(_el$25, () => t("table.anchorPage"));
-          insert(_el$26, () => t("table.anchorText"));
-          insert(_el$28, () => t("table.verticalAnchor"));
-          _el$29.addEventListener("change", (e) => p.set("floatingVerticalAnchor", e.currentTarget.value));
-          insert(_el$30, () => t("table.anchorMargin"));
-          insert(_el$31, () => t("table.anchorPage"));
-          insert(_el$32, () => t("table.anchorText"));
-          createRenderEffect(() => _el$23.value = p.form.floatingHorizontalAnchor);
-          createRenderEffect(() => _el$29.value = p.form.floatingVerticalAnchor);
-          return _el$20;
-        })(), (() => {
-          var _el$33 = _tmpl$4$1(), _el$34 = _el$33.firstChild, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$36.firstChild, _el$38 = _el$34.nextSibling, _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling, _el$41 = _el$40.firstChild;
-          insert(_el$33, () => numericInput(t("table.positionX"), () => p.form.floatingX, (v) => p.set("floatingX", v), "editor-table-properties-floating-x", Boolean(p.form.floatingXAlign), true), _el$34);
-          insert(_el$33, () => numericInput(t("table.positionY"), () => p.form.floatingY, (v) => p.set("floatingY", v), "editor-table-properties-floating-y", Boolean(p.form.floatingYAlign), true), _el$34);
-          insert(_el$35, () => t("table.horizontalAlignment"));
-          _el$36.addEventListener("change", (e) => p.set("floatingXAlign", e.currentTarget.value));
-          insert(_el$37, () => t("table.explicitOffset"));
-          insert(_el$36, () => ["left", "center", "right", "inside", "outside"].map((value) => (() => {
-            var _el$45 = _tmpl$8();
-            _el$45.value = value;
-            insert(_el$45, value);
-            return _el$45;
-          })()), null);
-          insert(_el$39, () => t("table.verticalAlignment"));
-          _el$40.addEventListener("change", (e) => p.set("floatingYAlign", e.currentTarget.value));
-          insert(_el$41, () => t("table.explicitOffset"));
-          insert(_el$40, () => ["top", "center", "bottom", "inside", "outside"].map((value) => (() => {
-            var _el$46 = _tmpl$8();
-            _el$46.value = value;
-            insert(_el$46, value);
-            return _el$46;
-          })()), null);
-          createRenderEffect(() => _el$36.value = p.form.floatingXAlign);
-          createRenderEffect(() => _el$40.value = p.form.floatingYAlign);
-          return _el$33;
-        })(), (() => {
-          var _el$42 = _tmpl$5$1();
-          insert(_el$42, () => numericInput(t("table.distanceTop"), () => p.form.floatingDistanceTop, (v) => p.set("floatingDistanceTop", v), "editor-table-properties-floating-distance-top"), null);
-          insert(_el$42, () => numericInput(t("table.distanceRight"), () => p.form.floatingDistanceRight, (v) => p.set("floatingDistanceRight", v), "editor-table-properties-floating-distance-right"), null);
-          insert(_el$42, () => numericInput(t("table.distanceBottom"), () => p.form.floatingDistanceBottom, (v) => p.set("floatingDistanceBottom", v), "editor-table-properties-floating-distance-bottom"), null);
-          insert(_el$42, () => numericInput(t("table.distanceLeft"), () => p.form.floatingDistanceLeft, (v) => p.set("floatingDistanceLeft", v), "editor-table-properties-floating-distance-left"), null);
-          return _el$42;
-        })(), memo(() => checkbox(t("table.allowOverlap"), () => p.form.floatingOverlap === "overlap", (value) => p.set("floatingOverlap", value ? "overlap" : "never"), "editor-table-properties-floating-overlap"))];
-      }
-    }), null);
-    createRenderEffect(() => _el$10.value = p.form.tableWidthUnit);
-    return _el$6;
-  })();
-}
-function RowTabPanel(p) {
-  const t = useI18n();
-  return (() => {
-    var _el$47 = _tmpl$9(), _el$48 = _el$47.firstChild, _el$49 = _el$48.firstChild, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$52 = _el$51.firstChild, _el$53 = _el$52.nextSibling, _el$54 = _el$53.nextSibling, _el$55 = _el$48.nextSibling;
-    insert(_el$48, () => numericInput(t("table.rowHeight"), () => p.form.rowHeight, (v) => p.set("rowHeight", v), "editor-table-properties-row-height"), _el$49);
-    insert(_el$50, () => t("table.rowHeightRule"));
-    _el$51.addEventListener("change", (e) => p.set("rowHeightRule", e.currentTarget.value));
-    insert(_el$52, () => t("table.rowAuto"));
-    insert(_el$53, () => t("table.rowAtLeast"));
-    insert(_el$54, () => t("table.rowExactly"));
-    insert(_el$55, () => checkbox(t("table.repeatHeader"), () => p.form.repeatHeader, (v) => p.set("repeatHeader", v), "editor-table-properties-repeat-header"), null);
-    insert(_el$55, () => checkbox(t("table.allowBreakAcrossPages"), () => p.form.allowBreakAcrossPages, (v) => p.set("allowBreakAcrossPages", v), "editor-table-properties-allow-break"), null);
-    insert(_el$55, () => checkbox(t("table.hiddenRow"), () => p.form.hiddenRow, (v) => p.set("hiddenRow", v), "editor-table-properties-hidden-row"), null);
-    createRenderEffect(() => _el$51.value = p.form.rowHeightRule);
-    return _el$47;
-  })();
-}
-function ColumnTabPanel(p) {
-  const t = useI18n();
-  return (() => {
-    var _el$56 = _tmpl$0(), _el$57 = _el$56.firstChild;
-    insert(_el$57, () => numericInput(t("table.columnWidth"), () => p.form.columnWidth, (v) => p.set("columnWidth", v), "editor-table-properties-column-width"));
-    return _el$56;
-  })();
-}
-function CellTabPanel(p) {
-  const t = useI18n();
-  const borderPreview = createMemo(() => {
-    const border = resolveBorder(p.form.borderStyle, p.form.borderWidth, p.form.borderColor);
-    const css = border ? `${border.width}pt ${border.type} ${border.color}` : void 0;
-    return {
-      "background-color": p.form.shading.trim() || void 0,
-      "border-top": css && p.form.borderTop ? css : "1px solid #dadce0",
-      "border-right": css && p.form.borderRight ? css : "1px solid #dadce0",
-      "border-bottom": css && p.form.borderBottom ? css : "1px solid #dadce0",
-      "border-left": css && p.form.borderLeft ? css : "1px solid #dadce0"
-    };
-  });
-  return (() => {
-    var _el$58 = _tmpl$1(), _el$59 = _el$58.firstChild, _el$60 = _el$59.firstChild, _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling, _el$63 = _el$62.firstChild, _el$64 = _el$63.nextSibling, _el$65 = _el$64.nextSibling, _el$66 = _el$65.nextSibling, _el$67 = _el$60.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$68.nextSibling, _el$70 = _el$69.firstChild, _el$71 = _el$59.nextSibling, _el$72 = _el$71.firstChild, _el$73 = _el$72.nextSibling, _el$74 = _el$71.nextSibling, _el$75 = _el$74.firstChild, _el$76 = _el$75.nextSibling, _el$77 = _el$74.nextSibling, _el$78 = _el$77.firstChild, _el$79 = _el$78.nextSibling, _el$80 = _el$79.firstChild, _el$81 = _el$80.firstChild, _el$82 = _el$81.nextSibling, _el$83 = _el$82.firstChild, _el$84 = _el$83.nextSibling, _el$85 = _el$84.nextSibling, _el$86 = _el$85.nextSibling, _el$87 = _el$80.nextSibling, _el$88 = _el$87.firstChild, _el$89 = _el$88.nextSibling, _el$90 = _el$87.nextSibling, _el$91 = _el$90.firstChild, _el$92 = _el$91.nextSibling, _el$93 = _el$79.nextSibling, _el$94 = _el$93.nextSibling;
-    insert(_el$59, () => numericInput(t("table.cellWidth"), () => p.form.cellWidth, (v) => p.set("cellWidth", v), "editor-table-properties-cell-width"), _el$60);
-    insert(_el$61, () => t("table.verticalAlignment"));
-    _el$62.addEventListener("change", (e) => p.set("cellVerticalAlign", e.currentTarget.value));
-    insert(_el$63, () => t("table.inherit"));
-    insert(_el$64, () => t("table.valignTop"));
-    insert(_el$65, () => t("table.valignMiddle"));
-    insert(_el$66, () => t("table.valignBottom"));
-    insert(_el$68, () => t("table.textDirection"));
-    _el$69.addEventListener("change", (e) => p.set("cellTextDirection", e.currentTarget.value));
-    insert(_el$70, () => t("table.inherit"));
-    insert(_el$72, () => t("table.options"));
-    insert(_el$73, () => checkbox(t("table.noWrap"), () => p.form.cellNoWrap, (v) => p.set("cellNoWrap", v), "editor-table-properties-cell-nowrap"), null);
-    insert(_el$73, () => checkbox(t("table.fitText"), () => p.form.cellFitText, (v) => p.set("cellFitText", v), "editor-table-properties-cell-fit-text"), null);
-    insert(_el$73, () => checkbox(t("table.hideMark"), () => p.form.cellHideMark, (v) => p.set("cellHideMark", v), "editor-table-properties-cell-hide-mark"), null);
-    insert(_el$75, () => t("table.cellMargins"));
-    insert(_el$76, () => numericInput(t("paragraph.borderSideTop"), () => p.form.marginTop, (v) => p.set("marginTop", v), "editor-table-properties-margin-top"), null);
-    insert(_el$76, () => numericInput(t("paragraph.borderSideRight"), () => p.form.marginRight, (v) => p.set("marginRight", v), "editor-table-properties-margin-right"), null);
-    insert(_el$76, () => numericInput(t("paragraph.borderSideBottom"), () => p.form.marginBottom, (v) => p.set("marginBottom", v), "editor-table-properties-margin-bottom"), null);
-    insert(_el$76, () => numericInput(t("paragraph.borderSideLeft"), () => p.form.marginLeft, (v) => p.set("marginLeft", v), "editor-table-properties-margin-left"), null);
-    insert(_el$78, () => t("paragraph.bordersSection"));
-    insert(_el$81, () => t("paragraph.borderStyleLabel"));
-    _el$82.addEventListener("change", (e) => {
-      const next = e.currentTarget.value;
-      p.set("borderStyle", next);
-      if (next === "none") {
-        p.set("borderTop", false);
-        p.set("borderRight", false);
-        p.set("borderBottom", false);
-        p.set("borderLeft", false);
-        p.set("borderStart", false);
-        p.set("borderEnd", false);
-        p.set("borderTlBr", false);
-        p.set("borderTrBl", false);
-      } else if (!p.form.borderTop && !p.form.borderRight && !p.form.borderBottom && !p.form.borderLeft) {
-        p.set("borderTop", true);
-        p.set("borderRight", true);
-        p.set("borderBottom", true);
-        p.set("borderLeft", true);
-      }
-    });
-    insert(_el$83, () => t("paragraph.borderNone"));
-    insert(_el$84, () => t("paragraph.borderSolid"));
-    insert(_el$85, () => t("paragraph.borderDashed"));
-    insert(_el$86, () => t("paragraph.borderDotted"));
-    insert(_el$79, () => numericInput(t("paragraph.borderWidthLabel"), () => p.form.borderWidth, (v) => p.set("borderWidth", v), "editor-table-properties-border-width", p.form.borderStyle === "none"), _el$87);
-    insert(_el$88, () => t("paragraph.borderColorLabel"));
-    _el$89.$$input = (e) => p.set("borderColor", e.currentTarget.value);
-    insert(_el$91, () => t("paragraph.shadingLabel"));
-    _el$92.$$input = (e) => p.set("shading", e.currentTarget.value);
-    insert(_el$93, () => checkbox(t("paragraph.borderSideTop"), () => p.form.borderTop, (v) => p.set("borderTop", v), "editor-table-properties-border-top", p.form.borderStyle === "none"), null);
-    insert(_el$93, () => checkbox(t("paragraph.borderSideRight"), () => p.form.borderRight, (v) => p.set("borderRight", v), "editor-table-properties-border-right", p.form.borderStyle === "none"), null);
-    insert(_el$93, () => checkbox(t("paragraph.borderSideBottom"), () => p.form.borderBottom, (v) => p.set("borderBottom", v), "editor-table-properties-border-bottom", p.form.borderStyle === "none"), null);
-    insert(_el$93, () => checkbox(t("paragraph.borderSideLeft"), () => p.form.borderLeft, (v) => p.set("borderLeft", v), "editor-table-properties-border-left", p.form.borderStyle === "none"), null);
-    insert(_el$93, () => checkbox(t("table.borderStart"), () => p.form.borderStart, (v) => p.set("borderStart", v), "editor-table-properties-border-start", p.form.borderStyle === "none"), null);
-    insert(_el$93, () => checkbox(t("table.borderEnd"), () => p.form.borderEnd, (v) => p.set("borderEnd", v), "editor-table-properties-border-end", p.form.borderStyle === "none"), null);
-    insert(_el$93, () => checkbox(t("table.borderTlBr"), () => p.form.borderTlBr, (v) => p.set("borderTlBr", v), "editor-table-properties-border-tlbr", p.form.borderStyle === "none"), null);
-    insert(_el$93, () => checkbox(t("table.borderTrBl"), () => p.form.borderTrBl, (v) => p.set("borderTrBl", v), "editor-table-properties-border-trbl", p.form.borderStyle === "none"), null);
-    createRenderEffect((_p$) => {
-      var _v$ = p.form.borderStyle === "none", _v$2 = borderPreview();
-      _v$ !== _p$.e && (_el$89.disabled = _p$.e = _v$);
-      _p$.t = style(_el$94, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    createRenderEffect(() => _el$62.value = p.form.cellVerticalAlign);
-    createRenderEffect(() => _el$69.value = p.form.cellTextDirection);
-    createRenderEffect(() => _el$82.value = p.form.borderStyle);
-    createRenderEffect(() => _el$89.value = p.form.borderColor || DEFAULT_BORDER_COLOR);
-    createRenderEffect(() => _el$92.value = p.form.shading || "#ffffff");
-    return _el$58;
-  })();
-}
-function AltTextTabPanel(p) {
-  const t = useI18n();
-  return (() => {
-    var _el$95 = _tmpl$10(), _el$96 = _el$95.firstChild, _el$97 = _el$96.firstChild, _el$98 = _el$97.nextSibling, _el$99 = _el$96.nextSibling, _el$100 = _el$99.firstChild, _el$101 = _el$100.nextSibling;
-    insert(_el$97, () => t("table.altTitle"));
-    _el$98.$$input = (e) => p.set("altTitle", e.currentTarget.value);
-    insert(_el$100, () => t("table.altDescription"));
-    _el$101.$$input = (e) => p.set("altDescription", e.currentTarget.value);
-    createRenderEffect(() => _el$98.value = p.form.altTitle);
-    createRenderEffect(() => _el$101.value = p.form.altDescription);
-    return _el$95;
-  })();
-}
-function TablePropertiesDialog(props) {
-  const t = useI18n();
-  const [form, setForm] = createStore({
+function createDefaultFormState() {
+  return {
     activeTab: "table",
     tableWidth: "",
     tableWidthUnit: "points",
@@ -32738,118 +33268,775 @@ function TablePropertiesDialog(props) {
     shading: "",
     altTitle: "",
     altDescription: ""
-  });
+  };
+}
+function formStateFromInitial(initial) {
+  return {
+    activeTab: initial.activeTab ?? "table",
+    tableWidth: initial.tableWidth,
+    tableWidthUnit: initial.tableWidthUnit,
+    tableAlign: initial.tableAlign,
+    tableIndentLeft: initial.tableIndentLeft,
+    tableWrapping: initial.tableWrapping,
+    floatingHorizontalAnchor: initial.floatingHorizontalAnchor,
+    floatingVerticalAnchor: initial.floatingVerticalAnchor,
+    floatingX: initial.floatingX,
+    floatingY: initial.floatingY,
+    floatingXAlign: initial.floatingXAlign,
+    floatingYAlign: initial.floatingYAlign,
+    floatingDistanceTop: initial.floatingDistanceTop,
+    floatingDistanceRight: initial.floatingDistanceRight,
+    floatingDistanceBottom: initial.floatingDistanceBottom,
+    floatingDistanceLeft: initial.floatingDistanceLeft,
+    floatingOverlap: initial.floatingOverlap,
+    rowHeight: initial.rowHeight,
+    rowHeightRule: initial.rowHeightRule,
+    repeatHeader: initial.repeatHeader,
+    allowBreakAcrossPages: initial.allowBreakAcrossPages,
+    hiddenRow: initial.hiddenRow,
+    columnWidth: initial.columnWidth,
+    cellWidth: initial.cellWidth,
+    cellVerticalAlign: initial.cellVerticalAlign,
+    cellTextDirection: initial.cellTextDirection,
+    cellNoWrap: initial.cellNoWrap,
+    cellFitText: initial.cellFitText,
+    cellHideMark: initial.cellHideMark,
+    marginTop: initial.marginTop,
+    marginRight: initial.marginRight,
+    marginBottom: initial.marginBottom,
+    marginLeft: initial.marginLeft,
+    borderStyle: initial.borderStyle,
+    borderWidth: initial.borderWidth,
+    borderColor: initial.borderColor,
+    borderTop: initial.borderTop,
+    borderRight: initial.borderRight,
+    borderBottom: initial.borderBottom,
+    borderLeft: initial.borderLeft,
+    borderStart: initial.borderStart,
+    borderEnd: initial.borderEnd,
+    borderTlBr: initial.borderTopLeftToBottomRight,
+    borderTrBl: initial.borderTopRightToBottomLeft,
+    shading: initial.shading,
+    altTitle: initial.altTitle,
+    altDescription: initial.altDescription
+  };
+}
+function buildTableApplyValues(form) {
+  const border = resolveBorder(
+    form.borderStyle,
+    form.borderWidth,
+    form.borderColor
+  );
+  return {
+    tableWidth: parseWidth(form.tableWidth, form.tableWidthUnit),
+    tableAlign: form.tableAlign || null,
+    tableIndentLeft: parseWidth(form.tableIndentLeft, "points"),
+    tableFloating: form.tableWrapping === "around" ? {
+      horizontalAnchor: form.floatingHorizontalAnchor,
+      verticalAnchor: form.floatingVerticalAnchor,
+      ...form.floatingXAlign ? {
+        xAlign: form.floatingXAlign
+      } : { x: parseNumber(form.floatingX) ?? 0 },
+      ...form.floatingYAlign ? {
+        yAlign: form.floatingYAlign
+      } : { y: parseNumber(form.floatingY) ?? 0 },
+      distanceTop: parseNumber(form.floatingDistanceTop) ?? 0,
+      distanceRight: parseNumber(form.floatingDistanceRight) ?? 0,
+      distanceBottom: parseNumber(form.floatingDistanceBottom) ?? 0,
+      distanceLeft: parseNumber(form.floatingDistanceLeft) ?? 0
+    } : null,
+    tableOverlap: form.tableWrapping === "around" ? form.floatingOverlap : null,
+    rowHeight: parseWidth(form.rowHeight, "points"),
+    rowHeightRule: form.rowHeightRule || null,
+    repeatHeader: form.repeatHeader,
+    cantSplit: !form.allowBreakAcrossPages,
+    hiddenRow: form.hiddenRow,
+    columnWidth: parseWidth(form.columnWidth, "points"),
+    cellWidth: parseWidth(form.cellWidth, "points"),
+    cellVerticalAlign: form.cellVerticalAlign || null,
+    cellTextDirection: form.cellTextDirection || null,
+    cellNoWrap: form.cellNoWrap,
+    cellFitText: form.cellFitText,
+    cellHideMark: form.cellHideMark,
+    margins: {
+      top: parseNumber(form.marginTop),
+      right: parseNumber(form.marginRight),
+      bottom: parseNumber(form.marginBottom),
+      left: parseNumber(form.marginLeft)
+    },
+    borders: {
+      top: form.borderTop ? border : null,
+      right: form.borderRight ? border : null,
+      bottom: form.borderBottom ? border : null,
+      left: form.borderLeft ? border : null,
+      start: form.borderStart ? border : null,
+      end: form.borderEnd ? border : null,
+      topLeftToBottomRight: form.borderTlBr ? border : null,
+      topRightToBottomLeft: form.borderTrBl ? border : null
+    },
+    shading: form.shading.trim() || null,
+    altTitle: form.altTitle.trim() || null,
+    altDescription: form.altDescription.trim() || null
+  };
+}
+function useTablePropertiesController(props) {
+  const [form, setForm] = createStore(createDefaultFormState());
   createEffect(() => {
     if (!props.isOpen) return;
-    setForm(reconcile({
-      activeTab: props.initial.activeTab ?? "table",
-      tableWidth: props.initial.tableWidth,
-      tableWidthUnit: props.initial.tableWidthUnit,
-      tableAlign: props.initial.tableAlign,
-      tableIndentLeft: props.initial.tableIndentLeft,
-      tableWrapping: props.initial.tableWrapping,
-      floatingHorizontalAnchor: props.initial.floatingHorizontalAnchor,
-      floatingVerticalAnchor: props.initial.floatingVerticalAnchor,
-      floatingX: props.initial.floatingX,
-      floatingY: props.initial.floatingY,
-      floatingXAlign: props.initial.floatingXAlign,
-      floatingYAlign: props.initial.floatingYAlign,
-      floatingDistanceTop: props.initial.floatingDistanceTop,
-      floatingDistanceRight: props.initial.floatingDistanceRight,
-      floatingDistanceBottom: props.initial.floatingDistanceBottom,
-      floatingDistanceLeft: props.initial.floatingDistanceLeft,
-      floatingOverlap: props.initial.floatingOverlap,
-      rowHeight: props.initial.rowHeight,
-      rowHeightRule: props.initial.rowHeightRule,
-      repeatHeader: props.initial.repeatHeader,
-      allowBreakAcrossPages: props.initial.allowBreakAcrossPages,
-      hiddenRow: props.initial.hiddenRow,
-      columnWidth: props.initial.columnWidth,
-      cellWidth: props.initial.cellWidth,
-      cellVerticalAlign: props.initial.cellVerticalAlign,
-      cellTextDirection: props.initial.cellTextDirection,
-      cellNoWrap: props.initial.cellNoWrap,
-      cellFitText: props.initial.cellFitText,
-      cellHideMark: props.initial.cellHideMark,
-      marginTop: props.initial.marginTop,
-      marginRight: props.initial.marginRight,
-      marginBottom: props.initial.marginBottom,
-      marginLeft: props.initial.marginLeft,
-      borderStyle: props.initial.borderStyle,
-      borderWidth: props.initial.borderWidth,
-      borderColor: props.initial.borderColor,
-      borderTop: props.initial.borderTop,
-      borderRight: props.initial.borderRight,
-      borderBottom: props.initial.borderBottom,
-      borderLeft: props.initial.borderLeft,
-      borderStart: props.initial.borderStart,
-      borderEnd: props.initial.borderEnd,
-      borderTlBr: props.initial.borderTopLeftToBottomRight,
-      borderTrBl: props.initial.borderTopRightToBottomLeft,
-      shading: props.initial.shading,
-      altTitle: props.initial.altTitle,
-      altDescription: props.initial.altDescription
-    }));
+    setForm(reconcile(formStateFromInitial(props.initial)));
   });
   const handleApply = () => {
-    const border = resolveBorder(form.borderStyle, form.borderWidth, form.borderColor);
-    props.onApply({
-      tableWidth: parseWidth(form.tableWidth, form.tableWidthUnit),
-      tableAlign: form.tableAlign || null,
-      tableIndentLeft: parseWidth(form.tableIndentLeft, "points"),
-      tableFloating: form.tableWrapping === "around" ? {
-        horizontalAnchor: form.floatingHorizontalAnchor,
-        verticalAnchor: form.floatingVerticalAnchor,
-        ...form.floatingXAlign ? {
-          xAlign: form.floatingXAlign
-        } : {
-          x: parseNumber(form.floatingX) ?? 0
-        },
-        ...form.floatingYAlign ? {
-          yAlign: form.floatingYAlign
-        } : {
-          y: parseNumber(form.floatingY) ?? 0
-        },
-        distanceTop: parseNumber(form.floatingDistanceTop) ?? 0,
-        distanceRight: parseNumber(form.floatingDistanceRight) ?? 0,
-        distanceBottom: parseNumber(form.floatingDistanceBottom) ?? 0,
-        distanceLeft: parseNumber(form.floatingDistanceLeft) ?? 0
-      } : null,
-      tableOverlap: form.tableWrapping === "around" ? form.floatingOverlap : null,
-      rowHeight: parseWidth(form.rowHeight, "points"),
-      rowHeightRule: form.rowHeightRule || null,
-      repeatHeader: form.repeatHeader,
-      cantSplit: !form.allowBreakAcrossPages,
-      hiddenRow: form.hiddenRow,
-      columnWidth: parseWidth(form.columnWidth, "points"),
-      cellWidth: parseWidth(form.cellWidth, "points"),
-      cellVerticalAlign: form.cellVerticalAlign || null,
-      cellTextDirection: form.cellTextDirection || null,
-      cellNoWrap: form.cellNoWrap,
-      cellFitText: form.cellFitText,
-      cellHideMark: form.cellHideMark,
-      margins: {
-        top: parseNumber(form.marginTop),
-        right: parseNumber(form.marginRight),
-        bottom: parseNumber(form.marginBottom),
-        left: parseNumber(form.marginLeft)
-      },
-      borders: {
-        top: form.borderTop ? border : null,
-        right: form.borderRight ? border : null,
-        bottom: form.borderBottom ? border : null,
-        left: form.borderLeft ? border : null,
-        start: form.borderStart ? border : null,
-        end: form.borderEnd ? border : null,
-        topLeftToBottomRight: form.borderTlBr ? border : null,
-        topRightToBottomLeft: form.borderTrBl ? border : null
-      },
-      shading: form.shading.trim() || null,
-      altTitle: form.altTitle.trim() || null,
-      altDescription: form.altDescription.trim() || null
-    }, props.initial);
+    props.onApply(buildTableApplyValues(form), props.initial);
     props.onClose();
   };
+  return { form, set: setForm, handleApply };
+}
+function NumField(label, value, setter, testId, disabled = false, allowNegative = false) {
+  return createComponent(TextField, {
+    "class": "oasis-editor-dialog-input-group-grow",
+    type: "number",
+    label,
+    min: allowNegative ? void 0 : "0",
+    step: "1",
+    get value() {
+      return value();
+    },
+    disabled,
+    onChange: setter,
+    "data-testid": testId
+  });
+}
+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$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, {
+      get label() {
+        return t("table.measureIn");
+      },
+      get value() {
+        return form().tableWidthUnit;
+      },
+      onChange: (value) => set("tableWidthUnit", value),
+      "data-testid": "editor-table-properties-table-width-unit",
+      get options() {
+        return [{
+          value: "points",
+          label: t("table.points")
+        }, {
+          value: "percent",
+          label: t("table.percent")
+        }];
+      }
+    }), null);
+    insert(_el$6, () => t("table.alignmentSection"));
+    insert(_el$5, createComponent(RadioGroup, {
+      "class": "oasis-editor-dialog-style-row",
+      name: "table-align",
+      get value() {
+        return form().tableAlign;
+      },
+      onChange: (value) => set("tableAlign", value),
+      get children() {
+        return ["left", "center", "right"].map((align) => createComponent(Radio$1, {
+          value: align,
+          get label() {
+            return t(`table.align${align[0].toUpperCase()}${align.slice(1)}`);
+          },
+          "data-testid": `editor-table-properties-align-${align}`
+        }));
+      }
+    }), _el$7);
+    insert(_el$7, () => NumField(t("table.indentFromLeft"), () => form().tableIndentLeft, (v) => set("tableIndentLeft", v), "editor-table-properties-indent-left"));
+    insert(_el$9, () => t("table.textWrappingSection"));
+    insert(_el$0, createComponent(Checkbox, {
+      get label() {
+        return t("table.wrapNone");
+      },
+      get checked() {
+        return form().tableWrapping === "none";
+      },
+      onChange: () => set("tableWrapping", "none"),
+      "data-testid": "editor-table-properties-wrap-none"
+    }), null);
+    insert(_el$0, createComponent(Checkbox, {
+      get label() {
+        return t("table.wrapAround");
+      },
+      get checked() {
+        return form().tableWrapping === "around";
+      },
+      onChange: () => set("tableWrapping", "around"),
+      "data-testid": "editor-table-properties-wrap-around"
+    }), null);
+    insert(_el$8, createComponent(Show, {
+      get when() {
+        return form().tableWrapping === "around";
+      },
+      get children() {
+        return [(() => {
+          var _el$1 = _tmpl$$9();
+          insert(_el$1, createComponent(SelectField, {
+            "class": "oasis-editor-dialog-input-group-grow",
+            get label() {
+              return t("table.horizontalAnchor");
+            },
+            get value() {
+              return form().floatingHorizontalAnchor;
+            },
+            onChange: (value) => set("floatingHorizontalAnchor", value),
+            "data-testid": "editor-table-properties-floating-h-anchor",
+            get options() {
+              return [{
+                value: "margin",
+                label: t("table.anchorMargin")
+              }, {
+                value: "page",
+                label: t("table.anchorPage")
+              }, {
+                value: "text",
+                label: t("table.anchorText")
+              }];
+            }
+          }), null);
+          insert(_el$1, createComponent(SelectField, {
+            "class": "oasis-editor-dialog-input-group-grow",
+            get label() {
+              return t("table.verticalAnchor");
+            },
+            get value() {
+              return form().floatingVerticalAnchor;
+            },
+            onChange: (value) => set("floatingVerticalAnchor", value),
+            "data-testid": "editor-table-properties-floating-v-anchor",
+            get options() {
+              return [{
+                value: "margin",
+                label: t("table.anchorMargin")
+              }, {
+                value: "page",
+                label: t("table.anchorPage")
+              }, {
+                value: "text",
+                label: t("table.anchorText")
+              }];
+            }
+          }), null);
+          return _el$1;
+        })(), (() => {
+          var _el$10 = _tmpl$$9();
+          insert(_el$10, () => NumField(t("table.positionX"), () => form().floatingX, (v) => set("floatingX", v), "editor-table-properties-floating-x", Boolean(form().floatingXAlign), true), null);
+          insert(_el$10, () => NumField(t("table.positionY"), () => form().floatingY, (v) => set("floatingY", v), "editor-table-properties-floating-y", Boolean(form().floatingYAlign), true), null);
+          insert(_el$10, createComponent(SelectField, {
+            "class": "oasis-editor-dialog-input-group-grow",
+            get label() {
+              return t("table.horizontalAlignment");
+            },
+            get value() {
+              return form().floatingXAlign;
+            },
+            onChange: (value) => set("floatingXAlign", value),
+            "data-testid": "editor-table-properties-floating-x-align",
+            get options() {
+              return [{
+                value: "",
+                label: t("table.explicitOffset")
+              }, ...["left", "center", "right", "inside", "outside"].map((value) => ({
+                value,
+                label: value
+              }))];
+            }
+          }), null);
+          insert(_el$10, createComponent(SelectField, {
+            "class": "oasis-editor-dialog-input-group-grow",
+            get label() {
+              return t("table.verticalAlignment");
+            },
+            get value() {
+              return form().floatingYAlign;
+            },
+            onChange: (value) => set("floatingYAlign", value),
+            "data-testid": "editor-table-properties-floating-y-align",
+            get options() {
+              return [{
+                value: "",
+                label: t("table.explicitOffset")
+              }, ...["top", "center", "bottom", "inside", "outside"].map((value) => ({
+                value,
+                label: value
+              }))];
+            }
+          }), null);
+          return _el$10;
+        })(), (() => {
+          var _el$11 = _tmpl$$9();
+          insert(_el$11, () => NumField(t("table.distanceTop"), () => form().floatingDistanceTop, (v) => set("floatingDistanceTop", v), "editor-table-properties-floating-distance-top"), null);
+          insert(_el$11, () => NumField(t("table.distanceRight"), () => form().floatingDistanceRight, (v) => set("floatingDistanceRight", v), "editor-table-properties-floating-distance-right"), null);
+          insert(_el$11, () => NumField(t("table.distanceBottom"), () => form().floatingDistanceBottom, (v) => set("floatingDistanceBottom", v), "editor-table-properties-floating-distance-bottom"), null);
+          insert(_el$11, () => NumField(t("table.distanceLeft"), () => form().floatingDistanceLeft, (v) => set("floatingDistanceLeft", v), "editor-table-properties-floating-distance-left"), null);
+          return _el$11;
+        })(), createComponent(Checkbox, {
+          get label() {
+            return t("table.allowOverlap");
+          },
+          get checked() {
+            return form().floatingOverlap === "overlap";
+          },
+          onChange: (value) => set("floatingOverlap", value ? "overlap" : "never"),
+          "data-testid": "editor-table-properties-floating-overlap"
+        })];
+      }
+    }), null);
+    return _el$;
+  })();
+}
+var _tmpl$$8 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row></div><div class=oasis-editor-dialog-style-row>`);
+function RowTabPanel(props) {
+  const t = useI18n();
+  const form = () => props.ctrl.form;
+  const set = props.ctrl.set;
+  return (() => {
+    var _el$ = _tmpl$$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    insert(_el$2, () => NumField(t("table.rowHeight"), () => form().rowHeight, (v) => set("rowHeight", v), "editor-table-properties-row-height"), null);
+    insert(_el$2, createComponent(SelectField, {
+      "class": "oasis-editor-dialog-input-group-grow",
+      get label() {
+        return t("table.rowHeightRule");
+      },
+      get value() {
+        return form().rowHeightRule;
+      },
+      onChange: (value) => set("rowHeightRule", value),
+      "data-testid": "editor-table-properties-row-height-rule",
+      get options() {
+        return [{
+          value: "",
+          label: t("table.rowAuto")
+        }, {
+          value: "atLeast",
+          label: t("table.rowAtLeast")
+        }, {
+          value: "exact",
+          label: t("table.rowExactly")
+        }];
+      }
+    }), null);
+    insert(_el$3, createComponent(Checkbox, {
+      get label() {
+        return t("table.repeatHeader");
+      },
+      get checked() {
+        return form().repeatHeader;
+      },
+      onChange: (v) => set("repeatHeader", v),
+      "data-testid": "editor-table-properties-repeat-header"
+    }), null);
+    insert(_el$3, createComponent(Checkbox, {
+      get label() {
+        return t("table.allowBreakAcrossPages");
+      },
+      get checked() {
+        return form().allowBreakAcrossPages;
+      },
+      onChange: (v) => set("allowBreakAcrossPages", v),
+      "data-testid": "editor-table-properties-allow-break"
+    }), null);
+    insert(_el$3, createComponent(Checkbox, {
+      get label() {
+        return t("table.hiddenRow");
+      },
+      get checked() {
+        return form().hiddenRow;
+      },
+      onChange: (v) => set("hiddenRow", v),
+      "data-testid": "editor-table-properties-hidden-row"
+    }), null);
+    return _el$;
+  })();
+}
+var _tmpl$$7 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row>`);
+function ColumnTabPanel(props) {
+  const t = useI18n();
+  const form = () => props.ctrl.form;
+  const set = props.ctrl.set;
+  return (() => {
+    var _el$ = _tmpl$$7(), _el$2 = _el$.firstChild;
+    insert(_el$2, () => NumField(t("table.columnWidth"), () => form().columnWidth, (v) => set("columnWidth", v), "editor-table-properties-column-width"));
+    return _el$;
+  })();
+}
+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;
+  const set = props.ctrl.set;
+  const borderPreview = createMemo(() => {
+    const border = resolveBorder(form().borderStyle, form().borderWidth, form().borderColor);
+    const css = border ? `${border.width}pt ${border.type} ${border.color}` : void 0;
+    return {
+      "background-color": form().shading.trim() || void 0,
+      "border-top": css && form().borderTop ? css : "1px solid #dadce0",
+      "border-right": css && form().borderRight ? css : "1px solid #dadce0",
+      "border-bottom": css && form().borderBottom ? css : "1px solid #dadce0",
+      "border-left": css && form().borderLeft ? css : "1px solid #dadce0"
+    };
+  });
+  const borderDisabled = () => form().borderStyle === "none";
+  return (() => {
+    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",
+      get label() {
+        return t("table.verticalAlignment");
+      },
+      get value() {
+        return form().cellVerticalAlign;
+      },
+      onChange: (value) => set("cellVerticalAlign", value),
+      "data-testid": "editor-table-properties-cell-valign",
+      get options() {
+        return [{
+          value: "",
+          label: t("table.inherit")
+        }, {
+          value: "top",
+          label: t("table.valignTop")
+        }, {
+          value: "middle",
+          label: t("table.valignMiddle")
+        }, {
+          value: "bottom",
+          label: t("table.valignBottom")
+        }];
+      }
+    }), null);
+    insert(_el$2, createComponent(SelectField, {
+      "class": "oasis-editor-dialog-input-group-grow",
+      get label() {
+        return t("table.textDirection");
+      },
+      get value() {
+        return form().cellTextDirection;
+      },
+      onChange: (value) => set("cellTextDirection", value),
+      "data-testid": "editor-table-properties-cell-direction",
+      get options() {
+        return [{
+          value: "",
+          label: t("table.inherit")
+        }, {
+          value: "lrTb",
+          label: "lrTb"
+        }, {
+          value: "tbRl",
+          label: "tbRl"
+        }, {
+          value: "btLr",
+          label: "btLr"
+        }, {
+          value: "lrTbV",
+          label: "lrTbV"
+        }, {
+          value: "tbRlV",
+          label: "tbRlV"
+        }];
+      }
+    }), null);
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.options");
+      },
+      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;
+      }
+    }), null);
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.cellMargins");
+      },
+      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$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("paragraph.bordersSection");
+      },
+      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);
+    return _el$;
+  })();
+}
+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();
+    insert(_el$, createComponent(TextField, {
+      get label() {
+        return t("table.altTitle");
+      },
+      get value() {
+        return form().altTitle;
+      },
+      onChange: (v) => set("altTitle", v),
+      "data-testid": "editor-table-properties-alt-title"
+    }), 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$;
+  })();
+}
+function TablePropertiesDialog(props) {
+  const t = useI18n();
+  const ctrl = useTablePropertiesController(props);
   return createComponent(Dialog, {
     get isOpen() {
       return props.isOpen;
@@ -32868,7 +34055,9 @@ function TablePropertiesDialog(props) {
         get onCancel() {
           return props.onClose;
         },
-        onConfirm: handleApply,
+        get onConfirm() {
+          return ctrl.handleApply;
+        },
         get cancelLabel() {
           return t("generic.cancel");
         },
@@ -32882,9 +34071,9 @@ function TablePropertiesDialog(props) {
     get children() {
       return createComponent(Tabs, {
         get value() {
-          return form.activeTab;
+          return ctrl.form.activeTab;
         },
-        onChange: (tab) => setForm("activeTab", tab),
+        onChange: (tab) => ctrl.set("activeTab", tab),
         get ariaLabel() {
           return t("table.propertiesTitle");
         },
@@ -32895,40 +34084,35 @@ function TablePropertiesDialog(props) {
             label: t("table.tabTable"),
             testId: "editor-table-properties-tab-table",
             panel: createComponent(TableTabPanel, {
-              form,
-              set: setForm
+              ctrl
             })
           }, {
             id: "row",
             label: t("table.tabRow"),
             testId: "editor-table-properties-tab-row",
             panel: createComponent(RowTabPanel, {
-              form,
-              set: setForm
+              ctrl
             })
           }, {
             id: "column",
             label: t("table.tabColumn"),
             testId: "editor-table-properties-tab-column",
             panel: createComponent(ColumnTabPanel, {
-              form,
-              set: setForm
+              ctrl
             })
           }, {
             id: "cell",
             label: t("table.tabCell"),
             testId: "editor-table-properties-tab-cell",
             panel: createComponent(CellTabPanel, {
-              form,
-              set: setForm
+              ctrl
             })
           }, {
             id: "altText",
             label: t("table.tabAltText"),
             testId: "editor-table-properties-tab-alt-text",
             panel: createComponent(AltTextTabPanel, {
-              form,
-              set: setForm
+              ctrl
             })
           }];
         }
@@ -32936,8 +34120,7 @@ function TablePropertiesDialog(props) {
     }
   });
 }
-delegateEvents(["input"]);
-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 {
@@ -32960,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;
@@ -33530,7 +34792,7 @@ function EditorWorkspace(props) {
     }
   })];
 }
-var _tmpl$$1 = /* @__PURE__ */ template(`<div class=oasis-editor-welcome-overlay role=dialog aria-modal=true aria-labelledby=oasis-editor-welcome-title><div class=oasis-editor-welcome-card><h2 id=oasis-editor-welcome-title class=oasis-editor-welcome-title></h2><p class=oasis-editor-welcome-body></p><p class=oasis-editor-welcome-note></p><div class=oasis-editor-welcome-actions><button class="oasis-editor-dialog-button oasis-editor-dialog-button-secondary"data-testid=editor-welcome-skip></button><button class="oasis-editor-dialog-button oasis-editor-dialog-button-primary"data-testid=editor-welcome-enable>`);
+var _tmpl$$1 = /* @__PURE__ */ template(`<div class=oasis-editor-welcome-overlay role=dialog aria-modal=true aria-labelledby=oasis-editor-welcome-title><div class=oasis-editor-welcome-card><h2 id=oasis-editor-welcome-title class=oasis-editor-welcome-title></h2><p class=oasis-editor-welcome-body></p><p class=oasis-editor-welcome-note></p><div class=oasis-editor-welcome-actions>`);
 function WelcomeOverlay(props) {
   const t = useI18n();
   const handleEnable = () => {
@@ -33548,7 +34810,7 @@ function WelcomeOverlay(props) {
       return props.isOpen;
     },
     get children() {
-      var _el$ = _tmpl$$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
+      var _el$ = _tmpl$$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
       insert(_el$2, createComponent(OasisBrandMark, {
         height: 72,
         "class": "oasis-editor-welcome-mark"
@@ -33556,15 +34818,26 @@ function WelcomeOverlay(props) {
       insert(_el$3, () => t("welcome.title"));
       insert(_el$4, () => t("welcome.body"));
       insert(_el$5, () => t("welcome.note"));
-      _el$7.$$click = handleSkip;
-      insert(_el$7, () => t("welcome.skip"));
-      _el$8.$$click = handleEnable;
-      insert(_el$8, () => t("welcome.enable"));
+      insert(_el$6, createComponent(Button, {
+        variant: "secondary",
+        onClick: handleSkip,
+        "data-testid": "editor-welcome-skip",
+        get children() {
+          return t("welcome.skip");
+        }
+      }), null);
+      insert(_el$6, createComponent(Button, {
+        variant: "primary",
+        onClick: handleEnable,
+        "data-testid": "editor-welcome-enable",
+        get children() {
+          return t("welcome.enable");
+        }
+      }), null);
       return _el$;
     }
   });
 }
-delegateEvents(["click"]);
 const WORD_NS$1 = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
 const PACKAGE_REL_NS = "http://schemas.openxmlformats.org/package/2006/relationships";
 const OFFICE_REL_NS = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
@@ -37308,7 +38581,15 @@ async function drawFragmentText(writer, pageIndex, paragraph, line, fragment, do
   const text = chars.map((char) => styles.allCaps ? char.char.toUpperCase() : char.char).join("");
   const firstChar = chars[0];
   if (!firstChar || text.length === 0) return;
-  drawLinkAnnotation(writer, pageIndex, line, fragment, originX, originY, styles);
+  drawLinkAnnotation(
+    writer,
+    pageIndex,
+    line,
+    fragment,
+    originX,
+    originY,
+    styles
+  );
   drawFragmentShading(
     writer,
     pageIndex,
@@ -37381,7 +38662,15 @@ async function drawFragmentText(writer, pageIndex, paragraph, line, fragment, do
     styles,
     baseTextOptions
   };
-  emitFragmentGlyphs(chunkCtx, chars, originX, styles, line, fragment, paragraphAlign);
+  emitFragmentGlyphs(
+    chunkCtx,
+    chars,
+    originX,
+    styles,
+    line,
+    fragment,
+    paragraphAlign
+  );
   if (styles.underline) {
     drawFragmentDecoration(
       writer,