@quillmark/svelte 0.2.0 → 0.3.1

package/dist/visual/TipsCard.svelte

@@ -2,9 +2,9 @@
  The ephemeral tips card. Renders the
  `$ext.editor.tips` channel one tip at a time: dots reach any tip in the set, and the
  foot's one button advances until the last, where it becomes the dismiss. Dismissal
- CLEARS the channel in the Document, so the card is gone and does not reappear.
+ clears the channel in the Document, so the card is gone and does not reappear.
 
- The cursor is LOCAL state, not the channel. Advancing writes nothing: a per-tip
+ The cursor is local state, not the channel. Advancing writes nothing: a per-tip
  write would round-trip the boundary, re-derive the card tree, and dirty the
  document (firing a consumer's autosave) on what is a read gesture. Exactly one
  write happens, at dismissal, and this component unmounts with it, so the cursor
@@ -40,7 +40,7 @@
 	const index = $derived(Math.min(cursor, tips.length - 1));
 	const isLast = $derived(index >= tips.length - 1);
 
-	// The tip STRING is derived before the effect reads it, and that is load-bearing.
+	// The tip string is derived before the effect reads it, and that is load-bearing.
 	// Reading `tips[index]` inside the effect makes the parent's `model` derive the
 	// dependency (a fresh object every `revision` bump) so the effect would re-run
 	// on every unrelated commit, re-crossing the WASM boundary and rebuilding this
@@ -81,60 +81,68 @@
 				{/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>
 </aside>
 
 <style>
-	/* ATTACHED to `main`, not a block beside it: a square top pulled up by the radius,
+	/* 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 seam is `main`'s own bottom hairline, and 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, one hairline, no lift, no fill beyond the card recipe. It
-	 reads as guidance rather than as a field by TONE and TYPE: the label rung in the
-	 muted label colour; not by a badge or an accent. It mints no token of its own;
-	 every value here is an existing dial.
+	 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.
 
-	 The top inset takes the tuck back, so the space above the tip is the space below
-	 the foot.
+	 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.
 
-	 Leading is the reading rung, not the tight one the label SIZE would suggest: a
-	 tip is a passage that wraps, and the two axes are independent. */
+	 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: var(--_qm-border-width) solid var(--_qm-border);
-		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);
-		background: var(--_qm-surface-raised);
+		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-size: var(--_qm-text-label);
+		font-family: var(--_qm-tips-font);
+		font-size: var(--_qm-text-body);
 		line-height: var(--_qm-leading-body);
-		color: var(--_qm-ink-label);
+		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. Three
-	 rules 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. The one deliberate divergence is the link, which takes no underline:
-	 a tip is not editable, so a hidden `href` costs its reader nothing. */
+	 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. 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;
 	}
 	.qm-tips-body :global(code) {
-		font-family: var(--_qm-font-mono);
+		font-family: inherit;
+		font-size: inherit;
+		white-space: pre-wrap;
+		padding: 0 var(--_qm-space);
+		border-radius: var(--_qm-radius-inner);
+		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;
@@ -145,47 +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 and so widens its inset and takes the meta type rung. */
+	/* 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-size: var(--_qm-text-label);
-		color: var(--_qm-ink-label);
+		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>

package/dist/visual/VisualEditor.svelte

@@ -3,11 +3,11 @@
  `doc` prop remounts the editor under it, so a consumer holding one mount across
  two documents gets a surface that names the live handle.
 
- IT IS A `{#key}`, NOT A RESEED. The state a swap invalidates is not one field:
+ It is A `{#key}`, not A reseed. The state a swap invalidates is not one field:
  composable cards key on session id, the main card is keyed on nothing, and each
  prose leaf mounts once per stable leaf key with `createField` closing over the
  `doc` it mounted against — so after an in-place swap the main card's leaves
- commit to the PREVIOUS handle. Reseeding by hand means threading a generation
+ commit to the previous handle. Reseeding by hand means threading a generation
  token through every leaf key and resetting the id state, the commit-error map,
  the active address, the leaf registry, the card refs and any pending scroll,
  which is a remount spelled out one field at a time. This spells it as one.
@@ -16,10 +16,10 @@
  unregisters, cancels its pending ticks, and only then releases, so a continuation
  awaiting a flush across the swap runs against nothing.
 
- `quill` is NOT part of the key: the schema is re-read on every derive, so a quill
+ `quill` is not part of the key: the schema is re-read on every derive, so a quill
  swap re-projects correctly on its own, and keying on it would throw away a card
  tree that did not need rebuilding. What it cannot do is re-mount the leaves, so a
- quill swapped WITHOUT a doc swap reports `rebind-ignored` rather than passing
+ quill swapped without a doc swap reports `rebind-ignored` rather than passing
  silently.
 -->
 <script lang="ts">
@@ -34,7 +34,7 @@
 
 	let inner = $state<VisualEditorInner | undefined>();
 
-	// The pair the CURRENT mount bound to. Re-read on each re-key rather than held
+	// The pair the current mount bound to. Re-read on each re-key rather than held
 	// from the first mount: after a doc swap the incoming mount binds whatever quill
 	// came with it, and comparing against the original would report a pairing that
 	// is correct.
@@ -62,7 +62,7 @@
 
 	// The instance surface, every member a pass-through to the live mount: a call
 	// landing between a swap and the incoming mount is a no-op rather than a throw,
-	// which is what lets a host hold ONE `bind:this` across two documents.
+	// which is what lets a host hold one `bind:this` across two documents.
 
 	/** Land a preview pick: a caret where the payload carries one and the leaf can
 	 *  spend it, an array element where the address names one, a focus otherwise. */