@conduction/docusaurus-preset 3.32.0 → 3.34.0

package/src/components/AppMock/variants/LaunchPadBiMock.jsx

@@ -5,6 +5,13 @@
  * on a register without ETL. The mock shows four graph cards in a
  * 2×2 grid (bar chart, line chart, donut KPI, second bar with a
  * different accent), plus a ranked-list table widget on the right.
+ *
+ * Animated (9s loop, --am-dur): the charts draw themselves — bars
+ * grow from the axis in a stagger, the line draws along its path
+ * (pathLength="1" dash technique) and its end dot pops, the donut
+ * sweeps in, and the KPI delta bars fade up (inline delays).
+ * `running={false}` / prefers-reduced-motion show the drawn charts.
+ * Keyframes live in AppMock.module.css (`.lpBi` section).
  */
 
 import React from 'react';
@@ -20,7 +27,7 @@ export default function LaunchPadBiMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.launchpad].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.launchpad, styles.lpBi].filter(Boolean).join(' ')}>
         <div className={styles.grid}>
           {/* Column 1: Bar chart on top, line chart below */}
           <div className={styles.col}>
@@ -45,7 +52,7 @@ export default function LaunchPadBiMock() {
               <div className={styles.chart}>
                 <svg viewBox="0 0 100 40" preserveAspectRatio="none">
                   <path className={styles.fill}   d="M0,32 L14,24 L28,28 L42,18 L56,22 L70,12 L84,16 L100,8 L100,40 L0,40 Z"/>
-                  <path className={styles.stroke} d="M0,32 L14,24 L28,28 L42,18 L56,22 L70,12 L84,16 L100,8"/>
+                  <path className={styles.stroke} pathLength="1" d="M0,32 L14,24 L28,28 L42,18 L56,22 L70,12 L84,16 L100,8"/>
                   <circle className={styles.dot} cx="100" cy="8" r="2.5"/>
                 </svg>
               </div>
@@ -89,7 +96,7 @@ export default function LaunchPadBiMock() {
               </div>
               <div style={{display: 'flex', alignItems: 'baseline', gap: 4}}>
                 <div style={{height: 12, width: 28, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
-                <div style={{height: 4, width: 16, background: 'var(--c-mint-500)', borderRadius: 1}}></div>
+                <div className={styles.biDelta} style={{height: 4, width: 16, background: 'var(--c-mint-500)', borderRadius: 1}}></div>
               </div>
               <div style={{height: 3, width: '70%', background: 'var(--c-cobalt-200)', borderRadius: 1}}></div>
             </div>
@@ -99,7 +106,7 @@ export default function LaunchPadBiMock() {
               </div>
               <div style={{display: 'flex', alignItems: 'baseline', gap: 4}}>
                 <div style={{height: 12, width: 22, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
-                <div style={{height: 4, width: 14, background: 'var(--c-orange-knvb)', borderRadius: 1}}></div>
+                <div className={styles.biDelta} style={{height: 4, width: 14, background: 'var(--c-orange-knvb)', borderRadius: 1, animationDelay: '0.2s'}}></div>
               </div>
               <div style={{height: 3, width: '60%', background: 'var(--c-cobalt-200)', borderRadius: 1}}></div>
             </div>
@@ -109,7 +116,7 @@ export default function LaunchPadBiMock() {
               </div>
               <div style={{display: 'flex', alignItems: 'baseline', gap: 4}}>
                 <div style={{height: 12, width: 30, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
-                <div style={{height: 4, width: 12, background: 'var(--c-mint-500)', borderRadius: 1}}></div>
+                <div className={styles.biDelta} style={{height: 4, width: 12, background: 'var(--c-mint-500)', borderRadius: 1, animationDelay: '0.4s'}}></div>
               </div>
               <div style={{height: 3, width: '80%', background: 'var(--c-cobalt-200)', borderRadius: 1}}></div>
             </div>

package/src/components/AppMock/variants/LaunchPadTilesMock.jsx

@@ -7,6 +7,11 @@
  * a sub-grid of further tiles. The mock pictures exactly that mix:
  * four launcher tiles top-left, a 2×2 sub-grid bottom-left ("custom
  * tile group"), and two info widgets right.
+ *
+ * Animated (7s loop, --am-dur): the custom tile group is pressed
+ * (a short scale dip) and unfolds its four sub-tiles in a stagger.
+ * `running={false}` / prefers-reduced-motion show the unfolded
+ * group. Keyframes live in AppMock.module.css (`.lpTiles` section).
  */
 
 import React from 'react';
@@ -22,7 +27,7 @@ export default function LaunchPadTilesMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.launchpad].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.launchpad, styles.lpTiles].filter(Boolean).join(' ')}>
         <div className={styles.grid}>
           {/* Column 1: Launcher tiles in cobalt + KNVB */}
           <div className={styles.col}>

package/src/components/AppMock/variants/LaunchPadWidgetsMock.jsx

@@ -11,11 +11,20 @@
  *  - Jira      → external-app status board
  *  - RSS       → headlines feed
  *  - Video     → video-call shortcut
+ *
+ * Animated (10s loop, --am-dur): the dashboard assembles — the seven
+ * widgets arrive one by one on a 900ms stagger (inline
+ * animation-delay, reading order), hold, then fade for the reset.
+ * `running={false}` / prefers-reduced-motion show the assembled
+ * board. Keyframes live in AppMock.module.css (`.lpWidgets` section).
  */
 
 import React from 'react';
 import styles from '../AppMock.module.css';
 
+/* Per-widget arrival delay on the shared stagger. */
+const ARRIVE = (i) => ({animationDelay: `${i * 900}ms`});
+
 export default function LaunchPadWidgetsMock() {
   return (
     <>
@@ -26,11 +35,11 @@ export default function LaunchPadWidgetsMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.launchpad].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.launchpad, styles.lpWidgets].filter(Boolean).join(' ')}>
         <div className={styles.grid}>
           {/* Column 1: Procest werkvoorraad + DocuDesk upload */}
           <div className={styles.col}>
-            <div className={[styles.w, styles['w-werkvoorraad']].join(' ')}>
+            <div className={[styles.w, styles['w-werkvoorraad']].join(' ')} style={ARRIVE(0)}>
               <div className={styles.wHead}>
                 <div className={styles.h}></div><div className={styles.t}></div>
               </div>
@@ -42,7 +51,7 @@ export default function LaunchPadWidgetsMock() {
                 <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.b].join(' ')}></div></div>
               </div>
             </div>
-            <div className={[styles.w, styles['w-upload']].join(' ')}>
+            <div className={[styles.w, styles['w-upload']].join(' ')} style={ARRIVE(1)}>
               <div className={styles.wHead}>
                 <div className={styles.h}></div><div className={styles.t}></div>
               </div>
@@ -53,7 +62,7 @@ export default function LaunchPadWidgetsMock() {
             </div>
           </div>
           {/* Column 2: Mail (Important mail) */}
-          <div className={[styles.w, styles['w-mail']].join(' ')}>
+          <div className={[styles.w, styles['w-mail']].join(' ')} style={ARRIVE(2)}>
             <div className={styles.wHead}>
               <div className={styles.h}></div><div className={styles.t}></div>
             </div>
@@ -71,7 +80,7 @@ export default function LaunchPadWidgetsMock() {
           </div>
           {/* Column 3: Jira status board + RSS feed */}
           <div className={styles.col}>
-            <div className={[styles.w, styles['w-jira']].join(' ')}>
+            <div className={[styles.w, styles['w-jira']].join(' ')} style={ARRIVE(3)}>
               <div className={styles.wHead}>
                 <div className={styles.h}></div><div className={styles.t}></div>
               </div>
@@ -83,7 +92,7 @@ export default function LaunchPadWidgetsMock() {
                 <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
               </div>
             </div>
-            <div className={[styles.w, styles['w-rss']].join(' ')}>
+            <div className={[styles.w, styles['w-rss']].join(' ')} style={ARRIVE(4)}>
               <div className={styles.wHead}>
                 <div className={styles.h}></div><div className={styles.t}></div>
               </div>
@@ -96,7 +105,7 @@ export default function LaunchPadWidgetsMock() {
           </div>
           {/* Column 4: Calendar + Video call shortcut */}
           <div className={styles.col}>
-            <div className={[styles.w, styles['w-calendar']].join(' ')}>
+            <div className={[styles.w, styles['w-calendar']].join(' ')} style={ARRIVE(5)}>
               <div className={styles.wHead}>
                 <div className={styles.h}></div><div className={styles.t}></div>
               </div>
@@ -106,7 +115,7 @@ export default function LaunchPadWidgetsMock() {
                 ))}
               </div>
             </div>
-            <div className={[styles.w, styles['w-video']].join(' ')}>
+            <div className={[styles.w, styles['w-video']].join(' ')} style={ARRIVE(6)}>
               <div className={styles.wHead}>
                 <div className={styles.h}></div><div className={styles.t}></div>
               </div>

package/src/components/AppMock/variants/NLDesignMock.jsx

@@ -5,6 +5,14 @@
  * centre shows a settings layout with a colour-swatch row, a type
  * specimen, and a component preview block. Left nav for theme /
  * colours / typography / spacing / components / overrides.
+ *
+ * Animated (6s loop, --am-dur): the lavender swatch is selected (a
+ * cobalt focus ring pops on it), the component preview rethemes in a
+ * cascade (button, then status pill crossfade to lavender), and the
+ * type-scale bars restretch as if the theme changed the scale. The
+ * loop reverts by crossfading back. `running={false}` /
+ * prefers-reduced-motion show the resting cobalt/mint theme with no
+ * ring. Keyframes live in AppMock.module.css (`.nldesign` section).
  */
 
 import React from 'react';
@@ -20,7 +28,7 @@ export default function NLDesignMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.openregister].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.openregister, styles.nldesign].filter(Boolean).join(' ')}>
         <div className={styles.nav}>
           <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
           {[true, false, false, false, false, false].map((active, i) => (
@@ -35,15 +43,16 @@ export default function NLDesignMock() {
           <div className={styles.panel}>
             <div className={styles.head}><div className={styles.title}></div></div>
             <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
+              {/* Index 3 (lavender) is the swatch the animation selects. */}
               {['var(--c-blue-cobalt)','var(--c-orange-knvb)','var(--c-mint-500)','var(--c-lavender-500)','var(--c-forest-500)','var(--c-terracotta-500)','var(--c-cobalt-300)','var(--c-cobalt-100)'].map((bg, i) => (
-                <span key={i} style={{width: 22, height: 22, borderRadius: 4, background: bg}}></span>
+                <span key={i} className={[styles.swatch, i === 3 && styles.swatchSel].filter(Boolean).join(' ')} style={{background: bg}}></span>
               ))}
             </div>
           </div>
           {/* Type specimen */}
           <div className={styles.panel}>
             <div className={styles.head}><div className={styles.title}></div></div>
-            <div style={{display: 'flex', alignItems: 'baseline', gap: 8}}>
+            <div className={styles.typeRow} style={{display: 'flex', alignItems: 'baseline', gap: 8}}>
               <div style={{height: 14, width: 18, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
               <div style={{height: 11, width: 14, background: 'var(--c-cobalt-700)', borderRadius: 1}}></div>
               <div style={{height: 8,  width: 12, background: 'var(--c-cobalt-400)', borderRadius: 1}}></div>
@@ -56,7 +65,9 @@ export default function NLDesignMock() {
           {/* Component preview */}
           <div className={styles.panel}>
             <div className={styles.head}><div className={styles.title}></div></div>
-            <div style={{display: 'flex', gap: 6, flexWrap: 'wrap'}}>
+            {/* The .actions wrapper is required for .btn to pick up its
+                styles (the buttons rendered invisible without it). */}
+            <div className={styles.actions} style={{alignItems: 'center', flexWrap: 'wrap'}}>
               <div className={styles.btn}></div>
               <div className={styles.btn + ' ' + styles.ghost}></div>
               <div className={styles.statusPill}><div className={styles.h}></div><div className={styles.t}></div></div>

package/src/components/AppMock/variants/PipelinQMock.jsx

@@ -6,6 +6,13 @@
  * (lead, qualified, proposal, won, lost) plus a KPI strip on top
  * (pipeline value, win rate, deals this week). Left nav for kanban /
  * customers / contacts / deals / quotes.
+ *
+ * Animated (7s loop, --am-dur): a deal closes — the proposal-column
+ * card collapses, the won card scales in with its mint bar, and the
+ * pipeline-value KPI widens. Resets by opacity swap. `running={false}`
+ * / prefers-reduced-motion show the closed state (won card in place,
+ * proposal card gone). Keyframes live in AppMock.module.css (`.plq`
+ * section).
  */
 
 import React from 'react';
@@ -21,7 +28,7 @@ export default function PipelinQMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.decidesk].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.decidesk, styles.plq].filter(Boolean).join(' ')}>
         <div className={styles.nav}>
           <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
           {[true, false, false, false, false].map((active, i) => (
@@ -71,9 +78,12 @@ export default function PipelinQMock() {
               <div className={styles.col}>
                 <div className={[styles.card, styles.c].join(' ')}></div>
                 <div className={styles.card}></div>
-                <div className={styles.card}></div>
+                {/* The deal being closed — collapses out of proposal. */}
+                <div className={[styles.card, styles.dealGone].join(' ')}></div>
               </div>
               <div className={styles.col}>
+                {/* …and lands here as the won card (mint bar). */}
+                <div className={[styles.card, styles.dealWon].join(' ')}></div>
                 <div className={[styles.card, styles.c].join(' ')}></div>
               </div>
               <div className={styles.col}>

package/src/components/AppMock/variants/PortaliqMock.jsx

@@ -6,6 +6,14 @@
  * row, then a submission form card next to a message inbox list. No
  * left nav — the visitor gets one page, not an admin surface. Tones:
  * cobalt for the frame, mint for the delivered/confirmed states.
+ *
+ * Animated (8s loop, --am-dur): a visitor works the form — focus ring
+ * and greeked value fill each field in turn, the submit button
+ * presses, a mint confirmation band sweeps the form card, and the
+ * message lands as a new row (mint avatar) at the top of the inbox.
+ * `running={false}` / prefers-reduced-motion show the static end
+ * state: filled form, delivered row. Keyframes live in
+ * AppMock.module.css (`.portaliq` section). No orange.
  */
 
 import React from 'react';
@@ -21,7 +29,7 @@ export default function PortaliqMock() {
         {Array.from({length: 3}).map((_, i) => <div key={i} className={styles.icon}></div>)}
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.decidesk].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.decidesk, styles.portaliq].filter(Boolean).join(' ')}>
         <div className={styles.col}>
           {/* Portal masthead */}
           <div className={styles.head}>
@@ -32,24 +40,28 @@ export default function PortaliqMock() {
             </div>
           </div>
           <div className={styles.panelRow} style={{gridTemplateColumns: '1.2fr 1fr'}}>
-            {/* Submission form card */}
-            <div className={styles.panel}>
+            {/* Submission form card. Each .field carries a .fieldFill
+                bar that greeks the typed value; the sweep is the mint
+                confirmation band after submit. */}
+            <div className={[styles.panel, styles.formPanel].join(' ')}>
               <div className={styles.head}><div className={styles.title}></div></div>
               <div className={styles.row + ' ' + styles.head} style={{width: '25%', height: 4}}></div>
-              <div style={{height: 14, background: 'white', border: '1px solid var(--c-cobalt-200)', borderRadius: 3}}></div>
+              <div className={[styles.field, styles['field-1']].join(' ')}><span className={styles.fieldFill}></span></div>
               <div className={styles.row + ' ' + styles.head} style={{width: '30%', height: 4}}></div>
-              <div style={{height: 14, background: 'white', border: '1px solid var(--c-cobalt-200)', borderRadius: 3}}></div>
+              <div className={[styles.field, styles['field-2']].join(' ')}><span className={styles.fieldFill}></span></div>
               <div className={styles.row + ' ' + styles.head} style={{width: '20%', height: 4}}></div>
-              <div style={{height: 26, background: 'white', border: '1px solid var(--c-cobalt-200)', borderRadius: 3}}></div>
+              <div className={[styles.field, styles['field-3'], styles.tall].join(' ')}><span className={styles.fieldFill}></span></div>
               <div className={styles.actions} style={{justifyContent: 'flex-end', marginTop: 2}}>
-                <div className={styles.btn}></div>
+                <div className={[styles.btn, styles.submit].join(' ')}></div>
               </div>
+              <span className={styles.confirmSweep} aria-hidden="true"></span>
             </div>
-            {/* Message inbox list */}
+            {/* Message inbox list — the .newItem row is the submitted
+                message arriving (mint avatar = delivered). */}
             <div className={[styles.panel, styles['w-mail']].join(' ')}>
               <div className={styles.head}><div className={styles.title}></div></div>
               <div className={styles.list}>
-                <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+                <div className={[styles.item, styles.newItem].join(' ')}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
                 <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
                 <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
                 <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>

package/src/components/AppMock/variants/ScholiqMock.jsx

@@ -6,6 +6,12 @@
  * credential chip on the completed course. Left nav for courses /
  * lessons / learners / certificates. Tone: forest — data you can
  * trust a diploma to.
+ *
+ * Animated (6s loop, --am-dur): the six progress bars fill on a
+ * 250ms stagger (inline animation-delay), then the completed course's
+ * credential chip pops in with an overshoot. `running={false}` /
+ * prefers-reduced-motion show the filled bars and the chip. Keyframes
+ * live in AppMock.module.css (`.scholiq` section). No orange.
  */
 
 import React from 'react';
@@ -30,7 +36,7 @@ export default function ScholiqMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.opencatalogi].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.opencatalogi, styles.scholiq].filter(Boolean).join(' ')}>
         <div className={styles.nav}>
           <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
           {[true, false, false, false].map((active, i) => (
@@ -54,14 +60,14 @@ export default function ScholiqMock() {
                 <div className={styles.ico}></div>
                 <div className={styles.row}></div>
                 <div className={styles.row + ' ' + styles.short}></div>
-                <div style={{height: 4, background: 'var(--c-cobalt-100)', borderRadius: 2}}>
-                  <div style={{width: fill, height: 4, background: 'var(--c-forest-500)', borderRadius: 2}}></div>
+                <div className={styles.progress}>
+                  <div className={styles.progressFill} style={{width: fill, animationDelay: `${i * 250}ms`}}></div>
                 </div>
                 {done && (
                   /* Credential chip — course completed, certificate issued */
-                  <div style={{display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 6px', borderRadius: 999, background: 'var(--c-forest-300)', alignSelf: 'flex-start'}}>
-                    <div style={{width: 6, height: 7, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-forest-500)'}}></div>
-                    <div style={{height: 3, width: 22, background: 'var(--c-forest-500)', borderRadius: 1}}></div>
+                  <div className={styles.credChip}>
+                    <div className={styles.credHex}></div>
+                    <div className={styles.credBar}></div>
                   </div>
                 )}
               </div>

package/src/components/FlowMock/FlowMock.jsx

@@ -12,11 +12,13 @@
  * Five nodes: trigger → two parallel steps → approval (join) → end.
  * A mint run-line travels the trigger → step → approval → end route
  * on a slow loop, with a subtle halo pulse on each node as the line
- * passes. `prefers-reduced-motion: reduce` (and `running={false}`)
- * renders the full route as a static mint path with no animation.
+ * passes. At the approval node the run HOLDS for ~600ms while an
+ * orange halo flashes — a human decides here. `prefers-reduced-motion:
+ * reduce` (and `running={false}`) renders the full route as a static
+ * mint path with no animation and no flash.
  *
  * Tokens only; no images; rectangles (the nodes *do* work, so no
- * hexes); no orange accent used.
+ * hexes); the approval hold flash is the single orange accent.
  *
  * Usage:
  *

package/src/components/FlowMock/FlowMock.module.css

@@ -9,7 +9,10 @@
  * transparent to layout.
  *
  * Tokens only. Node bars: mint = trigger, lavender = steps/approval,
- * vermillion = end. The run-line is mint (--c-mint-500); no orange.
+ * vermillion = end. The run-line is mint (--c-mint-500). The run
+ * holds ~600ms at the approval node while an orange halo flashes
+ * there — "a human decides here" — and that flash is this
+ * component's single orange accent.
  */
 
 .fm { display: contents; }
@@ -102,7 +105,13 @@
  * travels the full route once per cycle. Animating the offset from
  * 1.28 to 0 shifts the pattern forward exactly one period, so the
  * loop is seamless (the segment exits the end node as its successor
- * enters the trigger). */
+ * enters the trigger).
+ *
+ * The offset keyframes are not linear end-to-end: the run reaches the
+ * approval node at 58% (offset 1.28 × (1 − 0.62) ≈ 0.487, the node
+ * sitting ~62% along the route) and HOLDS there for ~600ms (8.6% of
+ * the 7s cycle) — approval is where a human decides — before
+ * continuing to the end node. */
 
 .fm .runline {
   fill: none;
@@ -115,13 +124,17 @@
 }
 
 @keyframes fmRun {
-  from { stroke-dashoffset: 1.28; }
-  to   { stroke-dashoffset: 0; }
+  0%    { stroke-dashoffset: 1.28; }
+  58%   { stroke-dashoffset: 0.487; } /* segment reaches the approval node */
+  66.6% { stroke-dashoffset: 0.487; } /* ~600ms hold: a human decides */
+  100%  { stroke-dashoffset: 0; }
 }
 
 /* Halo pulse on the nodes the run-line passes. Delays approximate
-   where along the route each node sits (trigger 0%, step ~30%,
-   approval ~62%, end ~85% of the cycle). */
+   where along the (held) cycle each node sits: trigger 0%, step ~28%,
+   approval 58% (the hold), end ~87%. The approval halo is the
+   exception: it flashes KNVB orange for the length of the hold — the
+   component's one orange accent. */
 .fm .halo {
   fill: none;
   stroke: var(--c-mint-500);
@@ -130,9 +143,13 @@
   animation: fmPulse var(--fm-dur, 7s) linear infinite;
 }
 .fm .halo-0 { animation-delay: 0s; }
-.fm .halo-1 { animation-delay: calc(var(--fm-dur, 7s) * 0.3); }
-.fm .halo-2 { animation-delay: calc(var(--fm-dur, 7s) * 0.62); }
-.fm .halo-3 { animation-delay: calc(var(--fm-dur, 7s) * 0.85); }
+.fm .halo-1 { animation-delay: calc(var(--fm-dur, 7s) * 0.28); }
+.fm .halo-2 {
+  stroke: var(--c-orange-knvb);
+  animation-name: fmPulseHold;
+  animation-delay: calc(var(--fm-dur, 7s) * 0.58);
+}
+.fm .halo-3 { animation-delay: calc(var(--fm-dur, 7s) * 0.87); }
 
 @keyframes fmPulse {
   0%   { opacity: 0; }
@@ -141,6 +158,16 @@
   100% { opacity: 0; }
 }
 
+/* The approval flash spans the whole ~600ms hold (8.6% of the cycle)
+   instead of the quick pass-through pulse. */
+@keyframes fmPulseHold {
+  0%    { opacity: 0; }
+  1.5%  { opacity: 0.8; }
+  8%    { opacity: 0.8; }
+  11%   { opacity: 0; }
+  100%  { opacity: 0; }
+}
+
 /* ---- Static renderings ----
  *
  * Both `running={false}` (the .static class) and the user's

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

@@ -0,0 +1,83 @@
+/**
+ * FlowMock.render.test.js — SSR-renders the real <FlowMock> and
+ * asserts the canvas structure the approval-hold animation relies on:
+ * the run-line with pathLength="1", the four halo rects (halo-2 being
+ * the approval flash), and the `running` prop's static class. Same
+ * esbuild 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, '..', 'FlowMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-flow-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 FlowMock;
+
+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)];
+  FlowMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(FlowMock, props));
+}
+
+test('SSR smoke: renders the canvas with the run-line on pathLength="1"', () => {
+  const html = render({});
+  assert.match(html, /class="canvas"/);
+  assert.match(html, /class="runline"[^>]*pathLength="1"/);
+});
+
+test('halos: four pulse rects, halo-2 (the approval hold flash) among them', () => {
+  const html = render({});
+  for (const i of [0, 1, 2, 3]) {
+    assert.match(html, new RegExp(`halo halo-${i}`), `missing halo-${i}`);
+  }
+});
+
+test('running={false} renders the static frame class', () => {
+  assert.match(render({running: false}), /class="frame size-md static"/);
+  assert.doesNotMatch(render({}), /\bstatic\b/);
+});

package/src/components/KanbanMock/KanbanMock.jsx

@@ -4,8 +4,11 @@
  * Token-built abstract of the pipelinq kanban board with a looping
  * drag animation: a cursor picks up the top lead card in the first
  * column (the card lifts), drags it to the second column, drops it,
- * and the column counts nudge (3→2, 2→3). Loops every ~7 seconds.
- * Pipelinq's hero/panel illustration.
+ * and at the drop moment the column counts nudge (3→2, 2→3) and the
+ * per-lane € KPI tiles above the board shift the moved deal's value
+ * (€ 48k→€ 30k, € 27k→€ 45k; the third lane stays € 64k). Loops
+ * every ~7 seconds and resets cleanly at loop start. Pipelinq's
+ * hero/panel illustration.
  *
  * Named KanbanMock rather than PipelineMock because the preset
  * already ships a `Pipeline` component (the hex-numbered process
@@ -48,8 +51,8 @@ function CardGreek({wide, dot}) {
 
 function Count({from, to}) {
   /* Two stacked digits crossfading on the shared timeline: `from`
-     shows until the drop (~55%), `to` after it, back again for the
-     next loop. Static renderings show `from`. */
+     shows until the drop settles (54%), `to` after it, back again for
+     the next loop. Static renderings show `from`. */
   return (
     <span className={styles.count}>
       <span className={styles.countBefore}>{from}</span>
@@ -58,6 +61,28 @@ function Count({from, to}) {
   );
 }
 
+function Kpi({from, to}) {
+  /* Small € tile above a lane. Reuses the count crossfade classes so
+     the value swaps at the same drop moment as the column counts and
+     shows `from` in static renderings. A `to` of undefined renders a
+     lane whose total never changes. */
+  return (
+    <div className={styles.kpi}>
+      <span className={styles.kpiBar} />
+      <span className={styles.kpiValue}>
+        {to != null ? (
+          <>
+            <span className={styles.countBefore}>{from}</span>
+            <span className={styles.countAfter}>{to}</span>
+          </>
+        ) : (
+          <span className={styles.kpiStill}>{from}</span>
+        )}
+      </span>
+    </div>
+  );
+}
+
 export default function KanbanMock({size = 'md', caption, running = true, className}) {
   return (
     <div className={styles.km}>
@@ -65,9 +90,14 @@ export default function KanbanMock({size = 'md', caption, running = true, classN
         <div
           className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}
           role="img"
-          aria-label="Abstract kanban board: a lead card is dragged from the first column to the second and the column counts update."
+          aria-label="Abstract kanban board: a lead card is dragged from the first column to the second; the column counts and the lane value totals update at the drop."
         >
           <div className={styles.board}>
+            <div className={styles.kpis}>
+              <Kpi from="€ 48k" to="€ 30k" />
+              <Kpi from="€ 27k" to="€ 45k" />
+              <Kpi from="€ 64k" />
+            </div>
             <div className={styles.col}>
               <div className={styles.colHead}>
                 <span className={styles.colBar} />