@quillmark/svelte 0.3.0 → 0.3.1

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"
@@ -442,13 +437,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 +619,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);
@@ -641,7 +646,7 @@
 	}
 	/* 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/ProseField.svelte

@@ -1,9 +1,8 @@
 <!--
- One content prose leaf: a Svelte mount of the codec's `createField`
- (VISUAL_EDITOR §Surface), which owns the PM state, the history and the
- per-keystroke commit, so this wrapper is wiring and registration. `addr` is a
- live object the parent builds, so a card reorder re-targets this leaf's commits
- with the caret riding the untouched view.
+ A Svelte mount of the codec's `createField` (VISUAL_EDITOR §Surface), which owns the
+ PM state, the history and the per-keystroke commit, leaving this wrapper wiring and
+ registration. `addr` is a live object the parent builds, so a card reorder re-targets
+ this leaf's commits with the caret riding the untouched view.
 -->
 <script lang="ts">
 	import { onMount } from 'svelte';
@@ -41,8 +40,7 @@
 		/** Ghost shown on the empty leaf: an inline leaf's resolved `default:` or
 		 * nothing, a body's always text (`resolveBodyGhost`). */
 		placeholder?: string;
-		/** Stable identity for the registry, stamped on the DOM node so a remount is
-		 *  visible as one. */
+		/** Registry identity, stamped on the DOM node so a remount is visible as one. */
 		leafKey: string;
 		onFocus?: (addr: Addr) => void;
 		onCaretMove?: (addr: Addr, pos: number) => void;
@@ -79,9 +77,9 @@
 	// locale swap reaches a mounted table without remounting the leaf and losing the caret.
 	const t = wording();
 
-	/** The insert menu's live state, pushed by the leaf's trigger plugin: the menu is
-	 * the leaf's surface rather than the shell's (VISUAL_EDITOR §Chrome). A constrained
-	 * leaf never receives one, the trigger mounting on the block schema alone. */
+	/** Pushed by the leaf's trigger plugin: the menu is the leaf's surface rather than
+	 * the shell's (VISUAL_EDITOR §Chrome). A constrained leaf never receives one, the
+	 * trigger mounting on the block schema alone. */
 	let slash: SlashState | undefined = $state();
 
 	// The codec's own schema predicate (`createField`: `plaintext` implies `inline`), so
@@ -91,8 +89,8 @@
 
 	let controller: FieldController | undefined;
 
-	/** Take the caret: what the label's click calls. The controller's focus, not the
-	 * container's, which leaves the PM selection unplaced. */
+	/** What the label's click calls. The controller's focus, not the container's, which
+	 * leaves the PM selection unplaced. */
 	export function focus(): void {
 		controller?.focus();
 	}
@@ -153,16 +151,15 @@
 		/* Containing block for the arrival wash's inset child (`core/bloom.ts`). */
 		position: relative;
 	}
-	/* A leaf the inline schema does not constrain is prose rather than a cell in a row of
-	 controls, so it opens at three line boxes and grows: the ghost takes the first,
-	 leaving room under it. `1em`, not a size rung, which is the rule below's to name.
+	/* A leaf the inline schema does not constrain grows, and opens at one line box: the
+	 empty leaf is the height its first line will take, so the first keystroke displaces
+	 nothing below it. `1em`, not a size rung, which is the rule below's to name.
 
-	 On the editable rather than on the wrapper, which is what makes those lines part of
-	 the body: height the wrapper holds is height outside the `contenteditable`, where a
-	 press lands no caret. Inside it, the browser answers a press past the last line at
-	 the end of it. */
+	 On the editable rather than on the wrapper, which is what makes that line part of the
+	 body: height the wrapper holds is height outside the `contenteditable`, where a press
+	 lands no caret. */
 	.qm-prose-block :global(.ProseMirror) {
-		min-height: calc(1em * var(--_qm-leading-body) * 3);
+		min-height: calc(1em * var(--_qm-leading-body));
 	}
 	/* Paper, and the withheld box is what says so. Not `block` alone: `inline` is the
 	 quill's to declare, so a schema omitting it on a richtext field puts a block leaf in

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

@@ -28,8 +28,7 @@ interface Props {
     /** Ghost shown on the empty leaf: an inline leaf's resolved `default:` or
      * nothing, a body's always text (`resolveBodyGhost`). */
     placeholder?: string;
-    /** Stable identity for the registry, stamped on the DOM node so a remount is
-     *  visible as one. */
+    /** Registry identity, stamped on the DOM node so a remount is visible as one. */
     leafKey: string;
     onFocus?: (addr: Addr) => void;
     onCaretMove?: (addr: Addr, pos: number) => void;

package/dist/visual/TipsCard.svelte

@@ -81,13 +81,11 @@
 				{/each}
 			</div>
 		{/if}
-		<!-- One button, and its action is where the cursor stands: the set is walked,
-		     and its end is the exit. -->
 		<button type="button" class="qm-icon-btn qm-tips-action" onclick={advance}>
 			{#if isLast}
-				{t.strings.tipsDismiss} <Icon name="x" size={GLYPH} />
+				{t.strings.tipsDismiss} <Icon name="trash-2" size={GLYPH} />
 			{:else}
-				{t.strings.tipsNext} <Icon name="chevron-right" size={GLYPH} />
+				{t.strings.tipsNext} <Icon name="arrow-right" size={GLYPH} />
 			{/if}
 		</button>
 	</div>
@@ -100,41 +98,36 @@
 	 guidance is: the main card's, not a card of its own. Still in-flow, no edge, no
 	 lift.
 
-	 A typewritten slip, and that is the whole of the treatment: the monospace face and
-	 a warmth over the card's own surface, which together say draft rather than
-	 document. Both come off the tips rungs (`core/theme.css`), which are mixes over
-	 the surface and the ink the consumer already tuned, so the card cannot end up less
-	 legible than the editor around it.
+	 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 top inset takes the tuck back, so the space above the tip is the space below
-	 the foot.
-
-	 The reading rungs, size and leading both: a tip is a passage that wraps, so it
-	 takes the size a field's value is read at rather than the label rung a line of
-	 chrome would take. */
+	 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. */
 	.qm-tips {
 		margin-top: calc(var(--_qm-radius) * -1);
-		border-radius: 0 0 var(--_qm-radius) var(--_qm-radius);
-		padding: calc(var(--_qm-space-3) + var(--_qm-radius)) var(--_qm-space-3) var(--_qm-space-3);
+		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);
 		background: var(--_qm-tips-surface);
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space-2);
-		font-family: var(--_qm-font-mono);
+		font-family: var(--_qm-tips-font);
 		font-size: var(--_qm-text-body);
 		line-height: var(--_qm-leading-body);
 		color: var(--_qm-tips-ink);
 	}
+	/* One line held open, so the foot does not step up under a shorter tip. */
+	.qm-tips-body {
+		min-height: calc(var(--_qm-leading-body) * 1em);
+	}
 	/* The rendered tip is injected DOM (the codec's `toDOM` output), so its element
 	 styles are `:global`: the compiler never sees these tags in the markup. Restated
 	 from `core/codec/prose.css`, which is where they are argued and which cannot reach
-	 here: its selectors are scoped to `.ProseMirror` and a tip is not a view. Two
-	 deliberate divergences, and both follow from the card being read rather than
-	 edited: the link takes no underline, since a hidden `href` costs its reader
-	 nothing; and `code` takes a chip where a leaf gives it a face, since the face is
-	 already the card's own and a token like `- ` has nothing else to set it apart.
-	 `pre-wrap` is what keeps the significant space inside such a token: collapsed, the
-	 chip closes on the word after it. */
+	 here: its selectors are scoped to `.ProseMirror` and a tip is not a view. The one
+	 divergence: `code` takes a chip and a warmer ink where a leaf gives it a face, the
+	 face here being the card's own already. `pre-wrap` keeps the significant space
+	 inside a token like `- `; collapsed, the chip closes on the word after it. */
 	.qm-tips-body :global(p) {
 		margin: 0;
 	}
@@ -142,12 +135,14 @@
 		font-family: inherit;
 		font-size: inherit;
 		white-space: pre-wrap;
-		padding: 0 var(--_qm-space-half);
+		padding: 0 var(--_qm-space);
 		border-radius: var(--_qm-radius-inner);
-		background: var(--_qm-tips-chip);
+		background: var(--_qm-tips-fill);
+		color: var(--_qm-tips-ink-warm);
 	}
 	.qm-tips-body :global(a) {
 		color: inherit;
+		text-decoration: underline;
 	}
 	.qm-tips-foot {
 		display: flex;
@@ -158,49 +153,51 @@
 	.qm-tips-dots {
 		display: flex;
 		align-items: center;
+		gap: var(--_qm-space-half);
 		margin-right: auto;
 	}
-	/* Random access to the set, and the pitch is the tap floor: 2.5.8's spacing
-	 exception measures centre distance, which is the number the floor already fixes,
-	 so a tighter row of dots buys nothing it does not immediately owe back. Target and
-	 mark are therefore not one rectangle (the floor is the button, the dot is drawn
-	 inside it), which is also why the hover reads on the mark rather than filling the
-	 box a `.qm-icon-btn` would. */
+	/* Random access to the set, drawn as one cluster: a row of marks spaced to the tap
+	 floor reads as a row of controls. So the target is the mark plus its padding, under
+	 the floor, which 2.5.8 allows on the equivalent-control exception rather than on
+	 the spacing one — the foot's button clears the floor and walks the whole set from
+	 the tip the card opens on, so no tip is reachable only by a dot. State is three
+	 steps of one ink on the recede ladder, never a second hue and never a size: a dot
+	 that grew would move the row it sits in. */
 	.qm-tips-dot {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-		min-width: var(--_qm-tap-min);
-		min-height: var(--_qm-tap-min);
-		border: none;
-		background: transparent;
-		cursor: pointer;
-	}
-	/* Three steps of one ink on the recede ladder (rest, hover, current), never a
-	 second hue and never a size: a dot that grew would move the row it sits in. */
-	.qm-tips-dot::before {
-		content: '';
+		box-sizing: content-box;
 		width: 5px;
 		height: 5px;
+		padding: var(--_qm-space-half);
+		border: none;
 		border-radius: var(--_qm-radius-pill);
 		background: currentColor;
+		background-clip: content-box;
 		opacity: var(--_qm-opacity-idle);
+		cursor: pointer;
 		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
-	.qm-tips-dot:hover::before {
+	.qm-tips-dot:hover {
 		opacity: var(--_qm-opacity-muted);
 	}
-	.qm-tips-dot[aria-current='true']::before {
+	.qm-tips-dot[aria-current='true'] {
 		opacity: 1;
 	}
-	/* Box and disabled state come from `.qm-icon-btn` (controls.css); the foot's
-	   button carries a label, so it widens its inset and stays on the card's own type
-	   and ink rather than the family's body rung and the callers' own colours. */
+	/* Box and disabled state come from `.qm-icon-btn` (controls.css); what this
+	   overrides is everything the family sets for a glyph among callers of its own
+	   colour, a labelled control on a warm card wanting none of it. The hover included:
+	   the family's neutral step would read as lent from the document above. Unlayered,
+	   so it beats the base rule without out-specifying it. */
 	.qm-tips-action {
 		padding: var(--_qm-space-half) var(--_qm-space-2);
 		font-family: inherit;
 		font-size: inherit;
 		color: inherit;
+		transition:
+			color var(--_qm-duration-fast) var(--_qm-ease-reverse),
+			background-color var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	.qm-tips-action:hover {
+		color: var(--_qm-tips-ink-warm);
+		background: var(--_qm-tips-fill);
 	}
 </style>