@quillmark/svelte 0.3.0 → 0.3.2

package/dist/preview/controller.js

@@ -1,12 +1,10 @@
 import { reportError, errorMessage } from '../core/errors.js';
 import { createPaintLoop } from './paint.js';
-import { createOverlay } from './overlay.js';
 import { createBridge } from './bridge.js';
 import { mergePreviewStrings } from './strings.js';
 const CONTAINER_CLASS = 'qm-preview';
-// The message states share one element; each carries `MESSAGE_CLASS` plus a
-// state class so a consumer (and the tests) can target them. `EMPTY_CLASS` is
-// the zero-page hook consumers and tests target.
+// The message states share one element; each carries `MESSAGE_CLASS` plus a state
+// class, the hooks a consumer and the tests target.
 const MESSAGE_CLASS = 'qm-preview-message';
 const EMPTY_CLASS = 'qm-preview-empty';
 const UNSUPPORTED_CLASS = 'qm-preview-unsupported';
@@ -14,13 +12,10 @@ const ERROR_CLASS = 'qm-preview-error';
 export function createPreview(session, opts) {
     const container = opts.container;
     const margin = opts.margin ?? 1;
-    const overlaysEnabled = opts.overlays ?? true;
     const t = mergePreviewStrings(opts.strings);
     container.classList.add(CONTAINER_CLASS);
-    // The full-container message slot, shared by every non-paint state: the empty
-    // seed / drop-to-zero, a compile that cannot paint (`supportsCanvas` false),
-    // and a paint that threw. One element, restamped; these states are mutually
-    // exclusive, and the zero-page case keeps its `qm-preview-empty` hook.
+    // One element, restamped: the non-paint states (empty, unsupported, a paint that
+    // threw) are mutually exclusive.
     let message;
     function showMessage(text, state) {
         if (!message) {
@@ -50,34 +45,26 @@ export function createPreview(session, opts) {
         });
         showMessage(t.renderFailed, ERROR_CLASS);
     });
-    // overlay/bridge query geometry at build (`session.regions()`), so they are
-    // held until slots exist; (re)built by `render` when a compile is paintable.
-    let overlay;
+    // The bridge lives and dies with the slot set, so it is held until `render` finds
+    // a compile paintable. Rebuilt rather than patched whenever the count changes: the
+    // slots array is a stable identity but its members are swapped on reconcile, and
+    // the listeners are per slot.
     let bridge;
-    // overlay/bridge live and die with the slot set. Rebuilt (not patched) whenever
-    // the count changes: the slots array is a stable identity but its members are
-    // swapped on reconcile, and both attach DOM/listeners per slot.
     function attach() {
-        overlay = overlaysEnabled ? createOverlay(session, paintLoop.slots) : undefined;
         bridge = createBridge(session, container, paintLoop.slots, opts.onPick);
     }
     function detach() {
-        overlay?.destroy();
         bridge?.destroy();
-        overlay = undefined;
         bridge = undefined;
     }
-    // Reflect one compile's paintability into the DOM: page slots + overlay/bridge
-    // when there is something to paint, the shared message otherwise. Called at
-    // construction and after every `apply`, so `supportsCanvas` is re-read per
-    // compile (runtime.d.ts: re-check after `open`) and a 0-page or non-canvas
-    // compile that later gains paintable pages recovers; the check spans the
-    // paint capability generally, not just the page count.
+    // Called at construction and after every `apply`, so `supportsCanvas` is re-read
+    // per compile (runtime.d.ts: re-check after `open`) and a 0-page or non-canvas
+    // compile that later gains paintable pages recovers; the check spans the paint
+    // capability generally, not just the page count.
     function render(pageCount, dirtyPages) {
         if (!session.supportsCanvas || pageCount === 0) {
-            // Nothing paintable: collapse slots, drop geometry attachments, say why.
-            // A 0-page compile is a recoverable empty; a compile with pages the
-            // boundary cannot raster is a genuine unsupported.
+            // A 0-page compile is a recoverable empty; pages the boundary cannot
+            // raster are a genuine unsupported.
             paintLoop.refresh([], 0);
             detach();
             showMessage(pageCount === 0 ? t.noPages : t.unsupported, pageCount === 0 ? EMPTY_CLASS : UNSUPPORTED_CLASS);
@@ -89,18 +76,11 @@ export function createPreview(session, opts) {
         const countChanged = pageCount !== paintLoop.slots.length;
         hideMessage();
         paintLoop.refresh(dirtyPages, pageCount);
+        // The slot set moved under the bridge's feet, or we are leaving a message state.
         if (countChanged || !bridge) {
-            // The slot set moved under overlay/bridge's feet (pages added/removed,
-            // or we are leaving a message state): rebuild both against the
-            // reconciled slots rather than patch a stale snapshot in place.
             detach();
             attach();
         }
-        else {
-            // Box positions can still shift within the same page set (text reflow),
-            // so geometry is always re-read, not just dirty pages.
-            overlay?.refresh();
-        }
     }
     render(session.pageCount, []);
     // The last place the editor put the caret, re-located after every recompile.
@@ -120,16 +100,11 @@ export function createPreview(session, opts) {
                 bridge?.focusPosition(followed.field, followed.pos);
         },
         scrollToField(field) {
-            const found = bridge?.scrollToField(field) ?? false;
-            // Marked either way: a compile that gains the address later blooms it on the
-            // rebuild, since the flash carries its own start time (`core/bloom.ts`).
-            overlay?.flashField(field);
-            return found;
+            return bridge?.scrollToField(field) ?? false;
         },
         focusPosition(at) {
             followed = at;
             bridge?.focusPosition(at.field, at.pos);
-            overlay?.flashField(at.field);
         },
         setZoom(scale) {
             paintLoop.setDensityZoom(scale);

package/dist/preview/geometry.d.ts

@@ -15,9 +15,8 @@ export interface PdfPoint {
 }
 /**
  * An address's boxes: `fieldBoxes`'s union, else its own `regions()` rects, else the
- * rects of everything under it. The one rule the overlay and the scroll both read, so
- * an address `regions()` names never draws nothing (PREVIEW.md §"Three
- * responsibilities").
+ * rects of everything under it. What the scroll reads, so an address `regions()`
+ * names is never one the preview cannot place (PREVIEW.md §"Two responsibilities").
  *
  * `fieldBoxes` answers `[]` for a scalar reference the plate places without tracking
  * its content and for a `richtext[]` element; runtime.d.ts says what such a field's
@@ -30,15 +29,14 @@ export interface PdfPoint {
 export declare function boxesForField(field: string, boxes: readonly FieldRegion[], regions: readonly FieldRegion[]): readonly FieldRegion[];
 /**
  * Forward: a PDF-pt rect -> CSS % of the page box. Percent positioning tracks
- * the page's displayed size across DPR and container resize for free; this is
- * what the overlay draws (overlay.ts).
+ * the page's displayed size across DPR and container resize for free, so the
+ * scroll's measurement needs no zoom or DPR term of its own (bridge.ts).
  */
 export declare function rectToPercent(rect: PdfRect, pageSize: PageSize): PercentRect;
 /**
- * Position `el` absolutely at `pct` (the % rect this module produces); the one
- * `PercentRect` → `element.style` write, shared by the overlay's field boxes and
- * the bridge's scroll marker so the positioning convention lives in one place.
- * The caller sets any box chrome (border, background) on top.
+ * Position `el` absolutely at `pct` (the % rect this module produces): the one
+ * `PercentRect` → `element.style` write, so the positioning convention lives beside
+ * the transform that produces it rather than at the caller placing a marker.
  */
 export declare function applyPercentRect(el: HTMLElement, pct: PercentRect): void;
 /**

package/dist/preview/geometry.js

@@ -1,8 +1,7 @@
 /**
  * An address's boxes: `fieldBoxes`'s union, else its own `regions()` rects, else the
- * rects of everything under it. The one rule the overlay and the scroll both read, so
- * an address `regions()` names never draws nothing (PREVIEW.md §"Three
- * responsibilities").
+ * rects of everything under it. What the scroll reads, so an address `regions()`
+ * names is never one the preview cannot place (PREVIEW.md §"Two responsibilities").
  *
  * `fieldBoxes` answers `[]` for a scalar reference the plate places without tracking
  * its content and for a `richtext[]` element; runtime.d.ts says what such a field's
@@ -20,8 +19,8 @@ export function boxesForField(field, boxes, regions) {
 }
 /**
  * Forward: a PDF-pt rect -> CSS % of the page box. Percent positioning tracks
- * the page's displayed size across DPR and container resize for free; this is
- * what the overlay draws (overlay.ts).
+ * the page's displayed size across DPR and container resize for free, so the
+ * scroll's measurement needs no zoom or DPR term of its own (bridge.ts).
  */
 export function rectToPercent(rect, pageSize) {
     const [x0, y0, x1, y1] = rect;
@@ -34,10 +33,9 @@ export function rectToPercent(rect, pageSize) {
     };
 }
 /**
- * Position `el` absolutely at `pct` (the % rect this module produces); the one
- * `PercentRect` → `element.style` write, shared by the overlay's field boxes and
- * the bridge's scroll marker so the positioning convention lives in one place.
- * The caller sets any box chrome (border, background) on top.
+ * Position `el` absolutely at `pct` (the % rect this module produces): the one
+ * `PercentRect` → `element.style` write, so the positioning convention lives beside
+ * the transform that produces it rather than at the caller placing a marker.
  */
 export function applyPercentRect(el, pct) {
     Object.assign(el.style, {

package/dist/preview/index.js

@@ -5,7 +5,7 @@
 // (the codec, the VisualEditor) so a `@quillmark/preview` promotion stays a
 // re-export, not a refactor: it may reach `/core` (the shared WASM boundary) and
 // nothing else. Enforced by `check:deps`, which walks the subpath's import graph.
-// The theme derivation, which the page slots and the overlay read through `var()`.
+// The theme derivation, which the page slots read through `var()`.
 // Imported at the barrel because a subpath is what a consumer gets: this surface
 // reaches modules inside `core/` and never its entry, so a sheet hanging off that
 // entry arrives only for a consumer importing `/core` for some other reason. The

package/dist/preview/paint.d.ts

@@ -1,5 +1,5 @@
 import type { LiveSession, PageSize } from '@quillmark/wasm';
-/** One page's DOM slot: the box overlay.ts/bridge.ts position against, plus its cached geometry. */
+/** One page's DOM slot: the box bridge.ts measures against, plus its cached geometry. */
 export interface PageSlot {
     readonly page: number;
     readonly size: PageSize;

package/dist/preview/paint.js

@@ -36,9 +36,9 @@ onPaintError) {
         // The sheet is a plane and the desk is the one under it: paper sits at
         // `--_qm-surface` and the container paints `--_qm-surface-sunken`, so the
         // edge is where two tones meet and no stroke is drawn around it
-        // (ARCHITECTURE §Styling). It leaves the overlay's no-ink-at-rest rule
-        // untouched, since a boundary that is not painted is not a mark on the page
-        // (PREVIEW §Overlay). `border-box` costs nothing here and keeps a slot a
+        // (ARCHITECTURE §Styling). It leaves the no-ink rule untouched, since a
+        // boundary that is not painted is not a mark on the page (PREVIEW §"Two
+        // responsibilities"). `border-box` costs nothing here and keeps a slot a
         // consumer insets from measuring wider than its paper.
         const el = document.createElement('div');
         el.className = 'qm-page';
@@ -151,7 +151,7 @@ onPaintError) {
             slots[i] = { ...slots[i], size };
             // Keep the page box's shape in step with the re-read size: a recompile
             // can change a page's dimensions without changing the count, and every
-            // %-space overlay/click transform assumes box shape matches PageSize.
+            // %-space click/scroll transform assumes box shape matches PageSize.
             slots[i].el.style.aspectRatio = `${size.widthPt} / ${size.heightPt}`;
         }
     }
@@ -164,7 +164,7 @@ onPaintError) {
     // Every paint freezes `canvas.style.width/height` to the box width at that
     // paint (paintSlot). A page that stays mounted while the container's CSS width
     // or `devicePixelRatio` shifts would otherwise keep a stale raster the %-space
-    // overlay/click math silently drifts off of: the box tracks the container, the
+    // click/scroll math silently drifts off of: the box tracks the container, the
     // ink does not. Two observers close the gap by repainting mounted pages from
     // their current box; canvases are `position:absolute`, so a repaint can't feed
     // back into layout (and thus can't re-trigger the resize observer).

package/dist/visual/Card.svelte

@@ -1,8 +1,7 @@
 <!--
- One card block: the header (composable cards only), the field list grouped by
- `ui.group`/`ui.compact`, and the body prose leaf. `main` is headerless with no
- controls. Every prose leaf takes a parent-built live address, so a card reorder
- re-targets its commits without a remount.
+ One card block, its fields grouped by `ui.group`/`ui.compact`. `main` is headerless
+ and takes no controls. Every prose leaf takes a parent-built live address, so a card
+ reorder re-targets its commits without a remount.
 -->
 <script lang="ts">
 	import { wording } from './strings.js';
@@ -43,7 +42,6 @@
 		card: CardModel;
 		doc: Document;
 		quill: Quill;
-		index: number;
 		isFirst: boolean;
 		isLast: boolean;
 		kinds: string[];
@@ -61,7 +59,6 @@
 		card,
 		doc,
 		quill,
-		index,
 		isFirst,
 		isLast,
 		kinds,
@@ -91,8 +88,8 @@
 		(e.currentTarget as HTMLInputElement).select();
 	}
 	// A press on an unfocused title would place a caret on mouseup, collapsing the
-	// focus-time select-all. Take focus manually and suppress that caret; a press while
-	// already focused stays normal, so clicking mid-title to place the caret still works.
+	// focus-time select-all. A press while already focused stays normal, so clicking
+	// mid-title to place the caret still works.
 	function onTitleMousedown(e: MouseEvent): void {
 		const el = e.currentTarget as HTMLInputElement;
 		if (document.activeElement !== el) {
@@ -100,9 +97,8 @@
 			el.focus();
 		}
 	}
-	// A press on the region's empty width enters the title edit; preventDefault keeps it
-	// from starting a text selection on the wrapper. A press on the input itself is left
-	// to `onTitleMousedown`, which owns the already-focused caret-placement case.
+	// A press on the region's empty width enters the title edit, and starts no text
+	// selection on the wrapper. A press on the input itself is `onTitleMousedown`'s.
 	function onRenameMousedown(e: MouseEvent): void {
 		const input = (e.currentTarget as HTMLElement).querySelector('input');
 		if (!input || e.target === input) return;
@@ -136,10 +132,10 @@
 	// paint as a single stroke of twice the width.
 	const hasMeta = $derived(ungrouped.length > 0 || grouped.length > 0);
 
-	// Ephemeral session state, seeded once from the card's shape. Card is keyed by stable
-	// id, so this survives the VisualEditor re-derive that reassigns `card` and resets
-	// only on a remount. Not reconciled to later section changes: a retype is the one
-	// reshape, and the open group stays where it still exists.
+	// Seeded once from the card's shape. Card is keyed by stable id, so this survives the
+	// VisualEditor re-derive that reassigns `card` and resets only on a remount. Not
+	// reconciled to later section changes: a retype is the one reshape, and the open
+	// group stays where it still exists.
 	// svelte-ignore state_referenced_locally
 	let expanded = $state<string | null>(initialExpandedGroup(card.sections));
 	let headers = $state<Record<string, HTMLButtonElement | undefined>>({});
@@ -162,10 +158,10 @@
 	}
 
 	/**
-	 * Open the group holding leaf `key`, if this card has one: a caret placed in a
-	 * collapsed panel does not land at all. `VisualEditor.setCaret` calls this on every
-	 * card and then waits a flush before landing, since `inert` clears when the panel
-	 * renders open, not when `expanded` is assigned.
+	 * Open the group holding leaf `key`: a caret placed in a collapsed panel does not
+	 * land at all. `VisualEditor.setCaret` calls this on every card and then waits a
+	 * flush before landing, since `inert` clears when the panel renders open, not when
+	 * `expanded` is assigned.
 	 *
 	 * A call, not a prop: a reveal is an event, and modelling it as state needs a
 	 * fresh-identity wrapper to re-fire and an `untrack` to keep the per-keystroke
@@ -232,11 +228,10 @@
 		{/if}
 
 		<div class="qm-card-body">
-			<!-- Every field the card has, ungrouped and grouped alike, inside one element
-		 whose top and bottom edges are the bracket's two horizontals. Anchored here
-		 rather than on the header and on the accordion so an open section's vertical
-		 reaches them, and so a card with no groups still terminates above its body. An
-		 empty wrapper between the two rules would collapse them onto each other. -->
+			<!-- One element whose top and bottom edges are the bracket's two horizontals.
+		 Anchored here rather than on the header and on the accordion so an open section's
+		 vertical reaches them, and so a card with no groups still terminates above its
+		 body. -->
 			{#if hasMeta}
 				<div
 					class="qm-card-meta"
@@ -395,11 +390,12 @@
 {/snippet}
 
 <style>
-	/* An island, and the tone is the whole of what makes it one: the card is the base
-	 plane and the column behind it is the sunken one (ARCHITECTURE §Styling). The inset
-	 is the same rung as the gap, so what separates the header from the fields is what
-	 separates the fields from the card's edge. */
+	/* An island: the card is the base plane, the column behind it the sunken one, and the
+	 hairline closes it (ARCHITECTURE §Styling). The inset is the same rung as the gap, so
+	 what separates the header from the fields is what separates the fields from the
+	 card's edge. */
 	.qm-card {
+		border: var(--_qm-border-width) solid var(--_qm-border);
 		border-radius: var(--_qm-radius);
 		padding: var(--_qm-space-3);
 		background: var(--_qm-surface);
@@ -442,13 +438,17 @@
 	}
 	/* Autosize: the ::after mirrors the text into the same grid cell as the input, so the
 	 overlaid input tracks its content width. Both carry the same nothing for a box model
-	 and inherit the same type tokens, which is what makes the two measure alike. */
+	 and inherit the same type tokens, which is what makes the two measure alike.
+
+	 The type is the group header's, down to the ink and its hover step below: a card
+	 title and a section header both name a block of fields, so they read as one register
+	 and what ranks them is position rather than a size step. */
 	.qm-card-title-sizer {
 		display: inline-grid;
 		align-items: center;
 		min-width: 0;
 		max-width: 100%;
-		font-size: var(--_qm-text-title);
+		font-size: var(--_qm-text-body);
 		font-weight: var(--_qm-weight-mid);
 		line-height: var(--_qm-leading-tight);
 		font-family: inherit;
@@ -620,11 +620,17 @@
 	 The clip box takes the inline inset, which costs a shut panel no height and holds the
 	 queried width still. The block inset goes on the content, where a `0fr` track clips
 	 it: declared one box out it collapses the content but not itself, and stands under a
-	 shut header as dead space. Neither is animated, and neither is qualified by open. */
+	 shut header as dead space. Neither is animated, and neither is qualified by open.
+
+	 A field ends on the clip box at the end edge, where no inset hides its ring the way
+	 the start edge's does. The pad carries the clip past it and the margin takes the same
+	 distance back, so the width the fields are packed and queried at is unmoved. */
 	.qm-group-panel-inner {
 		min-height: 0;
 		overflow: hidden;
 		padding-inline-start: var(--_qm-space-4);
+		padding-inline-end: var(--_qm-ring-reach);
+		margin-inline-end: calc(-1 * var(--_qm-ring-reach));
 	}
 	.qm-group-panel-inner > .qm-fields {
 		padding-block: var(--_qm-space-2);
@@ -634,14 +640,13 @@
 		flex-direction: column;
 		gap: var(--_qm-space);
 	}
-	/* The one card that draws an edge at all: an ordinary card is a plane, so a stroke
-	 around this one is a state rather than heavier chrome. */
+	/* The state is in the stroke's pattern, every card being closed by one already. */
 	.qm-card.qm-unschemable {
-		border: var(--_qm-border-width) dashed var(--_qm-border);
+		border-style: dashed;
 	}
 	/* One typographic role with the editable title above. */
 	.qm-card-title-static {
-		font-size: var(--_qm-text-title);
+		font-size: var(--_qm-text-body);
 		font-weight: var(--_qm-weight-mid);
 		line-height: var(--_qm-leading-tight);
 		color: var(--_qm-ink-label);

package/dist/visual/Card.svelte.d.ts

@@ -22,7 +22,6 @@ interface Props {
     card: CardModel;
     doc: Document;
     quill: Quill;
-    index: number;
     isFirst: boolean;
     isLast: boolean;
     kinds: string[];

package/dist/visual/FormatPopover.svelte

@@ -19,10 +19,15 @@
  transient `selectionchange` events first). `focusout` keeps the popover honest
  when focus leaves the leaf.
 
- Nothing here watches scroll. `sync` decides whether the surface is up and what
- its buttons read, which a scroll changes neither of; where it sits is the
- anchor's own question, and the anchor answers it by measuring when floating-ui
- asks rather than by being handed a rect (`codec/anchor.ts`).
+ A press holds it down, which is what makes the surface answer a selection rather
+ than a pointer: a drag fires `selectionchange` on every frame, so a surface driven
+ by that alone rises on the first character and rides the cursor across the text it
+ is covering. Keyboard selection holds nothing, so a Shift-arrow syncs as it fires.
+
+ Nothing here watches scroll. `sync` decides whether the surface is up, which a
+ scroll does not change; where it sits is the anchor's own question, and the anchor
+ answers it by measuring when floating-ui asks rather than by being handed a rect
+ (`codec/anchor.ts`).
 
  Focus discipline. Three failure modes a naive Popover.Content invites:
  (1) its default `trapFocus` (true) redirects any focus landing outside its
@@ -76,7 +81,6 @@
 	}
 	let { getActiveLeaf }: Props = $props();
 
-	/** Mark size: the shared control-glyph rule for the popover icons. */
 	const GLYPH = 15;
 	/** The six content formatting marks. `anchor` is a seventh, drawn separately below:
 	 *  a decoration toggle rather than a PM `toggleMark`. One string per mark carries both
@@ -91,11 +95,14 @@
 	]);
 
 	let open = $state(false);
-	let activeMarks = $state<Record<string, boolean>>({});
+	/** A pointer is down outside this surface: the selection is still being made. */
+	let pressed = false;
 	/** Whether the selection is in the field's coordinate space, which an anchor needs
 	 *  and a table cell is not (see `sync`). */
 	let anchorAvailable = $state(true);
 	let linkPromptOpen = $state(false);
+	/** Whether the selection carried a link when the prompt was raised. */
+	let linkPresent = $state(false);
 	let linkValue = $state('');
 	let linkInputEl = $state<HTMLInputElement | undefined>(undefined);
 	let contentEl = $state<HTMLElement | undefined>(undefined);
@@ -118,7 +125,6 @@
 		return leaf?.focusedView?.() ?? leaf?.view;
 	}
 
-	/** Recompute open/anchor/active-marks from the active leaf's current PM selection. */
 	function sync(): void {
 		const insidePopover =
 			!!contentEl && !!document.activeElement && contentEl.contains(document.activeElement);
@@ -126,6 +132,7 @@
 		// Costs nothing to hold: the anchor minted below goes on measuring while this
 		// returns early, so a surface frozen here still tracks the selection it covers.
 		if (insidePopover) return;
+		if (pressed) return;
 		const leaf = getActiveLeaf() as LeafWithView | undefined;
 		const view = leaf?.focusedView?.() ?? leaf?.view;
 		// A non-empty text selection. A node selection is non-empty too and has nothing
@@ -133,7 +140,7 @@
 		// Escape out of a table cell lands.
 		const selection = view?.state.selection;
 		const formattable = selection instanceof TextSelection && !selection.empty;
-		if (!view || !view.hasFocus() || !formattable) {
+		if (!view || !view.hasFocus() || !formattable || !hasText(view)) {
 			open = false;
 			linkPromptOpen = false;
 			return;
@@ -141,27 +148,21 @@
 		portalTarget = view.dom.closest<HTMLElement>('[data-qm-root]') ?? undefined;
 		const { from, to } = view.state.selection;
 		anchor = rangeAnchor(view, from, to);
-		const marks: Record<string, boolean> = {};
-		for (const m of MARKS) {
-			const type = view.state.schema.marks[m.name];
-			marks[m.name] = !!type && view.state.doc.rangeHasMark(from, to, type);
-		}
-		// `anchor` is a decoration, not a PM mark (CODEC §Marks): its active state is
-		// whether the selection covers an identity anchor, read off the leaf in USV.
-		//
-		// A selection inside a table cell is not in that coordinate space at all: the
-		// field's position map holds one `atom` run for the whole island, so there is
+		// A selection inside a table cell is not in the field's coordinate space at all:
+		// the field's position map holds one `atom` run for the whole island, so there is
 		// no USV offset to mint an anchor at. The button is withheld rather than
 		// disabled, because what it would toggle does not exist there (CODEC §Islands).
 		anchorAvailable = !!leaf && view === leaf.view;
-		if (leaf && anchorAvailable) {
-			const sel = leaf.selectionRange();
-			marks.anchor = leaf.anchorsInRange(sel.from, sel.to).length > 0;
-		}
-		activeMarks = marks;
 		open = true;
 	}
 
+	/** Whitespace alone is a selection the pointer makes by accident, at the end of a
+	 *  line or between two words, and every mark over it is invisible. */
+	function hasText(view: EditorView): boolean {
+		const { from, to } = view.state.selection;
+		return view.state.doc.textBetween(from, to, ' ', ' ').trim().length > 0;
+	}
+
 	// A burst of DOM events (verified: browser "select all" processing fires
 	// `selectionchange` several times, transiently empty before landing on the
 	// final range) must coalesce to one settled check, not one `sync()` per
@@ -186,12 +187,33 @@
 		});
 	}
 
+	function onPointerDown(e: PointerEvent): void {
+		// A press on the surface is not a selection gesture, and lowering it here would
+		// take the button out from under the pointer before its click.
+		if (contentEl?.contains(e.target as Node)) return;
+		pressed = true;
+		open = false;
+	}
+	function onPointerUp(): void {
+		if (!pressed) return;
+		pressed = false;
+		deferredSync();
+	}
+
 	$effect(() => {
 		document.addEventListener('selectionchange', deferredSync);
 		document.addEventListener('focusout', deferredSync);
+		// Capture, so the gesture is seen whatever a view in the middle of it does with
+		// the event. `pointercancel` is the release a gesture the browser takes over gets.
+		document.addEventListener('pointerdown', onPointerDown, true);
+		document.addEventListener('pointerup', onPointerUp, true);
+		document.addEventListener('pointercancel', onPointerUp, true);
 		return () => {
 			document.removeEventListener('selectionchange', deferredSync);
 			document.removeEventListener('focusout', deferredSync);
+			document.removeEventListener('pointerdown', onPointerDown, true);
+			document.removeEventListener('pointerup', onPointerUp, true);
+			document.removeEventListener('pointercancel', onPointerUp, true);
 			// A burst-coalescing rAF may still be in flight at teardown; cancel it so
 			// `sync()` never runs against the destroyed component.
 			if (pending) cancelAnimationFrame(rafHandle);
@@ -235,6 +257,7 @@
 		if (!type) return;
 		if (name === 'link') {
 			linkValue = hrefInSelection(view.state);
+			linkPresent = linkValue.length > 0;
 			linkPromptOpen = true;
 			return;
 		}
@@ -293,8 +316,14 @@
 
 <Popover.Root bind:open>
 	<Popover.Portal to={portalTarget}>
+		<!-- A flip is measured against the root the surface portals into, which is the box
+		 that clips it where the consumer scrolls one (`.qm-pane`). The default boundary is
+		 the viewport, which knows nothing of that: a selection on the pane's first visible
+		 line raises the surface into the room above, where the pane's `overflow` cuts
+		 it. -->
 		<Popover.Content
 			customAnchor={anchor ?? null}
+			collisionBoundary={portalTarget ?? []}
 			side="top"
 			align="center"
 			trapFocus={false}
@@ -340,7 +369,7 @@
 								<button type="submit" class="qm-icon-btn qm-mark-btn">{t.strings.linkApply}</button>
 								<!-- Only where there is a link to remove: an arm that does nothing is
 								     an arm to read past on every other visit to the prompt. -->
-								{#if activeMarks.link}
+								{#if linkPresent}
 									<button
 										type="button"
 										class="qm-icon-btn qm-mark-btn"
@@ -364,7 +393,6 @@
 									<button
 										type="button"
 										class="qm-icon-btn qm-mark-btn"
-										class:active={activeMarks[m.name]}
 										title={m.title}
 										aria-label={m.title}
 										onmousedown={keepFocus}
@@ -375,7 +403,6 @@
 									<button
 										type="button"
 										class="qm-icon-btn qm-mark-btn"
-										class:active={activeMarks.anchor}
 										title={t.strings.formatAnchorTitle}
 										aria-label={t.strings.formatAnchor}
 										onmousedown={keepFocus}
@@ -408,21 +435,15 @@
 		gap: var(--_qm-space-half);
 	}
 	/* Chrome, type, target floor, hover fill and disabled recede come from
-	 `.qm-icon-btn` (controls.css); what is here is this surface's own. The border is
-	 drawn transparent rather than absent so the active inversion adds no width and
-	 shifts no glyph, and the ink is stated because the family deliberately declares
-	 none: its callers disagree, and a popover over content reads at the card's. */
+	 `.qm-icon-btn` (controls.css). The ink is stated because the family deliberately
+	 declares none: its callers disagree, and a popover over content reads at the card's.
+
+	 No state for a mark the selection already carries: a run may carry one over part of
+	 itself, which a two-state button has no third face for. */
 	.qm-mark-btn {
-		border: var(--_qm-border-width) solid transparent;
 		padding: var(--_qm-space) var(--_qm-space-2);
 		color: var(--_qm-ink);
 	}
-	/* Active is an ink inversion, the one state on this surface a hover fill cannot
-	   say: a mark already carried is not a mark under the pointer. */
-	.qm-mark-btn.active {
-		background: var(--_qm-ink);
-		color: var(--_qm-surface);
-	}
 	.qm-link-prompt {
 		display: flex;
 		gap: var(--_qm-space);