npm - @ammduncan/easel - Versions diffs - 0.6.2 → 0.7.0 - Mend

@ammduncan/easel 0.6.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md +18 -0
package/dist/client/viewer.js +82 -235
package/dist/http-server.js +2 -2
package/dist/mcp.js +41 -13
package/dist/session-store.js +2 -0
package/package.json +1 -1
package/scripts/easel-session-id.mjs +8 -0
package/skills/using-easel/SKILL.md +29 -30
package/skills/using-easel/kit/EASEL-GUIDE.md +161 -0
package/skills/using-easel/kit/easel-base.css +176 -0
package/skills/using-easel/kit/easel-icons.svg +28 -0

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,24 @@
 All notable changes to easel. This project adheres to [Semantic Versioning](https://semver.org/).
+## Unreleased
+## 0.7.0 — 2026-06-27
+### Changed
+- **Pushed cards are now immutable snapshots — each is sealed to one light/dark mode at push time and never reflows when the global theme is toggled.** Previously every rendered card live-tracked the global theme: a config/theme message was broadcast into every iframe, so toggling Easel light↔dark flipped *all* existing cards — and forced authors into adaptive `light-dark()` styling that frequently produced dark-on-dark / washed-out text. Now the iframe-config broadcast and the in-iframe config/theme listeners are removed (print is preserved); a card's `data-theme`/`preset`/`density` are baked once at render. The global toggle still restyles Easel's own chrome and sets the default for *future* pushes — it just never touches existing cards. Verified live: with two cards pushed under different modes, toggling the global light↔dark left both sealed (the light card stayed light, the dark stayed dark). The convention across the `push` tool description + `using-easel` SKILL/kit inverts accordingly: "own your canvas, commit to one mode" replaces "adapt to both modes via `light-dark()`".
+- **The default push wrapper no longer injects the design-system token layer — authors own the canvas.** With cards now frozen to one mode, the six-combo `--ds-*` preset token block, the presentation type scale, and the Inter webfont are dropped from the default wrapper. What remains is a minimal floor: a box-sizing reset, a system-sans default, a committed base surface + ink for the sealed mode, and the prose-width reading cap (plus the `.full-bleed` escape). The structural primitives (`.window`/`.code`/`.terminal`/`.easel-*`) and semantic chips are **retained**, and the `using-easel` kit (`easel-base.css`) re-supplies the full presentation scaffold on demand via its `light-dark()` token fallbacks — so kit-based pushes are unchanged, while bare semantic HTML now renders on the clean floor instead of the auto-injected design system. Verified by rendering bare-HTML, kit-inlined, and primitive (`.window`/`.code`/`.chip`) pushes against the live build.
+### Removed
+- **The injected `--ds-*` preset token block, presentation type scale, and Inter webfont** from the default push wrapper (the "own the canvas" change above). Pushes that relied on the auto-injected tokens/type *without* inlining the kit render plainer; inline `easel-base.css` for the presentation scaffold.
+### Fixed
+- **Reserved primitive class names (`code`/`terminal`/`window`) no longer render invisible dark-on-dark when an author reuses them.** Two correct-in-isolation rules were mutually destructive: the structural primitives set a fixed dark background + light ink at specificity `(0,1,0)`, while the documented `.wrap * { color: inherit }` guard is *also* `(0,1,0)` but lives later in source order (author `<body>` vs injected `<head>`), so it won the tie and flipped the primitive's ink back to the author's near-black `.wrap` colour → near-black text on the primitive's dark fill, invisible. Because the names are generic English words, author markup naturally reused them (`<td class="code">`, `<span class="code">`) and inherited the dark fill unintentionally. Fixes: (1) **Hardened** — each primitive's `background` + `color` are now committed with `!important` on the *container only* (not on `*`/token rules), so `.wrap * { color: inherit }` can't flip the ink; syntax-highlight tokens still win by specificity and are untouched. Existing content becomes readable with no author change. (2) **Namespaced** — `.easel-code` / `.easel-terminal` / `.easel-window` (and `[data-easel="code|terminal|window"]`) are the canonical collision-free forms; bare `code`/`terminal`/`window` remain as deprecated aliases. (3) **Warned** — the in-iframe guard now logs a console warning when a reserved primitive name lands on an inline/table element (`span`/`td`/…), the accidental-collision signature; the existing low-contrast warning points at the same cause. `using-easel` SKILL + kit guide document the reserved names, the `.easel-*` forms, and the `mono`/`<code>` workaround. Verified by rendering the exact `<td class="code">` / `<span class="code">` / `.code` / `.easel-code` repro against the real injected CSS in light mode.
+### Added
+- **`theme: 'light' | 'dark'` param on the `push` tool — declares the card's sealed canvas mode.** Frozen at push time; never flips with the global toggle. Omit to snapshot the current global theme (also frozen). Pairs with the immutable-snapshot change above: an author told "present in dark" passes `theme:'dark'` and gets a card that stays dark regardless of the viewer's global setting.
+- **`EASEL_SUPPRESS_SESSION=1` env var suppresses switcher-session registration.** When set on a `claude` (or any client) invocation, easel still loads as an MCP but every tool (`push`/`label`/`open`/`config`) short-circuits to a no-op — the MCP never contacts the HTTP server and the session never appears in the switcher. The SessionStart hook also skips its convention reminder so the agent isn't nagged to label a session that can't register. Built for automated/headless consumers that run easel-registered Claude on a tight cadence (e.g. the ammiels-bot dispatcher tick fired every ~60s by launchd), which otherwise pile up churny "Bot watcher tick" entries in the switcher. Deliberately MCP-local: it leaves the Slack connector and every other MCP/account connector fully intact, unlike `claude --strict-mcp-config`, which also strips the claude.ai account connectors.
 ## 0.6.2 — 2026-06-04
 ### Fixed

package/dist/client/viewer.js CHANGED Viewed

@@ -47,65 +47,6 @@
   const PRESETS = ["paper", "aurora", "slate"];
   const DENSITIES = ["carded", "flat"];
-  /* The token block injected into every iframe wrapper — six combos so
-     pushed HTML themes correctly regardless of host preset/mode. */
-  const PRESET_TOKENS_CSS = `
-:root[data-preset="paper"][data-theme="light"] {
-  --ds-bg:#f4efe2;--ds-bg-elev:#f8f3e6;--ds-surface:#faf6ee;--ds-surface-soft:#f0ead9;
-  --ds-ink:#2a261e;--ds-ink-soft:#524b3c;--ds-muted:#756c57;
-  --ds-line:#d5cdb6;--ds-line-soft:#e3dcc6;
-  --ds-accent:#c97a1c;--ds-accent-soft:#f7e8c0;--ds-accent-ink:#fff;
-  --ds-code-bg:#2a261e;--ds-code-ink:#eae5d5;
-  --ds-shadow-md:0 1px 2px rgba(70,50,10,.06),0 18px 36px rgba(70,50,10,.1);
-  color-scheme:light;
-}
-:root[data-preset="paper"][data-theme="dark"] {
-  --ds-bg:#1c1b18;--ds-bg-elev:#25241f;--ds-surface:#25241f;--ds-surface-soft:#20201c;
-  --ds-ink:#ede9e0;--ds-ink-soft:#bbb5a8;--ds-muted:#888273;
-  --ds-line:#423f37;--ds-line-soft:#312f29;
-  --ds-accent:#f4bf5e;--ds-accent-soft:#3d3322;--ds-accent-ink:#1f1d18;
-  --ds-code-bg:#161514;--ds-code-ink:#eae5d5;
-  --ds-shadow-md:inset 0 1px 0 rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.55),0 18px 38px rgba(0,0,0,.45);
-  color-scheme:dark;
-}
-:root[data-preset="aurora"][data-theme="light"] {
-  --ds-bg:#f5f3fa;--ds-bg-elev:#fafaff;--ds-surface:#fff;--ds-surface-soft:#f0eef7;
-  --ds-ink:#1c1d24;--ds-ink-soft:#4a4d5a;--ds-muted:#7a7d8c;
-  --ds-line:#e1dff0;--ds-line-soft:#ebe9f5;
-  --ds-accent:#6d4eff;--ds-accent-soft:#ebe7ff;--ds-accent-ink:#fff;
-  --ds-code-bg:#1c1d24;--ds-code-ink:#ebe7ff;
-  --ds-shadow-md:0 1px 2px rgba(60,50,120,.05),0 18px 36px rgba(60,50,120,.08);
-  color-scheme:light;
-}
-:root[data-preset="aurora"][data-theme="dark"] {
-  --ds-bg:#0d0f14;--ds-bg-elev:#14171f;--ds-surface:#161a23;--ds-surface-soft:#11141a;
-  --ds-ink:#e7e9ee;--ds-ink-soft:#b9bdc6;--ds-muted:#8b909a;
-  --ds-line:rgba(143,160,200,.14);--ds-line-soft:rgba(143,160,200,.08);
-  --ds-accent:#b8c8ff;--ds-accent-soft:rgba(140,170,255,.12);--ds-accent-ink:#0d0f14;
-  --ds-code-bg:#07080a;--ds-code-ink:#e7e9ee;
-  --ds-shadow-md:inset 0 1px 0 rgba(255,255,255,.045),0 0 0 1px rgba(123,97,255,.06),0 24px 60px rgba(0,0,0,.55),0 0 80px -20px rgba(123,97,255,.25);
-  color-scheme:dark;
-}
-:root[data-preset="slate"][data-theme="light"] {
-  --ds-bg:#ecebe5;--ds-bg-elev:#f6f4ee;--ds-surface:#f6f4ee;--ds-surface-soft:#ecebe3;
-  --ds-ink:#1a1916;--ds-ink-soft:#34322d;--ds-muted:#76746c;
-  --ds-line:#d8d5cb;--ds-line-soft:#e1ddd2;
-  --ds-accent:#2f5fd1;--ds-accent-soft:#e4ebfb;--ds-accent-ink:#fff;
-  --ds-code-bg:#1c1b18;--ds-code-ink:#f1ede1;
-  --ds-shadow-md:0 1px 2px rgba(40,30,10,.05),0 16px 32px rgba(40,30,10,.08);
-  color-scheme:light;
-}
-:root[data-preset="slate"][data-theme="dark"] {
-  --ds-bg:#0c0d10;--ds-bg-elev:#15171c;--ds-surface:#15171c;--ds-surface-soft:#1c1f25;
-  --ds-ink:#f5f5f5;--ds-ink-soft:#d4d4d8;--ds-muted:#9ca3af;
-  --ds-line:#23262d;--ds-line-soft:#1c1f25;
-  --ds-accent:#7dd3fc;--ds-accent-soft:rgba(125,211,252,.16);--ds-accent-ink:#07242e;
-  --ds-code-bg:#07080a;--ds-code-ink:#f5f5f5;
-  --ds-shadow-md:0 1px 2px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.45);
-  color-scheme:dark;
-}
-`;
   /* Semantic chips — universal across presets. Authors use:
        <span class="chip bug">BUG</span> / .ux / .polish / .ok / .info
      to get accessible, glow-haloed badges that work in both modes. */
@@ -142,12 +83,11 @@
      block, so stripping these in fidelity mode left the skill's own guidance
      ("wrap a mockup in .window") producing unstyled output. */
   const STRUCTURAL_PRIMITIVES_CSS = `
-/* Bind the CSS color-scheme to the host theme so any author CSS that uses
-   light-dark() (text ink, surfaces, borders) tracks the easel light/dark
-   TOGGLE rather than the OS preference. The default wrapper already gets this
-   via PRESET_TOKENS_CSS, but app-fidelity (kind:"mockup") pushes omit the
-   preset tokens — without this rule their light-dark() ink follows the OS
-   scheme and washes out whenever the OS disagrees with the easel toggle. */
+/* Bind the CSS color-scheme to the card's sealed theme so any author CSS that
+   uses light-dark() (text ink, surfaces, borders) — including the kit's token
+   fallbacks — resolves against the frozen mode rather than the OS preference.
+   Injected in every wrapper (default + app-fidelity), the only place the canvas
+   mode is now declared since the preset token block was removed. */
 :root[data-theme="light"] { color-scheme: light; }
 :root[data-theme="dark"]  { color-scheme: dark; }
@@ -167,18 +107,19 @@
    canvas with pinned dark ink and color:inherit re-scoped to every child so the
    host's light-dark() ink can never leak in. Add the dark class
    (class="window dark") for a genuinely dark-UI mockup. */
-.window {
+.window, .easel-window, [data-easel="window"] {
   position: relative;
   padding-top: 40px;
   border-radius: 12px;
   border: 1px solid #e2e2e2;
   box-shadow: 0 14px 48px rgba(0, 0, 0, 0.16);
   overflow: hidden;
-  background: #ffffff;
-  color: #1a1a1a;
+  /* Locked surface + ink, !important so .wrap * { color: inherit } can't flip it. */
+  background: #ffffff !important;
+  color: #1a1a1a !important;
 }
-.window * { color: inherit; }
-.window::before {
+.window *, .easel-window *, [data-easel="window"] * { color: inherit; }
+.window::before, .easel-window::before, [data-easel="window"]::before {
   content: "";
   position: absolute;
   top: 0;
@@ -193,7 +134,7 @@
     radial-gradient(circle at 59px 20px, #28c840 6px, transparent 6.5px);
   background-repeat: no-repeat;
 }
-.window::after {
+.window::after, .easel-window::after, [data-easel="window"]::after {
   content: attr(data-title);
   position: absolute;
   top: 0;
@@ -208,18 +149,18 @@
   color: #6b6b6b;
   pointer-events: none;
 }
-.window.dark {
+.window.dark, .easel-window.dark, [data-easel="window"].dark {
   border-color: #2a2a2a;
-  background: #161616;
-  color: #e6edf3;
+  background: #161616 !important;
+  color: #e6edf3 !important;
   box-shadow: 0 14px 48px rgba(0, 0, 0, 0.4);
 }
-.window.dark::before {
+.window.dark::before, .easel-window.dark::before, [data-easel="window"].dark::before {
   background-color: #1f1f1f;
   border-bottom-color: #2a2a2a;
 }
-.window.dark::after { color: #9b9b9b; }
-.window.desktop {
+.window.dark::after, .easel-window.dark::after, [data-easel="window"].dark::after { color: #9b9b9b; }
+.window.desktop, .easel-window.desktop, [data-easel="window"].desktop {
   min-height: 900px;
 }
 /* Locked-dark code / terminal primitive. Reach for this instead of hand-rolling
@@ -231,9 +172,18 @@
    palette so syntax highlighting reads against #0f172a without per-token tuning.
    Usage: <div class="code"><span class="kw">gcloud</span> services enable …</div>
    .terminal is an alias; add .terminal for a prompt feel (same colors). */
-.code, .terminal {
-  background: #0f172a;
-  color: #e6edf3;
+.code, .terminal, .easel-code, .easel-terminal,
+[data-easel="code"], [data-easel="terminal"] {
+  /* Locked dark surface + ink. Committed with !important so the documented
+     .wrap * { color: inherit } can't flip the ink onto this fixed background —
+     that tie (both (0,1,0); author rule later in source) is the recurring
+     invisible dark-on-dark bug. !important is on the CONTAINER only, not on the
+     descendant rules below, so syntax tokens still win by specificity.
+     Generic names collide with author markup like <td class="code"> — prefer the
+     namespaced .easel-code / [data-easel="code"]; bare code/terminal are kept as
+     deprecated aliases. */
+  background: #0f172a !important;
+  color: #e6edf3 !important;
   border-radius: 12px;
   padding: 18px 22px;
   font-family: ui-monospace, "SF Mono", Menlo, monospace;
@@ -242,25 +192,26 @@
   overflow: auto;
   margin: 16px 0 24px;
 }
-.code *, .terminal * { color: inherit; }
-.code .kw,      .terminal .kw      { color: #ff7b72; }  /* keywords, control flow */
-.code .string,  .terminal .string  { color: #a5d6ff; }  /* strings, attr values */
-.code .fn,      .terminal .fn      { color: #d2a8ff; }  /* function names */
-.code .prop,    .terminal .prop    { color: #79c0ff; }  /* identifiers, properties */
-.code .num,     .terminal .num     { color: #ffa657; }  /* numbers, constants */
-.code .comment, .terminal .comment { color: #8b949e; }  /* comments */
-.code .muted,   .terminal .muted   { color: #94a3b8; }  /* dim / secondary */
-.code .accent,  .terminal .accent  { color: #6ee7b7; }  /* highlight / success */
+:is(.code, .terminal, .easel-code, .easel-terminal, [data-easel="code"], [data-easel="terminal"]) * { color: inherit; }
+:is(.code, .terminal, .easel-code, .easel-terminal) .kw      { color: #ff7b72; }  /* keywords, control flow */
+:is(.code, .terminal, .easel-code, .easel-terminal) .string  { color: #a5d6ff; }  /* strings, attr values */
+:is(.code, .terminal, .easel-code, .easel-terminal) .fn      { color: #d2a8ff; }  /* function names */
+:is(.code, .terminal, .easel-code, .easel-terminal) .prop    { color: #79c0ff; }  /* identifiers, properties */
+:is(.code, .terminal, .easel-code, .easel-terminal) .num     { color: #ffa657; }  /* numbers, constants */
+:is(.code, .terminal, .easel-code, .easel-terminal) .comment { color: #8b949e; }  /* comments */
+:is(.code, .terminal, .easel-code, .easel-terminal) .muted   { color: #94a3b8; }  /* dim / secondary */
+:is(.code, .terminal, .easel-code, .easel-terminal) .accent  { color: #6ee7b7; }  /* highlight / success */
 @media print {
   /* Force the locked-dark primitives light for print — browsers drop background
      colours by default, which would otherwise strand their light ink on white
      paper. Applies in both normal and app-fidelity mode. The !important here
      also (intentionally) overrides the normal branch's non-print-gated pre/code
      theming, so code reads as dark-on-light on paper regardless of host theme. */
-  pre, code, .code, .terminal { background: #f4f3ed !important; color: #111 !important; border: 1px solid #ddd; }
-  .code *, .terminal * { color: #111 !important; }
-  .window.dark { background: #ffffff !important; color: #111 !important; }
-  .window.dark * { color: #111 !important; }
+  pre, code, .code, .terminal, .easel-code, .easel-terminal,
+  [data-easel="code"], [data-easel="terminal"] { background: #f4f3ed !important; color: #111 !important; border: 1px solid #ddd; }
+  :is(.code, .terminal, .easel-code, .easel-terminal, [data-easel="code"], [data-easel="terminal"]) * { color: #111 !important; }
+  .window.dark, .easel-window.dark, [data-easel="window"].dark { background: #ffffff !important; color: #111 !important; }
+  :is(.window, .easel-window, [data-easel="window"]).dark * { color: #111 !important; }
 }
 `;
@@ -514,7 +465,11 @@
         /* ignore */
       }
     }
-    broadcastConfigToIframes({ preset, theme, density });
+    // NOTE: we deliberately do NOT push theme/preset/density into rendered
+    // iframes. A pushed card is an immutable snapshot — its canvas is sealed at
+    // render time. applyConfig only restyles Easel's own chrome (host <html>
+    // tokens) and the default for FUTURE pushes; it never reaches back into
+    // existing cards.
     if (!opts || !opts.skipServer) {
       pushConfigToServer({ preset, theme, density });
     }
@@ -531,20 +486,6 @@
     });
   }
-  function broadcastConfigToIframes(cfg) {
-    iframes.forEach((iframe) => {
-      try {
-        iframe.contentWindow &&
-          iframe.contentWindow.postMessage(
-            { type: "easel:config", ...cfg },
-            "*",
-          );
-      } catch (e) {
-        /* ignore */
-      }
-    });
-  }
   async function pushConfigToServer(cfg) {
     try {
       await fetch("/api/config", {
@@ -831,7 +772,12 @@
     iframe.setAttribute("scrolling", "no");
     iframe.setAttribute("title", push.title || "push " + push.index);
     iframe.dataset.pushId = push.id;
-    iframe.srcdoc = wrapPushedHtml(push.html, currentTheme(), push.id, push.kind);
+    // Explicit push.theme wins; absent → snapshot the global at render. Either
+    // way it's frozen — the card never flips on a later global toggle.
+    const sealedTheme = push.theme === "light" || push.theme === "dark"
+      ? push.theme
+      : currentTheme();
+    iframe.srcdoc = wrapPushedHtml(push.html, sealedTheme, push.id, push.kind);
     iframe.addEventListener("load", () => {
       iframes.add(iframe);
       // Primary path: the iframe self-measures and posts back size via
@@ -1051,8 +997,13 @@ window.htmlToImage.toSvg(de,{width:w,height:h,cacheBust:true})
       "function hasDirectText(el){for(var i=0;i<el.childNodes.length;i++){var n=el.childNodes[i];if(n.nodeType===3&&n.nodeValue.trim().length>0)return true}return false}" +
       "function fmt(c){return'rgb('+Math.round(c.r)+','+Math.round(c.g)+','+Math.round(c.b)+')'}" +
       "function scan(){if(!document.body)return;var offenders=[];var seen=0;var all=document.body.querySelectorAll('*');for(var i=0;i<all.length&&seen<2000;i++){var el=all[i];if(!hasDirectText(el))continue;seen++;var cs=getComputedStyle(el);if(cs.visibility==='hidden'||cs.display==='none')continue;var fg=parseColor(cs.color);if(!fg||fg.a<0.05)continue;var bg=effBg(el);var ratio=contrast(fg,bg);if(ratio<3){offenders.push({tag:el.tagName.toLowerCase(),cls:(el.className&&el.className.toString?el.className.toString():'').slice(0,80),text:(el.textContent||'').trim().slice(0,60),ratio:Math.round(ratio*100)/100,fg:fmt(fg),bg:fmt(bg)})}}" +
-      "if(offenders.length){console.warn('[easel] low-contrast text detected ('+offenders.length+' element(s), threshold 3:1). The #1 cause is a hand-rolled dark code container — use <div class=\"code\"> or <div class=\"terminal\"> instead; they lock background AND ink and re-scope color:inherit to children. Offenders:',offenders.slice(0,10));try{parent.postMessage({type:'easel:contrast-warn',pushId:ID,count:offenders.length,samples:offenders.slice(0,5)},'*')}catch(e){}}}" +
-      "function run(){setTimeout(scan,400)}" +
+      "if(offenders.length){console.warn('[easel] low-contrast text detected ('+offenders.length+' element(s), threshold 3:1). Common causes: (1) a reserved primitive class (code/terminal/window) on your own element inheriting its locked dark fill — see the reserved-class warning below; (2) a hand-rolled dark container — use <div class=\"easel-code\"> instead (locks bg AND ink). Offenders:',offenders.slice(0,10));try{parent.postMessage({type:'easel:contrast-warn',pushId:ID,count:offenders.length,samples:offenders.slice(0,5)},'*')}catch(e){}}}" +
+      // Reserved-class collision guard: the primitive names code/terminal/window paint a
+      // locked dark background, so finding one on an inline/table element (span/td/…) is a
+      // strong signal the author reused a generic name and got an unintended dark block.
+      "function scanReserved(){if(!document.body)return;var R={code:1,terminal:1,window:1};var inl={SPAN:1,TD:1,TH:1,A:1,LI:1,LABEL:1,B:1,I:1,EM:1,STRONG:1,SMALL:1};var bad=[];var all=document.body.querySelectorAll('*');for(var i=0;i<all.length;i++){var el=all[i];if(!inl[el.tagName])continue;var cl=(el.className&&el.className.toString?el.className.toString():'').split(/\\s+/);for(var j=0;j<cl.length;j++){if(R[cl[j]]){bad.push({tag:el.tagName.toLowerCase(),cls:cl[j],text:(el.textContent||'').trim().slice(0,40)});break}}}" +
+      "if(bad.length){console.warn('[easel] reserved primitive class on '+bad.length+' inline/table element(s). code/terminal/window are RESERVED easel primitives that paint a locked dark background — on a <span>/<td>/etc. that yields an unintended dark block. Rename your class (e.g. mono, codecell), or use the namespaced .easel-code/.easel-terminal/.easel-window form if you DO want the primitive. Offenders:',bad.slice(0,10))}}" +
+      "function run(){setTimeout(function(){scan();scanReserved()},400)}" +
       "if(document.fonts&&document.fonts.ready){document.fonts.ready.then(run).catch(run)}else{run()}" +
       "})();"
     );
@@ -1092,23 +1043,30 @@ ${body}
 <head>
 <meta charset="utf-8" />
 <base target="_blank" />
-<link rel="preconnect" href="https://rsms.me/" />
-<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
 <script src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.js"></script>
 <style>
 *, *::before, *::after { box-sizing: border-box; }
-${PRESET_TOKENS_CSS}
 ${SEMANTIC_CHIPS_CSS}
 ${STRUCTURAL_PRIMITIVES_CSS}
+/* MINIMAL FLOOR (layer 3 removed): no --ds token block, no Inter webfont, no
+   presentation type scale. The wrapper only commits a base surface + ink for
+   the frozen mode and a system-sans default — the agent owns everything else
+   (or inlines the kit for the presentation scaffold). Primitives + chips +
+   prose-width cap are retained. */
 html, body {
   margin: 0;
-  background: var(--ds-bg-elev);
-  color: var(--ds-ink);
-  font-family: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
-  font-feature-settings: "cv11", "ss01";
+  background: ${theme === "dark" ? "#0e1116" : "#faf7f0"};
+  color: ${theme === "dark" ? "#e8e8e8" : "#1a1a1a"};
+  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
-  transition: background 200ms ease, color 200ms ease;
+}
+:where(body) :where(*) { color: inherit; }
+/* keep the accent chip working without the dropped --ds-accent token */
+.chip.accent {
+  background: ${theme === "dark" ? "#10241c" : "#eafaf0"};
+  color: ${theme === "dark" ? "#6ee7a8" : "#15803d"};
+  border-color: transparent;
 }
 body {
   padding: 40px clamp(28px, 4vw, 64px) 48px;
@@ -1152,104 +1110,7 @@ body > *:last-child { margin-bottom: 0 !important; }
   margin: 32px 0;
 }
 .wrap { display: block; }
-.kicker {
-  display: block;
-  font-size: 13px;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--ds-muted);
-  font-weight: 500;
-  margin-bottom: 14px;
-}
-h1 {
-  font-size: 40px;
-  font-weight: 500;
-  letter-spacing: -0.025em;
-  line-height: 1.08;
-  margin: 0 0 18px;
-}
-.deck, .lede {
-  font-size: 19px;
-  line-height: 1.55;
-  color: var(--ds-ink-soft);
-  margin: 0 0 28px;
-  max-width: 720px;
-}
-h2 {
-  font-size: 26px;
-  font-weight: 500;
-  letter-spacing: -0.02em;
-  margin: 36px 0 12px;
-}
-h3 {
-  font-size: 19px;
-  font-weight: 600;
-  letter-spacing: -0.005em;
-  margin: 24px 0 8px;
-}
-h4 { font-size: 15px; font-weight: 600; margin: 20px 0 6px; }
-p {
-  font-size: 18px;
-  margin: 0 0 14px;
-  color: var(--ds-ink-soft);
-}
-a { color: var(--ds-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ds-accent) 40%, transparent); }
-a:hover { border-bottom-color: var(--ds-accent); }
-ul, ol { padding-left: 22px; margin: 0 0 18px; }
-li { font-size: 18px; margin-bottom: 6px; color: var(--ds-ink-soft); }
-code {
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 0.92em;
-  background: var(--ds-surface-soft);
-  color: var(--ds-ink);
-  padding: 2px 6px;
-  border-radius: 5px;
-}
-pre {
-  background: var(--ds-code-bg);
-  color: var(--ds-code-ink);
-  padding: 18px 22px;
-  border-radius: 12px;
-  overflow: auto;
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 13.5px;
-  line-height: 1.7;
-  margin: 16px 0 24px;
-}
-pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
-blockquote {
-  border-left: 3px solid var(--ds-accent);
-  margin: 18px 0;
-  padding: 4px 0 4px 20px;
-  color: var(--ds-ink-soft);
-  font-size: 18px;
-}
-.card, .panel {
-  background: var(--ds-surface);
-  border: 1px solid var(--ds-line);
-  border-radius: 14px;
-  padding: 24px 28px;
-  margin: 0 0 20px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
-}
-hr {
-  border: 0;
-  border-top: 1px solid var(--ds-line);
-  margin: 36px 0;
-}
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 15px;
-  margin: 18px 0 24px;
-}
-th, td {
-  text-align: left;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--ds-line);
-}
-th { color: var(--ds-muted); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
-img { max-width: 100%; height: auto; border-radius: 10px; }
+img { max-width: 100%; height: auto; }
 :root[data-density="flat"] html,
 :root[data-density="flat"] body { background: transparent; }
@@ -1272,26 +1133,12 @@ img { max-width: 100%; height: auto; border-radius: 10px; }
 <body>
 ${body}
 <script>
+// Canvas is sealed at render (data-theme/preset/density are baked into <html>
+// above and never change). The only live message this card honours is print —
+// config/theme broadcasts are intentionally ignored so the snapshot is immutable.
 (function(){
-  function apply(cfg){
-    if (!cfg) return;
-    if (cfg.theme === "light" || cfg.theme === "dark") {
-      document.documentElement.setAttribute("data-theme", cfg.theme);
-      window.__claudeDisplayTheme = cfg.theme;
-    }
-    if (cfg.preset === "paper" || cfg.preset === "aurora" || cfg.preset === "slate") {
-      document.documentElement.setAttribute("data-preset", cfg.preset);
-      window.__claudeDisplayPreset = cfg.preset;
-    }
-    if (cfg.density === "carded" || cfg.density === "flat") {
-      document.documentElement.setAttribute("data-density", cfg.density);
-      window.__claudeDisplayDensity = cfg.density;
-    }
-  }
   window.addEventListener("message", function(e){
     if (!e || !e.data) return;
-    if (e.data.type === "easel:config") apply(e.data);
-    if (e.data.type === "easel:theme") apply({ theme: e.data.theme });
     if (e.data.type === "easel:print") {
       try { window.print(); } catch(_) {}
     }
@@ -1310,7 +1157,7 @@ ${body}
     const configScript =
       "<script src='https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.js'></script><script>(function(){function a(c){if(!c)return;if(c.theme==='light'||c.theme==='dark'){document.documentElement.setAttribute('data-theme',c.theme);window.__claudeDisplayTheme=c.theme}if(c.preset==='paper'||c.preset==='aurora'||c.preset==='slate'){document.documentElement.setAttribute('data-preset',c.preset);window.__claudeDisplayPreset=c.preset}if(c.density==='carded'||c.density==='flat'){document.documentElement.setAttribute('data-density',c.density);window.__claudeDisplayDensity=c.density}}a(" +
       JSON.stringify({ theme, preset, density }) +
-      ");window.addEventListener('message',function(e){if(!e||!e.data)return;if(e.data.type==='easel:config')a(e.data);if(e.data.type==='easel:theme')a({theme:e.data.theme});if(e.data.type==='easel:print'){try{window.print()}catch(_){}}})})();</script>";
+      ");window.addEventListener('message',function(e){if(!e||!e.data)return;if(e.data.type==='easel:print'){try{window.print()}catch(_){}}})})();</script>";
     const imageScript = "<script>" + imageExportScript() + "</script>";
     const guardScript = "<script>" + contrastGuardScript(pushId) + "</script>";
     const measureScript = "<script>" + selfMeasureScript(pushId) + "</script>";

package/dist/http-server.js CHANGED Viewed

@@ -159,7 +159,7 @@ export function startHttpServer() {
         res.json({ ok });
     });
     app.post("/api/push", async (req, res) => {
-        const { sessionId, html, title, kind } = req.body ?? {};
+        const { sessionId, html, title, kind, theme } = req.body ?? {};
         if (typeof sessionId !== "string" || !sessionId.trim()) {
             res.status(400).json({ error: "sessionId required" });
             return;
@@ -185,7 +185,7 @@ export function startHttpServer() {
                 console.warn("[easel] image inlining failed; storing original html:", err);
             }
         }
-        const push = appendPush(sessionId, { html: storedHtml, title, kind });
+        const push = appendPush(sessionId, { html: storedHtml, title, kind, theme });
         touchSession(sessionId);
         broadcast(sessionId, "push", push);
         if (Math.random() < 0.05) {

package/dist/mcp.js CHANGED Viewed

@@ -21,6 +21,14 @@ const TOOL_PUSH = "push";
 const TOOL_OPEN = "open";
 const TOOL_CONFIG = "config";
 const TOOL_LABEL = "label";
+// When EASEL_SUPPRESS_SESSION=1 (set by automated/headless consumers like the
+// ammiels-bot dispatcher tick), easel loads normally but registers NO switcher
+// session — every tool short-circuits to a no-op, so the MCP never contacts the
+// HTTP server and the session never appears in the switcher. This keeps churny
+// background sessions out of the switcher WITHOUT disabling the MCP or any OTHER
+// connector. (Contrast `claude --strict-mcp-config`, which also strips the
+// claude.ai account connectors — Slack etc. — and so can't be used for this.)
+const SUPPRESS_SESSION = process.env.EASEL_SUPPRESS_SESSION === "1";
 // One-shot guard: only auto-open once per MCP-child lifetime. If the user
 // closes the tab afterwards, subsequent pushes won't re-open it — the user
 // closing the tab is treated as an explicit dismissal we should respect.
@@ -74,6 +82,11 @@ const inputSchema = {
             type: "string",
             description: "Freeform tag: mockup, app, diff, explanation, comparison, diagram, status, progress, etc. SPECIAL: 'mockup' and 'app' switch the iframe into APP-FIDELITY mode — the wrapper skips its PRESENTATION defaults (preset design-token CSS, semantic chips, prose width constraints, body bg/color, the Inter webfont) so the host theme can't leak in and you control every pixel. It KEEPS the self-contained structural primitives (.window/.window.dark window chrome, .code/.terminal code blocks — all fixed-colour, theme-independent) and a neutral system-sans default font, so you can still reach for <div class=\"window\"> in a mockup and it renders. Set your own font-family/colours in the pushed HTML to override the sans default. Use this kind when the push is a recreation of real UI (app screen, component instance, embedded preview). For presentation content (explanations, comparisons, status reports), omit kind or use a non-fidelity value.",
         },
+        theme: {
+            type: "string",
+            enum: ["light", "dark"],
+            description: "Canvas mode for THIS push — light or dark. SEALED at push time and never flips with the global Easel toggle: a pushed card is an immutable snapshot, like a screenshot. You OWN this canvas — set your own background + text colours in the HTML for the mode you pick here; do NOT write light-dark() / prefers-color-scheme for the page surface (the card is frozen to one mode, so adaptive CSS is dead weight). Omit to snapshot whatever the global theme is at push time (also frozen). Pass 'light' or 'dark' explicitly when you've been told which mode to present in.",
+        },
     },
     required: ["html"],
     additionalProperties: false,
@@ -87,6 +100,7 @@ async function pushToServer(args) {
             html: args.html,
             title: args.title,
             kind: args.kind,
+            theme: args.theme,
         }),
     });
     if (!r.ok) {
@@ -101,7 +115,9 @@ export async function main() {
         tools: [
             {
                 name: TOOL_PUSH,
-                description: "Push an HTML card to this session's live browser tab. Renders in a sandboxed iframe over a host-controlled canvas that can be LIGHT or DARK depending on the user's OS theme. Treat each card as a presentation slide — generous whitespace, presentation-scale type, tangible visuals. Your HTML MUST adapt to both light and dark modes.\n\n" +
+                description: "Push an HTML card to this session's live browser tab. Renders in a sandboxed iframe. Treat each card as a presentation slide — generous whitespace, presentation-scale type, tangible visuals.\n\n" +
+                    "═══ YOU OWN THE CANVAS — COMMIT TO ONE MODE ═══\n" +
+                    "A pushed card is an IMMUTABLE SNAPSHOT, like a screenshot: it's sealed at push time and NEVER reflows when the user toggles Easel's global light/dark theme. So pick ONE mode for this push and own every colour in it — set your own `background` AND `color` on `.wrap`/`body`, and choose surfaces/borders/ink for that single mode. Do NOT write `light-dark()` or `prefers-color-scheme` for the page surface; the card won't flip, so adaptive CSS is dead weight that just risks the wrong branch winning. Use the `theme` param to declare the mode ('light'/'dark') when you've been told which to present in; omit it to snapshot the current global theme (also frozen). Still scope `color: inherit` to descendants so a stray default ink can't leak in, and the locked primitives (.code/.terminal/.window) work exactly as before — the whole surface now just behaves like they already do: one committed mode, fully self-contained.\n\n" +
                     "═══ FIDELITY BAR — SHIP HIGH-FIDELITY BY DEFAULT ═══\n" +
                     "Default to polished, production-grade output that looks like a real screenshot of shipped software or a finished design — NOT a rough sketch, wireframe, or grey-box placeholder. This is the default for EVERY push; you do not need to be asked for quality. Only drop to low-fidelity (wireframe, ASCII-ish boxes, lorem-ipsum, unstyled) when the user EXPLICITLY says rough/lo-fi/wireframe/sketch/quick-and-dirty is fine, or asks for a thumbnail/napkin idea. When in doubt, go high-fidelity.\n" +
                     "What high-fidelity means concretely:\n" +
@@ -111,18 +127,19 @@ export async function main() {
                     "• Visual craft: deliberate hierarchy, aligned grids, consistent spacing scale, real iconography (inline SVG, not emoji-as-icon), proper empty/hover/active states where they matter. Avoid the generic-AI look (one purple gradient, evenly-sized boxes, centered everything).\n" +
                     "• Tangible over abstract (see VISUALS): a mock should read as the actual thing, not labeled rectangles.\n" +
                     "If you genuinely can't reach the bar (missing real values, ambiguous source), say so in ONE line in chat and push your best honest attempt — don't pass a rough draft off as final, and don't silently ship a grey-box.\n\n" +
-                    "═══ ADAPTIVE COLOR (gets wrong most often) ═══\n" +
-                    "• Do NOT set `background` on `body` or your root wrapper. The host paints the canvas — setting bg fights it and creates a wrong-shade block in the opposite mode.\n" +
-                    "• Use `light-dark()` for ALL text colors, card backgrounds, borders, and decorative shades. Add `:root { color-scheme: light dark; }` so the function resolves. Hardcoded `color: #475569` goes invisible in dark mode; hardcoded `border: 1px solid #e5e5e5` becomes a hard white line.\n" +
-                    "• After setting `.wrap { color: light-dark(...); }`, re-scope `color: inherit` to every descendant so child elements don't fall back to the host's default.\n" +
-                    "• Inverse rule: if you DO paint a fixed background on a container (a code block locked to dark, a brand-color hero), you MUST also set its text color AND re-scope `color: inherit` to its children. Background and text are a pair.\n\n" +
-                    "═══ COPY-PASTE STARTER (adaptive) ═══\n" +
-                    "  :root { color-scheme: light dark; }\n" +
-                    "  .wrap { color: light-dark(#111, #e8e8e8); padding: 56px 48px; font-family: -apple-system, 'Inter', system-ui, sans-serif; max-width: 820px; }\n" +
+                    "═══ COMMITTED COLOR — PICK ONE MODE, PAINT IT FULLY ═══\n" +
+                    "The card is frozen to one mode (the `theme` param, or the global theme snapshotted at push time). So:\n" +
+                    "• DO set `background` AND `color` explicitly on your root wrapper. You own the canvas — paint it. (Old guidance said 'leave bg to the host'; that's gone — the host no longer reflows your card, so an unpainted surface just inherits chrome you don't control.)\n" +
+                    "• Pick concrete colours for the ONE mode you chose — `color: #111` for a light card, `color: #e8e8e8` for a dark one. Do NOT use `light-dark()` / `prefers-color-scheme` for the surface; the card won't flip, so the adaptive branch is dead weight and risks resolving to the wrong half.\n" +
+                    "• Still re-scope `color: inherit` to every descendant so a stray default ink can't leak in.\n" +
+                    "• Pairing rule (unchanged): any container with a fixed background (a dark code block, a brand-color hero, a white card) MUST set its own text color and re-scope `color: inherit` to its children. Background and ink are always a pair.\n\n" +
+                    "═══ COPY-PASTE STARTER (light card) ═══\n" +
+                    "  .wrap { background: #faf7f0; color: #1a1a1a; padding: 56px 48px; font-family: -apple-system, 'Inter', system-ui, sans-serif; max-width: 820px; }\n" +
                     "  .wrap *, .wrap h1, .wrap h2, .wrap h3, .wrap p, .wrap li, .wrap span { color: inherit; }\n" +
-                    "  .card { background: light-dark(#fff, #161616); border: 1px solid light-dark(#e0d9c3, #2a2a2a); border-radius: 12px; padding: 24px; }\n\n" +
+                    "  .card { background: #ffffff; border: 1px solid #e0d9c3; border-radius: 12px; padding: 24px; }\n" +
+                    "  (dark card: .wrap { background:#0e1116; color:#e8e8e8 }  .card { background:#161616; border-color:#2a2a2a })\n\n" +
                     "═══ CODE / TERMINAL BLOCKS — USE THE BUILT-IN PRIMITIVE, DON'T HAND-ROLL ═══\n" +
-                    "The #1 recurring bug is a hand-rolled dark code container: you set `background:#0f172a` on a custom div but leave base text inheriting `.wrap`'s `light-dark(#111,…)`, which resolves to near-black in light host mode and VANISHES against the dark panel (only the explicitly-coloured syntax spans survive). Don't hand-roll it. The wrapper ships a baked-in, always-safe primitive:\n" +
+                    "The #1 recurring bug is a hand-rolled dark code container: you set `background:#0f172a` on a custom div but leave base text inheriting `.wrap`'s ink, which on a light card is near-black and VANISHES against the dark panel (only the explicitly-coloured syntax spans survive). Don't hand-roll it. The wrapper ships a baked-in, always-safe primitive:\n" +
                     "  <div class=\"code\"> … </div>   (alias: class=\"terminal\")\n" +
                     "It locks BOTH background (#0f172a) and ink (#e6edf3), re-scopes `color:inherit` to every child, and provides verified github-dark syntax token classes you can drop onto spans — NO per-token tuning needed:\n" +
                     "  .kw (keywords #ff7b72) · .string (#a5d6ff) · .fn (function #d2a8ff) · .prop (identifiers #79c0ff) · .num (#ffa657) · .comment (#8b949e) · .muted (#94a3b8) · .accent (#6ee7b7)\n" +
@@ -130,10 +147,10 @@ export async function main() {
                     "Plain <pre>/<code> are also already safe (bg+ink token pair). Only reach for a fully custom container when .code/.terminal genuinely don't fit — and then obey the locked-mode rule below.\n" +
                     "SAFETY NET: every push self-checks for low-contrast text (WCAG <3:1) after render. If your push trips it, the card gets an amber `⚠ contrast` chip on the meta row with the offender list in the tooltip, and the iframe console.warns with sample rgb pairs. Treat the chip as a build-failure-equivalent — the fix is almost always swapping the hand-rolled container for `.code` / `.terminal` (or, for a non-code locked-bg container, applying the locked-mode rule below).\n\n" +
                     "═══ COPY-PASTE STARTER (any OTHER LOCKED-MODE container — brand hero, custom panel) ═══\n" +
-                    "If a container has a FIXED background (not `light-dark()`), you MUST set its own text color AND re-scope `color: inherit` to its children. Otherwise the children inherit `light-dark(...)` from `.wrap` and the text flips to the wrong shade in one mode (e.g. dark text on a locked-dark panel in light host mode → invisible).\n" +
+                    "If a container has a background that differs from the card surface, you MUST set its own text color AND re-scope `color: inherit` to its children. Otherwise the children inherit `.wrap`'s committed ink, which may not suit the container's bg (e.g. dark text on a dark hero on a light card → invisible).\n" +
                     "  .hero { background: #0f172a; color: #e6edf3; border-radius: 12px; padding: 20px 24px; }\n" +
                     "  .hero * { color: inherit; }\n" +
-                    "• Same pairing applies in the OPPOSITE direction — locked-LIGHT containers (e.g. a white card on the host canvas). A `.card { background: #fff }` with no `color:` inherits `.wrap`'s light-dark() text, which in dark host mode resolves to a light cream/gray → invisible titles on a white card. Commit text too AND re-scope inherit on children. This bites just as often as the dark case.\n" +
+                    "• Same pairing applies in the OPPOSITE direction — a light panel sitting on a DARK card. A `.card { background: #fff }` with no `color:` inherits `.wrap`'s dark-card ink (a light cream/gray) → invisible titles on white. Commit text too AND re-scope inherit on children. This bites just as often as the dark case.\n" +
                     "  .card { background: #ffffff; color: #111111; border: 1px solid #e5e5e5; border-radius: 12px; padding: 24px 32px; }\n" +
                     "  .card * { color: inherit; }\n" +
                     "• Syntax-highlighted code in a locked-bg block: EVERY token color must be verified readable against the bg, not just the body color. Recurring bug: locking to #0f172a then giving 'property' / 'punctuation' / 'comment' tokens something like #2c2c40 because it 'looked subtle' — against #0f172a it's nearly invisible and identifiers disappear. Either use a tested theme designed for your bg (Shiki github-dark / vitesse-dark / one-dark-pro for #0f172a-ish, github-light / vitesse-light for #f5f7fa-ish), or pick from this verified palette for #0f172a: keyword #ff7b72, string #a5d6ff, function #d2a8ff, property #79c0ff, number #ffa657, comment #8b949e, default text #e6edf3. If you can't articulate why each token reads against the bg, drop highlighting and use single-color monospace — that always works.\n\n" +
@@ -232,6 +249,16 @@ export async function main() {
         ],
     }));
     server.setRequestHandler(CallToolRequestSchema, async (req) => {
+        if (SUPPRESS_SESSION) {
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: "easel: session suppressed (EASEL_SUPPRESS_SESSION=1) — no switcher entry created; easel tools are no-ops in this session.",
+                    },
+                ],
+            };
+        }
         const sessionId = resolveClaudeSessionId();
         const { port } = await ensureHttpServer();
         if (req.params.name === TOOL_OPEN) {
@@ -304,6 +331,7 @@ export async function main() {
             html: args.html,
             title: args.title,
             kind: args.kind,
+            theme: args.theme,
             port,
         });
         const url = `http://localhost:${port}/s/${sessionId}`;

package/dist/session-store.js CHANGED Viewed

@@ -63,11 +63,13 @@ export function getSessionView(id) {
 }
 export function appendPush(sessionId, input) {
     const meta = ensureSession(sessionId);
+    const theme = input.theme === "light" || input.theme === "dark" ? input.theme : null;
     const push = {
         id: randomUUID(),
         index: meta.nextIndex,
         title: input.title?.trim() || null,
         kind: input.kind?.trim() || null,
+        theme,
         html: input.html,
         createdAt: Date.now(),
     };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ammduncan/easel",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "A live browser tab for every Claude Code (and MCP) session. The push MCP tool appends HTML cards to a scrolling feed you keep open in split-screen.",
   "type": "module",
   "license": "MIT",

package/scripts/easel-session-id.mjs CHANGED Viewed

@@ -58,6 +58,14 @@ if (sessionId) {
   writeFileSync(join(hookDir, `cc-session-${process.ppid}.txt`), `${sessionId}\n`);
 }
+// Suppressed sessions (e.g. the ammiels-bot dispatcher tick set
+// EASEL_SUPPRESS_SESSION=1) get NO convention reminder: the MCP no-ops every
+// tool, so nagging the agent to label/push would only waste a tool call. Exit
+// before emitting additionalContext.
+if (process.env.EASEL_SUPPRESS_SESSION === "1") {
+  process.exit(0);
+}
 // --- staleness check (cached, every 24h) ------------------------------------
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const INSTALL_DIR = resolve(__dirname, "..");

package/skills/using-easel/SKILL.md CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>