@quillmark/svelte 0.26.2 → 0.27.0

package/THEMING.md

@@ -127,7 +127,7 @@ import '@quillmark/svelte/preset';
 </body>
 ```
 
-This is the stylesheet our own apps import: the playground and studio draw with these rules and nothing else, so what you get is what we ship, not a reduction of it.
+This is the stylesheet our own apps import: the playground, studio and quillkit's app client draw with these rules and nothing else, so what you get is what we ship, not a reduction of it.
 
 It carries a `--qmh-*` scale for the page, derived from the same nine dials and calibrated against the surfaces' own steps, so a plate of yours and a card of ours agree about which way "raised" goes. Turning a dial moves both.
 
@@ -177,9 +177,11 @@ An app that mounts an editor beside a preview over one session needs a screen to
 
 The narrow shape is one mount at a time, not two of them stacked: half a narrow viewport is under the width either surface reads at. The track you are not showing is `display: none`, so it leaves the tab order, hit-testing and the accessibility tree together: you need no `inert` on it, and no breakpoint in your JS, since the only state you hold is which of the two you last asked for. Keep both mounted: the hidden pane keeps its pixels, its caret and its scroll, and comes back to them — it rasters nothing at a box it has none of, and repaints only where it returns to a box that draws its pages at another scale. A preview scroll asked for while it was hidden is held and run on the way back, so it opens at the caret rather than several edits behind it. A click that lands in the hidden pane is the one thing the shape adds to your wiring, so send the caret and reveal the track together, or the hit goes somewhere the reader cannot see.
 
+Every rule behind the five is wrapped in `:where()`, so it computes at specificity zero: a rule of yours on the same element wins at any specificity and in any sheet order, which is what lets a stylesheet written by someone other than the app's author (an `app.css` over quillkit's app client) restyle a band without knowing which shell rules set it.
+
 The shape is shared; the look of a band is not. Your wordmark, your nav and the depth of your head are the most app-specific things on the screen, and a preset that drew them would hand every tool built on this the same face, so they read `--qmh-*` like everything else and you write the rules. `.qm-split`'s gap is a default rather than a fact about splitting: close it to `0` and carry a hairline on one pane if you want the two mounts to meet instead of stand apart.
 
-It is **unlayered** and at ordinary specificity, so your own rules beat it by ordinary precedence. It is also opt-in and side-effect free until imported: nothing that styles your document arrives with a component.
+It is **unlayered**, and nothing in it outranks a rule of yours aimed at the same element: the page, type, status and control recipes compute at ordinary specificity, so your own rules beat them by ordinary precedence, and the shell and the app chrome compute at specificity zero, as the surfaces do. It is also opt-in and side-effect free until imported: nothing that styles your document arrives with a component.
 
 One rule in it earns its place regardless of whether you take the rest, and you want it if you draw a focus ring of your own — cut the mounted surfaces out of the blanket:
 
@@ -191,6 +193,38 @@ One rule in it earns its place regardless of whether you take the rest, and you
 
 A blanket `:focus-visible` of yours outranks ours, including on the controls that already draw one, so a ring written for the controls that draw none repaints the ones that do. The cut-out leaves yours everywhere else, and `:not(:where(…))` contributes no specificity, so your rule ranks exactly as it would without it.
 
+### The app chrome
+
+A tool's bands are yours, since a tool's head is the most app-specific thing on its screen. An app whose whole page is one form to fill in has less to say there: a name, the action the page leads to, and a line signing it. Four classes draw that much, quillkit's app client wears them, and a host of its own takes them the same way:
+
+| Class             | What it is                                                                                        |
+| ----------------- | ------------------------------------------------------------------------------------------------- |
+| `.qm-app-header`  | The band naming the app: a plate, a gutter and a hairline under it. Put it beside `.qm-bar`.      |
+| `.qm-app-title`   | What the app is called, at the title rung: the one line on the screen read as a name.             |
+| `.qm-app-footer`  | The line signing the app, in meta type under a hairline; its links take the line's own ink.       |
+| `.qm-app-primary` | The one action the page leads to: the control wearing `--qm-accent`, standing at the touch floor. |
+
+They compute at specificity zero, as the shell does, so `.qm-app-header { background: #00308f; color: #fff; }` is the whole of rebranding the head.
+
+## What a stylesheet may aim at
+
+A stylesheet you write against a mounted surface, or one an author writes over an app someone else built, may aim at these and nothing else:
+
+- the nine dials (§"The dials");
+- the surface roots, `.qm-editor` and `.qm-preview`, and `.qm-pane`;
+- `data-qm-card="<kind>"`, on the box of every card the editor draws, its value the card's kind and `main` for the main card;
+- the preset's classes, on your own DOM, if you import it (§"Match ours").
+
+`data-qm-card` is the one hook named by the schema rather than by the package: a rule aimed at a kind lands on that kind's cards wherever the editor puts them, which is the one thing a quill-specific restyle needs and a dial cannot say.
+
+```css
+[data-qm-card='indorsement'] {
+	border-left: 3px solid var(--qm-accent);
+}
+```
+
+Nothing names a field or a property. Every other `data-qm-*` attribute the surfaces carry, `data-qm-prop` among them, is something the surface queries itself, and moves when it does.
+
 ## What is deliberately not public
 
 The two root classes and `.qm-pane` are the whole class contract on the surfaces. Every other `qm-*` class inside them is internal and renames without notice: a class contract over the interior would freeze the DOM shape the surfaces are free to re-cut, and the dials already reach the values a restyle wants. The preset's classes are a contract of their own: they land on _your_ DOM, so they freeze nothing of ours.

package/dist/preset/app.css

@@ -0,0 +1,69 @@
+/* An app's own chrome: the band that names it, the line that signs it, and the one
+   action it exists for. The shell gives a band its row; these give the app's bands their
+   look, for a host whose page is one form rather than a workroom. quillkit's app client
+   wears them, and an author's `app.css` restyles them (THEMING §"The app chrome").
+
+   Specificity zero throughout, as the shell's: a rule of the host's own on the same
+   element wins at any specificity and in any sheet order. `check:style` holds the rank.
+   This file mints nothing. */
+
+/* The head: the plate the title stands on, a hairline under it, and the ink everything on
+   it takes, so a host recolouring the band recolours its name with it. */
+:where(.qm-app-header) {
+	padding: var(--qmh-space-2) var(--qmh-space-4);
+	color: var(--qmh-ink);
+	background: var(--qmh-surface);
+	border-block-end: var(--qmh-border-width) solid var(--qmh-border);
+}
+
+/* What the app is called. Display type rather than chrome type: it is the one line on
+   the screen a reader reads as a name. */
+:where(.qm-app-title) {
+	margin: 0;
+	font-size: var(--qmh-text-title);
+	font-weight: var(--qmh-weight-strong);
+	line-height: var(--qmh-leading-tight);
+	color: inherit;
+	overflow-wrap: anywhere;
+}
+
+/* The foot: a line of meta type under a hairline, its links in the line's own ink. */
+:where(.qm-app-footer) {
+	padding: var(--qmh-space-2) var(--qmh-space-4);
+	border-block-start: var(--qmh-border-width) solid var(--qmh-border);
+	font-size: var(--qmh-text-meta);
+	line-height: var(--qmh-leading-tight);
+	color: var(--qmh-ink-meta);
+}
+
+:where(.qm-app-footer a) {
+	color: inherit;
+}
+
+/* The primary action: the one control on the screen that wears the accent, at the touch
+   floor, since it is the press the whole page leads to. */
+:where(.qm-app-primary) {
+	font: inherit;
+	font-size: var(--qmh-text-label);
+	font-weight: var(--qmh-weight-strong);
+	line-height: var(--qmh-leading-tight);
+	min-height: var(--qmh-tap);
+	padding: var(--qmh-space-2) var(--qmh-space-4);
+	color: var(--qmh-on-accent);
+	background: var(--qmh-accent);
+	border: var(--qmh-border-width) solid var(--qmh-accent);
+	border-radius: var(--qmh-radius-inner);
+	cursor: pointer;
+	transition: background-color var(--qmh-duration) var(--qmh-ease-reverse);
+}
+
+:where(.qm-app-primary:hover) {
+	background: var(--qmh-accent-hover);
+}
+
+:where(.qm-app-primary:disabled) {
+	color: var(--qmh-ink-meta);
+	background: var(--qmh-surface-hover);
+	border-color: var(--qmh-border);
+	cursor: default;
+}

package/dist/preset/index.css

@@ -3,8 +3,11 @@
    the surface barrels pull `core/theme.css` and never this, because this
    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. */
+   `scale.css` is where the literals are minted and is exempt; the rest are held to
+   reading them. `recipes.css` ranks at ordinary specificity, `shell.css` and `app.css`
+   at zero. */
 
 @import './scale.css';
 @import './recipes.css';
+@import './shell.css';
+@import './app.css';

package/dist/preset/recipes.css

@@ -1,5 +1,6 @@
-/* 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
+/* The endorsed look: the rules a host draws around a mounted surface, as classes it puts
+   on its own elements; the shell it mounts one in is `shell.css` beside this, and an
+   app's own chrome is `app.css`. 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.
@@ -40,156 +41,6 @@
 	max-width: var(--qmh-measure);
 }
 
-/* ── The workspace ─────────────────────────────────────────────────────────── */
-
-/* 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
-   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
-   their overflow and hold still while their contents move.
-
-   The one column is stated for the same reason the rows are: an implicit track is `auto`,
-   which is sized by what a band holds, and a `.qm-split` under one contributes its items'
-   max-content through its `fr` tracks. The shell would take the width of the widest thing
-   mounted in it instead of the viewport's, and every band would be that wide with the
-   second pane past the edge. A host holding its content to a maximum never sees it; one
-   spending the whole screen sees it on the first surface it mounts. */
-.qm-workspace {
-	position: fixed;
-	inset: 0;
-	display: grid;
-	grid-template-columns: minmax(0, 1fr);
-	grid-template-rows: auto minmax(0, 1fr) auto;
-	overflow: hidden;
-}
-
-/* A gesture past the end of a pane chains out to the viewport and bounces the empty
-   document, which is the last way a pinned shell moves. Conditioned on the workspace, so
-   a host's other routes keep a page's own feel. */
-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
-   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. */
-.qm-bar {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	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
-   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
-   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. */
-.qm-split {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-	grid-template-rows: minmax(0, 1fr);
-	gap: var(--qmh-space-4);
-	min-height: 0;
-}
-
-/* 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 its
-   resize observer holds the last real width rather than rastering at the 0×0 box a hidden
-   pane reports, so what comes back at the width it left needs no paint at all. The
-   preview's caret follow spans the same window — a trip asked for against a pane with no
-   box is held and run when it has one (`preview/bridge.ts`), the pane opening at the
-   caret rather than several edits behind it.
-
-   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);
-	}
-
-	.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
-   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
-   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
-   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
-   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
-   initial value and do nothing. */
-.qm-frame {
-	box-sizing: border-box;
-	position: relative;
-	min-width: 0;
-	min-height: 0;
-	border: var(--qmh-border-width) solid var(--qmh-border);
-	border-radius: var(--qmh-radius);
-	overflow: hidden;
-}
-
 /* ── Type ──────────────────────────────────────────────────────────────────── */
 
 /* A run of chrome type: a section's label, a panel's caption, the name over a readout.
@@ -306,6 +157,13 @@ pre.qm-readout {
 	background: var(--qmh-surface-hover);
 }
 
+/* Centred in the shell's switch band, which is what a control filling half a band reads
+   as; `.qm-control` itself reads left, for the menus it also dresses. Here rather than
+   beside the band in `shell.css`, which ranks at zero and so could not outrank this. */
+.qm-switch > .qm-control {
+	text-align: center;
+}
+
 /* One choice means nothing to pick: the control stays, because what it reads is a fact
    worth having, and it recedes to say it is not a choice. */
 .qm-control:disabled {

package/dist/preset/scale.css

@@ -18,7 +18,7 @@
    could not be both.
 
    Literals live here and nowhere else in the preset: `check:style` runs its axes over
-   `recipes.css` beside it, with this file exempt as the place the defaults are minted.
+   the sheets beside it, with this file exempt as the place the defaults are minted.
 
    The poles fall back to the system colours, so a host that turns no dial still lands
    where its own unstyled text does — `Canvas` being the plane the UA would have
@@ -48,6 +48,14 @@
 	   the underline under a link. */
 	--qmh-border-strong: color-mix(in oklab, var(--qmh-surface), var(--qmh-ink) 40%);
 
+	/* The one hue a host's page spends on purpose: the primary action wears it. The
+	   figures are the surfaces' own default for the same dial, so a page that turns no
+	   dial and a card's focus ring agree; the ink on it is the plate's, the pole the
+	   accent's default contrasts against in both schemes. */
+	--qmh-accent: var(--qm-accent, light-dark(#71717a, #a1a1aa));
+	--qmh-on-accent: var(--qmh-surface);
+	--qmh-accent-hover: color-mix(in oklab, var(--qmh-accent), var(--qmh-ink) 15%);
+
 	/* The hue a host spends on a failure. The figures are the surfaces' own, so a
 	   page's status line and a card's diagnostic carry one colour meaning error.
 	   Each pole is its own figure: a hue calibrated against white reads as a stain
@@ -92,6 +100,7 @@
 	   surfaces' ramp, which is chrome inside a card, and a page's body text is a
 	   different job at a different size. A host that wants them locked sets both. */
 	--qmh-text: 1rem;
+	--qmh-text-title: 1.125rem;
 	--qmh-text-label: 0.8125rem;
 	--qmh-text-meta: 0.6875rem;
 	--qmh-weight-strong: 600;

package/dist/preset/shell.css

@@ -0,0 +1,147 @@
+/* The shell: the screen an app mounting two surfaces over one session is, drawn once
+   (THEMING §"The shell, if you are building a tool"). `recipes.css` dresses the page a
+   surface sits on; this is what it is mounted in, a tool where `.qm-page` is a document.
+
+   Every selector here computes at specificity zero, as the surfaces' own do: a host's
+   rule on the same element wins whatever order the sheets land in, and an app whose
+   stylesheet someone else writes (quillkit's app client, under an author's `app.css`)
+   needs no knowledge of which of these the client happened to set. `check:style` holds
+   the rank. This file mints nothing. */
+
+/* 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
+   their overflow and hold still while their contents move.
+
+   The one column is stated for the same reason the rows are: an implicit track is `auto`,
+   which is sized by what a band holds, and a `.qm-split` under one contributes its items'
+   max-content through its `fr` tracks. The shell would take the width of the widest thing
+   mounted in it instead of the viewport's, and every band would be that wide with the
+   second pane past the edge. A host holding its content to a maximum never sees it; one
+   spending the whole screen sees it on the first surface it mounts. */
+:where(.qm-workspace) {
+	position: fixed;
+	inset: 0;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	grid-template-rows: auto minmax(0, 1fr) auto;
+	overflow: hidden;
+}
+
+/* A gesture past the end of a pane chains out to the viewport and bounces the empty
+   document, which is the last way a pinned shell moves. Conditioned on the workspace, so
+   a host's other routes keep a page's own feel. */
+:where(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
+   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. */
+:where(.qm-bar) {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	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
+   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
+   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. */
+:where(.qm-split) {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+	grid-template-rows: minmax(0, 1fr);
+	gap: var(--qmh-space-4);
+	min-height: 0;
+}
+
+/* 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. */
+:where(.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 its
+   resize observer holds the last real width rather than rastering at the 0×0 box a hidden
+   pane reports, so what comes back at the width it left needs no paint at all. The
+   preview's caret follow spans the same window — a trip asked for against a pane with no
+   box is held and run when it has one (`preview/bridge.ts`), the pane opening at the
+   caret rather than several edits behind it.
+
+   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) {
+	:where(.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. */
+	:where(.qm-switch > *) {
+		flex: 1 1 0;
+		min-height: var(--qmh-tap);
+	}
+
+	:where(.qm-split) {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	:where(.qm-split:not([data-qm-show='2']) > :nth-child(2)),
+	:where(.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
+   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
+   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
+   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
+   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
+   initial value and do nothing. */
+:where(.qm-frame) {
+	box-sizing: border-box;
+	position: relative;
+	min-width: 0;
+	min-height: 0;
+	border: var(--qmh-border-width) solid var(--qmh-border);
+	border-radius: var(--qmh-radius);
+	overflow: hidden;
+}

package/dist/preview/Preview.svelte

@@ -178,6 +178,14 @@
 		pointer-events: none;
 		transition: opacity var(--_qm-reveal);
 	}
+	/* A screen with no hover has no pointer to bring it back, and the pill is the way back
+	   to the fit there, so it stays. */
+	@media (hover: none) {
+		:global(:where(.qm-preview-zoom[data-idle])) {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
 	:global(:where(.qm-preview-zoom:focus-visible)) {
 		opacity: 1;
 		pointer-events: auto;

package/dist/preview/bridge.js

@@ -1,5 +1,5 @@
 import { boxesForField, rectToPercent, clickToPdfPt, pxToPt, applyPercentRect } from './geometry.js';
-/** A pane hidden by the shell's narrow switch (`preset/recipes.css`) measures 0×0, and so
+/** A pane hidden by the shell's narrow switch (`preset/shell.css`) measures 0×0, and so
  *  does every box on it: the clearance arithmetic reads that as a caret clear of both
  *  edges, and a centring computes its trip out of zeros. Neither is an answer about where
  *  the caret is. */

package/dist/preview/viewport.js

@@ -42,15 +42,17 @@ export function createViewport(container, slots, setScale, resetLabel) {
         // was hidden at stands, so a return to the same box re-rasters nothing.
         return width > 0 && height > 0 ? { width, height } : undefined;
     }
-    // What the pages are drawn at, the zoom held against this pane's floor, and the floor.
+    // What the pages are drawn at, the zoom held against this pane's floor, the floor, and
+    // the default fit.
     function bounds() {
         const box = pane();
         if (!box || !slots.length)
             return undefined;
         const sizes = slots.map((s) => s.size);
         const floor = floorZoom(sizes, box);
-        const current = zoom === undefined ? fitZoom(sizes, box) : clampZoom(zoom, floor);
-        return { current, floor };
+        const fit = fitZoom(sizes, box);
+        const current = zoom === undefined ? fit : clampZoom(zoom, floor);
+        return { current, floor, fit };
     }
     function apply(settle) {
         const b = bounds();
@@ -113,11 +115,11 @@ export function createViewport(container, slots, setScale, resetLabel) {
     // A re-fit holds the line at the pane's top edge, so a dragged divider leaves the
     // reader where they were. The desk turns the browser's own scroll anchoring off
     // (`Preview.svelte`), which would correct the same move a second time.
-    function refit() {
+    function refit(settle) {
         if (!container.scrollTop && !container.scrollLeft)
-            return apply();
+            return apply(settle);
         const r = container.getBoundingClientRect();
-        holding(r.left + r.width / 2, r.top, () => apply());
+        holding(r.left + r.width / 2, r.top, () => apply(settle));
     }
     function centre() {
         const r = container.getBoundingClientRect();
@@ -125,27 +127,29 @@ export function createViewport(container, slots, setScale, resetLabel) {
     }
     // The pointer while it is over the pane, else the pane's centre.
     const anchor = () => pointer ?? centre();
+    // A zoom landing on the fit is the default again, and follows the pane from there.
+    const settled = (next, b) => next === b.fit ? undefined : next;
     function step(next, at = anchor()) {
         const b = bounds();
         if (!b)
             return;
         run = undefined;
-        zoomTo(next(b), at.x, at.y);
+        zoomTo(settled(next(b), b), at.x, at.y);
     }
     // About the pane's centre, the pointer being on the pill.
     const reset = () => step(() => undefined, centre());
     // The raw zoom a gesture starting now carries from: the run's own while it is still
     // the one on screen.
     function from(b) {
-        return run && run.shown === b.current ? run : { raw: b.current, shown: b.current };
+        return run && run.shown === b.current ? run : { raw: b.current, shown: b.current, slack: 0 };
     }
     function glideTo(raw, x, y) {
         const b = bounds();
         if (!b)
             return;
         const start = from(b);
-        run = glide(start, raw(start), b.floor);
-        zoomTo(run.shown, x, y, SETTLE_MS);
+        run = glide(start, raw(start), b.floor, b.fit);
+        zoomTo(settled(run.shown, b), x, y, SETTLE_MS);
     }
     // Ctrl-wheel is a mouse's zoom, and the trackpad pinch Chromium and Firefox send as
     // `deltaY = -100 ln(scale)`, in deltas smaller than a notch's: those track the fingers.
@@ -169,7 +173,7 @@ export function createViewport(container, slots, setScale, resetLabel) {
         if ((!dir && e.key !== '0') || !bounds())
             return;
         e.preventDefault();
-        step((b) => (dir ? stepZoom(b.current, dir, b.floor) : undefined));
+        step((b) => (dir ? stepZoom(b.current, dir, b.floor, b.fit) : undefined));
     }
     let pinch;
     // The fingers on this pane, not one resting on the editor beside it.
@@ -270,13 +274,14 @@ export function createViewport(container, slots, setScale, resetLabel) {
     ];
     for (const [target, type, fn, opts] of listeners)
         target.addEventListener(type, fn, opts);
-    // The pane's box moving: a dragged divider, a resized window, a hidden track shown.
-    // Guarded for jsdom, which ships no ResizeObserver.
-    const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(() => refit());
+    // The pane's box moving: a dragged divider, a resized window, a hidden track shown. A
+    // drag is a gesture, so its pages re-raster once it rests. Guarded for jsdom, which
+    // ships no ResizeObserver.
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(() => refit(SETTLE_MS));
     resizeObserver?.observe(container);
     apply();
     return {
-        update: refit,
+        update: () => refit(),
         setZoom(next) {
             const valid = next !== undefined && Number.isFinite(next) && next > 0 ? next : undefined;
             if (bounds())

package/dist/preview/zoom.d.ts

@@ -20,22 +20,26 @@ export declare function fitZoom(pages: readonly PageSize[], pane: Pane): number;
  *  default, which on a pane past the cap is already smaller than that. */
 export declare function floorZoom(pages: readonly PageSize[], pane: Pane): number;
 export declare function clampZoom(zoom: number, floor: number): number;
-/** The next level in `dir` from `zoom`, skipping levels under `floor`. From between two
- *  levels the first press lands on the nearer one in that direction; past the last level
- *  above the floor, the floor. Half a percent of slack, so a zoom shown as a level is at
- *  it. */
-export declare function stepZoom(zoom: number, dir: 1 | -1, floor: number): number;
+/** The next level in `dir` from `zoom`, `fit` among them, skipping levels under `floor`.
+ *  From between two levels the first press lands on the nearer one in that direction;
+ *  past the last level above the floor, the floor. Half a percent of slack, so a zoom
+ *  shown as a level is at it. */
+export declare function stepZoom(zoom: number, dir: 1 | -1, floor: number, fit: number): number;
 /**
- * A continuous gesture's run: where it would be unsnapped (`raw`), and what it shows.
- * The run carries `raw` across events, so the detent at 100% holds a slow gesture
- * rather than stopping it: a trackpad's small deltas accumulate past the detent, where
- * snapping the shown value alone would pin every later event back to it.
+ * A continuous gesture's run: the zoom its events have asked for (`raw`), what it shows,
+ * and, while it shows a hold, how far past the hold the events have carried (`slack`, a
+ * log of the ratio). The run moves `shown` by each event's ratio rather than snapping
+ * `raw`, so a trackpad's small deltas carry it out of a hold as smoothly as they carried
+ * it in.
  */
 export interface Glide {
     raw: number;
     shown: number;
+    slack: number;
 }
-/** One event of a continuous gesture, carrying the run to `raw`: held at 100% when it
- *  crosses or lands within {@link DETENT} of it, so one wheel notch across actual size
- *  stops there. */
-export declare function glide(run: Glide, raw: number, floor: number): Glide;
+/** One event of a continuous gesture, carrying the run to `raw`. It stops at `fit` or
+ *  100% when it crosses one, at the first it meets, so one wheel notch across either
+ *  stops there; it leaves a hold once carried {@link DETENT} past, moving on from the
+ *  hold rather than jumping to where the events would have put it. 100% gives way to a
+ *  `fit` within the detent of it: two holds that close would pin the run between them. */
+export declare function glide(run: Glide, raw: number, floor: number, fit: number): Glide;

package/dist/preview/zoom.js

@@ -12,8 +12,10 @@ const FLOOR_FILL = 0.9;
 /** What `Mod +` and `Mod −` step through: a subset of the levels a browser's own zoom
  *  keys land on, so a step lands somewhere a reader has been before. */
 export const STEPS = [0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
-/** How far past 100% a continuous gesture carries before it leaves it. */
+/** How far, as a log of the zoom's ratio to a hold, a continuous gesture carries past it
+ *  before it leaves it: a ratio, so a hold is as wide at a phone's fit as at 100%. */
 const DETENT = 0.04;
+const near = (zoom, hold) => Math.abs(Math.log(zoom / hold)) <= DETENT;
 /** The default: the widest page fits the pane's width, capped at {@link FIT_CAP}. A
  *  portrait-only document lands at the pane's width, as a narrow pane always drew it. */
 export function fitZoom(pages, pane) {
@@ -30,23 +32,43 @@ export function floorZoom(pages, pane) {
 export function clampZoom(zoom, floor) {
     return Math.min(MAX_ZOOM, Math.max(floor, zoom));
 }
-/** The next level in `dir` from `zoom`, skipping levels under `floor`. From between two
- *  levels the first press lands on the nearer one in that direction; past the last level
- *  above the floor, the floor. Half a percent of slack, so a zoom shown as a level is at
- *  it. */
-export function stepZoom(zoom, dir, floor) {
+/** The levels a step lands on: `STEPS` with `fit` among them, which takes the
+ *  place of any level within {@link DETENT} of it, since fit is the one that follows the
+ *  pane. */
+function stops(fit) {
+    return [...STEPS.filter((s) => !near(s, fit)), fit].sort((a, b) => a - b);
+}
+/** The next level in `dir` from `zoom`, `fit` among them, skipping levels under `floor`.
+ *  From between two levels the first press lands on the nearer one in that direction;
+ *  past the last level above the floor, the floor. Half a percent of slack, so a zoom
+ *  shown as a level is at it. */
+export function stepZoom(zoom, dir, floor, fit) {
+    const levels = stops(fit);
     const next = dir > 0
-        ? STEPS.find((s) => s > zoom + 0.005)
-        : [...STEPS].reverse().find((s) => s < zoom - 0.005 && s >= floor);
+        ? levels.find((s) => s > zoom + 0.005)
+        : levels.reverse().find((s) => s < zoom - 0.005 && s >= floor);
     return clampZoom(next ?? (dir > 0 ? MAX_ZOOM : floor), floor);
 }
-/** One event of a continuous gesture, carrying the run to `raw`: held at 100% when it
- *  crosses or lands within {@link DETENT} of it, so one wheel notch across actual size
- *  stops there. */
-export function glide(run, raw, floor) {
-    let next = clampZoom(raw, floor);
-    if ((run.shown - 1) * (next - 1) < 0)
-        next = 1;
-    const shown = Math.abs(next - 1) <= DETENT ? 1 : next;
-    return { raw: next, shown: clampZoom(shown, floor) };
+/** One event of a continuous gesture, carrying the run to `raw`. It stops at `fit` or
+ *  100% when it crosses one, at the first it meets, so one wheel notch across either
+ *  stops there; it leaves a hold once carried {@link DETENT} past, moving on from the
+ *  hold rather than jumping to where the events would have put it. 100% gives way to a
+ *  `fit` within the detent of it: two holds that close would pin the run between them. */
+export function glide(run, raw, floor, fit) {
+    const holds = near(fit, 1) ? [fit] : [fit, 1];
+    const step = Math.log(raw / run.raw);
+    let next;
+    if (holds.includes(run.shown)) {
+        const slack = run.slack + step;
+        if (Math.abs(slack) <= DETENT)
+            return { raw, shown: run.shown, slack };
+        next = run.shown * Math.exp(slack - Math.sign(slack) * DETENT);
+    }
+    else
+        next = run.shown * Math.exp(step);
+    next = clampZoom(next, floor);
+    const crossed = holds
+        .filter((t) => (run.shown - t) * (next - t) < 0)
+        .sort((a, b) => Math.abs(a - run.shown) - Math.abs(b - run.shown));
+    return { raw, shown: crossed[0] ?? next, slack: 0 };
 }

package/dist/visual/BooleanField.svelte

@@ -52,7 +52,7 @@
 
 <!-- Not `.qm-switch`: that name is the preset's pane band, whose narrow-viewport rule
  stands every child of it at `--qmh-tap`, so a track wearing it grows a thumb three times
- its own height over the labels around it (`preset/recipes.css`, held by `check:style`). -->
+ its own height over the labels around it (`preset/shell.css`, held by `check:style`). -->
 <span
 	class="qm-toggle-wrap"
 	data-unset={unset ? '' : undefined}

package/dist/visual/Card.svelte

@@ -211,12 +211,14 @@
 </script>
 
 <!-- `data-qm-card` names the island for a floating surface that has to stay inside one
- ({@link FieldHint}). A surface portals to `[data-qm-root]`, so the card is not its
- ancestor and nothing else marks the box its guidance belongs in. -->
+ ({@link FieldHint}): a surface portals to `[data-qm-root]`, so the card is not its
+ ancestor and nothing else marks the box its guidance belongs in. Its value is the card's
+ kind, `main` for the main card, which is the one schema-named hook a host's stylesheet
+ is promised (THEMING §"What a stylesheet may aim at"). -->
 <section
 	bind:this={el}
 	class={['qm-card', { 'qm-main': card.isMain, 'qm-unschemable': card.unschemable }]}
-	data-qm-card
+	data-qm-card={card.kind}
 >
 	{#if card.unschemable}
 		{@render recoveryShell()}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@quillmark/svelte",
-	"version": "0.26.2",
+	"version": "0.27.0",
 	"description": "Editor, live-preview and source surfaces over a Quillmark WASM session.",
 	"repository": {
 		"type": "git",