@voithos-labs/aragonite 0.10.2 → 0.10.3

package/dist/components/editor-root-geometry.js

@@ -0,0 +1,91 @@
+/**
+ * Editor-root geometry observers: the width and viewport-height watchers, the type-scale probe
+ * and the header-slot compensation. Each observes the element its installing `$effect`
+ * captured and returns the teardown; the reactive signals they feed (`widthVersion`,
+ * `typeScale`, `viewportHeightVersion`) stay in `Editor.svelte`, which is what the rest of the
+ * root reads. ResizeObserver's per-callback batching is the coalescing; no timer debounce (G4.4).
+ */
+import { ESTIMATE_BASE_FONT_SIZE } from '../cursor/typography-estimates';
+import { onRoot, removeAll } from './editor-root-listeners';
+// ── Width and height ────────────────────────────────────────────────
+/** Calls `onWidthChange` when `el`'s width moves. A height-only resize is ignored: only a
+ *  re-wrap stales the measured heights. */
+export function installWidthWatcher(el, onWidthChange) {
+    let lastWidth = el.clientWidth;
+    const observer = new ResizeObserver(() => {
+        const width = el.clientWidth;
+        if (width === lastWidth)
+            return;
+        lastWidth = width;
+        onWidthChange();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+}
+/** Calls `bump` on a height change of the resolved scrollport `target`. */
+export function installViewportHeightWatcher(target, bump) {
+    if (target === window) {
+        // The page viewport has no box to observe, and a visualViewport move (a mobile URL
+        // bar retracting) never touches documentElement's height — hence both, ungated.
+        const visual = window.visualViewport;
+        return removeAll(onRoot(window, 'resize', bump), visual ? onRoot(visual, 'resize', bump) : () => { });
+    }
+    // Cast, not a narrowing: `UserScrollport` is a union of object types, which `=== window`
+    // does not narrow — the same cast `createScrollport` makes on the same split.
+    const el = target;
+    let lastHeight = el.clientHeight;
+    const observer = new ResizeObserver(() => {
+        if (el.clientHeight === lastHeight)
+            return;
+        lastHeight = el.clientHeight;
+        bump();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+}
+/**
+ * The width watcher's sibling: a font-size move puts the height estimates off several-fold, so
+ * a document whose true height clears the activation watermark can fail to window at all. No
+ * other box in the root reports it, hence the `1em` probe; the scale is relative to the size
+ * `HEIGHT_ESTIMATES` were calibrated at.
+ */
+export function installTypeScaleProbe(el, deps) {
+    const apply = (fontSizePx) => {
+        const next = fontSizePx / ESTIMATE_BASE_FONT_SIZE;
+        // Sub-percent moves are sub-pixel on a line box — not worth a full rebuild.
+        if (!(next > 0) || Math.abs(next - deps.getScale()) < 0.01)
+            return;
+        deps.onScale(next);
+    };
+    apply(el.getBoundingClientRect().height);
+    const observer = new ResizeObserver((entries) => apply(borderBoxHeight(entries, el)));
+    observer.observe(el);
+    return () => observer.disconnect();
+}
+// Border boxes throughout, seed and fallback alike, so a browser without `borderBoxSize`
+// computes the same delta.
+function borderBoxHeight(entries, el) {
+    const box = entries[0]?.borderBoxSize?.[0];
+    return box ? box.blockSize : el.getBoundingClientRect().height;
+}
+/**
+ * The header slot's height lives outside the height model, so while the editor owns the
+ * correction a growing header would slide the document under the reader. Compensating from
+ * the SLOT's own resize composes with `correctAnchor` instead of double-correcting; a reveal
+ * already holding the scroll outranks it.
+ */
+export function installHeaderSlotCompensation(deps) {
+    const { el, port } = deps;
+    let lastHeight = el.getBoundingClientRect().height;
+    const observer = new ResizeObserver((entries) => {
+        const height = borderBoxHeight(entries, el);
+        const delta = height - lastHeight;
+        lastHeight = height;
+        if (delta === 0 || !deps.ownsScrollCorrection() || port.scrollTop() === 0)
+            return;
+        if (!deps.revealHoldsScroll())
+            port.setScrollTop(port.scrollTop() + delta);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+}

package/dist/components/editor-root-keydown.d.ts

@@ -31,7 +31,7 @@ export interface EditorRootKeydownDeps {
      *  chords. `undefined` = every installed plugin. */
     activation: PluginActivation | undefined;
     onCommandError: CommandErrorSink;
-    crossBlock: Pick<CrossBlockHandlers, 'handleKeyDown'>;
+    crossBlock: Pick<CrossBlockHandlers, 'handleKeyDown' | 'insertText'>;
     /** True for nodes in the host's `header` slot: they sit inside `root.contains`
      *  without being the editor's own content. */
     isHostChrome(node: Node | null): boolean;

package/dist/components/editor-root-keydown.js

@@ -8,7 +8,7 @@
  */
 import { claimsBodyChord, isForeignTextEntry } from '../active-editor';
 import { isReservedUiChord, runGlobalChord } from '../schema/commands';
-import { eventToChord } from '../schema/keybindings';
+import { eventToChord, isCharacterKey } from '../schema/keybindings';
 export function createEditorRootKeydown(deps) {
     /**
      * Search / Escape: focus inside this editor, or a search chord this instance
@@ -81,8 +81,17 @@ export function createEditorRootKeydown(deps) {
                 event.preventDefault();
                 return;
             }
-            if (deps.isCrossBlock)
-                void deps.crossBlock.handleKeyDown(event);
+            if (!deps.isCrossBlock)
+                return;
+            // A range whose blocks host no character position leaves no editing surface focused, so
+            // no `beforeinput` ever fires for a typed character and this is the only door it has.
+            // Composition still belongs to the browser, and a chorded key is not text.
+            if (isCharacterKey(event.key) && !event.isComposing && !event.ctrlKey && !event.metaKey) {
+                event.preventDefault();
+                void deps.crossBlock.insertText(event.key);
+                return;
+            }
+            void deps.crossBlock.handleKeyDown(event);
         }
     };
 }

package/dist/components/editor-root-listeners.d.ts

@@ -1,10 +1,9 @@
 /**
  * Editor-root ambient listeners: the mod-active cursor tracker, the selectionchange
- * bridge, and the viewport-height watcher. Pure dispatch over live getters; each
- * installing `$effect` stays in `Editor.svelte` as a guard plus one install call,
- * returning the teardown. `onRoot`/`removeAll` capture that add/remove pair once.
+ * bridge, the blur announcer and the double-click word select. Pure dispatch over live
+ * getters; each installing `$effect` stays in `Editor.svelte` as a guard plus one install
+ * call, returning the teardown. `onRoot`/`removeAll` capture that add/remove pair once.
  */
-import type { UserScrollport } from '../cursor/scroll-ancestors';
 export declare function onRoot<E extends Event>(target: EventTarget, type: string, handler: (event: E) => void, options?: {
     capture?: boolean;
     passive?: boolean;
@@ -40,5 +39,10 @@ export declare function installEditorBlurAnnouncer(deps: {
     root: HTMLElement;
     emit: () => void;
 }): () => void;
-/** Calls `bump` on a height change of the resolved scrollport `target`. */
-export declare function installViewportHeightWatcher(target: UserScrollport, bump: () => void): () => void;
+/**
+ * Windows Chromium's double-click takes the space after the word, so the word is selected on
+ * the SECOND press, trimmed, with the native selection suppressed; the dblclick trim is the
+ * fallback. A press on an inline widget is that widget's own gesture (a footnote's double-click
+ * takes its whole token), so the root leaves it to the widget.
+ */
+export declare function installDoubleClickWordSelect(root: HTMLElement): () => void;

package/dist/components/editor-root-listeners.js

@@ -1,10 +1,12 @@
 /**
  * Editor-root ambient listeners: the mod-active cursor tracker, the selectionchange
- * bridge, and the viewport-height watcher. Pure dispatch over live getters; each
- * installing `$effect` stays in `Editor.svelte` as a guard plus one install call,
- * returning the teardown. `onRoot`/`removeAll` capture that add/remove pair once.
+ * bridge, the blur announcer and the double-click word select. Pure dispatch over live
+ * getters; each installing `$effect` stays in `Editor.svelte` as a guard plus one install
+ * call, returning the teardown. `onRoot`/`removeAll` capture that add/remove pair once.
  */
 import { tick } from 'svelte';
+import { isEditableEventTarget } from '../editor-actions/whole-block-focus-surface';
+import { selectWordAtPoint, trimDoubleClickSelection } from '../selection/double-click-trim';
 // ── Listener plumbing ───────────────────────────────────────────────
 // Typed off `Event`, not the per-target event maps: those names are type-only,
 // and `target` ranges over every EventTarget the root effects listen on.
@@ -89,24 +91,23 @@ export function installEditorBlurAnnouncer(deps) {
     };
     return onRoot(deps.root, 'focusout', handler);
 }
-/** Calls `bump` on a height change of the resolved scrollport `target`. */
-export function installViewportHeightWatcher(target, bump) {
-    if (target === window) {
-        // The page viewport has no box to observe, and a visualViewport move (a mobile URL
-        // bar retracting) never touches documentElement's height — hence both, ungated.
-        const visual = window.visualViewport;
-        return removeAll(onRoot(window, 'resize', bump), visual ? onRoot(visual, 'resize', bump) : () => { });
-    }
-    // Cast, not a narrowing: `UserScrollport` is a union of object types, which `=== window`
-    // does not narrow — the same cast `createScrollport` makes on the same split.
-    const el = target;
-    let lastHeight = el.clientHeight;
-    const observer = new ResizeObserver(() => {
-        if (el.clientHeight === lastHeight)
+/**
+ * Windows Chromium's double-click takes the space after the word, so the word is selected on
+ * the SECOND press, trimmed, with the native selection suppressed; the dblclick trim is the
+ * fallback. A press on an inline widget is that widget's own gesture (a footnote's double-click
+ * takes its whole token), so the root leaves it to the widget.
+ */
+export function installDoubleClickWordSelect(root) {
+    const onSecondPress = (e) => {
+        if (e.detail !== 2 || e.button !== 0 || e.shiftKey || e.ctrlKey || e.metaKey)
+            return;
+        if (!isEditableEventTarget(e.target) || pressesInlineWidget(e.target))
             return;
-        lastHeight = el.clientHeight;
-        bump();
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
+        if (selectWordAtPoint(root.ownerDocument, e.clientX, e.clientY))
+            e.preventDefault();
+    };
+    return removeAll(onRoot(root, 'mousedown', onSecondPress), onRoot(root, 'dblclick', () => trimDoubleClickSelection(root.ownerDocument)));
+}
+function pressesInlineWidget(target) {
+    return target instanceof Element && target.closest('[data-inline-widget]') !== null;
 }

package/dist/components/editor-root-mode-flip.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Editor-root presentation-mode flip: carry the caret across a mode change. The pre phase is
+ * the last moment the outgoing mode owns the DOM (past it the mode's render key has rebuilt
+ * every block from its own CST bytes), so the caret is captured and the surface blurred there;
+ * the post phase drops the geometry the old markers set and re-seats the caret through the
+ * reveal road. The two `$effect`s stay in `Editor.svelte` as the mode read plus one call each.
+ */
+import type { EdgeAffinityState } from '../cursor/edge-affinity';
+import type { HeightOracle } from '../cursor/height-oracle';
+import type { EditorEvents } from '../editor-events';
+import type { BlockElLookup } from '../editor-keys';
+import type { PresentationMode } from '../presentation-mode';
+import type { EditorSelection } from '../selection/primitives';
+import type { SelectionState } from '../selection/selection-state.svelte';
+export interface ModeFlipDeps {
+    /** Getters, never values: the root binds after construction and the mode moves. */
+    get editorEl(): HTMLElement | undefined;
+    get mode(): PresentationMode;
+    selection: Pick<SelectionState, 'isCrossBlock' | 'gapCaret' | 'clearGapCaret'>;
+    /** The public snapshot, which also answers for a native caret no block reports. */
+    getSelection(): EditorSelection | null;
+    getBlockElByPath: BlockElLookup;
+    isHostChrome(node: Node | null): boolean;
+    edgeAffinity: Pick<EdgeAffinityState, 'reset'>;
+    heightOracle: Pick<HeightOracle, 'dropMeasured'>;
+    events: EditorEvents;
+    /** The bare-mount restore road: a flip is a view operation and writes no scrollport. */
+    restoreCaret(path: number[], offset: number): Promise<unknown>;
+}
+export interface ModeFlip {
+    /** The `$effect.pre` half, run untracked: capture and blur while the outgoing mode owns the DOM. */
+    beforeFlip(to: PresentationMode): void;
+    /** The `$effect` half: reset mode-bound geometry, then restore the caret after the flush. */
+    afterFlip(to: PresentationMode): void;
+}
+export declare function createModeFlip(deps: ModeFlipDeps): ModeFlip;

package/dist/components/editor-root-mode-flip.js

@@ -0,0 +1,92 @@
+/**
+ * Editor-root presentation-mode flip: carry the caret across a mode change. The pre phase is
+ * the last moment the outgoing mode owns the DOM (past it the mode's render key has rebuilt
+ * every block from its own CST bytes), so the caret is captured and the surface blurred there;
+ * the post phase drops the geometry the old markers set and re-seats the caret through the
+ * reveal road. The two `$effect`s stay in `Editor.svelte` as the mode read plus one call each.
+ */
+import { tick } from 'svelte';
+import { isTextEntrySurface } from '../active-editor';
+import { ambientLengthOf } from '../ambient/ambient-dom';
+import { toClampedRawOffset } from '../cursor/coordinate-spaces';
+import { domTextOffsetAtNode } from '../cursor/widget-offset';
+import { findSurfacePathForElement } from '../selection/path-lookup';
+export function createModeFlip(deps) {
+    let flipCaret = null;
+    let preFlipSeenMode = deps.mode;
+    let lastEffectiveMode = deps.mode;
+    /** The focused leaf's caret as (path, raw offset): the per-backend road while a leaf holds
+     *  focus, else the native range a toggle click leaves behind while chrome takes focus. */
+    function captureCaret() {
+        if (deps.selection.isCrossBlock || deps.selection.gapCaret)
+            return null;
+        const focused = deps.getSelection()?.focus;
+        if (focused)
+            return { path: focused.path, offset: focused.offset };
+        const sel = window.getSelection();
+        const node = sel?.focusNode;
+        if (!node || !deps.editorEl?.contains(node) || deps.isHostChrome(node))
+            return null;
+        const el = node instanceof Element ? node : node.parentElement;
+        const path = findSurfacePathForElement(el);
+        if (!path)
+            return null;
+        const contentEl = deps.getBlockElByPath(path);
+        if (!contentEl?.contains(node))
+            return null;
+        const offset = toClampedRawOffset(domTextOffsetAtNode(contentEl, node, sel.focusOffset), ambientLengthOf(contentEl));
+        return { path, offset };
+    }
+    // A post-tick focus like every structural op's; the road clamps the saved offset into the
+    // destination mode's landable range. Yielding to a focused text-entry surface keeps the
+    // restore from stealing a host field mid-typing.
+    async function restoreAfterFlush(caret, to) {
+        await tick();
+        if (deps.mode !== to || isTextEntrySurface(document.activeElement))
+            return;
+        await deps.restoreCaret(caret.path, caret.offset);
+    }
+    return {
+        beforeFlip(to) {
+            if (to === preFlipSeenMode)
+                return;
+            const from = preFlipSeenMode;
+            preFlipSeenMode = to;
+            // Reading keeps its entry snapshot: it has no caret of its own to recapture on the way out.
+            if (from !== 'reading')
+                flipCaret = captureCaret();
+            // A flip is a blur-class event: a live reveal or composition folds through the existing
+            // blur choke point. Host chrome is exempt, or a mode toggle blurs a title field mid-edit.
+            const active = document.activeElement;
+            if (active instanceof HTMLElement &&
+                deps.editorEl?.contains(active) &&
+                !deps.isHostChrome(active)) {
+                active.blur();
+                // A blur the editor performs announces the selection it drops: the document listener
+                // only reports a range the browser still anchors in the root, and this one is gone.
+                deps.events.emit('selectionChange', deps.getSelection());
+            }
+        },
+        afterFlip(to) {
+            if (to === lastEffectiveMode)
+                return;
+            lastEffectiveMode = to;
+            // Which markers paint just changed: a side recorded against the old geometry no longer
+            // names the offset the user meant, and every measured height is the other mode's. Not
+            // paired with a width bump, since the flip has blurred and a rebuild would lose the pin.
+            deps.edgeAffinity.reset();
+            deps.heightOracle.dropMeasured();
+            if (to === 'reading') {
+                // The gap is an editor-owned caret no DOM blur can reach, so the flip clears it
+                // rather than each arrival path.
+                deps.selection.clearGapCaret();
+            }
+            else if (flipCaret) {
+                const caret = flipCaret;
+                flipCaret = null;
+                void restoreAfterFlush(caret, to);
+            }
+            deps.events.emit('presentationModeChange', to);
+        }
+    };
+}

package/dist/components/image/ImageOverlayHost.svelte

@@ -41,6 +41,8 @@
 	} = $props();
 
 	let imageOverlayEl: HTMLDivElement | undefined = $state();
+	// The crop session owns the pointer over the image; the resize grip steps aside meanwhile.
+	let cropping = $state(false);
 
 	const linkRef = getContext<EditorDoc | undefined>(EDITOR_DOC_KEY)?.linkRef;
 
@@ -95,19 +97,25 @@
 	{@const ctx = imageEdit.getSelectedImageFields()}
 	{#if ctx?.widgetEl}
 		<div bind:this={imageOverlayEl} class="md-image-overlay" data-image-overlay>
-			<ImageResizeHandles
-				getWidgetEl={() => imageEdit.getSelectedImageFields()?.widgetEl ?? null}
-				editorContentWidth={imageEdit.getEditorContentWidth()}
-				editorEvents={events}
-				onCommit={imageEdit.commitImageResize}
-			/>
+			{#if !cropping}
+				<ImageResizeHandles
+					getWidgetEl={() => imageEdit.getSelectedImageFields()?.widgetEl ?? null}
+					editorContentWidth={imageEdit.getEditorContentWidth()}
+					editorEvents={events}
+					onCommit={imageEdit.commitImageResize}
+				/>
+			{/if}
 			{#key `${sel.paragraphPath.join(',')}@${sel.sourceStart}`}
 				<ImageProperties
 					target={sel}
 					fields={imageFieldsFromInline(ctx.image)}
+					getWidgetEl={() => imageEdit.getSelectedImageFields()?.widgetEl ?? null}
 					buildBytes={imageEdit.buildEditBytes}
 					onCommit={imageEdit.commitImageEdit}
+					onRemove={imageEdit.removeImage}
 					onDismiss={imageEdit.dismissImagePopover}
+					maxFrameWidth={imageEdit.getEditorContentWidth}
+					bind:cropping
 				/>
 			{/key}
 		</div>