@conduction/docusaurus-preset 3.32.0 → 3.34.0

package/src/components/KanbanMock/KanbanMock.module.css

@@ -5,17 +5,32 @@
  *
  * One shared timeline (--km-dur, default 7s):
  *
- *   0–12%   cursor travels to the top card in column 1
+ *   0–10%   cursor travels to the top card in column 1
  *   14%     the card lifts (scale + deeper shadow)
  *   16–50%  card + cursor drag to column 2's top slot
- *   52–55%  drop; the column counts crossfade (3→2, 2→3)
- *   55–86%  hold
- *   86–100% card fades back to its origin, counts revert, loop
+ *   50–54%  the card settles into the slot
+ *   54–56%  the column counts (3→2, 2→3) and the lane € KPIs
+ *           (€ 48k→€ 30k, € 27k→€ 45k) crossfade — right at the drop
+ *   56–86%  hold
+ *   86–100% card fades back to its origin, counts + KPIs revert, loop
+ *
+ * Geometry: the mover is absolutely positioned over the board, so its
+ * keyframe coordinates must equal the top card slot of columns 1 and
+ * 2. Those slots mix %-sized board chrome with px-sized column chrome,
+ * so the coordinates are calc() custom properties (--km-x1, --km-x2,
+ * --km-y, --km-card-w) derived below rather than by-eye percentages —
+ * that keeps the landing exact at every frame width. Derivation:
+ *   board padding 6%/5% of frame width W; column gap 4% of the 90%
+ *   content box = 3.6%W; columns (90% − 7.2%)/3 = 27.6%W;
+ *   col chrome = 1px border + 10px padding = 11px;
+ *   vertical: 6%W top pad = 9.6% of the 16/10 frame height, + KPI row
+ *   34px + 12px row gap + col chrome 11px + head 16px + head margin
+ *   2px + col gap 8px = 83px.
  *
  * prefers-reduced-motion (and .static from running={false}) renders
  * the static board: no cursor, no animation, the card resting in its
- * origin column, original counts. Tokens only; the mover's status
- * dot (mint) is the only non-neutral accent; no orange.
+ * origin column, original counts and KPI values. Tokens only; the
+ * mover's status dot (mint) is the only non-neutral accent; no orange.
  */
 
 .km { display: contents; }
@@ -31,6 +46,11 @@
 
 .km .frame {
   --km-dur: 7s;
+  /* Card-slot geometry (see the derivation in the header comment). */
+  --km-x1: calc(5% + 11px);
+  --km-x2: calc(36.2% + 11px);
+  --km-y: calc(9.6% + 83px);
+  --km-card-w: calc(27.6% - 22px);
   width: 100%;
   max-width: 720px;
   aspect-ratio: 16 / 10;
@@ -62,8 +82,71 @@
   padding: 6% 5%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto 1fr;
+  /* Fixed 12px row gap (part of the mover's --km-y derivation);
+     percentage column gap so lanes track the frame width. */
+  gap: 12px 4%;
+}
+
+/* ---- KPI row above the lanes ---- */
+
+.km .kpis {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* Same content box as the board, so 4% aligns tiles with lanes. */
   gap: 4%;
+  min-width: 0;
+}
+
+.km .kpi {
+  box-sizing: border-box;
+  height: 34px; /* fixed: part of the mover's --km-y derivation */
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-1);
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+.km .kpiBar {
+  display: block;
+  width: 26%;
+  height: 4px;
+  border-radius: 1px;
+  background: var(--c-cobalt-300);
+  flex-shrink: 0;
+}
+.km .kpiValue {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 38px;
+  height: 14px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+  white-space: nowrap;
+}
+/* The crossfading value spans reuse .countBefore/.countAfter (same
+   timeline, same static overrides) but sit right-aligned in the tile
+   instead of filling a pill. */
+.km .kpiValue .countBefore,
+.km .kpiValue .countAfter {
+  inset: auto;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
 }
+/* A lane total that never changes (third lane). */
+.km .kpiStill { display: inline-flex; align-items: center; }
 
 .km .col {
   background: var(--c-cobalt-50);
@@ -124,6 +207,9 @@
 
 .km .card,
 .km .mover {
+  /* Explicit border-box: --km-card-w describes the full card box, and
+     not every consumer of this file ships a global box-sizing reset. */
+  box-sizing: border-box;
   background: white;
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-sm);
@@ -134,9 +220,10 @@
   gap: 5px;
 }
 
-/* The gap where the travelling card lives at rest. Sized like a card
-   so the column layout doesn't jump. */
-.km .slotGap { height: 44px; flex-shrink: 0; }
+/* The gap where the travelling card lives at rest. Exactly the
+   mover's height (2px border + 16px padding + 23px content) so the
+   card sits flush in the slot when it lands. */
+.km .slotGap { height: 41px; flex-shrink: 0; }
 
 .km .cardTop { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
 .km .cardBar  { display: block; height: 4px; border-radius: 1px; background: var(--c-cobalt-700); }
@@ -153,24 +240,26 @@
 
 .km .mover {
   position: absolute;
-  /* Origin: column 1's top slot (board padding 6%/5%, col padding,
-     head row). Kept in sync with .slotGap by eye — it's a mock. */
-  left: 7.4%;
-  top: 21%;
-  width: 24.5%;
+  /* Origin: column 1's top slot. Exact calc() geometry — see the
+     header comment — so the card sits flush in the slot at rest and
+     when it lands, at every frame width. The lift is a transform so
+     left/top always mean "the slot". */
+  left: var(--km-x1);
+  top: var(--km-y);
+  width: var(--km-card-w);
   animation: kmMove var(--km-dur) linear infinite;
   z-index: 2;
 }
 
 @keyframes kmMove {
-  0%, 10% { left: 7.4%;  top: 21%; transform: scale(1);    box-shadow: var(--shadow-1); opacity: 1; }
-  14%     { left: 7.4%;  top: 19.5%; transform: scale(1.05); box-shadow: var(--shadow-3); opacity: 1; }
-  50%     { left: 39.2%; top: 19.5%; transform: scale(1.05); box-shadow: var(--shadow-3); opacity: 1; }
-  54%     { left: 39.2%; top: 21%; transform: scale(1);    box-shadow: var(--shadow-1); opacity: 1; }
-  86%     { left: 39.2%; top: 21%; transform: scale(1);    box-shadow: var(--shadow-1); opacity: 1; }
-  92%     { left: 39.2%; top: 21%; opacity: 0; }
-  96%     { left: 7.4%;  top: 21%; opacity: 0; }
-  100%    { left: 7.4%;  top: 21%; transform: scale(1);    box-shadow: var(--shadow-1); opacity: 1; }
+  0%, 10% { left: var(--km-x1); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  14%     { left: var(--km-x1); top: var(--km-y); transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-3); opacity: 1; }
+  50%     { left: var(--km-x2); top: var(--km-y); transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-3); opacity: 1; }
+  54%     { left: var(--km-x2); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  86%     { left: var(--km-x2); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  92%     { left: var(--km-x2); top: var(--km-y); opacity: 0; }
+  96%     { left: var(--km-x1); top: var(--km-y); opacity: 0; }
+  100%    { left: var(--km-x1); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
 }
 
 /* ---- Cursor ---- */
@@ -191,23 +280,26 @@
 
 @keyframes kmCursor {
   0%      { left: 60%; top: 60%; }
-  10%     { left: 17%; top: 26%; }  /* over the card */
-  14%     { left: 17%; top: 24.5%; }
-  50%     { left: 48.8%; top: 24.5%; } /* drag with the card */
-  54%     { left: 48.8%; top: 26%; }
+  10%     { left: calc(var(--km-x1) + 10%); top: calc(var(--km-y) + 18px); }  /* over the card */
+  14%     { left: calc(var(--km-x1) + 10%); top: calc(var(--km-y) + 15px); }
+  50%     { left: calc(var(--km-x2) + 10%); top: calc(var(--km-y) + 15px); }  /* drag with the card */
+  54%     { left: calc(var(--km-x2) + 10%); top: calc(var(--km-y) + 18px); }
   64%     { left: 60%; top: 60%; }  /* release, drift away */
   100%    { left: 60%; top: 60%; }
 }
 
 /* ---- Count crossfade ---- */
 
+/* Counts and KPI values swap the moment the card settles: the drop
+   ends at 54%, the crossfade runs 54–56%. They revert while the card
+   fades back to its origin (86–96%). */
 @keyframes kmCountBefore {
-  0%, 53%   { opacity: 1; }
+  0%, 54%   { opacity: 1; }
   56%, 88%  { opacity: 0; }
   93%, 100% { opacity: 1; }
 }
 @keyframes kmCountAfter {
-  0%, 53%   { opacity: 0; }
+  0%, 54%   { opacity: 0; }
   56%, 88%  { opacity: 1; }
   93%, 100% { opacity: 0; }
 }

package/src/components/KanbanMock/__tests__/KanbanMock.render.test.js

@@ -0,0 +1,114 @@
+/**
+ * KanbanMock.render.test.js — renders the real <KanbanMock> JSX to
+ * static markup (the SSR path Docusaurus takes at build time) and
+ * asserts on the output: the KPI row above the lanes with its
+ * before/after € values, the column counts, and the static mode.
+ *
+ * Uses the same esbuild-bundle-then-renderToStaticMarkup technique as
+ * AiDisclosure.render.test.js / scripts/build-kit.mjs. CSS modules
+ * are stubbed with an identity proxy (styles.foo → 'foo'), so class
+ * assertions read as the source class names.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'KanbanMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-kanban-mock-test');
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let KanbanMock;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  KanbanMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(KanbanMock, props));
+}
+
+test('SSR smoke: renders the board with three lanes and the travelling card', () => {
+  const html = render({});
+  assert.equal((html.match(/class="col"/g) || []).length, 3);
+  assert.match(html, /class="mover"/);
+});
+
+test('KPI row: one € tile per lane, before/after values on the two lanes the deal moves between', () => {
+  const html = render({});
+  assert.match(html, /class="kpis"/);
+  assert.equal((html.match(/class="kpi"/g) || []).length, 3);
+  // Source lane loses the €18k deal, target lane gains it.
+  assert.match(html, /class="countBefore">€ 48k</);
+  assert.match(html, /class="countAfter">€ 30k</);
+  assert.match(html, /class="countBefore">€ 27k</);
+  assert.match(html, /class="countAfter">€ 45k</);
+  // Third lane never changes: a still value, no crossfade spans.
+  assert.match(html, /class="kpiStill">€ 64k</);
+});
+
+test('KPI arithmetic: the moved deal value leaving lane 1 equals the value entering lane 2', () => {
+  const html = render({});
+  const nums = [...html.matchAll(/class="count(Before|After)">€ (\d+)k</g)].map((m) => Number(m[2]));
+  assert.equal(nums.length, 4, 'expected two crossfading € tiles (2 values each)');
+  // Order in markup: lane1 before, lane1 after, lane2 before, lane2 after.
+  const [l1From, l1To, l2From, l2To] = nums;
+  assert.equal(l1From - l1To, l2To - l2From, 'the deal value must shift lanes, not appear or vanish');
+  assert.ok(l1From - l1To > 0, 'source lane must decrement');
+});
+
+test('column counts: source lane 3→2, target lane 2→3, third lane static 4', () => {
+  const html = render({});
+  assert.match(html, /class="count"><span class="countBefore">3<\/span><span class="countAfter">2<\/span>/);
+  assert.match(html, /class="count"><span class="countBefore">2<\/span><span class="countAfter">3<\/span>/);
+  assert.match(html, /class="countStatic">4</);
+});
+
+test('aria-label names the counts and lane totals updating at the drop', () => {
+  const html = render({});
+  assert.match(html, /aria-label="[^"]*column counts and the lane value totals update at the drop[^"]*"/);
+});
+
+test('running={false} renders the static frame class', () => {
+  const html = render({running: false});
+  assert.match(html, /class="frame size-md static"/);
+});

package/src/components/LeafMock/LeafMock.jsx

@@ -8,26 +8,39 @@
  *
  * Same abstraction level as <AppMock> (honeycomb.io/technologies/*):
  * greeked content, tokens only, no real text beyond short labels.
- * Four variants:
+ * Four variants, each with a small looping animation on the shared
+ * 6s timeline (--lm-dur):
  *
  *   - contacts: address-book rows with pointy-top hex avatars and a
- *     mint sync arrow to a phone silhouette
+ *     mint sync arrow to a phone silhouette. The arrow pulses and the
+ *     phone rows arrive in a stagger (the sync lands on the phone)
  *   - calendar: mini month grid with one highlighted day and a
- *     linked-event chip (lavender bar)
+ *     linked-event chip (lavender bar). The day pops highlighted,
+ *     then the event chip slides in beneath
  *   - mail:     message list with one highlighted row carrying a
- *     mint "create from email" action chip
- *   - files:    folder/file rows with a link-to-record chip (forest)
+ *     mint "create from email" action chip. The row highlights, then
+ *     the chip pops with an overshoot
+ *   - files:    folder/file rows with a link-to-record chip (forest).
+ *     The linked row slides in, the chip pops, and its link icon
+ *     draws itself (pathLength dash technique)
+ *
+ * `running={false}` (the `.static` frame class) and the user's
+ * prefers-reduced-motion setting freeze each leaf to its meaningful
+ * end state: synced rows, highlighted day + chip, highlighted mail
+ * row + chip, linked file row.
  *
  * Usage:
  *
  *   <LeafMock leaf="contacts" />
  *   <LeafMock leaf="calendar" caption size="sm" />
+ *   <LeafMock leaf="mail" running={false} />
  *
  * Props:
  *   - leaf:      'contacts' | 'calendar' | 'mail' | 'files' (required)
  *   - size:      'sm' | 'md' (default)  — frame width
  *   - caption:   string | true          — small label below the frame;
  *                `true` uses the variant's default label
+ *   - running:   boolean (default true) — false freezes the leaf
  *   - className: string
  */
 
@@ -126,7 +139,9 @@ function FilesLeaf() {
           {i === 1 && (
             <span className={[styles.actionChip, styles.recordChip].join(' ')}>
               <svg className={styles.linkIcon} viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6L12.5 17.5" />
+                {/* pathLength="1" so the draw animation's dash
+                    arithmetic is geometry-independent. */}
+                <path pathLength="1" d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6L12.5 17.5" />
               </svg>
               <Greek w="26px" tone="chip" />
             </span>
@@ -144,7 +159,7 @@ const VARIANTS = {
   files:    {Component: FilesLeaf,    label: 'Files leaf'},
 };
 
-export default function LeafMock({leaf, size = 'md', caption, className}) {
+export default function LeafMock({leaf, size = 'md', caption, running = true, className}) {
   const variant = VARIANTS[leaf];
   if (!variant) {
     return (
@@ -159,7 +174,7 @@ export default function LeafMock({leaf, size = 'md', caption, className}) {
   return (
     <div className={styles.lm}>
       <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
-        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
+        <div className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}>
           <Component />
         </div>
         {caption && (

package/src/components/LeafMock/LeafMock.module.css

@@ -6,6 +6,11 @@
  * Tokens only. Accent discipline per leaf: contacts sync = mint,
  * calendar event bar = lavender, mail action chip = mint, files
  * record chip = forest. No orange anywhere in this component.
+ *
+ * All four leaves animate on the shared --lm-dur timeline (6s),
+ * KanbanMock conventions: base styles are the meaningful end state,
+ * loops reset by opacity swap, `.static` (running={false}) and
+ * prefers-reduced-motion freeze to the base styles.
  */
 
 .lm { display: contents; }
@@ -20,6 +25,7 @@
 }
 
 .lm .frame {
+  --lm-dur: 6s;
   width: 100%;
   max-width: 360px;
   aspect-ratio: 4 / 3;
@@ -235,3 +241,120 @@
 }
 .lm .fileLines { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 .lm .recordChip { background: var(--c-forest-500); }
+
+/* ======================================================================
+   Animations — one shared 6s timeline (--lm-dur) per leaf
+   ====================================================================== */
+
+/* ---- Contacts: the sync arrow double-pulses, then the contact data
+   lands on the phone as three staggered rows. ---- */
+
+.lm .syncArrow { animation: lmSyncPulse var(--lm-dur) ease-in-out infinite; }
+@keyframes lmSyncPulse {
+  0%, 6%    { transform: scale(1); }
+  12%       { transform: scale(1.18); }
+  18%       { transform: scale(1); }
+  26%       { transform: scale(1.18); }
+  32%, 100% { transform: scale(1); }
+}
+
+.lm .phoneRow { animation: lmPhoneRow var(--lm-dur) ease-out infinite both; }
+.lm .phoneRow:nth-child(2) { animation-delay: 0.35s; }
+.lm .phoneRow:nth-child(3) { animation-delay: 0.7s; }
+@keyframes lmPhoneRow {
+  0%, 18%   { opacity: 0; transform: translateX(-4px); }
+  26%, 92%  { opacity: 1; transform: none; }
+  97%, 100% { opacity: 0; transform: none; }
+}
+
+/* ---- Calendar: the linked day pops highlighted, then the event chip
+   slides in beneath the month grid. ---- */
+
+.lm .dayActive { animation: lmDayPop var(--lm-dur) ease-in-out infinite; }
+@keyframes lmDayPop {
+  0%, 8%    { background-color: var(--c-cobalt-50); border-color: var(--c-cobalt-100); transform: scale(1); }
+  16%       { background-color: var(--c-lavender-300); border-color: var(--c-lavender-500); transform: scale(1.35); }
+  22%, 90%  { background-color: var(--c-lavender-300); border-color: var(--c-lavender-500); transform: scale(1); }
+  98%, 100% { background-color: var(--c-cobalt-50); border-color: var(--c-cobalt-100); transform: scale(1); }
+}
+
+.lm .eventChip { animation: lmChipSlide var(--lm-dur) ease-out infinite both; }
+@keyframes lmChipSlide {
+  0%, 22%   { opacity: 0; transform: translateY(8px); }
+  32%, 92%  { opacity: 1; transform: none; }
+  98%, 100% { opacity: 0; transform: none; }
+}
+
+/* ---- Mail: the middle row highlights, then the create-from-email
+   chip pops with an overshoot. ---- */
+
+.lm .mailRowActive { animation: lmRowHl var(--lm-dur) ease-in-out infinite; }
+@keyframes lmRowHl {
+  0%, 10%   { background-color: transparent; border-color: transparent; }
+  20%, 90%  { background-color: var(--c-cobalt-50); border-color: var(--c-cobalt-100); }
+  98%, 100% { background-color: transparent; border-color: transparent; }
+}
+
+.lm .mail .actionChip { transform-origin: center; animation: lmChipPop var(--lm-dur) ease-in-out infinite both; }
+@keyframes lmChipPop {
+  0%, 26%   { opacity: 0; transform: scale(0); }
+  34%       { opacity: 1; transform: scale(1.18); }
+  39%, 90%  { opacity: 1; transform: scale(1); }
+  97%, 100% { opacity: 0; transform: scale(1); }
+}
+
+/* ---- Files: the linked row slides in, the record chip pops, and its
+   link icon draws itself (the path carries pathLength="1"). ---- */
+
+.lm .files .fileRow:nth-child(2) { animation: lmFileRow var(--lm-dur) ease-out infinite both; }
+@keyframes lmFileRow {
+  0%, 8%    { opacity: 0; transform: translateY(-4px); }
+  16%, 92%  { opacity: 1; transform: none; }
+  98%, 100% { opacity: 0; transform: none; }
+}
+
+.lm .files .recordChip { transform-origin: center; animation: lmChipPop var(--lm-dur) ease-in-out infinite both; }
+.lm .files .recordChip .linkIcon path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: lmLinkDraw var(--lm-dur) ease-in-out infinite both;
+}
+@keyframes lmLinkDraw {
+  0%, 34%   { stroke-dashoffset: 1; }
+  56%, 100% { stroke-dashoffset: 0; }
+}
+
+/* ======================================================================
+   Static frames — running={false} adds `.static` to `.lm .frame`; the
+   media query mirrors it for prefers-reduced-motion. Base styles are
+   the end state, so freezing is animation: none plus the icon-draw
+   dash reset.
+   ====================================================================== */
+
+.lm .static .syncArrow,
+.lm .static .phoneRow,
+.lm .static .dayActive,
+.lm .static .eventChip,
+.lm .static .mailRowActive,
+.lm .static .mail .actionChip,
+.lm .static .files .fileRow:nth-child(2),
+.lm .static .files .recordChip,
+.lm .static .files .recordChip .linkIcon path {
+  animation: none;
+}
+.lm .static .files .recordChip .linkIcon path { stroke-dasharray: none; stroke-dashoffset: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .lm .syncArrow,
+  .lm .phoneRow,
+  .lm .dayActive,
+  .lm .eventChip,
+  .lm .mailRowActive,
+  .lm .mail .actionChip,
+  .lm .files .fileRow:nth-child(2),
+  .lm .files .recordChip,
+  .lm .files .recordChip .linkIcon path {
+    animation: none;
+  }
+  .lm .files .recordChip .linkIcon path { stroke-dasharray: none; stroke-dashoffset: 0; }
+}

package/src/components/LeafMock/__tests__/LeafMock.render.test.js

@@ -0,0 +1,105 @@
+/**
+ * LeafMock.render.test.js — SSR-renders the real <LeafMock> for each
+ * of its four leaves and asserts the animation hooks and the P0
+ * `running` prop plumbing (static class on the frame). Same
+ * esbuild-bundle-then-renderToStaticMarkup harness as
+ * KanbanMock.render.test.js; CSS modules stubbed to identity.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'LeafMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-leaf-mock-test');
+
+const LEAVES = ['contacts', 'calendar', 'mail', 'files'];
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let LeafMock;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  LeafMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(LeafMock, props));
+}
+
+test('SSR smoke: every leaf renders a frame, none falls through to Unknown leaf', () => {
+  for (const leaf of LEAVES) {
+    const html = render({leaf});
+    assert.match(html, /class="frame size-md"/, `${leaf}: frame missing`);
+    assert.doesNotMatch(html, /Unknown leaf/, `${leaf}: fell through`);
+  }
+});
+
+test('P0 plumbing: running={false} adds the static class on every leaf; default omits it', () => {
+  for (const leaf of LEAVES) {
+    assert.match(render({leaf, running: false}), /class="frame size-md static"/, `${leaf}: no static frame`);
+    assert.doesNotMatch(render({leaf}), /\bstatic\b/, `${leaf}: static leaked into the running frame`);
+  }
+});
+
+test('contacts: sync arrow and three phone rows (the staggered landing targets)', () => {
+  const html = render({leaf: 'contacts'});
+  assert.match(html, /class="syncArrow"/);
+  assert.equal((html.match(/class="phoneRow"/g) || []).length, 3);
+});
+
+test('calendar: active day and the sliding event chip', () => {
+  const html = render({leaf: 'calendar'});
+  assert.match(html, /day dayActive/);
+  assert.match(html, /class="eventChip"/);
+});
+
+test('mail: highlighted row carries the popping action chip', () => {
+  const html = render({leaf: 'mail'});
+  assert.match(html, /mailRow mailRowActive/);
+  assert.match(html, /class="actionChip"/);
+});
+
+test('files: the record chip link icon carries pathLength="1" for the draw animation', () => {
+  const html = render({leaf: 'files'});
+  assert.match(html, /actionChip recordChip/);
+  assert.match(html, /pathLength="1"/);
+});