@quillmark/svelte 0.3.0 → 0.3.2

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
@@ -170,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/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>
@@ -97,44 +95,45 @@
 	/* 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.
 
-	 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.
+	 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 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.
 
-	 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. 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-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: 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-5) 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 +141,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 +159,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>