@ammduncan/easel 0.6.1 → 0.7.0

package/skills/using-easel/SKILL.md

@@ -28,9 +28,9 @@ Triggers are **content-shape**, not user-phrasing. If the answer would be a wall
 
 ## Tools
 
-- **`push({ html, title?, kind? })`** — appends a card. `html` is required; the wrapper sandboxes it in an iframe and injects a baseline design system. `title` is shown in the card header. `kind` is a freeform tag for the chip (`mockup`, `diff`, `explanation`, `comparison`, `diagram`, `progress`, `status`, etc.).
+- **`push({ html, title?, kind?, theme? })`** — appends a card. `html` is required; the wrapper sandboxes it in an iframe and injects a baseline design system. `title` is shown in the card header. `kind` is a freeform tag for the chip (`mockup`, `diff`, `explanation`, `comparison`, `diagram`, `progress`, `status`, etc.). `theme` (`light`|`dark`) seals the card's canvas mode — frozen at push time, never flips with the global toggle; omit to snapshot the current global theme.
 - **`open()`** — force-open a fresh browser tab for this session.
-- **`config({ preset?, theme?, density? })`** — switch palette, mode, or layout live. Presets: `paper` | `aurora` | `slate`. Themes: `light` | `dark`. Density: `carded` | `flat`.
+- **`config({ preset?, theme?, density? })`** — set Easel's own chrome + the default for FUTURE pushes. Presets: `paper` | `aurora` | `slate`. Themes: `light` | `dark`. Density: `carded` | `flat`. Note: this does NOT restyle existing cards — each is a frozen snapshot. To change a card's mode, re-push with `theme`.
 - **`label({ label })`** — name the session ("Roadworthy 401 fix"). Call early once the task focus is clear; re-call when the theme shifts. Pass `""` to clear.
 
 Reply in chat with **one line**: `pushed to easel ↗ — #N`. Do not restate the content.
@@ -84,77 +84,74 @@ Don't pack content. Space carries the rhythm of a presentation.
 
 ### 3. Color
 
-- **The host iframe owns the canvas.** Don't paint `background` on `body` — it fights the host and shows up as a wrong-shade block when the user is in the opposite mode. *Exception:* if a particular push really needs to be dark regardless of host (a code-heavy push, say), then OWN the canvas — `background: #0b0f17; color: #e5e7eb;` on `.wrap` — and commit fully to dark.
+- **You own the canvas — commit to one mode.** A pushed card is an immutable snapshot, sealed at push time; it never flips when the user toggles Easel's global light/dark theme. So pick ONE mode and paint it: set your own `background` AND `color` on `.wrap` (e.g. light: `background: #faf7f0; color: #1a1a1a` — dark: `background: #0b0f17; color: #e5e7eb`). Declare the mode with the push tool's `theme: 'light'|'dark'` param when you've been told which to present in; omit it to snapshot the current global theme. (You *may* leave the surface to the host — the card body behind `.wrap` is frozen too — but painting it yourself is the safe default and what "own the canvas" means.)
 - **One accent only.** Use the wrapper's `var(--ds-accent)` token (it adapts to whichever preset the user picked). Limit accent uses to **3–4 per push**.
 - **Status colors** (red / amber / green) only when content actually maps to status — not as decoration.
 - **Page background is never pure white.** The wrapper uses an off-white (`#fafafa`-ish) or a deep dark depending on the host. If you must paint a card surface inside the push, use `var(--ds-surface)`.
 
-### 4. Light / dark — make EVERYTHING adaptive
+### 4. Light / dark — commit to ONE mode, no responsiveness
 
-Because the host owns the canvas color, **text color and any local card backgrounds must also respond to the user's light/dark mode**. Hardcoding `color: #111` puts black text on a dark canvas and the whole push goes invisible — this has bitten us repeatedly.
+The card is frozen to a single mode, so **don't make it adapt**. Pick light or dark, paint concrete colours for that one mode, and stop. Writing `light-dark()` / `prefers-color-scheme` for the page surface is dead weight — the card won't flip, so the adaptive branch never earns its keep and just risks the wrong half winning. The thing that bit us before — hardcoding `color: #111` onto a *host-controlled* canvas that could be dark — can't happen anymore, because you now control the background too: set them as a pair.
 
-Use CSS `light-dark()` to swap:
+Paint the one mode you chose:
 
 ```html
 <style>
-  :root { color-scheme: light dark; }
   .wrap {
-    color: light-dark(#111, #e5e7eb);
+    background: #faf7f0;          /* light card — pick your surface */
+    color: #1a1a1a;              /* ink to match it */
     padding: 56px 40px 96px;
     font-family: -apple-system, 'Inter', system-ui, sans-serif;
   }
-  /* Scope inheritance so the wrapper's text color reaches every child */
-  .wrap *, .wrap h1, .wrap h2, .wrap p, .wrap li, .wrap span,
-  .wrap div, .wrap b, .wrap em { color: inherit; }
+  /* Push the wrapper's ink into every child so a frame default never leaks.
+     ZERO-specificity (:where) so it neutralises UA link/button colours but is
+     beaten by ANY authored container colour — a hand-rolled dark callout keeps
+     its own ink instead of inheriting .wrap's and vanishing on its dark bg. */
+  :where(.wrap) :where(*) { color: inherit; }
 
-  /* Cards float above whatever canvas the tool gives us — also adapt */
   .card {
-    background: light-dark(#fff, #111827);
-    border: 1px solid light-dark(#e5e5e5, #1f2937);
+    background: #ffffff;
+    border: 1px solid #e0d9c3;
     border-radius: 12px;
     padding: 24px;
   }
-
-  /* Same treatment for any badge, chip, accent shade you'd previously hardcode */
-  .badge {
-    background: light-dark(#f0fdf4, #052e16);
-    color: light-dark(#028043, #6ee7b7);
-  }
+  .badge { background: #f0fdf4; color: #028043; }
 </style>
 <div class="wrap">…</div>
 ```
 
-**Locked-mode containers must lock their own text color too.** Any container that paints a *fixed*, non-adaptive background — a terminal/code block locked to dark, an always-dark callout, a hero filled with a brand color — MUST also set its own text color AND re-scope `color: inherit` to its children. Otherwise it inherits `.wrap`'s `light-dark()` and the text flips to the wrong shade for that container's background in one of the two modes.
+(Dark card: `.wrap { background:#0b0f17; color:#e5e7eb }`, `.card { background:#111827; border-color:#1f2937 }`, `.badge { background:#052e16; color:#6ee7b7 }`.) The `--ds-*` tokens still work if you prefer them — they resolve once to the card's frozen mode and stay put — but for a self-owned canvas concrete colours are clearer.
+
+**Background and ink are always a pair.** Any container that paints its own background — a terminal/code block locked to dark, a callout, a hero filled with a brand color, a white panel on a dark card — MUST also set its own text color (and re-scope `color: inherit` to its children for nested elements). Otherwise it inherits `.wrap`'s committed ink, which may not suit that container's background (dark ink on a dark hero → invisible). (As long as you use the zero-specificity `:where(.wrap) :where(*)` adoption rule above, a single class on the container — `.tip { background:#111; color:#eee }` — is enough; its colour now wins. The old element-qualified form `.wrap div { color: inherit }` was `(0,1,1)` and silently OUTRANKED such a container, flipping its text to the canvas ink — black-on-black — which was the recurring "dark block, text invisible" bug. No `!important` needed anymore.)
 
 #### App / UI recreations are *always* locked-mode
 
 When you're rendering a recreation of a real piece of UI — a mock of an app screen, a component instance, an embedded preview of what the user will actually see — **that mockup owns its theme completely. Don't make it adapt to the host.**
 
-It's a screenshot-equivalent. If the real app is a dark cobalt dashboard with cyan accents, the mockup should be dark cobalt + cyan regardless of whether the user has easel in light or dark mode. If the real app is a warm cream marketing page, the mockup stays warm cream. The host toggle changes the *surrounding explanation*, not the embedded app preview.
+It's a screenshot-equivalent. If the real app is a dark cobalt dashboard with cyan accents, the mockup should be dark cobalt + cyan regardless of the card's own mode. If the real app is a warm cream marketing page, the mockup stays warm cream. This was always the rule for recreations; now the *whole* card works this way (sealed at push time), so a mock just commits to the app's real colours like everything else.
 
 Two reasons:
 1. **Visual fidelity.** A mockup of the app in dark mode looks wrong when paper-light leaks into it. The user is trying to evaluate the implementation, not a translated version of it.
 2. **It removes a class of bugs.** App previews have lots of nested elements (buttons, chips, table cells, modal overlays) — getting every layer to adapt correctly via `light-dark()` is fragile. Locking the whole island is simpler and more faithful.
 
-How to do it: paint the mockup's outer container with the app's actual `background` and `color`, and re-scope `color: inherit` to every descendant so the host's adaptive text doesn't leak in:
+How to do it: paint the mockup's outer container with the app's actual `background` and `color`, and re-scope `color: inherit` to every descendant so the card's own ink doesn't leak in:
 
 ```html
 <style>
   .wrap {
-    /* host-adaptive surrounding prose */
-    color: light-dark(#111, #e5e7eb);
+    /* the card's committed prose mode (one mode, not adaptive) */
+    background: #faf7f0; color: #1a1a1a;
   }
-  .wrap *, .wrap h1, .wrap h2, .wrap p, .wrap li, .wrap span,
-  .wrap div, .wrap b, .wrap em { color: inherit; }
+  :where(.wrap) :where(*) { color: inherit; }   /* zero-specificity: locked islands below keep their own ink */
 
-  /* The app mock — LOCKED to the real app's colors, ignores host mode */
+  /* The app mock — LOCKED to the real app's colors, independent of the card mode */
   .app-mock {
     background: #0a0e1a;        /* the app's actual canvas */
     color: #e5edff;             /* the app's actual ink */
     border-radius: 12px;
     padding: 32px;
   }
-  .app-mock * { color: inherit; }    /* re-scope so .wrap's light-dark() can't leak in */
+  .app-mock * { color: inherit; }    /* re-scope so .wrap's committed ink can't leak in */
   .app-mock .btn-primary {
     background: #3b82f6;
     color: #fff;
@@ -174,7 +171,7 @@ How to do it: paint the mockup's outer container with the app's actual `backgrou
 </div>
 ```
 
-Same principle for light-themed apps: lock to the app's cream/white surface, lock the ink, lock every accent. The host toggle moves the prose around the mock; the mock stays put.
+Same principle for light-themed apps: lock to the app's cream/white surface, lock the ink, lock every accent. Both the prose card and the mock inside it are frozen — neither moves when the user toggles Easel's global theme.
 
 #### Use the actual values, not approximations
 
@@ -388,6 +385,8 @@ Reach for the built-in **`.code`** (alias **`.terminal`**) class instead of hand
 
 Token classes: `.kw` (keywords) · `.string` · `.fn` (functions) · `.prop` (identifiers/properties) · `.num` · `.comment` · `.muted` · `.accent`. Plain `<pre>`/`<code>` are already safe too (bg + ink token pair). Only hand-roll a custom dark container when neither fits — and then obey the locked-mode pairing rule above.
 
+**Reserved names — `code` / `terminal` / `window` are easel primitives.** They paint a locked dark background, so reusing them as your *own* class (`<td class="code">`, `<span class="window">`) inherits that dark fill unintentionally. Two protections: (1) the primitive ink is now locked with `!important`, so a collision renders *readable* dark-on-light instead of invisible dark-on-dark; (2) the viewer logs a console warning when a reserved name lands on an inline/table element. Still — for your own inline code or boxes use a different name (e.g. `mono`, or a plain `<code>` with your styling). The canonical primitive forms are the namespaced **`.easel-code` / `.easel-terminal` / `.easel-window`** (or `[data-easel="code|terminal|window"]`); bare names remain as deprecated aliases.
+
 ### Semantic chips
 
 ```html

package/skills/using-easel/kit/EASEL-GUIDE.md

@@ -0,0 +1,161 @@
+# Easel codegen guide
+
+A short starter so an easel push lands at presentation scale on the first try,
+instead of being iterated up from a dense, small-font, emoji-laden draft.
+
+**This guide is additive.** The `using-easel` SKILL.md already owns the long
+rulebook — the fidelity bar, the type/whitespace/color scales, light/dark +
+locked-mode pairing, the injected `--ds-*` tokens, and the `.window` / `.code` /
+`.terminal` / `.chip` / `.full-bleed` primitives. Read it for any of that. This
+guide adds the **composition** rules the SKILL doesn't make first-class, plus a
+copy-paste scaffold (`easel-base.css`) and an icon sprite (`easel-icons.svg`).
+
+> Lineage: the type/space/color floors trace to Lookbook `fundamentals.md`
+> (`F`-rules) and the generic-AI tells to `anti-patterns.md` (`AP`). The
+> `--ds-*` tokens are easel's `light-dark()` adaptation of Lookbook tokens.
+
+---
+
+## Use the kit
+
+1. Inline the contents of **`easel-base.css`** inside a `<style>` at the top of
+   the push.
+2. Inline **`easel-icons.svg`** once (a hidden `<symbol>` sprite), then reference
+   icons with `<svg class="ic"><use href="#i-git-branch"/></svg>`.
+3. Wrap all content in `<div class="wrap">`.
+
+Everything keys off the wrapper's `--ds-*` tokens with literal fallbacks, so the
+same file renders correctly **standalone** (for a local render-and-look) and
+**inside easel** (where it inherits the user's preset accent + light/dark).
+
+---
+
+## Reserved class names — don't reuse these for your own elements
+
+The wrapper injects **structural primitives** under these class names, and they
+paint a **locked background + ink**. If you put one on your own element (a
+`<td class="code">`, a `<span class="window">`), it inherits the primitive's
+dark fill you didn't ask for:
+
+| Reserved | What it is | If you want it, prefer |
+|---|---|---|
+| `code`, `terminal` | locked-dark code block | `easel-code` / `easel-terminal` / `[data-easel="code"]` |
+| `window` (+ `.dark`, `.desktop`) | macOS window chrome | `easel-window` / `[data-easel="window"]` |
+| `chip` (+ `.bug/.ux/.ok/…`) | semantic glow chip | — (use as documented, or your own name) |
+| `full-bleed` | escapes the prose measure | — (use as documented) |
+
+**Workaround / rule:** for *your own* inline code, monospace cells, or boxes,
+use a different name — the kit ships **`.mono`** for inline code, and you can use
+a plain `<code>` element with your own styling. Reach for `code`/`terminal`/
+`window` **only** when you actually want that primitive, and prefer the
+namespaced `.easel-*` form. (Bare names still work as deprecated aliases, and
+the wrapper now locks their ink with `!important` so a collision renders
+*readable* dark-on-light instead of invisible — but it's still an unwanted block.
+The viewer logs a console warning when a reserved name lands on an inline/table
+element.)
+
+The kit's own generic class names (`card`, `thread`, `callout`, `lanes`,
+`spine`, `node`) are **not** wrapper primitives, so they don't collide with the
+injected CSS — but they *are* generic, so don't also use them as bare names for
+unrelated author elements in the same push.
+
+---
+
+## The 5 composition rules
+
+**1. Presentation scale — body ≥ 18px, nothing below 14px.** [F3 / SKILL §1]
+Lede 46 · title 32 · h2 22 · body 18–21 · eyebrow/mono 14. The scaffold's type
+classes already sit here; don't shrink them to fit more in.
+
+**2. Don't fight the prose measure — go vertical.** [the max-width lesson]
+A default (non-`mockup`) push clamps content to a readable column. That clamp
+only hurts when you push *horizontal density* into it (a 4-up row, side-by-side
+text) — then font size is the only variable left and it collapses. A vertical
+flow *wants* a narrow column, so the measure stops being an enemy and the body
+type stays large. If you genuinely need full width (a wide table, a real app
+screen, a matrix), **escape** the measure with `kind:"mockup"` instead of
+shrinking type — see *Picking `kind`*.
+
+**3. Column count is a function of content, not a default.** [AP20 / SKILL §6–7]
+- A **sequence** of steps → stack vertically (`.spine` + `.connector`).
+- **Parallel siblings** → a grid (`.lanes`, auto-fit), sized so each tile fits
+  its content at ≥16px. Two-up is usually the goldilocks for tiles carrying a
+  name + one line.
+- Never a **4-up row of paragraphs** (crushes type) and never an **all-vertical
+  stack of siblings** (monotonous, endless scroll). Ask: *is the relationship
+  sequential or parallel, and how much does each item carry?*
+
+**4. A locked-background container sets its OWN text colour — on every node.**
+[SKILL §4]
+Any container that paints a *fixed* background (`.thread`, a brand hero, a dark
+callout) must commit its own `color` and re-scope `color: inherit` to its
+children — background and text are a pair: commit one, commit the other. The
+scaffold's adoption rule is `:where(.wrap) :where(*)` (zero specificity), so a
+single class on your container — `.callout { background:#111; color:#eee }` —
+now wins on its own; no `!important` needed. (Earlier the scaffold used the
+element-qualified `.wrap div` form at `(0,1,1)`, which outranked a single-class
+container colour and silently flipped its text to the canvas ink → invisible
+dark-on-dark. That's fixed.) Use the built-in `.thread` / the wrapper's
+`.window` / `.code` where they fit — they already lock both.
+
+**5. SVG icons, never emoji; colour must mean something — and never rank equal
+siblings.** [AP23 / AP24 / P-AS-01 / F17]
+Pull icons from `easel-icons.svg` (`currentColor`, inherits the chip's colour).
+Two traps, both AI-slop:
+- **Status hues on non-status content.** The `.t-success/-warning/-danger` tones
+  are for genuine *status*. Don't paint *categories* (Ignore / Answer / Do /
+  Ship) in green/amber/blue — "Do-work = green" means nothing; it's decoration
+  in a semantics costume. If a real split exists (e.g. *no-work* vs *work*),
+  colour THAT — neutral for one group, the single accent for the other — so
+  colour carries information. Otherwise leave them all neutral and let the icon
+  differentiate.
+- **Emphasising one of N equal siblings.** A coloured left-border / accent fill
+  on one tile in a row of peers (the "accent-bordered hero tile" reflex) reads
+  as a stuck selection, not hierarchy. Four exits of one decision are equal —
+  don't rank them. Only emphasise when something genuinely *is* primary.
+
+---
+
+## Picking `kind`
+
+| Content shape | `kind` | Why |
+|---|---|---|
+| Explanation · flow · status · comparison-in-prose | *(omit)* | Keeps the presentation frame: prose measure, `--ds-*` tokens, Inter, light/dark canvas. Compose vertically (rule 2). |
+| A whole push that is **nothing but** one app/UI screen, edge-to-edge | `"mockup"` / `"app"` | Strips the prose-width cap + body padding + tokens so you own every pixel — then you hand-set font, bg, colours, and supply your own page padding. |
+
+Mixed (prose **and** an embedded wide specimen)? Omit `kind` and wrap just the
+specimen in `<div class="full-bleed">` — see SKILL "Full-bleed mockups".
+
+---
+
+## Compose a card — the recipe
+
+1. **Hero** — `.kicker` eyebrow → `.lede` → `.deck` (one tight sentence).
+2. **Identify the shape**: is the body a *sequence* (→ `.spine`) or a set of
+   *parallel options* (→ `.lanes`)? Most explainers are a short sequence that
+   ends in a fork of parallel outcomes (spine → lanes).
+3. **Build tangible, not abstract** [SKILL §5]: an incoming message is a
+   `.thread`, a guard rail is a `.callout`, a decision is a `.node` with a
+   `git-branch` badge — not labeled rectangles with arrows.
+4. **Glance test**: would a bullet list say this just as well? If yes, the visual
+   is decoration — rebuild it or drop it.
+
+---
+
+## Primitive index (in `easel-base.css`)
+
+| Class | What | Notes |
+|---|---|---|
+| `.wrap` | canvas | sets text not background; guards inheritance |
+| `.kicker` `.lede` `.deck` `.title` `.h2` `.body` `.muted` | type scale | presentation sizes |
+| `.mono` | inline code/identifier chip | preset accent on soft surface |
+| `.card` / `.node` | surface / surface + icon badge | locked-surface pairing baked in |
+| `.spine` + `.connector` | vertical sequence | `.connector.short` for tighter gaps |
+| `.lanes` + `.lane` | parallel-sibling grid | auto-fit ≥260px; `.t-*` for state tone |
+| `.icchip` | tinted icon chip | drives off `--c` / `--tint` |
+| `.callout` | tinted note/guard | `.info` `.success` `.danger`; default amber |
+| `.thread` | locked-dark message card | sets its own ink on every node |
+
+For app/UI mockups, code, and chips that the SKILL already ships
+(`.window` / `.window.dark`, `.code` / `.terminal`, `.chip`), use those — don't
+re-implement them here.

package/skills/using-easel/kit/easel-base.css

@@ -0,0 +1,176 @@
+/* ===========================================================================
+   easel-base.css — presentation-scale starter for easel pushes.
+
+   HOW TO USE: inline this whole block inside a <style> at the top of a push,
+   then compose with the classes below. Wrap everything in <div class="wrap">.
+
+   Built ON the easel wrapper's injected --ds-* tokens. A pushed card is an
+   IMMUTABLE SNAPSHOT: its mode is sealed at push time and never flips when the
+   user toggles Easel's global theme, so these tokens (and their light-dark()
+   fallbacks) resolve ONCE to the card's frozen mode and stay there. Every token
+   has a literal light-dark() fallback, so this file ALSO renders correctly as a
+   standalone .html (e.g. when you render-and-look locally before pushing).
+   Inside easel the wrapper's tokens win and the card inherits the user's chosen
+   accent for free. You OWN this canvas — commit to one mode; don't write
+   responsive (light-dark/prefers-color-scheme) CSS expecting the card to adapt.
+
+   This is the SCAFFOLD. The full rulebook lives in SKILL.md (fidelity bar,
+   type/whitespace/color, locked-mode, .window/.code/.chip primitives,
+   full-bleed, kind:"mockup"). Read EASEL-GUIDE.md for the 5 composition rules
+   this scaffold encodes.
+   =========================================================================== */
+
+:root { color-scheme: light dark; }
+
+/* ---- canvas: frozen to one mode. The host card surface behind .wrap is itself
+   sealed at push time, so inheriting it is safe; set your own `background` here
+   when you want full control of the surface (a specific paper tint, a dark
+   card). Either way the card never flips. ----------------------------------- */
+.wrap {
+  font-family: 'Inter', -apple-system, system-ui, sans-serif;
+  color: var(--ds-ink, light-dark(#1a1a1a, #e9e9ea));
+  line-height: 1.55;
+  padding: 8px 4px 40px;
+}
+/* Push the wrapper's text colour into every child so the frame default never
+   leaks. ZERO-specificity (:where) on purpose: it still neutralises UA element
+   colours (links/buttons) and adopts .wrap's ink for plain text, but is beaten
+   by ANY authored container colour — so a hand-rolled dark callout/tooltip
+   (`.tip{background:#111;color:#eee}`) keeps its own ink instead of inheriting
+   .wrap's light-dark() and going invisible on its own dark background. The old
+   element-qualified form (`.wrap div`, (0,1,1)) outranked single-class
+   container colours and was the recurring dark-on-dark bug. */
+:where(.wrap) :where(*) { color: inherit; }
+.wrap svg { display: block; }
+
+/* ---- type scale — presentation, NEVER below 14px (SKILL §1) --------------- */
+.kicker, .eyebrow {
+  font-size: 14px; font-weight: 600; text-transform: uppercase;
+  letter-spacing: .14em; color: var(--ds-accent, light-dark(#15803d, #4ade80));
+}
+.lede  { font-size: 46px; font-weight: 500; letter-spacing: -.025em; line-height: 1.08; margin: 18px 0 0; }
+.title { font-size: 32px; font-weight: 500; letter-spacing: -.02em;  line-height: 1.15; margin: 0; }
+.deck  { font-size: 21px; line-height: 1.5; margin: 18px 0 0; max-width: 36ch;
+         color: var(--ds-ink-soft, light-dark(#5f5f63, #a0a0a6)); }
+.h2    { font-size: 22px; font-weight: 600; margin: 0; }
+.body  { font-size: 19px; }
+.muted { color: var(--ds-muted, light-dark(#6b6b6b, #9a9a9a)); }
+
+/* ---- inline mono chip — codes, identifiers, statuses, tokens -------------- */
+.mono {
+  font-family: ui-monospace, 'Roboto Mono Variable', monospace; font-size: 14px;
+  padding: 2px 8px; border-radius: 6px;
+  background: var(--ds-surface-soft, light-dark(#f3f4f6, #1f2329));
+  color: var(--ds-accent, light-dark(#15803d, #6ee7a8)) !important;
+  border: 1px solid var(--ds-line-soft, light-dark(#e3e5e8, #2c3038));
+}
+
+/* ---- card / node (card + leading icon badge + heading) -------------------- */
+.card {
+  background: var(--ds-surface, light-dark(#ffffff, #15171c));
+  border: 1px solid var(--ds-line, light-dark(#e7e7ea, #2a2d34));
+  border-radius: 14px; padding: 24px 26px;
+  box-shadow: var(--ds-shadow-md, 0 1px 2px light-dark(rgba(0,0,0,.05), rgba(0,0,0,.3)));
+}
+.card * { color: inherit; }            /* locked-surface pairing: surface set → keep text from leaking */
+
+.node { display: flex; gap: 18px; align-items: flex-start; }
+.node .badge {
+  flex: none; width: 46px; height: 46px; border-radius: 12px;
+  display: grid; place-items: center;
+  background: var(--ds-accent-soft, light-dark(#f0f7f2, #16241c));
+  color: var(--ds-accent, light-dark(#15803d, #4ade80));
+}
+.node .badge svg { width: 24px; height: 24px; }
+.node .h2 + p, .node .h2 ~ p { font-size: 18px; margin: 6px 0 0;
+  color: var(--ds-ink-soft, light-dark(#56565a, #9b9ba1)); }
+
+/* ===========================================================================
+   PRIMITIVE 1 — spine + lanes (sequence vs. parallel siblings)
+   RULE: a sequence of steps stacks VERTICALLY (.spine + .connector).
+         parallel siblings go in a GRID (.lanes) sized so each fits — never a
+         4-up row of paragraphs, never an all-vertical stack of siblings.
+   =========================================================================== */
+.spine { display: flex; flex-direction: column; gap: 14px; }
+.connector {
+  width: 2px; height: 26px; margin-left: 31px;
+  background: var(--ds-line, light-dark(#d9d9dd, #34373d));
+}
+.connector.short { height: 16px; }
+
+/* auto-fit: tiles flow to as many columns as fit at >=260px, then reflow down */
+.lanes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+.lane {
+  background: var(--ds-surface, light-dark(#ffffff, #15171c));
+  border: 1px solid var(--ds-line, light-dark(#e7e7ea, #2a2d34));
+  border-radius: 12px; padding: 18px 20px;
+}
+.lane * { color: inherit; }
+.lane .top { display: flex; align-items: center; gap: 12px; }
+.lane .nm  { font-size: 19px; font-weight: 600; }
+.lane .ds  { font-size: 16px; line-height: 1.5; margin: 12px 0 0;
+             color: var(--ds-ink-soft, light-dark(#56565a, #9b9ba1)); }
+
+/* icon chip — drives off --c (icon colour) + --tint (chip bg) when a tone is set */
+.icchip {
+  flex: none; width: 38px; height: 38px; border-radius: 10px;
+  display: grid; place-items: center;
+  background: var(--tint, var(--ds-surface-soft, light-dark(#f1f5f9, #1c2129)));
+  color: var(--c, var(--ds-accent, light-dark(#15803d, #4ade80)));
+}
+.icchip svg { width: 20px; height: 20px; }
+
+/* semantic tones — apply --c / --tint ONLY when a tile genuinely maps to a
+   status/state (RULE: status colour where state maps to status, else one accent) */
+.t-neutral { --c: light-dark(#64748b, #94a3b8); --tint: light-dark(#f1f5f9, #1c2129); }
+.t-info    { --c: light-dark(#2563eb, #60a5fa); --tint: light-dark(#eef3ff, #12203a); }
+.t-success { --c: light-dark(#15803d, #4ade80); --tint: light-dark(#ecf9f0, #102a1c); }
+.t-warning { --c: light-dark(#b45309, #f59e0b); --tint: light-dark(#fdf4e8, #291d0a); }
+.t-danger  { --c: light-dark(#b91c1c, #f87171); --tint: light-dark(#fdecec, #2a1414); }
+/* NO accent-border / emphasis on one sibling: four parallel exits are equal
+   weight — singling one out with a coloured bar is AP23 slop (status double-
+   encoded, the "accent-bordered tile" AI reflex). Differentiate by icon, not
+   by ranking siblings that aren't ranked. */
+
+/* ===========================================================================
+   PRIMITIVE 2 — callout (tinted, leading icon): guard rails, notes, warnings
+   Default = warning amber. Add .info / .success / .danger to retone.
+   =========================================================================== */
+.callout {
+  display: flex; gap: 16px; align-items: flex-start;
+  border-radius: 14px; padding: 20px 24px;
+  background: var(--co-bg, light-dark(#fdf8ed, #1d180c));
+  border: 1px solid var(--co-bd, light-dark(#f0d9a8, #4a3c1c));
+}
+.callout * { color: inherit; }
+.callout .cico {
+  flex: none; width: 40px; height: 40px; border-radius: 10px;
+  display: grid; place-items: center;
+  background: var(--co-ic-bg, light-dark(#f7ecd0, #2a2110));
+  color: var(--co-ic, light-dark(#b45309, #e0a64a));
+}
+.callout .cico svg { width: 22px; height: 22px; }
+.callout .q { font-size: 19px; font-weight: 600;
+  color: var(--ds-ink, light-dark(#1a1a1a, #e9e9ea)); }
+.callout .a { font-size: 17px; margin-top: 6px;
+  color: var(--co-ic, light-dark(#7a6a3a, #cbb87e)); }
+.callout.info    { --co-bg: light-dark(#eef3ff,#0e1a30); --co-bd: light-dark(#cdddfb,#1d3257); --co-ic-bg: light-dark(#dde9ff,#16284a); --co-ic: light-dark(#2563eb,#7fb0ff); }
+.callout.success { --co-bg: light-dark(#ecf9f0,#0c2417); --co-bd: light-dark(#c6e9d3,#1c402c); --co-ic-bg: light-dark(#d6f0e0,#143020); --co-ic: light-dark(#15803d,#74d99a); }
+.callout.danger  { --co-bg: light-dark(#fdecec,#240f0f); --co-bd: light-dark(#f5cccc,#4a1f1f); --co-ic-bg: light-dark(#fadada,#341515); --co-ic: light-dark(#b91c1c,#f59a9a); }
+
+/* ===========================================================================
+   PRIMITIVE 3 — thread / message card (LOCKED DARK)
+   It sets its OWN text colour on every node (the .wrap inherit-guard outranks
+   a descendant universal, so locked-bg containers must commit their own ink).
+   For app/UI mockups use the wrapper's .window / .window.dark instead.
+   =========================================================================== */
+.thread {
+  background: #14161b; border: 1px solid #262a31; border-radius: 14px;
+  overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.22);
+}
+.thread .bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #262a31; }
+.thread .dot { width: 11px; height: 11px; border-radius: 50%; }
+.thread .tt  { margin-left: 8px; font-size: 13px; font-family: ui-monospace, monospace; color: #7d828c !important; }
+.thread .body { padding: 16px 20px 20px; }
+.thread .who { font-size: 14px; font-weight: 600; color: #8ab4ff !important; }
+.thread .msg { font-size: 18px; line-height: 1.5; margin: 6px 0 0; color: #e6e9ef !important; }

package/skills/using-easel/kit/easel-icons.svg

@@ -0,0 +1,28 @@
+<!-- easel-icons.svg — Lucide (ISC license) · one set · 1.75 stroke · currentColor.
+     Inline this whole block once near the top of a push, then reference an icon with:
+        <svg class="ic"><use href="#i-git-branch"/></svg>
+     and size it with CSS (.icchip svg / .badge svg already do). currentColor means
+     the icon inherits its container's `color` — set --c on a .icchip or color on a .badge.
+     NEVER use emoji as icons (SKILL fidelity bar / Lookbook P-AS-01). Swap the SET
+     wholesale if you change libraries; never mix per-icon. -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+  <symbol id="i-git-branch" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></symbol>
+  <symbol id="i-message-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></symbol>
+  <symbol id="i-send" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></symbol>
+  <symbol id="i-wrench" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></symbol>
+  <symbol id="i-rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"/><path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"/></symbol>
+  <symbol id="i-bell-off" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13.73 21a2 2 0 0 1-3.46 0"/><path d="M18.63 13A17.9 17.9 0 0 1 18 8"/><path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"/><path d="M18 8a6 6 0 0 0-9.33-5"/><line x1="2" y1="2" x2="22" y2="22"/></symbol>
+  <symbol id="i-ban" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></symbol>
+  <symbol id="i-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></symbol>
+  <symbol id="i-check-circle" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></symbol>
+  <symbol id="i-triangle-alert" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></symbol>
+  <symbol id="i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></symbol>
+  <symbol id="i-zap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></symbol>
+  <symbol id="i-arrow-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></symbol>
+  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></symbol>
+  <symbol id="i-file-text" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></symbol>
+  <symbol id="i-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
+  <symbol id="i-settings" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></symbol>
+  <symbol id="i-trending-up" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/></symbol>
+  <symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></symbol>
+</svg>