dowel-ui 0.34.1 → 0.35.0

package/dist/registry.json

@@ -14,7 +14,7 @@
           "path": "dowel/theme.css",
           "target": "~/dowel/theme.css",
           "type": "registry:file",
-          "content": "/*\n * dowel theme - the token vocabulary every product of the lacodda line shares.\n *\n * The vocabulary comes from the products themselves: kilna and kasl-server\n * already ship the same token names (bg / raise / soft / line / text / dim /\n * accent / good / warn / bad / info) and differ only in values. That is the\n * contract this file freezes. Names are the mockup's own words rather than\n * stock component-library names, so a screen can be checked against a mockup\n * in the mockup's words.\n *\n * Two things are parametric, and everything else is derived from them:\n *\n *   --accent-base   the product's hue from the brand-line registry\n *   --neutral-base  the hue the greys are tinted with (the accent, by default)\n *\n * Tinting the neutrals is not decoration - it is what the two live products do\n * by hand: kilna's greys lean magenta, kasl-server's lean gold. Here that lean\n * is one declaration instead of thirty hand-picked hex values.\n *\n * Soft variants are mixed from their own base with `color-mix`, so a product\n * that overrides `--accent-base` gets a matching `--accent-soft` for free and\n * cannot pick one that disagrees with it.\n *\n * Theme selection: no class on the root element follows the operating system,\n * an explicit `light` or `dark` class pins the theme. Components never use\n * `dark:` utilities - every colour goes through a token, and the theme swaps\n * the token underneath.\n */\n\n:root {\n  /* The two parameters. `--accent-base` is overridden per product by an accent\n   * file; `--neutral-base` follows it unless a product says otherwise. */\n  --accent-base: #e8862d;\n  --neutral-base: var(--accent-base);\n\n  /* Ink and ground of the dark theme, before the neutral tint is mixed in.\n   * Kept as their own tokens so the tint amount is the only thing that\n   * changes when a product wants greyer or warmer chrome. */\n  --ground: #131316;\n  --ink: #ece9ef;\n\n  /* How much of `--neutral-base` bleeds into the greys. The live products sit\n   * at roughly this much: enough that the chrome belongs to the product,\n   * little enough that it still reads as grey. */\n  --neutral-tint: 6%;\n  --neutral-tint-strong: 9%;\n\n  color-scheme: dark;\n\n  --bg: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ground));\n  --raise: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), #1c1c21);\n\n  /* Surfaces that lift by translucency rather than by their own colour: they\n   * must work over `--bg` and over `--raise` alike. */\n  --soft: rgb(255 255 255 / 0.045);\n  --softer: rgb(255 255 255 / 0.025);\n  --line: rgb(255 255 255 / 0.08);\n  --line-2: rgb(255 255 255 / 0.15);\n\n  --text: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ink));\n  --dim: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #a7a2ad);\n  --faint: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #6e6a76);\n\n  --accent: var(--accent-base);\n  /* The hover/active partner: lighter on dark, where the ground is what the\n   * accent has to separate from. */\n  --accent-2: color-mix(in oklab, white 22%, var(--accent-base));\n  --accent-soft: color-mix(in oklab, var(--accent-base) 16%, transparent);\n\n  /* Status hues are the line's own and do not follow the product accent: a\n   * green that shifted per product would stop meaning \"good\". Meaning never\n   * rests on colour alone - a badge carries an icon and a word - so these\n   * exist for emphasis, not as the message. */\n  --good: #45d18f;\n  --warn: #e8b13f;\n  --bad: #ef6a6a;\n  --info: #4cc4e0;\n  --good-soft: color-mix(in oklab, var(--good) 14%, transparent);\n  --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent);\n  --bad-soft: color-mix(in oklab, var(--bad) 14%, transparent);\n  --info-soft: color-mix(in oklab, var(--info) 15%, transparent);\n\n  /* Series colours, for charts.\n   *\n   * Like the status hues and unlike everything else here, these do NOT follow\n   * the product accent - and that is the whole decision. A series is a\n   * property of the data, not of the product showing it; a palette derived\n   * from the accent would paint the same series differently in kilna and in\n   * kasl-server, which is the one thing a series colour must never do.\n   *\n   * Deriving them from the accent was measured, not guessed: rotating the hue\n   * by fixed angles put the best candidate at Delta-E 12.1 from the product's\n   * own accent with adjacent pairs at 9.8, and threw 46 of 152 colours outside\n   * sRGB. The fixed palette does better on both counts.\n   *\n   * The cost of fixing them is stated plainly: 13 of the line's 19 accents sit\n   * within Delta-E 8 of some slot (lyrid 2.7, atlas 3.1, turnout 3.2). A chart\n   * shows one accent, so this is survivable - but it is exactly why identity is\n   * carried by the legend and by direct labels, never by hue on its own. The\n   * components of this block enforce that; it is not advice.\n   *\n   * Assigned in order, 1..8, and never cycled: a ninth series folds into\n   * \"other\", or the chart becomes small multiples. The order is the\n   * colour-blind-safety mechanism - the worst adjacent pair is Delta-E 8.4\n   * under simulated protanopia - so re-ordering these breaks a gate.\n   *\n   * Slot 8 is the line's own value rather than the reference palette's. The\n   * reference red sat Delta-E 1.9 from `--bad`, which would have let a series\n   * impersonate a status; this one clears every status by 15 and costs\n   * nothing, the worst adjacent pair being unchanged.\n   *\n   * Some slots sit below 3:1 against the surface. That is allowed only because\n   * the relief ships with them: visible values, or the table view.\n   */\n  --series-1: #3987e5;\n  --series-2: #d95926;\n  --series-3: #199e70;\n  --series-4: #c98500;\n  --series-5: #d55181;\n  --series-6: #008300;\n  --series-7: #9085e9;\n  --series-8: #a3215a;\n\n  /* Magnitude rather than identity: one hue, light to dark. A heatmap cell\n   * reads this. The lightest step is allowed to recede toward the surface,\n   * because \"near zero\" should; an ordered-but-discrete scale (tiers, funnel\n   * stages) starts at 300 instead, where the contrast still holds. */\n  --scale-100: #0d366b;\n  --scale-200: #184f95;\n  --scale-300: #256abf;\n  --scale-400: #2a78d6;\n  --scale-500: #3987e5;\n  --scale-600: #5598e7;\n  --scale-700: #86b6ef;\n\n  /* The chart's own furniture. A gridline that competes with the data is drawn\n   * wrong, so it is quieter than `--line`; the axis is the one that may be\n   * seen. */\n  --chart-grid: rgb(255 255 255 / 0.06);\n  --chart-axis: rgb(255 255 255 / 0.14);\n\n  /* Heat, for a grid of cells where colour is the only thing carrying the\n   * value - a year of activity, a month of a team's hours.\n   *\n   * Five discrete steps rather than the seven of `--scale-*`, and a separate\n   * set rather than a slice of them, because the two answer different\n   * questions. `--scale-*` is sequential: a continuous magnitude, where the\n   * lightest step means \"near zero\" and may recede toward the surface.\n   * Heat is ordinal: five shades a reader tells apart at a glance and matches\n   * against a legend, which needs wider gaps between them (no slice of\n   * `--scale-*` clears the 0.06 lightness step - they sit 0.047 apart) and a\n   * bottom step that stays distinct from an empty cell.\n   *\n   * That last one is the whole point. A heatmap cell has more meanings than a\n   * number: nothing recorded, a day still running, a day outside the data, and\n   * a value. If the faintest value looks like the empty cell, the grid says\n   * somebody did nothing on a day nobody reported - and `--heat-1` clears the\n   * empty square by 2.1:1 so it cannot.\n   *\n   * Fixed, like the series and unlike almost everything else here. Derived\n   * from the accent - as the first consumer did - the faintest step sat 1.3:1\n   * from the empty cell for half the line, and pinning lightness instead ran\n   * out of sRGB: the darkest accents cannot reach the top of the ramp at their\n   * own chroma.\n   */\n  --heat-1: #28528e;\n  --heat-2: #3a65a3;\n  --heat-3: #4d78b7;\n  --heat-4: #608ccd;\n  --heat-5: #73a0e2;\n\n  /* Syntax, for code shown inside a product.\n   *\n   * Eight kinds rather than the fifty a highlighter's theme names, because\n   * these are the distinctions that survive across languages: a keyword, a\n   * literal string, a number, a comment, an identifier, a type, punctuation,\n   * and the metadata around the code (a decorator, an attribute, a prompt).\n   * Anything finer is a grammar's own vocabulary and does not travel.\n   *\n   * Fixed, like the series and the heat ramps, and for the same reason: code\n   * is not a property of the product showing it, and `if` should not be\n   * magenta in kilna and cobalt in kasl-server.\n   *\n   * Chosen against the surface code actually sits on - `--soft` over `--bg`,\n   * which is what CodeBlock and `.prose pre` draw - and every slot clears\n   * 4.5:1 AS TEXT in both themes. That threshold, not the 3:1 the series are\n   * held to, is the whole reason these exist separately: the series palette\n   * was measured here first and five of its eight light values sat under 3:1,\n   * one at 1.90:1. A filled bar can be pale; a 12px glyph cannot.\n   *\n   * These are deliberately NOT held to the colour-blind floor the series are.\n   * A series colour is the identity of its mark - lose the hue and the data is\n   * gone. Syntax colour is a second reading of what the text already says in\n   * full: a keyword is a keyword by its spelling, and CodeBlock's default\n   * renders no colour at all and stays readable. `syntax.test.ts` says so in\n   * place, so the omission is not mistaken for an oversight.\n   *\n   * `comment` is the quietest on purpose - it is the one kind a reader is\n   * meant to be able to skip - and still clears the threshold.\n   */\n  --syntax-keyword: #c792ea;\n  --syntax-string: #9ccc65;\n  --syntax-number: #f78c6c;\n  --syntax-comment: #9e99a6;\n  --syntax-name: #82aaff;\n  --syntax-type: #4dd0b1;\n  --syntax-punctuation: #c4bfcb;\n  --syntax-meta: #f0a868;\n\n  /* Elevation, three steps. The products had one shadow and used it for\n   * everything that leaves the flow - a toast, a dropdown and a modal all\n   * floated by the same amount, so a modal never felt further away than the\n   * menu it covered. The three are the steps.\n   *\n   * Two layers each, and that is what makes them read as depth on a dark\n   * surface rather than as a stain. One big soft blur at high opacity is what\n   * these were - `0 24px 60px` of 55% black - and against a near-black page\n   * the wide skirt never resolves into shade: it just darkens a ring of\n   * background around the panel, which a pilot photographed and called an ugly\n   * dark contour. Depth is read from the CONTACT shadow, the tight one right\n   * under the edge; the ambient layer only has to hint that there is room\n   * under the thing. So each step is a tight, slightly stronger layer plus a\n   * wider, much weaker one, and the totals come down. */\n  --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.22);\n  --shadow-raise: 0 2px 4px rgb(0 0 0 / 0.36), 0 8px 20px rgb(0 0 0 / 0.26);\n  --shadow-float: 0 4px 8px rgb(0 0 0 / 0.36), 0 18px 44px rgb(0 0 0 / 0.32);\n}\n\n/*\n * Light theme, twice: once for the operating system's preference, once for the\n * explicit `light` class. The declarations are identical - only the selector\n * differs - so that a product can pin a theme against the system setting.\n */\n@media (prefers-color-scheme: light) {\n  :root:not(.dark) {\n    color-scheme: light;\n\n    --ground: #f6f5f7;\n    --ink: #232027;\n\n    --bg: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ground));\n    --raise: #ffffff;\n\n    /* Tinted, and translucent - which took two goes to get right.\n     *\n     * `color-mix` mixes the alpha along with the colour, so mixing 60% of an\n     * opaque accent into a 5%-opaque grey gives a surface 62% opaque: twelve\n     * times denser than the hairline it was meant to be. It went unnoticed for\n     * ten versions because `bg-soft` was only ever used for a hover, where a\n     * flash of colour reads as feedback rather than as a mistake. The first\n     * component to sit on it permanently - Alert - made it obvious.\n     *\n     * `oklch(from … / alpha)` keeps the alpha out of the mix: the hue comes\n     * from the tinted colour, the transparency is stated. */\n    --soft: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.05);\n    --softer: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.03);\n    --line: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.11);\n    --line-2: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.2);\n\n    --text: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ink));\n    --dim: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #63606b);\n    --faint: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #8a8692);\n\n    /* On a light ground the accent has to darken to stay legible as text and\n     * as a fill. It darkens *to* a lightness rather than *by* an amount: how\n     * far a hue has to travel depends on where it starts, and a fixed step\n     * that suits magenta leaves lime and gold short. Pinning the lightness and\n     * keeping the hue and chroma clears 5:1 for every accent in the line. */\n    --accent: oklch(from var(--accent-base) 0.5 c h);\n    --accent-2: oklch(from var(--accent-base) 0.4 c h);\n    --accent-soft: color-mix(in oklab, var(--accent-base) 12%, transparent);\n\n    --good: #0c8554;\n    --warn: #9a6b0c;\n    --bad: #c93b3b;\n    --info: #0d7f9c;\n    --good-soft: color-mix(in oklab, var(--good) 12%, transparent);\n    --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent);\n    --bad-soft: color-mix(in oklab, var(--bad) 12%, transparent);\n    --info-soft: color-mix(in oklab, var(--info) 11%, transparent);\n\n    /* Series and scale, stepped for the light surface - the same eight hues\n     * chosen again against this ground, not the dark values lightened. The dark\n     * block says why these do not follow the product accent. */\n    --series-1: #2a78d6;\n    --series-2: #eb6834;\n    --series-3: #1baf7a;\n    --series-4: #eda100;\n    --series-5: #e87ba4;\n    --series-6: #008300;\n    --series-7: #4a3aa7;\n    --series-8: #85284d;\n\n    --scale-100: #cde2fb;\n    --scale-200: #9ec5f4;\n    --scale-300: #6da7ec;\n    --scale-400: #3987e5;\n    --scale-500: #2a78d6;\n    --scale-600: #1c5cab;\n    --scale-700: #104281;\n\n    --chart-grid: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.08);\n    --chart-axis: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.18);\n\n    /* The same five steps chosen again for the light ground, running the other\n     * way: here \"more\" is darker. See the dark block for why heat is its own\n     * ramp and not a slice of `--scale-*`. */\n    --heat-1: #84a8fd;\n    --heat-2: #7193e7;\n    --heat-3: #5e7fd1;\n    --heat-4: #4c6cbb;\n    --heat-5: #3b58a6;\n\n    /* The same eight kinds chosen again for the light ground - not the dark\n     * values darkened. Each clears 4.5:1 as text against `--soft` over this\n     * theme's `--bg`; the dark block says why syntax is its own palette and\n     * why it is not held to the colour-blind floor. */\n    --syntax-keyword: #7c3aad;\n    --syntax-string: #276c2b;\n    --syntax-number: #b5451b;\n    --syntax-comment: #6f6b78;\n    --syntax-name: #1a5fb4;\n    --syntax-type: #00695c;\n    --syntax-punctuation: #4a4753;\n    --syntax-meta: #9c4a00;\n\n    --shadow-lift: 0 2px 8px rgb(30 24 38 / 0.08);\n    --shadow-raise: 0 10px 30px rgb(30 24 38 / 0.14);\n    --shadow-float: 0 24px 60px rgb(30 24 38 / 0.18);\n  }\n}\n\n:root.light {\n  color-scheme: light;\n\n  --ground: #f6f5f7;\n  --ink: #232027;\n\n  --bg: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ground));\n  --raise: #ffffff;\n\n  /* The same surfaces as above; see the note there. */\n  --soft: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.05);\n  --softer: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.03);\n  --line: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.11);\n  --line-2: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.2);\n\n  --text: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ink));\n  --dim: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #63606b);\n  --faint: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #8a8692);\n\n  /* Darkened to a lightness, not by an amount - see the note above. */\n  --accent: oklch(from var(--accent-base) 0.5 c h);\n  --accent-2: oklch(from var(--accent-base) 0.4 c h);\n  --accent-soft: color-mix(in oklab, var(--accent-base) 12%, transparent);\n\n  --good: #0c8554;\n  --warn: #9a6b0c;\n  --bad: #c93b3b;\n  --info: #0d7f9c;\n  --good-soft: color-mix(in oklab, var(--good) 12%, transparent);\n  --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent);\n  --bad-soft: color-mix(in oklab, var(--bad) 12%, transparent);\n  --info-soft: color-mix(in oklab, var(--info) 11%, transparent);\n\n  /* Series and scale, stepped for the light surface - the same eight hues\n   * chosen again against this ground, not the dark values lightened. The dark\n   * block says why these do not follow the product accent. */\n  --series-1: #2a78d6;\n  --series-2: #eb6834;\n  --series-3: #1baf7a;\n  --series-4: #eda100;\n  --series-5: #e87ba4;\n  --series-6: #008300;\n  --series-7: #4a3aa7;\n  --series-8: #85284d;\n\n  --scale-100: #cde2fb;\n  --scale-200: #9ec5f4;\n  --scale-300: #6da7ec;\n  --scale-400: #3987e5;\n  --scale-500: #2a78d6;\n  --scale-600: #1c5cab;\n  --scale-700: #104281;\n\n  --chart-grid: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.08);\n  --chart-axis: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.18);\n\n  /* The same five steps chosen again for the light ground, running the other\n   * way: here \"more\" is darker. See the dark block for why heat is its own\n   * ramp and not a slice of `--scale-*`. */\n  --heat-1: #84a8fd;\n  --heat-2: #7193e7;\n  --heat-3: #5e7fd1;\n  --heat-4: #4c6cbb;\n  --heat-5: #3b58a6;\n\n  /* The same eight kinds chosen again for the light ground - not the dark\n   * values darkened. Each clears 4.5:1 as text against `--soft` over this\n   * theme's `--bg`; the dark block says why syntax is its own palette and\n   * why it is not held to the colour-blind floor. */\n  --syntax-keyword: #7c3aad;\n  --syntax-string: #276c2b;\n  --syntax-number: #b5451b;\n  --syntax-comment: #6f6b78;\n  --syntax-name: #1a5fb4;\n  --syntax-type: #00695c;\n  --syntax-punctuation: #4a4753;\n  --syntax-meta: #9c4a00;\n\n  --shadow-lift: 0 2px 8px rgb(30 24 38 / 0.08);\n  --shadow-raise: 0 10px 30px rgb(30 24 38 / 0.14);\n  --shadow-float: 0 24px 60px rgb(30 24 38 / 0.18);\n}\n\n/*\n * `--on-accent` - what sits on top of an accent fill.\n *\n * A light accent (gold, lime, amber) needs dark glyphs; a dark one needs\n * white. The live products picked this by hand and wrote the answer into the\n * theme; here the theme works it out, by the same rule the brand-line S tile\n * uses.\n *\n * `contrast-color()` is the direct way to say it and is used where supported.\n * The fallback covers browsers that lack it. Relative colour syntax exposes\n * the accent's own lightness as `l`; `clamp()` turns that into a hard switch,\n * because the multiplication drives the middle term far past either bound\n * everywhere except within a hair of the threshold. Below it the accent is\n * dark and the result is 1 (white); above it, 0 (black). Chroma is dropped to\n * zero, so what comes out is neutral rather than a tinted grey.\n *\n * The threshold is 0.58, and it is deliberately far below the midpoint an eye\n * would guess. Contrast is not symmetric about it: a mid-lightness colour is\n * still much closer to white than to black in luminance, so black wins well\n * before the colour looks light. Checked against all fourteen accents of the\n * line - every one of them reads better with dark glyphs, the closest being\n * cobalt at 4.86:1 against 4.32:1 for white. A higher threshold is what puts\n * white text on magenta at 3.6:1, which is the defect this rule exists to\n * prevent.\n */\n:root {\n  --on-accent: oklch(from var(--accent) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n\n  /*\n   * The same question for the status fills, and it has to be asked separately:\n   * `--on-accent` is derived from the accent, so using it on a `--warn` fill\n   * is only ever right by coincidence. The line's first consumer did exactly\n   * that - a count on a yellow badge, drawn in white at 1.95:1 - and it read\n   * as correct for as long as the product happened to pin white.\n   *\n   * The status hues do not follow the product accent, so these four are the\n   * same for every product; they are still derived rather than written down,\n   * because the status colours themselves change between the themes.\n   */\n  --on-good: oklch(from var(--good) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n  --on-warn: oklch(from var(--warn) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n  --on-bad: oklch(from var(--bad) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n  --on-info: oklch(from var(--info) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n}\n\n@supports (color: contrast-color(red)) {\n  :root {\n    --on-accent: contrast-color(var(--accent));\n    --on-good: contrast-color(var(--good));\n    --on-warn: contrast-color(var(--warn));\n    --on-bad: contrast-color(var(--bad));\n    --on-info: contrast-color(var(--info));\n  }\n}\n\n/*\n * The Tailwind 4 surface. `--color-*: initial` drops the stock palette on\n * purpose: a raw `bg-zinc-800` in a product should not compile, because the\n * only colours that exist here are the line's own.\n */\n@theme inline {\n  --color-*: initial;\n  --color-bg: var(--bg);\n  --color-raise: var(--raise);\n  --color-soft: var(--soft);\n  --color-softer: var(--softer);\n  --color-line: var(--line);\n  --color-line-2: var(--line-2);\n  --color-text: var(--text);\n  --color-dim: var(--dim);\n  --color-faint: var(--faint);\n  --color-accent: var(--accent);\n  --color-accent-2: var(--accent-2);\n  --color-accent-soft: var(--accent-soft);\n  --color-on-accent: var(--on-accent);\n  --color-on-good: var(--on-good);\n  --color-on-warn: var(--on-warn);\n  --color-on-bad: var(--on-bad);\n  --color-on-info: var(--on-info);\n  --color-good: var(--good);\n  --color-good-soft: var(--good-soft);\n  --color-warn: var(--warn);\n  --color-warn-soft: var(--warn-soft);\n  --color-bad: var(--bad);\n  --color-bad-soft: var(--bad-soft);\n  --color-info: var(--info);\n  --color-info-soft: var(--info-soft);\n\n  /* Charts. `bg-series-3`, `fill-series-3`, `stroke-scale-500` - the same\n   * utilities the rest of the vocabulary gets, so a chart is written in\n   * tokens like everything else and `dowel/no-raw-color` can hold it to\n   * that. */\n  --color-series-1: var(--series-1);\n  --color-series-2: var(--series-2);\n  --color-series-3: var(--series-3);\n  --color-series-4: var(--series-4);\n  --color-series-5: var(--series-5);\n  --color-series-6: var(--series-6);\n  --color-series-7: var(--series-7);\n  --color-series-8: var(--series-8);\n  --color-scale-100: var(--scale-100);\n  --color-scale-200: var(--scale-200);\n  --color-scale-300: var(--scale-300);\n  --color-scale-400: var(--scale-400);\n  --color-scale-500: var(--scale-500);\n  --color-scale-600: var(--scale-600);\n  --color-scale-700: var(--scale-700);\n  --color-chart-grid: var(--chart-grid);\n  --color-chart-axis: var(--chart-axis);\n  --color-heat-1: var(--heat-1);\n  --color-heat-2: var(--heat-2);\n  --color-heat-3: var(--heat-3);\n  --color-heat-4: var(--heat-4);\n  --color-heat-5: var(--heat-5);\n\n  /* Syntax, so a highlighted token is written `text-syntax-keyword` like every\n   * other colour in the system, and `dowel/no-raw-color` can hold it to that.\n   * A highlighter's own stylesheet - which writes hex values into class names\n   * of its own choosing - is what this replaces. */\n  --color-syntax-keyword: var(--syntax-keyword);\n  --color-syntax-string: var(--syntax-string);\n  --color-syntax-number: var(--syntax-number);\n  --color-syntax-comment: var(--syntax-comment);\n  --color-syntax-name: var(--syntax-name);\n  --color-syntax-type: var(--syntax-type);\n  --color-syntax-punctuation: var(--syntax-punctuation);\n  --color-syntax-meta: var(--syntax-meta);\n\n  /* Kept because they are not palette choices: a hairline is `transparent`,\n   * an SVG follows `currentColor`, and pure black and white are what an\n   * overlay scrim and a print sheet are made of. */\n  --color-transparent: transparent;\n  --color-current: currentColor;\n  --color-white: #fff;\n  --color-black: #000;\n\n  /*\n   * Type. System stacks on purpose: a downloaded face costs a network round\n   * trip before the first word appears, and the line's products are desktop\n   * tools where the operating system's own face is the one the user already\n   * reads everything else in.\n   */\n  --font-sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;\n  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;\n\n  /*\n   * Radius. Taken from what the products actually draw, not from a ratio:\n   * `rounded-[9px]` appears twenty times and `rounded-[10px]` twelve, because\n   * a control and the primary button were tuned by eye and then copied. The\n   * scale keeps the cluster they landed in and gives it names.\n   *\n   * `md` is the control radius - inputs, buttons, list rows. That the primary\n   * button was one pixel rounder than every other variant is not preserved:\n   * the products differ from themselves there, and buttons of the same size\n   * sitting side by side should not have mismatched corners.\n   */\n  --radius-xs: 4px;\n  --radius-sm: 6px;\n  --radius-md: 9px;\n  --radius-lg: 12px;\n  --radius-xl: 16px;\n  --radius-2xl: 20px;\n\n  /*\n   * A radius nested inside another has to be smaller by the gap between them,\n   * or the inner corner looks wrong against the outer one. The products did\n   * this by hand once - 18px outside, 17px inside - and nowhere else.\n   */\n  --radius-inner: calc(var(--radius-lg) - 1px);\n\n  /*\n   * Type scale. The products live between 10px and 14px: `text-sm` and\n   * `text-xs` together account for nine tenths of every size in both, and the\n   * rest scattered across 9, 9.5, 10, 10.5, 11, 11.5, 12.5 and 13 - nine steps\n   * inside four pixels, which no eye distinguishes and no reason justifies.\n   * This is the same range with the noise removed.\n   */\n  --text-2xs: 10px;\n  --text-2xs--line-height: 14px;\n  --text-xs: 11px;\n  --text-xs--line-height: 15px;\n  --text-sm: 12px;\n  --text-sm--line-height: 16px;\n  --text-base: 14px;\n  --text-base--line-height: 20px;\n  --text-lg: 16px;\n  --text-lg--line-height: 22px;\n  --text-xl: 18px;\n  --text-xl--line-height: 24px;\n  --text-2xl: 21px;\n  --text-2xl--line-height: 28px;\n\n  /* Weights. `semibold` is what both products use for anything emphasised;\n   * `bold` appears in neither, and the one `font-[650]` in a page title is the\n   * kind of value a scale exists to absorb. */\n  --font-weight-normal: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n\n  /* Tracking. The uppercase caption is the only place the products track at\n   * all - and they do it at 0.08em in six files and 0.09em in three, a\n   * difference nobody can see. One name settles it. */\n  --tracking-caption: 0.085em;\n  --tracking-tight: -0.01em;\n\n  /*\n   * A step between the steps.\n   *\n   * The spacing scale runs in fours - 2, 4, 6, 8 - and four different\n   * primitives independently reached past it for three pixels: the gap\n   * between segments of a rating and of an axis, the gap between cells of a\n   * heatmap, and how far a tooltip's arrow tucks under its popup. Four hands\n   * arriving at the same number is not four accidents; it is a step the scale\n   * was missing, and each of them wrote `[3px]` because there was nothing to\n   * name.\n   *\n   * It exists for hairline gaps between things that are themselves small -\n   * where two pixels reads as touching and four as separate objects. Nothing\n   * larger belongs here: this is the bottom of the scale, not a licence to\n   * measure by eye.\n   */\n  --spacing-hair: 3px;\n\n  /*\n  /* Easing. `out` for anything the user asked for - it arrives fast and\n   * settles, which reads as responsive. `in-out` for something moving on its\n   * own. `in` is deliberately absent: it starts slowly, which on a control\n   * reads as lag. */\n  --ease-out: cubic-bezier(0.2, 0, 0, 1);\n  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n\n  /*\n   * Elevation. Three steps, because the products had one and used it for a\n   * toast, a dropdown and a modal alike - so a modal never sat further from\n   * the page than the menu it covered.\n   */\n  --shadow-lift: var(--shadow-lift);\n  --shadow-raise: var(--shadow-raise);\n  --shadow-float: var(--shadow-float);\n\n  /*\n   * The smallest a pointer target may be.\n   *\n   * 24 CSS pixels, which is WCAG 2.2's 2.5.8 at AA. Not a matter of taste, and\n   * measured rather than assumed: a live run of the stand found four different\n   * answers to the same question in one set - a chip's cross at 16, Copyable\n   * at 19, CopyButton at 21, a search field's clear at 24. Three of the four\n   * fail, and the failure is silent. A cross missed by a thumb on a tablet, or\n   * by anyone whose hand is not steady, does not delete the tag and does not\n   * say anything either.\n   *\n   * It is a size token rather than a spacing step because it is a floor, not a\n   * rhythm: nothing is ever `--target-min` tall on purpose, things are at\n   * least that big. `size-target` and `min-size-target` come free from the\n   * namespace, but the way a primitive usually reaches it is `target-min`\n   * below, which grows the hit area without growing the glyph.\n   */\n  --size-target: 24px;\n\n  /*\n   * The window's own chrome: the strip at the top, the rail at the left, and\n   * the buttons that close the window.\n   *\n   * Four products of the line draw their own title bar - the trade is that a\n   * system bar over an application bar costs a strip of every laptop screen\n   * for nothing - and by the time the fourth one did it, the strip was 40px\n   * in one and 2.4rem in another. Neither number is wrong; having two is. A\n   * window's chrome is the part of a product that is supposed to look like\n   * the operating system rather than like the product, so it is the last\n   * place where two of them should differ.\n   *\n   * 40px is not a taste either. The window buttons have to clear the pointer\n   * target floor with room for the hover fill to read as a button, and the\n   * strip has to hold a mark, a trail and a search box at one line of text\n   * without the trail wrapping. 40 is where both stop being tight.\n   *\n   * `--spacing-window-button` is 46px because that is what Windows draws, and\n   * a bar whose buttons are narrower than the system's has a gap the pointer\n   * falls into on the way to the corner. It is deliberately wider than it is\n   * tall: the close button is the one that must be hit without aiming, and on\n   * a maximised window it is the screen's corner.\n   *\n   * These are in the spacing namespace rather than beside `--size-target`,\n   * and the reason is mechanical rather than tidy. `--size-*` yields exactly\n   * one utility, `size-*`, which sets both axes - so `w-window-button` off a\n   * `--size-` token compiles to NOTHING, and a button written that way loses\n   * its width with no error anywhere. Every measurement here is one axis: the\n   * bar has a height, the rail a width, the button a width unequal to its\n   * height. `--spacing-*` is the namespace that feeds `w-`, `h-`, `min-h-`\n   * and the padding utilities, so it is the one that can say so. Caught by\n   * compiling the utility rather than by reading the stylesheet, which is\n   * what `tailwind.test.ts` exists for.\n   */\n  --spacing-titlebar: 40px;\n  --spacing-rail: 216px;\n  --spacing-window-button: 46px;\n\n  /*\n   * The rail with only its icons: `NavRail collapsed`. 56 is a 36px entry -\n   * the size of an icon button in the bar above it - with 10px of air on each\n   * side, which is the same inset the wide rail gives its entries. Narrower,\n   * and the active entry's tint touches the rail's border; wider, and the\n   * column reads as a sidebar that forgot its words.\n   */\n  --spacing-rail-compact: 56px;\n\n  /*\n   * How much of a frameless window's edge can be grabbed to resize it.\n   *\n   * The system used to own this and gave about 4 pixels plus whatever the\n   * border was; a frameless window has no border, so the whole of it has to\n   * be put back by hand. Five is the smallest that can be hit reliably with a\n   * mouse and the largest that does not steal a click meant for the first\n   * line of text - the strips sit above everything, so anything they cover\n   * they cover completely.\n   *\n   * The corner is double, because a corner is aimed at less precisely than an\n   * edge and is the one that resizes both axes at once.\n   */\n  --spacing-resize-edge: 5px;\n  --spacing-resize-corner: 10px;\n}\n\n/*\n * `target-min` - visually smaller, clickably larger.\n *\n * The obvious fix for a 16px cross is to make it 24px, and it is the wrong\n * one: a chip is a small thing by design and a cross a third of its height\n * reads as a button with a chip around it. The set's appearance is a\n * decision, and an accessibility floor should not overturn it.\n *\n * So the target grows and the glyph does not. The pseudo-element is centred on\n * the control, takes its size, and refuses to go under the floor - so a\n * control already large enough is untouched, and a smaller one gains an\n * invisible margin of hit area on every side.\n *\n * `position: relative` comes with it rather than being left to the caller: a\n * target that silently does nothing because its parent forgot to establish a\n * containing block is exactly the failure this exists to prevent.\n *\n * Not `padding`, which was the other candidate: padding moves the glyph inside\n * its box and changes how the control sits in a flex row, so every call site\n * would need a compensating negative margin. This changes nothing about\n * layout.\n */\n/*\n * `caption` - the small uppercase label: a field's name, a panel's section, a\n * group of menu items, a rail's group.\n *\n * One role, and the set wrote it seven ways: with and without `font-medium`,\n * with and without a weight at all, so a Field's label and the SectionLabel\n * above it were two weights of the same thing. kilna's screens added\n * thirty-one more by hand. The weight is 600, the mockup's `.lbl` - at 10px\n * a caption lighter than that reads as a smudge rather than a word.\n *\n * A utility rather than a component because it is a role text plays inside\n * things that are already components: a `<legend>`, a `<th>`, a `<label>`.\n * Its colour is `faint` - verified against the grounds at body size; at 10px\n * it is below AA in the light theme, which is a finding about `faint` at every\n * small size and is owned by the contrast work, not by this recipe.\n */\n@utility caption {\n  @apply text-2xs font-semibold uppercase tracking-caption text-faint;\n}\n\n@utility target-min {\n  position: relative;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    translate: -50% -50%;\n    width: 100%;\n    height: 100%;\n    min-width: var(--size-target);\n    min-height: var(--size-target);\n  }\n}\n\n/*\n * How tall a control is, and how much room a screen gives each row.\n *\n * `h-9` appeared in nine primitives - every field the set has - each spelling\n * it out, which is why `Input` could not be made compact without editing\n * `Input`. One decision made nine times gets one name.\n *\n * **Not in `@theme`, and that is the whole mechanism.** A token declared there\n * is inlined by the compiler: `h-control` came out as `height: 36px`, the\n * override on a container had nothing to bind to, and the density attribute\n * did exactly nothing. Measured in the browser rather than assumed - the\n * container's `--row-control` read 32px while the field it contained stayed\n * 36. Tailwind also writes a fallback for any `var()` it recognises from the\n * theme, so the name has to live outside the theme's namespaces entirely.\n *\n * Declared here as plain custom properties and turned into utilities by hand\n * below, the reference survives, and an override on an ancestor reaches every\n * control under it - which is what makes density a property of a region\n * rather than of a component.\n */\n:root {\n  --row-control: 36px;\n  --row-control-sm: 32px;\n  --row-control-lg: 40px;\n\n  /* The same question for a table, whose rows are sized by what is above and\n   * below the text rather than by a height. `Table` had its own `density`\n   * prop for this, with its own words - `base` and `dense` - which meant the\n   * set used one word for two mechanisms and a product had to set both. */\n  --row-cell: 10px;\n}\n\n@utility h-control {\n  height: var(--row-control);\n}\n\n@utility py-row {\n  padding-block: var(--row-cell);\n}\n\n@utility h-control-sm {\n  height: var(--row-control-sm);\n}\n\n@utility h-control-lg {\n  height: var(--row-control-lg);\n}\n\n/*\n * Density.\n *\n * Two answers to one question, and the set had neither: a product wanting a\n * tighter table wrote `h-8` at every call site, which is the drift the scale\n * exists to stop, one screen at a time.\n *\n * **It is an attribute on a container, not a prop on a component.** A prop\n * would have to be added to every primitive, threaded through every wrapper a\n * product writes, and passed by hand at each call site - and a primitive\n * written next year would not have it. An attribute is inherited:\n *\n *     <form data-density=\"compact\">   …every field inside it…\n *\n * That reaches components which did not exist when the product was built, and\n * a product's own components too, as long as they measure in `h-control` like\n * everything else.\n *\n * The floor does not move with it. `--size-target` stays 24px at every\n * density, because WCAG does not care how tight a table is - which is exactly\n * why `target-min` grows the hit area rather than the control: a compact row\n * is still one a hand can hit.\n */\n[data-density='compact'] {\n  --row-control: 32px;\n  --row-control-sm: 28px;\n  --row-control-lg: 36px;\n  --row-cell: 6px;\n}\n\n[data-density='comfortable'] {\n  --row-control: 40px;\n  --row-control-sm: 36px;\n  --row-control-lg: 44px;\n  --row-cell: 14px;\n}\n\n/*\n * Stacking order.\n *\n * Not in `@theme`: Tailwind has no z-index namespace, so `z-50` is a literal\n * fifty and a named step would not compile. These are custom properties a\n * component reads directly - `z-index: var(--z-modal)`.\n *\n * The order is the products' own, with the gaps closed. They ran 10 for an\n * in-flow popup, 20 sticky, 30 menu, 40 for a floating button, 50 for modals\n * and drawers, then jumped to 70 and 80 for the command palette - which had to\n * clear the modal layer and had no name to do it with.\n */\n:root {\n  /*\n   * Motion. One duration existed before this - 160ms on a route change - and\n   * everything else rode Tailwind's default. These are the steps around it:\n   * `quick` for a colour or an opacity that should feel immediate, `base` for\n   * something that moves, `slow` for something arriving from off-screen.\n   *\n   * Not in `@theme`: Tailwind's `duration-*` utility takes a literal number,\n   * not a named step, so these are read directly - `transition-duration:\n   * var(--duration-base)`. The easing curves opposite them ARE a namespace,\n   * so `ease-out` is a class.\n   *\n   * Every duration here is for people who want motion: `prefers-reduced-\n   * motion` cuts them to nothing further down.\n   */\n  --duration-quick: 120ms;\n  --duration-base: 160ms;\n  --duration-slow: 240ms;\n\n  --z-popup: 10;\n  --z-sticky: 20;\n  --z-menu: 30;\n  --z-floating: 40;\n  --z-overlay: 50;\n  --z-modal: 60;\n  --z-palette: 70;\n  --z-toast: 80;\n}\n\n/*\n * Base layer: what every product would otherwise write again. Scoped to\n * elements and to `:focus-visible`, never to a class, so nothing here can\n * collide with a component.\n */\nbody {\n  margin: 0;\n  background-color: var(--bg);\n  color: var(--text);\n  font-family: var(--font-sans);\n  /* The base step, so text nobody gave a class reads at the scale's own body\n   * size. Without it that text inherited the browser's 16px - an empty\n   * state's heading and a card's name came out a step and a half above the\n   * 12px beside them, in every product of the line.\n   *\n   * The line height is the base step's own 20 over 14, written as a ratio\n   * rather than read from `--text-base--line-height`, and that is deliberate.\n   * A length is inherited as a length: with 20px here, every element that\n   * sets a size of its own without a line height - a 10px chart label -\n   * inherited 20px and stood five pixels taller, found in the pictures of\n   * the stand. A ratio is inherited as a ratio. The theme test holds the two\n   * numbers to the tokens. */\n  font-size: var(--text-base);\n  line-height: calc(20 / 14);\n  -webkit-font-smoothing: antialiased;\n}\n\n/*\n * How heavy an icon's line is.\n *\n * lucide draws at 2 by default, which is tuned for its own 24px; at the 14 and\n * 16 the line actually uses, a 2px stroke reads heavier than the text beside\n * it. 1.75 is the owner's call for the whole line (24.09), made here once\n * rather than as a `strokeWidth` at every one of a few hundred call sites.\n *\n * Only an icon still on lucide's default is changed. `[stroke-width='2']` is\n * how lucide writes the default, and an icon given another width - by a call\n * site, or by `absoluteStrokeWidth`, which computes one - keeps it. In\n * `@layer base` so a `stroke-*` utility on the icon wins too. A product that\n * draws with some other icon set is untouched: the rule keys off lucide's own\n * class.\n */\n:root {\n  --icon-stroke: 1.75;\n}\n\n@layer base {\n  svg.lucide[stroke-width='2'] {\n    stroke-width: var(--icon-stroke);\n  }\n}\n\n/*\n * In `@layer base`, so a component can turn it off.\n *\n * Unlayered, this rule has the same specificity as `focus-visible:outline-none`\n * from Tailwind - both are one pseudo-class - and wins on source order alone,\n * because the theme is imported before the utilities. Every component that\n * draws its own focus ring got this one on top of it: the command palette's\n * field had an accent outline it had explicitly opted out of, and a combobox\n * with chips drew two rings, one around the box and one around the input\n * inside it.\n *\n * A layered rule loses to any unlayered one regardless of specificity, which\n * is the whole point of cascade layers - the base layer states a default and\n * a component overrides it by saying so.\n */\n@layer base {\n  :focus-visible {\n    outline: 2px solid var(--accent);\n    outline-offset: 2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n/*\n * Scrollbars. A browser's default bar is a piece of someone else's chrome\n * sitting in the middle of the product - full width, with step arrows. These\n * are the line's own: thin, in the palette, drawn only where something\n * actually scrolls.\n */\n* {\n  scrollbar-width: thin;\n  scrollbar-color: var(--line-2) transparent;\n}\n\n*::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n*::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n  border: 3px solid transparent;\n  border-radius: 999px;\n  background: var(--line-2);\n  background-clip: content-box;\n  /* The thumb is drawn proportional to how much of the document fits on\n   * screen, so a long one collapses it to a few pixels: still visible, no\n   * longer catchable by a pointer. This is the floor below which it stops\n   * being a control. */\n  min-height: 2.5rem;\n}\n\n*::-webkit-scrollbar-thumb:hover {\n  background: var(--dim);\n  background-clip: content-box;\n}\n\n*::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n*::-webkit-scrollbar-button {\n  display: none;\n}\n"
+          "content": "/*\n * dowel theme - the token vocabulary every product of the lacodda line shares.\n *\n * The vocabulary comes from the products themselves: kilna and kasl-server\n * already ship the same token names (bg / raise / soft / line / text / dim /\n * accent / good / warn / bad / info) and differ only in values. That is the\n * contract this file freezes. Names are the mockup's own words rather than\n * stock component-library names, so a screen can be checked against a mockup\n * in the mockup's words.\n *\n * Two things are parametric, and everything else is derived from them:\n *\n *   --accent-base   the product's hue from the brand-line registry\n *   --neutral-base  the hue the greys are tinted with (the accent, by default)\n *\n * Tinting the neutrals is not decoration - it is what the two live products do\n * by hand: kilna's greys lean magenta, kasl-server's lean gold. Here that lean\n * is one declaration instead of thirty hand-picked hex values.\n *\n * Soft variants are mixed from their own base with `color-mix`, so a product\n * that overrides `--accent-base` gets a matching `--accent-soft` for free and\n * cannot pick one that disagrees with it.\n *\n * Theme selection: no class on the root element follows the operating system,\n * an explicit `light` or `dark` class pins the theme. Components never use\n * `dark:` utilities - every colour goes through a token, and the theme swaps\n * the token underneath.\n */\n\n:root {\n  /* The two parameters. `--accent-base` is overridden per product by an accent\n   * file; `--neutral-base` follows it unless a product says otherwise. */\n  --accent-base: #e8862d;\n  --neutral-base: var(--accent-base);\n\n  /* Ink and ground of the dark theme, before the neutral tint is mixed in.\n   * Kept as their own tokens so the tint amount is the only thing that\n   * changes when a product wants greyer or warmer chrome. */\n  --ground: #131316;\n  --ink: #ece9ef;\n\n  /* How much of `--neutral-base` bleeds into the greys. The live products sit\n   * at roughly this much: enough that the chrome belongs to the product,\n   * little enough that it still reads as grey. */\n  --neutral-tint: 6%;\n  --neutral-tint-strong: 9%;\n\n  color-scheme: dark;\n\n  --bg: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ground));\n  --raise: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), #1c1c21);\n\n  /* Surfaces that lift by translucency rather than by their own colour: they\n   * must work over `--bg` and over `--raise` alike. */\n  --soft: rgb(255 255 255 / 0.045);\n  --softer: rgb(255 255 255 / 0.025);\n  --line: rgb(255 255 255 / 0.08);\n  --line-2: rgb(255 255 255 / 0.15);\n\n  --text: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ink));\n  --dim: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #a7a2ad);\n  --faint: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #6e6a76);\n\n  --accent: var(--accent-base);\n  /* The hover/active partner: lighter on dark, where the ground is what the\n   * accent has to separate from. */\n  --accent-2: color-mix(in oklab, white 22%, var(--accent-base));\n  --accent-soft: color-mix(in oklab, var(--accent-base) 16%, transparent);\n\n  /* Status hues are the line's own and do not follow the product accent: a\n   * green that shifted per product would stop meaning \"good\". Meaning never\n   * rests on colour alone - a badge carries an icon and a word - so these\n   * exist for emphasis, not as the message. */\n  --good: #45d18f;\n  --warn: #e8b13f;\n  --bad: #ef6a6a;\n  --info: #4cc4e0;\n  --good-soft: color-mix(in oklab, var(--good) 14%, transparent);\n  --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent);\n  --bad-soft: color-mix(in oklab, var(--bad) 14%, transparent);\n  --info-soft: color-mix(in oklab, var(--info) 15%, transparent);\n\n  /* Series colours, for charts.\n   *\n   * Like the status hues and unlike everything else here, these do NOT follow\n   * the product accent - and that is the whole decision. A series is a\n   * property of the data, not of the product showing it; a palette derived\n   * from the accent would paint the same series differently in kilna and in\n   * kasl-server, which is the one thing a series colour must never do.\n   *\n   * Deriving them from the accent was measured, not guessed: rotating the hue\n   * by fixed angles put the best candidate at Delta-E 12.1 from the product's\n   * own accent with adjacent pairs at 9.8, and threw 46 of 152 colours outside\n   * sRGB. The fixed palette does better on both counts.\n   *\n   * The cost of fixing them is stated plainly: 13 of the line's 19 accents sit\n   * within Delta-E 8 of some slot (lyrid 2.7, atlas 3.1, turnout 3.2). A chart\n   * shows one accent, so this is survivable - but it is exactly why identity is\n   * carried by the legend and by direct labels, never by hue on its own. The\n   * components of this block enforce that; it is not advice.\n   *\n   * Assigned in order, 1..8, and never cycled: a ninth series folds into\n   * \"other\", or the chart becomes small multiples. The order is the\n   * colour-blind-safety mechanism - the worst adjacent pair is Delta-E 8.4\n   * under simulated protanopia - so re-ordering these breaks a gate.\n   *\n   * Slot 8 is the line's own value rather than the reference palette's. The\n   * reference red sat Delta-E 1.9 from `--bad`, which would have let a series\n   * impersonate a status; this one clears every status by 15 and costs\n   * nothing, the worst adjacent pair being unchanged.\n   *\n   * Some slots sit below 3:1 against the surface. That is allowed only because\n   * the relief ships with them: visible values, or the table view.\n   */\n  --series-1: #3987e5;\n  --series-2: #d95926;\n  --series-3: #199e70;\n  --series-4: #c98500;\n  --series-5: #d55181;\n  --series-6: #008300;\n  --series-7: #9085e9;\n  --series-8: #a3215a;\n\n  /* Magnitude rather than identity: one hue, light to dark. A heatmap cell\n   * reads this. The lightest step is allowed to recede toward the surface,\n   * because \"near zero\" should; an ordered-but-discrete scale (tiers, funnel\n   * stages) starts at 300 instead, where the contrast still holds. */\n  --scale-100: #0d366b;\n  --scale-200: #184f95;\n  --scale-300: #256abf;\n  --scale-400: #2a78d6;\n  --scale-500: #3987e5;\n  --scale-600: #5598e7;\n  --scale-700: #86b6ef;\n\n  /* The chart's own furniture. A gridline that competes with the data is drawn\n   * wrong, so it is quieter than `--line`; the axis is the one that may be\n   * seen. */\n  --chart-grid: rgb(255 255 255 / 0.06);\n  --chart-axis: rgb(255 255 255 / 0.14);\n\n  /* Heat, for a grid of cells where colour is the only thing carrying the\n   * value - a year of activity, a month of a team's hours.\n   *\n   * Five discrete steps rather than the seven of `--scale-*`, and a separate\n   * set rather than a slice of them, because the two answer different\n   * questions. `--scale-*` is sequential: a continuous magnitude, where the\n   * lightest step means \"near zero\" and may recede toward the surface.\n   * Heat is ordinal: five shades a reader tells apart at a glance and matches\n   * against a legend, which needs wider gaps between them (no slice of\n   * `--scale-*` clears the 0.06 lightness step - they sit 0.047 apart) and a\n   * bottom step that stays distinct from an empty cell.\n   *\n   * That last one is the whole point. A heatmap cell has more meanings than a\n   * number: nothing recorded, a day still running, a day outside the data, and\n   * a value. If the faintest value looks like the empty cell, the grid says\n   * somebody did nothing on a day nobody reported - and `--heat-1` clears the\n   * empty square by 2.1:1 so it cannot.\n   *\n   * Fixed, like the series and unlike almost everything else here. Derived\n   * from the accent - as the first consumer did - the faintest step sat 1.3:1\n   * from the empty cell for half the line, and pinning lightness instead ran\n   * out of sRGB: the darkest accents cannot reach the top of the ramp at their\n   * own chroma.\n   */\n  --heat-1: #28528e;\n  --heat-2: #3a65a3;\n  --heat-3: #4d78b7;\n  --heat-4: #608ccd;\n  --heat-5: #73a0e2;\n\n  /* Syntax, for code shown inside a product.\n   *\n   * Eight kinds rather than the fifty a highlighter's theme names, because\n   * these are the distinctions that survive across languages: a keyword, a\n   * literal string, a number, a comment, an identifier, a type, punctuation,\n   * and the metadata around the code (a decorator, an attribute, a prompt).\n   * Anything finer is a grammar's own vocabulary and does not travel.\n   *\n   * Fixed, like the series and the heat ramps, and for the same reason: code\n   * is not a property of the product showing it, and `if` should not be\n   * magenta in kilna and cobalt in kasl-server.\n   *\n   * Chosen against the surface code actually sits on - `--soft` over `--bg`,\n   * which is what CodeBlock and `.prose pre` draw - and every slot clears\n   * 4.5:1 AS TEXT in both themes. That threshold, not the 3:1 the series are\n   * held to, is the whole reason these exist separately: the series palette\n   * was measured here first and five of its eight light values sat under 3:1,\n   * one at 1.90:1. A filled bar can be pale; a 12px glyph cannot.\n   *\n   * These are deliberately NOT held to the colour-blind floor the series are.\n   * A series colour is the identity of its mark - lose the hue and the data is\n   * gone. Syntax colour is a second reading of what the text already says in\n   * full: a keyword is a keyword by its spelling, and CodeBlock's default\n   * renders no colour at all and stays readable. `syntax.test.ts` says so in\n   * place, so the omission is not mistaken for an oversight.\n   *\n   * `comment` is the quietest on purpose - it is the one kind a reader is\n   * meant to be able to skip - and still clears the threshold.\n   */\n  --syntax-keyword: #c792ea;\n  --syntax-string: #9ccc65;\n  --syntax-number: #f78c6c;\n  --syntax-comment: #9e99a6;\n  --syntax-name: #82aaff;\n  --syntax-type: #4dd0b1;\n  --syntax-punctuation: #c4bfcb;\n  --syntax-meta: #f0a868;\n\n  /* Elevation, three steps. The products had one shadow and used it for\n   * everything that leaves the flow - a toast, a dropdown and a modal all\n   * floated by the same amount, so a modal never felt further away than the\n   * menu it covered. The three are the steps.\n   *\n   * Two layers each, and that is what makes them read as depth on a dark\n   * surface rather than as a stain. One big soft blur at high opacity is what\n   * these were - `0 24px 60px` of 55% black - and against a near-black page\n   * the wide skirt never resolves into shade: it just darkens a ring of\n   * background around the panel, which a pilot photographed and called an ugly\n   * dark contour. Depth is read from the CONTACT shadow, the tight one right\n   * under the edge; the ambient layer only has to hint that there is room\n   * under the thing. So each step is a tight, slightly stronger layer plus a\n   * wider, much weaker one, and the totals come down. */\n  --shadow-lift: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 6px rgb(0 0 0 / 0.22);\n  --shadow-raise: 0 2px 4px rgb(0 0 0 / 0.36), 0 8px 20px rgb(0 0 0 / 0.26);\n  --shadow-float: 0 4px 8px rgb(0 0 0 / 0.36), 0 18px 44px rgb(0 0 0 / 0.32);\n}\n\n/*\n * Light theme, twice: once for the operating system's preference, once for the\n * explicit `light` class. The declarations are identical - only the selector\n * differs - so that a product can pin a theme against the system setting.\n */\n@media (prefers-color-scheme: light) {\n  :root:not(.dark) {\n    color-scheme: light;\n\n    --ground: #f6f5f7;\n    --ink: #232027;\n\n    --bg: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ground));\n    --raise: #ffffff;\n\n    /* Tinted, and translucent - which took two goes to get right.\n     *\n     * `color-mix` mixes the alpha along with the colour, so mixing 60% of an\n     * opaque accent into a 5%-opaque grey gives a surface 62% opaque: twelve\n     * times denser than the hairline it was meant to be. It went unnoticed for\n     * ten versions because `bg-soft` was only ever used for a hover, where a\n     * flash of colour reads as feedback rather than as a mistake. The first\n     * component to sit on it permanently - Alert - made it obvious.\n     *\n     * `oklch(from … / alpha)` keeps the alpha out of the mix: the hue comes\n     * from the tinted colour, the transparency is stated. */\n    --soft: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.05);\n    --softer: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.03);\n    --line: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.11);\n    --line-2: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.2);\n\n    --text: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ink));\n    --dim: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #63606b);\n    --faint: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #8a8692);\n\n    /* On a light ground the accent has to darken to stay legible as text and\n     * as a fill. It darkens *to* a lightness rather than *by* an amount: how\n     * far a hue has to travel depends on where it starts, and a fixed step\n     * that suits magenta leaves lime and gold short. Pinning the lightness and\n     * keeping the hue and chroma clears 5:1 for every accent in the line. */\n    --accent: oklch(from var(--accent-base) 0.5 c h);\n    --accent-2: oklch(from var(--accent-base) 0.4 c h);\n    --accent-soft: color-mix(in oklab, var(--accent-base) 12%, transparent);\n\n    --good: #0c8554;\n    --warn: #9a6b0c;\n    --bad: #c93b3b;\n    --info: #0d7f9c;\n    --good-soft: color-mix(in oklab, var(--good) 12%, transparent);\n    --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent);\n    --bad-soft: color-mix(in oklab, var(--bad) 12%, transparent);\n    --info-soft: color-mix(in oklab, var(--info) 11%, transparent);\n\n    /* Series and scale, stepped for the light surface - the same eight hues\n     * chosen again against this ground, not the dark values lightened. The dark\n     * block says why these do not follow the product accent. */\n    --series-1: #2a78d6;\n    --series-2: #eb6834;\n    --series-3: #1baf7a;\n    --series-4: #eda100;\n    --series-5: #e87ba4;\n    --series-6: #008300;\n    --series-7: #4a3aa7;\n    --series-8: #85284d;\n\n    --scale-100: #cde2fb;\n    --scale-200: #9ec5f4;\n    --scale-300: #6da7ec;\n    --scale-400: #3987e5;\n    --scale-500: #2a78d6;\n    --scale-600: #1c5cab;\n    --scale-700: #104281;\n\n    --chart-grid: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.08);\n    --chart-axis: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.18);\n\n    /* The same five steps chosen again for the light ground, running the other\n     * way: here \"more\" is darker. See the dark block for why heat is its own\n     * ramp and not a slice of `--scale-*`. */\n    --heat-1: #84a8fd;\n    --heat-2: #7193e7;\n    --heat-3: #5e7fd1;\n    --heat-4: #4c6cbb;\n    --heat-5: #3b58a6;\n\n    /* The same eight kinds chosen again for the light ground - not the dark\n     * values darkened. Each clears 4.5:1 as text against `--soft` over this\n     * theme's `--bg`; the dark block says why syntax is its own palette and\n     * why it is not held to the colour-blind floor. */\n    --syntax-keyword: #7c3aad;\n    --syntax-string: #276c2b;\n    --syntax-number: #b5451b;\n    --syntax-comment: #6f6b78;\n    --syntax-name: #1a5fb4;\n    --syntax-type: #00695c;\n    --syntax-punctuation: #4a4753;\n    --syntax-meta: #9c4a00;\n\n    --shadow-lift: 0 2px 8px rgb(30 24 38 / 0.08);\n    --shadow-raise: 0 10px 30px rgb(30 24 38 / 0.14);\n    --shadow-float: 0 24px 60px rgb(30 24 38 / 0.18);\n  }\n}\n\n:root.light {\n  color-scheme: light;\n\n  --ground: #f6f5f7;\n  --ink: #232027;\n\n  --bg: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ground));\n  --raise: #ffffff;\n\n  /* The same surfaces as above; see the note there. */\n  --soft: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.05);\n  --softer: oklch(from color-mix(in oklab, var(--neutral-base) 45%, #181420) l c h / 0.03);\n  --line: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.11);\n  --line-2: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.2);\n\n  --text: color-mix(in oklab, var(--neutral-base) var(--neutral-tint), var(--ink));\n  --dim: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #63606b);\n  --faint: color-mix(in oklab, var(--neutral-base) var(--neutral-tint-strong), #8a8692);\n\n  /* Darkened to a lightness, not by an amount - see the note above. */\n  --accent: oklch(from var(--accent-base) 0.5 c h);\n  --accent-2: oklch(from var(--accent-base) 0.4 c h);\n  --accent-soft: color-mix(in oklab, var(--accent-base) 12%, transparent);\n\n  --good: #0c8554;\n  --warn: #9a6b0c;\n  --bad: #c93b3b;\n  --info: #0d7f9c;\n  --good-soft: color-mix(in oklab, var(--good) 12%, transparent);\n  --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent);\n  --bad-soft: color-mix(in oklab, var(--bad) 12%, transparent);\n  --info-soft: color-mix(in oklab, var(--info) 11%, transparent);\n\n  /* Series and scale, stepped for the light surface - the same eight hues\n   * chosen again against this ground, not the dark values lightened. The dark\n   * block says why these do not follow the product accent. */\n  --series-1: #2a78d6;\n  --series-2: #eb6834;\n  --series-3: #1baf7a;\n  --series-4: #eda100;\n  --series-5: #e87ba4;\n  --series-6: #008300;\n  --series-7: #4a3aa7;\n  --series-8: #85284d;\n\n  --scale-100: #cde2fb;\n  --scale-200: #9ec5f4;\n  --scale-300: #6da7ec;\n  --scale-400: #3987e5;\n  --scale-500: #2a78d6;\n  --scale-600: #1c5cab;\n  --scale-700: #104281;\n\n  --chart-grid: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.08);\n  --chart-axis: oklch(from color-mix(in oklab, var(--neutral-base) 30%, #181420) l c h / 0.18);\n\n  /* The same five steps chosen again for the light ground, running the other\n   * way: here \"more\" is darker. See the dark block for why heat is its own\n   * ramp and not a slice of `--scale-*`. */\n  --heat-1: #84a8fd;\n  --heat-2: #7193e7;\n  --heat-3: #5e7fd1;\n  --heat-4: #4c6cbb;\n  --heat-5: #3b58a6;\n\n  /* The same eight kinds chosen again for the light ground - not the dark\n   * values darkened. Each clears 4.5:1 as text against `--soft` over this\n   * theme's `--bg`; the dark block says why syntax is its own palette and\n   * why it is not held to the colour-blind floor. */\n  --syntax-keyword: #7c3aad;\n  --syntax-string: #276c2b;\n  --syntax-number: #b5451b;\n  --syntax-comment: #6f6b78;\n  --syntax-name: #1a5fb4;\n  --syntax-type: #00695c;\n  --syntax-punctuation: #4a4753;\n  --syntax-meta: #9c4a00;\n\n  --shadow-lift: 0 2px 8px rgb(30 24 38 / 0.08);\n  --shadow-raise: 0 10px 30px rgb(30 24 38 / 0.14);\n  --shadow-float: 0 24px 60px rgb(30 24 38 / 0.18);\n}\n\n/*\n * `--on-accent` - what sits on top of an accent fill.\n *\n * A light accent (gold, lime, amber) needs dark glyphs; a dark one needs\n * white. The live products picked this by hand and wrote the answer into the\n * theme; here the theme works it out, by the same rule the brand-line S tile\n * uses.\n *\n * `contrast-color()` is the direct way to say it and is used where supported.\n * The fallback covers browsers that lack it. Relative colour syntax exposes\n * the accent's own lightness as `l`; `clamp()` turns that into a hard switch,\n * because the multiplication drives the middle term far past either bound\n * everywhere except within a hair of the threshold. Below it the accent is\n * dark and the result is 1 (white); above it, 0 (black). Chroma is dropped to\n * zero, so what comes out is neutral rather than a tinted grey.\n *\n * The threshold is 0.58, and it is deliberately far below the midpoint an eye\n * would guess. Contrast is not symmetric about it: a mid-lightness colour is\n * still much closer to white than to black in luminance, so black wins well\n * before the colour looks light. Checked against all fourteen accents of the\n * line - every one of them reads better with dark glyphs, the closest being\n * cobalt at 4.86:1 against 4.32:1 for white. A higher threshold is what puts\n * white text on magenta at 3.6:1, which is the defect this rule exists to\n * prevent.\n */\n:root {\n  --on-accent: oklch(from var(--accent) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n\n  /*\n   * The same question for the status fills, and it has to be asked separately:\n   * `--on-accent` is derived from the accent, so using it on a `--warn` fill\n   * is only ever right by coincidence. The line's first consumer did exactly\n   * that - a count on a yellow badge, drawn in white at 1.95:1 - and it read\n   * as correct for as long as the product happened to pin white.\n   *\n   * The status hues do not follow the product accent, so these four are the\n   * same for every product; they are still derived rather than written down,\n   * because the status colours themselves change between the themes.\n   */\n  --on-good: oklch(from var(--good) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n  --on-warn: oklch(from var(--warn) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n  --on-bad: oklch(from var(--bad) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n  --on-info: oklch(from var(--info) clamp(0, (0.58 - l) * 1000, 1) 0 0);\n}\n\n@supports (color: contrast-color(red)) {\n  :root {\n    --on-accent: contrast-color(var(--accent));\n    --on-good: contrast-color(var(--good));\n    --on-warn: contrast-color(var(--warn));\n    --on-bad: contrast-color(var(--bad));\n    --on-info: contrast-color(var(--info));\n  }\n}\n\n/*\n * The Tailwind 4 surface. `--color-*: initial` drops the stock palette on\n * purpose: a raw `bg-zinc-800` in a product should not compile, because the\n * only colours that exist here are the line's own.\n */\n@theme inline {\n  --color-*: initial;\n  --color-bg: var(--bg);\n  --color-raise: var(--raise);\n  --color-soft: var(--soft);\n  --color-softer: var(--softer);\n  --color-line: var(--line);\n  --color-line-2: var(--line-2);\n  --color-text: var(--text);\n  --color-dim: var(--dim);\n  --color-faint: var(--faint);\n  --color-accent: var(--accent);\n  --color-accent-2: var(--accent-2);\n  --color-accent-soft: var(--accent-soft);\n  --color-on-accent: var(--on-accent);\n  --color-on-good: var(--on-good);\n  --color-on-warn: var(--on-warn);\n  --color-on-bad: var(--on-bad);\n  --color-on-info: var(--on-info);\n  --color-good: var(--good);\n  --color-good-soft: var(--good-soft);\n  --color-warn: var(--warn);\n  --color-warn-soft: var(--warn-soft);\n  --color-bad: var(--bad);\n  --color-bad-soft: var(--bad-soft);\n  --color-info: var(--info);\n  --color-info-soft: var(--info-soft);\n\n  /* Charts. `bg-series-3`, `fill-series-3`, `stroke-scale-500` - the same\n   * utilities the rest of the vocabulary gets, so a chart is written in\n   * tokens like everything else and `dowel/no-raw-color` can hold it to\n   * that. */\n  --color-series-1: var(--series-1);\n  --color-series-2: var(--series-2);\n  --color-series-3: var(--series-3);\n  --color-series-4: var(--series-4);\n  --color-series-5: var(--series-5);\n  --color-series-6: var(--series-6);\n  --color-series-7: var(--series-7);\n  --color-series-8: var(--series-8);\n  --color-scale-100: var(--scale-100);\n  --color-scale-200: var(--scale-200);\n  --color-scale-300: var(--scale-300);\n  --color-scale-400: var(--scale-400);\n  --color-scale-500: var(--scale-500);\n  --color-scale-600: var(--scale-600);\n  --color-scale-700: var(--scale-700);\n  --color-chart-grid: var(--chart-grid);\n  --color-chart-axis: var(--chart-axis);\n  --color-heat-1: var(--heat-1);\n  --color-heat-2: var(--heat-2);\n  --color-heat-3: var(--heat-3);\n  --color-heat-4: var(--heat-4);\n  --color-heat-5: var(--heat-5);\n\n  /* Syntax, so a highlighted token is written `text-syntax-keyword` like every\n   * other colour in the system, and `dowel/no-raw-color` can hold it to that.\n   * A highlighter's own stylesheet - which writes hex values into class names\n   * of its own choosing - is what this replaces. */\n  --color-syntax-keyword: var(--syntax-keyword);\n  --color-syntax-string: var(--syntax-string);\n  --color-syntax-number: var(--syntax-number);\n  --color-syntax-comment: var(--syntax-comment);\n  --color-syntax-name: var(--syntax-name);\n  --color-syntax-type: var(--syntax-type);\n  --color-syntax-punctuation: var(--syntax-punctuation);\n  --color-syntax-meta: var(--syntax-meta);\n\n  /* Kept because they are not palette choices: a hairline is `transparent`,\n   * an SVG follows `currentColor`, and pure black and white are what an\n   * overlay scrim and a print sheet are made of. */\n  --color-transparent: transparent;\n  --color-current: currentColor;\n  --color-white: #fff;\n  --color-black: #000;\n\n  /*\n   * Type. System stacks on purpose: a downloaded face costs a network round\n   * trip before the first word appears, and the line's products are desktop\n   * tools where the operating system's own face is the one the user already\n   * reads everything else in.\n   */\n  --font-sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;\n  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;\n\n  /*\n   * Radius. Taken from what the products actually draw, not from a ratio:\n   * `rounded-[9px]` appears twenty times and `rounded-[10px]` twelve, because\n   * a control and the primary button were tuned by eye and then copied. The\n   * scale keeps the cluster they landed in and gives it names.\n   *\n   * `md` is the control radius - inputs, buttons, list rows. That the primary\n   * button was one pixel rounder than every other variant is not preserved:\n   * the products differ from themselves there, and buttons of the same size\n   * sitting side by side should not have mismatched corners.\n   */\n  --radius-xs: 4px;\n  --radius-sm: 6px;\n  --radius-md: 9px;\n  --radius-lg: 12px;\n  --radius-xl: 16px;\n  --radius-2xl: 20px;\n\n  /*\n   * A radius nested inside another has to be smaller by the gap between them,\n   * or the inner corner looks wrong against the outer one. The products did\n   * this by hand once - 18px outside, 17px inside - and nowhere else.\n   */\n  --radius-inner: calc(var(--radius-lg) - 1px);\n\n  /*\n   * Type scale. The products live between 10px and 14px: `text-sm` and\n   * `text-xs` together account for nine tenths of every size in both, and the\n   * rest scattered across 9, 9.5, 10, 10.5, 11, 11.5, 12.5 and 13 - nine steps\n   * inside four pixels, which no eye distinguishes and no reason justifies.\n   * This is the same range with the noise removed.\n   */\n  --text-2xs: 10px;\n  --text-2xs--line-height: 14px;\n  --text-xs: 11px;\n  --text-xs--line-height: 15px;\n  --text-sm: 12px;\n  --text-sm--line-height: 16px;\n  --text-base: 14px;\n  --text-base--line-height: 20px;\n  --text-lg: 16px;\n  --text-lg--line-height: 22px;\n  --text-xl: 18px;\n  --text-xl--line-height: 24px;\n  --text-2xl: 21px;\n  --text-2xl--line-height: 28px;\n\n  /* Weights. `semibold` is what both products use for anything emphasised;\n   * `bold` appears in neither, and the one `font-[650]` in a page title is the\n   * kind of value a scale exists to absorb. */\n  --font-weight-normal: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n\n  /* Tracking. The uppercase caption is the only place the products track at\n   * all - and they do it at 0.08em in six files and 0.09em in three, a\n   * difference nobody can see. One name settles it. */\n  --tracking-caption: 0.085em;\n  --tracking-tight: -0.01em;\n\n  /*\n   * A step between the steps.\n   *\n   * The spacing scale runs in fours - 2, 4, 6, 8 - and four different\n   * primitives independently reached past it for three pixels: the gap\n   * between segments of a rating and of an axis, the gap between cells of a\n   * heatmap, and how far a tooltip's arrow tucks under its popup. Four hands\n   * arriving at the same number is not four accidents; it is a step the scale\n   * was missing, and each of them wrote `[3px]` because there was nothing to\n   * name.\n   *\n   * It exists for hairline gaps between things that are themselves small -\n   * where two pixels reads as touching and four as separate objects. Nothing\n   * larger belongs here: this is the bottom of the scale, not a licence to\n   * measure by eye.\n   */\n  --spacing-hair: 3px;\n\n  /*\n  /* Easing. `out` for anything the user asked for - it arrives fast and\n   * settles, which reads as responsive. `in-out` for something moving on its\n   * own. `in` is deliberately absent: it starts slowly, which on a control\n   * reads as lag. */\n  --ease-out: cubic-bezier(0.2, 0, 0, 1);\n  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n\n  /*\n   * Elevation. Three steps, because the products had one and used it for a\n   * toast, a dropdown and a modal alike - so a modal never sat further from\n   * the page than the menu it covered.\n   */\n  --shadow-lift: var(--shadow-lift);\n  --shadow-raise: var(--shadow-raise);\n  --shadow-float: var(--shadow-float);\n\n  /*\n   * The smallest a pointer target may be.\n   *\n   * 24 CSS pixels, which is WCAG 2.2's 2.5.8 at AA. Not a matter of taste, and\n   * measured rather than assumed: a live run of the stand found four different\n   * answers to the same question in one set - a chip's cross at 16, Copyable\n   * at 19, CopyButton at 21, a search field's clear at 24. Three of the four\n   * fail, and the failure is silent. A cross missed by a thumb on a tablet, or\n   * by anyone whose hand is not steady, does not delete the tag and does not\n   * say anything either.\n   *\n   * It is a size token rather than a spacing step because it is a floor, not a\n   * rhythm: nothing is ever `--target-min` tall on purpose, things are at\n   * least that big. `size-target` and `min-size-target` come free from the\n   * namespace, but the way a primitive usually reaches it is `target-min`\n   * below, which grows the hit area without growing the glyph.\n   */\n  --size-target: 24px;\n\n  /*\n   * The window's own chrome: the strip at the top, the rail at the left, and\n   * the buttons that close the window.\n   *\n   * Four products of the line draw their own title bar - the trade is that a\n   * system bar over an application bar costs a strip of every laptop screen\n   * for nothing - and by the time the fourth one did it, the strip was 40px\n   * in one and 2.4rem in another. Neither number is wrong; having two is. A\n   * window's chrome is the part of a product that is supposed to look like\n   * the operating system rather than like the product, so it is the last\n   * place where two of them should differ.\n   *\n   * 40px is not a taste either. The window buttons have to clear the pointer\n   * target floor with room for the hover fill to read as a button, and the\n   * strip has to hold a mark, a trail and a search box at one line of text\n   * without the trail wrapping. 40 is where both stop being tight.\n   *\n   * `--spacing-window-button` is 46px because that is what Windows draws, and\n   * a bar whose buttons are narrower than the system's has a gap the pointer\n   * falls into on the way to the corner. It is deliberately wider than it is\n   * tall: the close button is the one that must be hit without aiming, and on\n   * a maximised window it is the screen's corner.\n   *\n   * These are in the spacing namespace rather than beside `--size-target`,\n   * and the reason is mechanical rather than tidy. `--size-*` yields exactly\n   * one utility, `size-*`, which sets both axes - so `w-window-button` off a\n   * `--size-` token compiles to NOTHING, and a button written that way loses\n   * its width with no error anywhere. Every measurement here is one axis: the\n   * bar has a height, the rail a width, the button a width unequal to its\n   * height. `--spacing-*` is the namespace that feeds `w-`, `h-`, `min-h-`\n   * and the padding utilities, so it is the one that can say so. Caught by\n   * compiling the utility rather than by reading the stylesheet, which is\n   * what `tailwind.test.ts` exists for.\n   */\n  --spacing-titlebar: 40px;\n  --spacing-rail: 216px;\n  --spacing-window-button: 46px;\n\n  /*\n   * The rail with only its icons: `NavRail collapsed`. 56 is a 36px entry -\n   * the size of an icon button in the bar above it - with 10px of air on each\n   * side, which is the same inset the wide rail gives its entries. Narrower,\n   * and the active entry's tint touches the rail's border; wider, and the\n   * column reads as a sidebar that forgot its words.\n   */\n  --spacing-rail-compact: 56px;\n\n  /*\n   * How much of a frameless window's edge can be grabbed to resize it.\n   *\n   * The system used to own this and gave about 4 pixels plus whatever the\n   * border was; a frameless window has no border, so the whole of it has to\n   * be put back by hand. Five is the smallest that can be hit reliably with a\n   * mouse and the largest that does not steal a click meant for the first\n   * line of text - the strips sit above everything, so anything they cover\n   * they cover completely.\n   *\n   * The corner is double, because a corner is aimed at less precisely than an\n   * edge and is the one that resizes both axes at once.\n   */\n  --spacing-resize-edge: 5px;\n  --spacing-resize-corner: 10px;\n}\n\n/*\n * `target-min` - visually smaller, clickably larger.\n *\n * The obvious fix for a 16px cross is to make it 24px, and it is the wrong\n * one: a chip is a small thing by design and a cross a third of its height\n * reads as a button with a chip around it. The set's appearance is a\n * decision, and an accessibility floor should not overturn it.\n *\n * So the target grows and the glyph does not. The pseudo-element is centred on\n * the control, takes its size, and refuses to go under the floor - so a\n * control already large enough is untouched, and a smaller one gains an\n * invisible margin of hit area on every side.\n *\n * `position: relative` comes with it rather than being left to the caller: a\n * target that silently does nothing because its parent forgot to establish a\n * containing block is exactly the failure this exists to prevent.\n *\n * Not `padding`, which was the other candidate: padding moves the glyph inside\n * its box and changes how the control sits in a flex row, so every call site\n * would need a compensating negative margin. This changes nothing about\n * layout.\n */\n/*\n * `caption` - the small uppercase label: a field's name, a panel's section, a\n * group of menu items, a rail's group.\n *\n * One role, and the set wrote it seven ways: with and without `font-medium`,\n * with and without a weight at all, so a Field's label and the SectionLabel\n * above it were two weights of the same thing. kilna's screens added\n * thirty-one more by hand. The weight is 600, the mockup's `.lbl` - at 10px\n * a caption lighter than that reads as a smudge rather than a word.\n *\n * A utility rather than a component because it is a role text plays inside\n * things that are already components: a `<legend>`, a `<th>`, a `<label>`.\n * Its colour is `dim`, not `faint`. `faint` is verified against the grounds at\n * body size; at 10px a live axe run measured it at 3.45:1 on a raised surface\n * in the light theme and 3.16:1 in the dark, against AA's 4.5:1 - a caption\n * nobody can read is a caption doing nothing. `dim` passes in both. That\n * `faint` fails at every small size, not only here, is still the contrast\n * work's to gate.\n */\n@utility caption {\n  @apply text-2xs font-semibold uppercase tracking-caption text-dim;\n}\n\n@utility target-min {\n  position: relative;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    translate: -50% -50%;\n    width: 100%;\n    height: 100%;\n    min-width: var(--size-target);\n    min-height: var(--size-target);\n  }\n}\n\n/*\n * How tall a control is, and how much room a screen gives each row.\n *\n * `h-9` appeared in nine primitives - every field the set has - each spelling\n * it out, which is why `Input` could not be made compact without editing\n * `Input`. One decision made nine times gets one name.\n *\n * **Not in `@theme`, and that is the whole mechanism.** A token declared there\n * is inlined by the compiler: `h-control` came out as `height: 36px`, the\n * override on a container had nothing to bind to, and the density attribute\n * did exactly nothing. Measured in the browser rather than assumed - the\n * container's `--row-control` read 32px while the field it contained stayed\n * 36. Tailwind also writes a fallback for any `var()` it recognises from the\n * theme, so the name has to live outside the theme's namespaces entirely.\n *\n * Declared here as plain custom properties and turned into utilities by hand\n * below, the reference survives, and an override on an ancestor reaches every\n * control under it - which is what makes density a property of a region\n * rather than of a component.\n */\n:root {\n  --row-control: 36px;\n  --row-control-sm: 32px;\n  --row-control-lg: 40px;\n\n  /* The same question for a table, whose rows are sized by what is above and\n   * below the text rather than by a height. `Table` had its own `density`\n   * prop for this, with its own words - `base` and `dense` - which meant the\n   * set used one word for two mechanisms and a product had to set both. */\n  --row-cell: 10px;\n}\n\n@utility h-control {\n  height: var(--row-control);\n}\n\n@utility py-row {\n  padding-block: var(--row-cell);\n}\n\n@utility h-control-sm {\n  height: var(--row-control-sm);\n}\n\n@utility h-control-lg {\n  height: var(--row-control-lg);\n}\n\n/*\n * Density.\n *\n * Two answers to one question, and the set had neither: a product wanting a\n * tighter table wrote `h-8` at every call site, which is the drift the scale\n * exists to stop, one screen at a time.\n *\n * **It is an attribute on a container, not a prop on a component.** A prop\n * would have to be added to every primitive, threaded through every wrapper a\n * product writes, and passed by hand at each call site - and a primitive\n * written next year would not have it. An attribute is inherited:\n *\n *     <form data-density=\"compact\">   …every field inside it…\n *\n * That reaches components which did not exist when the product was built, and\n * a product's own components too, as long as they measure in `h-control` like\n * everything else.\n *\n * The floor does not move with it. `--size-target` stays 24px at every\n * density, because WCAG does not care how tight a table is - which is exactly\n * why `target-min` grows the hit area rather than the control: a compact row\n * is still one a hand can hit.\n */\n[data-density='compact'] {\n  --row-control: 32px;\n  --row-control-sm: 28px;\n  --row-control-lg: 36px;\n  --row-cell: 6px;\n}\n\n[data-density='comfortable'] {\n  --row-control: 40px;\n  --row-control-sm: 36px;\n  --row-control-lg: 44px;\n  --row-cell: 14px;\n}\n\n/*\n * Stacking order.\n *\n * Not in `@theme`: Tailwind has no z-index namespace, so `z-50` is a literal\n * fifty and a named step would not compile. These are custom properties a\n * component reads directly - `z-index: var(--z-modal)`.\n *\n * The order is the products' own, with the gaps closed. They ran 10 for an\n * in-flow popup, 20 sticky, 30 menu, 40 for a floating button, 50 for modals\n * and drawers, then jumped to 70 and 80 for the command palette - which had to\n * clear the modal layer and had no name to do it with.\n */\n:root {\n  /*\n   * Motion. One duration existed before this - 160ms on a route change - and\n   * everything else rode Tailwind's default. These are the steps around it:\n   * `quick` for a colour or an opacity that should feel immediate, `base` for\n   * something that moves, `slow` for something arriving from off-screen.\n   *\n   * Not in `@theme`: Tailwind's `duration-*` utility takes a literal number,\n   * not a named step, so these are read directly - `transition-duration:\n   * var(--duration-base)`. The easing curves opposite them ARE a namespace,\n   * so `ease-out` is a class.\n   *\n   * Every duration here is for people who want motion: `prefers-reduced-\n   * motion` cuts them to nothing further down.\n   */\n  --duration-quick: 120ms;\n  --duration-base: 160ms;\n  --duration-slow: 240ms;\n\n  --z-popup: 10;\n  --z-sticky: 20;\n  --z-menu: 30;\n  --z-floating: 40;\n  --z-overlay: 50;\n  --z-modal: 60;\n  --z-palette: 70;\n  --z-toast: 80;\n}\n\n/*\n * Base layer: what every product would otherwise write again. Scoped to\n * elements and to `:focus-visible`, never to a class, so nothing here can\n * collide with a component.\n */\nbody {\n  margin: 0;\n  background-color: var(--bg);\n  color: var(--text);\n  font-family: var(--font-sans);\n  /* The base step, so text nobody gave a class reads at the scale's own body\n   * size. Without it that text inherited the browser's 16px - an empty\n   * state's heading and a card's name came out a step and a half above the\n   * 12px beside them, in every product of the line.\n   *\n   * The line height is the base step's own 20 over 14, written as a ratio\n   * rather than read from `--text-base--line-height`, and that is deliberate.\n   * A length is inherited as a length: with 20px here, every element that\n   * sets a size of its own without a line height - a 10px chart label -\n   * inherited 20px and stood five pixels taller, found in the pictures of\n   * the stand. A ratio is inherited as a ratio. The theme test holds the two\n   * numbers to the tokens. */\n  font-size: var(--text-base);\n  line-height: calc(20 / 14);\n  -webkit-font-smoothing: antialiased;\n}\n\n/*\n * How heavy an icon's line is.\n *\n * lucide draws at 2 by default, which is tuned for its own 24px; at the 14 and\n * 16 the line actually uses, a 2px stroke reads heavier than the text beside\n * it. 1.75 is the owner's call for the whole line (24.09), made here once\n * rather than as a `strokeWidth` at every one of a few hundred call sites.\n *\n * Only an icon still on lucide's default is changed. `[stroke-width='2']` is\n * how lucide writes the default, and an icon given another width - by a call\n * site, or by `absoluteStrokeWidth`, which computes one - keeps it. In\n * `@layer base` so a `stroke-*` utility on the icon wins too. A product that\n * draws with some other icon set is untouched: the rule keys off lucide's own\n * class.\n */\n:root {\n  --icon-stroke: 1.75;\n}\n\n@layer base {\n  svg.lucide[stroke-width='2'] {\n    stroke-width: var(--icon-stroke);\n  }\n}\n\n/*\n * In `@layer base`, so a component can turn it off.\n *\n * Unlayered, this rule has the same specificity as `focus-visible:outline-none`\n * from Tailwind - both are one pseudo-class - and wins on source order alone,\n * because the theme is imported before the utilities. Every component that\n * draws its own focus ring got this one on top of it: the command palette's\n * field had an accent outline it had explicitly opted out of, and a combobox\n * with chips drew two rings, one around the box and one around the input\n * inside it.\n *\n * A layered rule loses to any unlayered one regardless of specificity, which\n * is the whole point of cascade layers - the base layer states a default and\n * a component overrides it by saying so.\n */\n@layer base {\n  :focus-visible {\n    outline: 2px solid var(--accent);\n    outline-offset: 2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    transition-duration: 0.01ms !important;\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n/*\n * Scrollbars. A browser's default bar is a piece of someone else's chrome\n * sitting in the middle of the product - full width, with step arrows. These\n * are the line's own: thin, in the palette, drawn only where something\n * actually scrolls.\n */\n* {\n  scrollbar-width: thin;\n  scrollbar-color: var(--line-2) transparent;\n}\n\n*::-webkit-scrollbar {\n  width: 10px;\n  height: 10px;\n}\n\n*::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n  border: 3px solid transparent;\n  border-radius: 999px;\n  background: var(--line-2);\n  background-clip: content-box;\n  /* The thumb is drawn proportional to how much of the document fits on\n   * screen, so a long one collapses it to a few pixels: still visible, no\n   * longer catchable by a pointer. This is the floor below which it stops\n   * being a control. */\n  min-height: 2.5rem;\n}\n\n*::-webkit-scrollbar-thumb:hover {\n  background: var(--dim);\n  background-clip: content-box;\n}\n\n*::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n*::-webkit-scrollbar-button {\n  display: none;\n}\n"
         }
       ],
       "docs": "Import the theme, then your product accent:\n\n    @import './dowel/theme.css';\n    @import './dowel/accents/kilna.css';\n\nOutside the line, set the colour directly instead:\n\n    :root { --accent-base: #2f7d6b; }"
@@ -307,7 +307,7 @@
       "title": "AboutPlate",
       "description": "The about-plate primitive.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/product-mark.json"
@@ -328,7 +328,7 @@
       "description": "A stack of collapsible sections that share one rule about how many can be open at once - an FAQ, the groups in a long settings page, the filters in a sidebar. Each section is `Collapsible`'s shape (a header, a trigger, a panel) repeated inside a group that also decides `single` or `multiple`, which is the one thing a lone `Collapsible` has no opinion about because it has nothing to be exclusive with.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/collapsible.json"
@@ -350,7 +350,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -369,7 +369,7 @@
       "description": "The shape everyone recognises: weeks as columns, weekdays as rows, time running left to right, and a value carried by how dark a square is. Two products of the line asked for it by name before it existed.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/activity-weeks.json"
@@ -389,7 +389,7 @@
       "title": "ActivityLegend",
       "description": "Separate from the grid because a caller showing three grids on one screen wants one legend, and because the words in it are the product's.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/activity-heatmap.json",
@@ -427,7 +427,7 @@
       "description": "A message that stays on the screen, in the flow of the page, about the thing next to it: this field could not be saved, this profile has no axes yet, this export is out of date.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -446,7 +446,7 @@
       "description": "The frame a product draws once and then never thinks about: a bar across the top, a rail down the left, and the screen in the corner they leave. It is three boxes and a grid, which is exactly why every product wrote its own - and why every one of them got the same two things wrong before getting them right.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -465,7 +465,7 @@
       "description": "A person, in the space of a word. Every screen that lists people needs one, and the three things that go wrong with it are always the same:\n * - **The picture fails to load** and a broken-image glyph appears where a   face was. The fallback is not a nicety; it is the state this component   spends most of its life in, because half the people in any list have no   picture at all.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -484,7 +484,7 @@
       "description": "A small piece of state attached to something else: a count, a status, a label. It is not a button and never was - if it can be clicked it is a Chip.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -503,7 +503,7 @@
       "description": "A strip across the top of the application, about the application: you are offline, this build is a preview, your licence expires on Friday, a new version is ready to install.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -522,7 +522,7 @@
       "description": "Bars rather than a line, and the distinction is the data's not the drawing's: a line says the value exists between the points, a column says each period is its own sum. Hours worked in a week is a sum - there is no \"Wednesday afternoon\" reading between two weeks - so it is a column.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -541,7 +541,7 @@
       "description": "One thing on a day of a month view, in one line: a release, a lesson, a payment that falls due.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -559,7 +559,7 @@
       "title": "BigCalendar",
       "description": "A month at a time, with what is on each day of it, filling the box it is given.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/big-calendar-item.json",
@@ -582,7 +582,7 @@
       "description": "Where you are, as a trail rather than as a word. On a list screen the screen's own name is enough; on something opened from it, it is not - \"Works\" says nothing about which work, and the way back to the list is otherwise the browser's back button alone, which a desktop window does not visibly have.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -602,7 +602,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -636,7 +636,7 @@
       "title": "Calendar",
       "description": "The sums live next door in `calendar-math`, which has no React in it; this is the grid that draws them and the keyboard that moves around it.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar-math.json"
@@ -657,7 +657,7 @@
       "description": "The interesting part is the words. A checkbox on its own is a nine-pixel target that says nothing; wired to a label it is the whole row, and the row is what a finger and a pointer both aim at. So the label is part of the component rather than something a caller remembers to add - the commonest bug in a hand-rolled checkbox is a `<label>` that is next to the input instead of tied to it, which looks identical and does nothing.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -677,7 +677,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -696,7 +696,7 @@
       "description": "The frame around a piece of code is the same everywhere and is written again in every product: the scroll that must not wrap, the gutter of line numbers that must not be selectable, the copy button, the caption saying which file this is, and the marking of the lines the reader was sent here to look at.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/copy-button.json"
@@ -717,7 +717,7 @@
       "description": "One region of a screen that a reader shows or hides by choice - release notes under a version number, a filter panel, the raw payload under a log line. It differs from Accordion in the way a single light switch differs from a panel of them: there is one trigger and one panel, no group holding several and no rule about how many can be open, because there is only ever one to be open or not.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -735,7 +735,7 @@
       "title": "ColorField",
       "description": "Picking a colour for something the product stores: a tag, a project, a calendar. Note what that is *not* - it is not choosing the appearance of the interface. The theme decides that, from one accent, and a field that let a reader repaint the chrome would undo the argument the whole system rests on.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -755,7 +755,7 @@
       "title": "ColumnResizeHandle",
       "description": "The handle, and the hook that keeps the widths it produces. Pointer events rather than HTML5 drag-and-drop: a desktop shell that takes file drops for itself never lets a `dragstart` reach the page, so the native API is a handle that does nothing there; pointer capture on the handle also keeps the drag alive when the pointer runs ahead of the cell, which at any speed above a crawl it does.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -775,7 +775,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json",
@@ -799,7 +799,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/combobox.json",
@@ -811,7 +811,25 @@
           "path": "ui/command-palette.tsx",
           "target": "@ui/command-palette.tsx",
           "type": "registry:ui",
-          "content": "import { useRef, type ReactNode } from 'react'\nimport { Combobox as Base } from '@base-ui/react/combobox'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from 'dowel-ui'\nimport { comboboxItemVariants } from './combobox'\nimport { Kbd } from './kbd'\nimport { LayerProvider } from './layer'\n\n/*\n * CommandPalette.\n *\n * One box that finds anything: the shortcut opens it, typing narrows a list,\n * Enter runs what is highlighted.\n *\n * It is a Combobox rather than a Dialog with a field in it, and that is Base\n * UI's own arrangement rather than a shortcut taken here: put the input\n * *inside* the popup and the popup becomes `role=\"dialog\"` on its own, with\n * the input still announced as the combobox that owns the list. The filtering,\n * the highlight, the arrow keys and the type-ahead are the ones Combobox\n * already has - there is no second implementation of any of it.\n *\n * What is left for the product is everything that makes a palette that\n * product's: what the items are, how they are grouped, what running one does.\n * `items` is deliberately `unknown[]` - a palette lists commands, works,\n * settings and recent files in the same box, and a type that admitted only\n * strings would push every product into the same stringly-typed workaround.\n */\n\nexport const commandPalettePopupVariants = cva(\n  [\n    'flex w-[min(36rem,calc(100vw-2rem))] flex-col overflow-hidden',\n    'rounded-xl border border-line bg-raise text-text shadow-float',\n    'focus-visible:outline-none',\n    '[transition:opacity_var(--duration-quick)_var(--ease-out),transform_var(--duration-quick)_var(--ease-out)]',\n    'data-[closed]:scale-[0.98] data-[closed]:opacity-0',\n    'data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0',\n  ],\n  {\n    variants: {\n      size: {\n        md: 'max-h-96',\n        lg: 'max-h-128',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\n/** The root. Controlled by `open`/`onOpenChange`, because what opens a palette\n * is a shortcut somewhere else in the application. */\nexport const CommandPalette = Base.Root\n\n/** A row. The same clothes as a Combobox row, on purpose: a palette is a list\n * of choices, and two lists of choices in one product should not differ.\n *\n * They did differ, for as long as this was a bare re-export: the comment said\n * \"the same clothes\" and the component wore none, so the rows inherited the\n * popup's 16px and stood a third taller than every other list in the set. A\n * live run caught it - the palette looked like a different product. */\nexport function CommandPaletteItem({ className, ...props }: Base.Item.Props) {\n  return <Base.Item className={cn(comboboxItemVariants(), className)} {...props} />\n}\n\n/** The list. Takes a render function over the filtered items. */\nexport function CommandPaletteList({ className, ...props }: Base.List.Props) {\n  return <Base.List className={cn('overflow-y-auto p-1', className)} {...props} />\n}\n\n/** Shown when nothing matches. The words are the product's.\n *\n * Base UI keeps it mounted so the announcement fires, which means its padding\n * is spent whether or not it has anything to say - and a palette with six\n * results had a 48px hole under the field. It collapses when empty instead. */\nexport function CommandPaletteEmpty({ className, ...props }: Base.Empty.Props) {\n  return (\n    <Base.Empty\n      className={cn('px-2 py-3 text-center text-sm text-faint empty:hidden empty:p-0', className)}\n      {...props}\n    />\n  )\n}\n\n/** A labelled group, for a palette that lists more than one kind of thing. */\nexport const CommandPaletteGroup = Base.Group\n\n/** The caption above a group. */\nexport const CommandPaletteGroupLabel = Base.GroupLabel\n\n/** The rows of one group, as a render function over that group's items.\n *\n * A palette that lists works, versions and notes together is a `List` over the\n * groups with a `Collection` inside each. Mapping a group's rows by hand also\n * works, but then the palette has to be told how to match an item to a value -\n * and for rows fetched fresh from a server, identity comparison never does. */\nexport const CommandPaletteCollection = Base.Collection\n\nexport interface CommandPalettePopupProps\n  extends Omit<Base.Popup.Props, 'aria-label'>,\n    VariantProps<typeof commandPalettePopupVariants> {\n  /**\n   * What the palette is called, for a screen reader. Required, and required\n   * for a reason particular to this component: the popup is a dialog, and a\n   * dialog is named by its own visible title - which a palette does not have,\n   * because the field is the first thing in it.\n   *\n   * So the name has to come from outside, it has to be the product's word, and\n   * nothing else can supply it. A palette without one is announced as \"dialog\"\n   * and nothing more; making the prop required is what stops that shipping.\n   */\n  'aria-label': string\n  /** Where to portal to. Defaults to the document body. */\n  container?: Base.Portal.Props['container']\n}\n\n/** The palette itself: a dim over the page, and the box in the upper third of\n * it - where the eye already is, rather than dead centre. */\nexport function CommandPalettePopup({\n  size,\n  container,\n  className,\n  children,\n  ...props\n}: CommandPalettePopupProps) {\n  const portal = useRef<HTMLDivElement>(null)\n\n  return (\n    <Base.Portal ref={portal} container={container}>\n      <Base.Backdrop\n        className={cn(\n          'fixed inset-0 bg-black/55 backdrop-blur-[2px]',\n          '[z-index:var(--z-overlay)]',\n          '[transition:opacity_var(--duration-quick)_var(--ease-out)]',\n          'data-[closed]:opacity-0 data-[starting-style]:opacity-0',\n        )}\n      />\n      <Base.Positioner\n        className=\"[z-index:var(--z-palette)]\"\n        /* The anchor is a point at the top of the viewport, given explicitly.\n         *\n         * A positioner places a popup against an anchor and hides itself with\n         * an inline `opacity: 0` until it has measured one. A palette has no\n         * trigger to point at - it is opened by a keystroke - so without this\n         * the measure never resolves: the popup sits in the DOM at the right\n         * size, fully transparent, rendering nothing and reporting no error.\n         * Found by reading the computed style off the positioner rather than\n         * the popup, which was opaque the whole time.\n         *\n         * A zero-height rectangle a fifth of the way down puts the palette\n         * where the eye already is rather than dead centre. */\n        anchor={{\n          getBoundingClientRect: () => {\n            const width = typeof window === 'undefined' ? 0 : window.innerWidth\n            const top = typeof window === 'undefined' ? 0 : window.innerHeight * 0.18\n            return new DOMRect(width / 2, top, 0, 0)\n          },\n        }}\n        positionMethod=\"fixed\"\n        side=\"bottom\"\n        align=\"center\"\n        sideOffset={0}\n        alignOffset={0}\n      >\n        <Base.Popup\n          className={cn(commandPalettePopupVariants({ size }), className)}\n          {...props}\n        >\n          {/* A tooltip or a menu opened from a result rides above the palette,\n            * which stands above every modal. See `layer.tsx`. */}\n          <LayerProvider above=\"palette\" mount={portal}>{children}</LayerProvider>\n        </Base.Popup>\n      </Base.Positioner>\n    </Base.Portal>\n  )\n}\n\nexport interface CommandPaletteInputProps extends Base.Input.Props {\n  /** Shown at the right of the field, as `['Esc']`. Decorative. */\n  hint?: string[]\n}\n\n/** The field. Sits inside the popup, which is what makes the popup a dialog\n * and the field its combobox. */\nexport function CommandPaletteInput({ hint, className, ...props }: CommandPaletteInputProps) {\n  return (\n    <div className=\"flex items-center gap-2 border-b border-line px-3\">\n      <MagnifierIcon />\n      <Base.Input\n        className={cn(\n          'h-11 w-full bg-transparent text-sm text-text placeholder:text-faint',\n          'focus-visible:outline-none',\n          className,\n        )}\n        {...props}\n      />\n      {hint && <Kbd keys={hint} aria-hidden className=\"shrink-0\" />}\n    </div>\n  )\n}\n\n/** The row's own layout: an icon, what it is, and where it lives. */\nexport function CommandPaletteRow({\n  icon,\n  hint,\n  className,\n  children,\n  ...props\n}: {\n  icon?: ReactNode\n  hint?: ReactNode\n  className?: string\n  children: ReactNode\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>) {\n  return (\n    <div className={cn('flex w-full items-center gap-2.5', className)} {...props}>\n      {icon}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      {hint !== undefined && <span className=\"shrink-0 text-2xs text-faint\">{hint}</span>}\n    </div>\n  )\n}\n\nexport { comboboxItemVariants as commandPaletteItemVariants }\n\nfunction MagnifierIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      width=\"15\"\n      height=\"15\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      aria-hidden\n      className=\"shrink-0 text-faint\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n      <path d=\"M10.5 10.5L14 14\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n"
+          "content": "import { useRef, type ReactNode } from 'react'\nimport { Combobox as Base } from '@base-ui/react/combobox'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from 'dowel-ui'\nimport { comboboxItemVariants } from './combobox'\nimport { Kbd } from './kbd'\nimport { LayerProvider } from './layer'\n\n/*\n * CommandPalette.\n *\n * One box that finds anything: the shortcut opens it, typing narrows a list,\n * Enter runs what is highlighted.\n *\n * It is a Combobox rather than a Dialog with a field in it, and that is Base\n * UI's own arrangement rather than a shortcut taken here: put the input\n * *inside* the popup and the popup becomes `role=\"dialog\"` on its own, with\n * the input still announced as the combobox that owns the list. The filtering,\n * the highlight, the arrow keys and the type-ahead are the ones Combobox\n * already has - there is no second implementation of any of it.\n *\n * What is left for the product is everything that makes a palette that\n * product's: what the items are, how they are grouped, what running one does.\n * `items` is deliberately `unknown[]` - a palette lists commands, works,\n * settings and recent files in the same box, and a type that admitted only\n * strings would push every product into the same stringly-typed workaround.\n *\n * The commands themselves come from `commands`: the list the keyboard and the\n * sheet of shortcuts read too, so a row's key hint is the key that works.\n */\n\nexport const commandPalettePopupVariants = cva(\n  [\n    'flex w-[min(36rem,calc(100vw-2rem))] flex-col overflow-hidden',\n    'rounded-xl border border-line bg-raise text-text shadow-float',\n    'focus-visible:outline-none',\n    '[transition:opacity_var(--duration-quick)_var(--ease-out),transform_var(--duration-quick)_var(--ease-out)]',\n    'data-[closed]:scale-[0.98] data-[closed]:opacity-0',\n    'data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0',\n  ],\n  {\n    variants: {\n      size: {\n        md: 'max-h-96',\n        lg: 'max-h-128',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\n/** The root. Controlled by `open`/`onOpenChange`, because what opens a palette\n * is a shortcut somewhere else in the application. */\nexport const CommandPalette = Base.Root\n\n/** A row. The same clothes as a Combobox row, on purpose: a palette is a list\n * of choices, and two lists of choices in one product should not differ.\n *\n * They did differ, for as long as this was a bare re-export: the comment said\n * \"the same clothes\" and the component wore none, so the rows inherited the\n * popup's 16px and stood a third taller than every other list in the set. A\n * live run caught it - the palette looked like a different product. */\nexport function CommandPaletteItem({ className, ...props }: Base.Item.Props) {\n  return <Base.Item className={cn(comboboxItemVariants(), className)} {...props} />\n}\n\n/** The list. Takes a render function over the filtered items. */\nexport function CommandPaletteList({ className, ...props }: Base.List.Props) {\n  return <Base.List className={cn('overflow-y-auto p-1', className)} {...props} />\n}\n\n/** Shown when nothing matches. The words are the product's.\n *\n * Base UI keeps it mounted so the announcement fires, which means its padding\n * is spent whether or not it has anything to say - and a palette with six\n * results had a 48px hole under the field. It collapses when empty instead. */\nexport function CommandPaletteEmpty({ className, ...props }: Base.Empty.Props) {\n  return (\n    <Base.Empty\n      className={cn('px-2 py-3 text-center text-sm text-faint empty:hidden empty:p-0', className)}\n      {...props}\n    />\n  )\n}\n\n/** A labelled group, for a palette that lists more than one kind of thing. */\nexport const CommandPaletteGroup = Base.Group\n\n/** The caption above a group. */\nexport const CommandPaletteGroupLabel = Base.GroupLabel\n\n/** The rows of one group, as a render function over that group's items.\n *\n * A palette that lists works, versions and notes together is a `List` over the\n * groups with a `Collection` inside each. Mapping a group's rows by hand also\n * works, but then the palette has to be told how to match an item to a value -\n * and for rows fetched fresh from a server, identity comparison never does. */\nexport const CommandPaletteCollection = Base.Collection\n\nexport interface CommandPalettePopupProps\n  extends Omit<Base.Popup.Props, 'aria-label'>,\n    VariantProps<typeof commandPalettePopupVariants> {\n  /**\n   * What the palette is called, for a screen reader. Required, and required\n   * for a reason particular to this component: the popup is a dialog, and a\n   * dialog is named by its own visible title - which a palette does not have,\n   * because the field is the first thing in it.\n   *\n   * So the name has to come from outside, it has to be the product's word, and\n   * nothing else can supply it. A palette without one is announced as \"dialog\"\n   * and nothing more; making the prop required is what stops that shipping.\n   */\n  'aria-label': string\n  /** Where to portal to. Defaults to the document body. */\n  container?: Base.Portal.Props['container']\n}\n\n/** The palette itself: a dim over the page, and the box in the upper third of\n * it - where the eye already is, rather than dead centre. */\nexport function CommandPalettePopup({\n  size,\n  container,\n  className,\n  children,\n  ...props\n}: CommandPalettePopupProps) {\n  const portal = useRef<HTMLDivElement>(null)\n\n  return (\n    <Base.Portal ref={portal} container={container}>\n      <Base.Backdrop\n        className={cn(\n          'fixed inset-0 bg-black/55 backdrop-blur-[2px]',\n          '[z-index:var(--z-overlay)]',\n          '[transition:opacity_var(--duration-quick)_var(--ease-out)]',\n          'data-[closed]:opacity-0 data-[starting-style]:opacity-0',\n        )}\n      />\n      <Base.Positioner\n        className=\"[z-index:var(--z-palette)]\"\n        /* The anchor is a point at the top of the viewport, given explicitly.\n         *\n         * A positioner places a popup against an anchor and hides itself with\n         * an inline `opacity: 0` until it has measured one. A palette has no\n         * trigger to point at - it is opened by a keystroke - so without this\n         * the measure never resolves: the popup sits in the DOM at the right\n         * size, fully transparent, rendering nothing and reporting no error.\n         * Found by reading the computed style off the positioner rather than\n         * the popup, which was opaque the whole time.\n         *\n         * A zero-height rectangle a fifth of the way down puts the palette\n         * where the eye already is rather than dead centre. */\n        anchor={{\n          getBoundingClientRect: () => {\n            const width = typeof window === 'undefined' ? 0 : window.innerWidth\n            const top = typeof window === 'undefined' ? 0 : window.innerHeight * 0.18\n            return new DOMRect(width / 2, top, 0, 0)\n          },\n        }}\n        positionMethod=\"fixed\"\n        side=\"bottom\"\n        align=\"center\"\n        sideOffset={0}\n        alignOffset={0}\n      >\n        <Base.Popup\n          className={cn(commandPalettePopupVariants({ size }), className)}\n          {...props}\n        >\n          {/* A tooltip or a menu opened from a result rides above the palette,\n            * which stands above every modal. See `layer.tsx`. */}\n          <LayerProvider above=\"palette\" mount={portal}>{children}</LayerProvider>\n        </Base.Popup>\n      </Base.Positioner>\n    </Base.Portal>\n  )\n}\n\nexport interface CommandPaletteInputProps extends Base.Input.Props {\n  /** Shown at the right of the field, as `Escape`. Decorative. */\n  hint?: string\n}\n\n/** The field. Sits inside the popup, which is what makes the popup a dialog\n * and the field its combobox. */\nexport function CommandPaletteInput({ hint, className, ...props }: CommandPaletteInputProps) {\n  return (\n    <div className=\"flex items-center gap-2 border-b border-line px-3\">\n      <MagnifierIcon />\n      <Base.Input\n        className={cn(\n          'h-11 w-full bg-transparent text-sm text-text placeholder:text-faint',\n          'focus-visible:outline-none',\n          className,\n        )}\n        {...props}\n      />\n      {hint && <Kbd keys={hint} aria-hidden className=\"shrink-0\" />}\n    </div>\n  )\n}\n\n/** The row's own layout: an icon, what it is, and where it lives. */\nexport function CommandPaletteRow({\n  icon,\n  hint,\n  className,\n  children,\n  ...props\n}: {\n  icon?: ReactNode\n  hint?: ReactNode\n  className?: string\n  children: ReactNode\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>) {\n  return (\n    <div className={cn('flex w-full items-center gap-2.5', className)} {...props}>\n      {icon}\n      <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n      {hint !== undefined && <span className=\"shrink-0 text-2xs text-faint\">{hint}</span>}\n    </div>\n  )\n}\n\nexport { comboboxItemVariants as commandPaletteItemVariants }\n\nfunction MagnifierIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      width=\"15\"\n      height=\"15\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      aria-hidden\n      className=\"shrink-0 text-faint\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n      <path d=\"M10.5 10.5L14 14\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n"
+        }
+      ]
+    },
+    {
+      "name": "commands",
+      "type": "registry:ui",
+      "title": "Commands",
+      "description": "One list of everything the application can do, declared where the doing lives - and the keyboard, the command palette and the sheet of shortcuts all read that list, so a key is written once and none of them can be a version behind.",
+      "dependencies": [],
+      "registryDependencies": [
+        "https://lacodda.github.io/dowel/r/shortcut.json"
+      ],
+      "files": [
+        {
+          "path": "ui/commands.tsx",
+          "target": "@ui/commands.tsx",
+          "type": "registry:ui",
+          "content": "import { useLayoutEffect, useRef, useState, useSyncExternalStore, type ReactNode, type RefObject } from 'react'\nimport {\n  formatStroke,\n  holdsCommand,\n  isTypingTarget,\n  parseKeys,\n  sameStroke,\n  strokeOf,\n  typesInField,\n  type Stroke,\n} from './shortcut'\n\n/*\n * Commands.\n *\n * One list of everything the application can do, declared where the doing\n * lives - and the keyboard, the command palette and the sheet of shortcuts all\n * read that list, so a key is written once and none of them can be a version\n * behind.\n *\n * Every product that grew a palette wrote a key three times: in the listener\n * that answers it, in the palette row that hints at it, and in the help sheet\n * that lists it. The three drift - the sheet promises a key the listener no\n * longer answers, the palette hints one that was rebound - and nothing says\n * so. Here a command is declared once, `{ id, label, keys, run }`, by the\n * component that owns what it does, for as long as that component is mounted.\n *\n * There is one list per window, not one per provider, because there is one\n * keyboard per window. Two lists would be two listeners on the same keys,\n * which is exactly the conflict this exists to catch - so the list is the\n * module itself, and a command can be declared from anywhere without a\n * provider above it.\n *\n * What the list decides:\n *\n *   - **Sequences.** `G D` is G, then D within a second and a half. A key that\n *     does not continue the sequence ends it and does nothing else: a `g`\n *     pressed by mistake should not turn the next keystroke into a jump.\n *   - **Where a key is answered.** Not in a field someone is typing in, unless\n *     the command says it belongs there. A plain key - one without Mod, Ctrl\n *     or Alt - is not answered inside a dialog, a menu, a listbox or a tree\n *     either, which own their letters, nor Enter and Space on whatever has the\n *     focus, which they press. A command declared `within` an element answers\n *     only while the focus is inside it, and it wins over the rest of the\n *     application there.\n *   - **Conflicts.** Two commands on the same keys in the same place, or one\n *     on a prefix of the other's sequence, cannot both work. The one declared\n *     first keeps the keys - mounted earlier, or earlier in the tree when\n *     mounted together, so a shell's own commands outrank a screen's - and the\n *     other loses them in the keyboard, in the palette's hint and in the sheet\n *     alike, and the console says which.\n */\n\nexport interface Command {\n  /** Stable from one session to the next: a rebinding is stored against it. */\n  id: string\n  /** What the palette shows and the sheet lists, in the product's words. */\n  label: string\n  /** The heading it is listed under, in the palette and in the sheet. */\n  group?: string\n  /** Drawn at the start of its palette row. */\n  icon?: ReactNode\n  /** The keys, as `Mod+K` or `G D`. Several are alternatives. */\n  keys?: string | readonly string[]\n  /**\n   * What it does. Leave it out for keys something else already answers -\n   * Escape closing a dialog - which then appear in the sheet and take part in\n   * the conflicts, but are not run from here.\n   */\n  run?: () => void\n  /** Declared but not answering now. The sheet still lists its keys. */\n  enabled?: boolean\n  /**\n   * Fire even in a field someone is typing in. For a key that cannot be\n   * typing - one with Mod, Ctrl or Alt, Escape, a function key - and that\n   * belongs wherever the person is: saving, the palette. A key a field uses\n   * is refused when declared, because it would be taken from every field in\n   * the application.\n   */\n  whileTyping?: boolean\n  /** Answer only while the focus is inside this element. */\n  within?: RefObject<Element | null>\n}\n\n/** A command as the palette and the sheet read it. */\nexport interface ListedCommand {\n  id: string\n  label: string\n  group?: string\n  icon?: ReactNode\n  /** The keys it answers to now, in the line's spelling: after a rebinding,\n   * and without any it lost to a conflict. */\n  keys: string[]\n  /** Present when it can be run from a list - it has something to run, it is\n   * enabled, and it is not tied to where the focus is. The palette lists\n   * exactly these. */\n  run?: () => void\n}\n\n/** Two commands on one set of keys, as the console reports it. */\nexport interface Conflict {\n  /** The keys that were lost. */\n  keys: string\n  /** The command that lost them. */\n  lost: string\n  /** The keys that kept them: the same, or one a prefix of the other. */\n  against: string\n  /** The command that kept them. */\n  kept: string\n}\n\n/** How long a sequence waits for its next key. Long enough not to hurry\n * anyone; short enough that a forgotten `g` cannot turn a later keystroke\n * into a jump. */\nconst SEQUENCE_WINDOW = 1500\n\n/** Roles that own the plain keys pressed inside them: a dialog is a place of\n * its own, and a menu, a listbox or a tree types ahead. */\nconst OWNS_PLAIN_KEYS =\n  '[role=\"dialog\"], [role=\"alertdialog\"], [role=\"menu\"], [role=\"menubar\"], [role=\"listbox\"], [role=\"tree\"], [role=\"treegrid\"]'\n\ninterface Registration {\n  commands: readonly Command[]\n  /** What the lists show of these commands. When it has not changed, a new\n   * render only hands over fresh handlers and nobody re-renders. */\n  signature: string\n}\n\ninterface Placed {\n  token: number\n  index: number\n  command: Command\n  /** The keys in the line's spelling. */\n  keys: string\n  steps: Stroke[]\n  /** The element it answers inside, or `null` for the whole window. */\n  scope: Element | null\n}\n\nconst registrations = new Map<number, Registration>()\nlet nextToken = 0\nlet version = 0\nlet keymap: Record<string, readonly string[]> = {}\nconst listeners = new Set<() => void>()\nconst parsed = new Map<string, Stroke[]>()\nconst refIds = new WeakMap<object, number>()\nlet nextRefId = 0\n\nlet sorted: { version: number; entries: [number, Registration][] } = { version: -1, entries: [] }\n\n/** The registrations in the order of the tree they were declared in. */\nfunction ordered(): [number, Registration][] {\n  if (sorted.version !== version) {\n    sorted = { version, entries: [...registrations].sort(([left], [right]) => left - right) }\n  }\n  return sorted.entries\n}\n\nfunction stepsOf(keys: string): Stroke[] {\n  let steps = parsed.get(keys)\n  if (steps === undefined) {\n    steps = parseKeys(keys)\n    parsed.set(keys, steps)\n  }\n  return steps\n}\n\n/** The keys a command is declared with, or the ones it was rebound to. */\nfunction declaredKeys(command: Command): readonly string[] {\n  const rebound = keymap[command.id]\n  if (rebound !== undefined) return rebound\n  if (command.keys === undefined) return []\n  return typeof command.keys === 'string' ? [command.keys] : command.keys\n}\n\nfunction refId(ref: object | undefined): number {\n  if (ref === undefined) return -1\n  let id = refIds.get(ref)\n  if (id === undefined) {\n    id = nextRefId++\n    refIds.set(ref, id)\n  }\n  return id\n}\n\nfunction signatureOf(commands: readonly Command[]): string {\n  return commands\n    .map((command) =>\n      [\n        command.id,\n        command.label,\n        command.group ?? '',\n        declaredKeys(command).join('|'),\n        command.enabled === false ? 0 : 1,\n        command.whileTyping ? 1 : 0,\n        command.run ? 1 : 0,\n        refId(command.within),\n      ].join('\\u0000'),\n    )\n    .join('\\u0001')\n}\n\n/** Refuses what cannot work, when it is declared rather than when it is\n * pressed: a key that does not parse never fires, and nobody would know. */\nfunction validate(commands: readonly Command[]): void {\n  for (const command of commands) {\n    const keys = command.keys === undefined ? [] : typeof command.keys === 'string' ? [command.keys] : command.keys\n    for (const written of keys) {\n      const steps = stepsOf(written)\n      if (command.whileTyping && steps.some(typesInField)) {\n        throw new Error(\n          `The command \\`${command.id}\\` fires while typing on \\`${written}\\`, which a field uses to type. ` +\n            'Only a key with Mod, Ctrl or Alt, Escape or a function key can fire into a field.',\n        )\n      }\n    }\n  }\n}\n\n/** Whether the steps begin with what has been typed. */\nfunction startsWith(steps: Stroke[], typed: Stroke[]): boolean {\n  return steps.length >= typed.length && typed.every((stroke, index) => sameStroke(stroke, steps[index]!))\n}\n\n/** Every binding in the window, in the order declared, with the ones lost to\n * a conflict set aside. */\nfunction place(): { kept: Placed[]; disabled: Placed[]; conflicts: Conflict[] } {\n  const kept: Placed[] = []\n  const disabled: Placed[] = []\n  const conflicts: Conflict[] = []\n\n  for (const [token, registration] of ordered()) {\n    registration.commands.forEach((command, index) => {\n      const scope = command.within === undefined ? null : command.within.current\n      // Declared inside an element that is not on the page: there is nowhere\n      // for it to answer.\n      if (command.within !== undefined && scope === null) return\n\n      for (const written of declaredKeys(command)) {\n        const steps = stepsOf(written)\n        const binding: Placed = { token, index, command, keys: steps.map(formatStroke).join(' '), steps, scope }\n        if (command.enabled === false) {\n          disabled.push(binding)\n          continue\n        }\n        const rival = kept.find(\n          (other) =>\n            other.scope === scope && (startsWith(other.steps, binding.steps) || startsWith(binding.steps, other.steps)),\n        )\n        if (rival) {\n          conflicts.push({ keys: binding.keys, lost: command.id, against: rival.keys, kept: rival.command.id })\n          continue\n        }\n        kept.push(binding)\n      }\n    })\n  }\n\n  return { kept, disabled, conflicts }\n}\n\ninterface Snapshot {\n  version: number\n  list: ListedCommand[]\n  conflicts: Conflict[]\n}\n\nlet snapshot: Snapshot = { version: -1, list: [], conflicts: [] }\n\nfunction read(): Snapshot {\n  if (snapshot.version === version) return snapshot\n  const { kept, disabled, conflicts } = place()\n  const keysOf = (token: number, index: number) =>\n    [...kept, ...disabled].filter((binding) => binding.token === token && binding.index === index).map((binding) => binding.keys)\n\n  const seen = new Set<string>()\n  const list: ListedCommand[] = []\n  for (const [token, registration] of ordered()) {\n    registration.commands.forEach((command, index) => {\n      // The same command declared by two mounted copies of one component is\n      // one line in a list.\n      if (seen.has(command.id)) return\n      seen.add(command.id)\n      const runnable = command.run !== undefined && command.enabled !== false && command.within === undefined\n      list.push({\n        id: command.id,\n        label: command.label,\n        group: command.group,\n        icon: command.icon,\n        keys: keysOf(token, index),\n        run: runnable ? () => registrations.get(token)?.commands[index]?.run?.() : undefined,\n      })\n    })\n  }\n\n  snapshot = { version, list, conflicts }\n  return snapshot\n}\n\nlet pending: { strokes: Stroke[]; timer: ReturnType<typeof setTimeout> } | null = null\n\nfunction dropPending(): void {\n  if (pending === null) return\n  clearTimeout(pending.timer)\n  pending = null\n}\n\n/** How deep an element sits, so the innermost place a key is declared in\n * answers it first. The whole window is shallower than anything in it. */\nfunction depthOf(element: Element | null): number {\n  let depth = -1\n  for (let node = element; node !== null; node = node.parentElement) depth++\n  return depth\n}\n\n/** Whether a binding answers this keystroke, landing where it landed. */\nfunction answers(binding: Placed, target: Element | null, stroke: Stroke): boolean {\n  const { command, scope } = binding\n  if (scope !== null && (target === null || !scope.contains(target))) return false\n  if (isTypingTarget(target) && (!command.whileTyping || typesInField(stroke))) return false\n\n  if (!holdsCommand(stroke)) {\n    const surface = target?.closest(OWNS_PLAIN_KEYS) ?? null\n    // Unless the command was declared inside that very place.\n    if (surface !== null && (scope === null || !surface.contains(scope))) return false\n    const presses = stroke.key === 'Enter' || stroke.key === 'Space'\n    const nothingFocused = target === null || target === document.body || target === document.documentElement\n    if (presses && scope === null && !nothingFocused) return false\n  }\n  return true\n}\n\nfunction onKeyDown(event: KeyboardEvent): void {\n  if (event.defaultPrevented) return\n  // A key held down while a sequence waits is the same key, not the next one.\n  if (event.repeat && pending !== null) return\n  const stroke = strokeOf(event)\n  if (stroke === null) return\n\n  const typed = pending === null ? [stroke] : [...pending.strokes, stroke]\n  dropPending()\n\n  const target = event.target instanceof Element ? event.target : null\n  const live = place().kept.filter(\n    (binding) => binding.command.run !== undefined && answers(binding, target, stroke),\n  )\n  const depths = [...new Set(live.map((binding) => depthOf(binding.scope)))].sort((a, b) => b - a)\n\n  for (const depth of depths) {\n    const here = live.filter((binding) => depthOf(binding.scope) === depth)\n    const exact = here.find((binding) => binding.steps.length === typed.length && startsWith(binding.steps, typed))\n    if (exact) {\n      event.preventDefault()\n      registrations.get(exact.token)?.commands[exact.index]?.run?.()\n      return\n    }\n    if (here.some((binding) => binding.steps.length > typed.length && startsWith(binding.steps, typed))) {\n      event.preventDefault()\n      pending = { strokes: typed, timer: setTimeout(dropPending, SEQUENCE_WINDOW) }\n      return\n    }\n  }\n  // Nothing answers. A key that ended a sequence is spent on ending it.\n}\n\nlet listening = false\nlet reportScheduled = false\nconst reported = new Set<string>()\n\n/** Says what lost its keys, once per conflict - after the commit settles, so\n * a strict-mode remount does not report the same thing twice. */\nfunction scheduleReport(): void {\n  if (reportScheduled) return\n  reportScheduled = true\n  queueMicrotask(() => {\n    reportScheduled = false\n    const current = new Set<string>()\n    for (const conflict of read().conflicts) {\n      const key = `${conflict.lost}\\u0000${conflict.keys}\\u0000${conflict.kept}\\u0000${conflict.against}`\n      current.add(key)\n      if (reported.has(key)) continue\n      console.error(\n        `\\`${conflict.lost}\\` cannot answer to \\`${conflict.keys}\\`: \\`${conflict.kept}\\` already answers to ` +\n          `\\`${conflict.against}\\` in the same place, and was declared first.`,\n      )\n    }\n    reported.clear()\n    for (const key of current) reported.add(key)\n  })\n}\n\nfunction changed(): void {\n  version++\n  if (registrations.size > 0 && !listening && typeof document !== 'undefined') {\n    document.addEventListener('keydown', onKeyDown)\n    listening = true\n  } else if (registrations.size === 0 && listening) {\n    document.removeEventListener('keydown', onKeyDown)\n    listening = false\n    dropPending()\n  }\n  for (const listener of listeners) listener()\n  scheduleReport()\n}\n\nfunction subscribe(listener: () => void): () => void {\n  listeners.add(listener)\n  return () => {\n    listeners.delete(listener)\n  }\n}\n\n/**\n * Declare commands for as long as the calling component is mounted.\n *\n * The handlers may be written inline: each render hands over the newest ones,\n * and nothing is re-declared - and no list re-renders - unless something a\n * list shows has changed.\n */\nexport function useCommands(commands: readonly Command[]): void {\n  const latest = useRef(commands)\n  const token = useRef<number | null>(null)\n  // The place in the list is taken at the first render, not when the effect\n  // runs. Renders go in the order of the tree - a parent before its children,\n  // siblings in turn - while effects run children first, which would list a\n  // shell's own commands after everything inside it and hand a conflict to\n  // whichever component happened to be deepest.\n  const [place] = useState(() => nextToken++)\n\n  useLayoutEffect(() => {\n    latest.current = commands\n    if (token.current === null) return\n    const registration = registrations.get(token.current)\n    if (registration === undefined) return\n    const signature = signatureOf(commands)\n    if (signature === registration.signature) {\n      registration.commands = commands\n      return\n    }\n    validate(commands)\n    registrations.set(token.current, { commands, signature })\n    changed()\n  })\n\n  useLayoutEffect(() => {\n    const commands = latest.current\n    validate(commands)\n    registrations.set(place, { commands, signature: signatureOf(commands) })\n    token.current = place\n    changed()\n    return () => {\n      registrations.delete(place)\n      token.current = null\n      changed()\n    }\n  }, [place])\n}\n\n/** Declare one command for as long as the calling component is mounted. */\nexport function useCommand(command: Command): void {\n  useCommands([command])\n}\n\n/** Every declared command, in the order declared, for the palette and the\n * sheet. Re-renders when what they show changes. */\nexport function useCommandList(): ListedCommand[] {\n  return useSyncExternalStore(subscribe, () => read().list, () => read().list)\n}\n\n/** The keys one command answers to now - for the hint on a button that does\n * the same, or its `aria-keyshortcuts`. */\nexport function useCommandKeys(id: string): string[] {\n  return useCommandList().find((command) => command.id === id)?.keys ?? []\n}\n\n/** The conflicts in the window now, for a settings screen that rebinds keys\n * to warn about before saving - or for a test that says there are none. */\nexport function useCommandConflicts(): Conflict[] {\n  return useSyncExternalStore(subscribe, () => read().conflicts, () => read().conflicts)\n}\n\n/** Run a command by its id. False when nothing by that id can be run. */\nexport function runCommand(id: string): boolean {\n  for (const [, registration] of ordered()) {\n    const command = registration.commands.find((candidate) => candidate.id === id)\n    if (command?.run !== undefined && command.enabled !== false) {\n      command.run()\n      return true\n    }\n  }\n  return false\n}\n\n/**\n * Rebind keys: the person's changes, by command id, as the product stores\n * them. An empty list unbinds a command. Replaces whatever was set before.\n *\n * What is stored is the person's data rather than code, so a shortcut in it\n * that does not parse is reported and skipped rather than thrown: a settings\n * file written by an older version should not take the application down.\n */\nexport function setKeymap(rebound: Record<string, string | readonly string[]>): void {\n  const next: Record<string, readonly string[]> = {}\n  for (const [id, keys] of Object.entries(rebound)) {\n    const list = typeof keys === 'string' ? [keys] : keys\n    try {\n      list.forEach(stepsOf)\n      next[id] = list\n    } catch (error) {\n      console.error(`The keys rebound for \\`${id}\\` were skipped: ${(error as Error).message}`)\n    }\n  }\n  keymap = next\n  changed()\n}\n\n/** A label cut into words, whatever separates them. */\nconst words = (text: string) => text.split(/[^\\p{L}\\p{N}]+/u).filter((word) => word !== '')\n\n/** How well a label answers the terms, best first; `null` when it does not. */\nfunction rank(label: string, terms: string[]): number | null {\n  const text = label.toLowerCase()\n  if (!terms.every((term) => text.includes(term))) return null\n  if (text.startsWith(terms.join(' '))) return 0\n  const starts = words(text)\n  if (terms.every((term) => starts.some((word) => word.startsWith(term)))) return 1\n  return 2\n}\n\n/**\n * The commands whose label answers the query, best first.\n *\n * Every term has to be in the label, in any order - \"theme dark\" finds\n * \"Switch to the dark theme\". A label that begins with the query comes first,\n * one where every term begins a word next, one that merely contains the\n * letters last: \"cal\" is the Calendar long before it is \"Critical\". The sort\n * is stable, so equally good matches keep their order and the list does not\n * shuffle under the cursor as the query grows. An empty query matches all.\n */\nexport function matchCommands<T extends { label: string }>(query: string, commands: readonly T[]): T[] {\n  const terms = words(query.toLowerCase())\n  if (terms.length === 0) return [...commands]\n  return commands\n    .map((command) => ({ command, rank: rank(command.label, terms) }))\n    .filter((entry): entry is { command: T; rank: number } => entry.rank !== null)\n    .sort((left, right) => left.rank - right.rank)\n    .map((entry) => entry.command)\n}\n\n/** Commands under their headings, in the order the headings first appear. */\nexport function groupCommands<T extends { group?: string }>(\n  commands: readonly T[],\n): { group: string | undefined; commands: T[] }[] {\n  const groups: { group: string | undefined; commands: T[] }[] = []\n  for (const command of commands) {\n    const found = groups.find((entry) => entry.group === command.group)\n    if (found) found.commands.push(command)\n    else groups.push({ group: command.group, commands: [command] })\n  }\n  return groups\n}\n"
         }
       ]
     },
@@ -823,7 +841,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/dialog.json",
@@ -845,7 +863,7 @@
       "description": "The same list of actions as Menu, opened the other way round: by right click, or by a long press on a touch screen, over an *area* rather than from a button. So the trigger is not a control - it is the region the menu belongs to, a row, a canvas, a file tile - and it renders a `<div>`.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/layer.json",
@@ -866,7 +884,7 @@
       "title": "CopyButton",
       "description": "Whatever a product shows in a panel - code, a payload, a log, one side of a comparison - somebody eventually wants to take it away, and the button that lets them is written again every time with the same three things missed.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -884,7 +902,7 @@
       "title": "Copyable",
       "description": "Any text that someone will eventually want to copy - an id, a path, a hash, a token - copied with one click. The rule comes from nitid: if a value is worth showing, it is worth being able to take away, and selecting a monospaced id by hand is a small daily tax.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -902,7 +920,7 @@
       "title": "DatePicker",
       "description": "The trigger is a button rather than a text input, and that is the decision worth stating. A typable date field has to answer \"what does `03/04/26` mean\" in a locale it cannot be sure of, and it answers wrong for half the world; a button showing the date spelled out has no such question. Where typing genuinely matters - a birth date, forty years back - the calendar is the wrong control anyway and a product should reach for a plain field.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar.json",
@@ -925,7 +943,7 @@
       "title": "DateRangePicker",
       "description": "The interesting part is the state between them. After the first click there is a start and no end, and that is not an incomplete range to be hidden or a range of one day - it is the normal middle of the interaction, and the calendar has to show it: the first day marked, the days under the pointer shading as the reader moves, the popup staying open. Products that skip it end up with a picker that seems to do nothing until the second click.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/calendar.json",
@@ -950,7 +968,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/layer.json"
@@ -960,7 +978,7 @@
           "path": "ui/dialog.tsx",
           "target": "@ui/dialog.tsx",
           "type": "registry:ui",
-          "content": "import { useRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { Dialog as Base } from '@base-ui/react/dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from 'dowel-ui'\nimport { LayerProvider } from './layer'\n\n/*\n * Dialog.\n *\n * The parts are exposed rather than wrapped in one component with `title` and\n * `footer` props. The products that did it the other way ended up passing\n * `footer={<>…</>}` within a week, which is a slot with extra steps - and a\n * dialog that owns its own close button owns a word for it, which is a word\n * the product cannot translate.\n *\n * Behaviour is Base UI's: the focus trap, the return of focus to whatever\n * opened it, `Escape`, the scroll lock, and the `aria-labelledby` that ties\n * the popup to its own title. None of that is worth rewriting, and all of it\n * is wrong in the ways nobody notices until someone is navigating by keyboard.\n *\n * What is ours is the clothes, the enter and leave - the popup arrives with\n * `data-open` and leaves with `data-closed`, both of which Base UI sets, so\n * the animation is a class list rather than a state machine - and the anatomy.\n *\n * **Only the body scrolls.** The popup is a column of three parts: a header\n * that stays at the top, a body that takes what height is left and scrolls\n * inside it, and the actions pinned to the bottom. The popup used to scroll as\n * a whole, and a dialog with more in it than the window is tall took its own\n * buttons with it: in kilna, at a 1280x720 window, \"Save\" on the style editor\n * stood 137px below the bottom edge, and the only way to reach it was to\n * scroll a form to its end to find out whether it had one. The popup carries\n * no padding of its own now - each part does - so the body's scroll runs edge\n * to edge and the header and actions stay whole while it moves.\n *\n * **A popup opened inside rides above it.** The content sits in a layer\n * (`layer.tsx`): a select, a menu or a date picker in a dialog portals into a\n * host raised one rung above the modal, so it is neither clipped by the\n * body's scroll nor drawn underneath the dialog that opened it.\n */\n\nexport const dialogPopupVariants = cva(\n  [\n    'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n    'flex flex-col overflow-hidden',\n    'rounded-xl border border-line bg-raise text-text shadow-float',\n    'focus-visible:outline-none',\n    // Never taller than the window. The width was capped from the start and\n    // the height was not, so a dialog taller than the window centred itself\n    // and hung off both ends. The cap is on the column; the body is what\n    // gives way.\n    'max-h-[calc(100dvh-2rem)]',\n    // The enter and the leave. `duration-*` reads the token directly because\n    // Tailwind's own utility takes a literal number.\n    '[transition:opacity_var(--duration-base)_var(--ease-out),transform_var(--duration-base)_var(--ease-out)]',\n    'data-[closed]:scale-[0.98] data-[closed]:opacity-0',\n    'data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'w-[min(24rem,calc(100vw-2rem))]',\n        md: 'w-[min(28rem,calc(100vw-2rem))]',\n        lg: 'w-[min(40rem,calc(100vw-2rem))]',\n        // An editor: a form wide enough for its fields to sit side by side,\n        // or a row of choices to fit on one line rather than three.\n        xl: 'w-[min(48rem,calc(100vw-2rem))]',\n        // The window, less a margin that says it is still a dialog. The\n        // height is set rather than capped, so the body fills it even when\n        // there is little in it - a picker or a preview should not jump in\n        // size as its content loads.\n        full: 'h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\n/** The root. Controlled with `open` and `onOpenChange`, or left to manage\n * itself around a `Dialog.Trigger`. */\nexport const Dialog = Base.Root\n\n/** What opens it. Give it `render` to use your own button. */\nexport const DialogTrigger = Base.Trigger\n\n/** What closes it - the same, for a cancel button or an X. */\nexport const DialogClose = Base.Close\n\n/** The scrim. Dark because a modal is a modal: what is behind it is out of\n * reach, and saying so with contrast is the only thing that reads at a\n * glance. */\nexport function DialogBackdrop({ className, ...props }: Base.Backdrop.Props) {\n  return (\n    <Base.Backdrop\n      className={cn(\n        'fixed inset-0 bg-black/50 backdrop-blur-[2px]',\n        '[z-index:var(--z-overlay)]',\n        '[transition:opacity_var(--duration-base)_var(--ease-out)]',\n        'data-[closed]:opacity-0 data-[starting-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface DialogPopupProps\n  extends Base.Popup.Props,\n    VariantProps<typeof dialogPopupVariants> {\n  /** Where to portal to. Defaults to the document body, which is what keeps\n   * the popup from being clipped by whatever it was opened from. Pass an\n   * element to put it somewhere else - inside a dialog that is already open,\n   * or into a container being screenshotted. */\n  container?: Base.Portal.Props['container']\n  /** Whether to draw the scrim. On by default, and it should stay on for\n   * anything a person actually uses: the dim is what says the page behind is\n   * out of reach. Turn it off where the popup is shown alongside other things\n   * on purpose - a component gallery, a screenshot - because a scrim is\n   * `position: fixed` and covers everything, not only its own container. */\n  backdrop?: boolean\n}\n\n/** The dialog itself. Portalled, so it is not clipped by whatever it was\n * opened from. Put a `DialogHeader`, a `DialogBody` and `DialogActions`\n * inside it. */\nexport function DialogPopup({\n  size,\n  container,\n  backdrop = true,\n  className,\n  children,\n  ...props\n}: DialogPopupProps) {\n  const portal = useRef<HTMLDivElement>(null)\n\n  return (\n    <Base.Portal ref={portal} container={container}>\n      {backdrop && <DialogBackdrop />}\n      <Base.Popup\n        className={cn(dialogPopupVariants({ size }), '[z-index:var(--z-modal)]', className)}\n        {...props}\n      >\n        <LayerProvider above=\"modal\" mount={portal}>{children}</LayerProvider>\n      </Base.Popup>\n    </Base.Portal>\n  )\n}\n\n/*\n * The three parts. Plain elements rather than Base UI parts, because what\n * they do is layout: which one stays and which one scrolls. That is also why\n * the drawer and the confirm dialog take them from here - the anatomy is one\n * decision, and three copies of it would be three answers by the next\n * version.\n */\n\nexport interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Beside the title, at the end of the line: a close button, a menu. The\n   * title and description wrap under themselves rather than under it. */\n  action?: ReactNode\n}\n\n/** The top of the popup: the title, the line under it, and an action beside\n * them. It stays put while the body scrolls. */\nexport function DialogHeader({ action, className, children, ...props }: DialogHeaderProps) {\n  return (\n    <div className={cn('flex shrink-0 items-start gap-3 px-5 pt-5 pb-4', className)} {...props}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      {action !== undefined && <div className=\"-mt-1 -mr-1.5 flex shrink-0 items-center gap-1\">{action}</div>}\n    </div>\n  )\n}\n\n/** The part that scrolls. It takes the height the header and the actions\n * leave, and only it moves when there is more than fits. */\nexport function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        'min-h-0 flex-1 overflow-y-auto overscroll-contain px-5',\n        // First or last in the popup, it takes the padding the missing part\n        // would have given - a dialog with no header still has a top edge.\n        'first:pt-5 last:pb-5',\n        // A box that scrolls can be focused, and the popup clips what is\n        // outside it: the ring is drawn inside.\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /** At the other end of the row from the answer: the action that is not the\n   * answer to the dialog's question - \"Delete\" on an editor whose question is\n   * \"Save?\". Kept apart so it is not pressed on the way to \"Save\". */\n  start?: ReactNode\n}\n\n/** Where the actions go, pinned to the bottom. Right-aligned, because the\n * primary action of a dialog belongs where the eye leaves the sentence. */\nexport function DialogActions({ start, className, children, ...props }: DialogActionsProps) {\n  return (\n    <div\n      className={cn('mt-auto flex shrink-0 items-center justify-end gap-2 px-5 pt-4 pb-5', className)}\n      {...props}\n    >\n      {start !== undefined && <div className=\"mr-auto flex items-center gap-2\">{start}</div>}\n      {children}\n    </div>\n  )\n}\n\n/** The heading. Base UI points the popup's `aria-labelledby` at it, so a\n * dialog with one is named for a screen reader without anyone arranging it. */\nexport function DialogTitle({ className, ...props }: Base.Title.Props) {\n  return <Base.Title className={cn('text-base font-semibold', className)} {...props} />\n}\n\n/** The line under the heading, and the popup's `aria-describedby`. */\nexport function DialogDescription({ className, ...props }: Base.Description.Props) {\n  return <Base.Description className={cn('mt-1 text-sm text-dim', className)} {...props} />\n}\n"
+          "content": "import { useRef, type ComponentProps, type HTMLAttributes, type ReactNode } from 'react'\nimport { Dialog as Base } from '@base-ui/react/dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from 'dowel-ui'\nimport { LayerProvider } from './layer'\n\n/*\n * Dialog.\n *\n * The parts are exposed rather than wrapped in one component with `title` and\n * `footer` props. The products that did it the other way ended up passing\n * `footer={<>…</>}` within a week, which is a slot with extra steps - and a\n * dialog that owns its own close button owns a word for it, which is a word\n * the product cannot translate.\n *\n * Behaviour is Base UI's: the focus trap, the return of focus to whatever\n * opened it, `Escape`, the scroll lock, and the `aria-labelledby` that ties\n * the popup to its own title. None of that is worth rewriting, and all of it\n * is wrong in the ways nobody notices until someone is navigating by keyboard.\n *\n * What is ours is the clothes, the enter and leave - the popup arrives with\n * `data-open` and leaves with `data-closed`, both of which Base UI sets, so\n * the animation is a class list rather than a state machine - and the anatomy.\n *\n * **Only the body scrolls.** The popup is a column of three parts: a header\n * that stays at the top, a body that takes what height is left and scrolls\n * inside it, and the actions pinned to the bottom. The popup used to scroll as\n * a whole, and a dialog with more in it than the window is tall took its own\n * buttons with it: in kilna, at a 1280x720 window, \"Save\" on the style editor\n * stood 137px below the bottom edge, and the only way to reach it was to\n * scroll a form to its end to find out whether it had one. The popup carries\n * no padding of its own now - each part does - so the body's scroll runs edge\n * to edge and the header and actions stay whole while it moves.\n *\n * **A popup opened inside rides above it.** The content sits in a layer\n * (`layer.tsx`): a select, a menu or a date picker in a dialog portals into a\n * host raised one rung above the modal, so it is neither clipped by the\n * body's scroll nor drawn underneath the dialog that opened it.\n */\n\nexport const dialogPopupVariants = cva(\n  [\n    'fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',\n    'flex flex-col overflow-hidden',\n    'rounded-xl border border-line bg-raise text-text shadow-float',\n    'focus-visible:outline-none',\n    // Never taller than the window. The width was capped from the start and\n    // the height was not, so a dialog taller than the window centred itself\n    // and hung off both ends. The cap is on the column; the body is what\n    // gives way.\n    'max-h-[calc(100dvh-2rem)]',\n    // The enter and the leave. `duration-*` reads the token directly because\n    // Tailwind's own utility takes a literal number.\n    '[transition:opacity_var(--duration-base)_var(--ease-out),transform_var(--duration-base)_var(--ease-out)]',\n    'data-[closed]:scale-[0.98] data-[closed]:opacity-0',\n    'data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'w-[min(24rem,calc(100vw-2rem))]',\n        md: 'w-[min(28rem,calc(100vw-2rem))]',\n        lg: 'w-[min(40rem,calc(100vw-2rem))]',\n        // An editor: a form wide enough for its fields to sit side by side,\n        // or a row of choices to fit on one line rather than three.\n        xl: 'w-[min(48rem,calc(100vw-2rem))]',\n        // The window, less a margin that says it is still a dialog. The\n        // height is set rather than capped, so the body fills it even when\n        // there is little in it - a picker or a preview should not jump in\n        // size as its content loads.\n        full: 'h-[calc(100dvh-2rem)] w-[calc(100vw-2rem)]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\n/** The root. Controlled with `open` and `onOpenChange`, or left to manage\n * itself around a `Dialog.Trigger`. */\nexport const Dialog = Base.Root\n\n/** What opens it. Give it `render` to use your own button. */\nexport const DialogTrigger = Base.Trigger\n\n/** What closes it - the same, for a cancel button or an X. */\nexport const DialogClose = Base.Close\n\n/** The scrim. Dark because a modal is a modal: what is behind it is out of\n * reach, and saying so with contrast is the only thing that reads at a\n * glance. */\nexport function DialogBackdrop({ className, ...props }: Base.Backdrop.Props) {\n  return (\n    <Base.Backdrop\n      className={cn(\n        'fixed inset-0 bg-black/50 backdrop-blur-[2px]',\n        '[z-index:var(--z-overlay)]',\n        '[transition:opacity_var(--duration-base)_var(--ease-out)]',\n        'data-[closed]:opacity-0 data-[starting-style]:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface DialogPopupProps\n  extends Base.Popup.Props,\n    VariantProps<typeof dialogPopupVariants> {\n  /** Where to portal to. Defaults to the document body, which is what keeps\n   * the popup from being clipped by whatever it was opened from. Pass an\n   * element to put it somewhere else - inside a dialog that is already open,\n   * or into a container being screenshotted. */\n  container?: Base.Portal.Props['container']\n  /** Whether to draw the scrim. On by default, and it should stay on for\n   * anything a person actually uses: the dim is what says the page behind is\n   * out of reach. Turn it off where the popup is shown alongside other things\n   * on purpose - a component gallery, a screenshot - because a scrim is\n   * `position: fixed` and covers everything, not only its own container. */\n  backdrop?: boolean\n}\n\n/** The dialog itself. Portalled, so it is not clipped by whatever it was\n * opened from. Put a `DialogHeader`, a `DialogBody` and `DialogActions`\n * inside it. */\nexport function DialogPopup({\n  size,\n  container,\n  backdrop = true,\n  className,\n  children,\n  ...props\n}: DialogPopupProps) {\n  const portal = useRef<HTMLDivElement>(null)\n\n  return (\n    <Base.Portal ref={portal} container={container}>\n      {backdrop && <DialogBackdrop />}\n      <Base.Popup\n        className={cn(dialogPopupVariants({ size }), '[z-index:var(--z-modal)]', className)}\n        {...props}\n      >\n        <LayerProvider above=\"modal\" mount={portal}>{children}</LayerProvider>\n      </Base.Popup>\n    </Base.Portal>\n  )\n}\n\n/*\n * The three parts. Plain elements rather than Base UI parts, because what\n * they do is layout: which one stays and which one scrolls. That is also why\n * the drawer and the confirm dialog take them from here - the anatomy is one\n * decision, and three copies of it would be three answers by the next\n * version.\n */\n\nexport interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Beside the title, at the end of the line: a close button, a menu. The\n   * title and description wrap under themselves rather than under it. */\n  action?: ReactNode\n}\n\n/** The top of the popup: the title, the line under it, and an action beside\n * them. It stays put while the body scrolls. */\nexport function DialogHeader({ action, className, children, ...props }: DialogHeaderProps) {\n  return (\n    <div className={cn('flex shrink-0 items-start gap-3 px-5 pt-5 pb-4', className)} {...props}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      {action !== undefined && <div className=\"-mt-1 -mr-1.5 flex shrink-0 items-center gap-1\">{action}</div>}\n    </div>\n  )\n}\n\n/** The part that scrolls. It takes the height the header and the actions\n * leave, and only it moves when there is more than fits. It takes a ref, for\n * a dialog that opens with the focus on what it says rather than on a button. */\nexport function DialogBody({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'min-h-0 flex-1 overflow-y-auto overscroll-contain px-5',\n        // First or last in the popup, it takes the padding the missing part\n        // would have given - a dialog with no header still has a top edge.\n        'first:pt-5 last:pb-5',\n        // A box that scrolls can be focused, and the popup clips what is\n        // outside it: the ring is drawn inside.\n        'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /** At the other end of the row from the answer: the action that is not the\n   * answer to the dialog's question - \"Delete\" on an editor whose question is\n   * \"Save?\". Kept apart so it is not pressed on the way to \"Save\". */\n  start?: ReactNode\n}\n\n/** Where the actions go, pinned to the bottom. Right-aligned, because the\n * primary action of a dialog belongs where the eye leaves the sentence. */\nexport function DialogActions({ start, className, children, ...props }: DialogActionsProps) {\n  return (\n    <div\n      className={cn('mt-auto flex shrink-0 items-center justify-end gap-2 px-5 pt-4 pb-5', className)}\n      {...props}\n    >\n      {start !== undefined && <div className=\"mr-auto flex items-center gap-2\">{start}</div>}\n      {children}\n    </div>\n  )\n}\n\n/** The heading. Base UI points the popup's `aria-labelledby` at it, so a\n * dialog with one is named for a screen reader without anyone arranging it. */\nexport function DialogTitle({ className, ...props }: Base.Title.Props) {\n  return <Base.Title className={cn('text-base font-semibold', className)} {...props} />\n}\n\n/** The line under the heading, and the popup's `aria-describedby`. */\nexport function DialogDescription({ className, ...props }: Base.Description.Props) {\n  return <Base.Description className={cn('mt-1 text-sm text-dim', className)} {...props} />\n}\n"
         }
       ]
     },
@@ -987,7 +1005,7 @@
       "description": "The question this answers is \"how did this read before, and how does it read now\" - a version against the one before it, a proposal against what is there, a file against what is on disk. Not a code review: there is no staging, no comment, nothing to accept. It is for looking.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/copy-button.json",
@@ -1009,7 +1027,7 @@
       "description": "The line between one part of a screen and the next. The set already had four of them - in the menu, the select, the context menu and the action bar - and each was written inside the thing it divided, so a screen that wanted a rule between two sections had nothing and reached for a bare `<hr>` or a `div` with a background.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1029,7 +1047,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/dialog.json",
@@ -1050,7 +1068,7 @@
       "title": "DurationField",
       "description": "The alternative is what products keep building: two number boxes labelled \"hours\" and \"minutes\", which means two tab stops, two validations, and a reader who has to divide 90 minutes in their head before typing. Here they write `1h 30m`, or `90m`, or `1.5h`, and it means the same thing.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1071,7 +1089,7 @@
       "description": "Three kinds of nothing, and a product that draws the same panel for all three is telling the reader the wrong thing twice:\n *   **empty** - there is nothing here yet, and that is normal. The panel says   what would be here and offers the one action that makes it appear.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1125,7 +1143,7 @@
       "description": "Every form is the same four parts repeated: a name for the control, the control, sometimes a hint, and sometimes an error. Written by hand each time, they drift - the label loses its `htmlFor`, the hint is a `<div>` no screen reader mentions, the error appears in red and is announced by nothing at all. This is that arrangement, once.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1143,7 +1161,7 @@
       "title": "FileDrop",
       "description": "A place to put files: drag them onto it, or press it and pick them. It takes files and hands them over - it does not upload them. Where they go, with which credentials, retried how - that is the product's transport, and a primitive that owned it would be wrong for every product whose upload does not look like the one it guessed.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1161,7 +1179,7 @@
       "title": "FilterPopover",
       "description": "A text box, a handful of checkboxes - with one way to clear it. The shell only: what goes in the panel is the caller's, since a stage is ticked and a title is typed and the popover has no opinion.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/button.json",
@@ -1183,7 +1201,7 @@
       "description": "The layout jump a loading picture leaves behind is not a styling defect, it is a missing number: the browser has nowhere to put the box until the file arrives and tells it the pixel size, so everything below the picture slides down and back up. `AspectRatio` is that number, given up front by the caller rather than discovered by the browser - a plain box on CSS `aspect-ratio` that reserves its space the instant it is in the tree, and lets any child (an `<img>`, a map, a video) fill it with `size-full`.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1201,7 +1219,7 @@
       "title": "InlineField",
       "description": "A value that is edited where it is shown: click it, type, Enter or leave to keep, Escape to take it back.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/field-draft.json"
@@ -1221,7 +1239,7 @@
       "title": "Input",
       "description": "A single-line field. It is a plain `<input>` with the line's clothes on, so everything a browser gives an input for free - autofill, spellcheck, the right keyboard on a phone, `type=\"email\"` validation - still works.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1255,7 +1273,7 @@
       "title": "JsonViewer",
       "description": "What a product reaches for when it has to show a response, a settings file, a webhook payload - data the reader needs to understand, not edit. The alternative it replaces is `JSON.stringify(value, null, 2)` inside a `<pre>`, which is fine for twenty lines and useless for two hundred: nothing folds, nothing is findable, and the shape of the document is somewhere inside the indentation.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/json-rows.json"
@@ -1275,15 +1293,17 @@
       "title": "Kbd",
       "description": "A key, as printed in a menu or a hint: `Ctrl` `K`. It is a `<kbd>` element because that is what the element is for - a screen reader announces it as keyboard input rather than reading a stray capital letter.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
+      ],
+      "registryDependencies": [
+        "https://lacodda.github.io/dowel/r/shortcut.json"
       ],
-      "registryDependencies": [],
       "files": [
         {
           "path": "ui/kbd.tsx",
           "target": "@ui/kbd.tsx",
           "type": "registry:ui",
-          "content": "import type { HTMLAttributes } from 'react'\nimport { cn } from 'dowel-ui'\n\n/*\n * Kbd.\n *\n * A key, as printed in a menu or a hint: `Ctrl` `K`. It is a `<kbd>` element\n * because that is what the element is for - a screen reader announces it as\n * keyboard input rather than reading a stray capital letter.\n *\n * The platform substitution is the useful part. A shortcut written `Ctrl+K` is\n * wrong on a Mac, where the same shortcut is `⌘K`, and every product either\n * hard-codes one of them or writes the branch again.\n */\n\n/** Whether this machine writes shortcuts the Apple way. */\nfunction isApplePlatform(): boolean {\n  if (typeof navigator === 'undefined') return false\n  return /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent)\n}\n\n/** What a key is called here. `Mod` is the one that differs: command on Apple\n * platforms, control everywhere else. */\nexport function keyLabel(key: string, apple: boolean = isApplePlatform()): string {\n  const shared: Record<string, string> = {\n    Enter: '↵',\n    Escape: 'Esc',\n    ArrowUp: '↑',\n    ArrowDown: '↓',\n    ArrowLeft: '←',\n    ArrowRight: '→',\n    Backspace: '⌫',\n    Tab: '⇥',\n    Space: '␣',\n  }\n  const perPlatform: Record<string, [apple: string, other: string]> = {\n    Mod: ['⌘', 'Ctrl'],\n    Alt: ['⌥', 'Alt'],\n    Shift: ['⇧', 'Shift'],\n  }\n\n  const platform = perPlatform[key]\n  if (platform) return apple ? platform[0] : platform[1]\n  return shared[key] ?? key\n}\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  /** Keys of a shortcut, in order: `['Mod', 'K']`. Given this, the component\n   * writes the separators and the platform's own names. */\n  keys?: string[]\n}\n\nexport function Kbd({ keys, className, children, ...props }: KbdProps) {\n  const cap = cn(\n    'inline-flex min-w-5 items-center justify-center rounded-sm border border-line bg-soft',\n    'px-1 py-0.5 font-mono text-2xs leading-none text-dim',\n  )\n\n  if (!keys) {\n    return (\n      <kbd className={cn(cap, className)} {...props}>\n        {children}\n      </kbd>\n    )\n  }\n\n  return (\n    <span className={cn('inline-flex items-center gap-0.5', className)} {...props}>\n      {keys.map((key) => (\n        <kbd key={key} className={cap}>\n          {keyLabel(key)}\n        </kbd>\n      ))}\n    </span>\n  )\n}\n"
+          "content": "import { Fragment, type HTMLAttributes } from 'react'\nimport { cn } from 'dowel-ui'\nimport { isApplePlatform, parseKeys, strokeParts } from './shortcut'\n\n/*\n * Kbd.\n *\n * A key, as printed in a menu or a hint: `Ctrl` `K`. It is a `<kbd>` element\n * because that is what the element is for - a screen reader announces it as\n * keyboard input rather than reading a stray capital letter.\n *\n * It reads the line's own notation, the one a command is bound with, so what\n * is shown and what is bound are the same string: `Mod+K` is drawn `Ctrl` `K`\n * here and `⌘` `K` on a Mac, and a product that writes the branch itself is\n * a product whose hint is wrong on one of them.\n *\n * A sequence - `G D` - is drawn as its steps with a mark between them, so\n * G-then-D does not read as G-with-D, and two sequences side by side do not\n * read as one of four steps. The mark is `›`, not a word: a word here would be\n * English the product cannot translate, and the notation has no key by that\n * name, so it cannot be mistaken for one.\n */\n\n/** What a key is called on this platform. `Mod` is the one that differs most:\n * command on Apple platforms, control everywhere else. */\nexport function keyLabel(key: string, apple: boolean = isApplePlatform()): string {\n  const shared: Record<string, string> = {\n    Enter: '↵',\n    Escape: 'Esc',\n    ArrowUp: '↑',\n    ArrowDown: '↓',\n    ArrowLeft: '←',\n    ArrowRight: '→',\n    Backspace: '⌫',\n    Delete: 'Del',\n    Tab: '⇥',\n    Space: '␣',\n    PageUp: 'PgUp',\n    PageDown: 'PgDn',\n  }\n  const perPlatform: Record<string, [apple: string, other: string]> = {\n    Mod: ['⌘', 'Ctrl'],\n    Ctrl: ['⌃', 'Ctrl'],\n    Alt: ['⌥', 'Alt'],\n    Shift: ['⇧', 'Shift'],\n  }\n\n  const platform = perPlatform[key]\n  if (platform) return apple ? platform[0] : platform[1]\n  return shared[key] ?? key\n}\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  /** A shortcut in the line's notation - `Mod+K`, `G D`, `?`. Given this, the\n   * component draws each key under this platform's own name. Without it, the\n   * children are the key. */\n  keys?: string\n}\n\nexport function Kbd({ keys, className, children, ...props }: KbdProps) {\n  const cap = cn(\n    'inline-flex min-w-5 items-center justify-center rounded-sm border border-line bg-soft',\n    'px-1 py-0.5 font-mono text-2xs leading-none text-dim',\n  )\n\n  if (keys === undefined) {\n    return (\n      <kbd className={cn(cap, className)} {...props}>\n        {children}\n      </kbd>\n    )\n  }\n\n  const apple = isApplePlatform()\n  return (\n    <span className={cn('inline-flex items-center gap-1', className)} {...props}>\n      {parseKeys(keys, apple).map((stroke, step) => (\n        <Fragment key={step}>\n          {step > 0 && (\n            <span aria-hidden className=\"text-2xs leading-none text-dim\">\n              ›\n            </span>\n          )}\n          <span data-step={step} className=\"inline-flex items-center gap-0.5\">\n            {strokeParts(stroke).map((key) => (\n              <kbd key={key} className={cap}>\n                {keyLabel(key, apple)}\n              </kbd>\n            ))}\n          </span>\n        </Fragment>\n      ))}\n    </span>\n  )\n}\n"
         }
       ]
     },
@@ -1294,7 +1314,7 @@
       "description": "The shape every product builds out of two `<div>`s in a flex row, and the reason it is worth having once: it is a `<dl>`, and the pairing is what a screen reader announces. Two divs read as four unrelated pieces of text - \"Created\", \"2 hours ago\", \"Owner\", \"Ines\" - and nothing says which value belongs to which name. The right element says it for free.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1329,7 +1349,7 @@
       "description": "The distinction against its neighbours is the data's, not the drawing's. A column says each period is its own sum - hours worked in a week, and there is no Wednesday-afternoon figure between two weeks. A line says the value existed the whole time and was sampled: an account balance, a price, a temperature. Drawing a sum as a line claims readings nobody took; drawing a level as columns throws away the thing being watched.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/line-scale.json"
@@ -1366,7 +1386,7 @@
       "description": "A row of a list, one thing said in a line: ListRow for a fact, RowButton for a choice.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1384,7 +1404,7 @@
       "title": "MarkedText",
       "description": "A textarea cannot colour a word. The way round it is older than React: draw the same text twice, once as marked-up HTML underneath and once as the textarea on top with its own text transparent, so the caret and the selection are the browser's and the colours are ours. The two have to agree on every metric - font, size, line height, padding, wrapping - or the marks slide off the words they mark. So both take ONE class list, given by the caller, and the textarea adds only what makes it invisible.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1404,7 +1424,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/layer.json"
@@ -1426,7 +1446,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/tooltip.json"
@@ -1446,7 +1466,7 @@
       "title": "NotificationBell",
       "description": "A bell that is always lit is a bell nobody reads, so the count is the product's decision and this draws it: nothing at zero, the number past that, `9+` past nine. Pressing it does not leave the screen - the last few entries open under it and the whole history is one more click, which is the shape every product converged on once the first one tried a page.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/button.json",
@@ -1468,7 +1488,7 @@
       "description": "A number typed into a text input is a string that happens to look like a number, and every product then writes the same four fixes: strip the letters, clamp to a range, round to a step, and decide what an empty box means. This is those four, once, plus the stepper - because a value with a small range is faster nudged than typed.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1488,7 +1508,7 @@
       "title": "NumberFormat",
       "description": "Two things, and the second is the reason this is a component rather than a call to `toLocaleString` at each site.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1507,7 +1527,7 @@
       "description": "What a screen says it is, and the buttons that act on the whole of it: a title, a line under it, and the actions at the far end of the same row.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1525,7 +1545,7 @@
       "title": "PageSize",
       "description": "Its own file rather than a part of `Pagination`, because the two are needed apart often enough: a list that scrolls for ever wants \"how many to load at a time\" and no page buttons, and a table with a fixed page size wants the buttons and no choice. Together they were also over the size gate, which asked the right question.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/select.json"
@@ -1545,7 +1565,7 @@
       "title": "Pagination",
       "description": "The arithmetic is exported separately from the component for the same reason `table-sort` is a file of its own: a product that pages on the server needs the page numbers and not the buttons, and computing them a second time in a different place is how the two disagree about where the last page ends.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/button.json"
@@ -1566,7 +1586,7 @@
       "description": "The raised surface everything else sits on. It is the one place a screen gets its structure from, so it stays deliberately plain: a ground, a hairline, a corner.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1584,7 +1604,7 @@
       "title": "PasswordField",
       "description": "The reveal is the whole component, and it is not a convenience. A masked field is the only one in a form where a typo cannot be seen, so people either paste (fine) or type slowly and get it wrong anyway; the toggle is what turns an unverifiable field into a checkable one, and it is why long passphrases became usable at all.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -1606,7 +1626,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/layer.json"
@@ -1628,7 +1648,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/layer.json"
@@ -1648,7 +1668,7 @@
       "title": "ProductMark",
       "description": "The product-mark primitive.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1666,7 +1686,7 @@
       "title": "ProductSwitcher",
       "description": "The line's products are meant to be used together: kasl-server reads what kasl records, rigger plans what furca commits, a note in scheda cites a track in lyrid. A person moving between them was typing addresses from memory. This is the one place that knows where the others are - the current product's small tile and name on the trigger, and the others in a menu, each with its own tile, so the colour a person already knows the product by is what they look for.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/menu.json",
@@ -1689,7 +1709,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1729,7 +1749,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1747,7 +1767,7 @@
       "title": "RatingScale",
       "description": "Generalised from kilna, where it is how a work is scored on each of its axes. The shape is a row of marks rather than stars: stars carry a meaning of their own - a review, a public verdict - and this is as often \"how hard was this\" or \"how finished is it\" as it is \"how good\".",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1765,7 +1785,7 @@
       "title": "RelativeTime",
       "description": "The relative-time primitive.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1783,7 +1803,7 @@
       "title": "ReorderableList",
       "description": "The columns in a column picker, the stops of a dial, the roles of a profile. A hook and a grip rather than a list component: the rows are already something else's - a menu's items, a form's fields - and a component wrapping them would have to reproduce whatever that something else does.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1801,7 +1821,7 @@
       "title": "SaveState",
       "description": "The quiet line beside a field that saves itself: \"saving…\", then a tick that fades. It exists because a form without a Save button has to say what it did anyway - otherwise the reader is left guessing whether their edit survived, and the usual answer to that guess is to press Ctrl+S at a page that has no such thing.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/spinner.json"
@@ -1823,7 +1843,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1841,19 +1861,19 @@
       "title": "SearchField",
       "description": "An Input that knows it is a search box, which is three small things the products kept not doing:\n *   - a magnifier, so the field is recognisable before it is read;   - a way to clear it that is not \"select all and delete\" - and one that a     keyboard can reach, which a decorative `<span>` cannot;   - the shortcut that focuses it, shown in the field rather than learned.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
+        "https://lacodda.github.io/dowel/r/commands.json",
         "https://lacodda.github.io/dowel/r/input.json",
-        "https://lacodda.github.io/dowel/r/kbd.json",
-        "https://lacodda.github.io/dowel/r/shortcut.json"
+        "https://lacodda.github.io/dowel/r/kbd.json"
       ],
       "files": [
         {
           "path": "ui/search-field.tsx",
           "target": "@ui/search-field.tsx",
           "type": "registry:ui",
-          "content": "import { useCallback, useRef, type InputHTMLAttributes, type Ref } from 'react'\nimport { cn } from 'dowel-ui'\nimport { fieldClasses } from './input'\nimport { Kbd } from './kbd'\nimport { useShortcut } from './shortcut'\n\n/*\n * SearchField.\n *\n * An Input that knows it is a search box, which is three small things the\n * products kept not doing:\n *\n *   - a magnifier, so the field is recognisable before it is read;\n *   - a way to clear it that is not \"select all and delete\" - and one that a\n *     keyboard can reach, which a decorative `<span>` cannot;\n *   - the shortcut that focuses it, shown in the field rather than learned.\n *\n * `type=\"search\"` is deliberate: it is what tells a browser to offer previous\n * queries, and what makes Escape clear the field on the platforms where that\n * is the convention. The browser's own clear button is hidden, because it is\n * drawn in the operating system's chrome and cannot be made to match - the\n * same reason the line does not use a native `<select>`.\n */\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {\n  /** The query. Controlled, because a search box that owns its own text\n   * cannot be cleared by the thing that owns the results. */\n  value: string\n  /** Told the new query on every keystroke. */\n  onValueChange: (value: string) => void\n  /**\n   * What the clear button is called, for a screen reader. No default: a word\n   * the component invents is a word the product cannot translate.\n   *\n   * Leave it out and no clear button is drawn - which is the right shape for a\n   * field that filters as you type and is cleared by other means.\n   */\n  clearLabel?: string\n  /**\n   * The shortcut that focuses the field, as `['Mod', 'K']`. Shown at the right\n   * of the field, and bound: pressing it focuses and selects, from anywhere\n   * that is not already a field.\n   */\n  shortcut?: string[]\n  ref?: Ref<HTMLInputElement>\n}\n\nexport function SearchField({\n  value,\n  onValueChange,\n  clearLabel,\n  shortcut,\n  className,\n  ref,\n  ...props\n}: SearchFieldProps) {\n  const own = useRef<HTMLInputElement>(null)\n\n  const setRefs = useCallback(\n    (element: HTMLInputElement | null) => {\n      own.current = element\n      if (typeof ref === 'function') ref(element)\n      else if (ref) ref.current = element\n    },\n    [ref],\n  )\n\n  // Focus and select, so the shortcut replaces a stale query rather than\n  // appending to it. Not while someone is typing elsewhere - that is\n  // `useShortcut`'s default, and it is the half of this people forget.\n  const focusAndSelect = useCallback(() => {\n    own.current?.focus()\n    own.current?.select()\n  }, [])\n  useShortcut(shortcut ?? [], focusAndSelect, { enabled: shortcut !== undefined })\n\n  const showClear = clearLabel !== undefined && value !== ''\n\n  return (\n    <div className={cn('relative', className)}>\n      <MagnifierIcon />\n\n      <input\n        ref={setRefs}\n        type=\"search\"\n        value={value}\n        onChange={(event) => onValueChange(event.target.value)}\n        className={cn(\n          fieldClasses,\n          'h-control pl-8',\n          // Room on the right for whatever sits there, and none when nothing\n          // does - a field with a permanent gap looks broken.\n          showClear && 'pr-8',\n          !showClear && shortcut && 'pr-14',\n          // The browser's own clear affordance, in the operating system's\n          // chrome. Ours is below.\n          '[&::-webkit-search-cancel-button]:appearance-none',\n        )}\n        {...props}\n      />\n\n      {showClear && (\n        <button\n          type=\"button\"\n          aria-label={clearLabel}\n          onClick={() => {\n            onValueChange('')\n            own.current?.focus()\n          }}\n          className={cn(\n            'absolute right-1.5 top-1/2 grid size-6 -translate-y-1/2 place-items-center',\n            'rounded-sm text-faint transition-colors hover:bg-soft hover:text-text',\n            'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent',\n          )}\n        >\n          <CrossIcon />\n        </button>\n      )}\n\n      {!showClear && shortcut && (\n        // Decorative: the shortcut works whether or not it is read out, and a\n        // screen reader announcing \"Control K\" inside a search box is noise.\n        <Kbd\n          keys={shortcut}\n          aria-hidden\n          className=\"pointer-events-none absolute right-2 top-1/2 -translate-y-1/2\"\n        />\n      )}\n    </div>\n  )\n}\n\nfunction MagnifierIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      aria-hidden\n      className=\"pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-faint\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n      <path d=\"M10.5 10.5L14 14\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nfunction CrossIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"10\" height=\"10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden>\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n"
+          "content": "import { useCallback, useRef, type InputHTMLAttributes, type Ref } from 'react'\nimport { cn } from 'dowel-ui'\nimport { useCommandKeys, useCommands, type Command } from './commands'\nimport { fieldClasses } from './input'\nimport { Kbd } from './kbd'\n\n/*\n * SearchField.\n *\n * An Input that knows it is a search box, which is three small things the\n * products kept not doing:\n *\n *   - a magnifier, so the field is recognisable before it is read;\n *   - a way to clear it that is not \"select all and delete\" - and one that a\n *     keyboard can reach, which a decorative `<span>` cannot;\n *   - the shortcut that focuses it, shown in the field rather than learned.\n *\n * `type=\"search\"` is deliberate: it is what tells a browser to offer previous\n * queries, and what makes Escape clear the field on the platforms where that\n * is the convention. The browser's own clear button is hidden, because it is\n * drawn in the operating system's chrome and cannot be made to match - the\n * same reason the line does not use a native `<select>`.\n */\n\nexport interface SearchFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {\n  /** The query. Controlled, because a search box that owns its own text\n   * cannot be cleared by the thing that owns the results. */\n  value: string\n  /** Told the new query on every keystroke. */\n  onValueChange: (value: string) => void\n  /**\n   * What the clear button is called, for a screen reader. No default: a word\n   * the component invents is a word the product cannot translate.\n   *\n   * Leave it out and no clear button is drawn - which is the right shape for a\n   * field that filters as you type and is cleared by other means.\n   */\n  clearLabel?: string\n  /**\n   * The command that focuses the field: `{ id: 'search', label: 'Search',\n   * keys: 'Mod+K' }`. Declared like any other command, so it is listed in the\n   * sheet of shortcuts and the palette, and a rebinding moves the key and the\n   * hint together. The hint at the right of the field shows the keys it\n   * answers to now, not the ones it was written with.\n   */\n  shortcut?: SearchShortcut\n  ref?: Ref<HTMLInputElement>\n}\n\n/** A command the field runs itself: focus, and select what is there. */\nexport type SearchShortcut = Pick<Command, 'id' | 'label' | 'group' | 'whileTyping'> & {\n  keys: string\n}\n\nexport function SearchField({\n  value,\n  onValueChange,\n  clearLabel,\n  shortcut,\n  className,\n  ref,\n  ...props\n}: SearchFieldProps) {\n  const own = useRef<HTMLInputElement>(null)\n\n  const setRefs = useCallback(\n    (element: HTMLInputElement | null) => {\n      own.current = element\n      if (typeof ref === 'function') ref(element)\n      else if (ref) ref.current = element\n    },\n    [ref],\n  )\n\n  // Focus and select, so the shortcut replaces a stale query rather than\n  // appending to it. Not while someone is typing elsewhere - that is every\n  // command's default, and it is the half of this people forget.\n  const focusAndSelect = useCallback(() => {\n    own.current?.focus()\n    own.current?.select()\n  }, [])\n  useCommands(shortcut === undefined ? [] : [{ ...shortcut, run: focusAndSelect }])\n  const hint = useCommandKeys(shortcut?.id ?? '')[0]\n\n  const showClear = clearLabel !== undefined && value !== ''\n\n  return (\n    <div className={cn('relative', className)}>\n      <MagnifierIcon />\n\n      <input\n        ref={setRefs}\n        type=\"search\"\n        value={value}\n        onChange={(event) => onValueChange(event.target.value)}\n        className={cn(\n          fieldClasses,\n          'h-control pl-8',\n          // Room on the right for whatever sits there, and none when nothing\n          // does - a field with a permanent gap looks broken.\n          showClear && 'pr-8',\n          !showClear && hint !== undefined && 'pr-14',\n          // The browser's own clear affordance, in the operating system's\n          // chrome. Ours is below.\n          '[&::-webkit-search-cancel-button]:appearance-none',\n        )}\n        {...props}\n      />\n\n      {showClear && (\n        <button\n          type=\"button\"\n          aria-label={clearLabel}\n          onClick={() => {\n            onValueChange('')\n            own.current?.focus()\n          }}\n          className={cn(\n            'absolute right-1.5 top-1/2 grid size-6 -translate-y-1/2 place-items-center',\n            'rounded-sm text-faint transition-colors hover:bg-soft hover:text-text',\n            'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent',\n          )}\n        >\n          <CrossIcon />\n        </button>\n      )}\n\n      {!showClear && hint !== undefined && (\n        // Decorative: the shortcut works whether or not it is read out, and a\n        // screen reader announcing \"Control K\" inside a search box is noise.\n        <Kbd\n          keys={hint}\n          aria-hidden\n          className=\"pointer-events-none absolute right-2 top-1/2 -translate-y-1/2\"\n        />\n      )}\n    </div>\n  )\n}\n\nfunction MagnifierIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      width=\"14\"\n      height=\"14\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      aria-hidden\n      className=\"pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-faint\"\n    >\n      <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n      <path d=\"M10.5 10.5L14 14\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n\nfunction CrossIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"10\" height=\"10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden>\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n"
         }
       ]
     },
@@ -1864,7 +1884,7 @@
       "description": "A settings screen is the usual case: five or six sections, each its own address so it can be linked to and the back button walks between them, listed down the left with the current one tinted. Every product draws the same column, and every product draws the active row a little differently - which is exactly the drift a shared list exists to stop.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1883,7 +1903,7 @@
       "description": "Two to five options, one of them chosen, all of them in view - a radio group in a segment's clothes.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1903,7 +1923,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json",
@@ -1922,7 +1942,7 @@
       "name": "shortcut",
       "type": "registry:ui",
       "title": "Shortcut",
-      "description": "Two things every product writes and half of them get subtly wrong: deciding whether a keystroke is the shortcut, and deciding whether now is a moment to act on it.",
+      "description": "The one notation the line writes keys in, and the one reading of a keystroke against it, so that what is bound, what is shown and what a person rebinds are the same words.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
@@ -1930,7 +1950,30 @@
           "path": "ui/shortcut.tsx",
           "target": "@ui/shortcut.tsx",
           "type": "registry:ui",
-          "content": "import { useEffect } from 'react'\n\n/*\n * Shortcut.\n *\n * Two things every product writes and half of them get subtly wrong: deciding\n * whether a keystroke is the shortcut, and deciding whether now is a moment to\n * act on it.\n *\n * The second is the one that bites. A shortcut that fires while someone is\n * typing in a field is a bug nobody can describe afterwards - `Mod+K` inside a\n * text editor means \"delete to end of line\", and a palette that opens on top\n * of it looks like the application misheard. So a keystroke aimed at an input,\n * a textarea or anything `contenteditable` belongs to that thing, always.\n *\n * A shortcut is written the way it is read: `['Mod', 'K']`. `Mod` is command\n * on Apple platforms and control everywhere else, which is the same rule Kbd\n * draws it by, so what is bound and what is shown cannot disagree.\n */\n\n/** Whether the event landed somewhere that owns its own keys. */\nexport function isTypingTarget(target: EventTarget | null): boolean {\n  const element = target as HTMLElement | null\n  if (!element) return false\n  const tag = element.tagName\n  // Coerced: `isContentEditable` is computed from layout, and an engine that\n  // does not lay out - jsdom, and any server render - leaves it `undefined`\n  // rather than `false`. Truthiness is enough for the branch below, but a\n  // function that says it returns a boolean has to.\n  return tag === 'INPUT' || tag === 'TEXTAREA' || Boolean(element.isContentEditable)\n}\n\n/** Does this event match the shortcut? Exported because a product sometimes\n * has to ask the question inside a handler it already owns. */\nexport function matchesShortcut(event: KeyboardEvent, shortcut: string[]): boolean {\n  const wants = new Set(shortcut.map((key) => key.toLowerCase()))\n  const mod = wants.delete('mod')\n  const shift = wants.delete('shift')\n  const alt = wants.delete('alt')\n  const [key] = [...wants]\n  if (key === undefined) return false\n\n  // An exact match on every modifier, in both directions: `Mod+K` must not\n  // fire on `Mod+Shift+K`, which is usually a different command entirely.\n  if (mod !== (event.metaKey || event.ctrlKey)) return false\n  if (shift !== event.shiftKey) return false\n  if (alt !== event.altKey) return false\n  return event.key.toLowerCase() === key\n}\n\nexport interface UseShortcutOptions {\n  /** Bind it at all. For a shortcut that only exists on some screens. */\n  enabled?: boolean\n  /**\n   * Fire even while someone is typing in a field.\n   *\n   * Off by default, and the default is the point. Turn it on for a shortcut\n   * that belongs to the field itself - `Escape` closing the box it is typed\n   * in - and never for one that takes the person somewhere else.\n   */\n  whileTyping?: boolean\n}\n\n/**\n * Run something when a shortcut is pressed.\n *\n * The handler is read from a ref, so a caller that writes it inline does not\n * rebind the listener on every render - which is how these end up firing twice.\n */\nexport function useShortcut(\n  shortcut: string[],\n  onPress: (event: KeyboardEvent) => void,\n  { enabled = true, whileTyping = false }: UseShortcutOptions = {},\n): void {\n  useEffect(() => {\n    if (!enabled) return\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (!whileTyping && isTypingTarget(event.target)) return\n      if (!matchesShortcut(event, shortcut)) return\n      event.preventDefault()\n      onPress(event)\n    }\n\n    document.addEventListener('keydown', onKeyDown)\n    return () => document.removeEventListener('keydown', onKeyDown)\n    // `shortcut` is an array literal at most call sites, so it is joined\n    // rather than compared by identity: otherwise every render rebinds.\n  }, [shortcut.join('+'), onPress, enabled, whileTyping]) // eslint-disable-line react-hooks/exhaustive-deps\n}\n"
+          "content": "export {}\n// Code first, so the description below survives `shadcn add`: the CLI writes\n// a file from its first token on and drops every comment above it.\n\n/*\n * Shortcut.\n *\n * The one notation the line writes keys in, and the one reading of a\n * keystroke against it, so that what is bound, what is shown and what a\n * person rebinds are the same words.\n *\n * A shortcut is a string, written the way it is read: `Mod+K`, `Mod+Shift+P`,\n * `?`, `Escape`. A sequence is its steps with a space between them - `G D` is\n * G, then D. A string because it has to live in more places than code: in a\n * settings file where someone has rebound it, in a menu hint, in the sheet that\n * lists every key, and in a comparison that says two commands share one.\n *\n * `Mod` is command on Apple platforms and control everywhere else. `Ctrl` is\n * the control key itself, which only means something different on a Mac -\n * `Ctrl+Tab` switches tabs there, where `Mod+Tab` belongs to the system.\n *\n * Two rules decide what a keystroke *is*, and both are about the people the\n * line is made for, who switch keyboard layouts in the middle of a sentence:\n *\n *   - A letter is the letter the key types when the layout types Latin, and\n *     the key's place when it does not. On a Russian layout `Ctrl+P` arrives\n *     as `з`; reading `event.key` there makes every shortcut in the\n *     application stop working the moment someone switches language to write.\n *   - Any other character is the character typed, with Shift inside it. `?`\n *     is Shift+/ on one keyboard and Shift+7 on another, and the person\n *     pressing it means the question mark on both. So `?` is written as `?`,\n *     never as `Shift+/` - and the notation refuses the second spelling,\n *     because two spellings of one key is how two commands end up on it\n *     without a conflict ever being seen.\n *\n * The number row under a command modifier is read by place as well: `Mod+1`\n * on a French keyboard is pressed on the key that types `&`.\n */\n\n/** One step of a shortcut: a key and the modifiers held with it. */\nexport interface Stroke {\n  /** An uppercase letter, a digit, a character such as `?`, or a key's name\n   * such as `Escape` or `F5`. */\n  key: string\n  /** Command on Apple platforms, Control everywhere else. */\n  mod: boolean\n  /** The Control key on an Apple platform. Elsewhere Control *is* `Mod`. */\n  ctrl: boolean\n  alt: boolean\n  /** Never set for a character: the character already carries it. */\n  shift: boolean\n}\n\n/** Whether this machine writes and reads shortcuts the Apple way. */\nexport function isApplePlatform(): boolean {\n  if (typeof navigator === 'undefined') return false\n  return /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent)\n}\n\n/** Keys that have a name rather than a character, by the name `event.key`\n * gives them. Matched without regard to case, so `escape` is `Escape`. */\nconst NAMED = [\n  'Escape',\n  'Enter',\n  'Tab',\n  'Space',\n  'Backspace',\n  'Delete',\n  'Insert',\n  'Home',\n  'End',\n  'PageUp',\n  'PageDown',\n  'ArrowUp',\n  'ArrowDown',\n  'ArrowLeft',\n  'ArrowRight',\n  ...Array.from({ length: 24 }, (_, index) => `F${index + 1}`),\n]\nconst NAMED_BY_LOWER = new Map(NAMED.map((name) => [name.toLowerCase(), name]))\n\n/** The other spellings a person reaches for. Each turns into the one above,\n * so two spellings can never be two keys. */\nconst ALIASES: Record<string, string> = {\n  esc: 'Escape',\n  return: 'Enter',\n  del: 'Delete',\n  up: 'ArrowUp',\n  down: 'ArrowDown',\n  left: 'ArrowLeft',\n  right: 'ArrowRight',\n  plus: '+',\n}\n\nconst MODIFIERS: Record<string, keyof Omit<Stroke, 'key'>> = {\n  mod: 'mod',\n  ctrl: 'ctrl',\n  control: 'ctrl',\n  alt: 'alt',\n  option: 'alt',\n  shift: 'shift',\n}\n\n/** What the punctuation keys type on a US layout, unshifted and shifted - the\n * place a key is read by when the layout typed a letter of its own there. */\nconst US_PUNCTUATION: Record<string, [string, string]> = {\n  BracketLeft: ['[', '{'],\n  BracketRight: [']', '}'],\n  Semicolon: [';', ':'],\n  Quote: [\"'\", '\"'],\n  Comma: [',', '<'],\n  Period: ['.', '>'],\n  Slash: ['/', '?'],\n  Backslash: ['\\\\', '|'],\n  Backquote: ['`', '~'],\n  Minus: ['-', '_'],\n  Equal: ['=', '+'],\n}\n\n/** Keys that are only ever held. Pressed alone they are a hand reaching for a\n * shortcut, not a shortcut. */\nconst HELD = new Set(['Control', 'Shift', 'Alt', 'Meta', 'AltGraph', 'OS', 'Hyper', 'Super', 'Fn', 'CapsLock'])\n\nconst isLetter = (key: string) => /^[A-Z]$/.test(key)\nconst isDigit = (key: string) => /^[0-9]$/.test(key)\n\n/** A printable character other than a letter: it carries its own Shift. */\nfunction isCharacter(key: string): boolean {\n  return key.length === 1 && !isLetter(key)\n}\n\n/** Whether Mod, Ctrl or Alt is held - the modifiers that make a key a command\n * rather than something typed. Shift alone does not. */\nexport function holdsCommand(stroke: Stroke): boolean {\n  return stroke.mod || stroke.ctrl || stroke.alt\n}\n\n/** Whether a digit is read by place in this stroke: under a command modifier.\n * Without one it is the character typed, Shift and all. */\nconst digitByPlace = (stroke: Stroke) => isDigit(stroke.key) && holdsCommand(stroke)\n\nfunction parseStep(step: string, whole: string, apple: boolean): Stroke {\n  // `+` is both the separator and a key, so `Mod++` and a lone `+` are the\n  // plus key, and so is `Mod+Plus`.\n  const tokens =\n    step === '+' ? ['+'] : step.endsWith('++') ? [...step.slice(0, -2).split('+'), '+'] : step.split('+')\n  const written = tokens.pop()!\n  const stroke: Stroke = { key: '', mod: false, ctrl: false, alt: false, shift: false }\n\n  for (const token of tokens) {\n    const modifier = MODIFIERS[token.toLowerCase()]\n    if (modifier === undefined) {\n      throw new Error(\n        `\\`${token}\\` in the shortcut \\`${whole}\\` is not a modifier. The line writes Mod, Ctrl, Alt and Shift - ` +\n          'Mod is command on Apple platforms and control everywhere else, so there is no Cmd to write.',\n      )\n    }\n    if (stroke[modifier]) throw new Error(`The shortcut \\`${whole}\\` names \\`${token}\\` twice.`)\n    stroke[modifier] = true\n  }\n\n  const lower = written.toLowerCase()\n  const named = NAMED_BY_LOWER.get(lower) ?? ALIASES[lower]\n  if (named !== undefined) stroke.key = named\n  else if (written.length === 1 && written >= '!' && written <= '~') stroke.key = written.toUpperCase()\n  else {\n    throw new Error(\n      `\\`${written}\\` in the shortcut \\`${whole}\\` is not a key the line can read. Write a Latin letter, ` +\n        'a digit, a character such as `?`, or a name such as `Escape` - a letter of another alphabet is ' +\n        'found by its place on the keyboard, so it is written as the Latin letter it shares a key with.',\n    )\n  }\n\n  if (stroke.shift && isCharacter(stroke.key) && !digitByPlace(stroke)) {\n    throw new Error(\n      `The shortcut \\`${whole}\\` holds Shift with \\`${stroke.key}\\`, and a character carries its own Shift: ` +\n        'write the character it types instead - `?`, not `Shift+/`.',\n    )\n  }\n  // Off an Apple platform the control key is the command key: `Ctrl+K` and\n  // `Mod+K` are one keystroke there, and spelled one way they collide where\n  // they should.\n  if (!apple && stroke.ctrl) {\n    stroke.ctrl = false\n    stroke.mod = true\n  }\n  return stroke\n}\n\n/**\n * The steps of a shortcut. Throws on anything it cannot read, and says why:\n * a shortcut is written in code, and a typo in one is a key that silently\n * never fires.\n */\nexport function parseKeys(keys: string, apple: boolean = isApplePlatform()): Stroke[] {\n  const steps = keys.trim().split(/\\s+/)\n  if (steps[0] === '') throw new Error('An empty shortcut binds nothing.')\n  return steps.map((step) => parseStep(step, keys, apple))\n}\n\n/** The keys of one step in the one order: Mod, Ctrl, Alt, Shift, the key. */\nexport function strokeParts(stroke: Stroke): string[] {\n  const parts: string[] = []\n  if (stroke.mod) parts.push('Mod')\n  if (stroke.ctrl) parts.push('Ctrl')\n  if (stroke.alt) parts.push('Alt')\n  if (stroke.shift) parts.push('Shift')\n  parts.push(stroke.key)\n  return parts\n}\n\n/** One step, written the one way. */\nexport function formatStroke(stroke: Stroke): string {\n  return strokeParts(stroke).join('+')\n}\n\n/** A shortcut in its one spelling: `mod+shift+p` is `Mod+Shift+P`, `Esc` is\n * `Escape`. Two shortcuts are the same keys exactly when these agree. */\nexport function normalizeKeys(keys: string, apple: boolean = isApplePlatform()): string {\n  return parseKeys(keys, apple).map(formatStroke).join(' ')\n}\n\n/** Whether two steps are the same keystroke. Exact on every modifier, in both\n * directions: `Mod+K` is not `Mod+Shift+K`, and a bare `K` is not `Ctrl+K`. */\nexport function sameStroke(a: Stroke, b: Stroke): boolean {\n  return a.key === b.key && a.mod === b.mod && a.ctrl === b.ctrl && a.alt === b.alt && a.shift === b.shift\n}\n\n/** The key a keystroke pressed, by the two rules at the top of this file, and\n * whether Shift went into it. */\nfunction readKey(event: KeyboardEvent, command: boolean): { key: string; character: boolean } | null {\n  const { key } = event\n  const code = event.code ?? ''\n\n  if (/^[a-z]$/i.test(key)) return { key: key.toUpperCase(), character: false }\n  // The number row under a command, by place: a French keyboard types `&`\n  // on the key that `Mod+1` is pressed on.\n  if (command && /^Digit[0-9]$/.test(code)) return { key: code.slice(5), character: false }\n  if (key === ' ') return { key: 'Space', character: false }\n  if (key.length === 1 && key >= '!' && key <= '~') return { key, character: true }\n\n  const named = NAMED_BY_LOWER.get(key.toLowerCase())\n  if (named !== undefined) return { key: named, character: false }\n\n  // A layout that does not type Latin, or a dead key: the key's place.\n  if (/^Key[A-Z]$/.test(code)) return { key: code.slice(3), character: false }\n  if (command && /^Digit[0-9]$/.test(code)) return { key: code.slice(5), character: false }\n  const punctuation = US_PUNCTUATION[code]\n  if (punctuation) return { key: punctuation[event.shiftKey ? 1 : 0], character: true }\n  return null\n}\n\n/**\n * What a keystroke is, as a step of a shortcut - or `null` when it is not one:\n * a modifier pressed alone, a key mid-composition in an input method, or\n * AltGr typing a character (Polish `ą` arrives as Ctrl+Alt+A on Windows, and\n * it is a letter, not a command).\n */\nexport function strokeOf(event: KeyboardEvent, apple: boolean = isApplePlatform()): Stroke | null {\n  if (event.isComposing || event.keyCode === 229) return null\n  if (HELD.has(event.key)) return null\n  if (event.getModifierState?.('AltGraph')) return null\n\n  let mod: boolean\n  let ctrl: boolean\n  if (apple) {\n    mod = event.metaKey\n    ctrl = event.ctrlKey\n  } else {\n    // The Windows key belongs to the system: nearly every chord on it is\n    // taken before a page sees it, and the rest are not the page's to take.\n    if (event.metaKey) return null\n    mod = event.ctrlKey\n    ctrl = false\n  }\n  const alt = event.altKey\n\n  const read = readKey(event, mod || ctrl || alt)\n  if (read === null) return null\n  return { key: read.key, mod, ctrl, alt, shift: read.character ? false : event.shiftKey }\n}\n\n/** A keystroke written as a shortcut, for a settings screen that records one:\n * press the keys, store what this returns. */\nexport function keysOf(event: KeyboardEvent, apple: boolean = isApplePlatform()): string | null {\n  const stroke = strokeOf(event, apple)\n  return stroke === null ? null : formatStroke(stroke)\n}\n\n/**\n * Whether a field someone is typing in uses this key - a character, Space,\n * Enter, Tab, the arrows, Home and End, deleting.\n *\n * Only Escape and the function keys type nothing and move nothing, so they and\n * any step holding Mod, Ctrl or Alt are the only ones that can be allowed to\n * fire into a field.\n */\nexport function typesInField(stroke: Stroke): boolean {\n  if (holdsCommand(stroke)) return false\n  return stroke.key !== 'Escape' && !/^F[0-9]+$/.test(stroke.key)\n}\n\n/** Input types that hold no text: a keystroke on a checkbox is not typing. */\nconst NOT_TEXT = new Set(['checkbox', 'radio', 'button', 'submit', 'reset', 'range', 'color', 'file', 'image', 'hidden'])\n\n/**\n * Whether the event landed somewhere that owns its own keys: a text input, a\n * textarea, a select, or anything editable - including an element *inside*\n * an editable one, which is what `target` reports for a bold word in an\n * editable paragraph.\n */\nexport function isTypingTarget(target: EventTarget | null): boolean {\n  const element = target as Element | null\n  if (!element || typeof element.closest !== 'function') return false\n  // Asked first, because a browser also sets it for a document in design\n  // mode, which no selector sees. An engine that does not lay out - jsdom, a\n  // server render - leaves it `undefined`, and the selector below answers.\n  if ((element as HTMLElement).isContentEditable) return true\n  const field = element.closest('input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])')\n  if (field === null) return false\n  if (field.tagName === 'INPUT') return !NOT_TEXT.has((field as HTMLInputElement).type)\n  return true\n}\n\n/**\n * The shortcuts in `aria-keyshortcuts` form - `Control+K`, or `Meta+K` on a\n * Mac - for the button or menu item that does the same thing.\n *\n * A sequence has no form there: the attribute separates *alternatives* with a\n * space, so `G D` written into it would claim that G alone does it. Sequences\n * are left out, and a command with nothing else gets no attribute.\n */\nexport function ariaKeyShortcuts(\n  keys: string | readonly string[],\n  apple: boolean = isApplePlatform(),\n): string | undefined {\n  const written = (typeof keys === 'string' ? [keys] : keys)\n    .map((written) => parseKeys(written, apple))\n    .filter((steps) => steps.length === 1)\n    .map(([stroke]) => {\n      const parts: string[] = []\n      if (stroke!.mod) parts.push(apple ? 'Meta' : 'Control')\n      if (stroke!.ctrl) parts.push('Control')\n      if (stroke!.alt) parts.push('Alt')\n      if (stroke!.shift) parts.push('Shift')\n      parts.push(stroke!.key === '+' ? 'Plus' : stroke!.key)\n      return parts.join('+')\n    })\n  return written.length === 0 ? undefined : written.join(' ')\n}\n"
+        }
+      ]
+    },
+    {
+      "name": "shortcuts-dialog",
+      "type": "registry:ui",
+      "title": "ShortcutsDialog",
+      "description": "The sheet of every key the application answers to, opened by `?` - written from the list of commands rather than by hand, so it cannot promise a key that does not work.",
+      "dependencies": [
+        "dowel-ui@^0.35.0"
+      ],
+      "registryDependencies": [
+        "https://lacodda.github.io/dowel/r/button.json",
+        "https://lacodda.github.io/dowel/r/commands.json",
+        "https://lacodda.github.io/dowel/r/dialog.json",
+        "https://lacodda.github.io/dowel/r/kbd.json"
+      ],
+      "files": [
+        {
+          "path": "ui/shortcuts-dialog.tsx",
+          "target": "@ui/shortcuts-dialog.tsx",
+          "type": "registry:ui",
+          "content": "import { useId, useRef, useState, type HTMLAttributes, type ReactNode } from 'react'\nimport { cn } from 'dowel-ui'\nimport { Button } from './button'\nimport { groupCommands, useCommand, useCommandList, type ListedCommand } from './commands'\nimport { Dialog, DialogBody, DialogClose, DialogDescription, DialogHeader, DialogPopup, DialogTitle } from './dialog'\nimport { Kbd } from './kbd'\n\n/*\n * ShortcutsDialog.\n *\n * The sheet of every key the application answers to, opened by `?` - written\n * from the list of commands rather than by hand, so it cannot promise a key\n * that does not work.\n *\n * Every hand-written sheet of shortcuts is a version behind what the\n * application actually answers to. This one has no rows of its own: it lists\n * what is declared now, under the headings the commands give themselves, with\n * the keys they answer to after a rebinding and after a conflict. A command\n * declared by the open screen appears while that screen is open, and is gone\n * when it is not.\n *\n * It declares its own command, so `?` opens it with no wiring, the palette\n * offers it, and it lists itself - under the title the product gives it.\n *\n * It opens with the focus on the list rather than on the close button. A sheet\n * is read, not answered: with the focus on the cross, the Enter that someone\n * presses to see what happens closes it, and the arrows that should scroll\n * the list do nothing.\n */\n\n/** The id of the command the dialog declares, for a rebinding or a menu item\n * that opens it with `runCommand`. */\nexport const SHORTCUTS_COMMAND = 'shortcuts'\n\n/** One heading and its keys. A group rather than a section: a named section\n * is a landmark, and a sheet of six headings would put six landmarks into the\n * list a screen reader jumps between - on a settings page, beside the page's\n * own. */\nfunction Group({ title, commands }: { title: string | undefined; commands: ListedCommand[] }) {\n  const heading = useId()\n  return (\n    <div\n      role=\"group\"\n      aria-labelledby={title === undefined ? undefined : heading}\n      className=\"mb-4 break-inside-avoid last:mb-0\"\n    >\n      {title !== undefined && (\n        <h3 id={heading} className=\"caption pb-1\">\n          {title}\n        </h3>\n      )}\n      <dl>\n        {commands.map((command) => (\n          <div key={command.id} className=\"flex items-baseline justify-between gap-3 py-1\">\n            <dt className=\"min-w-0 text-sm\">{command.label}</dt>\n            {/* Alternatives one under another: side by side, `G S` and `Ctrl ,`\n                read as one shortcut of four keys. */}\n            <dd className=\"flex shrink-0 flex-col items-end gap-1\">\n              {command.keys.map((keys) => (\n                <Kbd key={keys} keys={keys} />\n              ))}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    </div>\n  )\n}\n\n/** The list on its own, for a settings page that shows the keys in place. A\n * command with no keys has nothing to show and is left out. */\nexport function ShortcutList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  const groups = groupCommands(useCommandList().filter((command) => command.keys.length > 0))\n  return (\n    <div className={cn('gap-x-8 sm:columns-2', className)} {...props}>\n      {groups.map(({ group, commands }) => (\n        <Group key={group ?? ''} title={group} commands={commands} />\n      ))}\n    </div>\n  )\n}\n\nexport interface ShortcutsDialogProps {\n  /** The heading, and the name of the command that opens it: in the palette\n   * and in the list itself. */\n  title: string\n  /** What the close button is called, for a screen reader. No default: a word\n   * the component invents is a word the product cannot translate. */\n  closeLabel: string\n  /** The line under the heading. */\n  description?: ReactNode\n  /** The keys that open it. */\n  keys?: string\n  /** The heading its own line is listed under. */\n  group?: string\n  /** Controlled, for a product that opens it from somewhere else as well. */\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** After the list: what keys cannot say - a gesture with the pointer, a\n   * note that letters wait while someone is typing. */\n  children?: ReactNode\n}\n\nexport function ShortcutsDialog({\n  title,\n  closeLabel,\n  description,\n  keys = '?',\n  group,\n  open,\n  onOpenChange,\n  children,\n}: ShortcutsDialogProps) {\n  const [own, setOwn] = useState(false)\n  const body = useRef<HTMLDivElement>(null)\n  const shown = open ?? own\n  const setShown = (next: boolean) => {\n    if (open === undefined) setOwn(next)\n    onOpenChange?.(next)\n  }\n\n  useCommand({ id: SHORTCUTS_COMMAND, label: title, group, keys, run: () => setShown(true) })\n\n  return (\n    <Dialog open={shown} onOpenChange={setShown}>\n      <DialogPopup size=\"lg\" initialFocus={body}>\n        <DialogHeader\n          action={\n            <DialogClose render={<Button variant=\"icon\" size=\"icon-sm\" aria-label={closeLabel} />}>\n              <CrossIcon />\n            </DialogClose>\n          }\n        >\n          <DialogTitle>{title}</DialogTitle>\n          {description !== undefined && <DialogDescription>{description}</DialogDescription>}\n        </DialogHeader>\n        <DialogBody ref={body} tabIndex={-1}>\n          {/* Clear of the ring the body draws inside its edge when it has the\n              focus, which it has from the moment the sheet opens. */}\n          <ShortcutList className=\"pt-1\" />\n          {children}\n        </DialogBody>\n      </DialogPopup>\n    </Dialog>\n  )\n}\n\nfunction CrossIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" aria-hidden>\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" />\n    </svg>\n  )\n}\n"
         }
       ]
     },
@@ -1940,7 +1983,7 @@
       "title": "SkeletonOf",
       "description": "`Skeleton` and its shapes solved half the problem: they gave a product a list, a card and a grid to reach for instead of a spinner. The half left over is the one that actually causes the jump, and it is a human one - somebody has to look at the real thing, judge how many rows it has and how tall they are, and type that in. The judgement is made once, the screen changes a month later, and the placeholder goes on promising the old shape.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1958,7 +2001,7 @@
       "title": "Skeleton",
       "description": "The rule the component is built on, and the reason it takes a shape rather than filling the space:\n *   **A skeleton of the wrong shape is worse than no skeleton.**\n * It promises something the content does not keep, and the promise is paid for in a jump: the page settles, the scrollbar appears, and whatever the reader was about to click has moved. Measured rather than assumed - the line's own calendar showed a list of four short lines where a six-row month grid was about to land, and the skeleton was itself the jump it existed to prevent.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1977,7 +2020,7 @@
       "description": "The case for it over a NumberField is that the number does not matter much: a volume, an opacity, a weight in a search filter. Where the exact figure does matter, a slider is a worse field with more pixels - it cannot be typed into, it cannot be pasted into, and it has no state for \"empty\".",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -1996,7 +2039,7 @@
       "description": "The shape of a history, not a chart of it: no axes, no gridlines, no ticks.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2015,7 +2058,7 @@
       "description": "Something is happening and the answer has not arrived. It carries no text of its own - what is loading is the product's word, not the system's - but it does have to say *something* to a screen reader, or a page that is busy is silently identical to a page that is empty.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2033,7 +2076,7 @@
       "title": "Splash",
       "description": "A desktop product has a second or two between the window appearing and the first screen being ready - a workspace to open, a database to migrate, a plugin to start - and a blank window for that long reads as a crash. So the window shows the product instead: the mark, the name, the promise, the version, and a bar that sweeps until there is something to draw.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2052,7 +2095,7 @@
       "description": "The splitter primitive.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2071,7 +2114,7 @@
       "description": "The smallest thing on a dashboard and the one every product writes itself: a label above, a number below, sometimes a word about which way it moved.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2090,7 +2133,7 @@
       "description": "The smallest thing a screen can say about something's condition: a server is up, a job failed, a person is away. Every product of the line drew its own coloured circle, and every one of them drew it the same way - a `<span>` with a background - which means the condition existed for exactly the readers who could see it.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2109,7 +2152,7 @@
       "description": "The steps of a task too long for one screen, and where you stand in them: set up a workspace, import a library, configure a connection. It is a picture of progress on its own, and the top of a Wizard when the steps are a form - a product can show how far along something is without owning the form that moves it, which is why the two are separate components. Base UI has no stepper, so this one is written here rather than wrapped.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2128,7 +2171,7 @@
       "description": "The difference from Checkbox is not how it looks, and getting it wrong is the commonest mistake in the pair. A checkbox is an answer collected now and submitted later, with the rest of the form; a switch is a setting that applies the moment it moves. Put a switch in a form with a Save button and the reader cannot tell whether anything happened - they flipped it, and nothing said so.",
       "dependencies": [
         "@base-ui/react",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2163,7 +2206,7 @@
       "description": "Parts rather than a `columns` prop, and that is the decision worth stating: a `<DataTable columns={…} rows={…} />` is quicker to write for the first table and then owns every cell in the product forever. The moment one column needs a Badge, another a link, and a third the row's own menu, the prop grows a `render` for each - at which point it is JSX with extra steps, spelt in a shape only this component understands.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/table-sort.json"
@@ -2185,7 +2228,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2204,7 +2247,7 @@
       "description": "Free text turned into a list: type a word, press Enter, it becomes a chip.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/chip.json",
@@ -2225,7 +2268,7 @@
       "title": "Textarea",
       "description": "A multi-line field that can grow with what is typed into it, which is the only interesting part: a fixed box makes someone scroll inside a scroll, and a box that grows without limit pushes the button they are trying to reach off the screen. `autoResize` grows it; `maxRows` says when to stop and let it scroll after all.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -2246,7 +2289,7 @@
       "description": "The tier primitive.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2264,7 +2307,7 @@
       "title": "TimeField",
       "description": "No donor for this one: neither product of the line had a time field, so this is written from the same shape as DurationField, and for the same reason. Anything a person plausibly types is accepted - `9`, `9:30`, `930`, `9.30`, `9pm`, `21:30` - and what comes back is always `HH:MM`.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/input.json"
@@ -2285,7 +2328,7 @@
       "description": "What happened, in the order it happened: a release history, an audit trail, the steps a job went through. Four products of the line draw one, and all four drew it the same way - a list with a border on the left and a dot positioned over it by hand.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2305,7 +2348,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2325,7 +2368,7 @@
       "dependencies": [
         "@base-ui/react",
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/layer.json"
@@ -2362,7 +2405,7 @@
       "description": "Two products had written this independently and arrived at the same construction - a rounded track, segments positioned absolutely by percent, a floor under the segment width so a short one does not vanish - differing only in what a segment meant. One drew the tiers of a rubric with the score standing among them; the other drew a working day as alternating work and breaks. Neither could be built from the other, and each knew something the other did not: the tiers had the marker and the three-state reading of a segment (passed, standing in, still ahead), the day had the minimum width and the difference between an empty track and an unknown one.",
       "dependencies": [
         "class-variance-authority",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/track-segments.json"
@@ -2398,7 +2441,7 @@
       "title": "TreeView",
       "description": "The shape products reach for and then get wrong in the same place every time. A tree is not a nest of lists with click handlers - it is one control with a cursor in it, and the difference is the whole component:\n *   **One tab stop, not one per node.** A tree of four hundred files with a   `tabIndex` on each is four hundred stops between the sidebar and the   editor. The container is what the keyboard reaches, and the arrows move a   cursor inside it - the arrangement a `RadioGroup` has, for the same   reason.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/tree-rows.json"
@@ -2418,7 +2461,7 @@
       "title": "Truncate",
       "description": "Text that does not fit, cut with an ellipsis - and, importantly, still readable in full: the element carries its own text as a `title`, so hovering shows what was cut. Every product wrote the one-line version of this and none of them remembered the title.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2436,7 +2479,7 @@
       "title": "VirtualList",
       "description": "The browser is fine with long lists until it is not: a hundred thousand `<div>`s is a layout the machine recomputes on every change, and the page stops responding while it does. What is drawn instead is the window the reader can actually see, held in place by a tall spacer, so the scrollbar still says how much there is.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2455,7 +2498,7 @@
       "description": "With `decorations: false` the system draws nothing, so everything it used to do is the page's: dragging the window by its title bar, double-click to maximise, the three buttons, and the edges you grab to resize. Each is small; the reason to take them on at all is that a system title bar over an application title bar costs a strip of every laptop screen for nothing.",
       "dependencies": [
         "@tauri-apps/api",
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [],
       "files": [
@@ -2473,7 +2516,7 @@
       "title": "Wizard",
       "description": "A Stepper with the current step's content under it and the Back / Next / Finish row that walks through the steps - checking each one before it lets the user past. The Stepper alone shows progress; this is the form that makes it, and a product that only needs the picture should not install the form.",
       "dependencies": [
-        "dowel-ui@^0.34.1"
+        "dowel-ui@^0.35.0"
       ],
       "registryDependencies": [
         "https://lacodda.github.io/dowel/r/button.json",
@@ -2507,6 +2550,7 @@
         "https://lacodda.github.io/dowel/r/menu.json",
         "https://lacodda.github.io/dowel/r/panel.json",
         "https://lacodda.github.io/dowel/r/select.json",
+        "https://lacodda.github.io/dowel/r/shortcut.json",
         "https://lacodda.github.io/dowel/r/textarea.json",
         "https://lacodda.github.io/dowel/r/toast.json"
       ],