oasis-editor 0.0.22 → 0.0.24

package/dist/{OasisEditorApp-BD3WQQO5.js → OasisEditorApp-Ckv1Glbw.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 { n as normalizeSelection, g as getParagraphs, c as createEditorParagraphFromRuns, a as getParagraphLength, b as createEditorRun, d as getDocumentSections, e as createEditorStyledRun, f as getParagraphText, h as getActiveZone, i as getActiveSectionIndex, p as positionToParagraphOffset, j as paragraphOffsetToPosition, k as clampPosition, l as findParagraphIndex, m as createCollapsedSelection, o as isSelectionCollapsed, q as createEditorParagraph, r as getBlockParagraphs, s as findParagraphTableLocation, t as buildTableCellLayout, u as createEditorTableCell, v as createEditorTable, w as createEditorTableRow, x as underlineStyleToCssDecorationStyle, y as resolveImageSrc, z as createEditorFootnote, A as createFootnoteReferenceRun, B as renumberFootnotes, C as iterateFootnoteReferenceRuns, D as getFootnoteDisplayMarker, E as createSignal, F as createEffect, G as onCleanup, H as buildCanvasLayoutSnapshot, I as on, J as onMount, K as debounce, L as unwrap, M as getDocumentParagraphs, N as getDocumentSectionsCanonical, O as createEditorDocument, P as getPageContentWidth, Q as getDocumentPageSettings, R as getTableCellContentWidthForParagraph, S as resolveResizedDimensions, T as resolveTextBoxRenderHeight, U as resolveEffectiveParagraphStyle, V as resolveEffectiveTextStyleForParagraph, W as iterateEndnoteReferenceRuns, X as JSZip, Y as imageContentTypeDefaults, Z as imageExtensionFromMime, _ as pxToPt$1, $ as buildSegmentTable, a0 as buildCanvasTableLayout, a1 as resolveFloatingObjectRect, a2 as getTextBoxFloatingGeometry, a3 as getPresetPathSegments, a4 as projectBlocksLayout, a5 as textStyleToFontSizePt, a6 as PX_PER_POINT, a7 as DEFAULT_FONT_SIZE_PX, a8 as isDoubleUnderlineStyle, a9 as isWavyUnderlineStyle, aa as underlineStyleLineWidthPx, ab as underlineStyleDashArray, ac as getListLabelInset, ad as getParagraphBorderInsets, ae as normalizeFamily, af as ROBOTO_FONT_FILES, ag as loadFontAsset, ah as OFFICE_COMPAT_FONT_FAMILIES, ai as buildSfnt, aj as defaultFontDecoderRegistry, ak as SfntFontProgram, al as collectPdfFontFamilies, am as projectDocumentLayout, an as getPageHeaderZoneTop, ao as getPageBodyTop, ap as getPageColumnRects, aq as findFootnoteReference, ar as FOOTNOTE_MARKER_GUTTER_PX, as as resolveImporterForFile, at as createEditorStateFromDocument, au as getDocumentParagraphsCanonical, av as getToolbarStyleState, aw as STANDARD_FONT_SIZES_PT, ax as fontSizePxToPt, ay as probeLocalFontFamilies, az as createInitialEditorState, aA as parseFontSizePtToPx, aB as formatFontSizePt, aC as listKindForTag, aD as isParagraphTag, aE as collectInlineRuns, aF as parseParagraphStyle, aG as t, aH as preciseFontModeVersion, aI as isPreciseFontModeEnabled, aJ as togglePreciseFontMode, aK as nextFontSizePt, aL as previousFontSizePt, aM as fontSizePtToPx, aN as createDefaultToolbarPreset, aO as defaultMenuItems, aP as MenuRegistry, aQ as createToolbarRegistry, aR as Editor, aS as resolveCommandRef, aT as commandRefName, aU as InlineShell, aV as BalloonShell, aW as DocumentShell, aX as createMemo, aY as getCaretRectFromSnapshot, aZ as getParagraphRectFromSnapshot, a_ as createComponent, a$ as CaretOverlay, b0 as Show, b1 as createRenderEffect, b2 as style, b3 as setAttribute, b4 as setStyleProperty, b5 as memo, b6 as template, b7 as insert, b8 as use, b9 as addEventListener, ba as Dialog, bb as delegateEvents, bc as className, bd as For, be as UNDERLINE_STYLE_OPTIONS, bf as Tabs, bg as measureParagraphMinContentWidthPx, bh as getEditableBlocksForZone, bi as findParagraphLocation, bj as createSectionBoundaryParagraph, bk as normalizePageSettings, bl as DEFAULT_EDITOR_PAGE_SETTINGS, bm as markStart, bn as markEnd, bo as getParagraphEntries, bp as getParagraphById, bq as PluginUiHost, br as OasisEditorEditor, bs as perfTimer, bt as OasisBrandMark, bu as setPreciseFontPreference, bv as setWelcomeSeen, bw as enablePreciseFontMode, bx as createOasisEditorClient, by as setLocale, bz as startLongTaskObserver, bA as installGlobalReport, bB as applyStoredPreciseFontPreference, bC as getWelcomeSeen, bD as isLocalFontAccessSupported, bE as EDITOR_SCROLL_PADDING_PX, bF as Toolbar, bG as OasisEditorLoading, bH as createEditorLogger, bI as getCachedCanvasImage, bJ as registerDomStatsSurface } from "./index-N6EX-tEW.js";
+import { n as normalizeSelection, g as getParagraphs, c as createEditorParagraphFromRuns, a as getParagraphLength, b as createEditorRun, d as getDocumentSections, e as createEditorStyledRun, f as getParagraphText, h as getActiveZone, i as getActiveSectionIndex, p as positionToParagraphOffset, j as paragraphOffsetToPosition, k as clampPosition, l as findParagraphIndex, m as createCollapsedSelection, o as isSelectionCollapsed, q as createEditorParagraph, r as getBlockParagraphs, s as findParagraphTableLocation, t as buildTableCellLayout, u as createEditorTableCell, v as createEditorTable, w as createEditorTableRow, x as underlineStyleToCssDecorationStyle, y as resolveImageSrc, z as createEditorFootnote, A as createFootnoteReferenceRun, B as renumberFootnotes, C as iterateFootnoteReferenceRuns, D as getFootnoteDisplayMarker, E as createSignal, F as createEffect, G as onCleanup, H as buildCanvasLayoutSnapshot, I as on, J as onMount, K as debounce, L as unwrap, M as getDocumentParagraphs, N as getDocumentSectionsCanonical, O as createEditorDocument, P as getPageContentWidth, Q as getDocumentPageSettings, R as getTableCellContentWidthForParagraph, S as resolveResizedDimensions, T as resolveTextBoxRenderHeight, U as resolveEffectiveParagraphStyle, V as resolveEffectiveTextStyleForParagraph, W as iterateEndnoteReferenceRuns, X as JSZip, Y as imageContentTypeDefaults, Z as imageExtensionFromMime, _ as pxToPt$1, $ as buildSegmentTable, a0 as buildCanvasTableLayout, a1 as resolveFloatingObjectRect, a2 as getTextBoxFloatingGeometry, a3 as getPresetPathSegments, a4 as projectBlocksLayout, a5 as textStyleToFontSizePt, a6 as PX_PER_POINT, a7 as DEFAULT_FONT_SIZE_PX, a8 as isDoubleUnderlineStyle, a9 as isWavyUnderlineStyle, aa as underlineStyleLineWidthPx, ab as underlineStyleDashArray, ac as getListLabelInset, ad as getParagraphBorderInsets, ae as normalizeFamily, af as ROBOTO_FONT_FILES, ag as loadFontAsset, ah as OFFICE_COMPAT_FONT_FAMILIES, ai as buildSfnt, aj as defaultFontDecoderRegistry, ak as SfntFontProgram, al as collectPdfFontFamilies, am as projectDocumentLayout, an as getPageHeaderZoneTop, ao as getPageBodyTop, ap as getPageColumnRects, aq as findFootnoteReference, ar as FOOTNOTE_MARKER_GUTTER_PX, as as resolveImporterForFile, at as createEditorStateFromDocument, au as getDocumentParagraphsCanonical, av as getToolbarStyleState, aw as STANDARD_FONT_SIZES_PT, ax as fontSizePxToPt, ay as probeLocalFontFamilies, az as createInitialEditorState, aA as parseFontSizePtToPx, aB as formatFontSizePt, aC as listKindForTag, aD as isParagraphTag, aE as collectInlineRuns, aF as parseParagraphStyle, aG as t, aH as preciseFontModeVersion, aI as isPreciseFontModeEnabled, aJ as togglePreciseFontMode, aK as nextFontSizePt, aL as previousFontSizePt, aM as fontSizePtToPx, aN as createDefaultToolbarPreset, aO as defaultMenuItems, aP as MenuRegistry, aQ as createToolbarRegistry, aR as Editor, aS as resolveCommandRef, aT as commandRefName, aU as InlineShell, aV as BalloonShell, aW as DocumentShell, aX as createMemo, aY as getCaretRectFromSnapshot, aZ as getParagraphRectFromSnapshot, a_ as createComponent, a$ as CaretOverlay, b0 as Show, b1 as createRenderEffect, b2 as style, b3 as setAttribute, b4 as setStyleProperty, b5 as memo, b6 as template, b7 as insert, b8 as use, b9 as addEventListener, ba as Dialog, bb as delegateEvents, bc as className, bd as For, be as UNDERLINE_STYLE_OPTIONS, bf as Tabs, bg as measureParagraphMinContentWidthPx, bh as getEditableBlocksForZone, bi as findParagraphLocation, bj as createSectionBoundaryParagraph, bk as normalizePageSettings, bl as DEFAULT_EDITOR_PAGE_SETTINGS, bm as markStart, bn as markEnd, bo as getParagraphEntries, bp as getParagraphById, bq as PluginUiHost, br as OasisEditorEditor, bs as perfTimer, bt as OasisBrandMark, bu as setPreciseFontPreference, bv as setWelcomeSeen, bw as enablePreciseFontMode, bx as createOasisEditorClient, by as setLocale, bz as startLongTaskObserver, bA as installGlobalReport, bB as applyStoredPreciseFontPreference, bC as getWelcomeSeen, bD as isLocalFontAccessSupported, bE as EDITOR_SCROLL_PADDING_PX, bF as Toolbar, bG as OasisEditorLoading, bH as createEditorLogger, bI as getCachedCanvasImage, bJ as registerDomStatsSurface } from "./index-WKT6eKMj.js";
 function getSelectedObjectRun(state, predicate) {
   const normalized = normalizeSelection(state);
   if (normalized.isCollapsed || normalized.startIndex !== normalized.endIndex || normalized.endParagraphOffset - normalized.startParagraphOffset !== 1) {

package/dist/{index-N6EX-tEW.js → index-WKT6eKMj.js}

@@ -2438,7 +2438,7 @@ function OasisEditorAppLazy(props = {}) {
     onCleanup(() => {
       cancelled = true;
     });
-    import("./OasisEditorApp-BD3WQQO5.js").then((m) => {
+    import("./OasisEditorApp-Ckv1Glbw.js").then((m) => {
       cancelled = true;
       setProgress(1);
       setTimeout(() => setApp(() => m.OasisEditorApp), 180);
@@ -36497,7 +36497,14 @@ function ResizeHandlesOverlay(props) {
   })();
 }
 delegateEvents(["mousedown"]);
-var _tmpl$$m = /* @__PURE__ */ template(`<div data-testid=editor-editor-shell><div class=oasis-editor-editor data-testid=editor-editor><div class=oasis-editor-editor-scroll-content data-testid=editor-editor-scroll-content><textarea aria-label="Editor input"autocomplete=off autocapitalize=off class=oasis-editor-input data-testid=editor-input value style=pointer-events:none></textarea><input data-testid=editor-import-docx-input type=file style=display:none><input accept="image/png, image/jpeg, image/gif"data-testid=editor-insert-image-input type=file style=display:none></div></div><div class=oasis-editor-statusbar data-testid=editor-statusbar><span class=oasis-editor-statusbar-item data-testid=editor-statusbar-word-count></span><span class=oasis-editor-statusbar-item data-testid=editor-statusbar-character-count></span><span class=oasis-editor-statusbar-item></span><span class=oasis-editor-statusbar-item>: 100%`), _tmpl$2$g = /* @__PURE__ */ template(`<div class=oasis-editor-import-overlay data-testid=editor-import-overlay role=status aria-live=polite><div class=oasis-editor-import-card><div class=oasis-editor-import-title></div><div class=oasis-editor-import-phase data-testid=editor-import-phase></div><div class=oasis-editor-import-progress-track><div class=oasis-editor-import-progress-bar data-testid=editor-import-progress-bar></div></div><div class=oasis-editor-import-progress-label>`), _tmpl$3$a = /* @__PURE__ */ template(`<span class=oasis-editor-import-done-icon>`), _tmpl$4$8 = /* @__PURE__ */ template(`<span class=oasis-editor-import-error-icon>`), _tmpl$5$7 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$$m = /* @__PURE__ */ template(`<div data-testid=editor-editor-shell><div class=oasis-editor-editor data-testid=editor-editor><div class=oasis-editor-editor-zoom-sizer><div class=oasis-editor-editor-scroll-content data-testid=editor-editor-scroll-content style="position:absolute;top:0px;transform-origin:top left"><textarea aria-label="Editor input"autocomplete=off autocapitalize=off class=oasis-editor-input data-testid=editor-input value style=pointer-events:none></textarea><input data-testid=editor-import-docx-input type=file style=display:none><input accept="image/png, image/jpeg, image/gif"data-testid=editor-insert-image-input type=file style=display:none></div></div></div><div class=oasis-editor-statusbar data-testid=editor-statusbar><span class=oasis-editor-statusbar-item data-testid=editor-statusbar-word-count></span><span class=oasis-editor-statusbar-item data-testid=editor-statusbar-character-count></span><span class=oasis-editor-statusbar-item></span><div class=oasis-editor-statusbar-zoom data-testid=editor-statusbar-zoom-control><button type=button class=oasis-editor-zoom-button>−</button><input class=oasis-editor-zoom-slider type=range min=50 max=200 step=10><button type=button class=oasis-editor-zoom-button>+</button><span class="oasis-editor-statusbar-item oasis-editor-zoom-value"data-testid=editor-statusbar-zoom>%`), _tmpl$2$g = /* @__PURE__ */ template(`<div class=oasis-editor-import-overlay data-testid=editor-import-overlay role=status aria-live=polite><div class=oasis-editor-import-card><div class=oasis-editor-import-title></div><div class=oasis-editor-import-phase data-testid=editor-import-phase></div><div class=oasis-editor-import-progress-track><div class=oasis-editor-import-progress-bar data-testid=editor-import-progress-bar></div></div><div class=oasis-editor-import-progress-label>`), _tmpl$3$a = /* @__PURE__ */ template(`<span class=oasis-editor-import-done-icon>`), _tmpl$4$8 = /* @__PURE__ */ template(`<span class=oasis-editor-import-error-icon>`), _tmpl$5$7 = /* @__PURE__ */ template(`<span>`);
+const ZOOM_MIN = 50;
+const ZOOM_MAX = 200;
+const ZOOM_STEP = 10;
+function clampZoom(value) {
+  if (!Number.isFinite(value)) return 100;
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value)));
+}
 function OasisEditorEditor(props) {
   const layout = () => props.layout ?? {};
   const overlays = () => props.overlays;
@@ -36532,6 +36539,20 @@ function OasisEditorEditor(props) {
   const documentForStats = createMemo(() => props.state().document);
   const characterCount = createMemo(() => getDocumentCharacterCount(documentForStats()));
   const wordCount = createMemo(() => getDocumentWordCount(documentForStats()));
+  const [zoomPercent, setZoomPercent] = createSignal(100);
+  const adjustZoom = (delta) => {
+    setZoomPercent((current) => clampZoom(current + delta));
+  };
+  const zoomFactor = createMemo(() => clampZoom(zoomPercent()) / 100);
+  const [measuredContentHeight, setMeasuredContentHeight] = createSignal(0);
+  const [viewportSize, setViewportSize] = createSignal({
+    width: 0,
+    height: 0
+  });
+  const unscaledContentWidth = () => widestPageWidth() + EDITOR_SCROLL_PADDING_PX * 2;
+  const zoomSizerWidth = createMemo(() => Math.max(unscaledContentWidth() * zoomFactor(), viewportSize().width));
+  const zoomSizerHeight = createMemo(() => Math.max(measuredContentHeight() * zoomFactor(), viewportSize().height));
+  const zoomLayerLeft = createMemo(() => Math.max(0, (zoomSizerWidth() - unscaledContentWidth() * zoomFactor()) / 2));
   const statusDocumentLayout = createMemo(() => {
     var _a, _b, _c, _d;
     return projectDocumentLayout(documentForStats(), void 0, (_b = (_a = layout()).measuredBlockHeights) == null ? void 0 : _b.call(_a), (_d = (_c = layout()).measuredParagraphLayouts) == null ? void 0 : _d.call(_c));
@@ -36585,7 +36606,7 @@ function OasisEditorEditor(props) {
     queueMicrotask(recomputeViewportPageIndex);
   });
   return (() => {
-    var _el$ = _tmpl$$m(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling, _el$7 = _el$2.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$0.nextSibling, _el$10 = _el$1.firstChild;
+    var _el$ = _tmpl$$m(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$2.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, _el$1 = _el$0.nextSibling, _el$10 = _el$1.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.nextSibling, _el$15 = _el$14.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return memo(() => !!layout().showHorizontalRuler)() && overlays().toolbarHost;
@@ -36619,16 +36640,40 @@ function OasisEditorEditor(props) {
         passive: true
       });
       queueMicrotask(recomputeViewportPageIndex);
+      const updateViewportSize = () => {
+        setViewportSize({
+          width: el.clientWidth,
+          height: el.clientHeight
+        });
+      };
+      updateViewportSize();
+      let viewportObserver;
+      if (typeof ResizeObserver !== "undefined") {
+        viewportObserver = new ResizeObserver(updateViewportSize);
+        viewportObserver.observe(el);
+      }
       onCleanup(() => {
         el.removeEventListener("scroll", onScroll);
+        viewportObserver == null ? void 0 : viewportObserver.disconnect();
       });
     }, _el$2);
     use((el) => {
       var _a, _b;
       scrollContentRef = el;
       (_b = (_a = refs()).onSurfaceRef) == null ? void 0 : _b.call(_a, el);
-    }, _el$3);
-    insert(_el$3, createComponent(CanvasEditorSurface, {
+      const updateContentHeight = () => {
+        setMeasuredContentHeight(el.offsetHeight);
+      };
+      updateContentHeight();
+      queueMicrotask(updateContentHeight);
+      let contentObserver;
+      if (typeof ResizeObserver !== "undefined") {
+        contentObserver = new ResizeObserver(updateContentHeight);
+        contentObserver.observe(el);
+      }
+      onCleanup(() => contentObserver == null ? void 0 : contentObserver.disconnect());
+    }, _el$4);
+    insert(_el$4, createComponent(CanvasEditorSurface, {
       get state() {
         return props.state;
       },
@@ -36672,8 +36717,8 @@ function OasisEditorEditor(props) {
       get onRevisionMouseLeave() {
         return surfaceHandlers().onRevisionMouseLeave;
       }
-    }), _el$4);
-    insert(_el$3, createComponent(Show, {
+    }), _el$5);
+    insert(_el$4, createComponent(Show, {
       get when() {
         return overlays().hoveredRevision();
       },
@@ -36682,8 +36727,8 @@ function OasisEditorEditor(props) {
           return revision();
         }
       })
-    }), _el$4);
-    insert(_el$3, createComponent(Show, {
+    }), _el$5);
+    insert(_el$4, createComponent(Show, {
       get when() {
         return overlays().selectionBoxes().length > 0;
       },
@@ -36694,8 +36739,8 @@ function OasisEditorEditor(props) {
           }
         });
       }
-    }), _el$4);
-    insert(_el$3, createComponent(Show, {
+    }), _el$5);
+    insert(_el$4, createComponent(Show, {
       get when() {
         return overlays().commentHighlights().length > 0;
       },
@@ -36707,8 +36752,8 @@ function OasisEditorEditor(props) {
           commentsById
         });
       }
-    }), _el$4);
-    insert(_el$3, createComponent(ResizeHandlesOverlay, {
+    }), _el$5);
+    insert(_el$4, createComponent(ResizeHandlesOverlay, {
       box: selectedImage,
       get readOnly() {
         return Boolean(layout().readOnly);
@@ -36735,8 +36780,8 @@ function OasisEditorEditor(props) {
         if (!image) return;
         surfaceHandlers().onImageMouseDown(image.paragraphId, image.startOffset, event);
       }
-    }), _el$4);
-    insert(_el$3, createComponent(ResizeHandlesOverlay, {
+    }), _el$5);
+    insert(_el$4, createComponent(ResizeHandlesOverlay, {
       box: selectedTextBox,
       get readOnly() {
         return Boolean(layout().readOnly);
@@ -36758,8 +36803,8 @@ function OasisEditorEditor(props) {
         if (!textBox) return;
         surfaceHandlers().onTextBoxRotateHandleMouseDown(textBox.paragraphId, textBox.startOffset, event);
       }
-    }), _el$4);
-    insert(_el$3, createComponent(Show, {
+    }), _el$5);
+    insert(_el$4, createComponent(Show, {
       get when() {
         return memo(() => !!overlays().toolbarHost)() && overlays().showFloatingTableToolbar;
       },
@@ -36777,8 +36822,8 @@ function OasisEditorEditor(props) {
           surfaceRef: () => scrollContentRef
         });
       }
-    }), _el$4);
-    insert(_el$3, createComponent(Show, {
+    }), _el$5);
+    insert(_el$4, createComponent(Show, {
       get when() {
         return overlays().layoutOptions;
       },
@@ -36792,8 +36837,8 @@ function OasisEditorEditor(props) {
           return Boolean(layout().readOnly);
         }
       })
-    }), _el$4);
-    insert(_el$3, createComponent(Show, {
+    }), _el$5);
+    insert(_el$4, createComponent(Show, {
       get when() {
         return overlays().showCaret();
       },
@@ -36813,25 +36858,25 @@ function OasisEditorEditor(props) {
           }
         });
       }
-    }), _el$4);
-    addEventListener(_el$4, "paste", inputHandlers().onPaste);
-    addEventListener(_el$4, "keydown", inputHandlers().onKeyDown, true);
-    addEventListener(_el$4, "input", inputHandlers().onInput, true);
-    addEventListener(_el$4, "focus", inputHandlers().onInputFocus);
-    addEventListener(_el$4, "cut", inputHandlers().onCut);
-    addEventListener(_el$4, "copy", inputHandlers().onCopy);
-    addEventListener(_el$4, "compositionstart", inputHandlers().onCompositionStart);
-    addEventListener(_el$4, "compositionend", inputHandlers().onCompositionEnd);
-    addEventListener(_el$4, "blur", inputHandlers().onInputBlur);
+    }), _el$5);
+    addEventListener(_el$5, "paste", inputHandlers().onPaste);
+    addEventListener(_el$5, "keydown", inputHandlers().onKeyDown, true);
+    addEventListener(_el$5, "input", inputHandlers().onInput, true);
+    addEventListener(_el$5, "focus", inputHandlers().onInputFocus);
+    addEventListener(_el$5, "cut", inputHandlers().onCut);
+    addEventListener(_el$5, "copy", inputHandlers().onCopy);
+    addEventListener(_el$5, "compositionstart", inputHandlers().onCompositionStart);
+    addEventListener(_el$5, "compositionend", inputHandlers().onCompositionEnd);
+    addEventListener(_el$5, "blur", inputHandlers().onInputBlur);
     var _ref$ = refs().onTextareaRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$4) : refs().onTextareaRef = _el$4;
-    setAttribute(_el$4, "spellcheck", false);
-    addEventListener(_el$5, "change", fileHandlers().onImportInputChange);
+    typeof _ref$ === "function" ? use(_ref$, _el$5) : refs().onTextareaRef = _el$5;
+    setAttribute(_el$5, "spellcheck", false);
+    addEventListener(_el$6, "change", fileHandlers().onImportInputChange);
     var _ref$2 = refs().onImportInputRef;
-    typeof _ref$2 === "function" ? use(_ref$2, _el$5) : refs().onImportInputRef = _el$5;
-    addEventListener(_el$6, "change", fileHandlers().onImageInputChange);
+    typeof _ref$2 === "function" ? use(_ref$2, _el$6) : refs().onImportInputRef = _el$6;
+    addEventListener(_el$7, "change", fileHandlers().onImageInputChange);
     var _ref$3 = refs().onImageInputRef;
-    typeof _ref$3 === "function" ? use(_ref$3, _el$6) : refs().onImageInputRef = _el$6;
+    typeof _ref$3 === "function" ? use(_ref$3, _el$7) : refs().onImageInputRef = _el$7;
     insert(_el$, createComponent(Show, {
       get when() {
         var _a, _b;
@@ -36841,45 +36886,48 @@ function OasisEditorEditor(props) {
         const isDone = progress().phase === "done";
         const isError = progress().phase === "error";
         return (() => {
-          var _el$11 = _tmpl$2$g(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$14.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$15.nextSibling;
-          _el$11.classList.toggle("oasis-editor-import-overlay-done", !!isDone);
-          _el$11.classList.toggle("oasis-editor-import-overlay-error", !!isError);
-          setAttribute(_el$11, "aria-busy", !isDone && !isError);
-          insert(_el$12, createComponent(OasisBrandMark, {
+          var _el$16 = _tmpl$2$g(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$19.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$20.nextSibling;
+          _el$16.classList.toggle("oasis-editor-import-overlay-done", !!isDone);
+          _el$16.classList.toggle("oasis-editor-import-overlay-error", !!isError);
+          setAttribute(_el$16, "aria-busy", !isDone && !isError);
+          insert(_el$17, createComponent(OasisBrandMark, {
             height: 40,
             "class": "oasis-editor-loading-mark"
-          }), _el$13);
-          insert(_el$13, () => t("import.overlay.title"));
-          insert(_el$14, () => t(`import.phase.${progress().phase}`));
-          _el$16.classList.toggle("oasis-editor-import-progress-bar-done", !!isDone);
-          _el$16.classList.toggle("oasis-editor-import-progress-bar-error", !!isError);
-          insert(_el$17, isDone ? (() => {
-            var _el$18 = _tmpl$3$a();
-            insert(_el$18, () => t("import.phase.done"));
-            return _el$18;
+          }), _el$18);
+          insert(_el$18, () => t("import.overlay.title"));
+          insert(_el$19, () => t(`import.phase.${progress().phase}`));
+          _el$21.classList.toggle("oasis-editor-import-progress-bar-done", !!isDone);
+          _el$21.classList.toggle("oasis-editor-import-progress-bar-error", !!isError);
+          insert(_el$22, isDone ? (() => {
+            var _el$23 = _tmpl$3$a();
+            insert(_el$23, () => t("import.phase.done"));
+            return _el$23;
           })() : isError ? (() => {
-            var _el$19 = _tmpl$4$8();
-            insert(_el$19, () => t("import.phase.error"));
-            return _el$19;
+            var _el$24 = _tmpl$4$8();
+            insert(_el$24, () => t("import.phase.error"));
+            return _el$24;
           })() : [memo(() => Math.round(progress().progress)), "%"]);
           createRenderEffect((_p$) => {
-            var _v$8 = !!(progress().phase === "applying-editor-state" || progress().phase === "stabilizing-layout"), _v$9 = `${progress().progress}%`;
-            _v$8 !== _p$.e && _el$16.classList.toggle("oasis-editor-import-progress-bar-indeterminate", _p$.e = _v$8);
-            _v$9 !== _p$.t && setStyleProperty(_el$16, "width", _p$.t = _v$9);
+            var _v$19 = !!(progress().phase === "applying-editor-state" || progress().phase === "stabilizing-layout"), _v$20 = `${progress().progress}%`;
+            _v$19 !== _p$.e && _el$21.classList.toggle("oasis-editor-import-progress-bar-indeterminate", _p$.e = _v$19);
+            _v$20 !== _p$.t && setStyleProperty(_el$21, "width", _p$.t = _v$20);
             return _p$;
           }, {
             e: void 0,
             t: void 0
           });
-          return _el$11;
+          return _el$16;
         })();
       }
-    }), _el$7);
-    insert(_el$8, () => t("status.words", [wordCount()]));
-    insert(_el$9, () => t("status.characters", [characterCount()]));
-    insert(_el$0, () => t("status.page", [currentPage(), totalPages()]));
-    insert(_el$1, () => t("status.zoom"), _el$10);
-    insert(_el$7, createComponent(Show, {
+    }), _el$8);
+    insert(_el$9, () => t("status.words", [wordCount()]));
+    insert(_el$0, () => t("status.characters", [characterCount()]));
+    insert(_el$1, () => t("status.page", [currentPage(), totalPages()]));
+    _el$11.$$click = () => adjustZoom(-ZOOM_STEP);
+    _el$12.$$input = (event) => setZoomPercent(clampZoom(event.currentTarget.valueAsNumber));
+    _el$13.$$click = () => adjustZoom(ZOOM_STEP);
+    insert(_el$14, zoomPercent, _el$15);
+    insert(_el$8, createComponent(Show, {
       get when() {
         return overlays().persistenceStatus;
       },
@@ -36891,24 +36939,37 @@ function OasisEditorEditor(props) {
           return createComponent(Show, {
             when: key,
             get children() {
-              var _el$20 = _tmpl$5$7();
-              insert(_el$20, () => t(key));
-              createRenderEffect(() => className(_el$20, `oasis-editor-statusbar-item oasis-editor-persistence-status oasis-editor-status-${status.replace("...", "ing").replace(".", "")}`));
-              return _el$20;
+              var _el$25 = _tmpl$5$7();
+              insert(_el$25, () => t(key));
+              createRenderEffect(() => className(_el$25, `oasis-editor-statusbar-item oasis-editor-persistence-status oasis-editor-status-${status.replace("...", "ing").replace(".", "")}`));
+              return _el$25;
             }
           });
         })();
       }
     }), null);
     createRenderEffect((_p$) => {
-      var _v$ = `oasis-editor-editor-shell${layout().class ? ` ${layout().class}` : ""}`, _v$2 = shellStyle(), _v$3 = layout().readOnly, _v$4 = `${overlays().inputBox().left}px`, _v$5 = `${overlays().inputBox().top}px`, _v$6 = `${overlays().inputBox().height}px`, _v$7 = importFileAccept();
+      var _v$ = `oasis-editor-editor-shell${layout().class ? ` ${layout().class}` : ""}`, _v$2 = shellStyle(), _v$3 = `${zoomSizerWidth()}px`, _v$4 = `${zoomSizerHeight()}px`, _v$5 = `${zoomLayerLeft()}px`, _v$6 = `${unscaledContentWidth()}px`, _v$7 = `${viewportSize().height / zoomFactor()}px`, _v$8 = `scale(${zoomFactor()})`, _v$9 = layout().readOnly, _v$0 = `${overlays().inputBox().left}px`, _v$1 = `${overlays().inputBox().top}px`, _v$10 = `${overlays().inputBox().height}px`, _v$11 = importFileAccept(), _v$12 = t("status.zoom"), _v$13 = `${t("status.zoom")} -`, _v$14 = zoomPercent() <= ZOOM_MIN, _v$15 = t("status.zoom"), _v$16 = `${zoomPercent()}%`, _v$17 = `${t("status.zoom")} +`, _v$18 = zoomPercent() >= ZOOM_MAX;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _p$.t = style(_el$, _v$2, _p$.t);
-      _v$3 !== _p$.a && (_el$4.readOnly = _p$.a = _v$3);
-      _v$4 !== _p$.o && setStyleProperty(_el$4, "left", _p$.o = _v$4);
-      _v$5 !== _p$.i && setStyleProperty(_el$4, "top", _p$.i = _v$5);
-      _v$6 !== _p$.n && setStyleProperty(_el$4, "height", _p$.n = _v$6);
-      _v$7 !== _p$.s && setAttribute(_el$5, "accept", _p$.s = _v$7);
+      _v$3 !== _p$.a && setStyleProperty(_el$3, "width", _p$.a = _v$3);
+      _v$4 !== _p$.o && setStyleProperty(_el$3, "height", _p$.o = _v$4);
+      _v$5 !== _p$.i && setStyleProperty(_el$4, "left", _p$.i = _v$5);
+      _v$6 !== _p$.n && setStyleProperty(_el$4, "width", _p$.n = _v$6);
+      _v$7 !== _p$.s && setStyleProperty(_el$4, "min-height", _p$.s = _v$7);
+      _v$8 !== _p$.h && setStyleProperty(_el$4, "transform", _p$.h = _v$8);
+      _v$9 !== _p$.r && (_el$5.readOnly = _p$.r = _v$9);
+      _v$0 !== _p$.d && setStyleProperty(_el$5, "left", _p$.d = _v$0);
+      _v$1 !== _p$.l && setStyleProperty(_el$5, "top", _p$.l = _v$1);
+      _v$10 !== _p$.u && setStyleProperty(_el$5, "height", _p$.u = _v$10);
+      _v$11 !== _p$.c && setAttribute(_el$6, "accept", _p$.c = _v$11);
+      _v$12 !== _p$.w && setAttribute(_el$10, "aria-label", _p$.w = _v$12);
+      _v$13 !== _p$.m && setAttribute(_el$11, "aria-label", _p$.m = _v$13);
+      _v$14 !== _p$.f && (_el$11.disabled = _p$.f = _v$14);
+      _v$15 !== _p$.y && setAttribute(_el$12, "aria-label", _p$.y = _v$15);
+      _v$16 !== _p$.g && setAttribute(_el$12, "aria-valuetext", _p$.g = _v$16);
+      _v$17 !== _p$.p && setAttribute(_el$13, "aria-label", _p$.p = _v$17);
+      _v$18 !== _p$.b && (_el$13.disabled = _p$.b = _v$18);
       return _p$;
     }, {
       e: void 0,
@@ -36917,12 +36978,26 @@ function OasisEditorEditor(props) {
       o: void 0,
       i: void 0,
       n: void 0,
-      s: void 0
+      s: void 0,
+      h: void 0,
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0,
+      c: void 0,
+      w: void 0,
+      m: void 0,
+      f: void 0,
+      y: void 0,
+      g: void 0,
+      p: void 0,
+      b: void 0
     });
+    createRenderEffect(() => _el$12.value = zoomPercent());
     return _el$;
   })();
 }
-delegateEvents(["mousedown", "contextmenu", "input", "keydown"]);
+delegateEvents(["mousedown", "contextmenu", "input", "keydown", "click"]);
 var _tmpl$$l = /* @__PURE__ */ template(`<button>`);
 function FloatingActionButton(props) {
   const [local, others] = splitProps(props, ["type", "icon", "label", "active", "class", "classList"]);