@quillmark/svelte 0.0.0

package/dist/core/theme.css

@@ -0,0 +1,276 @@
+/* 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
+   instead of once per detached root.
+
+   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
+   carry: a cascade layer consumer CSS beats without `!important`, real properties
+   on the root rule (`font-family`) that every root then inherits, and a free
+   `style` attribute for the consumer.
+
+   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:
+   THEMING.md §"What is deliberately not public" states the terms.
+
+   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
+   nothing below them. An `initial-value` must be computationally independent,
+   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
+   valid custom property and an invalid length, and unguarded it substitutes
+   through every `calc()` below and collapses the surface to zero. Registered,
+   the entry rung is invalid at computed-value time and lands on its initial
+   instead, so the chain under it computes from a length and the surface holds at
+   its default. The derived rungs need no registration of their own: they read a
+   computed length either way. The initials are the `rem` defaults against a 16px
+   root, so a host on another root size falls back to the package's figure rather
+   than its own — reachable only once a dial is already invalid. Where
+   `@property` is unsupported the at-rule is skipped and the collapse returns,
+   which is the unguarded behaviour rather than a new one. */
+
+@property --_qm-space {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 4px;
+}
+@property --_qm-radius {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 8px;
+}
+@property --_qm-text-body {
+	syntax: '<length>';
+	inherits: true;
+	initial-value: 14px;
+}
+
+@layer qm.scale, qm.chrome;
+
+@layer qm.scale {
+	:where([data-qm-root]) {
+		/* ── Poles ───────────────────────────────────────────────────────────────
+		   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
+		   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,
+		   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));
+		--_qm-accent: var(--qm-accent, #2563eb);
+		--_qm-danger: var(--qm-danger, #c5221f);
+		--_qm-warning: var(--qm-warning, #b25000);
+		--_qm-font: var(--qm-font, ui-sans-serif, system-ui, sans-serif);
+		--_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).
+
+		   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. */
+		--_qm-surface: var(--_qm-bg);
+		--_qm-surface-raised: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 4%);
+		--_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,
+		   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
+		   surface behind it, not a fill stacked on one. */
+		--_qm-border-faint: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 9%);
+		--_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
+		   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);
+
+		/* ── Ratios and effects ──────────────────────────────────────────────────
+		   No palette fixes these, so they are their own rungs. There is no shadow
+		   rung: elevation is a tone rung and a hairline, which say the same thing at
+		   both poles, where a shadow's offset states a light source the poles do not
+		   carry. `check:style` forbids the property outright,
+		   here as well as over the surfaces, so the absence is gated rather than
+		   remembered. */
+		--_qm-blur: 8px;
+		/* The popover's translucency: the raised surface mixed toward transparent, so
+		   the page reads faintly through the pill. */
+		--_qm-surface-popover: color-mix(in oklab, var(--_qm-surface-raised) 82%, transparent);
+		/* The recede ladder: a hover-revealed or disabled affordance at rest, and a
+		   muted one. Opacity recedes toward whatever is behind, so these invert
+		   correctly given the element's own colour is a rung. */
+		--_qm-opacity-idle: 0.35;
+		--_qm-opacity-muted: 0.5;
+
+		/* ── Focus ───────────────────────────────────────────────────────────────
+		   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
+		   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);
+		--_qm-ring-offset: 1px;
+
+		/* ── Motion ──────────────────────────────────────────────────────────────
+		   Two rungs, by what the trip disturbs: `fast` stays inside the element's own
+		   box, `slow` moves the layout around it. */
+		--_qm-duration-fast: 120ms;
+		--_qm-duration-slow: 200ms;
+		/* The bloom's whole rise-hold-decay, and deliberately not a third rung. A
+		   custom property rather than a constant in `core/bloom.ts` because that module
+		   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. */
+		--_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);
+
+		/* ── Geometry ──────────────────────────────────────────────────────────*/
+		/* 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
+		   the bracket's whole claim is that its vertical and its horizontals are the
+		   same stroke, and `check:style`'s border-width axis can only hold that
+		   against a token. */
+		--_qm-border-width: 1px;
+		--_qm-radius: var(--qm-radius, 8px);
+		--_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. */
+		--_qm-radius-pill: 999px;
+		--_qm-space: var(--qm-space, 0.25rem);
+		--_qm-space-half: calc(var(--_qm-space) / 2);
+		--_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
+		   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
+		   reach, where a page and a text mirror end where the document ends. */
+		--_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
+		   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. */
+		--_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-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;
+		/* 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
+		   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
+		   line box onto its content, a glyph or a button's one-line label. */
+		--_qm-leading-body: 1.5;
+		--_qm-leading-tight: 1.3;
+
+		/* ── The baseline every root inherits ────────────────────────────────────
+		   Real properties, not only custom ones: the thing an inline attribute
+		   could carry but never did, which is why `--qm-font` reached one root of
+		   five. `color-scheme` is deliberately absent: it inherits, so the host's
+		   reaches this root untouched and native chrome (scrollbars, the date
+		   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
+		   declares `color-scheme` with it, on the root (THEMING.md).
+
+		   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
+		   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
+		   unreachable under a marker, so a type-bearing surface lands on the ramp
+		   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
+		   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
+		   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. */
+		font-family: var(--_qm-font);
+		color: var(--_qm-ink);
+		line-height: var(--_qm-leading-body);
+	}
+
+	/* 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
+	   waiting on `transitionend` keeps its event, where `transition: none` would strand
+	   it. The beat is under perception either way.
+
+	   `200ms` rather than `1ms` for the dwell, because the bloom's reduced form is a
+	   hold and a cut (`core/bloom.ts` swaps the ramps out), and a hold is a duration:
+	   collapsing it deletes the gesture instead of shortening it. */
+	@media (prefers-reduced-motion: reduce) {
+		:where([data-qm-root]) {
+			--_qm-duration-fast: 1ms;
+			--_qm-duration-slow: 1ms;
+			--_qm-bloom-dwell: 200ms;
+		}
+	}
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './core/index.js';

package/dist/index.js

@@ -0,0 +1,9 @@
+// `@quillmark/svelte` root: the framework-free substrate.
+//
+// The headline surfaces mount from their own subpaths (`@quillmark/svelte/preview`,
+// `/visual`) so a bundler pulls only what an entry reaches; the root
+// re-exports `/core` (the address vocabulary, the error channel, `init`) for a
+// consumer that wants one import for the substrate. It carries no framework code.
+// The `@quillmark/wasm` API is imported from the peer dependency directly, never
+// from here.
+export * from './core/index.js';

package/dist/preset/index.css

@@ -0,0 +1,10 @@
+/* `@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.
+
+   Two files because one of them is exempt: `scale.css` is where the literals are
+   minted, `recipes.css` is held to reading them. */
+
+@import './scale.css';
+@import './recipes.css';

package/dist/preset/recipes.css

@@ -0,0 +1,188 @@
+/* THE ENDORSED LOOK: the rules a host draws around a mounted surface, 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
+   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
+   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
+   precedence and the focus rule works with nothing declared. */
+
+/* ── The page ──────────────────────────────────────────────────────────────── */
+
+/* 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
+   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 {
+	color-scheme: light dark;
+	margin: 0;
+	background: var(--qmh-page);
+	color: var(--qmh-ink);
+	font-family: var(--qmh-font);
+	font-size: var(--qmh-text);
+	line-height: var(--qmh-leading-body);
+	-webkit-font-smoothing: antialiased;
+}
+
+/* A column of prose at the measure, and the width only: what sits inside it is the
+   caller's, since a passage and a stack of panels want different rhythms. */
+.qm-measure {
+	max-width: var(--qmh-measure);
+}
+
+/* ── Type ──────────────────────────────────────────────────────────────────── */
+
+/* A run of chrome type: a section's label, a panel's caption, the name over a readout.
+   Uppercase and tracked, which is what keeps a run this small legible at the ghost
+   rung. */
+.qm-label {
+	font-family: var(--qmh-font-mono);
+	font-size: var(--qmh-text-meta);
+	line-height: var(--qmh-leading-tight);
+	letter-spacing: var(--qmh-track-label);
+	text-transform: uppercase;
+	color: var(--qmh-ghost);
+	margin: 0;
+}
+
+/* A value read back out of the running session: an address, a page index, a count.
+   Monospace and tabular, because these are read by comparison: two addresses one
+   above the other line up character for character. */
+.qm-readout {
+	font-family: var(--qmh-font-mono);
+	font-size: var(--qmh-text-label);
+	line-height: var(--qmh-leading-tight);
+	font-variant-numeric: tabular-nums;
+	color: var(--qmh-ink);
+	overflow-wrap: anywhere;
+}
+
+/* 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
+   block may grow before it scrolls is the host's policy rather than the look, so no
+   height is stated here. */
+pre.qm-readout {
+	box-sizing: border-box;
+	background: var(--qmh-page);
+	border: var(--qmh-border-width) solid var(--qmh-border);
+	border-radius: var(--qmh-radius-inner);
+	padding: var(--qmh-space-2);
+	margin: 0;
+	white-space: pre-wrap;
+	word-break: break-all;
+}
+
+/* ── Status ────────────────────────────────────────────────────────────────── */
+
+/* The boundary's phase while it is not open. An open session says the rest by painting
+   the page, so the states worth a word are the ones before and instead of that. */
+.qm-status {
+	font-family: var(--qmh-font-mono);
+	font-size: var(--qmh-text-meta);
+	line-height: var(--qmh-leading-tight);
+	letter-spacing: var(--qmh-track-label);
+	text-transform: uppercase;
+	color: var(--qmh-ghost);
+	margin: 0;
+}
+
+/* A failure carries a message rather than a state word, so it drops the label treatment
+   and reads as a sentence; and it breaks anywhere, because a WASM error is one long
+   token in whatever room the line has left. */
+.qm-status-error {
+	color: var(--qmh-alert);
+	font-size: var(--qmh-text-label);
+	text-transform: none;
+	letter-spacing: normal;
+	overflow-wrap: anywhere;
+}
+
+.qm-status-warn {
+	color: var(--qmh-warn);
+}
+
+/* ── 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. */
+.qm-panel {
+	box-sizing: border-box;
+	background: var(--qmh-surface);
+	border: var(--qmh-border-width) solid var(--qmh-border);
+	border-radius: var(--qmh-radius);
+	padding: var(--qmh-space-4);
+}
+
+/* ── Controls ──────────────────────────────────────────────────────────────── */
+
+/* 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. */
+.qm-control {
+	font: inherit;
+	font-family: var(--qmh-font-mono);
+	font-size: var(--qmh-text-label);
+	line-height: var(--qmh-leading-tight);
+	color: var(--qmh-ink);
+	background: var(--qmh-page);
+	border: var(--qmh-border-width) solid var(--qmh-border);
+	border-radius: var(--qmh-radius-inner);
+	padding: var(--qmh-space) var(--qmh-space-2);
+	cursor: pointer;
+	text-align: left;
+	transition: background-color var(--qmh-duration) var(--qmh-ease-reverse);
+}
+
+.qm-control:hover {
+	background: var(--qmh-surface-hover);
+}
+
+/* On, whichever way the control says so: a switch that is pressed, or the link to the
+   variant you are already in. */
+.qm-control[aria-pressed='true'],
+.qm-control[aria-current='true'] {
+	border-color: var(--qmh-border-strong);
+	background: var(--qmh-surface-hover);
+}
+
+/* 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 {
+	color: var(--qmh-ink-meta);
+	background: var(--qmh-surface);
+	cursor: default;
+}
+
+/* ── 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
+   focus ring is a position, not a destination. */
+:focus-visible {
+	outline: var(--qmh-ring-width) solid var(--qmh-ink);
+	outline-offset: var(--qmh-space-half);
+}
+
+/* The mounted surfaces are the exception, and the rule above is why: an unlayered host
+   declaration beats `@layer qm.chrome` by design, so a ring written for controls that
+   draw none repaints the ones that do. `revert-layer` hands each control back to the
+   layer under this one, which is the package's own ring at its own offset, and is
+   what makes this file's own lack of a layer load-bearing rather than a preference. */
+[data-qm-root] :focus-visible {
+	outline: revert-layer;
+	outline-offset: revert-layer;
+}

package/dist/preset/scale.css

@@ -0,0 +1,97 @@
+/* THE HOST'S DERIVATION: the same public dials in, a closed `--qmh-*` scale for the
+   page AROUND the surfaces out. `core/theme.css` is the same shape one level down
+   (dials in, `--_qm-*` out), and the two are calibrated against each other: the mixes
+   here are the percentages there (4pp between surface steps, 17% border, 45% and 60%
+   ink), so a host plate and a card on it agree about which way "raised" goes and land
+   on the same tone at both poles.
+
+   TWO SCALES rather than one because they answer to different roots. `--_qm-*` is
+   declared ON each mounted root, out of reach from an ancestor, so a surface holds its
+   scale wherever it is dropped. A host scale has the opposite job: it is the document,
+   so it is declared at `:root` and everything on the page reads it. A single namespace
+   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 poles fall back to the SYSTEM colours, so a host that turns no dial still lands
+   where its own unstyled text does. The dials sit in front, so `--qm-bg`/`--qm-fg` on
+   an ancestor retunes page and surface together. */
+
+:root {
+	/* ── Colour ──────────────────────────────────────────────────────────────── */
+	--qmh-page: var(--qm-bg, Canvas);
+	--qmh-ink: var(--qm-fg, CanvasText);
+	--qmh-ink-meta: color-mix(in oklab, var(--qmh-ink), var(--qmh-page) 45%);
+	--qmh-ghost: color-mix(in oklab, var(--qmh-ink), var(--qmh-page) 60%);
+	/* Two planes behind content, 4pp apart exactly as the surfaces step, so a host
+	   plate and a card on it agree about which way "raised" goes in both schemes. */
+	--qmh-surface: color-mix(in oklab, var(--qmh-page), var(--qmh-ink) 4%);
+	--qmh-surface-hover: color-mix(in oklab, var(--qmh-page), var(--qmh-ink) 8%);
+	--qmh-border: color-mix(in oklab, var(--qmh-page), var(--qmh-ink) 17%);
+	/* The edge that says "engaged" where the hairline says "edge": a pressed switch,
+	   the underline under a link. */
+	--qmh-border-strong: color-mix(in oklab, var(--qmh-page), var(--qmh-ink) 40%);
+
+	/* The two hues a host spends, and it spends them on a message. Both read the DIAL,
+	   so a page carries one colour meaning error and one meaning warning rather than a
+	   second pair beside the surfaces'. The dark half is a lift the dials do not carry:
+	   a hue calibrated against white reads as a stain on a dark page. */
+	--qmh-alert: light-dark(var(--qm-danger, #c5221f), #ff9c94);
+	--qmh-warn: light-dark(var(--qm-warning, #b25000), #e0b44c);
+
+	/* ── Rhythm ──────────────────────────────────────────────────────────────── */
+	/* One base and its multiples, the same four steps the surfaces derive. A host
+	   separating SECTIONS down a page wants steps above these; it derives them from
+	   this base rather than minting them, which is what keeps its ramp one ramp. */
+	--qmh-space: var(--qm-space, 0.25rem);
+	--qmh-space-half: calc(var(--qmh-space) / 2);
+	--qmh-space-2: calc(var(--qmh-space) * 2);
+	--qmh-space-3: calc(var(--qmh-space) * 3);
+	--qmh-space-4: calc(var(--qmh-space) * 4);
+	--qmh-border-width: 1px;
+	--qmh-ring-width: 2px;
+	--qmh-radius: var(--qm-radius, 8px);
+	--qmh-radius-inner: calc(var(--qmh-radius) / 2);
+
+	/* The measure a passage wraps at. Reading geometry (what a line of text needs),
+	   so it does not derive from the spacing dial. */
+	--qmh-measure: 34rem;
+
+	/* ── Type ────────────────────────────────────────────────────────────────── */
+	/* Two faces with a job each: prose is sans, chrome is mono. Both are system stacks,
+	   so the preset costs no network request. The sans face reads the same dial the
+	   surfaces do, so one override moves page and card together; the mono stack is
+	   spelled out past the dial's default, because a host's chrome leans on it for
+	   tabular readouts and the two-name fallback is thin for that. */
+	--qmh-font: var(--qm-font, ui-sans-serif, system-ui, sans-serif);
+	--qmh-font-mono: var(--qm-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+
+	/* The page's own ramp, and it does NOT read `--qm-font-size`: that dial anchors the
+	   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-label: 0.8125rem;
+	--qmh-text-meta: 0.6875rem;
+	--qmh-weight-strong: 600;
+	--qmh-weight-mid: 500;
+	--qmh-leading-body: 1.6;
+	--qmh-leading-tight: 1.25;
+	--qmh-track-label: 0.08em;
+
+	/* ── Motion ──────────────────────────────────────────────────────────────── */
+	/* One rung of each: a host's chrome is states toggling under the pointer that
+	   nobody watches, so every trip is between two rest states and reverses mid-flight.
+	   A second duration would need something the eye tracks, and a second curve
+	   something that arrives or leaves. */
+	--qmh-duration: 140ms;
+	--qmh-ease-reverse: cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+/* Collapse the SCALE, not each transition: every animated recipe reads the rung, so one
+   override reaches all of them with no `*` rule touching mounted package elements. */
+@media (prefers-reduced-motion: reduce) {
+	:root {
+		--qmh-duration: 1ms;
+	}
+}