@quillmark/svelte 0.7.2 → 0.8.0

package/dist/core/codec/prose.css

@@ -76,7 +76,7 @@ li.ProseMirror-selectednode::after {
    reads as set apart without a fill or a second box. */
 .ProseMirror blockquote {
 	padding-left: var(--_qm-space-3);
-	border-left: var(--_qm-border-width) solid var(--_qm-border);
+	border-left: var(--_qm-vertical-width) solid var(--_qm-border);
 }
 
 /* ── The positive half ───────────────────────────────────────────────────────
@@ -425,11 +425,11 @@ li.ProseMirror-selectednode::after {
 	top: 100%;
 	height: var(--_qm-tap-min);
 }
-/* The reveal, in two rungs, one per question (CODEC §"The table island"). The band comes
-   up muted while the pointer is anywhere on the island, answering whether there is one at
-   all; a control raises to full while the pointer is on it, while it holds the focus, or
-   while it is what a gesture is about — the selected line's grip, and the lifted one,
-   which is drawn through a drag the pointer has travelled off — answering which line.
+/* The reveal is the control's own (CODEC §"The table island"): one comes up while the
+   pointer is on that control, while it holds the focus, or while it is what a gesture is
+   about — the selected line's grip, and the lifted one, which is drawn through a drag the
+   pointer has travelled off. The controls' boxes meet at no point, so what is drawn is
+   the one line the pointer has picked out.
 
    Opacity rather than absence, so every control keeps its box and is hit-tested wherever
    it sits. A grip's reach is the pointer's alone and it holds no focus, so it carries no
@@ -441,12 +441,6 @@ li.ProseMirror-selectednode::after {
 	opacity: 0;
 	transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
 }
-/* `:where` on the island, so the first rung carries the specificity of the control alone
-   and the second one outranks it. Unwrapped, the descendant selector is the heavier of
-   the two and a hovered grip stays muted under the pointer that is on it. */
-:where(.qm-table-island:hover) :is(.qm-table-grip, .qm-table-add) {
-	opacity: var(--_qm-opacity-muted);
-}
 .qm-table-add:is(:hover, :focus-visible),
 .qm-table-grip:is(:hover, [aria-pressed='true'], .qm-table-lifted) {
 	opacity: 1;

package/dist/core/theme.css

@@ -280,14 +280,19 @@
 	--_qm-reveal: 500ms cubic-bezier(0.4, 0, 0.2, 1);
 
 	/* ── Geometry ──────────────────────────────────────────────────────────*/
-	/* One stroke width for every edge the chrome draws: a card's, a control's,
-	   and the verticals nested inside it alike. A threshold rather than a
-	   rhythm choice, like the tap floor: a hairline is a hairline at any
-	   `--qm-space`, so it does not derive from a dial. It exists as a rung because
-	   the nesting ladder's whole claim is that a card's edge, a section's vertical
-	   and a subform's are one stroke at three depths, and `check:style`'s
-	   border-width axis can only hold that against a token. */
+	/* One stroke width for every edge the chrome draws and every rule it ranks
+	   with: a card's, a control's, the two closing a card's payload. A threshold
+	   rather than a rhythm choice, like the tap floor: a hairline is a hairline at
+	   any `--qm-space`, so neither derives from a dial. Both exist as rungs because
+	   `check:style`'s border-width axis can only hold a stroke against a token. */
 	--_qm-border-width: 1px;
+	/* Half a step over it, for the verticals alone — a section's, a subform's, a
+	   blockquote's. What a vertical states is depth, and depth is the one thing a
+	   reader has to find in a dense card; the strokes that close a block or rank two
+	   stay at the hairline, so the ladder is what carries the extra weight. Half,
+	   because a whole step reads as a different kind of line rather than the same
+	   one doing more work. */
+	--_qm-vertical-width: 1.5px;
 	--_qm-radius: var(--qm-radius, 8px);
 	/* The interior corner, and half is the relationship rather than the number: a
 	   corner inside a corner reads as nested only while it is visibly tighter, and
@@ -324,17 +329,12 @@
 	--_qm-tail: 40vh;
 	/* WCAG 2.5.8's 24x24 pointer-target floor. A rung rather than a sixth step on
 	   the space scale: it is a threshold the spec fixes, not a rhythm choice, so
-	   it does not move when `--qm-space` does. Both button families read it, so the
+	   it does not move when `--qm-space` does. Every button family reads it, so the
 	   floor is one number instead of one expression per control. */
 	--_qm-tap-min: 24px;
-	/* The reorder/delete glyph. A rung because the card header's
-	   right hang is half the difference between this and the tap floor: the glyph
-	   centres in a target sized by the floor, so what stands between it and the
-	   card's gutter is an arithmetic of the two, and a literal on either side is a
-	   balance that silently breaks when the glyph moves. Sized in CSS rather than
-	   through the icon's `size`, so the hang and the glyph read one number. Scoped to
-	   the control pair: the hint and the format marks take their own sizes, and a
-	   rung claiming to be every glyph would be false at three of them. */
+	/* The chrome glyph: a chip's, and the in-well remove's. Sized in CSS rather than
+	   through the icon's `size`, so a stylesheet beats the SVG presentation attribute
+	   and one rung is the whole of what a control draws. */
 	--_qm-glyph-control: 14px;
 
 	/* ── Type ────────────────────────────────────────────────────────────────

package/dist/visual/ArrayField.svelte

@@ -5,7 +5,7 @@
  by `items.type`: `richtext` / `plaintext` → a prose element
  ({@link ProseValue}), `object` → a summary row that opens onto a subform,
  everything else → a text input. The
- add affordance sits in the label header row (space-between with the field label);
+ add chip sits in the label header row (space-between with the field label);
  {@link Field} skips its own label for array controls and hands this component the
  label track with it.
 
@@ -352,7 +352,7 @@
 		{/if}
 		<button
 			type="button"
-			class="qm-add-el qm-add-affordance qm-tap-floor"
+			class="qm-add-el qm-chip qm-focus-ring qm-tap-floor"
 			bind:this={addEl}
 			onclick={add}>{t.strings.arrayAdd}</button
 		>
@@ -442,10 +442,9 @@
 		gap: var(--_qm-space);
 	}
 	/* The array's first line is the row's label line: this component owns the label
-	 track (Field.svelte), so the header has to measure what a `.qm-field-label-row`
-	 measures or an array shares a row with a scalar and their labels sit apart. The
-	 label is the same component; what had to give was the add affordance's height,
-	 below. */
+	 track (Field.svelte). Arrays never pack (`packable`), so the chip's tap floor is
+	 free to size the header; a caption on this line would have had to match
+	 `.qm-field-label-row`. */
 	.qm-array-header {
 		display: flex;
 		align-items: center;
@@ -584,29 +583,22 @@
 		color: var(--_qm-ink-label);
 		font-style: italic;
 	}
-	/* It rests dim and comes up on hover of the field rather than of itself: one trigger
-	 at the head of a row of controls is found by looking at the array, not by grazing its
-	 first line.
-
-	 The box is the label's line box and the target is `.qm-tap-floor`'s (controls.css): a
-	 target-sized box would stand the header 8px taller than the `.qm-field-label-row`
-	 beside it in a shared row and put the two labels on different lines.
-
-	 The label rung in place of the family's body rung, which the family invites: it reads
-	 as one more thing on the label line rather than as a control from the row below. */
+	/* The label line's own type: size, weight and leading are `.qm-field-label`'s, so
+	 the two read as one register. Inner radius: the chip family is the card's, and this
+	 box is a line of type. The chip's tap floor is given back (`.qm-tap-floor`),
+	 and the padding with it, so the drawn box is the line and the target is the floor.
+	 It rests dim and comes up under the pointer; empty, it is the way in. */
 	.qm-add-el {
 		padding: 0 var(--_qm-space);
-		font-size: var(--_qm-text-label);
+		font-weight: var(--_qm-weight-mid);
+		line-height: var(--_qm-leading-tight);
+		border-radius: var(--_qm-radius-inner);
 		opacity: var(--_qm-opacity-idle);
 	}
-	.qm-array:hover .qm-add-el,
+	.qm-add-el:hover,
 	.qm-add-el:focus-visible {
 		opacity: 1;
 	}
-	/* Empty, the rows box is `display: none` and the field is a label and this trigger:
-	   nothing left for it to compete with, and nothing else in the field to act on. So
-	   it rests full-strength there and takes the recede back once it heads a list. A
-	   receded trigger beside no content reads as a caption rather than as a way in. */
 	.qm-array.empty .qm-add-el {
 		opacity: 1;
 	}

package/dist/visual/BooleanField.svelte

@@ -38,7 +38,7 @@
 
 <span class="qm-switch-wrap">
 	<Switch.Root
-		class="qm-switch qm-focus-ring"
+		class="qm-switch qm-focus-ring qm-tap-floor"
 		checked={local.value}
 		{id}
 		aria-label={id ? undefined : label}
@@ -55,6 +55,11 @@
 <style>
 	/* A primitive renders its own element, which a scoped selector cannot reach:
 	 styled through the wrapper with `:global`. */
+	/* The track is the drawn box and the target is `.qm-tap-floor`'s (controls.css): a
+	 switch is a mark standing in a field's row, so its height is the track's, where WCAG
+	 2.5.8's floor is half again that. The `<label for>` beside it forwards a press but
+	 stands at the label rung, so it is no taller: without the floor no region on the
+	 surface reaches this control at the size every other control on it holds. */
 	.qm-switch-wrap :global(.qm-switch) {
 		display: inline-flex;
 		align-items: center;

package/dist/visual/Card.svelte

@@ -408,33 +408,54 @@
 
 <style>
 	/* 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. The inline half reads `--_qm-nest` at that same number: this edge is the
-	 nesting ladder's first stroke, and its inset the first step. */
+	 hairline closes it (ARCHITECTURE §Styling). The block half is the same rung as the
+	 gap: the payload stands that far off the card's edge and off the body below it. The
+	 header insets itself to the section-heading column (`.qm-card-header`). The inline
+	 half stands a step tighter than the nesting rung the verticals inside keep: this
+	 edge closes the block rather than nesting one, and the rules it holds run that much
+	 further for it. */
 	.qm-card {
 		border: var(--_qm-border-width) solid var(--_qm-border);
 		border-radius: var(--_qm-radius);
-		padding: var(--_qm-space-3) var(--_qm-nest);
+		padding: var(--_qm-space-3) var(--_qm-space-2);
 		background: var(--_qm-surface);
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space-3);
 	}
+	/* Headerless, the payload faces that edge with nothing between. A field row
+	 leading it stands the edge's own inset off the top, as it does off the side:
+	 this rung plus the section's block padding is the inline inset. A card that
+	 opens on its body keeps the full inset — prose is neither a heading nor a
+	 field row. */
+	.qm-card.qm-main:has(> .qm-card-body > .qm-card-meta:first-child) {
+		padding-top: var(--_qm-space);
+	}
+	/* A section heading leading it: the vertical starts at the content's
+	 top-left, so the top inset is the inline one and the tip is a square
+	 corner of the card. */
+	.qm-card.qm-main:has(> .qm-card-body > .qm-card-meta:first-child > .qm-groups:first-child) {
+		padding-top: var(--_qm-space-2);
+	}
 	.qm-card-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		gap: var(--_qm-space-2);
+		/* The group's vertical plus the rung the chevron stands off it: the title
+		 shares that column. Inline only. The block pull is half the card's block
+		 inset, so the header sits that far off the hairline and the rule. */
+		padding-inline: calc(var(--_qm-space) + var(--_qm-vertical-width));
+		margin-block: calc(-1 * var(--_qm-space-3) / 2);
 	}
-	/* The overhang is the tap target's own centring given back, so the glyphs sit on the
-	 card's gutter rather than the targets around them. It is the fill that crosses the
-	 line, not a box: an icon button rests unboxed and fills only under the pointer. */
 	.qm-card-header-right {
 		display: flex;
 		align-items: center;
 		gap: var(--_qm-space-2);
-		margin-right: calc(-1 * (var(--_qm-tap-min) - var(--_qm-glyph-control)) / 2);
+		/* The overhang is the tap target's own centring given back, so the delete
+		 glyph sits on the header's inset rather than the pad around it. The fill is
+		 what crosses the line. */
+		margin-inline-end: calc(-1 * (var(--_qm-tap-min) - var(--_qm-glyph-control)) / 2);
 	}
 	/* Focus as well as hover, so a caret in any leaf, the title, or a chevron holds the
 	 reveal: hover alone would strand the pair on keyboard and touch. */
@@ -445,7 +466,7 @@
 	/* The rename hit region is the header's free width at full height, so a press
 	 anywhere left of the controls enters the title edit. `align-self: stretch` beats the
 	 header's centring, which is also what keeps the target legal with no padding: WCAG
-	 2.5.8's floor is the row's, which the controls hold at `--_qm-tap-min`. */
+	 2.5.8's floor is the row's, which the chips hold at `--_qm-tap-min`. */
 	.qm-card-rename {
 		flex: 1;
 		min-width: 0;
@@ -504,24 +525,21 @@
 		flex-direction: column;
 		gap: var(--_qm-space-3);
 	}
-	/* Where two sections meet the distance is three of one rung — the cap closing the one
-	 above, this gap, the cap opening the one below — the same whether either side is a
-	 group or the ungrouped block. That total is what the fields inside a section keep
-	 between their rows (`.qm-fields` row-gap), so a section boundary stands no further
-	 apart than a field boundary: what ranks them is the stroke, not the air. */
 	.qm-card-meta,
 	.qm-groups {
 		display: flex;
 		flex-direction: column;
-		gap: var(--_qm-space);
 	}
-	/* One rung in two places: what a rule insets its own edge by, and what a vertical
-	 reaches past the box it is drawn on. `--_qm-nest` is the distance a stroke stands off
-	 the content it holds — the same one the fields keep off the vertical inline — and a
-	 section's box already spends `--_qm-space` of it capping its own ends, so both spend
-	 the difference. That is what squares the corner: the field stands the same rung off
-	 the rule above it as off the vertical beside it. */
+	/* One rung between the payload's two kinds of section, and none inside the accordion:
+	 what stands one disclosure row off the next is the two headers' own block padding and
+	 nothing else, so the rows tile and their targets with them. A run of one-line rows
+	 wants the tighter rhythm — the `--_qm-space-3` the fields keep between their own rows
+	 is calibrated for a label over a well, and reads as a float between two lines of text.
+
+	 `--stroke-reach` is what a box standing a field row off a rule has left to spend: the
+	 rung is `--_qm-nest`, of which its own block padding is already `--_qm-space`. */
 	.qm-card-meta {
+		gap: var(--_qm-space);
 		--stroke-reach: calc(var(--_qm-nest) - var(--_qm-space));
 	}
 	/* The card's two horizontals, and ranking is the one thing a horizontal is for: they
@@ -530,27 +548,35 @@
 	 conditional on what it ranks against: `main` is headerless, and a card with no body
 	 has nothing under the payload to divide it from.
 
-	 The inset is the rule's own, so it goes with it: a card drawing one horizontal insets
-	 that end and not the other. The air outside the pair is the `--_qm-space-3` the card
-	 spends between its blocks. */
+	 Neither insets: a rule is drawn on the edge of the box it faces, and the air is that
+	 box's own. So the section carries what its ink stands off a rule — the inset of the
+	 ink facing it, which is what squares the corner: `--_qm-nest` for a field row,
+	 `--_qm-space` for a heading, each the rung that ink stands off a vertical inline. The
+	 air outside the pair is the `--_qm-space-3` the card spends between its blocks. */
 	.qm-meta-top {
 		border-top: var(--_qm-border-width) solid var(--_qm-border);
-		padding-top: var(--stroke-reach);
 	}
 	.qm-meta-bottom {
 		border-bottom: var(--_qm-border-width) solid var(--_qm-border);
-		padding-bottom: var(--stroke-reach);
 	}
-	/* A section's share of the boundary between sections: one rung at each end, so two of
-	 them stand three of it apart whichever kind they are (above). The accordion spends the
-	 same rung from its header and its panel, where it also caps the vertical those two
-	 edges hold.
+	/* A section's share of the boundary between sections, one rung at each end. The
+	 accordion spends the same rung from its header and its panel, where it also caps the
+	 vertical those two edges hold.
 
-	 No stroke and no inset: fields declaring no `ui.group` are the card's own, at the rank
-	 its body is at, and the card's edge is the only container there is to state. A
-	 vertical here would mark a section a reader has no name for. */
+	 No stroke: a vertical would mark a section a reader has no name for. The start
+	 inset is the heading's — the group's vertical plus the rung the chevron stands
+	 off it — so a top-level field and a section heading share a column. */
 	.qm-section {
 		padding-block: var(--_qm-space);
+		padding-inline-start: calc(var(--_qm-space) + var(--_qm-vertical-width));
+	}
+	/* Where it faces a rule, the rung a heading already stands off one. The fields
+	 sit on the heading column, not the card's edge. */
+	.qm-meta-top > .qm-section:first-child {
+		padding-top: var(--_qm-space-2);
+	}
+	.qm-meta-bottom > .qm-section:last-child {
+		padding-bottom: var(--_qm-space-2);
 	}
 	/* Two query containers, one per kind of section, so capacity follows the width the
 	 fields actually get: a panel's inset makes that narrower than the card. */
@@ -597,47 +623,72 @@
 	 than absent, so a toggle moves no text — and closed, there is nothing under the header
 	 for it to gather.
 
-	 The stroke caps at `--_qm-nest`, at both ends and on every section alike. Its box
-	 already spends `--_qm-space` of that — the header's block padding above, the panel's
-	 below, the rung the ungrouped section spends on its own two ends — so the rest is
-	 grown here and handed straight back as margin: the stroke lengthens, and a section
-	 boundary keeps the three rungs it stood at. What the stroke reaches into is the air of
-	 that boundary, or, where the section is the payload's first or last, exactly the inset
-	 its rule took — so it lands on the rule at a corner with nothing drawn longer for it.
+	 A free end of the stroke caps at `--_qm-space`, the rung the subform's own vertical
+	 caps at (`ObjectField`), grown as padding and handed straight back as margin so the
+	 stroke lengthens and no boundary moves. Above, that is also the rung the header stands
+	 off it, so the top end is the same number whether it caps free or lands on a rule.
 	 One section open at a time, so no two strokes are ever visible to meet in between. */
 	.qm-group {
 		display: flex;
 		flex-direction: column;
-		border-left: var(--_qm-border-width) solid transparent;
-		padding-block: var(--stroke-reach);
-		margin-block: calc(-1 * var(--stroke-reach));
-		transition: border-color var(--_qm-duration-slow) var(--_qm-ease-reverse);
-	}
+		border-left: var(--_qm-vertical-width) solid transparent;
+		padding-bottom: var(--_qm-space);
+		margin-bottom: calc(-1 * var(--_qm-space));
+		transition:
+			border-color var(--_qm-duration-slow) var(--_qm-ease-reverse),
+			padding-bottom var(--_qm-duration-slow) var(--_qm-ease-reverse),
+			margin-bottom var(--_qm-duration-slow) var(--_qm-ease-reverse);
+	}
+	/* Open, the cap is air as well as stroke: a section ending on a field row stands the
+	 longer rung off what follows, and three of `--_qm-space` are what that comes to — the
+	 panel's own, this cap, and the next header's. Shut, a section ends on its header and
+	 stands the header's rung, so there is nothing to cap and the padding is handed back. */
 	.qm-group.qm-open {
 		border-left-color: var(--_qm-border);
+		margin-bottom: 0;
+	}
+	/* The one end that lands on a rule, where the padding is real and the rule is this
+	 box's own bottom edge — so the stroke ends on the rule at every frame of a fold rather
+	 than at the two ends of one, and the fields inside stand `--_qm-nest` off it. Shut,
+	 the box ends on the header's block padding and the rule takes the heading's rung
+	 there, the same one the rule above it takes. */
+	.qm-meta-bottom > .qm-groups:last-child > .qm-group:last-child {
+		padding-bottom: 0;
+		margin-bottom: 0;
+	}
+	.qm-meta-bottom > .qm-groups:last-child > .qm-group:last-child.qm-open {
+		padding-bottom: var(--stroke-reach);
 	}
-	/* Symmetric vertical padding at the tightest rung that still clears WCAG 2.5.8's
-	 24×24 floor: the header is the whole row, so adjacent labels share one rhythm with no
-	 dead strip outside the button. Horizontal is the nesting step left and zero right —
-	 left, because the chevron opening the heading starts where the fields under it start,
-	 so everything the section holds stands off its vertical by one rung and the corner the
-	 stroke closes against a rule reads square; right, because the row is the target and an
-	 inset there is target given back. What the glyph gives up by taking the step is the
-	 gutter: at a tighter rung it stands in the clearance itself, with only its own bearing
-	 between ink and stroke, and the rotation swaps which bearing faces which.
+	/* One rung on three sides and zero on the end, the end because the row is the target
+	 and an inset there is target given back. The rung is `--_qm-space` in both axes, and
+	 neither is free: the block padding is the tightest that still clears WCAG 2.5.8's
+	 24×24 floor, and it is the whole air a heading opening the payload keeps under its
+	 rule, which a rule cannot inset past — so the inline inset is that same number or the
+	 corner is square on one axis alone. The heading rides the vertical there, one
+	 nesting step out from the fields under it, which is what states that it holds them.
+	 What the glyph gives up for the step is the gutter: it stands in the clearance itself,
+	 with only its own bearing between ink and stroke, and the rotation swaps which bearing
+	 faces which.
 
 	 `font: inherit` because a UA button inherits no face, then the body rung, one step
 	 over the field labels beneath it: at the label rung the two read as one register and
 	 the accordion stops looking like structure. Size, weight and leading sit after
 	 `font`, a shorthand that carries `line-height`. */
 	.qm-group-header {
+		/* Positioned, and paint is not what it buys: a group's box grows by
+		 `--stroke-reach` at both ends and hands the growth back as margin, so
+		 consecutive boxes overlap in a band at every seam, and a closed group's header
+		 ends inside the next group's box. In flow, the later sibling takes the presses
+		 that land in the band and the bottom of the header is a dead strip; positioned,
+		 the control holds its own box, and the band paints the same either way. */
+		position: relative;
 		display: flex;
 		align-items: center;
 		gap: var(--_qm-space);
 		width: 100%;
 		border: none;
 		background: transparent;
-		padding: var(--_qm-space) 0 var(--_qm-space) var(--_qm-nest);
+		padding: var(--_qm-space) 0 var(--_qm-space) var(--_qm-space);
 		font: inherit;
 		font-size: var(--_qm-text-body);
 		font-weight: var(--_qm-weight-mid);
@@ -672,11 +723,13 @@
 	.qm-group.qm-open .qm-group-panel {
 		grid-template-rows: 1fr;
 	}
-	/* The track is the accordion's only stroke that moves layout, and a reveal's landing
-	 measures its target one flush after asking — where an animating track still reads its
-	 start value. Both panels of the move are inside the group box, so the opening one and
-	 the closing one above it stand still together (`revealLeaf`). */
-	.qm-groups.qm-instant .qm-group-panel {
+	/* What a toggle moves is the panel's track, and the box's own bottom edge where the
+	 last section is the one toggling. A reveal's landing measures its target one flush
+	 after asking — where either, mid-flight, still reads its start value — so nothing
+	 about the accordion animates for it. Both panels of the move are inside the group box,
+	 so the opening one and the closing one above it stand still together (`revealLeaf`). */
+	.qm-groups.qm-instant .qm-group-panel,
+	.qm-groups.qm-instant .qm-group {
 		transition: none;
 	}
 	/* Two boxes because the axes clip differently, and the track is the only thing that

package/dist/visual/CardControls.svelte

@@ -1,12 +1,11 @@
 <!--
   Card controls, composable cards only.
   Right-aligned in the header: a move-up/move-down chevron pair revealed while the
-  pointer or the caret is in the card (each disabled at its edge), then an
-  always-visible delete. Reorder is buttons, not drag (V1). The card scopes that
-  reveal, so its condition lives in the parent's CSS; the pair keeps the narrower
-  guarantee here, that a focused chevron is a visible one. The card also hangs this
-  cluster to land these glyphs on its right gutter, and reads `--_qm-glyph-control`
-  to do it: the size is the stylesheet's below, never an attribute.
+  pointer or the caret is in the card (each disabled at its edge), then delete.
+  Reorder is buttons, not drag (V1). All three are chips (controls.css): fill arrives
+  on hover, and delete rests faded danger, full under the pointer. The card scopes
+  that reveal, so its condition lives in the parent's CSS; the pair keeps the narrower
+  guarantee here, that a focused chevron is a visible one.
 -->
 <script lang="ts">
 	import { wording } from './strings.js';
@@ -31,14 +30,14 @@
 	<div class="qm-card-reorder">
 		<button
 			type="button"
-			class="qm-icon-btn"
+			class="qm-chip qm-focus-ring"
 			title={t.strings.cardMoveUp}
 			disabled={isFirst}
 			onclick={onMoveUp}><Icon name="chevron-up" /></button
 		>
 		<button
 			type="button"
-			class="qm-icon-btn"
+			class="qm-chip qm-focus-ring"
 			title={t.strings.cardMoveDown}
 			disabled={isLast}
 			onclick={onMoveDown}><Icon name="chevron-down" /></button
@@ -46,9 +45,9 @@
 	</div>
 	<button
 		type="button"
-		class="qm-icon-btn qm-card-delete"
+		class="qm-chip qm-card-delete qm-focus-ring"
 		title={t.strings.cardDelete}
-		onclick={onDelete}><Icon name="x" /></button
+		onclick={onDelete}><Icon name="trash-2" /></button
 	>
 </div>
 
@@ -56,20 +55,14 @@
 	.qm-card-controls {
 		display: flex;
 		align-items: center;
-		gap: var(--_qm-space);
-	}
-	/* The glyph rung in CSS rather than through the icon's `size`, because the card
-	 header's right hang is arithmetic over this number and the tap floor: an
-	 attribute set in the script is a second place the size lives, and the balance
-	 breaks silently when the two disagree. A stylesheet beats an SVG presentation
-	 attribute, so the rung wins without the attribute being removed from the icon. */
-	.qm-card-controls :global(svg) {
-		width: var(--_qm-glyph-control);
-		height: var(--_qm-glyph-control);
+		gap: var(--_qm-space-half);
+		/* One compositor layer for the row. Opacity on the pair otherwise snaps
+		   that box off the header's half-pixel, against delete which never leaves
+		   the document paint. */
+		transform: translateZ(0);
 	}
 	.qm-card-reorder {
 		display: flex;
-		gap: var(--_qm-space-half);
 		opacity: 0;
 		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
@@ -80,13 +73,25 @@
 	.qm-card-reorder:focus-within {
 		opacity: 1;
 	}
-	/* Box and disabled state come from `.qm-icon-btn` (controls.css); only the ink
-	 is this component's: the reorder pair recedes to the label tone, delete
-	 carries the danger hue (scoped, so both beat the layered base). */
-	.qm-icon-btn {
-		color: var(--_qm-ink-label);
+	/* Squares: the chip's inline pad is for a label. Width and height are one rung
+	 so the hover fill is a square and the glyph sits in the middle. */
+	.qm-card-controls button {
+		width: var(--_qm-tap-min);
+		height: var(--_qm-tap-min);
+		padding: 0;
 	}
+	/* Hover fill comes from `.qm-chip` (controls.css). Idle recede is on the ink,
+	 not the box: a layer on the chip is two rasters of the same stroke, and the
+	 fill has to stay opaque. Danger mixed to the idle rung; full under the pointer. */
 	.qm-card-delete {
+		color: color-mix(
+			in oklab,
+			var(--_qm-danger) calc(100% * var(--_qm-opacity-idle)),
+			var(--_qm-surface)
+		);
+	}
+	.qm-card-delete:hover,
+	.qm-card-delete:focus-visible {
 		color: var(--_qm-danger);
 	}
 </style>

package/dist/visual/EnumField.svelte

@@ -104,8 +104,8 @@
 			aria-describedby={describedBy}
 			data-ghosted={unset ? '' : undefined}
 		>
-			{shown}
-			<Icon name="chevron-down" size={14} />
+			<span class="qm-select-shown">{shown}</span>
+			<Icon name="chevron-down" class="qm-select-chevron" size={14} />
 		</Select.Trigger>
 		<Select.Portal to={portalTarget}>
 			<Select.Content collisionBoundary={portalTarget ?? []} sideOffset={4}>
@@ -176,6 +176,21 @@
 		text-align: left;
 		cursor: pointer;
 	}
+	/* The value is one line however long it runs, and the glyph beside it keeps its rung:
+	   the box is an inset plus one line box (controls.css), which a value that wraps
+	   stands two lines tall, and a flex glyph with nothing holding it gives its width up
+	   to the text first and is gone by the time the row is tight. The pair is the same
+	   guard the element summary takes over its own title, and `min-width` is the half
+	   that lets the text shrink at all. */
+	.qm-select-shown {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.qm-select-wrap :global(.qm-select-chevron) {
+		flex-shrink: 0;
+	}
 	/* The focus ring rides `.qm-focus-ring` on the trigger (controls.css). */
 	/* Shown-never-written: the closed control reads muted while unset, matching the
 	   ghosted placeholder the text/number controls show. */

package/dist/visual/ObjectField.svelte

@@ -260,7 +260,7 @@
 		display: grid;
 		grid-template-columns: repeat(var(--cols), 1fr);
 		gap: var(--_qm-space-2);
-		border-inline-start: var(--_qm-border-width) solid var(--_qm-border);
+		border-inline-start: var(--_qm-vertical-width) solid var(--_qm-border);
 		padding-inline-start: var(--_qm-nest);
 		padding-block: var(--_qm-space);
 	}

package/dist/visual/controls.css

@@ -1,8 +1,8 @@
 /* The control recipes more than one component draws: the focus ring, the box a
- typed value sits in, and the square icon button. They live here rather than per
- component because Svelte scopes a `<style>` block to the component that owns the
- markup: a component that carries a shared class without also carrying its rule
- ships unstyled, and nothing raises it.
+ typed value sits in, the unboxed glyph, the add strip, and the chip. They live here
+ rather than per component because Svelte scopes a `<style>` block to the component
+ that owns the markup: a component that carries a shared class without also carrying
+ its rule ships unstyled, and nothing raises it.
 
  Not in `core/theme.css`: that file is the derivation (public dials in, the
  private `--_qm-*` scale out) and it mints values. This file mints none; every
@@ -12,7 +12,7 @@
  Every selector here is `:where()`-wrapped, so a recipe computes at specificity zero.
  That is the point twice over: a consumer's stylesheet beats the chrome without
  `!important`, and a component's own scoped block overrides its shared base —
- `.qm-card-delete` recolours a `.qm-icon-btn`, `.qm-json` adds the monospace face over
+ `.qm-card-delete` recolours a `.qm-chip` under the pointer, `.qm-json` adds the monospace face over
  `.qm-input` — with no specificity fight. Unlayered with it, so a host's own layered
  reset never reaches these rules whatever order the sheets load in (`core/theme.css`). */
 
@@ -116,12 +116,11 @@
 }
 
 /* The second recipe, and it is not the box above: a field is a box because you
- type into it, a button is not a box because you press it. No resting border and
- no resting fill; the
- surface arrives on hover, off the rung the enum listbox already highlights with.
- Deliberately no `color`: the callers disagree on purpose (the card delete is
- `--_qm-danger`, the array remove inherits its row's ink), and a base colour here
- would flatten that distinction rather than share a recipe.
+ type into it. A button rests with no fill; the surface arrives on hover, off the
+ rung the enum listbox already highlights with. Deliberately no `color`: the
+ callers disagree on purpose (the array remove takes danger under the pointer, the
+ tips foot inherits, a chip takes the label tone), and a base colour here would flatten
+ that distinction rather than share a recipe.
 
  `--_qm-tap-min` is WCAG 2.5.8's floor, read rather than re-expressed per
  control: `min-*` is outside every `check:style` axis, so a second expression of
@@ -132,9 +131,9 @@
  the floor means the same height whatever element carries it; and a caller that
  stretches one of these to its row gets a width the padding sits inside.
 
- Both button families are named here rather than opting in through a marker: a
- glyph button and an add affordance are not sometimes flat, so a class they could
- be built without is a class one of them will eventually miss.
+ Every button family is named here rather than opting in through a marker: a
+ glyph, an add strip and a chip are not sometimes flat, so a class they could be
+ built without is a class one of them will eventually miss.
 
  The type half is the shared rule above, which both families are named in; what
  diverges is the leading. Where the box's height is a line box, a button's is
@@ -147,7 +146,8 @@
  own block: the tips foot takes the label rung, which is that surface's decision,
  not the family's. */
 :where(.qm-icon-btn),
-:where(.qm-add-affordance) {
+:where(.qm-add-affordance),
+:where(.qm-chip) {
 	line-height: 1;
 	box-sizing: border-box;
 	min-width: var(--_qm-tap-min);
@@ -159,17 +159,19 @@
 	transition: background-color var(--_qm-duration-fast) var(--_qm-ease-reverse);
 }
 :where(.qm-icon-btn:hover:not(:disabled)),
-:where(.qm-add-affordance:hover:not(:disabled)) {
+:where(.qm-add-affordance:hover:not(:disabled)),
+:where(.qm-chip:hover:not(:disabled)) {
 	background: var(--_qm-surface-hover);
 }
 :where(.qm-icon-btn:disabled),
-:where(.qm-add-affordance:disabled) {
+:where(.qm-add-affordance:disabled),
+:where(.qm-chip:disabled) {
 	opacity: var(--_qm-opacity-idle);
 	cursor: default;
 }
 
-/* A glyph button: card reorder/delete, array remove, the field label's guidance
- marker, the tips card's foot. */
+/* A glyph riding another plane: the array remove (a slab of the well), the field
+ label's guidance marker, the tips card's foot. A named pressable is a chip. */
 :where(.qm-icon-btn) {
 	display: inline-flex;
 	align-items: center;
@@ -178,21 +180,54 @@
 	padding: var(--_qm-space-half) var(--_qm-space);
 }
 
-/* An add affordance: the between-card trigger and the array foot's. A pill rather
- than the inner radius, because it fills on hover instead of tinting ink: both rest
- unfilled on `--_qm-opacity-idle`, so a hover shifting ink alone would have little
- to shift. The recede ladder itself stays with each caller: it is driven by their
- own hover/focus state. */
+/* An add strip: the between-card trigger. A pill rather than the inner radius,
+ because it fills on hover instead of tinting ink: it rests unfilled on
+ `--_qm-opacity-idle`, so a hover shifting ink alone would have little to shift.
+ The recede ladder itself stays with the caller: it is driven by the strip's own
+ hover/focus state. The array's add is a chip. */
 :where(.qm-add-affordance) {
 	border-radius: var(--_qm-radius-pill);
-	color: var(--_qm-ink-label);
 	transition:
 		opacity var(--_qm-duration-fast) var(--_qm-ease-reverse),
 		background-color var(--_qm-duration-fast) var(--_qm-ease-reverse);
 }
-:where(.qm-add-affordance:hover) {
+
+/* A well spans and sinks. A chip hugs, and like every button it rests unfilled:
+ the fill arrives on hover. Named (a label) or unnamed (the glyph is the name) —
+ the array's add and the card header's reorder/delete. The card's own radius: a
+ chip sits on the card, where a well takes the inner because it is cut into it. A
+ glyph riding another plane stays `.qm-icon-btn`; a gap that is the insertion
+ stays `.qm-add-affordance`.
+
+ Ink is the label rung at rest and the body rung under the pointer, the same
+ ladder the add strip takes: a chip that sat at `--_qm-ink` read as a written
+ value. */
+:where(.qm-chip) {
+	font: inherit;
+	font-size: var(--_qm-text-label);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--_qm-space);
+	padding: var(--_qm-space) var(--_qm-space-2);
+	border-radius: var(--_qm-radius);
+	transition:
+		background-color var(--_qm-duration-fast) var(--_qm-ease-reverse),
+		color var(--_qm-duration-fast) var(--_qm-ease-reverse);
+}
+:where(.qm-add-affordance),
+:where(.qm-chip) {
+	color: var(--_qm-ink-label);
+}
+:where(.qm-add-affordance:hover),
+:where(.qm-chip:hover) {
 	color: var(--_qm-ink);
 }
+:where(.qm-chip svg) {
+	flex-shrink: 0;
+	width: var(--_qm-glyph-control);
+	height: var(--_qm-glyph-control);
+}
 
 /* The press floor, for a trigger standing in a line of text or a band of gutter
  rather than in a row of its own, whose drawn box is therefore smaller than the target
@@ -203,8 +238,8 @@
  construction: a pseudo-element has no node.
 
  The family's floor comes off in the same rule, carrying this class being what giving
- it up means. It sits after both families for that: same specificity, so source order
- decides. */
+ it up means. It sits after the unboxed recipes for that: same specificity, so source
+ order decides. */
 :where(.qm-tap-floor) {
 	position: relative;
 	min-width: 0;

package/dist/visual/ext.d.ts

@@ -15,5 +15,12 @@ import type { Document, CardAddr } from '@quillmark/wasm';
  * The drop is an explicit `delete`, not a stored `undefined`: whether a JS
  * `undefined` survives the wasm-bindgen crossing is not a property worth depending
  * on.
+ *
+ * **A namespace emptied of keys is removed, not stored empty.** That is
+ * `removeExtNamespace`'s one correct use: it takes the whole namespace, and there is
+ * nothing left in this one to lose. `$ext` goes with it when `editor` was the last
+ * namespace, so a document nothing has renamed or hinted carries no editor slot
+ * rather than an empty one. A patch dropping keys the namespace does not have writes
+ * nothing, so dismissing tips on a document that carries none is not a mutation.
  */
 export declare function patchEditorExt(doc: Document, addr: CardAddr, patch: Record<string, unknown>): void;

package/dist/visual/ext.js

@@ -14,16 +14,27 @@
  * The drop is an explicit `delete`, not a stored `undefined`: whether a JS
  * `undefined` survives the wasm-bindgen crossing is not a property worth depending
  * on.
+ *
+ * **A namespace emptied of keys is removed, not stored empty.** That is
+ * `removeExtNamespace`'s one correct use: it takes the whole namespace, and there is
+ * nothing left in this one to lose. `$ext` goes with it when `editor` was the last
+ * namespace, so a document nothing has renamed or hinted carries no editor slot
+ * rather than an empty one. A patch dropping keys the namespace does not have writes
+ * nothing, so dismissing tips on a document that carries none is not a mutation.
  */
 export function patchEditorExt(doc, addr, patch) {
     // `getExtNamespace` reads just this namespace rather than serializing the whole
     // card to fish out one `$ext` slot.
-    const next = { ...(doc.getExtNamespace(addr, 'editor') ?? {}) };
+    const current = doc.getExtNamespace(addr, 'editor');
+    const next = { ...(current ?? {}) };
     for (const [key, value] of Object.entries(patch)) {
         if (value === undefined)
             delete next[key];
         else
             next[key] = value;
     }
-    doc.storeExtNamespace(addr, 'editor', next);
+    if (Object.keys(next).length > 0)
+        doc.storeExtNamespace(addr, 'editor', next);
+    else if (current)
+        doc.removeExtNamespace(addr, 'editor');
 }

package/dist/visual/icons/Icon.svelte

@@ -9,9 +9,8 @@
 
 	interface Props extends Omit<SVGAttributes<SVGSVGElement>, 'name'> {
 		name: IconName;
-		/** The frame's edge, in px. The card controls pass none and take the default,
-		 *  then size the glyph from `--_qm-glyph-control` in CSS, where the header's
-		 *  right hang is measured against the same number. */
+		/** The frame's edge, in px. A chip sizes the glyph from `--_qm-glyph-control`
+		 *  in CSS, which beats this attribute; callers that are not chips pass a size. */
 		size?: number;
 	}
 	let { name, size = 24, ...rest }: Props = $props();

package/dist/visual/icons/Icon.svelte.d.ts

@@ -2,9 +2,8 @@ import { type IconName } from './nodes.js';
 import type { SVGAttributes } from 'svelte/elements';
 interface Props extends Omit<SVGAttributes<SVGSVGElement>, 'name'> {
     name: IconName;
-    /** The frame's edge, in px. The card controls pass none and take the default,
-     *  then size the glyph from `--_qm-glyph-control` in CSS, where the header's
-     *  right hang is measured against the same number. */
+    /** The frame's edge, in px. A chip sizes the glyph from `--_qm-glyph-control`
+     *  in CSS, which beats this attribute; callers that are not chips pass a size. */
     size?: number;
 }
 declare const Icon: import("svelte").Component<Props, {}, "">;

package/dist/visual/strings.d.ts

@@ -15,7 +15,7 @@ export interface VisualStrings extends TableChromeStrings, SlashStrings {
     /** The card-title input's accessible name. */
     cardTitle: string;
     /** The trailing strip's visible words, which are also every strip's accessible
-     * name; the glyph rides the wording, as the array foot's does. One string over
+     * name; the plus rides the wording. One string over
      * one kind and many: the trigger seeds A card, and which kind is the menu's word
      * to say or the schema's to have already settled. */
     addCard: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.7.2",
+	"version": "0.8.0",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",
@@ -66,7 +66,7 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json"
 	},
 	"peerDependencies": {
-		"@quillmark/wasm": ">=0.108.1-0",
+		"@quillmark/wasm": ">=0.108.3-0",
 		"svelte": "^5.0.0"
 	},
 	"dependencies": {