From d44cc7f1e7380753909540c0e29634d316cbc02d Mon Sep 17 00:00:00 2001
From: Johannes <info@johannesmutter.de>
Date: Tue, 21 Jul 2026 22:19:25 +0200
Subject: [PATCH 1/5] fix: don't scroll annotations into view that are already
 in view in the browser.

---
 src/lib/Svedit.svelte | 65 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 61 insertions(+), 4 deletions(-)

diff --git a/src/lib/Svedit.svelte b/src/lib/Svedit.svelte
index 812cdf8b..81197955 100644
--- a/src/lib/Svedit.svelte
+++ b/src/lib/Svedit.svelte
@@ -1281,10 +1281,26 @@ ${fallback_html}`;
 	 */
 	function __intersects_viewport(el: Element | null | undefined): boolean {
 		if (!el) return false;
-		const r = el.getBoundingClientRect();
+		return __rect_intersects_viewport(el.getBoundingClientRect());
+	}
+
+	/** True when any part of the rect overlaps the window viewport. */
+	function __rect_intersects_viewport(r: DOMRect): boolean {
 		return r.bottom > 0 && r.top < window.innerHeight && r.right > 0 && r.left < window.innerWidth;
 	}
 
+	/**
+	 * Minimal window-scroll delta that brings the span [start, end] into the
+	 * viewport axis [0, viewport_size] with a bit of breathing room. 0 when
+	 * no scroll is needed.
+	 */
+	function __scroll_delta(start: number, end: number, viewport_size: number): number {
+		const margin = 32;
+		if (start < margin) return start - margin;
+		if (end > viewport_size - margin) return end - (viewport_size - margin);
+		return 0;
+	}
+
 	function __render_node_selection() {
 		const selection = session.selection as NodeSelection;
 		const node_array_path = selection.path;
@@ -1512,11 +1528,52 @@ ${fallback_html}`;
 				focus_node_offset
 			);
 
-			// Scroll the rendered selection into view. Capture the target now:
-			// the browser selection is live and may be cleared before this
-			// deferred callback runs, e.g. when app UI focuses an external input.
+			// Scroll the cursor into view, but only when no part of the rendered
+			// selection is on screen — an unconditional scroll would yank the
+			// viewport on every re-render (e.g. annotation toggles). Capture the
+			// nodes now: the browser selection is live and may be cleared before
+			// this deferred callback runs, e.g. when app UI focuses an external
+			// input.
 			const selected_element = focus_node.parentElement;
 			setTimeout(() => {
+				try {
+					if (anchor_node.isConnected && focus_node.isConnected) {
+						const range = window.document.createRange();
+						if (is_backward) {
+							range.setStart(focus_node, focus_node_offset);
+							range.setEnd(anchor_node, anchor_node_offset);
+						} else {
+							range.setStart(anchor_node, anchor_node_offset);
+							range.setEnd(focus_node, focus_node_offset);
+						}
+						if (__rect_intersects_viewport(range.getBoundingClientRect())) return;
+
+						// Off-screen: reveal the cursor rect itself. The fallback
+						// below scrolls the focus node's parent — for unannotated
+						// text that is the whole text property, where 'nearest' on
+						// an element taller than the viewport merely aligns its
+						// closest edge, possibly far from the cursor (e.g. undo of
+						// an edit near the start of a long text). scrollIntoView
+						// first so inner scroll containers reveal the element, then
+						// correct the window scroll by the cursor's remaining
+						// offset.
+						range.collapse(is_backward); // cursor sits at the focus end
+						const rect = range.getBoundingClientRect();
+						// A zero rect means the range collapsed at an element offset
+						// (empty text) — no cursor geometry, use the fallback.
+						if (rect.height > 0) {
+							selected_element?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+							const moved = range.getBoundingClientRect();
+							const dx = __scroll_delta(moved.left, moved.right, window.innerWidth);
+							const dy = __scroll_delta(moved.top, moved.bottom, window.innerHeight);
+							if (dx || dy) window.scrollBy(dx, dy);
+							return;
+						}
+					}
+				} catch {
+					// Offsets can go stale if the DOM changed since capture —
+					// fall through to the coarse scroll below.
+				}
 				if (selected_element?.isConnected) {
 					selected_element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 				}

From 406e71f3bcbfb13c0d06cca38009f39b8d898b52 Mon Sep 17 00:00:00 2001
From: Johannes <info@johannesmutter.de>
Date: Wed, 22 Jul 2026 02:01:26 +0200
Subject: [PATCH 2/5] Mobile editing: app-shell layout with reliable caret
 visibility

- App shell while editing: locked document, nested scroller, toolbar as
  grid layer pinned above the keyboard (stable, no JS position tracking)
- Tap caret preempt at the selectionchange commit: lands the caret
  centered in the predicted visible band; a short scroll guard
  re-asserts against iOS reveals computed from transient viewport
  geometry
- Remove interactive-widget=resizes-content: iOS 26 half-engages it and
  resizes the layout viewport mid-gesture; layout-resizing platforms
  are detected at runtime instead and left to the OS
- inputmode defaults to text when no selection exists, so taps during
  hydration still summon the keyboard
- .svedit is the containing block for markers and overlays, so they
  scroll on the compositor with the content instead of lagging a frame
  behind in nested scrollers
- Cursor reveals are scroller-aware and honor scroll-padding; touch
  node selections fade ::selection to a faint neutral where supported

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app.html                         |  14 +-
 src/lib/Svedit.svelte                | 298 ++++++++++++++++++++++++---
 src/routes/+page.svelte              | 109 ++++++++--
 src/routes/components/Toolbar.svelte |  94 ++++-----
 src/routes/styles/reset.css          |  18 ++
 5 files changed, 427 insertions(+), 106 deletions(-)

diff --git a/src/app.html b/src/app.html
index e6cce395..c72125d4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,10 +3,14 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<!-- interactive-widget=resizes-content makes Chromium and Firefox on Android
-		     resize the layout viewport when the virtual keyboard opens, so the
-		     fixed bottom toolbar stays above the keyboard without JS. iOS Safari
-		     ignores it and is handled via visualViewport in Toolbar.svelte.
+		<!-- No interactive-widget=resizes-content: iOS 26 no longer ignores it
+		     and engages it inconsistently (layout viewport resizing mid-gesture
+		     on refocus taps, breaking the app-shell geometry and blurring the
+		     canvas). Without the token iOS stays in its stable overlay mode
+		     (visual viewport shrinks, layout viewport untouched), which the
+		     app shell + Svedit's keyboard handling are built for. Android
+		     Chrome's default is resizes-content anyway, so Android behavior
+		     is unchanged.
 		     No viewport-fit=cover: it makes env(safe-area-inset-bottom) span
 		     Safari's floating tab bar, pushing the bottom toolbar too far up.
 		     maximum-scale=1 suppresses iOS Safari's auto-zoom when focusing
@@ -15,7 +19,7 @@
 		     Android honors it and blocks pinch zoom. -->
 		<meta
 			name="viewport"
-			content="width=device-width, initial-scale=1, maximum-scale=1, interactive-widget=resizes-content"
+			content="width=device-width, initial-scale=1, maximum-scale=1"
 		/>
 		%sveltekit.head%
 	</head>
diff --git a/src/lib/Svedit.svelte b/src/lib/Svedit.svelte
index 81197955..2acf79ad 100644
--- a/src/lib/Svedit.svelte
+++ b/src/lib/Svedit.svelte
@@ -128,6 +128,115 @@
 		session.initialize_commands(context);
 	});
 
+	// Learn the software keyboard's size once it has been observed, so
+	// tap-time preemption can predict the post-keyboard visible band
+	// before the keyboard opens. Re-learns automatically after rotation or
+	// keyboard changes (the next open updates it).
+	let observed_keyboard_inset = 0;
+
+	// Platforms that resize the LAYOUT viewport for the keyboard (Android
+	// Chrome's default, interactive-widget=resizes-content) reveal the
+	// caret themselves — the preempt must stand down there. iOS 26 also
+	// reports TRANSIENT shrunken innerHeight values around keyboard
+	// presentation that settle back within a few hundred ms, so a single
+	// observation must not latch: the shrunken state has to persist for a
+	// second before we conclude the platform truly resizes its layout
+	// viewport.
+	let layout_viewport_resizes = false;
+	let inner_height_at_focus = 0;
+	let layout_resize_latch_timeout: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => {
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const measure = () => {
+			const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);
+			if (inset > 150) observed_keyboard_inset = inset;
+			const inner_height_shrunk =
+				canvas_focused && window.innerHeight < inner_height_at_focus - 150;
+			if (inner_height_shrunk && !layout_resize_latch_timeout && !layout_viewport_resizes) {
+				layout_resize_latch_timeout = setTimeout(() => {
+					layout_resize_latch_timeout = undefined;
+					if (canvas_focused && window.innerHeight < inner_height_at_focus - 150) {
+						layout_viewport_resizes = true;
+					}
+				}, 1000);
+			}
+		};
+		measure();
+		vv.addEventListener('resize', measure);
+		return () => {
+			vv.removeEventListener('resize', measure);
+			clearTimeout(layout_resize_latch_timeout);
+			layout_resize_latch_timeout = undefined;
+		};
+	});
+
+	// Tap cursor safeguarding on touch, for app-shell layouts (nested
+	// scroller, unscrollable document). There, iOS neither scrolls the
+	// document nor reveals carets into nested scroll containers — nobody
+	// scrolls, so a tap in the keyboard's future territory would leave the
+	// caret hidden. Timing is everything:
+	// - later (debounced, mid-presentation) kills the keyboard;
+	// - at click time it corrupts the tap — iOS commits the caret AFTER
+	//   click, re-hit-testing the stored tap point against the shifted
+	//   layout, which can land on a node (inputmode none, no keyboard);
+	// - HERE, synchronously at the selectionchange that commits the
+	//   DOM-driven caret, the caret is anchored to its text and the
+	//   presentation has barely begun. Scroll the container so the caret
+	//   line ends up just above the predicted keyboard + floating-UI band
+	//   (scroll-padding). One owned movement, no corrections, and carets
+	//   that stay visible move nothing.
+	function __preempt_keyboard_occlusion() {
+		if (!editable) return;
+		if (!window.matchMedia('(pointer: coarse)').matches) return;
+		if (layout_viewport_resizes) return;
+		const vv = window.visualViewport;
+		const inset_now = vv ? Math.round(window.innerHeight - vv.height - vv.offsetTop) : 0;
+		// With the keyboard already up, taps land on visible text, and
+		// caret drags must never be fought — only act before it exists.
+		if (inset_now > 150) return;
+		const container = __get_scroll_container(canvas_el ?? null);
+		// Without a nested scroller the document scrolls and the OS owns
+		// the reveal — stay out of its way.
+		if (!container) return;
+		const dom_selection = window.getSelection();
+		if (!dom_selection?.rangeCount || !dom_selection.focusNode) return;
+		const caret_rect = __get_caret_rect(dom_selection.focusNode, dom_selection.focusOffset);
+		if (!caret_rect) return;
+		// Keyboard size is learned once observed; before the first opening
+		// assume half the screen.
+		const predicted_inset = observed_keyboard_inset || Math.round(window.innerHeight * 0.5);
+		const scroller_style = getComputedStyle(container);
+		const pad_bottom = parseFloat(scroller_style.scrollPaddingBottom) || 0;
+		const pad_top = parseFloat(scroller_style.scrollPaddingTop) || 0;
+		const band_bottom = window.innerHeight - predicted_inset - pad_bottom;
+		// Half a line of headroom so the caret line clears the band fully.
+		const caret_bottom = caret_rect.bottom + 8;
+		if (caret_bottom <= band_bottom) return;
+		// Land in the CENTER of the predicted visible band, not at its
+		// edge: iOS nudges the scroller back by up to ~300px during its
+		// transient keyboard reflows, and an edge-parked caret slides
+		// straight under the toolbar. Center placement absorbs the nudge.
+		const target_y = (pad_top + band_bottom) / 2;
+		container.scrollTop += Math.round(caret_rect.top + caret_rect.height / 2 - target_y);
+		// iOS may stomp the scroller right after: its own reveal runs
+		// against transient viewport geometry (panned visual viewport,
+		// briefly shrunken innerHeight) that snaps back a moment later,
+		// leaving the caret behind the keyboard. Our position is computed
+		// against the settled geometry, so hold it through the
+		// presentation window — re-assert immediately on any foreign
+		// scroll, then stand down.
+		const target_scroll_top = container.scrollTop;
+		const guard = () => {
+			if (Math.abs(container.scrollTop - target_scroll_top) > 1) {
+				container.scrollTop = target_scroll_top;
+			}
+		};
+		container.addEventListener('scroll', guard);
+		setTimeout(() => container.removeEventListener('scroll', guard), 800);
+	}
+
 	/**
 	 * @param {InputEvent} event
 	 */
@@ -326,6 +435,9 @@
 			if (JSON.stringify(selection) === JSON.stringify(session.selection)) return;
 			selection_source_is_dom = true;
 			session.selection = selection;
+			if (selection.type === 'text' && selection.anchor_offset === selection.focus_offset) {
+				__preempt_keyboard_occlusion();
+			}
 		}
 	}
 
@@ -891,6 +1003,7 @@ ${fallback_html}`;
 
 	// Handle focus - push session's keymap onto stack
 	function handle_canvas_focus() {
+		inner_height_at_focus = window.innerHeight;
 		// Use flushSync so highlight spans are removed from the DOM
 		// immediately, before the browser processes the click's selection.
 		flushSync(() => {
@@ -1290,17 +1403,101 @@ ${fallback_html}`;
 	}
 
 	/**
-	 * Minimal window-scroll delta that brings the span [start, end] into the
-	 * viewport axis [0, viewport_size] with a bit of breathing room. 0 when
-	 * no scroll is needed.
+	 * Screen rect of the cursor position at (node, offset), or null when
+	 * no geometry is available (element offsets, e.g. empty text). A
+	 * collapsed range's own getBoundingClientRect is empty on Safari, so
+	 * when it comes back zero-height we measure the adjacent character
+	 * and return its matching edge as a zero-width caret rect.
+	 */
+	function __get_caret_rect(node: Node, offset: number): DOMRect | null {
+		const range = window.document.createRange();
+		range.setStart(node, offset);
+		range.collapse(true);
+		const rect = range.getBoundingClientRect();
+		if (rect.height > 0) return rect;
+		if (node instanceof Text) {
+			if (offset < node.length) {
+				range.setEnd(node, offset + 1);
+				const after = range.getBoundingClientRect();
+				if (after.height > 0) return new DOMRect(after.left, after.top, 0, after.height);
+			}
+			if (offset > 0) {
+				range.setStart(node, offset - 1);
+				range.setEnd(node, offset);
+				const before = range.getBoundingClientRect();
+				if (before.height > 0) return new DOMRect(before.right, before.top, 0, before.height);
+			}
+		}
+		return null;
+	}
+
+	/**
+	 * Minimal scroll delta that brings the span [start, end] into the
+	 * viewport axis [min, max] with a bit of breathing room. 0 when no
+	 * scroll is needed.
 	 */
-	function __scroll_delta(start: number, end: number, viewport_size: number): number {
+	function __scroll_delta(start: number, end: number, min: number, max: number): number {
 		const margin = 32;
-		if (start < margin) return start - margin;
-		if (end > viewport_size - margin) return end - (viewport_size - margin);
+		if (start < min + margin) return start - (min + margin);
+		if (end > max - margin) return end - (max - margin);
 		return 0;
 	}
 
+	/**
+	 * Nearest ancestor that actually scrolls. Null when the window (the
+	 * document itself) is the scroller.
+	 */
+	function __get_scroll_container(el: Element | null): HTMLElement | null {
+		let current = el?.parentElement ?? null;
+		while (current && current !== window.document.body) {
+			const style = getComputedStyle(current);
+			if (
+				/(auto|scroll)/.test(style.overflowY + style.overflowX) &&
+				(current.scrollHeight > current.clientHeight || current.scrollWidth > current.clientWidth)
+			) {
+				return current;
+			}
+			current = current.parentElement;
+		}
+		return null;
+	}
+
+	/**
+	 * The band a cursor must sit in to count as visible: the window
+	 * viewport intersected with the visual viewport (the software keyboard
+	 * shrinks it — a platform fact, read fresh here so no app wiring can
+	 * go stale) and the scroll container (when any), inset by the
+	 * scroller's declared scroll-padding (floating app UI like toolbars —
+	 * an app fact, measured from the visual viewport's edges).
+	 */
+	function __get_reveal_bounds(container: HTMLElement | null) {
+		const scroller_style = getComputedStyle(
+			container ?? window.document.scrollingElement ?? window.document.documentElement
+		);
+		const rect = container?.getBoundingClientRect();
+		const vv = window.visualViewport;
+		return {
+			min_x:
+				Math.max(rect?.left ?? 0, 0, vv?.offsetLeft ?? 0) +
+				(parseFloat(scroller_style.scrollPaddingLeft) || 0),
+			max_x:
+				Math.min(
+					rect?.right ?? Infinity,
+					window.innerWidth,
+					vv ? vv.offsetLeft + vv.width : Infinity
+				) - (parseFloat(scroller_style.scrollPaddingRight) || 0),
+			min_y:
+				Math.max(rect?.top ?? 0, 0, vv?.offsetTop ?? 0) +
+				(parseFloat(scroller_style.scrollPaddingTop) || 0),
+			max_y:
+				Math.min(
+					rect?.bottom ?? Infinity,
+					window.innerHeight,
+					vv ? vv.offsetTop + vv.height : Infinity
+				) - (parseFloat(scroller_style.scrollPaddingBottom) || 0)
+		};
+	}
+
 	function __render_node_selection() {
 		const selection = session.selection as NodeSelection;
 		const node_array_path = selection.path;
@@ -1546,28 +1743,55 @@ ${fallback_html}`;
 							range.setStart(anchor_node, anchor_node_offset);
 							range.setEnd(focus_node, focus_node_offset);
 						}
-						if (__rect_intersects_viewport(range.getBoundingClientRect())) return;
+						// Visibility and correction both use the reveal band: the
+						// scroller's viewport clamped by the visual viewport
+						// (keyboard) minus its declared scroll-padding (floating
+						// UI). Cursor geometry comes from __get_caret_rect — a
+						// collapsed range's own rect is empty on Safari, so a
+						// plain getBoundingClientRect would misreport every caret.
+						const container = __get_scroll_container(selected_element ?? null);
+						const bounds = __get_reveal_bounds(container);
+						const guard_rect = range.collapsed
+							? __get_caret_rect(focus_node, focus_node_offset)
+							: range.getBoundingClientRect();
+						// Any part of the rendered selection inside the band
+						// counts as visible — keep the viewport stable then.
+						if (
+							guard_rect &&
+							guard_rect.bottom > bounds.min_y &&
+							guard_rect.top < bounds.max_y &&
+							guard_rect.right > bounds.min_x &&
+							guard_rect.left < bounds.max_x
+						) {
+							return;
+						}
 
-						// Off-screen: reveal the cursor rect itself. The fallback
+						// Off-band: reveal the cursor rect itself. The fallback
 						// below scrolls the focus node's parent — for unannotated
 						// text that is the whole text property, where 'nearest' on
 						// an element taller than the viewport merely aligns its
 						// closest edge, possibly far from the cursor (e.g. undo of
 						// an edit near the start of a long text). scrollIntoView
-						// first so inner scroll containers reveal the element, then
-						// correct the window scroll by the cursor's remaining
-						// offset.
-						range.collapse(is_backward); // cursor sits at the focus end
-						const rect = range.getBoundingClientRect();
-						// A zero rect means the range collapsed at an element offset
-						// (empty text) — no cursor geometry, use the fallback.
-						if (rect.height > 0) {
+						// first so nested scroll containers reveal the element,
+						// then correct the owning scroller by the cursor's
+						// remaining offset. No caret rect (element offset, e.g.
+						// empty text) means no cursor geometry — coarse fallback.
+						if (__get_caret_rect(focus_node, focus_node_offset)) {
 							selected_element?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-							const moved = range.getBoundingClientRect();
-							const dx = __scroll_delta(moved.left, moved.right, window.innerWidth);
-							const dy = __scroll_delta(moved.top, moved.bottom, window.innerHeight);
-							if (dx || dy) window.scrollBy(dx, dy);
-							return;
+							const moved = __get_caret_rect(focus_node, focus_node_offset);
+							if (moved) {
+								const dx = __scroll_delta(moved.left, moved.right, bounds.min_x, bounds.max_x);
+								const dy = __scroll_delta(moved.top, moved.bottom, bounds.min_y, bounds.max_y);
+								if (dx || dy) {
+									if (container) {
+										container.scrollLeft += dx;
+										container.scrollTop += dy;
+									} else {
+										window.scrollBy(dx, dy);
+									}
+								}
+								return;
+							}
 						}
 					}
 				} catch {
@@ -1684,14 +1908,18 @@ ${fallback_html}`;
 	{#if editable}<NodeSelectionMarkers />{/if}
 	{#if Overlays}<Overlays />{/if}
 	<!--
-		inputmode is derived from the model selection: when a custom property
-		(image, embed, etc.) is selected, set inputmode="none" so iOS does
-		not open the virtual keyboard. For any other selection (text, node,
-		none), allow the keyboard via inputmode="text". The browser's native
-		selection-change flow updates session.selection on tap, which flips
-		this attribute before iOS decides whether to show the keyboard — no
-		imperative state tracking, drag detection, or click/pointerdown
-		handlers are required for keyboard suppression.
+		inputmode is derived from the model selection: node and property
+		selections set inputmode="none" so iOS does not open the virtual
+		keyboard for them. Text selections — and crucially NO selection —
+		allow the keyboard via inputmode="text": the no-selection state is
+		what the server renders and what a tap lands on before hydration,
+		and iOS ignores inputmode changes on an already-focused element, so
+		defaulting to "none" would leave an early tap keyboard-less until
+		the next blur/refocus. The browser's native selection-change flow
+		updates session.selection on tap, which flips this attribute before
+		iOS decides whether to show the keyboard — no imperative state
+		tracking, drag detection, or click/pointerdown handlers are
+		required for keyboard suppression.
 	-->
 	<div
 		class="svedit-canvas {css_class}"
@@ -1705,7 +1933,7 @@ ${fallback_html}`;
 		{oncompositionend}
 		onfocus={handle_canvas_focus}
 		onblur={handle_canvas_blur}
-		inputmode={session.selection?.type === 'text' ? 'text' : 'none'}
+		inputmode={!session.selection || session.selection.type === 'text' ? 'text' : 'none'}
 		contenteditable={editable ? 'true' : 'false'}
 		tabindex="-1"
 		{autocapitalize}
@@ -1725,6 +1953,16 @@ ${fallback_html}`;
 </div>
 
 <style>
+	.svedit {
+		/* Containing block for the anchor-positioned markers and overlays
+		   rendered alongside the canvas. With it inside the scroll content
+		   they scroll natively with the content on the compositor; without
+		   it their containing block is the viewport, and in nested-scroller
+		   layouts they would only move via main-thread anchor re-snapshots
+		   — one frame behind the scroll, visibly lagging. */
+		position: relative;
+	}
+
 	.svedit-canvas {
 		caret-color: var(--svedit-caret-color);
 		caret-shape: bar;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 81f93da0..dc5ff85b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -71,34 +71,115 @@
 		'meta+s,ctrl+s': [app_commands.save_document]
 	});
 	key_mapper.push_scope(app_key_map);
+
+	let scroller_el: HTMLElement | undefined = $state();
+
+	// App-shell geometry, engaged only while editing. In read mode the
+	// document scrolls normally, so mobile browser chrome (address bar)
+	// can minimize and visitors get regular web-page behavior. While
+	// editing, the document never scrolls (see .app-shell-mode in
+	// reset.css): the canvas scrolls in a nested full-height container so
+	// content stays visible behind the software keyboard, and the toolbar
+	// layer rides above the keyboard via --keyboard-inset. iOS overlays
+	// the keyboard without resizing the layout viewport, so the inset must
+	// be measured from the visual viewport; browsers honoring
+	// interactive-widget=resizes-content resize the layout viewport and
+	// keep it at 0.
+	$effect(() => {
+		if (!editable) return;
+		// Engage the shell without losing the reading position: capture the
+		// document scroll before the class flip collapses the document to
+		// viewport height, then hand it to the inner scroller.
+		const read_scroll = window.scrollY;
+		document.documentElement.classList.add('app-shell-mode');
+		if (scroller_el) scroller_el.scrollTop = read_scroll;
+		const vv = window.visualViewport;
+		const update = () => {
+			if (vv) {
+				const inset = Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop));
+				document.documentElement.style.setProperty('--keyboard-inset', `${inset}px`);
+			}
+			// iOS still nudges the window when focusing near the keyboard,
+			// even though the document has nothing to scroll — pin it back.
+			if (window.scrollX !== 0 || window.scrollY !== 0) window.scrollTo(0, 0);
+		};
+		update();
+		vv?.addEventListener('resize', update);
+		vv?.addEventListener('scroll', update);
+		window.addEventListener('scroll', update);
+		return () => {
+			vv?.removeEventListener('resize', update);
+			vv?.removeEventListener('scroll', update);
+			window.removeEventListener('scroll', update);
+			// Hand the scroll position back to the document on exit.
+			const shell_scroll = scroller_el?.scrollTop ?? 0;
+			document.documentElement.classList.remove('app-shell-mode');
+			document.documentElement.style.removeProperty('--keyboard-inset');
+			window.scrollTo(0, shell_scroll);
+		};
+	});
 </script>
 
 <svelte:head>
 	<title>Svedit - A tiny library for building editable websites in Svelte</title>
 </svelte:head>
 
-<div class="demo-wrapper" bind:this={app_el}>
-	<Svedit {session} bind:editable bind:this={svedit_ref} path={[session.doc.document_id]} />
+<div class="app-shell" bind:this={app_el}>
+	<div class="app-scroller" bind:this={scroller_el}>
+		<Svedit {session} bind:editable bind:this={svedit_ref} path={[session.doc.document_id]} />
+
+		{#if editable}
+			<div class="debug-panel-wrapper">
+				<div class="debug-panel-shell flex-column gap-y-2 w-full max-w-screen-lg mx-auto">
+					<p>Selection:</p>
+					<pre class="debug-info">{JSON.stringify(session.selection || {}, null, '  ')}</pre>
+					<p style="padding-top: 36px;">Document:</p>
+					<pre class="debug-info">{JSON.stringify(session.doc, null, '  ')}</pre>
+				</div>
+			</div>
+		{/if}
+	</div>
 	<!-- The toolbar must render after Svedit: its floating variant is CSS-anchored
 	     to elements inside the canvas, and anchors must precede the positioned
-	     element in DOM order to be resolvable. -->
+	     element in DOM order to be resolvable. The bottom toolbar is a layer in
+	     the shell's single-cell grid, pinned above the keyboard via
+	     --keyboard-inset; the scroller's scroll-padding (fed by the measured
+	     --toolbar-height) keeps revealed carets clear of it. -->
 	<Toolbar {session} {focus_canvas} bind:editable />
-
-	{#if editable}
-		<div class="debug-panel-wrapper">
-			<div class="debug-panel-shell flex-column gap-y-2 w-full max-w-screen-lg mx-auto">
-				<p>Selection:</p>
-				<pre class="debug-info">{JSON.stringify(session.selection || {}, null, '  ')}</pre>
-				<p style="padding-top: 36px;">Document:</p>
-				<pre class="debug-info">{JSON.stringify(session.doc, null, '  ')}</pre>
-			</div>
-		</div>
-	{/if}
 </div>
 
 <svelte:window onkeydown={key_mapper.handle_keydown.bind(key_mapper)} />
 
 <style>
+	/* Read mode: .app-shell and .app-scroller are plain wrappers, the
+	   document scrolls, browser chrome minimizes as usual. The rules below
+	   only engage while editing (.app-shell-mode on the root). */
+	:global(:root.app-shell-mode) .app-shell {
+		height: 100dvh;
+		/* Single-cell grid: scroller and toolbar occupy the same cell as
+		   layers — the scroller runs the full height so content stays
+		   visible behind the (translucent) keyboard, the toolbar pins
+		   itself above the keyboard via --keyboard-inset. */
+		display: grid;
+		grid-template-rows: 1fr;
+		grid-template-columns: 1fr;
+	}
+
+	:global(:root.app-shell-mode) .app-scroller {
+		grid-area: 1 / 1;
+		min-height: 0;
+		overflow-y: auto;
+		/* Keep inner overscroll from chaining into the unscrollable body */
+		overscroll-behavior: contain;
+		scroll-padding-top: var(--s-4);
+		/* The band covered by the floating toolbar, whatever height it
+		   currently has (it measures itself into --toolbar-height).
+		   Svedit's cursor reveal honors this and handles the keyboard
+		   itself via the visual viewport, so the keyboard inset must NOT
+		   be added here. */
+		scroll-padding-bottom: calc(var(--toolbar-height, 0px) + var(--s-4));
+	}
+
 	.debug-panel-wrapper {
 		padding-block: var(--s-10);
 		/*background: color-mix(in oklch, var(--app-canvas-fill) 94%, var(--app-primary-text));*/
diff --git a/src/routes/components/Toolbar.svelte b/src/routes/components/Toolbar.svelte
index 30c8806b..f01784cc 100644
--- a/src/routes/components/Toolbar.svelte
+++ b/src/routes/components/Toolbar.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
 	import { serialize_path } from 'svedit';
 	import Icon from './Icon.svelte';
 	import NodeNavigator from './NodeNavigator.svelte';
@@ -230,55 +229,25 @@
 		}
 	);
 
-	// Distance the visual viewport bottom sits above the layout viewport
-	// bottom. Chromium and Firefox resize the layout viewport when the
-	// virtual keyboard opens (interactive-widget=resizes-content), so this
-	// stays 0 there. iOS Safari only shrinks and pans the visual viewport,
-	// so the bottom toolbar must be translated up by this inset to stay
-	// visible above the keyboard, also while scrolling.
-	let keyboard_inset = $state(0);
+	// The shell's scroller reserves space for the toolbar through
+	// --toolbar-height in its scroll-padding. Measured, not hardcoded: the
+	// toolbar's height changes with its contextual tools (and may grow to
+	// multiple rows).
+	let bottom_toolbar_el: HTMLElement | undefined = $state();
 
 	$effect(() => {
-		const visual_viewport = window.visualViewport;
-		if (!visual_viewport) return;
-
-		let current = untrack(() => keyboard_inset);
-		let target = current;
-		let raf = 0;
-
-		function measure() {
-			target = Math.max(
-				0,
-				Math.round(window.innerHeight - visual_viewport!.height - visual_viewport!.offsetTop)
-			);
-			if (!raf) raf = requestAnimationFrame(follow);
-		}
-
-		// Exponential follower: large distances (keyboard opening) are covered
-		// within a few frames while the small stale-position corrections that
-		// Safari reports during touch pans get smoothed instead of rendering
-		// as jitter. Speed adapts to the remaining distance by construction.
-		function follow() {
-			raf = 0;
-			const delta = target - current;
-			if (Math.abs(delta) <= 1) {
-				current = target;
-			} else {
-				current += delta * 0.35;
-				raf = requestAnimationFrame(follow);
-			}
-			keyboard_inset = current;
-		}
-
-		measure();
-		visual_viewport.addEventListener('resize', measure);
-		visual_viewport.addEventListener('scroll', measure);
+		if (!bottom_toolbar_el) return;
+		const el = bottom_toolbar_el;
+		const resize_observer = new ResizeObserver(() => {
+			document.documentElement.style.setProperty('--toolbar-height', `${el.offsetHeight}px`);
+		});
+		resize_observer.observe(el);
 		return () => {
-			cancelAnimationFrame(raf);
-			visual_viewport.removeEventListener('resize', measure);
-			visual_viewport.removeEventListener('scroll', measure);
+			resize_observer.disconnect();
+			document.documentElement.style.removeProperty('--toolbar-height');
 		};
 	});
+
 </script>
 
 {#snippet divider()}
@@ -541,7 +510,7 @@
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="editor-toolbar bottom-toolbar"
-	style:--keyboard-inset="{keyboard_inset}px"
+	bind:this={bottom_toolbar_el}
 	onkeydown={handle_toolbar_keydown}
 >
 	<div class="toolbar-scroller">
@@ -652,14 +621,31 @@
 	}
 
 	.bottom-toolbar {
-		position: fixed;
-		/* The safe-area inset already provides clearance above the home
+		/* Read mode: floating Edit pill over the normally-scrolling page.
+		   The safe-area inset already provides clearance above the home
 		   indicator, so take the larger of the two offsets instead of
 		   stacking them. */
+		position: fixed;
 		bottom: max(var(--s-4), env(safe-area-inset-bottom, 0px));
 		right: var(--s-4);
 	}
 
+	:global(:root.app-shell-mode) .bottom-toolbar {
+		/* Edit mode: a layer in the app shell's single-cell grid, pinned
+		   above the software keyboard via --keyboard-inset (0 while it is
+		   closed) — no JS tracking. Content behind it stays visible and
+		   scrollable; the scroller's scroll-padding (fed by the measured
+		   --toolbar-height) keeps revealed carets clear of it. */
+		position: static;
+		grid-area: 1 / 1;
+		align-self: end;
+		justify-self: end;
+		margin: var(--s-2) var(--s-4);
+		margin-bottom: calc(
+			var(--keyboard-inset, 0px) + max(var(--s-4), env(safe-area-inset-bottom, 0px))
+		);
+	}
+
 	@position-try --stay-in-viewport {
 		position-area: none;
 		position-anchor: none;
@@ -701,20 +687,14 @@
 	}
 
 	/* The floating toolbar targets precise mouse interactions. On touch
-	   devices all tools live in the single bottom toolbar instead, so the
-	   virtual keyboard handling only has one element to care about. */
+	   devices all tools live in the single bottom toolbar instead. */
 	@media (hover: none), (pointer: coarse) {
 		.floating-toolbar {
 			display: none;
 		}
 
-		.bottom-toolbar {
-			right: auto;
-			left: 50%;
-			/* No transition here: the keyboard inset updates on every visual
-			   viewport scroll event and easing towards each new value makes
-			   the toolbar visibly lag behind the finger. */
-			transform: translateX(-50%) translateY(calc(-1 * var(--keyboard-inset, 0px)));
+		:global(:root.app-shell-mode) .bottom-toolbar {
+			justify-self: center;
 		}
 
 		/* Hint that more tools are reachable by scrolling */
diff --git a/src/routes/styles/reset.css b/src/routes/styles/reset.css
index 4efaf17c..06d86d7e 100644
--- a/src/routes/styles/reset.css
+++ b/src/routes/styles/reset.css
@@ -58,6 +58,24 @@ html {
 	-webkit-text-size-adjust: 100%;
 }
 
+/*
+App-shell mode (set by the editor page while editing; read mode keeps
+normal document scrolling so browser chrome can minimize): the document
+itself never scrolls — the page is a viewport-sized grid shell where a
+full-height nested scroller holds the canvas (content stays visible
+behind the keyboard) and the toolbar layers above it, pinned over the
+keyboard via --keyboard-inset. With nothing to scroll at the document
+level, cursor visibility is owned entirely by Svedit's reveal, which
+handles the keyboard via the visual viewport and honors the scroller's
+scroll-padding (the measured toolbar height).
+*/
+:root.app-shell-mode,
+.app-shell-mode body {
+	height: 100%;
+	overflow: hidden;
+	overscroll-behavior: none;
+}
+
 /*
 Improve default font consistency.
 -------------------------------

From cd0e9f6b65851006c56b398434dade70391e8ace Mon Sep 17 00:00:00 2001
From: Johannes <info@johannesmutter.de>
Date: Wed, 22 Jul 2026 03:45:42 +0200
Subject: [PATCH 3/5] Simplify shell wiring: first-paint edit mode,
 library-owned keyboard geometry, embed hardening
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Edit mode is server-rendered markup (data-editing on the shell,
  consumed via :has()) instead of a JS-toggled class, so the shell
  layout applies at first paint — kills the load flashes (toolbar
  bottom-right, full-bleed page visibly cropping once hydration
  landed). The scroll handoff splits into an $effect.pre capture
  before the DOM flips and a post-effect apply.
- Svedit owns keyboard geometry: its single visualViewport listener
  learns the keyboard size (pinch-zoom guarded, rotation resets),
  detects layout-resizing platforms via a persistence latch with the
  resizes-content signature, and publishes --svedit-keyboard-inset
  for pure-CSS consumers. Predictive updates at text-selection commit
  and blur let the toolbar glide with the keyboard (iOS spring-like
  easing) instead of hanging mid-screen until the OS reports late.
- Embed hardening: the tap preempt only engages when the document
  itself is unscrollable (app-shell signature) and never in iframes
  without a learned inset; the band clamps to the container box; the
  scroll-container walk is vertical-axis-aware; the stomp guard
  yields to user input; percentage scroll-padding resolves against
  the scrollport; .svedit isolates marker z-indices; a limit-clamped
  container hands residual reveal delta to the window.
- Edit-mode chrome zones are painted by a fixed backdrop (escapes the
  overflow clip without creating scrollability). Percentage height
  chain replaces 100dvh (Safari 26 dvh mis-sizing). viewport-fit=cover
  tried and reverted: device-verified that it does not extend the
  in-browser layout viewport on iOS 26.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app.html                         |   8 +-
 src/lib/Svedit.svelte                | 174 +++++++++++++++++++++++----
 src/routes/+page.svelte              | 103 ++++++++--------
 src/routes/components/Toolbar.svelte |  24 ++--
 src/routes/styles/reset.css          |  52 ++++++--
 5 files changed, 264 insertions(+), 97 deletions(-)

diff --git a/src/app.html b/src/app.html
index c72125d4..db5487d7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -11,8 +11,12 @@
 		     app shell + Svedit's keyboard handling are built for. Android
 		     Chrome's default is resizes-content anyway, so Android behavior
 		     is unchanged.
-		     No viewport-fit=cover: it makes env(safe-area-inset-bottom) span
-		     Safari's floating tab bar, pushing the bottom toolbar too far up.
+		     No viewport-fit=cover: device-verified on iOS 26 that it does NOT
+		     extend the in-browser layout viewport (pages only ever paint
+		     behind Safari's floating chrome via overflowing content — which
+		     the app shell provides with a fixed backdrop, see reset.css), so
+		     cover buys nothing here while making env(safe-area-inset-bottom)
+		     span Safari's floating tab bar and push the bottom toolbar up.
 		     maximum-scale=1 suppresses iOS Safari's auto-zoom when focusing
 		     inputs with a font size below 16px; since iOS 10 Safari ignores it
 		     for user pinch gestures, so zooming stays possible there. Trade-off:
diff --git a/src/lib/Svedit.svelte b/src/lib/Svedit.svelte
index 2acf79ad..4695c1e9 100644
--- a/src/lib/Svedit.svelte
+++ b/src/lib/Svedit.svelte
@@ -146,29 +146,73 @@
 	let inner_height_at_focus = 0;
 	let layout_resize_latch_timeout: ReturnType<typeof setTimeout> | undefined;
 
+	// Published keyboard geometry: the single visualViewport listener below
+	// maintains --svedit-keyboard-inset on the root element, so app UI
+	// (e.g. a bottom toolbar) can pin itself above the software keyboard
+	// with pure CSS — margin-bottom: var(--svedit-keyboard-inset, 0px) —
+	// instead of running listeners of its own. Because the OS reports
+	// keyboard geometry late (often one event at animation end), the value
+	// is also updated PREDICTIVELY on canvas focus/blur; a CSS transition
+	// on the consumer glides over the remaining error.
+	function __publish_keyboard_inset(value: number) {
+		window.document.documentElement.style.setProperty(
+			'--svedit-keyboard-inset',
+			`${Math.max(0, Math.round(value))}px`
+		);
+	}
+
 	$effect(() => {
 		const vv = window.visualViewport;
 		if (!vv) return;
 		const measure = () => {
 			const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);
-			if (inset > 150) observed_keyboard_inset = inset;
+			// Only learn at 1:1 zoom — pinch zoom also shrinks the visual
+			// viewport and would teach a bogus keyboard size.
+			if (vv.scale === 1 && inset > 150) observed_keyboard_inset = inset;
+			// Real measurement corrects the predictive focus/blur values.
+			// Layout-resizing platforms need no offset: their keyboard
+			// already shrinks the layout the toolbar lives in.
+			if (vv.scale === 1) __publish_keyboard_inset(layout_viewport_resizes ? 0 : inset);
 			const inner_height_shrunk =
 				canvas_focused && window.innerHeight < inner_height_at_focus - 150;
 			if (inner_height_shrunk && !layout_resize_latch_timeout && !layout_viewport_resizes) {
 				layout_resize_latch_timeout = setTimeout(() => {
 					layout_resize_latch_timeout = undefined;
-					if (canvas_focused && window.innerHeight < inner_height_at_focus - 150) {
+					// Genuine resizes-content has a signature: the layout
+					// viewport shrank AND no overlay inset remains. A lasting
+					// shrink WITH a large inset (rotation, split screen) is
+					// not the keyboard resizing the layout viewport.
+					const inset_after = Math.round(window.innerHeight - vv.height - vv.offsetTop);
+					if (
+						canvas_focused &&
+						window.innerHeight < inner_height_at_focus - 150 &&
+						inset_after < 150
+					) {
 						layout_viewport_resizes = true;
 					}
 				}, 1000);
 			}
 		};
+		// Rotation invalidates the learned keyboard size and the latch
+		// baseline — start learning from scratch.
+		const reset_learning = () => {
+			layout_viewport_resizes = false;
+			observed_keyboard_inset = 0;
+			inner_height_at_focus = window.innerHeight;
+		};
 		measure();
 		vv.addEventListener('resize', measure);
+		// The inset formula includes offsetTop, which visual-viewport pans
+		// (pinch zoom) change without a resize.
+		vv.addEventListener('scroll', measure);
+		window.addEventListener('orientationchange', reset_learning);
 		return () => {
 			vv.removeEventListener('resize', measure);
+			vv.removeEventListener('scroll', measure);
+			window.removeEventListener('orientationchange', reset_learning);
 			clearTimeout(layout_resize_latch_timeout);
 			layout_resize_latch_timeout = undefined;
+			window.document.documentElement.style.removeProperty('--svedit-keyboard-inset');
 		};
 	});
 
@@ -196,10 +240,17 @@
 		// With the keyboard already up, taps land on visible text, and
 		// caret drags must never be fought — only act before it exists.
 		if (inset_now > 150) return;
+		// App-shell layouts only: a scrollable DOCUMENT means the OS owns
+		// the caret reveal (embedded contexts, plain pages) — acting there
+		// would double-scroll against it. Same for the absence of a nested
+		// vertical scroller.
+		const doc_el = window.document.scrollingElement ?? window.document.documentElement;
+		if (doc_el.scrollHeight - doc_el.clientHeight > 1) return;
 		const container = __get_scroll_container(canvas_el ?? null);
-		// Without a nested scroller the document scrolls and the OS owns
-		// the reveal — stay out of its way.
 		if (!container) return;
+		// Inside iframes the visual viewport never reflects the keyboard —
+		// without a learned size, any prediction would be fiction.
+		if (window !== window.top && !observed_keyboard_inset) return;
 		const dom_selection = window.getSelection();
 		if (!dom_selection?.rangeCount || !dom_selection.focusNode) return;
 		const caret_rect = __get_caret_rect(dom_selection.focusNode, dom_selection.focusOffset);
@@ -208,33 +259,54 @@
 		// assume half the screen.
 		const predicted_inset = observed_keyboard_inset || Math.round(window.innerHeight * 0.5);
 		const scroller_style = getComputedStyle(container);
-		const pad_bottom = parseFloat(scroller_style.scrollPaddingBottom) || 0;
-		const pad_top = parseFloat(scroller_style.scrollPaddingTop) || 0;
-		const band_bottom = window.innerHeight - predicted_inset - pad_bottom;
+		const container_rect = container.getBoundingClientRect();
+		const pad_top = __resolve_scroll_padding(
+			scroller_style.scrollPaddingTop,
+			container.clientHeight
+		);
+		const pad_bottom = __resolve_scroll_padding(
+			scroller_style.scrollPaddingBottom,
+			container.clientHeight
+		);
+		// The predicted band is clamped to the container's own box, so a
+		// scroller that doesn't fill the viewport can never be slammed to
+		// its limit by out-of-band math.
+		const band_top = Math.max(container_rect.top, 0) + pad_top;
+		const band_bottom =
+			Math.min(container_rect.bottom, window.innerHeight - predicted_inset) - pad_bottom;
+		if (band_bottom - band_top < 2 * caret_rect.height) return;
 		// Half a line of headroom so the caret line clears the band fully.
-		const caret_bottom = caret_rect.bottom + 8;
-		if (caret_bottom <= band_bottom) return;
+		if (caret_rect.bottom + 8 <= band_bottom) return;
 		// Land in the CENTER of the predicted visible band, not at its
 		// edge: iOS nudges the scroller back by up to ~300px during its
 		// transient keyboard reflows, and an edge-parked caret slides
 		// straight under the toolbar. Center placement absorbs the nudge.
-		const target_y = (pad_top + band_bottom) / 2;
+		const target_y = (band_top + band_bottom) / 2;
 		container.scrollTop += Math.round(caret_rect.top + caret_rect.height / 2 - target_y);
 		// iOS may stomp the scroller right after: its own reveal runs
 		// against transient viewport geometry (panned visual viewport,
 		// briefly shrunken innerHeight) that snaps back a moment later,
 		// leaving the caret behind the keyboard. Our position is computed
 		// against the settled geometry, so hold it through the
-		// presentation window — re-assert immediately on any foreign
-		// scroll, then stand down.
+		// presentation window — re-assert on any foreign scroll, but yield
+		// immediately to real user input.
 		const target_scroll_top = container.scrollTop;
 		const guard = () => {
 			if (Math.abs(container.scrollTop - target_scroll_top) > 1) {
 				container.scrollTop = target_scroll_top;
 			}
 		};
+		const stop_guard = () => {
+			container.removeEventListener('scroll', guard);
+			container.removeEventListener('touchstart', stop_guard);
+			container.removeEventListener('wheel', stop_guard);
+			container.removeEventListener('pointerdown', stop_guard);
+		};
 		container.addEventListener('scroll', guard);
-		setTimeout(() => container.removeEventListener('scroll', guard), 800);
+		container.addEventListener('touchstart', stop_guard, { passive: true, once: true });
+		container.addEventListener('wheel', stop_guard, { passive: true, once: true });
+		container.addEventListener('pointerdown', stop_guard, { once: true });
+		setTimeout(stop_guard, 800);
 	}
 
 	/**
@@ -436,7 +508,20 @@
 			selection_source_is_dom = true;
 			session.selection = selection;
 			if (selection.type === 'text' && selection.anchor_offset === selection.focus_offset) {
+				// The keyboard is coming (or staying): publish the learned
+				// inset predictively — the OS reports geometry only late in
+				// its animation — so CSS consumers glide in sync. Then keep
+				// the caret visible.
+				if (!layout_viewport_resizes && observed_keyboard_inset) {
+					__publish_keyboard_inset(observed_keyboard_inset);
+				}
 				__preempt_keyboard_occlusion();
+			} else if (selection.type !== 'text') {
+				// Non-text selections mean no keyboard (inputmode none) —
+				// retract any predicted inset so the toolbar never hovers
+				// over a keyboard that isn't coming, and glides down when a
+				// node tap closes an open one without blurring the canvas.
+				__publish_keyboard_inset(0);
 			}
 		}
 	}
@@ -1013,7 +1098,7 @@ ${fallback_html}`;
 	}
 
 	// Handle blur - pop document's keymap from stack.
-	function handle_canvas_blur() {
+	function handle_canvas_blur(event: FocusEvent) {
 		// Use flushSync so the selection highlight span (with its CSS anchor)
 		// is in the DOM immediately, before any popover/dialog tries to
 		// position itself.
@@ -1021,6 +1106,14 @@ ${fallback_html}`;
 			canvas_focused = false;
 		});
 		key_mapper?.pop_scope();
+		// Predictive inset: unless focus moved to another text input (the
+		// keyboard stays up, e.g. a toolbar URL field), the keyboard is
+		// closing — drop the inset immediately so CSS consumers glide down
+		// with it instead of hanging mid-screen until the OS reports.
+		const next = event.relatedTarget as HTMLElement | null;
+		if (!next?.closest('input, textarea, select, [contenteditable="true"]')) {
+			__publish_keyboard_inset(0);
+		}
 	}
 
 	function focus_canvas() {
@@ -1444,17 +1537,16 @@ ${fallback_html}`;
 	}
 
 	/**
-	 * Nearest ancestor that actually scrolls. Null when the window (the
-	 * document itself) is the scroller.
+	 * Nearest ancestor that actually scrolls vertically. Null when the
+	 * window (the document itself) is the scroller. Horizontal-only
+	 * scrollers (carousels, table wrappers) are skipped — vertical cursor
+	 * corrections applied to them would silently do nothing.
 	 */
 	function __get_scroll_container(el: Element | null): HTMLElement | null {
 		let current = el?.parentElement ?? null;
 		while (current && current !== window.document.body) {
 			const style = getComputedStyle(current);
-			if (
-				/(auto|scroll)/.test(style.overflowY + style.overflowX) &&
-				(current.scrollHeight > current.clientHeight || current.scrollWidth > current.clientWidth)
-			) {
+			if (/(auto|scroll)/.test(style.overflowY) && current.scrollHeight > current.clientHeight) {
 				return current;
 			}
 			current = current.parentElement;
@@ -1462,6 +1554,16 @@ ${fallback_html}`;
 		return null;
 	}
 
+	/**
+	 * Computed scroll-padding value → px. 'auto' resolves to 0 and
+	 * percentages resolve against the scrollport size, so host-declared
+	 * percentage padding cannot skew the band math.
+	 */
+	function __resolve_scroll_padding(value: string, scrollport_size: number): number {
+		if (value.endsWith('%')) return ((parseFloat(value) || 0) / 100) * scrollport_size;
+		return parseFloat(value) || 0;
+	}
+
 	/**
 	 * The band a cursor must sit in to count as visible: the window
 	 * viewport intersected with the visual viewport (the software keyboard
@@ -1476,25 +1578,27 @@ ${fallback_html}`;
 		);
 		const rect = container?.getBoundingClientRect();
 		const vv = window.visualViewport;
+		const port_w = container?.clientWidth ?? window.innerWidth;
+		const port_h = container?.clientHeight ?? window.innerHeight;
 		return {
 			min_x:
 				Math.max(rect?.left ?? 0, 0, vv?.offsetLeft ?? 0) +
-				(parseFloat(scroller_style.scrollPaddingLeft) || 0),
+				__resolve_scroll_padding(scroller_style.scrollPaddingLeft, port_w),
 			max_x:
 				Math.min(
 					rect?.right ?? Infinity,
 					window.innerWidth,
 					vv ? vv.offsetLeft + vv.width : Infinity
-				) - (parseFloat(scroller_style.scrollPaddingRight) || 0),
+				) - __resolve_scroll_padding(scroller_style.scrollPaddingRight, port_w),
 			min_y:
 				Math.max(rect?.top ?? 0, 0, vv?.offsetTop ?? 0) +
-				(parseFloat(scroller_style.scrollPaddingTop) || 0),
+				__resolve_scroll_padding(scroller_style.scrollPaddingTop, port_h),
 			max_y:
 				Math.min(
 					rect?.bottom ?? Infinity,
 					window.innerHeight,
 					vv ? vv.offsetTop + vv.height : Infinity
-				) - (parseFloat(scroller_style.scrollPaddingBottom) || 0)
+				) - __resolve_scroll_padding(scroller_style.scrollPaddingBottom, port_h)
 		};
 	}
 
@@ -1786,6 +1890,24 @@ ${fallback_html}`;
 									if (container) {
 										container.scrollLeft += dx;
 										container.scrollTop += dy;
+										// A limit-clamped container can strand the cursor —
+										// hand any residual to the window.
+										const settled = __get_caret_rect(focus_node, focus_node_offset);
+										if (settled) {
+											const rx = __scroll_delta(
+												settled.left,
+												settled.right,
+												bounds.min_x,
+												bounds.max_x
+											);
+											const ry = __scroll_delta(
+												settled.top,
+												settled.bottom,
+												bounds.min_y,
+												bounds.max_y
+											);
+											if (rx || ry) window.scrollBy(rx, ry);
+										}
 									} else {
 										window.scrollBy(dx, dy);
 									}
@@ -1961,6 +2083,10 @@ ${fallback_html}`;
 		   layouts they would only move via main-thread anchor re-snapshots
 		   — one frame behind the scroll, visibly lagging. */
 		position: relative;
+		/* Scope marker/overlay z-indices to the editor so they can never
+		   paint over host page chrome (sticky headers, dropdowns) when
+		   Svedit is embedded in a larger page. */
+		isolation: isolate;
 	}
 
 	.svedit-canvas {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index dc5ff85b..c5161af5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -74,49 +74,43 @@
 
 	let scroller_el: HTMLElement | undefined = $state();
 
-	// App-shell geometry, engaged only while editing. In read mode the
-	// document scrolls normally, so mobile browser chrome (address bar)
-	// can minimize and visitors get regular web-page behavior. While
-	// editing, the document never scrolls (see .app-shell-mode in
-	// reset.css): the canvas scrolls in a nested full-height container so
-	// content stays visible behind the software keyboard, and the toolbar
-	// layer rides above the keyboard via --keyboard-inset. iOS overlays
-	// the keyboard without resizing the layout viewport, so the inset must
-	// be measured from the visual viewport; browsers honoring
-	// interactive-widget=resizes-content resize the layout viewport and
-	// keep it at 0.
+	// App-shell mode, engaged only while editing. In read mode the document
+	// scrolls normally, so mobile browser chrome (address bar) can minimize
+	// and visitors get regular web-page behavior. While editing, the
+	// document never scrolls: the canvas scrolls in a nested full-height
+	// container so content stays visible behind the software keyboard.
+	//
+	// The mode itself is pure markup + CSS: data-editing on the shell div
+	// (server-rendered, so it applies at first paint with no hydration
+	// flash) consumed by :has() selectors in reset.css and the rules
+	// below. Keyboard geometry lives in Svedit, which publishes
+	// --svedit-keyboard-inset for pure-CSS consumers (the toolbar). The
+	// JS below only hands the scroll position across the mode flip and
+	// pins the window while the document is locked.
+	let mode_scroll = 0;
+
+	// Runs BEFORE the DOM flips modes: capture the outgoing mode's scroll
+	// position while it still exists (the flip collapses the document,
+	// respectively dissolves the shell scroller).
+	$effect.pre(() => {
+		mode_scroll = editable ? window.scrollY : (scroller_el?.scrollTop ?? 0);
+	});
+
+	// Runs AFTER the DOM flipped: hand the captured position to the new
+	// scroller. While editing, also pin the window — iOS nudges it when
+	// focusing near the keyboard, even though the locked document has
+	// nothing to scroll.
 	$effect(() => {
-		if (!editable) return;
-		// Engage the shell without losing the reading position: capture the
-		// document scroll before the class flip collapses the document to
-		// viewport height, then hand it to the inner scroller.
-		const read_scroll = window.scrollY;
-		document.documentElement.classList.add('app-shell-mode');
-		if (scroller_el) scroller_el.scrollTop = read_scroll;
-		const vv = window.visualViewport;
-		const update = () => {
-			if (vv) {
-				const inset = Math.max(0, Math.round(window.innerHeight - vv.height - vv.offsetTop));
-				document.documentElement.style.setProperty('--keyboard-inset', `${inset}px`);
-			}
-			// iOS still nudges the window when focusing near the keyboard,
-			// even though the document has nothing to scroll — pin it back.
-			if (window.scrollX !== 0 || window.scrollY !== 0) window.scrollTo(0, 0);
-		};
-		update();
-		vv?.addEventListener('resize', update);
-		vv?.addEventListener('scroll', update);
-		window.addEventListener('scroll', update);
-		return () => {
-			vv?.removeEventListener('resize', update);
-			vv?.removeEventListener('scroll', update);
-			window.removeEventListener('scroll', update);
-			// Hand the scroll position back to the document on exit.
-			const shell_scroll = scroller_el?.scrollTop ?? 0;
-			document.documentElement.classList.remove('app-shell-mode');
-			document.documentElement.style.removeProperty('--keyboard-inset');
-			window.scrollTo(0, shell_scroll);
-		};
+		if (editable) {
+			if (scroller_el) scroller_el.scrollTop = mode_scroll;
+			const pin = () => {
+				if (window.scrollX !== 0 || window.scrollY !== 0) window.scrollTo(0, 0);
+			};
+			pin();
+			window.addEventListener('scroll', pin);
+			return () => window.removeEventListener('scroll', pin);
+		}
+		window.scrollTo(0, mode_scroll);
 	});
 </script>
 
@@ -124,7 +118,7 @@
 	<title>Svedit - A tiny library for building editable websites in Svelte</title>
 </svelte:head>
 
-<div class="app-shell" bind:this={app_el}>
+<div class="app-shell" data-editing={editable} bind:this={app_el}>
 	<div class="app-scroller" bind:this={scroller_el}>
 		<Svedit {session} bind:editable bind:this={svedit_ref} path={[session.doc.document_id]} />
 
@@ -142,9 +136,10 @@
 	<!-- The toolbar must render after Svedit: its floating variant is CSS-anchored
 	     to elements inside the canvas, and anchors must precede the positioned
 	     element in DOM order to be resolvable. The bottom toolbar is a layer in
-	     the shell's single-cell grid, pinned above the keyboard via
-	     --keyboard-inset; the scroller's scroll-padding (fed by the measured
-	     --toolbar-height) keeps revealed carets clear of it. -->
+	     the shell's single-cell grid, pinned above the keyboard via the
+	     Svedit-published --svedit-keyboard-inset; the scroller's scroll-padding
+	     (fed by the measured --toolbar-height) keeps revealed carets clear of
+	     it. -->
 	<Toolbar {session} {focus_canvas} bind:editable />
 </div>
 
@@ -153,25 +148,29 @@
 <style>
 	/* Read mode: .app-shell and .app-scroller are plain wrappers, the
 	   document scrolls, browser chrome minimizes as usual. The rules below
-	   only engage while editing (.app-shell-mode on the root). */
-	:global(:root.app-shell-mode) .app-shell {
-		height: 100dvh;
+	   only engage while editing (data-editing, server-rendered so they
+	   apply at first paint — see reset.css). */
+	.app-shell[data-editing='true'] {
+		/* 100% through the body height chain, not 100dvh — see reset.css */
+		height: 100%;
 		/* Single-cell grid: scroller and toolbar occupy the same cell as
 		   layers — the scroller runs the full height so content stays
 		   visible behind the (translucent) keyboard, the toolbar pins
-		   itself above the keyboard via --keyboard-inset. */
+		   itself above the keyboard via --svedit-keyboard-inset. */
 		display: grid;
 		grid-template-rows: 1fr;
 		grid-template-columns: 1fr;
 	}
 
-	:global(:root.app-shell-mode) .app-scroller {
+	.app-shell[data-editing='true'] .app-scroller {
 		grid-area: 1 / 1;
 		min-height: 0;
 		overflow-y: auto;
 		/* Keep inner overscroll from chaining into the unscrollable body */
 		overscroll-behavior: contain;
-		scroll-padding-top: var(--s-4);
+		/* With viewport-fit=cover the shell renders behind the status bar /
+		   Dynamic Island — keep revealed carets below it. */
+		scroll-padding-top: calc(var(--s-4) + env(safe-area-inset-top, 0px));
 		/* The band covered by the floating toolbar, whatever height it
 		   currently has (it measures itself into --toolbar-height).
 		   Svedit's cursor reveal honors this and handles the keyboard
diff --git a/src/routes/components/Toolbar.svelte b/src/routes/components/Toolbar.svelte
index f01784cc..a78ebccb 100644
--- a/src/routes/components/Toolbar.svelte
+++ b/src/routes/components/Toolbar.svelte
@@ -630,20 +630,30 @@
 		right: var(--s-4);
 	}
 
-	:global(:root.app-shell-mode) .bottom-toolbar {
+	:global(.app-shell[data-editing='true']) .bottom-toolbar {
 		/* Edit mode: a layer in the app shell's single-cell grid, pinned
-		   above the software keyboard via --keyboard-inset (0 while it is
-		   closed) — no JS tracking. Content behind it stays visible and
-		   scrollable; the scroller's scroll-padding (fed by the measured
-		   --toolbar-height) keeps revealed carets clear of it. */
+		   above the software keyboard via the Svedit-published
+		   --svedit-keyboard-inset — pure CSS on this side, no JS tracking.
+		   Content behind it stays visible and scrollable; the scroller's
+		   scroll-padding (fed by the measured --toolbar-height) keeps
+		   revealed carets clear of it. */
 		position: static;
 		grid-area: 1 / 1;
 		align-self: end;
 		justify-self: end;
 		margin: var(--s-2) var(--s-4);
 		margin-bottom: calc(
-			var(--keyboard-inset, 0px) + max(var(--s-4), env(safe-area-inset-bottom, 0px))
+			var(--svedit-keyboard-inset, 0px) + max(var(--s-4), env(safe-area-inset-bottom, 0px))
 		);
+		/* Glide with the keyboard: the OS reports keyboard geometry late
+		   (often one event at animation end), so without a transition the
+		   toolbar hangs mid-screen after the keyboard is gone, then
+		   teleports. Svedit updates the inset predictively on focus/blur;
+		   this transition covers the remainder. Curve and duration
+		   approximate the iOS keyboard spring (fast start, long gentle
+		   tail) — a plain ease-out accelerates past the keyboard and the
+		   reappearing address bar and lands with a visible thud. */
+		transition: margin-bottom 0.45s cubic-bezier(0.32, 0.72, 0, 1);
 	}
 
 	@position-try --stay-in-viewport {
@@ -693,7 +703,7 @@
 			display: none;
 		}
 
-		:global(:root.app-shell-mode) .bottom-toolbar {
+		:global(.app-shell[data-editing='true']) .bottom-toolbar {
 			justify-self: center;
 		}
 
diff --git a/src/routes/styles/reset.css b/src/routes/styles/reset.css
index 06d86d7e..9691ad7a 100644
--- a/src/routes/styles/reset.css
+++ b/src/routes/styles/reset.css
@@ -59,23 +59,51 @@ html {
 }
 
 /*
-App-shell mode (set by the editor page while editing; read mode keeps
-normal document scrolling so browser chrome can minimize): the document
-itself never scrolls — the page is a viewport-sized grid shell where a
-full-height nested scroller holds the canvas (content stays visible
-behind the keyboard) and the toolbar layers above it, pinned over the
-keyboard via --keyboard-inset. With nothing to scroll at the document
-level, cursor visibility is owned entirely by Svedit's reveal, which
-handles the keyboard via the visual viewport and honors the scroller's
-scroll-padding (the measured toolbar height).
-*/
-:root.app-shell-mode,
-.app-shell-mode body {
+App-shell mode (edit mode; read mode keeps normal document scrolling so
+browser chrome can minimize): the document itself never scrolls — the
+page is a viewport-sized grid shell where a full-height nested scroller
+holds the canvas (content stays visible behind the keyboard) and the
+toolbar layers above it, pinned over the keyboard via the
+Svedit-published --svedit-keyboard-inset. With nothing to scroll at the
+document level, cursor visibility is owned entirely by Svedit's reveal.
+
+The mode is carried by server-rendered markup (data-editing on the
+shell) and consumed via :has(), so it applies at FIRST PAINT. A
+JS-toggled class only arrives after hydration, which caused seconds of
+read-mode flashing on load: toolbar bottom-right, full-bleed page that
+visibly "cropped" once the class landed.
+*/
+:root:has(.app-shell[data-editing='true']),
+:root:has(.app-shell[data-editing='true']) body {
 	height: 100%;
 	overflow: hidden;
 	overscroll-behavior: none;
 }
 
+/* Safari only paints behind its floating chrome (status bar, address
+   bar) where page content overflows the layout viewport — the locked
+   shell has no such overflow, which is why those zones showed up as
+   white strips. Paint them with a fixed backdrop instead:
+   position: fixed escapes the html/body overflow clip and never
+   contributes to document scrollability. */
+:root:has(.app-shell[data-editing='true']) body::before {
+	content: '';
+	position: fixed;
+	inset: -200px 0;
+	z-index: -1;
+	background: var(--app-canvas-fill, #fff);
+	pointer-events: none;
+}
+
+/* Height chain from body to the shell (the sveltekit wrapper between them
+   is display:contents and transparent to it). Percentages instead of
+   100dvh: Safari 26 has documented dvh mis-sizing bugs on viewport-sized
+   layouts (bottom gaps), while the percentage chain always matches the
+   layout viewport that Safari itself computed. */
+:root:has(.app-shell[data-editing='true']) .layout-container {
+	height: 100%;
+}
+
 /*
 Improve default font consistency.
 -------------------------------

From afc59a481f4ecf3730148d0cd7044396bcf11dad Mon Sep 17 00:00:00 2001
From: Johannes <info@johannesmutter.de>
Date: Wed, 22 Jul 2026 04:17:49 +0200
Subject: [PATCH 4/5] Chrome zones: document device-verified compositing
 limits, keep tint hook
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove the fixed-overdraw experiment: device-verified that Safari
  composites only root-document overflow behind its floating chrome —
  fixed boxes beyond the layout viewport (backdrop or overdrawing
  shell) never paint there. A locked document can only tint the zones
  via the page background; real content behind the bars while editing
  requires standalone/PWA display. Findings documented in app.html and
  reset.css where the next attempt would start.
- Edit-mode chrome zones tint via --app-chrome-zone-fill (defaults to
  the app canvas fill).
- Reveal-bounds padding stays anchored to the visible edges (one rule,
  errs toward visibility); scroll-padding reads factored into named
  pad_* values.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app.html                | 11 ++++++-----
 src/lib/Svedit.svelte       | 27 ++++++++++++++++++---------
 src/routes/styles/reset.css | 25 ++++++++++++-------------
 3 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/app.html b/src/app.html
index db5487d7..1f2b2cb9 100644
--- a/src/app.html
+++ b/src/app.html
@@ -12,11 +12,12 @@
 		     Chrome's default is resizes-content anyway, so Android behavior
 		     is unchanged.
 		     No viewport-fit=cover: device-verified on iOS 26 that it does NOT
-		     extend the in-browser layout viewport (pages only ever paint
-		     behind Safari's floating chrome via overflowing content — which
-		     the app shell provides with a fixed backdrop, see reset.css), so
-		     cover buys nothing here while making env(safe-area-inset-bottom)
-		     span Safari's floating tab bar and push the bottom toolbar up.
+		     extend the in-browser layout viewport, so it buys nothing here
+		     while making env(safe-area-inset-bottom) span Safari's floating
+		     tab bar and push the bottom toolbar up. Also device-verified:
+		     Safari composites only root-document overflow behind its chrome
+		     — fixed boxes beyond the layout viewport do not paint there, so
+		     a locked app shell can only tint those zones (see reset.css).
 		     maximum-scale=1 suppresses iOS Safari's auto-zoom when focusing
 		     inputs with a font size below 16px; since iOS 10 Safari ignores it
 		     for user pinch gestures, so zooming stays possible there. Trade-off:
diff --git a/src/lib/Svedit.svelte b/src/lib/Svedit.svelte
index 4695c1e9..e82a143d 100644
--- a/src/lib/Svedit.svelte
+++ b/src/lib/Svedit.svelte
@@ -270,7 +270,9 @@
 		);
 		// The predicted band is clamped to the container's own box, so a
 		// scroller that doesn't fill the viewport can never be slammed to
-		// its limit by out-of-band math.
+		// its limit by out-of-band math. The padding subtracts from the
+		// clamped (visible) edges — same rule and same deliberate
+		// conservatism as __get_reveal_bounds.
 		const band_top = Math.max(container_rect.top, 0) + pad_top;
 		const band_bottom =
 			Math.min(container_rect.bottom, window.innerHeight - predicted_inset) - pad_bottom;
@@ -1580,25 +1582,32 @@ ${fallback_html}`;
 		const vv = window.visualViewport;
 		const port_w = container?.clientWidth ?? window.innerWidth;
 		const port_h = container?.clientHeight ?? window.innerHeight;
+		const pad_l = __resolve_scroll_padding(scroller_style.scrollPaddingLeft, port_w);
+		const pad_r = __resolve_scroll_padding(scroller_style.scrollPaddingRight, port_w);
+		const pad_t = __resolve_scroll_padding(scroller_style.scrollPaddingTop, port_h);
+		const pad_b = __resolve_scroll_padding(scroller_style.scrollPaddingBottom, port_h);
+		// The padding subtracts from the VISIBLE edges (box ∩ window ∩
+		// visual viewport). Floating UI like the toolbar is pinned to the
+		// visible bottom (it rides the keyboard inset), so that anchor is
+		// the correct one for it. When a scroller overdraws the viewport
+		// for chrome-zone painting, its box-anchored overdraw share makes
+		// the band slightly conservative — deliberate: one simple rule
+		// that errs toward extra visibility, never toward hiding.
 		return {
-			min_x:
-				Math.max(rect?.left ?? 0, 0, vv?.offsetLeft ?? 0) +
-				__resolve_scroll_padding(scroller_style.scrollPaddingLeft, port_w),
+			min_x: Math.max(rect?.left ?? 0, 0, vv?.offsetLeft ?? 0) + pad_l,
 			max_x:
 				Math.min(
 					rect?.right ?? Infinity,
 					window.innerWidth,
 					vv ? vv.offsetLeft + vv.width : Infinity
-				) - __resolve_scroll_padding(scroller_style.scrollPaddingRight, port_w),
-			min_y:
-				Math.max(rect?.top ?? 0, 0, vv?.offsetTop ?? 0) +
-				__resolve_scroll_padding(scroller_style.scrollPaddingTop, port_h),
+				) - pad_r,
+			min_y: Math.max(rect?.top ?? 0, 0, vv?.offsetTop ?? 0) + pad_t,
 			max_y:
 				Math.min(
 					rect?.bottom ?? Infinity,
 					window.innerHeight,
 					vv ? vv.offsetTop + vv.height : Infinity
-				) - __resolve_scroll_padding(scroller_style.scrollPaddingBottom, port_h)
+				) - pad_b
 		};
 	}
 
diff --git a/src/routes/styles/reset.css b/src/routes/styles/reset.css
index 9691ad7a..4b27a3b5 100644
--- a/src/routes/styles/reset.css
+++ b/src/routes/styles/reset.css
@@ -80,19 +80,18 @@ visibly "cropped" once the class landed.
 	overscroll-behavior: none;
 }
 
-/* Safari only paints behind its floating chrome (status bar, address
-   bar) where page content overflows the layout viewport — the locked
-   shell has no such overflow, which is why those zones showed up as
-   white strips. Paint them with a fixed backdrop instead:
-   position: fixed escapes the html/body overflow clip and never
-   contributes to document scrollability. */
-:root:has(.app-shell[data-editing='true']) body::before {
-	content: '';
-	position: fixed;
-	inset: -200px 0;
-	z-index: -1;
-	background: var(--app-canvas-fill, #fff);
-	pointer-events: none;
+/* The zones behind Safari's floating chrome (status bar, address bar)
+   are painted by Safari itself from the page background — device-
+   verified that NOTHING else reaches them for a locked document: not
+   viewport-fit=cover (does not extend the in-browser layout viewport),
+   not fixed-position boxes overdrawing the viewport (Safari composites
+   only root-document overflow behind its chrome, which is why read
+   mode shows content there and an unscrollable shell cannot). The one
+   in-browser lever is this tint; true content behind the bars while
+   editing needs standalone/PWA display, where no browser chrome exists
+   at all. */
+:root:has(.app-shell[data-editing='true']) body {
+	background: var(--app-chrome-zone-fill, var(--app-canvas-fill, #fff));
 }
 
 /* Height chain from body to the shell (the sveltekit wrapper between them

From 0180d33ce8a71d83ef4057c4662d88e8ef745cdb Mon Sep 17 00:00:00 2001
From: Johannes <info@johannesmutter.de>
Date: Wed, 22 Jul 2026 05:01:15 +0200
Subject: [PATCH 5/5] cleanup

---
 src/lib/Svedit.svelte | 144 ++++++++++++++----------------------------
 1 file changed, 46 insertions(+), 98 deletions(-)

diff --git a/src/lib/Svedit.svelte b/src/lib/Svedit.svelte
index e82a143d..209caa7a 100644
--- a/src/lib/Svedit.svelte
+++ b/src/lib/Svedit.svelte
@@ -128,23 +128,25 @@
 		session.initialize_commands(context);
 	});
 
-	// Learn the software keyboard's size once it has been observed, so
-	// tap-time preemption can predict the post-keyboard visible band
-	// before the keyboard opens. Re-learns automatically after rotation or
-	// keyboard changes (the next open updates it).
+	// Learn the software keyboard's size once it has been observed, so the
+	// tap preempt can predict the post-keyboard visible band before the
+	// keyboard opens, and the toolbar glide (__publish_keyboard_inset) can
+	// move to the right place instead of a guess. Overwritten on every
+	// observation, so rotation or keyboard changes self-correct at the
+	// next opening.
 	let observed_keyboard_inset = 0;
 
-	// Platforms that resize the LAYOUT viewport for the keyboard (Android
-	// Chrome's default, interactive-widget=resizes-content) reveal the
-	// caret themselves — the preempt must stand down there. iOS 26 also
-	// reports TRANSIENT shrunken innerHeight values around keyboard
-	// presentation that settle back within a few hundred ms, so a single
-	// observation must not latch: the shrunken state has to persist for a
-	// second before we conclude the platform truly resizes its layout
-	// viewport.
-	let layout_viewport_resizes = false;
-	let inner_height_at_focus = 0;
-	let layout_resize_latch_timeout: ReturnType<typeof setTimeout> | undefined;
+	// The tap preempt and the published inset work around iOS-specific
+	// behavior: iOS neither resizes the layout viewport for its keyboard
+	// nor reveals carets into nested scroll containers. Other platforms
+	// (Android Chrome resizes the layout viewport and reveals natively)
+	// must be left alone, so — like every editor library — the workaround
+	// is gated on the platform it works around. iPadOS masquerades as
+	// macOS, hence the touch-point check.
+	const is_ios =
+		typeof navigator !== 'undefined' &&
+		(/iP(hone|ad|od)/.test(navigator.userAgent) ||
+			(navigator.userAgent.includes('Mac') && navigator.maxTouchPoints > 1));
 
 	// Published keyboard geometry: the single visualViewport listener below
 	// maintains --svedit-keyboard-inset on the root element, so app UI
@@ -170,48 +172,18 @@
 			// viewport and would teach a bogus keyboard size.
 			if (vv.scale === 1 && inset > 150) observed_keyboard_inset = inset;
 			// Real measurement corrects the predictive focus/blur values.
-			// Layout-resizing platforms need no offset: their keyboard
-			// already shrinks the layout the toolbar lives in.
-			if (vv.scale === 1) __publish_keyboard_inset(layout_viewport_resizes ? 0 : inset);
-			const inner_height_shrunk =
-				canvas_focused && window.innerHeight < inner_height_at_focus - 150;
-			if (inner_height_shrunk && !layout_resize_latch_timeout && !layout_viewport_resizes) {
-				layout_resize_latch_timeout = setTimeout(() => {
-					layout_resize_latch_timeout = undefined;
-					// Genuine resizes-content has a signature: the layout
-					// viewport shrank AND no overlay inset remains. A lasting
-					// shrink WITH a large inset (rotation, split screen) is
-					// not the keyboard resizing the layout viewport.
-					const inset_after = Math.round(window.innerHeight - vv.height - vv.offsetTop);
-					if (
-						canvas_focused &&
-						window.innerHeight < inner_height_at_focus - 150 &&
-						inset_after < 150
-					) {
-						layout_viewport_resizes = true;
-					}
-				}, 1000);
-			}
-		};
-		// Rotation invalidates the learned keyboard size and the latch
-		// baseline — start learning from scratch.
-		const reset_learning = () => {
-			layout_viewport_resizes = false;
-			observed_keyboard_inset = 0;
-			inner_height_at_focus = window.innerHeight;
+			// Non-iOS platforms resize the layout viewport for the keyboard
+			// themselves — the toolbar needs no offset there.
+			if (vv.scale === 1) __publish_keyboard_inset(is_ios ? inset : 0);
 		};
 		measure();
 		vv.addEventListener('resize', measure);
 		// The inset formula includes offsetTop, which visual-viewport pans
 		// (pinch zoom) change without a resize.
 		vv.addEventListener('scroll', measure);
-		window.addEventListener('orientationchange', reset_learning);
 		return () => {
 			vv.removeEventListener('resize', measure);
 			vv.removeEventListener('scroll', measure);
-			window.removeEventListener('orientationchange', reset_learning);
-			clearTimeout(layout_resize_latch_timeout);
-			layout_resize_latch_timeout = undefined;
 			window.document.documentElement.style.removeProperty('--svedit-keyboard-inset');
 		};
 	});
@@ -232,14 +204,15 @@
 	//   (scroll-padding). One owned movement, no corrections, and carets
 	//   that stay visible move nothing.
 	function __preempt_keyboard_occlusion() {
-		if (!editable) return;
-		if (!window.matchMedia('(pointer: coarse)').matches) return;
-		if (layout_viewport_resizes) return;
+		if (!editable || !is_ios) return;
 		const vv = window.visualViewport;
 		const inset_now = vv ? Math.round(window.innerHeight - vv.height - vv.offsetTop) : 0;
 		// With the keyboard already up, taps land on visible text, and
 		// caret drags must never be fought — only act before it exists.
 		if (inset_now > 150) return;
+		// While pinch-zoomed the client-rect and visual-viewport coordinate
+		// spaces disagree — stand down, like the learning does.
+		if (vv && vv.scale !== 1) return;
 		// App-shell layouts only: a scrollable DOCUMENT means the OS owns
 		// the caret reveal (embedded contexts, plain pages) — acting there
 		// would double-scroll against it. Same for the absence of a nested
@@ -255,35 +228,24 @@
 		if (!dom_selection?.rangeCount || !dom_selection.focusNode) return;
 		const caret_rect = __get_caret_rect(dom_selection.focusNode, dom_selection.focusOffset);
 		if (!caret_rect) return;
-		// Keyboard size is learned once observed; before the first opening
-		// assume half the screen.
-		const predicted_inset = observed_keyboard_inset || Math.round(window.innerHeight * 0.5);
-		const scroller_style = getComputedStyle(container);
-		const container_rect = container.getBoundingClientRect();
-		const pad_top = __resolve_scroll_padding(
-			scroller_style.scrollPaddingTop,
-			container.clientHeight
-		);
-		const pad_bottom = __resolve_scroll_padding(
-			scroller_style.scrollPaddingBottom,
-			container.clientHeight
-		);
-		// The predicted band is clamped to the container's own box, so a
-		// scroller that doesn't fill the viewport can never be slammed to
-		// its limit by out-of-band math. The padding subtracts from the
-		// clamped (visible) edges — same rule and same deliberate
-		// conservatism as __get_reveal_bounds.
-		const band_top = Math.max(container_rect.top, 0) + pad_top;
-		const band_bottom =
-			Math.min(container_rect.bottom, window.innerHeight - predicted_inset) - pad_bottom;
-		if (band_bottom - band_top < 2 * caret_rect.height) return;
+		// The visible band is the one reveal-band definition, additionally
+		// clamped by the predicted keyboard: its size is learned once
+		// observed; before the first opening assume half the screen. The
+		// learned value is clamped to 60% of the current height so a stale
+		// cross-orientation value (portrait keyboard used in landscape)
+		// degrades to roughly the fallback instead of collapsing the band.
+		const predicted_inset =
+			Math.min(observed_keyboard_inset, Math.round(window.innerHeight * 0.6)) ||
+			Math.round(window.innerHeight * 0.5);
+		const bounds = __get_reveal_bounds(container, predicted_inset);
+		if (bounds.max_y - bounds.min_y < 2 * caret_rect.height) return;
 		// Half a line of headroom so the caret line clears the band fully.
-		if (caret_rect.bottom + 8 <= band_bottom) return;
+		if (caret_rect.bottom + 8 <= bounds.max_y) return;
 		// Land in the CENTER of the predicted visible band, not at its
 		// edge: iOS nudges the scroller back by up to ~300px during its
 		// transient keyboard reflows, and an edge-parked caret slides
 		// straight under the toolbar. Center placement absorbs the nudge.
-		const target_y = (band_top + band_bottom) / 2;
+		const target_y = (bounds.min_y + bounds.max_y) / 2;
 		container.scrollTop += Math.round(caret_rect.top + caret_rect.height / 2 - target_y);
 		// iOS may stomp the scroller right after: its own reveal runs
 		// against transient viewport geometry (panned visual viewport,
@@ -514,8 +476,13 @@
 				// inset predictively — the OS reports geometry only late in
 				// its animation — so CSS consumers glide in sync. Then keep
 				// the caret visible.
-				if (!layout_viewport_resizes && observed_keyboard_inset) {
-					__publish_keyboard_inset(observed_keyboard_inset);
+				if (is_ios && observed_keyboard_inset) {
+					// Clamped like the preempt's prediction, so a stale
+					// cross-orientation value can't glide the toolbar off
+					// toward the top of a landscape screen.
+					__publish_keyboard_inset(
+						Math.min(observed_keyboard_inset, Math.round(window.innerHeight * 0.6))
+					);
 				}
 				__preempt_keyboard_occlusion();
 			} else if (selection.type !== 'text') {
@@ -1090,7 +1057,6 @@ ${fallback_html}`;
 
 	// Handle focus - push session's keymap onto stack
 	function handle_canvas_focus() {
-		inner_height_at_focus = window.innerHeight;
 		// Use flushSync so highlight spans are removed from the DOM
 		// immediately, before the browser processes the click's selection.
 		flushSync(() => {
@@ -1574,7 +1540,7 @@ ${fallback_html}`;
 	 * scroller's declared scroll-padding (floating app UI like toolbars —
 	 * an app fact, measured from the visual viewport's edges).
 	 */
-	function __get_reveal_bounds(container: HTMLElement | null) {
+	function __get_reveal_bounds(container: HTMLElement | null, predicted_keyboard_inset = 0) {
 		const scroller_style = getComputedStyle(
 			container ?? window.document.scrollingElement ?? window.document.documentElement
 		);
@@ -1605,7 +1571,7 @@ ${fallback_html}`;
 			max_y:
 				Math.min(
 					rect?.bottom ?? Infinity,
-					window.innerHeight,
+					window.innerHeight - predicted_keyboard_inset,
 					vv ? vv.offsetTop + vv.height : Infinity
 				) - pad_b
 		};
@@ -1899,24 +1865,6 @@ ${fallback_html}`;
 									if (container) {
 										container.scrollLeft += dx;
 										container.scrollTop += dy;
-										// A limit-clamped container can strand the cursor —
-										// hand any residual to the window.
-										const settled = __get_caret_rect(focus_node, focus_node_offset);
-										if (settled) {
-											const rx = __scroll_delta(
-												settled.left,
-												settled.right,
-												bounds.min_x,
-												bounds.max_x
-											);
-											const ry = __scroll_delta(
-												settled.top,
-												settled.bottom,
-												bounds.min_y,
-												bounds.max_y
-											);
-											if (rx || ry) window.scrollBy(rx, ry);
-										}
 									} else {
 										window.scrollBy(dx, dy);
 									}