@quillmark/svelte 0.3.1 → 0.3.2

package/dist/core/codec/anchor.d.ts

@@ -8,11 +8,11 @@ export interface RangeAnchor {
 /**
  * A virtual anchor over one PM range, measured when asked rather than when made.
  *
- * The measure is total. `coordsAtPos` reads layout, and layout can be gone: a
- * position the document has since invalidated, a leaf inside a collapsed section, a
- * view torn down between a scroll firing and the measure running. `autoUpdate` calls
- * this at moments none of its callers choose, so an unmeasurable anchor returns the
- * last rect that measured rather than throwing out of floating-ui's positioning pass.
+ * The measure is total. It reads layout, and layout can be gone: a position the
+ * document has since invalidated, a leaf inside a collapsed section, a view torn down
+ * between a scroll firing and the measure running. `autoUpdate` calls this at moments
+ * none of its callers choose, so an unmeasurable anchor returns the last rect that
+ * measured rather than throwing out of floating-ui's positioning pass.
  *
  * `from === to` is a caret, which is what the slash menu hangs off.
  */

package/dist/core/codec/anchor.js

@@ -1,11 +1,42 @@
+function union(a, b) {
+    return {
+        left: Math.min(a.left, b.left),
+        top: Math.min(a.top, b.top),
+        right: Math.max(a.right, b.right),
+        bottom: Math.max(a.bottom, b.bottom)
+    };
+}
+function caretBox(view, pos) {
+    const { left, top, right, bottom } = view.coordsAtPos(pos);
+    return { left, top, right, bottom };
+}
+/**
+ * The box the highlight paints, and not the two ends' caret boxes: a selection that
+ * wraps has its head and its anchor on opposite sides of the block, so their union
+ * names a rectangle no text is under.
+ *
+ * A range measuring to nothing falls back to that union. A leaf the view draws no text
+ * for has no painted box, and an approximate anchor beats one of zero.
+ */
+function selectionBox(view, from, to) {
+    const range = document.createRange();
+    const start = view.domAtPos(from);
+    const end = view.domAtPos(to);
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    const { left, top, right, bottom, width, height } = range.getBoundingClientRect();
+    if (width || height)
+        return { left, top, right, bottom };
+    return union(caretBox(view, from), caretBox(view, to));
+}
 /**
  * A virtual anchor over one PM range, measured when asked rather than when made.
  *
- * The measure is total. `coordsAtPos` reads layout, and layout can be gone: a
- * position the document has since invalidated, a leaf inside a collapsed section, a
- * view torn down between a scroll firing and the measure running. `autoUpdate` calls
- * this at moments none of its callers choose, so an unmeasurable anchor returns the
- * last rect that measured rather than throwing out of floating-ui's positioning pass.
+ * The measure is total. It reads layout, and layout can be gone: a position the
+ * document has since invalidated, a leaf inside a collapsed section, a view torn down
+ * between a scroll firing and the measure running. `autoUpdate` calls this at moments
+ * none of its callers choose, so an unmeasurable anchor returns the last rect that
+ * measured rather than throwing out of floating-ui's positioning pass.
  *
  * `from === to` is a caret, which is what the slash menu hangs off.
  */
@@ -18,14 +49,7 @@ export function rangeAnchor(view, from, to) {
         contextElement: view.dom,
         getBoundingClientRect: () => {
             try {
-                const a = view.coordsAtPos(from);
-                const b = view.coordsAtPos(to);
-                last = {
-                    left: Math.min(a.left, b.left),
-                    top: Math.min(a.top, b.top),
-                    right: Math.max(a.right, b.right),
-                    bottom: Math.max(a.bottom, b.bottom)
-                };
+                last = from === to ? caretBox(view, from) : selectionBox(view, from, to);
             }
             catch {
                 // unmeasurable: keep the last good rect

package/dist/core/theme.css

@@ -184,16 +184,20 @@
 		   draft (VISUAL_EDITOR §"Card operations"). A literal rather than a dial
 		   because there is nothing left to turn: the rungs under it mix over
 		   the surface and the ink a consumer already tuned, so the card follows a
-		   brand untold. The mixes are faint on purpose: a warmth, not a badge. */
+		   brand untold. The mixes are faint on purpose: a warmth, not a badge.
+
+		   The one group mixed in sRGB. oklab holds perceived lightness across a mix and
+		   spends chroma to do it, which is right where both endpoints are grey and wrong
+		   for a hue: at either pole it lands the ink a channel short of warm. */
 		--_qm-tips: #e88c0a;
-		--_qm-tips-surface: color-mix(in oklab, var(--_qm-surface), var(--_qm-tips) 4%);
-		--_qm-tips-ink: color-mix(in oklab, var(--_qm-ink), var(--_qm-tips) 24%);
+		--_qm-tips-surface: color-mix(in srgb, var(--_qm-surface), var(--_qm-tips) 3%);
+		--_qm-tips-ink: color-mix(in srgb, var(--_qm-ink), var(--_qm-tips) 24%);
 		/* The ink and the amber stepped up, and the pair is spent on the two runs that
 		   are not the sentence: a token in a tip, and the foot's control under the
 		   pointer. One rung each rather than one per run, a chip and a hover four
 		   percent apart being a number with no second decision under it. */
-		--_qm-tips-ink-warm: color-mix(in oklab, var(--_qm-ink), var(--_qm-tips) 45%);
-		--_qm-tips-fill: color-mix(in oklab, var(--_qm-tips) 12%, transparent);
+		--_qm-tips-ink-warm: color-mix(in srgb, var(--_qm-ink), var(--_qm-tips) 45%);
+		--_qm-tips-fill: color-mix(in srgb, var(--_qm-tips) 12%, transparent);
 		/* The typewriter, the half of the slip the amber cannot carry: a modern mono
 		   reads as code where a Courier reads as typed. Its own rung rather than
 		   `--_qm-font-mono`, the chrome's readout face, which a consumer turns for

package/dist/visual/Card.svelte

@@ -390,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);
@@ -639,10 +640,9 @@
 		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 {

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);

package/dist/visual/ProseField.svelte

@@ -167,6 +167,11 @@
 	.qm-prose-block:not(.qm-control-box) {
 		font-size: var(--_qm-text-paper);
 	}
+	/* Paper's margin, which a field has none of. On the editable, so a press in the strip
+	 lands a caret; carried by the card's inset it would be dead width. */
+	.qm-prose-block:not(.qm-control-box) :global(.ProseMirror) {
+		padding-inline: var(--_qm-space-2);
+	}
 	/* The caret is the body's focus indicator: a ring around the one surface in a card
 	 that is paper reads as form chrome. So the contenteditable's own outline is dropped
 	 everywhere, and a boxed leaf takes the shared ring on its wrapper instead

package/dist/visual/TipsCard.svelte

@@ -95,19 +95,25 @@
 	/* Attached to `main`, not a block beside it: a square top pulled up by the radius,
 	 so its background fills the notches `main`'s rounded bottom corners cut and `main`
 	 paints over the rest. The two read as one block, which is what document-level
-	 guidance is: the main card's, not a card of its own. Still in-flow, no edge, no
-	 lift.
+	 guidance is: the main card's, not a card of its own. Still in-flow, no lift.
+
+	 It takes the card's hairline, and the tuck makes the two outlines one: the slip's top
+	 stroke and the tops of its sides run under `main`, so what shows starts at the card's
+	 bottom corners.
 
 	 The bottom corners take the inner rung where the card above takes the outer: a slip
 	 is cut crisper than the thing it is tucked under, at every setting of the dial.
 
 	 The insets are asymmetric so the ink is not: the top takes the tuck back, and the
 	 bottom gives up a rung to the foot's control, whose box stands on the tap floor
-	 rather than on its own one-line label. */
+	 rather than on its own one-line label. The horizontal is the card's inset plus the
+	 body's margin (ProseField), so the tip starts under the prose rather than under the
+	 fields. */
 	.qm-tips {
 		margin-top: calc(var(--_qm-radius) * -1);
+		border: var(--_qm-border-width) solid var(--_qm-border);
 		border-radius: 0 0 var(--_qm-radius-inner) var(--_qm-radius-inner);
-		padding: calc(var(--_qm-space-3) + var(--_qm-radius)) var(--_qm-space-3) var(--_qm-space-2);
+		padding: calc(var(--_qm-space-3) + var(--_qm-radius)) var(--_qm-space-5) var(--_qm-space-2);
 		background: var(--_qm-tips-surface);
 		display: flex;
 		flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",