trykeyline 0.1.0 → 0.1.1

package/plugins/keyline/skills/keyline/glass/depth/guide.md

@@ -30,12 +30,7 @@ backdrop-filter: blur(20px) saturate(1.8);
 
 ## 3. The 97% panel
 
-`glass-panel` pairs a 24px blur with **97% opacity** because its menus' wrappers *scale open*, and a transform on an ancestor weakens `backdrop-filter` beneath it (depth law 9): for the whole animation the tint does the work. Where you can, the animating wrapper and the glass surface are different elements:
-
-```tsx
-<DropMenu open={open}>            {/* animates scale + y */}
-  <ul className="glass-panel …">  {/* carries the blur, never transformed */}
-```
+`glass-panel` pairs a 24px blur with **97% opacity** because its menus' wrappers *scale open*, and a transform on an ancestor weakens `backdrop-filter` beneath it (depth law 9): for the whole animation the tint does the work. Where you can, the animating wrapper and the glass surface are different elements: `DropMenu` scales and moves, the `glass-panel` inside it carries the blur and is never transformed (`glass/motion/assets/DropMenu.tsx`).
 
 ## 4. Glass over glass
 
@@ -53,30 +48,7 @@ Depth law 3's translucent edge is the alpha ramp (`glass/color/guide.md`): `gray
 
 ### The shadow stack
 
-Four layers, one light source above (depth law 4), in **one class**, not inline:
-
-```css
-.dock-shadow {
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.6),   /* top-edge catch light */
-    0 1px 1px rgba(0, 0, 0, 0.02),            /* contact */
-    0 8px 16px -4px rgba(0, 0, 0, 0.04),      /* near ambient */
-    0 24px 32px -8px rgba(0, 0, 0, 0.06);     /* far ambient */
-}
-:root[data-theme="dark"] .dock-shadow {
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 1px 1px rgba(0, 0, 0, 0.3),
-    0 8px 16px -4px rgba(0, 0, 0, 0.5),
-    0 24px 32px -8px rgba(0, 0, 0, 0.6);
-}
-```
-
-Opacities are 2–6% in light. Dark is a different shadow, not a re-tint (depth law 5): shadows ~10× stronger (4% black on `#0b0b0b` is invisible), highlight ~6× weaker (0.6 white on dark is a glowing edge, not a catch light).
-
-**Extracted the moment it appeared twice.** This ~400-character string was once inline in five places here, each with a dark twin. Not being a colour, it *can't* be a design token (colour law 10), so a class is its only home.
-
-→ Every elevation tier, the pocket's edge, and stacking inside a glass surface: `glass/depth/depth-cues.md`
+`.dock-shadow`: four layers, one light (depth law 4), 2–6% black in light and a different shadow in dark (depth law 5); one class with its dark twin, not a token or a JS constant. → `glass/depth/assets/glass.css`; tiers, the pocket's edge, stacking: `glass/depth/depth-cues.md`
 
 ## 6. A gradient edge, without a wrapper or a mask
 
@@ -141,54 +113,13 @@ The class drops on `animationend`; under reduced motion, plain accent colour.
 
 ## 8. Fallbacks
 
-Depth law 15, at glass's tokens.
-
-### `prefers-reduced-transparency`
-
-```css
-/* AFTER both theme blocks — it re-declares the same properties. */
-@media (prefers-reduced-transparency: reduce) {
-  :root, :root[data-theme="dark"] {
-    --glass-nav-bg: var(--color-gray-100);
-    --glass-panel-bg: var(--color-gray-100);
-    --folder-glass-bg: var(--color-background-100);
-  }
-  .glass-nav, .glass-panel, .folder-glass {
-    backdrop-filter: none;
-  }
-}
-```
-
-### `prefers-contrast: more`
-
-```css
-@media (prefers-contrast: more) {
-  .glass-nav, .glass-panel, .folder-glass { border-color: var(--color-gray-1000); }
-}
-```
-
-### `@supports` — the gap in the reference implementation
-
-The reference implementation has **no `@supports` guard**, so without `backdrop-filter` it gets a bare 72% tint: legible, but weak. `glass/depth/assets/glass.css` ships with the guard:
-
-```css
-.glass-nav { background: var(--color-gray-100); }   /* opaque baseline */
-
-@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
-  .glass-nav {
-    background: var(--glass-nav-bg);
-    backdrop-filter: blur(20px) saturate(1.8);
-  }
-}
-```
-
-**Don't hand-write `-webkit-backdrop-filter`.** Tailwind v4's Lightning CSS adds it and keeps only the last of a hand-written pair, so the site ships the prefix alone and Firefox loses every blur (`glass/depth/performance-and-fallbacks.md`).
+Depth law 15, at glass's tokens, in `glass/depth/assets/glass.css`: reduced transparency swaps the tints to `gray-100` / `background-100` and drops the filter, after both theme blocks; `prefers-contrast: more` turns the edge `gray-1000`; an `@supports` guard over a `gray-100` baseline, which the site lacks. **Never hand-write `-webkit-backdrop-filter`**: Lightning CSS keeps only the last of a pair, and Firefox loses every blur (§9).
 
 ## 9. Performance
 
 Depth law 16, within glass's budget: three or four surfaces at most, each small — a dock a few hundred pixels wide, not a full-viewport overlay — and closed menus unmount.
 
-→ What keeps it affordable here, and the prefix bug in detail: `glass/depth/performance-and-fallbacks.md`
+→ What keeps it affordable, and the prefix bug: `glass/depth/performance-and-fallbacks.md`
 
 ## 10. Confirmations
 

package/plugins/keyline/skills/keyline/glass/layout/assets/layout-tokens.css

@@ -4,8 +4,8 @@
 
 @theme {
   /* ── The measure ────────────────────────────────────────────────────────
-     640px outer, 32px padding → 576px of text. At 16px prose that's ~75–85
-     characters per line: the top of the comfortable range, which is the
+     640px outer, 32px padding → 576px of text. At the 14px prose size that's
+     ~90 characters per line (85–95): past the comfortable range, which is the
      right place for a site that expects sustained reading (long lines are
      efficient once the reader is committed, and 1.75 leading pays for the
      longer return sweep).
@@ -139,7 +139,9 @@
              one dock. Renders as a true sub-pixel hairline on retina and
              rounds UP to 1px elsewhere, so it degrades rather than vanishes.
      1px     a real edge — where a card ends.
-     2px     a mark with editorial weight — a blockquote rule, a focus ring.
+     2px     a focus ring; imported Markdown's blockquote rule.
+     3px     the authored pull quote's bar — a rounded flex child, not a
+             border, since a border can't be rounded on its own.
 
    On translucent surfaces use the ALPHA ramp (border-gray-alpha-400). A
    solid border on glass doesn't participate in what's behind it and reads as

package/plugins/keyline/skills/keyline/glass/layout/guide.md

@@ -14,7 +14,7 @@ For mostly-text interfaces, where layout should get out of the way. One decision
 }
 ```
 
-At most 576px of text, roughly 75–85 characters at 16px: the top of comfortable, chosen for sustained reading. **Every page uses the class** (layout law 1).
+At most 576px of text, about 90 characters a line (85–95) at the 14px prose size: past comfortable on purpose, with prose leading opened to match. **Every page uses the class** (layout law 1).
 
 - **Non-text content may leave the column**: a masonry image wall has no reading measure, so it goes full-bleed.
 - **An article's cover image stays in it.** Bled wide, it becomes a banner *above* the article, not part of it.
@@ -40,16 +40,16 @@ Rail and column share one centred 1280px frame, so their gap holds from 1280px u
 ## 3. Spacing groups; asymmetry is the mechanism
 
 ```
-mt-11  (44px)   ← heading
+mt-10  (40px)   ← heading
 mb-3   (12px)
                 ← the paragraph it introduces
 ```
 
-~3.5:1 above to below makes them one unit (layout law 2). It holds at every scale:
+~3.3:1 above to below makes them one unit (layout law 2). It holds at every scale:
 
 | Relationship | Inner | Outer | Ratio |
 |---|---|---|---|
-| Heading → its paragraph | 12px below | 44px above | 3.7:1 |
+| Heading → its paragraph | 12px below | 40px above | 3.3:1 |
 | List items → the next block | 8px between | 24px below | 3:1 |
 | Bio paragraphs → the links after | 16px between | 32px after last | 2:1 |
 | Section heading → its content | 16–32px | 36px+ between sections | ~2:1 |
@@ -88,7 +88,8 @@ Glass sets the corner shape on everything, pseudo-elements included, with no exc
 |---|---|
 | `0.5px` | Chrome borders, dividers, glass edges |
 | `1px` | Card borders, rings, disclosure outlines |
-| `2px` | Quote rules, focus rings |
+| `2px` | Focus rings, an imported Markdown quote's rule |
+| `3px` | The pull-quote bar: a rounded flex child, not a border |
 | `1px` (`h-px`) | Table-of-contents markers |
 
 Weight follows the job (layout law 6): dividing icon groups inside one dock, 0.5px; defining a card's edge, 1px. On translucent surfaces the edge is the **alpha ramp** (`border-gray-alpha-400`; see `glass/color/guide.md`).
@@ -247,10 +248,10 @@ The domain checklist applies in full; these are glass's values for it.
 
 - [ ] `.col` — 640px, 32px padding — on every page; article covers stay in it.
 - [ ] Rails in the 1280px frame: `left-8`, `w-[196px]`, `sticky top-28`, `max-h-[calc(100dvh-11rem)]`, shown from `xl`.
-- [ ] Prose headings `mt-11` / `mb-3`; home sections `py-9`; long pages `mt-16 border-t pt-10`, the first `mt-14`.
+- [ ] Prose headings `mt-10` / `mb-3`; home sections `py-9`; long pages `mt-16 border-t pt-10`, the first `mt-14`.
 - [ ] Rules between Work, Experience and Life only; Watching and Socials follow on.
 - [ ] Radii from the ladder: 6 / 9 / 10 / 12 / 16px and full; `superellipse(1.5)` on everything.
-- [ ] 0.5px chrome, 1px object edges, 2px marks; `gray-alpha` on translucent surfaces.
+- [ ] 0.5px chrome, 1px object edges, 2px focus rings, the pull quote's 3px rounded bar; `gray-alpha` on translucent surfaces.
 - [ ] `MobileDock` / `DesktopDock` and `SectionNav` / `SectionNavCompact`, sharing data and rows.
 - [ ] The gallery opens on the wall; its layout lives in module memory.
 - [ ] `pb-28` under the dock on every page that can end near the viewport bottom.

package/plugins/keyline/skills/keyline/glass/layout/measure-and-rhythm.md

@@ -6,7 +6,7 @@ Glass's values for layout laws 1–3; the derivations and reasons every preset s
 
 `.col` (§1 of the guide) is 640px outer with 32px padding each side → **576px of text**.
 
-At 16px prose that's roughly 75–85 characters per line, at the top of the comfortable range on purpose: long lines are efficient once the reader is committed, and 1.75 leading compensates for the longer return sweep. At 14px UI copy the column holds ~85–95 characters, which is fine because that text is scanned, not read.
+At the 14px prose size that's about 90 characters a line (85–95, measured in Archivo), past the comfortable range on purpose: long lines are efficient once the reader is committed, and 1.75 leading compensates for the longer return sweep. At 16px the same column would hold 75–85.
 
 The padding does double duty: on a 375px phone the column is `375 − 64 = 311px`, and on desktop the 32px keeps text off the edge of a maximised window.
 
@@ -64,13 +64,13 @@ Tailwind's 4px scale, with a preference for a few well-worn values:
 | `7` | 28 | Capability groups |
 | `8` | 32 | Section heading → content, column padding |
 | `9` | 36 | Home section padding |
-| `10` | 40 | Section content after a rule |
-| `11` | 44 | Prose heading top margin |
+| `10` | 40 | Prose heading top margin, section content after a rule |
+| `11` | 44 | Between roles on the experience page |
 | `14` | 56 | First section on a long page |
 | `16` | 64 | Between major sections on a long page |
 | `20`/`28` | 80/112 | Page top/bottom padding |
 
-The values in heaviest use are `2.5`, `3.5`, `9`, `11` — the half-steps and odd numbers. They exist because 8/12/36/44 are where the *asymmetry ratios* land, not because the scale demanded them.
+The values in heaviest use are `2.5`, `3.5`, `9`, `10` — mostly half-steps and odd numbers. They exist because 10/14/36/40 are where the *asymmetry ratios* land, not because the scale demanded them.
 
 ## Asymmetry, in detail
 

package/plugins/keyline/skills/keyline/glass/layout/radius-and-elevation.md

@@ -46,9 +46,10 @@ The rule is in §4 of the guide: `superellipse(1.5)` on every element and pseudo
 |---|---|---|
 | 0.5px | `border-[0.5px]`, `h-[0.5px]` | Chrome borders, dividers, glass edges |
 | 1px | `border`, `ring-1`, `h-px` | Card borders, TOC markers |
-| 2px | `border-l-2` | Quote rules, focus rings |
+| 2px | `outline-2`, `border-l-2` | Focus rings, an imported Markdown quote's rule |
+| 3px | `w-[3px] rounded-full` | The pull-quote bar |
 
-By job (layout law 6): two groups of icons within one dock, 0.5px; where a card ends, 1px; a blockquote's left rule, 2px.
+By job (layout law 6): two groups of icons within one dock, 0.5px; where a card ends, 1px; a focus ring, 2px. The authored pull quote's bar is 3px and rounded, so a flex child rather than a border (`glass/type/long-form-prose.md`, Quotes); imported Markdown, which can't take classes, keeps a 2px `gray-alpha-300` border.
 
 Vertical dividers use `w-[0.5px]` with an explicit height and `self-center`:
 

package/plugins/keyline/skills/keyline/glass/motion/easing-and-duration.md

@@ -68,7 +68,7 @@ The class is applied only on an explicit toggle, then removed:
 
 ```ts
 export function setThemeChoice(choice: ThemeChoice): void {
-  localStorage.setItem(KEY, choice);
+  try { localStorage.setItem(KEY, choice); } catch { /* won't persist */ }
   const root = document.documentElement;
   root.classList.add("theme-transition");
   applyTheme(choice);

package/plugins/keyline/skills/keyline/glass/motion/guide.md

@@ -38,7 +38,7 @@ Glass uses two of law 4's classes:
 
 One curve for the whole site. The `1.1` end control point overshoots slightly and settles back, physical but not bouncy. The exceptions:
 
-- **Opacity-only micro-transitions**: `ease-out` at 100ms.
+- **100ms opacity hovers and icon fills** (§13): `ease-out`. Opacity entrances (`.reveal`, the route fade) keep the house curve on purpose: on opacity the overshoot clamps at 1.
 - **The theme crossfade**: plain `ease`.
 - **Anything spring-driven**: no bezier at all.
 - **Any track that also drives a filter**, or any property floored at zero (law 5): expo-out, `cubic-bezier(0.16, 1, 0.3, 1)`, which never exceeds 1. It is the same intent in a curve legal for the property, not a second character.
@@ -116,11 +116,7 @@ The details that keep it from flickering are in `domains/motion/patterns.md`, th
 
 ### When the DOM element isn't enough
 
-A *photograph* travelling between layouts escalates to the GPU (law 13): one viewport-sized canvas above the gallery draws the open photo into a screen rect, four numbers in a uniform, no reflow. The wall stays DOM, since a hundred tiles as textures is ~590MB before atlasing; the open photo is `alt=""`, its labels sitting beside it; failure returns `null` and keeps the caller's `<img>`.
-
-**Carry the reading position across**: open the other layout on the tile nearest the viewport centre, measured before React commits it, and give each end its own rect around a shared centre (law 8).
-
-→ The measurement (`centreFrame`) and the WebGL notes: `glass/motion/shared-element.md`, escalating to the GPU
+A *photograph* travelling between layouts escalates to the GPU (law 13), opening on the tile nearest the viewport centre (law 8): `glass/motion/shared-element.md`, escalating to the GPU
 
 ## 7. Reduced motion
 
@@ -152,34 +148,11 @@ One passive listener and one rAF per behaviour (law 12; the shape is in `domains
 
 ## 9. Reveal on scroll
 
-CSS animates; JavaScript only marks an element as arrived:
-
-```css
-.reveal { opacity: 0; transform: translateY(8px);
-          transition: opacity 300ms var(--ease-geist), transform 300ms var(--ease-geist); }
-.reveal[data-in] { opacity: 1; transform: translateY(0); }
-
-@media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
-}
-```
-
-`threshold: 0` with `rootMargin: "0px 0px -40px 0px"`, one-shot, re-run on the pathname. 8px of travel registers without a page of paragraphs seeming to slide. Every guard is law 11 and `domains/motion/guards.md`; the two the site hit:
-
-- **A fractional threshold on a tall element.** Every rendered SKILL.md on the site, eight to thirteen thousand pixels in one `.reveal`, once sat invisible at opacity 0 behind `0.1`.
-- **A class the framework owns.** Tag-filtered rows went blank as the pointer left, when React rewrote a state-dependent `className` and wiped an `in` added with `classList.add`. Hence `data-in`.
-
-The no-JavaScript reset, in the head:
-
-```html
-<noscript>
-  <style>.reveal { opacity: 1 !important; transform: none !important; }</style>
-</noscript>
-```
+300ms on the house curve, 8px of travel, `threshold: 0`, `rootMargin: "0px 0px -40px 0px"`, marked by `data-in`; the guards are law 11, whose two bugs are this site's. → `glass/motion/assets/motion-tokens.css`, `glass/motion/assets/useReveal.ts`
 
 ## 10. Performance: `m` not `motion`
 
-`m.div` inside `<LazyMotion features={domAnimation} strict>`, never a bare `motion.*` (`domains/motion/performance.md`). The menu animates a bare `<m.div>` around the `glass-panel`, so the wrapper scales and the child carries the blur (law 13).
+`m.div` inside `<LazyMotion features={domAnimation} strict>`, never a bare `motion.*` (`domains/motion/performance.md`). The menu's wrapper scales and its `glass-panel` child carries the blur (law 13; `glass/depth/guide.md` §3).
 
 ## 11. Hover intent
 
@@ -204,11 +177,7 @@ active:scale-[0.92]   /* 8% — felt, not seen */
 
 On `pointerdown` (law 3).
 
-The site synthesises a "tok" on hover and click (Web Audio, no asset files): a sine fundamental, a fast-decaying marimba-like 3.9:1 partial, and a lowpassed noise transient for the wooden attack. Hover is quiet and high (1200Hz, 0.09s, 0.05 gain), click lower and louder (900Hz, 0.14s, 0.13 gain); it's gated on the autoplay policy, muteable, and persisted. Dense surfaces opt out of the hover tick with `[data-quiet-hover]`; clicks still sound. The rules for arming and muting are in `domains/motion/patterns.md`, sound.
-
-**Sound can be a phrase, not just an event.** The opening screen's run, a note per photograph, is written out in A major pentatonic, where no two notes clash, so a run cut short by a failed image still resolves; the landing note, the only accented one, sits a fifth *below* the start, closing the phrase rather than adding a step.
-
-Sound is *on* by default here, which is defensible only on a personal site and only if you're confident. → Synthesis walkthrough and delegation pattern: `glass/motion/sound.md`
+Sound is *on* by default here, defensible only on a personal site: a synthesised "tok" on hover and click, muteable; `[data-quiet-hover]` silences hover on dense surfaces. → `glass/motion/sound.md`; the rules: `domains/motion/patterns.md`, sound
 
 ## 13. Fill means chosen
 
@@ -223,7 +192,7 @@ export const detailFade = (on: boolean) =>
   `transition-opacity duration-200 ease-out motion-reduce:transition-none ${on ? "opacity-0" : "opacity-100"}`;
 ```
 
-**200ms `ease-out`, not the house curve**: overshoot suits travel, not a fade. The knockout mask for interior lines is in `domains/motion/patterns.md`, fill means chosen.
+**200ms `ease-out`, not the house curve** (§2). The knockout mask for interior lines is in `domains/motion/patterns.md`, fill means chosen.
 
 **How the marks that can't fill signal instead:**
 
@@ -277,7 +246,7 @@ The domain checklist first; then glass's values:
 
 - [ ] Every duration on the ladder: no 250ms, 500ms or 1s.
 - [ ] Off-ladder timing is the subject of the moment (the 620ms dissolve) or a once-a-session set piece, and says which.
-- [ ] `--ease-geist` everywhere, plus `ease-out` for opacity-only, plain `ease` for the theme fade, and expo-out on any track driving a filter.
+- [ ] `--ease-geist` everywhere, opacity entrances included, plus `ease-out` for 100ms opacity hovers and icon fills, plain `ease` for the theme fade, and expo-out on any track driving a filter.
 - [ ] Menus open on the `GROW`/`CROSS` pair and close on `CLOSE`.
 - [ ] Hover timed by area: a link 100ms, a card-sized wash 200ms.
 - [ ] No translate on hover, bar the folder's rising cards.

package/plugins/keyline/skills/keyline/glass/motion/reduced-motion.md

@@ -60,7 +60,7 @@ One variable turns a blur-crossfade into a plain crossfade; `blur(0px)` → `blu
 
 ## In CSS
 
-The `.reveal` rule is §9 of `glass/motion/guide.md`; the theme crossfade's opt-in block is in `glass/motion/easing-and-duration.md`. The route fade:
+The `.reveal` rule is in `glass/motion/assets/motion-tokens.css`; the theme crossfade's opt-in block is in `glass/motion/easing-and-duration.md`. The route fade:
 
 ```css
 @media (prefers-reduced-motion: reduce) {

package/plugins/keyline/skills/keyline/glass/motion/shared-element.md

@@ -114,7 +114,7 @@ export type Rect = { x: number; y: number; width: number; height: number };
 export function lerpRect(a: Rect, b: Rect, t: number): Rect { /* … */ }
 ```
 
-The rules are law 13 and `domains/motion/performance.md`, escalating to the GPU. Here the wall stays DOM and the open photo is `alt=""`, its labels in the strip beside it.
+The rules are law 13 and `domains/motion/performance.md`, escalating to the GPU. Here the wall stays DOM, since a hundred tiles as textures is ~590MB before atlasing, and the open photo is `alt=""`, its labels in the strip beside it.
 
 **Failing returns `null`:**
 

package/plugins/keyline/skills/keyline/glass/motion/sound.md

@@ -169,7 +169,10 @@ It's still a set piece, not a texture — once a session. See §14 of `glass/mot
 ## Mute, and persistence
 
 ```ts
-let muted = localStorage.getItem("ui-sound") === "off";
+// Every storage access is guarded: it throws in some private modes.
+let muted = (() => {
+  try { return localStorage.getItem("ui-sound") === "off"; } catch { return false; }
+})();
 
 export function setMuted(value: boolean): void {
   muted = value;

package/plugins/keyline/skills/keyline/glass/type/assets/type-tokens.css

@@ -396,8 +396,10 @@
     white-space: nowrap;
   }
 
+  /* Imported Markdown can't take the authored pull quote's 3px rounded bar
+     (glass/type/assets/prose.tsx), so it keeps a plain 2px rule. */
   .prose-imported blockquote {
-    padding-left: 14px;
+    padding-left: 15px;
     border-left: 2px solid var(--color-gray-alpha-300);
     color: var(--color-faint);
   }

package/plugins/keyline/skills/keyline/glass/type/guide.md

@@ -108,7 +108,7 @@ Archivo's true italic is a separate file whose slant fights its geometric letter
 ```tsx
 // From the inline markdown renderer
 if (bold) return <strong className="font-medium text-gray-1000">{text}</strong>;
-if (em)   return <em className="text-gray-800">{text}</em>;
+if (em)   return <em className="text-muted">{text}</em>;
 ```
 
 Why the mapping works, and the semantic tags it keeps: domain law 9 and `domains/type/prose-and-emphasis.md`.
@@ -184,9 +184,7 @@ Glass's two systems (domain law 8):
 
 The ranges overlap, so leading and measure carry the distinction. Reading leading on a UI row is the usual symptom here: it grows, and the dock loses its rhythm.
 
-**UI copy is sentence case, generated labels included.** Buttons, column heads, field names, dialog titles, toasts, and anything a template builds from a key: first word and proper nouns capitalised, acronyms and third-party names as written. Labels generated from code drift into Title Case unnoticed, and a second case is a second voice.
-
-**Icons beside text** follow domain law 13: 13px text takes a 13–14px icon with a 4–6px gap. It is the mass problem `glass/color/guide.md` solves for colour, by resting icons a tier below, solved here for size.
+**Labels are sentence case, generated ones included** (patterns law 1), and **icons beside text** follow domain law 13: 13px text, a 13–14px icon, a 4–6px gap.
 
 → How prose blocks are set — headings, quotes, lists, spacing: `glass/type/long-form-prose.md`
 

package/plugins/keyline/skills/keyline/scripts/check.mjs

@@ -277,6 +277,9 @@ export function run(argv) {
   }
 
   const result = check({ root: opts.root, paths: opts.paths.length ? opts.paths : ["."], ignores: opts.ignores, rules: opts.rules });
+  // The verdict counts every finding, so --quiet trims the output, never the exit code.
+  const all = summarise(result.findings);
+  const failed = all.error > 0 || (opts.strict && all.warning > 0);
   if (opts.quiet) result.findings = result.findings.filter((f) => f.severity === "error");
   const s = summarise(result.findings);
 
@@ -286,7 +289,7 @@ export function run(argv) {
   } else {
     console.log(human(result, { all: opts.all, color: process.stdout.isTTY && !process.env.NO_COLOR }));
   }
-  return s.error > 0 || (opts.strict && s.warning > 0) ? 1 : 0;
+  return failed ? 1 : 0;
 }
 
 if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {

package/plugins/keyline/skills/keyline/system/design-md.md

@@ -80,9 +80,9 @@ Copy this shape. Drop any table or row that doesn't apply; add project roles und
 
 | Role | Name here | Value |
 |---|---|---|
-| `z.popover` | `z-popover` | 50 |
-| `z.overlay` | `z-overlay` | 80 |
-| `z.toast` | `z-toast` | 90 |
+| `z.popover` | `z-popover` | 20 |
+| `z.overlay` | `z-overlay` | 60 |
+| `z.toast` | `z-toast` | 70 |
 
 **Breakpoints**
 
@@ -123,7 +123,7 @@ Plus springs by character, and the reduced-motion policy in one sentence.
 ## Decisions
 
 - YYYY-MM-DD — Card titles at 500, not 600: they read heavy beside the pane title. (User decision; the type guide dial.)
-- YYYY-MM-DD — Three weights, not two: the billing table needs a middle weight for column totals. (Client feedback; the type guide dial override.)
+- YYYY-MM-DD — Three weights, not two: the billing screens need a 600 heading weight above the 500 that lifts lines inside rows. (Client feedback; the type guide dial override.)
 - YYYY-MM-DD — Page on white `surface.page`, not the grey `bg-neutral-50`: the text tiers failed against the grey. (Law; the colour guide.)
 
 ## Open issues

package/plugins/keyline/skills/keyline/system/guide.md

@@ -46,7 +46,7 @@ node <keyline>/scripts/contrast.mjs --ladder "#ffffff" "#16161a" "#4b4b52" "#6b6
 
 ## 3. Choose the preset
 
-From what the reader is mostly doing — reading, working, or being persuaded — propose `editorial`, `product` or `expressive` (`presets.md`). Offer `glass` only when the user wants modimihir.com's exact system rather than their own; it fills the dials from `glass/`, under the project's existing names wherever it has them.
+From what the reader is mostly doing — reading, working, or being persuaded — propose `editorial`, `product` or `expressive` (`presets.md`). Offer `glass` only when the user wants modimihir.com's exact system rather than their own; it fills the dials from the tables in each `glass/<domain>/guide.md`, under the project's existing names wherever it has them.
 
 State the evidence: *"Mostly long-form pages under `app/blog`, two weights in use, one accent — this reads as `editorial`."* Mixed projects get a base preset plus areas: `product`, with `app/(marketing)/** → expressive`.
 
@@ -70,20 +70,16 @@ Don't ask what you can find out, and don't ask for approval of the whole mapping
 Follow `system/design-md.md`: the project's names in `Name here`, canonical roles in `Role`, values as the source states them, measured contrast for every text tier, per-theme columns only where themes exist, nothing for roles the project lacks. Then:
 
 - **`## Decisions`** — every dial set differently from the preset, with its reason, or a question mark if unknown.
-- **`## Open issues`** — every law the code breaks, one line each with evidence (a ratio, a count, a file). Before writing them, read the law headings (the `### N.` lines) of each domain guide you cite, so every citation names the right law. **Don't fix anything** unless asked; a setup run that also rewrites forty components can't be reviewed.
+- **`## Open issues`** — every law the code breaks, one line each with evidence (a ratio, a count, a file). Cite each law by the right number (`commands/init.md`). **Don't fix anything** unless asked; a setup run that also rewrites forty components can't be reviewed.
 
 Tell the user briefly: the preset and why, how many roles mapped cleanly, what you proposed names for, and the three most important open issues.
 
 ## 6. Generating tokens, only when asked
 
-The set ships no token files, because the right file depends on the stack. Asked for tokens — for a new project, or to fill `proposed` rows — generate them **in the project's existing mechanism**: a Tailwind v4 `@theme` block, a `tailwind.config` extension, CSS custom properties, a JS theme object, a design-tokens JSON. Match the existing layout and naming; never add a second token system beside the first.
+Apart from the `glass` preset's drop-in files under `glass/<domain>/assets/`, the set ships no token files, because the right file depends on the stack. Asked for tokens — for a new project, or to fill `proposed` rows — generate them **in the project's existing mechanism**: a Tailwind v4 `@theme` block, a `tailwind.config` extension, CSS custom properties, a JS theme object, a design-tokens JSON. Match the existing layout and naming; never add a second token system beside the first.
 
 With no tokens yet, `presets.md` and each domain guide's `## Dials` section give defaults. Say they're defaults, choose names with the user, and record the choices in `DESIGN.md`.
 
-## How the other commands use this file
-
-Each domain command reads `DESIGN.md`, finds its section, and works in the project's names. If the file is missing, it runs steps 1–2 for its own domain, does the task and recommends `/keyline init` — it doesn't refuse. A decision that changes the system — a new role, a moved dial, a law knowingly broken, a change a law forced that a later session might undo — goes back under `Decisions` — dated, marked user decision, client feedback or law, newest first, replacing what it supersedes — which is what keeps the file true after the first day.
-
 ## Checklist
 
 - [ ] An existing `DESIGN.md` was reconciled, not overwritten; every user-chosen name and decision survived.

package/plugins/keyline/skills/keyline/system/presets.md

@@ -25,34 +25,34 @@ When the evidence doesn't settle it, propose one, say what evidence you used, an
 
 *The interface should disappear so the reading doesn't.* Restraint is the point, and a single loud moment reads as craft because nothing else competes with it.
 
-- **Type** — a dense ladder that keeps the reading loudest, with an article's title clearly opening the piece (up to 2.25 × body); index and chrome titles lower. Two weights. A sans for interface text is allowed beside a serif reading face. Roles that share a size separate on weight, leading or a rule.
-- **Colour** — near-monochrome. One accent, spent on focus. At most one further chromatic exception, justified structurally. Links usually in the text colour.
-- **Layout** — one reading measure every page shares; rails and asides live outside it. Generous, asymmetric vertical rhythm.
-- **Surfaces** — mostly flat. Elevation reserved for things that float; translucency, if any, only on chrome.
-- **Motion** — short, and only where it makes a change legible. Nothing loops. One set piece, at most, once a session.
+- **Type** — a dense ladder that keeps the reading loudest.
+- **Colour** — near-monochrome, the accent spent on focus.
+- **Layout** — one reading measure every page shares.
+- **Surfaces** — mostly flat; translucency, if any, only on chrome.
+- **Motion** — short, and only where it makes a change legible.
 
 ## `product`
 
 *The interface is a tool, and the reader is fluent in it.* Density, predictability and scannability beat atmosphere. Signal has to survive a screen full of data.
 
-- **Type** — tighter, smaller steps; UI and data roles dominate. Two weights, strong at 500; labels in sentence case, never uppercase eyebrows. Tabular figures on every number, scoped to numeric elements.
-- **Colour** — near-monochrome neutral ground with a real status palette (danger, warning, success, info), each a foreground/background pair. One accent hue for primary action, focus, selection (the current nav item on a 25% accent tint with accent icon and label) and the primary data series, and no second highlight hue. Brand colour already in the design stays where it has a job. Colour marks what needs a person, not what is finished. Colour for meaning, never for decoration.
-- **Layout** — an app shell rather than a single measure: one navigation surface — a sidebar holding every destination, no top bar repeating it — then content and an optional inspector, every page under its own header bar, forms and settings capped at a form measure. Improving one screen keeps the navigation it has. Sections stack, each opened by its heading, and peer sections are parted by a full-bleed hairline; no bento mosaics or stat tiles. That is the default for a new system; an existing design keeps its own section device (`commands/refine.md`, the limits). Tighter spacing, still grouped asymmetrically. Prose inside the product (settings help, empty-state copy) still sits at a reading measure.
-- **Surfaces** — content on the page, rows parted by hairlines; a data table may take one hairline frame; a settings group that saves together takes a hairline panel; a card only for one object, never a card in a card. A clear, small elevation ladder: flat page, raised cards, floating menus, modal overlays. Hairlines do more work than shadows.
-- **Motion** — shortest of the three. State feedback is near-instant; nothing delays a repeated action. Springs only where something is dragged or thrown.
+- **Type** — tighter, smaller steps; UI and data roles dominate.
+- **Colour** — near-monochrome with a real status palette, and one accent hue that acts.
+- **Layout** — an app shell rather than a single measure; tighter spacing, still grouped.
+- **Surfaces** — content on the page, rows parted by hairlines; a card only for one object.
+- **Motion** — shortest of the three; nothing delays a repeated action.
 
 ## `expressive`
 
 *The interface is making an impression, usually once.* Scale, colour and motion are allowed to carry brand — but still by rule, or it turns into a template.
 
-- **Type** — a real display tier far above body, possibly a second family for it. Display, title and section headings fluid. Wider scale, still assigned to roles rather than derived from a ratio. Tracking correction matters most here.
-- **Colour** — a brand palette used broadly, with rules about where each colour may go. Chromatic exceptions still named and counted, just more of them.
-- **Layout** — sections may break the reading measure and go full-bleed; the measure still governs any paragraph longer than two lines.
-- **Surfaces** — depth, gradients and translucency allowed as brand material, each with its fallback.
-- **Motion** — longer and more characterful on entrances; exits still get out of the way. A few set pieces, each once. Reduced motion still gets a real alternative.
+- **Type** — a real display tier far above body, possibly a second family.
+- **Colour** — a brand palette used broadly, each colour placed by rule.
+- **Layout** — sections may go full-bleed; paragraphs keep the measure.
+- **Surfaces** — depth, gradients and translucency as brand material, each with its fallback.
+- **Motion** — longer and more characterful on entrances; exits still get out of the way.
 
 ## `glass`
 
-The Glass preset's exact values: `editorial` in character, with every dial already decided on [modimihir.com](https://modimihir.com). Offer it only when the user wants that system itself rather than their own — `/keyline init` copies its values from `glass/` into `DESIGN.md`, in the project's own names wherever the project already has names, and `glass/<domain>/guide.md` supplies the exact recipes, with drop-in token files and components under each `assets/`.
+The Glass preset's exact values: `editorial` in character, with every dial already decided on [modimihir.com](https://modimihir.com). Offer it only when the user wants that system itself rather than their own — `/keyline init` copies its values from the tables in each `glass/<domain>/guide.md` into `DESIGN.md`, in the project's own names wherever the project already has names, and each guide supplies the exact recipes, with drop-in token files and components under its `assets/`.
 
 A `glass` project can still override a dial. It should expect to: the Glass values were chosen for one text-heavy portfolio, and a project that isn't one will find the places they don't fit.

package/plugins/keyline/skills/keyline/system/roles.md

@@ -32,7 +32,7 @@ Sizes, leading, tracking and weight all hang off these. Owned by the type guide.
 | `type.data` | Numerals that must align — tables, prices, stats. Often `type.ui` or `type.body` plus tabular figures rather than its own size |
 
 Families: `family.text`, `family.display` (only if different), `family.ui` (only if different — interface text beside a serif reading face), `family.mono`.
-Weights: `weight.regular`, `weight.strong`. Two optional ones, each only where the preset allows it: `weight.medium`, a middle weight for dense UI where a project records a job the other two can't carry, and `weight.display`, the display tier's own weight, never reused below it.
+Weights: `weight.regular`, `weight.strong`. Two optional ones, each only where the preset allows it: `weight.medium`, a third weight above `weight.strong` for headings on a dense screen, only where a project records a job the other two can't carry, and `weight.display`, the display tier's own weight, never reused below it.
 
 ## Colour
 
@@ -62,7 +62,7 @@ A project may slot extra tiers between secondary and tertiary (the Glass preset
 | `surface.raised` | A component's own surface — a card, an input, a menu |
 | `surface.hover` | That surface, hovered |
 | `surface.pressed` | That surface, pressed or active |
-| `surface.selected` | A persistent selected state, distinct from hover. Under product and expressive, the accent at about 25% over its surface, carrying `accent.ink` at 4.5:1 |
+| `surface.selected` | A persistent selected state, distinct from hover. Under product and expressive, the accent tint colour law 7 defines |
 | `surface.floating` · `surface.overlay` | A floating or modal level's own surface, where it differs from `surface.raised` — usually only in dark themes, where elevation is shown by lightening |
 | `surface.inverse` | Tooltips, toasts, solid-filled chrome |
 
@@ -85,8 +85,8 @@ A project may slot extra tiers between secondary and tertiary (the Glass preset
 |---|---|
 | `focus` | The focus ring. Must hit 3:1 against every surface it can land on |
 | `accent` · `accent.hover` | The brand or action colour, if the system has one, and its hovered state. `accent` may share a token with `focus` |
-| `status.danger` · `status.warning` · `status.success` · `status.info` | Each a pair — `status.<name>.fg`, a foreground that clears 4.5:1 as text, and `status.<name>.bg`, a background tint — plus `status.<name>.solid` where a filled control needs it (a destructive button). Required in product systems, usually absent in editorial ones |
-| `exception.<name>` | A deliberate chromatic spend outside the accent — one per system in editorial, a few in expressive; in product none by default, plus one hue family per question the reader can't answer at a glance, named `exception.<question>.<member>` (`exception.type.task`, `exception.area.<name>`, `exception.person.<n>`), each listed in `DESIGN.md`. Always named after what it's *for* |
+| `status.danger` · `status.warning` · `status.success` · `status.info` | Each a pair — `status.<name>.fg`, a foreground read as text, and `status.<name>.bg`, a background tint — plus `status.<name>.solid` where a filled control needs it (a destructive button) |
+| `exception.<name>` | A deliberate chromatic spend outside the accent, always named after what it's *for*; a hue family answering one question is `exception.<question>.<member>` (`exception.type.task`, `exception.area.<name>`, `exception.person.<n>`), each listed in `DESIGN.md` |
 
 ## Layout
 
@@ -97,19 +97,19 @@ Owned by the layout guide.
 | `measure.reading` | The width of running text |
 | `measure.wide` | Content that isn't prose but should still align — grids, tables |
 | `measure.app` | An application shell's content area, if there is one |
-| `measure.form` | Forms and settings inside a panel, ≈ 640–760px, so controls stay near their labels |
+| `measure.form` | Forms and settings inside a panel, so controls stay near their labels |
 | `measure.frame` | The wider frame that the reading column and its rails are both anchored to, so the gap between them holds as the window grows |
 | `measure.rail` | The width of a rail in the outer margin — a table of contents, an aside |
 | `gutter` | Horizontal page padding at the smallest width (Material's *margin*) |
 | `grid.columns` · `space.column` | A column grid's count per breakpoint, and the gap between columns (Material's *gutter*). Product and expressive only, and only where unlike blocks sit side by side |
-| `target.min` | The smallest hit area a control may have: 24px under a fine pointer, 44px on touch |
+| `target.min` | The smallest hit area a control may have, per pointer: never under 24px fine or 44px on touch, which a preset's dial may raise |
 | `space.tight` | Inside a group — a label and its value, items in a list |
 | `space.group` | Between groups inside a section |
 | `space.section` | Between sections |
 | `space.heading-above` · `space.heading-below` | The asymmetric pair around a heading. Their *ratio* is the rule, not their values |
 | `radius.pill` · `radius.small` · `radius.control` · `radius.card` · `radius.container` | Smallest to outermost. Concentric corners obey inner = outer − padding; anything away from a corner takes a radius for its size |
 | `hairline.chrome` · `hairline.object` · `rule.emphasis` | Divider weight inside chrome, the edge of an object, and a deliberate heavy rule (a quote bar, a focus ring) |
-| `z.below` · `z.raised` · `z.popover` · `z.dismiss` · `z.nav` · `z.overlay` · `z.toast` · `z.skip-link` | The stacking ladder, low to high. `z.toast` sits over modals, because a notification about a modal's action must not hide behind it |
+| `z.below` · `z.raised` · `z.popover` · `z.dismiss` · `z.nav` · `z.overlay` · `z.toast` · `z.skip-link` | The stacking ladder, low to high (layout law 7) |
 | `bp.<name>` | Breakpoints, named for what changes at them, not for devices |
 
 ## Surfaces and depth
@@ -134,7 +134,7 @@ Owned by the motion guide.
 
 | Role | Job |
 |---|---|
-| `duration.instant` | 0 — press feedback, focus rings |
+| `duration.instant` | Press feedback, focus rings |
 | `duration.micro` | Opacity and colour on hover |
 | `duration.state` | Small state changes: colour, background, icon swaps, small transforms |
 | `duration.popover` | Something small appearing: a hover card, a menu, a chevron |