@quillmark/svelte 0.1.1 → 0.3.0

package/dist/core/theme.css

@@ -1,10 +1,10 @@
 /* The one derivation: public dials in, a closed private scale out (THEMING.md).
    Everything below reads a rung rather than minting a value, which is this file's
    whole reason for existing and what `check:style` holds everywhere else. Colour,
-   geometry, type and motion are all derived here, so each is minted in ONE place
+   geometry, type and motion are all derived here, so each is minted in one place
    instead of once per detached root.
 
-   TRANSPORT: a stylesheet, side-effect imported by `core/index.ts` and applied to
+   Transport: a stylesheet, side-effect imported by `core/index.ts` and applied to
    every element marked `data-qm-root`. The package imports it itself, so there is
    no `import './theme.css'` for a consumer to forget. A stylesheet rather than an
    inline `style` attribute is what buys the three things an attribute cannot
@@ -19,21 +19,21 @@
    chrome that still reads as intact. `check:bundle` holds both ends, the claim and
    the built bytes.
 
-   Every value stays a `var()` reference, so the dials resolve against the CASCADE
+   Every value stays a `var()` reference, so the dials resolve against the cascade
    at each root: a consumer's `[data-theme="dark"]` ancestor rule flows in
    unchanged, the light/dark default follows the `color-scheme` the host declares
    with no JS and no media query, and `color-mix` runs at paint time. The rungs are
-   declared ON the root, so they are reachable only by a rule targeting it:
+   declared on the root, so they are reachable only by a rule targeting it:
    THEMING.md §"What is deliberately not public" states the terms.
 
-   LAYERS: `qm` is the top-level layer name, and it is contract — a consumer
+   Layers: `qm` is the top-level layer name, and it is contract — a consumer
    pins the order against it with `@layer qm, app;` in their own CSS, which wins
    in both bundler orders (THEMING §"Your CSS beats ours"). Unlayered consumer
    CSS beats every layer here for free.
 
-   `@property` registers the three ENTRY rungs, the ones reading a dial, and
+   `@property` registers the three entry rungs, the ones reading a dial, and
    nothing below them. An `initial-value` must be computationally independent,
-   which `rem` is not, so the DIALS cannot be registered: their defaults are
+   which `rem` is not, so the dials cannot be registered: their defaults are
    `rem`. A rung can, because registration reads the initial value and never the
    declared one, so a `px` initial sits under a `calc()` chain over a `rem` dial
    without contradiction. What it buys is the poison case: `--qm-space: 4` is a
@@ -69,19 +69,23 @@
 @layer qm.scale {
 	:where([data-qm-root]) {
 		/* ── Poles ───────────────────────────────────────────────────────────────
-		   Each dial's default, stated ONCE. Every rung below reads a pole, never a
+		   Each dial's default, stated once. Every rung below reads a pole, never a
 		   dial, so both schemes cost two declarations rather than fifteen; and the
-		   dial sits in FRONT of the default, so a consumer's ancestor value wins in
+		   dial sits in front of the default, so a consumer's ancestor value wins in
 		   either scheme, which it would not if a scheme rule set `--qm-bg` instead.
 
-		   `light-dark()` keys the default off the `color-scheme` this root INHERITS,
+		   `light-dark()` keys the default off the `color-scheme` this root inherits,
 		   which is the host's: an app that declares `dark` gets a dark surface
 		   whatever the OS says, and one that declares nothing gets light, matching
 		   its own unstyled text. So the package owns no mode logic at all: light or
 		   dark is the mounting site's, like every other value here (THEMING.md
-		   §"The surface follows your colour scheme"). */
-		--_qm-bg: var(--qm-bg, light-dark(#fff, #14171c));
-		--_qm-fg: var(--qm-fg, light-dark(#1a1a1a, #e8eaed));
+		   §"The surface follows your colour scheme").
+
+		   `--qm-bg` is the card, not the column behind it: the plane content is
+		   written on, which is also the preview's paper. Everything else is a step
+		   off it, and the column is a step down. */
+		--_qm-bg: var(--qm-bg, light-dark(#fff, #272729));
+		--_qm-fg: var(--qm-fg, light-dark(#1c1c1c, #d7dadc));
 		--_qm-accent: var(--qm-accent, #2563eb);
 		--_qm-danger: var(--qm-danger, #c5221f);
 		--_qm-warning: var(--qm-warning, #b25000);
@@ -89,33 +93,103 @@
 		--_qm-font-mono: var(--qm-font-mono, ui-monospace, monospace);
 
 		/* ── Colour ──────────────────────────────────────────────────────────────
-		   Surfaces step bg → fg, ink steps fg → bg, mixed in oklab; sRGB muddies
-		   the mid-tones and the label/meta/border rungs are exactly mid-tone. So
-		   inverting the poles inverts the scale. The percentages are calibrated to
-		   the light-mode literals they stand in for (17% ≈ #d4d4d4, 35% ≈ #555).
+		   Ink steps fg → bg, the border and hover rungs step bg → fg, all mixed in
+		   oklab; sRGB muddies the mid-tones and the label/meta/border rungs are
+		   exactly mid-tone. So inverting the poles inverts that half of the scale.
+		   The percentages are calibrated to the light-mode literals they stand in
+		   for (17% ≈ #d4d4d4, 35% ≈ #555).
+
+		   Planes are the half that does not read the ink pole, because what makes a
+		   card read as a card is that it is the brighter plane, in both schemes
+		   alike (ARCHITECTURE §Styling). A plane stepped toward the ink is right in
+		   dark and inverted in light, where it darkens the card below the page it
+		   floats on. So `sunken` and `well` step toward shadow and `raised` toward
+		   light, and the base plane — a card, the preview's paper — is the pole
+		   itself.
+
+		   Two planes sink. `sunken` is the ground — the column behind the cards, the
+		   desk behind the sheets — and lifting the plane above it takes very little
+		   at the light pole. `well` is the hole cut into a card: a field, a table's
+		   header band, the one native select, none of which draw an edge, so the
+		   step is the whole of what says a value is typed there. The order at the
+		   light pole is card, ground, well; at the dark pole the two sink to within
+		   a channel of each other, which is where a card with little light left to
+		   give up leaves them.
+
+		   Each takes two arms, because one figure cannot serve both poles: a dark
+		   surface has to spend more of what little it has before the card above it
+		   reads as lifted. Pinning a dark palette under a light `color-scheme` takes
+		   the light arm with it
+		   (THEMING §"The surface follows your colour scheme"), which is a step you
+		   can barely see, so a host that pins declares the scheme with it.
 
-		   The three surface rungs sit EVENLY 4pp apart, which is what keeps them three
-		   distinguishable steps: uneven spacing spends one rung to buy another:
-		   widening `raised` alone would leave `hover` 1pp above it. `raised` steps
-		   toward the INK pole rather than away from it, so a card is darker than the
-		   page in light and lighter in dark. */
+		   The ground steps by subtraction where every other rung mixes: a mix toward
+		   black is a ratio, so it scales what it takes and pulls the result toward
+		   neutral, and a ground is a fixed distance that keeps the pole's hue. Its
+		   arms are 0.0214 of oklab L in light and 0.0553 in dark, with a/b terms
+		   carrying a cool cast a mix toward black would strip, so the default lands
+		   on `#f7f8f9` and `#1a1a1b` exactly and a turned `--qm-bg` tints the plane
+		   under it.
+
+		   `raised` is a no-op at the light pole, where the card is already white
+		   and there is nowhere further to go, so a floating surface separates on
+		   its hairline in light and on the step in dark. */
 		--_qm-surface: var(--_qm-bg);
-		--_qm-surface-raised: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 4%);
+		--_qm-surface-sunken: light-dark(
+			oklab(from var(--_qm-bg) calc(l - 0.0214) calc(a - 0.00065) calc(b - 0.00158)),
+			oklab(from var(--_qm-bg) calc(l - 0.0553) calc(a - 0.00048) calc(b + 0.00165))
+		);
+		--_qm-surface-well: light-dark(
+			color-mix(in oklab, var(--_qm-bg), #000 4%),
+			color-mix(in oklab, var(--_qm-bg), #000 20%)
+		);
+		--_qm-surface-raised: color-mix(in oklab, var(--_qm-bg), #fff 8%);
 		--_qm-surface-hover: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 8%);
 		--_qm-border: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 17%);
-		/* A rule that separates without structuring: the lines BETWEEN a table's cells,
+		/* A rule that separates without structuring: the lines between a table's cells,
 		   where the frame around them is the structure. Half the border's mix rather
-		   than a fourth surface rung, because it is a stroke and reads against the
+		   than a surface rung of its own, because it is a stroke and reads against the
 		   surface behind it, not a fill stacked on one. */
 		--_qm-border-faint: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 9%);
+		/* A fourth step between `label` and `ghost` is a number with no fourth kind of
+		   text under it. */
 		--_qm-ink: var(--_qm-fg);
 		--_qm-ink-label: color-mix(in oklab, var(--_qm-fg), var(--_qm-bg) 35%);
-		--_qm-ink-meta: color-mix(in oklab, var(--_qm-fg), var(--_qm-bg) 45%);
 		--_qm-ink-ghost: color-mix(in oklab, var(--_qm-fg), var(--_qm-bg) 60%);
-		/* The correlation wash (`core/bloom.ts`). Its alpha is a PEAK, not a tint: the
+		/* The correlation wash (`core/bloom.ts`). Its alpha is a peak, not a tint: the
 		   wash animates from and back to zero, never held, so it reads at pane scale
 		   over the preview's paper while the paper rests clean. */
 		--_qm-accent-wash: color-mix(in oklab, var(--_qm-accent) 18%, transparent);
+		/* The accent held: what a selected line of a table is tinted with, and what its
+		   grip is filled with, so the two ends of one gesture are one colour. A second
+		   name rather than the wash reused, because the two answer different questions
+		   and the numbers follow: a peak passes over paper and can be strong, where a
+		   tint is held under body text and cannot. Translucent, so it
+		   stacks over whichever surface rung the cell already draws instead of replacing
+		   it. */
+		--_qm-accent-tint: color-mix(in oklab, var(--_qm-accent) 12%, transparent);
+		/* The danger hue held: what a destructive control fills with where the family's
+		   neutral hover rung would read as one more button. Mixed at the accent tint's
+		   strength, so a held tint is a held tint whichever hue it carries. */
+		--_qm-danger-tint: color-mix(in oklab, var(--_qm-danger) 12%, transparent);
+		/* The label ink held: what a trigger fills with whose own ink never steps, so
+		   the fill arriving under it is that tone at a strength a surface reads
+		   through. */
+		--_qm-add-fill: color-mix(in oklab, var(--_qm-ink-label) 15%, transparent);
+
+		/* The tips card'S hue: the surface's one exit from the greyscale that is not
+		   a status, and what the amber and the typewriter face say together is
+		   draft (VISUAL_EDITOR §"Card operations"). A literal rather than a dial
+		   because there is nothing left to turn: the three 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. */
+		--_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%);
+		/* The chip behind a token in a tip. The card's own face is already
+		   monospace, so a `code` run needs a fill to read as literal text rather
+		   than as the sentence around it. */
+		--_qm-tips-chip: color-mix(in oklab, var(--_qm-tips) 12%, transparent);
 
 		/* ── Ratios and effects ──────────────────────────────────────────────────
 		   No palette fixes these, so they are their own rungs. There is no shadow
@@ -135,13 +209,18 @@
 		--_qm-opacity-muted: 0.5;
 
 		/* ── Focus ───────────────────────────────────────────────────────────────
-		   These fix the ring's VALUE, so no control mints it. Which properties draw a
+		   These fix the ring's value, so no control mints it. Which properties draw a
 		   ring, and on what state, is the other half: a rule, `.qm-focus-ring` in
 		   `visual/controls.css`, since a rung each control reassembles is a scale
-		   only up to the point where it is assembled. ONE width: focus is the only
+		   only up to the point where it is assembled. One width: focus is the only
 		   state that draws a ring anywhere, so there is no held-back tier under it. */
 		--_qm-ring-width: 2px;
-		--_qm-ring-focus: var(--_qm-ring-width) solid var(--_qm-accent);
+		/* Every ring the surface draws, whatever the state under it: focus and selection
+		   alike, which is why the name carries neither. Assembled here because the parts
+		   spelled out at a use site pass every axis — each reads a rung — while drawing a
+		   ring nothing else agrees with. The width stays separately reachable: a drop
+		   indicator is the ring's thickness without being a ring. */
+		--_qm-ring: var(--_qm-ring-width) solid var(--_qm-accent);
 		--_qm-ring-offset: 1px;
 
 		/* ── Motion ──────────────────────────────────────────────────────────────
@@ -154,15 +233,18 @@
 		   animates over WAAPI and reads it from here. */
 		--_qm-bloom-dwell: 1100ms;
 
-		/* One curve per role, the role being what the trip's two endpoints ARE.
-		   `reverse` is the only one that has to be symmetric: it is the only one an
-		   interruption turns around. */
+		/* One curve, symmetric because an interruption turns these trips around: a hover
+		   leaves before it arrives, a card collapses mid-expand. Every trip at `fast` or
+		   `slow` takes it; a one-way shape is legible only over a longer one. */
 		--_qm-ease-reverse: cubic-bezier(0.4, 0, 0.6, 1);
-		--_qm-ease-arrive: cubic-bezier(0, 0, 0.2, 1);
-		--_qm-ease-depart: cubic-bezier(0.4, 0, 1, 1);
+		/* A trip rather than a rung, duration and curve composed the way `--_qm-ring`
+		   composes its three: neither half is reachable alone. Weighted to its end, so an
+		   arrival settles into its rest instead of stopping at it, and long enough that a
+		   control resting at nothing reads as arriving rather than as switching. */
+		--_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,
+		/* One stroke width for every edge the chrome draws: a card's, a control's,
 		   and the metadata bracket's three rules 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
@@ -171,6 +253,9 @@
 		   against a token. */
 		--_qm-border-width: 1px;
 		--_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
+		   halving holds that at every setting of the dial, zero included. */
 		--_qm-radius-inner: calc(var(--_qm-radius) / 2);
 		/* A fully-rounded end cap: a shape tier, not a step on the radius ramp, so
 		   it does not derive from the dial: a pill stays a pill at any radius. */
@@ -180,8 +265,15 @@
 		--_qm-space-2: calc(var(--_qm-space) * 2);
 		--_qm-space-3: calc(var(--_qm-space) * 3);
 		--_qm-space-4: calc(var(--_qm-space) * 4);
-		/* The scroll TAIL: dead space under the last card, so it can be read at the
-		   middle of a pane rather than at its bottom edge. A fraction of the VIEWPORT
+		/* A rung because the two axes are two decisions and the ladder alone cannot hold
+		   them together: `check:style`'s rhythm axis sees each box read a rung, never that
+		   they read the same one, which is the drift `visual/controls.css` already names
+		   for the type half. Asymmetric because the vertical is what leading leaves once
+		   it has taken the line box, and the horizontal is how far in the text starts,
+		   which nothing else fixes. */
+		--_qm-inset-control: var(--_qm-space) var(--_qm-space-3);
+		/* The scroll tail: dead space under the last card, so it can be read at the
+		   middle of a pane rather than at its bottom edge. A fraction of the viewport
 		   rather than a step on the ramp, because what it answers is how far the eye
 		   sits from the bottom of the screen, which no spacing dial knows. Spent by
 		   the editor alone (`.qm-pane`): a stack of cards is what has a last one to
@@ -193,7 +285,7 @@
 		   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
+		   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
@@ -203,26 +295,49 @@
 		--_qm-glyph-control: 14px;
 
 		/* ── Type ────────────────────────────────────────────────────────────────
-		   `--qm-font-size` anchors the body rung; 1.125 is the ratio between adjacent
-		   rungs: a step up (title) and two down (label, meta). The ratio and the
-		   weights are fixed conventions, not dials: no consumer tunes a typographic
-		   ratio, and a dial nobody turns is a name every reader still holds. */
+		   `--qm-font-size` anchors the chrome rung; 1.125 is the ratio between adjacent
+		   rungs: a step up (title) and one down (label). The ratio and the
+		   weight are fixed conventions, not dials: no consumer tunes a typographic
+		   ratio, and a dial nobody turns is a name every reader still holds. Three chrome
+		   rungs: a second step below `label` lands near 11px, under a size anything here
+		   wants to be read at, and the supporting text that would take it is what `label`
+		   already is. */
 		--_qm-text-body: var(--qm-font-size, 0.875rem);
 		--_qm-text-title: calc(var(--_qm-text-body) * 1.125);
 		--_qm-text-label: calc(var(--_qm-text-body) / 1.125);
-		--_qm-text-meta: calc(var(--_qm-text-label) / 1.125);
-		--_qm-weight-label: 600;
-		--_qm-weight-soft: 500;
+		/* Paper: the document body answers to the preview's paper where every other
+		   surface here answers to the control beside it, so a rung shared with the chrome
+		   makes a consumer asking for larger prose take larger inputs with it. 16/15 where
+		   the ramp steps at 9/8: small enough to read as a change of register rather than
+		   a rung of hierarchy, and clear of the title rung, which one 9/8 step lands on
+		   exactly. */
+		--_qm-text-paper: calc(var(--_qm-text-body) * 16 / 15);
+		/* Two weights over the regular, and only one of them is chrome. `mid` names
+		   everything the surface names — a card title, a section header, a field
+		   label, a nested property — so a stack of them reads as one register and
+		   hierarchy stays the size ramp's, which is the axis that can carry it.
+		   500 rather than 600 because the family dial resolves to the platform UI
+		   face, whose 600 is heavier at the same number than the webfont a surface
+		   is usually drawn against: at the label rung it goes smudgy, and one
+		   number across three sizes does not read as one weight.
+
+		   `strong` is not a rung of that ramp. It is the mark a run wears where
+		   weight is the only signal it has: a heading inside a prose leaf, drawn at
+		   no size step of its own because the quill sets the paper's; a table
+		   island's header row; the stored value in an enum listbox. Reaching for it
+		   where a size or a tone could speak is the drift the split exists to
+		   stop. */
+		--_qm-weight-strong: 600;
+		--_qm-weight-mid: 500;
 		/* Leading: the ramp's third axis, and it does not track the sizes one for one:
 		   two rungs, because a wrapped label and a wrapped paragraph want different
 		   rhythms and nothing wants four. `body` is reading rhythm (both prose leaves,
 		   every control beside them, the tips card's guidance); `tight` is a line that is
-		   a label rather than a passage. Unitless, so a rung inherits MULTIPLICATIVELY
+		   a label rather than a passage. Unitless, so a rung inherits multiplicatively
 		   and holds against whichever size rung the surface reads: a `rem` leading
-		   would freeze at one size and disagree with the rest of the ramp. Leading is
-		   also the WHOLE of what separates paper from chrome: the body leaf reads
-		   `--_qm-text-body`, the same size as the input beside it, and there is no fifth
-		   size rung over it. `line-height: 1` is outside the axis: it collapses the
+		   would freeze at one size and disagree with the rest of the ramp. It is the
+		   axis paper and chrome share: both read `body`, and the size rung is what
+		   separates them. `line-height: 1` is outside the axis: it collapses the
 		   line box onto its content, a glyph or a button's one-line label. */
 		--_qm-leading-body: 1.5;
 		--_qm-leading-tight: 1.3;
@@ -235,12 +350,12 @@
 		   picker, the caret) lands on the same pole the poles above resolve to.
 		   Declaring it here would break that lockstep in the one direction that
 		   matters: a host that declares `dark` would get light native chrome under
-		   a dark surface. A consumer that PINS a palette against its own scheme
+		   a dark surface. A consumer that pins a palette against its own scheme
 		   declares `color-scheme` with it, on the root (THEMING.md).
 
-		   Face, ink and LEADING are the three axes a root carries this way. Leading
+		   Face, ink and leading are the three axes a root carries this way. Leading
 		   belongs with the other two because a unitless ratio inherits
-		   MULTIPLICATIVELY: it holds against whatever size rung each surface reads, so
+		   multiplicatively: it holds against whatever size rung each surface reads, so
 		   it imposes less than the ink beside it, and the reason `font-size` stays off
 		   does not transfer: a ratio has no size to sweep a consumer's content with.
 		   What it buys is that `normal` (the UA figure near 1.14, varying by font) is
@@ -248,13 +363,13 @@
 		   whether or not it remembers to say so, and a per-surface
 		   `--_qm-leading-tight` reads as the deliberate override it is.
 
-		   Deliberately NOT `font-size`, and the reason is about the ROOT rule rather
+		   Deliberately not `font-size`, and the reason is about the root rule rather
 		   than about size: a root-level body size sweeps every descendant a consumer
 		   may have put inside the marker, which is a reach the derivation does not
 		   have. The rung is not withheld from the surfaces: every control and every
 		   prose leaf reads `--_qm-text-body` in its own recipe, which is
 		   what closes the ramp and makes `--qm-font-size` move an input. What would
-		   break a mounted leaf is a size that CHANGES under it; a rung is fixed at
+		   break a mounted leaf is a size that changes under it; a rung is fixed at
 		   mount unless the consumer turns the dial, and a consumer turning a dial is
 		   entitled to the reflow. So: the root imposes no size, each surface reads the
 		   rung it wants. */
@@ -263,10 +378,10 @@
 		line-height: var(--_qm-leading-body);
 	}
 
-	/* Reduced motion collapses the SCALE, never a list of selectors.
+	/* Reduced motion collapses the scale, never a list of selectors.
 	   Two values here are not the rung they look like:
 
-	   `1ms` rather than `none`, because a collapsed transition still FIRES: a surface
+	   `1ms` rather than `none`, because a collapsed transition still fires: a surface
 	   waiting on `transitionend` keeps its event, where `transition: none` would strand
 	   it. The beat is under perception either way.
 

package/dist/preset/index.css

@@ -1,7 +1,7 @@
 /* `@quillmark/svelte/preset`, the package's one CSS entry point: the endorsed look for
    the page a surface is mounted on. Opt-in and side-effect free until imported:
    `core/index.ts` pulls `core/theme.css` for the surfaces and never this, because this
-   styles the DOCUMENT and nothing may put that in a consumer's page uninvited.
+   styles the document and nothing may put that in a consumer's page uninvited.
 
    Two files because one of them is exempt: `scale.css` is where the literals are
    minted, `recipes.css` is held to reading them. */

package/dist/preset/recipes.css

@@ -1,14 +1,14 @@
-/* THE ENDORSED LOOK: the rules a host draws around a mounted surface AND the shell it
+/* The endorsed look: the rules a host draws around a mounted surface and the shell it
    mounts one in, as classes it puts on its own elements. The rungs beside this in
    `scale.css` are the invisible half (a scale alone still leaves a consumer writing
    every declaration before anything on the page looks like anything), so the recipes
    are what the preset is for. This file mints nothing; `check:style` runs its axes here.
 
-   These are HOST classes. They land on the consumer's DOM, never on a mounted root, so
+   These are host classes. They land on the consumer's DOM, never on a mounted root, so
    they freeze nothing about the surfaces' interior: the reason the package withholds
    its own internal classes does not reach them.
 
-   UNLAYERED, deliberately. `@layer qm` exists so consumer CSS beats the surfaces
+   Unlayered, deliberately. `@layer qm` exists so consumer CSS beats the surfaces
    without `!important`, and the same has to be true here; a layer of the preset's own
    would put a second name in the contract and change what `revert-layer` at the foot
    of this file resolves against. Unlayered, a consumer's own rules win by ordinary
@@ -16,12 +16,12 @@
 
 /* ── The page ──────────────────────────────────────────────────────────────── */
 
-/* The baseline, on a CLASS rather than `body`: a preset that restyled the document
+/* The baseline, on a class rather than `body`: a preset that restyled the document
    root would land on an app that already has a page and change it out from under
    whatever was there. The host puts this where its own layout starts: `body`, or the
    element the app mounts into.
 
-   `color-scheme` is declared HERE and not by the package: light or dark is the
+   `color-scheme` is declared here and not by the package: light or dark is the
    mounting site's, and this file is the mounting site. `light dark` follows the OS;
    a host pinning one declares it on the same element and wins by source order. */
 .qm-page {
@@ -43,11 +43,11 @@
 
 /* ── The workspace ─────────────────────────────────────────────────────────── */
 
-/* The rules above dress the page a surface sits ON; these four are the SHELL it is
+/* The rules above dress the page a surface sits on; these four are the shell it is
    mounted in, a tool where `.qm-page` is a document: the screen an app that mounts two
    surfaces over one session is, drawn once (ARCHITECTURE §Styling).
 
-   PINNED to the viewport rather than sized to it: a page-height box still leaves the
+   Pinned to the viewport rather than sized to it: a page-height box still leaves the
    root scroller counting the overflow its panes clip, and a wheel over the chrome drags
    the whole app off the top. Three bands (a head, the body, an optional foot), and the
    body takes what is left and may shrink below its content, so the panes in it own
@@ -67,8 +67,8 @@ html:has(.qm-workspace) {
 	overscroll-behavior: none;
 }
 
-/* A band's LINE: the row a head or a foot puts its parts on, wrapping, centred. That is
-   the whole of it. What a band is made OF is the host's: the rule under it, the gutter
+/* A band's line: the row a head or a foot puts its parts on, wrapping, centred. That is
+   the whole of it. What a band is made of is the host's: the rule under it, the gutter
    beside it, and the depth of it, because where a band ends and how tall it stands are
    page-shell decisions: a site holding its content to a maximum runs the rule past it at
    its own rhythm, and a one-screen tool has no maximum to hold to. */
@@ -79,18 +79,14 @@ html:has(.qm-workspace) {
 	gap: var(--qmh-space-2) var(--qmh-space-4);
 }
 
-/* TWO EVEN TRACKS for two surfaces, and no resizer, since a divider that can be dragged
+/* Two even tracks for two surfaces, and no resizer, since a divider that can be dragged
    is a control competing with what it divides. Each track may shrink below its content,
    which is what lets the frame in it clip rather than grow.
 
-   The GAP is the endorsed default and not a fact about splitting: two surfaces standing
+   The gap is the endorsed default and not a fact about splitting: two surfaces standing
    apart on a page read as two things, which is what a host showing its instruments wants.
    A host that spends the whole screen on the mounts closes it to nothing and carries a
-   hairline on one pane instead: one property, and the tracks are untouched.
-
-   Below the width that fits two mounts abreast the split stops being one: the tracks
-   stack and each takes a pane's height. WHICH element scrolls then is the host's, since
-   it is the host that knows where the room comes from. */
+   hairline on one pane instead: one property, and the tracks are untouched. */
 .qm-split {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -99,26 +95,77 @@ html:has(.qm-workspace) {
 	min-height: 0;
 }
 
-@media (width < 60rem) {
+/* The band that switches them, and nothing at the widths where both tracks are showing
+   and there is nothing to switch. Where it stands is the host's, like any other band; what
+   goes in it is a pair of `.qm-control`s, which already carry the on-state a pressed
+   control takes. Its visibility is the preset's because the threshold is: a host hiding
+   its own tab row writes this file's number a second time, which is the one thing the
+   single source is for. */
+.qm-switch {
+	display: none;
+}
+
+/* One mount at A time under the threshold, rather than two of them abreast. Half a narrow
+   viewport is under the width either surface reads at, so the split stops being one and
+   the tracks become views of the same room: the host says which with `data-qm-show`, and
+   the attribute names the track rather than what is in it, so nothing here knows an editor
+   from a preview. No attribute is the first track.
+
+   The other track is `display: none` and not a clip, which is the whole of the hiding: it
+   leaves the tab order, hit-testing and the accessibility tree in one property, so the
+   pane needs no `inert` and the host needs no breakpoint in JS. Both stay mounted (a
+   preview binds its handle once, an editor holds a caret, a history and a scroll), so
+   the switch is presentational, never conditional. A pane hidden this way keeps the
+   pixels it had (the paint loop's band sweep no-ops on an empty visible set) and repaints
+   from its live box when it comes back, which its resize observer sees as a width moving
+   off zero.
+
+   Height is the second clause because a landscape phone passes the first one: it clears
+   the width with room for two tracks and has no body left to put them in. A desktop window
+   that short wants one mount for the same reason. */
+@media (width < 50rem), (height < 30rem) {
+	.qm-switch {
+		display: flex;
+		gap: var(--qmh-space);
+	}
+
+	/* Even halves of the band, at the height a thumb needs. The floor is the recipe's and
+	   not the host's, because the band exists only at the sizes where the pointer is a
+	   finger: a host is free to stand the band deeper, and has nothing to gain from
+	   standing it shallower than the thing it is tapping. */
+	.qm-switch > * {
+		flex: 1 1 0;
+		min-height: var(--qmh-tap);
+	}
+
+	/* Centred, which is what a control filling half a band reads as; `.qm-control` itself
+	   reads left, for the menus it also dresses. */
+	.qm-switch > .qm-control {
+		text-align: center;
+	}
+
 	.qm-split {
 		grid-template-columns: minmax(0, 1fr);
-		grid-template-rows: none;
-		grid-auto-rows: var(--qmh-pane);
+	}
+
+	.qm-split:not([data-qm-show='2']) > :nth-child(2),
+	.qm-split[data-qm-show='2'] > :nth-child(1) {
+		display: none;
 	}
 }
 
-/* THE MOUNTING SITE: an edge, a corner, and the clip that holds a surface to them, which
+/* The mounting site: an edge, a corner, and the clip that holds a surface to them, which
    is all a surface painting its own column needs. No tone and no gutter: those are the
    surface's own (THEMING §"Drop it in"). `border-box`, so a stated height is the height
    it draws.
 
-   POSITIONED, because a clip reaches only what it is the containing block for: a
+   Positioned, because a clip reaches only what it is the containing block for: a
    surface's out-of-flow parts (a parked description, an overlay) resolve against the
    nearest positioned ancestor, and with none between them and the document they land at
-   their static position UNCLIPPED, leaving the page to scroll past its own foot by
+   their static position unclipped, leaving the page to scroll past its own foot by
    however far the frame's contents run over.
 
-   The two minimums are what let a frame in a track CLIP rather than push: a grid or flex
+   The two minimums are what let a frame in a track clip rather than push: a grid or flex
    item floors at its content, so a mount that paints wider than its column widens the
    column instead. They ride the frame rather than the split's children, which keeps every
    rule in this file landing where the host put a class. Outside a track they are the
@@ -161,7 +208,7 @@ html:has(.qm-workspace) {
 }
 
 /* The block form: a dump, or a snippet. `pre` keeps the wrapping the value came with;
-   the plate is the page's own, one rung under whatever it sits in. How TALL such a
+   the plate is the page's own, one rung under whatever it sits in. How tall such a
    block may grow before it scrolls is the host's policy rather than the look, so no
    height is stated here. */
 pre.qm-readout {
@@ -206,10 +253,12 @@ pre.qm-readout {
 
 /* ── Surfaces ──────────────────────────────────────────────────────────────── */
 
-/* The instrument plate: what a host puts its controls and readouts on. One rung off the
-   page and a hairline, which is the same way a card steps off the base surface, so a
-   panel beside a mounted editor reads as the same material. `border-box`, so a height
-   from the caller is the height it draws. */
+/* The instrument plate: what a host puts its controls and readouts on. The same plane a
+   card is, so a panel beside a mounted editor reads as the same material. It keeps a
+   hairline where a card drops one: a card sits in a column the surface itself paints and
+   a plate sits wherever the host put it, which is the floating case's argument on a
+   block that happens to be in flow. `border-box`, so a height from the caller is the
+   height it draws. */
 .qm-panel {
 	box-sizing: border-box;
 	background: var(--qmh-surface);
@@ -220,7 +269,7 @@ pre.qm-readout {
 
 /* ── Controls ──────────────────────────────────────────────────────────────── */
 
-/* A host's controls ARE boxed, where the package's buttons are not: inside a card a
+/* A host's controls are boxed, where the package's buttons are not: inside a card a
    button sits beside typing and a box would read as a field, and out here there is no
    typing to be confused with, so the box is what says "this is a control".
    `font: inherit` first, since the shorthand resets whatever precedes it. */
@@ -262,7 +311,7 @@ pre.qm-readout {
 /* ── Focus ─────────────────────────────────────────────────────────────────── */
 
 /* One visible indicator for the whole host, since none of these controls draws a ring
-   of its own. It reads the INK rung rather than a hue: the page is monochrome, and a
+   of its own. It reads the ink rung rather than a hue: the page is monochrome, and a
    focus ring is a position, not a destination. */
 :focus-visible {
 	outline: var(--qmh-ring-width) solid var(--qmh-ink);