oasis-editor 0.0.23 → 0.0.25

package/dist/{index-Cok7gHa_.js → index-Df7Ob0Ek.js}

@@ -2438,7 +2438,7 @@ function OasisEditorAppLazy(props = {}) {
     onCleanup(() => {
       cancelled = true;
     });
-    import("./OasisEditorApp-DsrdPjCM.js").then((m) => {
+    import("./OasisEditorApp-y3iUL8-k.js").then((m) => {
       cancelled = true;
       setProgress(1);
       setTimeout(() => setApp(() => m.OasisEditorApp), 180);
@@ -18088,6 +18088,7 @@ function buildVerticalCellSnapshotLines(options) {
 }
 function buildCanvasLayoutSnapshot(options) {
   const { surface, state } = options;
+  const zoomFactor = options.zoomFactor && options.zoomFactor > 0 ? options.zoomFactor : 1;
   const documentLayout = projectDocumentLayout(
     state.document,
     void 0,
@@ -18117,7 +18118,13 @@ function buildCanvasLayoutSnapshot(options) {
     if (!pageElement) {
       continue;
     }
-    const pageRect = pageElement.getBoundingClientRect();
+    const rawPageRect = pageElement.getBoundingClientRect();
+    const pageRect = {
+      left: surfaceRect.left + (rawPageRect.left - surfaceRect.left) / zoomFactor,
+      top: surfaceRect.top + (rawPageRect.top - surfaceRect.top) / zoomFactor,
+      width: rawPageRect.width / zoomFactor,
+      height: rawPageRect.height / zoomFactor
+    };
     const bodyTop = page.bodyTop ?? getPageBodyTop(page.pageSettings);
     const bodyBottom = page.bodyBottom ?? getPageBodyBottom(page.pageSettings);
     const headerTop = page.headerTop ?? getPageHeaderZoneTop(page.pageSettings);
@@ -36497,14 +36504,22 @@ 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><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;
+const ZOOM_DEFAULT = 100;
 function clampZoom(value) {
-  if (!Number.isFinite(value)) return 100;
+  if (!Number.isFinite(value)) return ZOOM_DEFAULT;
   return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, Math.round(value)));
 }
+function createEditorZoom(initial = ZOOM_DEFAULT) {
+  const [zoomPercent, setZoomPercentRaw] = createSignal(clampZoom(initial));
+  const setZoomPercent = (value) => setZoomPercentRaw(clampZoom(value));
+  const adjustZoom = (delta) => setZoomPercentRaw((current) => clampZoom(current + delta));
+  const zoomFactor = createMemo(() => zoomPercent() / 100);
+  return { zoomPercent, setZoomPercent, adjustZoom, zoomFactor };
+}
+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><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>`);
 function OasisEditorEditor(props) {
   const layout = () => props.layout ?? {};
   const overlays = () => props.overlays;
@@ -36539,10 +36554,32 @@ 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 [localZoomPercent, setLocalZoomPercent] = createSignal(100);
+  const zoomPercent = () => {
+    var _a, _b;
+    return ((_b = (_a = layout()).zoomPercent) == null ? void 0 : _b.call(_a)) ?? localZoomPercent();
+  };
+  const setZoomPercent = (value) => {
+    const clamped = clampZoom(value);
+    const lift = layout().setZoomPercent;
+    if (lift) lift(clamped);
+    else setLocalZoomPercent(clamped);
+  };
+  const adjustZoom = (delta) => setZoomPercent(zoomPercent() + delta);
+  const fallbackZoomFactor = createMemo(() => clampZoom(zoomPercent()) / 100);
+  const zoomFactor = () => {
+    var _a, _b;
+    return ((_b = (_a = layout()).zoomFactor) == null ? void 0 : _b.call(_a)) ?? fallbackZoomFactor();
   };
+  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));
@@ -36596,7 +36633,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, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.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;
@@ -36630,16 +36667,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;
       },
@@ -36683,8 +36744,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();
       },
@@ -36693,8 +36754,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;
       },
@@ -36705,8 +36766,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;
       },
@@ -36718,8 +36779,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);
@@ -36746,8 +36807,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);
@@ -36769,8 +36830,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;
       },
@@ -36788,8 +36849,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;
       },
@@ -36803,8 +36864,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();
       },
@@ -36824,25 +36885,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;
@@ -36852,48 +36913,51 @@ function OasisEditorEditor(props) {
         const isDone = progress().phase === "done";
         const isError = progress().phase === "error";
         return (() => {
-          var _el$15 = _tmpl$2$g(), _el$16 = _el$15.firstChild, _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.nextSibling, _el$20 = _el$19.firstChild, _el$21 = _el$19.nextSibling;
-          _el$15.classList.toggle("oasis-editor-import-overlay-done", !!isDone);
-          _el$15.classList.toggle("oasis-editor-import-overlay-error", !!isError);
-          setAttribute(_el$15, "aria-busy", !isDone && !isError);
-          insert(_el$16, 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$17);
-          insert(_el$17, () => t("import.overlay.title"));
-          insert(_el$18, () => t(`import.phase.${progress().phase}`));
-          _el$20.classList.toggle("oasis-editor-import-progress-bar-done", !!isDone);
-          _el$20.classList.toggle("oasis-editor-import-progress-bar-error", !!isError);
-          insert(_el$21, isDone ? (() => {
-            var _el$22 = _tmpl$3$a();
-            insert(_el$22, () => t("import.phase.done"));
-            return _el$22;
-          })() : isError ? (() => {
-            var _el$23 = _tmpl$4$8();
-            insert(_el$23, () => t("import.phase.error"));
+          }), _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$24 = _tmpl$4$8();
+            insert(_el$24, () => t("import.phase.error"));
+            return _el$24;
           })() : [memo(() => Math.round(progress().progress)), "%"]);
           createRenderEffect((_p$) => {
-            var _v$13 = !!(progress().phase === "applying-editor-state" || progress().phase === "stabilizing-layout"), _v$14 = `${progress().progress}%`;
-            _v$13 !== _p$.e && _el$20.classList.toggle("oasis-editor-import-progress-bar-indeterminate", _p$.e = _v$13);
-            _v$14 !== _p$.t && setStyleProperty(_el$20, "width", _p$.t = _v$14);
+            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$15;
+          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()]));
-    _el$10.$$click = () => adjustZoom(-ZOOM_STEP);
-    _el$11.$$input = (event) => setZoomPercent(clampZoom(event.currentTarget.valueAsNumber));
-    _el$12.$$click = () => adjustZoom(ZOOM_STEP);
-    insert(_el$13, zoomPercent, _el$14);
-    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));
+    setAttribute(_el$12, "min", ZOOM_MIN);
+    setAttribute(_el$12, "max", ZOOM_MAX);
+    setAttribute(_el$12, "step", ZOOM_STEP);
+    _el$13.$$click = () => adjustZoom(ZOOM_STEP);
+    insert(_el$14, zoomPercent, _el$15);
+    insert(_el$8, createComponent(Show, {
       get when() {
         return overlays().persistenceStatus;
       },
@@ -36905,31 +36969,37 @@ function OasisEditorEditor(props) {
           return createComponent(Show, {
             when: key,
             get children() {
-              var _el$24 = _tmpl$5$7();
-              insert(_el$24, () => t(key));
-              createRenderEffect(() => className(_el$24, `oasis-editor-statusbar-item oasis-editor-persistence-status oasis-editor-status-${status.replace("...", "ing").replace(".", "")}`));
-              return _el$24;
+              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(), _v$8 = t("status.zoom"), _v$9 = `${t("status.zoom")} -`, _v$0 = zoomPercent() <= ZOOM_MIN, _v$1 = t("status.zoom"), _v$10 = `${zoomPercent()}%`, _v$11 = `${t("status.zoom")} +`, _v$12 = zoomPercent() >= ZOOM_MAX;
+      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$8 !== _p$.h && setAttribute(_el$1, "aria-label", _p$.h = _v$8);
-      _v$9 !== _p$.r && setAttribute(_el$10, "aria-label", _p$.r = _v$9);
-      _v$0 !== _p$.d && (_el$10.disabled = _p$.d = _v$0);
-      _v$1 !== _p$.l && setAttribute(_el$11, "aria-label", _p$.l = _v$1);
-      _v$10 !== _p$.u && setAttribute(_el$11, "aria-valuetext", _p$.u = _v$10);
-      _v$11 !== _p$.c && setAttribute(_el$12, "aria-label", _p$.c = _v$11);
-      _v$12 !== _p$.w && (_el$12.disabled = _p$.w = _v$12);
+      _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,
@@ -36945,9 +37015,15 @@ function OasisEditorEditor(props) {
       l: void 0,
       u: void 0,
       c: void 0,
-      w: 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$11.value = zoomPercent());
+    createRenderEffect(() => _el$12.value = zoomPercent());
     return _el$;
   })();
 }
@@ -40104,7 +40180,7 @@ export {
   probeLocalFontFamilies as ay,
   createInitialEditorState as az,
   createEditorRun as b,
-  RIBBON_TABS as b$,
+  Popover as b$,
   Show as b0,
   createRenderEffect as b1,
   style as b2,
@@ -40115,33 +40191,33 @@ export {
   insert as b7,
   use as b8,
   addEventListener as b9,
-  installGlobalReport as bA,
-  applyStoredPreciseFontPreference as bB,
-  getWelcomeSeen as bC,
-  isLocalFontAccessSupported as bD,
-  EDITOR_SCROLL_PADDING_PX as bE,
-  Toolbar as bF,
-  OasisEditorLoading as bG,
-  createEditorLogger as bH,
-  getCachedCanvasImage as bI,
-  registerDomStatsSurface as bJ,
-  Button as bK,
-  Checkbox as bL,
-  ColorPicker as bM,
-  CommandRegistry as bN,
-  DEFAULT_PALETTE as bO,
-  DialogFooter as bP,
-  FloatingActionButton as bQ,
-  GridPicker as bR,
-  IconButton as bS,
-  Menu as bT,
-  OASIS_BUILTIN_COMMANDS as bU,
-  OASIS_MENU_ITEMS as bV,
-  OASIS_TOOLBAR_ITEMS as bW,
-  OasisEditorAppLazy as bX,
-  OasisEditorContainer as bY,
-  PluginCollection as bZ,
-  Popover as b_,
+  startLongTaskObserver as bA,
+  installGlobalReport as bB,
+  applyStoredPreciseFontPreference as bC,
+  getWelcomeSeen as bD,
+  isLocalFontAccessSupported as bE,
+  EDITOR_SCROLL_PADDING_PX as bF,
+  Toolbar as bG,
+  OasisEditorLoading as bH,
+  createEditorLogger as bI,
+  getCachedCanvasImage as bJ,
+  registerDomStatsSurface as bK,
+  Button as bL,
+  Checkbox as bM,
+  ColorPicker as bN,
+  CommandRegistry as bO,
+  DEFAULT_PALETTE as bP,
+  DialogFooter as bQ,
+  FloatingActionButton as bR,
+  GridPicker as bS,
+  IconButton as bT,
+  Menu as bU,
+  OASIS_BUILTIN_COMMANDS as bV,
+  OASIS_MENU_ITEMS as bW,
+  OASIS_TOOLBAR_ITEMS as bX,
+  OasisEditorAppLazy as bY,
+  OasisEditorContainer as bZ,
+  PluginCollection as b_,
   Dialog as ba,
   delegateEvents as bb,
   className as bc,
@@ -40167,24 +40243,25 @@ export {
   enablePreciseFontMode as bw,
   createOasisEditorClient as bx,
   setLocale as by,
-  startLongTaskObserver as bz,
+  createEditorZoom as bz,
   createEditorParagraphFromRuns as c,
-  RIBBON_TAB_DEFINITIONS as c0,
-  Select as c1,
-  SelectField as c2,
-  Separator as c3,
-  SidePanel as c4,
-  SidePanelBody as c5,
-  SidePanelFooter as c6,
-  SidePanelHeader as c7,
-  SplitButton as c8,
-  TextField as c9,
-  Button$1 as ca,
-  createEditorCommandBus as cb,
-  createOasisEditor as cc,
-  createOasisEditorContainer as cd,
-  mount as ce,
-  registerToolbarRenderer as cf,
+  RIBBON_TABS as c0,
+  RIBBON_TAB_DEFINITIONS as c1,
+  Select as c2,
+  SelectField as c3,
+  Separator as c4,
+  SidePanel as c5,
+  SidePanelBody as c6,
+  SidePanelFooter as c7,
+  SidePanelHeader as c8,
+  SplitButton as c9,
+  TextField as ca,
+  Button$1 as cb,
+  createEditorCommandBus as cc,
+  createOasisEditor as cd,
+  createOasisEditorContainer as ce,
+  mount as cf,
+  registerToolbarRenderer as cg,
   getDocumentSections as d,
   createEditorStyledRun as e,
   getParagraphText as f,