oasis-editor 0.0.25 → 0.0.27

package/dist/{OasisEditorApp-y3iUL8-k.js → OasisEditorApp-TgBKJPpl.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 createEditorZoom, bA as startLongTaskObserver, bB as installGlobalReport, bC as applyStoredPreciseFontPreference, bD as getWelcomeSeen, bE as isLocalFontAccessSupported, bF as EDITOR_SCROLL_PADDING_PX, bG as Toolbar, bH as OasisEditorLoading, bI as createEditorLogger, bJ as getCachedCanvasImage, bK as registerDomStatsSurface } from "./index-Df7Ob0Ek.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 createEditorZoom, bA as startLongTaskObserver, bB as installGlobalReport, bC as applyStoredPreciseFontPreference, bD as getWelcomeSeen, bE as isLocalFontAccessSupported, bF as EDITOR_SCROLL_PADDING_PX, bG as Toolbar, bH as OasisEditorLoading, bI as createEditorLogger, bJ as getCachedCanvasImage, bK as registerDomStatsSurface } from "./index-BaKkmGAh.js";
 function getSelectedObjectRun(state, predicate) {
   const normalized = normalizeSelection(state);
   if (normalized.isCollapsed || normalized.startIndex !== normalized.endIndex || normalized.endParagraphOffset - normalized.startParagraphOffset !== 1) {
@@ -7255,12 +7255,14 @@ function createResizeSession(adapter, deps) {
     }
   });
   const handleMouseMove = (event) => {
+    var _a;
     const resize = active;
     if (!resize) {
       return;
     }
-    const deltaX = event.clientX - resize.startClientX;
-    const deltaY = event.clientY - resize.startClientY;
+    const z = ((_a = deps.zoomFactor) == null ? void 0 : _a.call(deps)) ?? 1;
+    const deltaX = (event.clientX - resize.startClientX) / z;
+    const deltaY = (event.clientY - resize.startClientY) / z;
     const maxWidth = adapter.getMaxWidth(deps.state, resize.paragraphId);
     const { width, height } = resolveResizedDimensions(
       resize,
@@ -7504,7 +7506,8 @@ function createEditorImageOperations(deps) {
       updateHistoryState: deps.updateHistoryState,
       cloneState: deps.cloneState,
       focusInput: deps.focusInput,
-      logger: deps.logger
+      logger: deps.logger,
+      zoomFactor: deps.zoomFactor
     }
   );
   const imageRotateSession = createRotateSession(
@@ -7705,7 +7708,8 @@ function createEditorTextBoxOperations(deps) {
       updateHistoryState: deps.updateHistoryState,
       cloneState: deps.cloneState,
       focusInput: deps.focusInput,
-      logger: deps.logger
+      logger: deps.logger,
+      zoomFactor: deps.zoomFactor
     }
   );
   const rotateSession = createRotateSession(
@@ -39181,7 +39185,8 @@ function cloneLayoutSnapshot(snapshot) {
         top: paragraph.tableCell.top,
         width: paragraph.tableCell.width,
         height: paragraph.tableCell.height
-      } : void 0
+      } : void 0,
+      verticalMode: paragraph.verticalMode
     })),
     inlineImages: snapshot.inlineImages.map((image) => ({
       paragraphId: image.paragraphId,
@@ -39195,6 +39200,21 @@ function cloneLayoutSnapshot(snapshot) {
       width: image.width,
       height: image.height
     })),
+    inlineTextBoxes: snapshot.inlineTextBoxes.map(
+      (box) => ({
+        paragraphId: box.paragraphId,
+        paragraphIndex: box.paragraphIndex,
+        zone: box.zone,
+        pageIndex: box.pageIndex,
+        startOffset: box.startOffset,
+        endOffset: box.endOffset,
+        left: box.left,
+        top: box.top,
+        width: box.width,
+        height: box.height,
+        rotation: box.rotation
+      })
+    ),
     unsupportedRegions: snapshot.unsupportedRegions.map((region) => ({
       ...region
     }))
@@ -39224,6 +39244,9 @@ function buildApi() {
       inlineImages: lastLayoutSnapshot.inlineImages.map((image) => ({
         ...image
       })),
+      inlineTextBoxes: lastLayoutSnapshot.inlineTextBoxes.map((box) => ({
+        ...box
+      })),
       unsupportedRegions: lastLayoutSnapshot.unsupportedRegions.map(
         (region) => ({
           ...region
@@ -44772,9 +44795,11 @@ function createEditorTableResize(deps) {
     setActiveCursorClass(currentResizing.type === "column");
   };
   const handleWindowMouseUp = (event) => {
+    var _a;
     const currentResizing = resizing();
     if (!currentResizing) return;
-    const delta = (currentResizing.type === "column" ? event.clientX : event.clientY) - currentResizing.initialPos;
+    const z = ((_a = deps.zoomFactor) == null ? void 0 : _a.call(deps)) ?? 1;
+    const delta = ((currentResizing.type === "column" ? event.clientX : event.clientY) - currentResizing.initialPos) / z;
     if (Math.abs(delta) >= DRAG_THRESHOLD_PX) {
       deps.applyTransactionalState((current) => {
         if (currentResizing.type === "row") {
@@ -45871,7 +45896,7 @@ function createEditorNavigation(deps) {
 function createEditorRevisionController(deps) {
   const [hoveredRevision, setHoveredRevision] = createSignal(null);
   const handleRevisionMouseEnter = (revisionId, event) => {
-    var _a, _b;
+    var _a, _b, _c;
     const paragraphs = getParagraphs(deps.state());
     let foundRevision;
     for (const p of paragraphs) {
@@ -45887,13 +45912,14 @@ function createEditorRevisionController(deps) {
     const rect = event.currentTarget.getBoundingClientRect();
     const surfaceRect = (_b = deps.surfaceRef()) == null ? void 0 : _b.getBoundingClientRect();
     if (!surfaceRect) return;
+    const z = ((_c = deps.zoomFactor) == null ? void 0 : _c.call(deps)) ?? 1;
     setHoveredRevision({
       revisionId: foundRevision.id,
       author: foundRevision.author,
       date: foundRevision.date,
       type: foundRevision.type,
-      left: rect.left - surfaceRect.left,
-      top: rect.top - surfaceRect.top
+      left: (rect.left - surfaceRect.left) / z,
+      top: (rect.top - surfaceRect.top) / z
     });
   };
   const handleRevisionMouseLeave = () => {
@@ -45911,7 +45937,8 @@ function useEditorInteractionWiring(ctx) {
     state,
     applyTransactionalState: ctx.applyTransactionalState,
     surfaceRef: ctx.surfaceRef,
-    viewportRef: ctx.viewportRef
+    viewportRef: ctx.viewportRef,
+    zoomFactor: ctx.zoomFactor
   });
   const tableDrag = createEditorTableDrag({
     state,
@@ -45921,7 +45948,8 @@ function useEditorInteractionWiring(ctx) {
   });
   const revisionController = createEditorRevisionController({
     state,
-    surfaceRef: () => ctx.surfaceRef() ?? null
+    surfaceRef: () => ctx.surfaceRef() ?? null,
+    zoomFactor: ctx.zoomFactor
   });
   const textDrag = createEditorTextDrag({
     state,
@@ -46636,7 +46664,8 @@ function OasisEditorApp(props = {}) {
     focusInput,
     focusInputAfterPointerSelection,
     cloneState,
-    logger
+    logger,
+    zoomFactor: zoom.zoomFactor
   });
   const textBoxOps = createEditorTextBoxOperations({
     state,
@@ -46645,7 +46674,8 @@ function OasisEditorApp(props = {}) {
     updateHistoryState,
     focusInput,
     cloneState,
-    logger
+    logger,
+    zoomFactor: zoom.zoomFactor
   });
   const styleController = createEditorStyleController({
     state: () => state,

package/dist/app/controllers/createResizeSession.d.ts

@@ -29,6 +29,8 @@ export interface ResizeSessionDeps {
     cloneState: (source: EditorState) => EditorState;
     focusInput: () => void;
     logger: EditorLogger;
+    /** Visual zoom factor `z`; pointer deltas (screen px) are divided by it. */
+    zoomFactor?: () => number;
 }
 /**
  * Drives a handle-based resize: it tracks the pointer, resolves the next size

package/dist/app/controllers/useEditorImageOperations.d.ts

@@ -31,6 +31,8 @@ export interface EditorImageOperationsDeps {
     focusInputAfterPointerSelection: () => void;
     cloneState: (source: EditorState) => EditorState;
     logger: EditorLogger;
+    /** Visual zoom factor `z`; resize pointer deltas are divided by it. */
+    zoomFactor?: () => number;
 }
 export declare function createEditorImageOperations(deps: EditorImageOperationsDeps): {
     dragging: import('solid-js').Accessor<boolean>;

package/dist/app/controllers/useEditorRevision.d.ts

@@ -4,6 +4,8 @@ import { RevisionBox } from '../../ui/editorUiTypes.js';
 export interface UseEditorRevisionProps {
     state: () => EditorState;
     surfaceRef: () => HTMLDivElement | null;
+    /** Visual zoom factor `z`; screen-px offsets are divided by it for px-local. */
+    zoomFactor?: () => number;
 }
 export declare function createEditorRevisionController(deps: UseEditorRevisionProps): {
     hoveredRevision: import('solid-js').Accessor<RevisionBox | null>;

package/dist/app/controllers/useEditorTableResize.d.ts

@@ -7,4 +7,6 @@ export declare function createEditorTableResize(deps: {
     applyTransactionalState: (producer: (current: EditorState) => EditorState) => void;
     surfaceRef: () => HTMLElement | undefined;
     viewportRef: () => HTMLElement | undefined;
+    /** Visual zoom factor `z`; resize pointer deltas are divided by it. */
+    zoomFactor?: () => number;
 }): TableResizeOps;

package/dist/app/controllers/useEditorTextBoxOperations.d.ts

@@ -11,6 +11,8 @@ export interface EditorTextBoxOperationsDeps {
     focusInput: () => void;
     cloneState: (source: EditorState) => EditorState;
     logger: EditorLogger;
+    /** Visual zoom factor `z`; resize pointer deltas are divided by it. */
+    zoomFactor?: () => number;
 }
 export declare function createEditorTextBoxOperations(deps: EditorTextBoxOperationsDeps): {
     handleTextBoxResizeHandleMouseDown: (paragraphId: string, paragraphOffset: number, direction: ResizeHandleDirection, event: MouseEvent & {

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

@@ -2438,7 +2438,7 @@ function OasisEditorAppLazy(props = {}) {
     onCleanup(() => {
       cancelled = true;
     });
-    import("./OasisEditorApp-y3iUL8-k.js").then((m) => {
+    import("./OasisEditorApp-TgBKJPpl.js").then((m) => {
       cancelled = true;
       setProgress(1);
       setTimeout(() => setApp(() => m.OasisEditorApp), 180);
@@ -21646,7 +21646,6 @@ function getToolbarStyleState(state) {
   };
 }
 const EDITOR_SCROLL_PADDING_PX = 34;
-const EDITOR_SCROLLBAR_RESERVE_PX = 10;
 const PX_PER_INCH$2 = 96;
 const PX_PER_CM = PX_PER_INCH$2 / 2.54;
 const MIN_CONTENT_WIDTH_PX = 24;
@@ -21810,11 +21809,13 @@ function HorizontalRuler(props) {
     return typeof navigator !== "undefined" && ((_a = navigator.language) == null ? void 0 : _a.toLowerCase().startsWith("en")) ? "in" : "cm";
   };
   const ticks = createMemo(() => computeRulerTicks(pageSettings().width, baseGeometry().contentLeft, unit()));
-  const trackWidth = createMemo(() => pageLeft() * 2 + pageSettings().width);
+  const z = () => props.zoomFactor();
+  const sx = (value) => value * z();
+  const trackWidth = createMemo(() => pageLeft() * 2 + sx(pageSettings().width));
   const pageXFromClient = (clientX) => {
     const rect = pageRef == null ? void 0 : pageRef.getBoundingClientRect();
     if (!rect) return 0;
-    return clamp$1(clientX - rect.left, 0, pageSettings().width);
+    return clamp$1((clientX - rect.left) / z(), 0, pageSettings().width);
   };
   const beginDrag = (type, event) => {
     var _a;
@@ -21921,7 +21922,7 @@ function HorizontalRuler(props) {
       children: (tick) => [(() => {
         var _el$11 = _tmpl$2$l();
         createRenderEffect((_p$) => {
-          var _v$27 = `oasis-editor-horizontal-ruler-tick oasis-editor-horizontal-ruler-tick-${tick.kind}`, _v$28 = `${tick.x}px`;
+          var _v$27 = `oasis-editor-horizontal-ruler-tick oasis-editor-horizontal-ruler-tick-${tick.kind}`, _v$28 = `${sx(tick.x)}px`;
           _v$27 !== _p$.e && className(_el$11, _p$.e = _v$27);
           _v$28 !== _p$.t && setStyleProperty(_el$11, "left", _p$.t = _v$28);
           return _p$;
@@ -21933,7 +21934,7 @@ function HorizontalRuler(props) {
       })(), memo(() => memo(() => !!tick.label)() && (() => {
         var _el$12 = _tmpl$3$e();
         insert(_el$12, () => tick.label);
-        createRenderEffect((_$p) => setStyleProperty(_el$12, "left", `${tick.x}px`));
+        createRenderEffect((_$p) => setStyleProperty(_el$12, "left", `${sx(tick.x)}px`));
         return _el$12;
       })())]
     }), _el$7);
@@ -21944,7 +21945,7 @@ function HorizontalRuler(props) {
     _el$1.$$pointerdown = (event) => beginDrag("leftIndent", event);
     _el$10.$$pointerdown = (event) => beginDrag("rightIndent", event);
     createRenderEffect((_p$) => {
-      var _v$ = t("ruler.horizontal"), _v$2 = `${trackWidth()}px`, _v$3 = `translateX(${-scrollLeft()}px)`, _v$4 = `${pageLeft()}px`, _v$5 = `${pageSettings().width}px`, _v$6 = `${geometry().contentLeft}px`, _v$7 = `${geometry().contentRight}px`, _v$8 = `${Math.max(0, pageSettings().width - geometry().contentRight)}px`, _v$9 = `${geometry().contentLeft}px`, _v$0 = `${Math.max(0, geometry().contentRight - geometry().contentLeft)}px`, _v$1 = `${geometry().contentLeft}px`, _v$10 = t("ruler.leftMargin"), _v$11 = t("ruler.leftMargin"), _v$12 = `${geometry().contentRight}px`, _v$13 = t("ruler.rightMargin"), _v$14 = t("ruler.rightMargin"), _v$15 = `${geometry().firstLineX}px`, _v$16 = t("ruler.firstLineIndent"), _v$17 = t("ruler.firstLineIndent"), _v$18 = `${geometry().leftIndentX}px`, _v$19 = t("ruler.hangingIndent"), _v$20 = t("ruler.hangingIndent"), _v$21 = `${geometry().leftIndentX}px`, _v$22 = t("ruler.leftIndent"), _v$23 = t("ruler.leftIndent"), _v$24 = `${geometry().rightIndentX}px`, _v$25 = t("ruler.rightIndent"), _v$26 = t("ruler.rightIndent");
+      var _v$ = t("ruler.horizontal"), _v$2 = `${trackWidth()}px`, _v$3 = `translateX(${-scrollLeft()}px)`, _v$4 = `${pageLeft()}px`, _v$5 = `${sx(pageSettings().width)}px`, _v$6 = `${sx(geometry().contentLeft)}px`, _v$7 = `${sx(geometry().contentRight)}px`, _v$8 = `${sx(Math.max(0, pageSettings().width - geometry().contentRight))}px`, _v$9 = `${sx(geometry().contentLeft)}px`, _v$0 = `${sx(Math.max(0, geometry().contentRight - geometry().contentLeft))}px`, _v$1 = `${sx(geometry().contentLeft)}px`, _v$10 = t("ruler.leftMargin"), _v$11 = t("ruler.leftMargin"), _v$12 = `${sx(geometry().contentRight)}px`, _v$13 = t("ruler.rightMargin"), _v$14 = t("ruler.rightMargin"), _v$15 = `${sx(geometry().firstLineX)}px`, _v$16 = t("ruler.firstLineIndent"), _v$17 = t("ruler.firstLineIndent"), _v$18 = `${sx(geometry().leftIndentX)}px`, _v$19 = t("ruler.hangingIndent"), _v$20 = t("ruler.hangingIndent"), _v$21 = `${sx(geometry().leftIndentX)}px`, _v$22 = t("ruler.leftIndent"), _v$23 = t("ruler.leftIndent"), _v$24 = `${sx(geometry().rightIndentX)}px`, _v$25 = t("ruler.rightIndent"), _v$26 = t("ruler.rightIndent");
       _v$ !== _p$.e && setAttribute(_el$, "aria-label", _p$.e = _v$);
       _v$2 !== _p$.t && setStyleProperty(_el$2, "width", _p$.t = _v$2);
       _v$3 !== _p$.a && setStyleProperty(_el$2, "transform", _p$.a = _v$3);
@@ -36519,7 +36520,7 @@ function createEditorZoom(initial = ZOOM_DEFAULT) {
   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>`);
+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><div class="oasis-editor-statusbar-group oasis-editor-statusbar-start"><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><div class="oasis-editor-statusbar-group oasis-editor-statusbar-end"><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;
@@ -36540,13 +36541,11 @@ function OasisEditorEditor(props) {
     return rawViewportHeight ?? "min(72vh, 920px)";
   };
   const shellStyle = createMemo(() => ({
-    // pageWidth + both horizontal gutters + the reserved vertical-scrollbar
-    // gutter. The paper is width:100% of the scroll content and
-    // `.oasis-editor-editor` reserves the scrollbar via `scrollbar-gutter:
-    // stable`, so this keeps the paper exactly `pageWidth` while leaving room for
-    // the scrollbar — preventing a spurious horizontal scrollbar (notably in
-    // landscape) and letting the editor area grow to fit a wider page.
-    width: `min(${widestPageWidth() + EDITOR_SCROLL_PADDING_PX * 2 + EDITOR_SCROLLBAR_RESERVE_PX}px, 100%)`,
+    // Word-like chrome spans the whole stage. The page remains centered by the
+    // zoom-sizer/scroll-content layer, while pages wider than the available
+    // stage continue to overflow inside the viewport instead of widening the
+    // shell and pulling the ruler, scrollbar and status bar inward.
+    width: "100%",
     height: "100%",
     "max-height": viewportHeight(),
     ...layout().style ?? {}
@@ -36580,6 +36579,24 @@ function OasisEditorEditor(props) {
   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));
+  let prevZoomFactor = zoomFactor();
+  createEffect(() => {
+    const next = zoomFactor();
+    const prev = prevZoomFactor;
+    prevZoomFactor = next;
+    if (next === prev || prev <= 0) return;
+    const el = viewportElement;
+    if (!el) return;
+    const ratio = next / prev;
+    const halfW = el.clientWidth / 2;
+    const halfH = el.clientHeight / 2;
+    const targetLeft = (el.scrollLeft + halfW) * ratio - halfW;
+    const targetTop = (el.scrollTop + halfH) * ratio - halfH;
+    requestAnimationFrame(() => {
+      el.scrollLeft = targetLeft;
+      el.scrollTop = targetTop;
+    });
+  });
   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));
@@ -36633,7 +36650,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.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;
+    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.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.nextSibling, _el$11 = _el$9.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$14.nextSibling, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild;
     insert(_el$, createComponent(Show, {
       get when() {
         return memo(() => !!layout().showHorizontalRuler)() && overlays().toolbarHost;
@@ -36647,7 +36664,8 @@ function OasisEditorEditor(props) {
             return overlays().toolbarHost;
           },
           viewportRef,
-          readOnly: () => Boolean(layout().readOnly)
+          readOnly: () => Boolean(layout().readOnly),
+          zoomFactor
         });
       }
     }), _el$2);
@@ -36913,51 +36931,51 @@ function OasisEditorEditor(props) {
         const isDone = progress().phase === "done";
         const isError = progress().phase === "error";
         return (() => {
-          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, {
+          var _el$18 = _tmpl$2$g(), _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$21.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling;
+          _el$18.classList.toggle("oasis-editor-import-overlay-done", !!isDone);
+          _el$18.classList.toggle("oasis-editor-import-overlay-error", !!isError);
+          setAttribute(_el$18, "aria-busy", !isDone && !isError);
+          insert(_el$19, createComponent(OasisBrandMark, {
             height: 40,
             "class": "oasis-editor-loading-mark"
-          }), _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;
+          }), _el$20);
+          insert(_el$20, () => t("import.overlay.title"));
+          insert(_el$21, () => t(`import.phase.${progress().phase}`));
+          _el$23.classList.toggle("oasis-editor-import-progress-bar-done", !!isDone);
+          _el$23.classList.toggle("oasis-editor-import-progress-bar-error", !!isError);
+          insert(_el$24, isDone ? (() => {
+            var _el$25 = _tmpl$3$a();
+            insert(_el$25, () => t("import.phase.done"));
+            return _el$25;
           })() : isError ? (() => {
-            var _el$24 = _tmpl$4$8();
-            insert(_el$24, () => t("import.phase.error"));
-            return _el$24;
+            var _el$26 = _tmpl$4$8();
+            insert(_el$26, () => t("import.phase.error"));
+            return _el$26;
           })() : [memo(() => Math.round(progress().progress)), "%"]);
           createRenderEffect((_p$) => {
             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);
+            _v$19 !== _p$.e && _el$23.classList.toggle("oasis-editor-import-progress-bar-indeterminate", _p$.e = _v$19);
+            _v$20 !== _p$.t && setStyleProperty(_el$23, "width", _p$.t = _v$20);
             return _p$;
           }, {
             e: void 0,
             t: void 0
           });
-          return _el$16;
+          return _el$18;
         })();
       }
     }), _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, {
+    insert(_el$0, () => t("status.words", [wordCount()]));
+    insert(_el$1, () => t("status.characters", [characterCount()]));
+    insert(_el$10, () => t("status.page", [currentPage(), totalPages()]));
+    _el$13.$$click = () => adjustZoom(-ZOOM_STEP);
+    _el$14.$$input = (event) => setZoomPercent(clampZoom(event.currentTarget.valueAsNumber));
+    setAttribute(_el$14, "min", ZOOM_MIN);
+    setAttribute(_el$14, "max", ZOOM_MAX);
+    setAttribute(_el$14, "step", ZOOM_STEP);
+    _el$15.$$click = () => adjustZoom(ZOOM_STEP);
+    insert(_el$16, zoomPercent, _el$17);
+    insert(_el$11, createComponent(Show, {
       get when() {
         return overlays().persistenceStatus;
       },
@@ -36969,10 +36987,10 @@ function OasisEditorEditor(props) {
           return createComponent(Show, {
             when: key,
             get children() {
-              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;
+              var _el$27 = _tmpl$5$7();
+              insert(_el$27, () => t(key));
+              createRenderEffect(() => className(_el$27, `oasis-editor-statusbar-item oasis-editor-persistence-status oasis-editor-status-${status.replace("...", "ing").replace(".", "")}`));
+              return _el$27;
             }
           });
         })();
@@ -36993,13 +37011,13 @@ function OasisEditorEditor(props) {
       _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);
+      _v$12 !== _p$.w && setAttribute(_el$12, "aria-label", _p$.w = _v$12);
+      _v$13 !== _p$.m && setAttribute(_el$13, "aria-label", _p$.m = _v$13);
+      _v$14 !== _p$.f && (_el$13.disabled = _p$.f = _v$14);
+      _v$15 !== _p$.y && setAttribute(_el$14, "aria-label", _p$.y = _v$15);
+      _v$16 !== _p$.g && setAttribute(_el$14, "aria-valuetext", _p$.g = _v$16);
+      _v$17 !== _p$.p && setAttribute(_el$15, "aria-label", _p$.p = _v$17);
+      _v$18 !== _p$.b && (_el$15.disabled = _p$.b = _v$18);
       return _p$;
     }, {
       e: void 0,
@@ -37023,7 +37041,7 @@ function OasisEditorEditor(props) {
       p: void 0,
       b: void 0
     });
-    createRenderEffect(() => _el$12.value = zoomPercent());
+    createRenderEffect(() => _el$14.value = zoomPercent());
     return _el$;
   })();
 }