@conduction/docusaurus-preset 3.33.0 → 3.35.0

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/ProcestMock.jsx

@@ -3,9 +3,15 @@
  *
  * Inferred from app role (ZGW case-management for VTH and citizen
  * processes): centre shows a canonical case detail with the timeline
- * of stages running across the top (one done, one active, three to-do)
+ * of stages running across the top (two done, one active, two to-do)
  * plus a list of recent cases below. Left nav for cases, types,
  * roles, decisions, archive.
+ *
+ * Animation (wave 2): the case advances one stage — ghost hexes
+ * overlaid on steps 2 and 3 replay the before-state (step 2 still
+ * orange-active, step 3 still to-do) and fade away to reveal the
+ * advanced base state; the advanced case's list row re-sorts to the
+ * top. Base styles are the advanced end state throughout.
  */
 
 import React from 'react';
@@ -41,17 +47,21 @@ export default function ProcestMock({ sidebar = null }) {
               <div className={styles.btn}></div>
             </div>
           </div>
+          {/* Base = advanced state: done, done, now, todo, todo.
+              Ghost hexes on steps 2+3 replay the before-state. */}
           <div className={styles.timeline}>
             <div className={styles.step}>
               <div className={styles.h}></div>
               <div className={styles.label}></div>
             </div>
-            <div className={[styles.step, styles.now].join(' ')}>
+            <div className={[styles.step, styles.advanceFrom].join(' ')}>
               <div className={styles.h}></div>
+              <div className={[styles.ghost, styles.ghostNow].join(' ')}></div>
               <div className={styles.label}></div>
             </div>
-            <div className={[styles.step, styles.todo].join(' ')}>
+            <div className={[styles.step, styles.now, styles.advanceTo].join(' ')}>
               <div className={styles.h}></div>
+              <div className={[styles.ghost, styles.ghostTodo].join(' ')}></div>
               <div className={styles.label}></div>
             </div>
             <div className={[styles.step, styles.todo].join(' ')}>
@@ -66,16 +76,33 @@ export default function ProcestMock({ sidebar = null }) {
           <div className={styles.panel}>
             <div className={styles.head}><div className={styles.title}></div></div>
             <div className={styles.stack}>
-              {['a','b','d','c','a'].map((cls, i) => (
+              {/* DOM order = end state: the advanced case (status pill,
+                  .sortUp) sits on top; the row it overtook (.sortDown)
+                  is second. The keyframes replay the pre-sort order. */}
+              <div className={[styles.item, styles.sortUp].join(' ')}>
+                <div className={[styles.av, styles.b].join(' ')}></div>
+                <div className={styles.lines}>
+                  <div className={styles.l1}></div>
+                  <div className={styles.l2}></div>
+                </div>
+                <div className={styles.statusPill}>
+                  <div className={styles.h}></div><div className={styles.t}></div>
+                </div>
+              </div>
+              <div className={[styles.item, styles.sortDown].join(' ')}>
+                <div className={[styles.av, styles.a].filter(Boolean).join(' ')}></div>
+                <div className={styles.lines}>
+                  <div className={styles.l1}></div>
+                  <div className={styles.l2}></div>
+                </div>
+              </div>
+              {['d','c','a'].map((cls, i) => (
                 <div key={i} className={styles.item}>
                   <div className={[styles.av, styles[cls]].join(' ')}></div>
                   <div className={styles.lines}>
                     <div className={styles.l1}></div>
                     <div className={styles.l2}></div>
                   </div>
-                  <div className={[styles.statusPill, i === 1 && styles.beta].filter(Boolean).join(' ')}>
-                    <div className={styles.h}></div><div className={styles.t}></div>
-                  </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/AppMock/variants/ShillinqMock.jsx

@@ -6,15 +6,23 @@
  * description, two amount columns (net / VAT), and a reconciliation
  * tick column where a mint hex = matched against the bank and a
  * muted pip = still open. Tone: terracotta — documents, human work.
+ *
+ * Animation (wave 2): a bank statement line slides down onto invoice
+ * row 3, both tick mint (reconciled), the totals line and the first
+ * KPI grow to absorb the match. Base styles are the reconciled end
+ * state; keyframes replay the unmatched before-state and the slide.
  */
 
 import React from 'react';
 import styles from '../AppMock.module.css';
 
+/* Row 3 (index 2) is the row the bank line reconciles: its tick is
+   mint in the base (end) state and the amShqTick keyframe replays
+   the open cobalt-200 before-state. Row 5 stays open. */
 const INVOICES = [
   {amount: 26, vat: 16, matched: true},
   {amount: 20, vat: 12, matched: true},
-  {amount: 30, vat: 18, matched: false},
+  {amount: 30, vat: 18, matched: true, reconciling: true},
   {amount: 22, vat: 14, matched: true},
   {amount: 18, vat: 10, matched: false},
 ];
@@ -29,7 +37,7 @@ export default function ShillinqMock() {
         <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.shillinq].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) => (
@@ -47,14 +55,15 @@ export default function ShillinqMock() {
               <div className={styles.btn}></div>
             </div>
           </div>
-          {/* VAT / summary strip */}
+          {/* VAT / summary strip. The first KPI's number widens when
+              the reconciliation lands. */}
           <div className={styles.kpiRow}>
-            <div className={styles.kpi}>
-              <div className={styles.ico} style={{background: 'var(--c-terracotta-500)'}}></div>
+            <div className={[styles.kpi, styles.kpiGrow].join(' ')}>
+              <div className={[styles.ico, styles.terra].join(' ')}></div>
               <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
             </div>
             <div className={styles.kpi}>
-              <div className={styles.ico} style={{background: 'var(--c-terracotta-300)'}}></div>
+              <div className={[styles.ico, styles.terraSoft].join(' ')}></div>
               <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
             </div>
             <div className={styles.kpi}>
@@ -63,24 +72,31 @@ export default function ShillinqMock() {
             </div>
           </div>
           {/* Invoice table: doc · description · net · VAT · reconciled */}
-          <div className={styles.panel} style={{flex: 1}}>
+          <div className={[styles.panel, styles.ledger].join(' ')}>
             <div className={styles.head}><div className={styles.title}></div></div>
+            {/* Bank statement line — slides onto row 3 and dissolves
+                into the mint tick. Hidden at rest and in static frames. */}
+            <div className={styles.bankLine}>
+              <div className={styles.bIco}></div>
+              <div className={styles.bBar}></div>
+              <div className={styles.bAmt}></div>
+            </div>
             <div className={styles.stack}>
-              {INVOICES.map(({amount, vat, matched}, i) => (
-                <div key={i} className={styles.item}>
-                  <div style={{width: 11, height: 13, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-terracotta-300)', flexShrink: 0}}></div>
+              {INVOICES.map(({amount, vat, matched, reconciling}, i) => (
+                <div key={i} className={[styles.item, styles.inv, reconciling && styles.reconciling].filter(Boolean).join(' ')}>
+                  <div className={styles.doc}></div>
                   <div className={styles.lines}><div className={styles.l1}></div></div>
-                  <div style={{width: amount, height: 4, background: 'var(--c-cobalt-700)', borderRadius: 1, flexShrink: 0}}></div>
-                  <div style={{width: vat, height: 4, background: 'var(--c-cobalt-300)', borderRadius: 1, flexShrink: 0}}></div>
+                  <div className={styles.net} style={{width: amount}}></div>
+                  <div className={styles.vat} style={{width: vat}}></div>
                   {/* Bank-reconciliation tick: mint hex = matched */}
-                  <div style={{width: 9, height: 10, clipPath: 'var(--hex-pointy-top)', background: matched ? 'var(--c-mint-500)' : 'var(--c-cobalt-200)', flexShrink: 0}}></div>
+                  <div className={[styles.tick, !matched && styles.open].filter(Boolean).join(' ')}></div>
                 </div>
               ))}
             </div>
-            {/* Totals line */}
-            <div style={{display: 'flex', justifyContent: 'flex-end', gap: 6, paddingTop: 4, borderTop: '1px solid var(--c-cobalt-100)'}}>
-              <div style={{width: 32, height: 6, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
-              <div style={{width: 20, height: 6, background: 'var(--c-cobalt-400)', borderRadius: 1}}></div>
+            {/* Totals line — grows when the match lands */}
+            <div className={styles.totals}>
+              <div className={styles.totNet}></div>
+              <div className={styles.totVat}></div>
             </div>
           </div>
         </div>

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

@@ -6,6 +6,13 @@
  * (mint = stable, orange = update available, red = end-of-life) plus
  * a graph card on top showing licence-renewal timeline. Left nav for
  * apps / licences / contracts / dependencies / discovery / archive.
+ *
+ * Animation (wave 4, the CVE scan): a scan band sweeps down the app
+ * list, row 4's pip flips to red as the sweep crosses it (a CVE
+ * found), and the matching chart bar surges in vermillion. The chart
+ * keeps its single KNVB-orange accent bar; the CVE reading is
+ * red-family throughout so the component stays at one orange.
+ * Base styles are the post-scan end state (red pip, tall CVE bar).
  */
 
 import React from 'react';
@@ -21,7 +28,7 @@ export default function SoftwareCatalogMock() {
         <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.swc].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) => (
@@ -40,7 +47,8 @@ export default function SoftwareCatalogMock() {
             <div className={styles.bars}>
               <div className={styles.bar} style={{height: '30%'}}></div>
               <div className={styles.bar} style={{height: '50%'}}></div>
-              <div className={styles.bar} style={{height: '40%'}}></div>
+              {/* CVE bar — surges (vermillion, red family) post-scan */}
+              <div className={[styles.bar, styles.cve].join(' ')} style={{height: '64%'}}></div>
               <div className={styles.bar} style={{height: '70%'}}></div>
               <div className={[styles.bar, styles.accent].join(' ')} style={{height: '88%'}}></div>
               <div className={styles.bar} style={{height: '60%'}}></div>
@@ -49,16 +57,18 @@ export default function SoftwareCatalogMock() {
             </div>
             <div className={styles.axis}></div>
           </div>
-          {/* App list with status pips */}
-          <div className={[styles.w, styles['w-jira']].join(' ')}>
+          {/* App list with status pips. The scan band sweeps this
+              panel; row 4 (.blocked, .cveHit) flips red as it passes. */}
+          <div className={[styles.w, styles['w-jira'], styles.scanPanel].join(' ')}>
             <div className={styles.wHead}>
               <div className={styles.h}></div><div className={styles.t}></div>
             </div>
+            <div className={styles.scanBand}></div>
             <div className={styles.list}>
               <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
               <div className={[styles.item, styles.review].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
               <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
-              <div className={[styles.item, styles.blocked].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
+              <div className={[styles.item, styles.blocked, styles.cveHit].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
               <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
               <div className={styles.item}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>
               <div className={[styles.item, styles.todo].join(' ')}><div className={styles.id}></div><div className={styles.l}></div><div className={styles.pip}></div></div>

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

@@ -6,6 +6,13 @@
  * (werkvoorraad widget) with stage pips, plus a citizen-side timeline
  * of recent submissions. Left nav for queue / archive / public portal /
  * audit / settings.
+ *
+ * Animation (wave 4): a citizen submission travels up from the
+ * submissions list into the werkvoorraad — the ghost row rises, and
+ * the new case row at the top of the queue gains its stage hex and
+ * assignee avatar as it lands. The late row's red stage pip pulses
+ * once per loop as the SLA reminder. Base styles are the assigned
+ * end state (new case present, fully dressed).
  */
 
 import React from 'react';
@@ -21,7 +28,7 @@ export default function ZaakAfhandelAppMock() {
         <div className={styles.bell}></div>
         <div className={styles.avatar}></div>
       </div>
-      <div className={[styles.body, styles.procest].filter(Boolean).join(' ')}>
+      <div className={[styles.body, styles.procest, styles.zaak].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) => (
@@ -39,26 +46,34 @@ export default function ZaakAfhandelAppMock() {
               <div className={styles.btn}></div>
             </div>
           </div>
-          {/* Case-worker werkvoorraad */}
+          {/* Case-worker werkvoorraad. The first row (.zkNew) is the
+              citizen submission after landing: its stage hex and
+              assignee avatar dress it as it arrives. */}
           <div className={[styles.w, styles['w-werkvoorraad']].join(' ')}>
             <div className={styles.wHead}>
               <div className={styles.h}></div><div className={styles.t}></div>
             </div>
             <div className={styles.list}>
+              <div className={[styles.item, styles.zkNew].join(' ')}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.b].join(' ')}></div></div>
               <div className={[styles.item, styles.now].join(' ')}><div className={styles.stage}></div><div className={styles.l1}></div><div className={styles.av}></div></div>
               <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.b].join(' ')}></div></div>
               <div className={[styles.item, styles.late].join(' ')}><div className={styles.stage}></div><div className={styles.l1}></div><div className={[styles.av, styles.c].join(' ')}></div></div>
               <div className={styles.item}><div className={styles.stage}></div><div className={styles.l1}></div><div className={styles.av}></div></div>
-              <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>
+          {/* Travelling submission ghost — rises from the submissions
+              list into the werkvoorraad. Hidden at rest + static. */}
+          <div className={styles.zkGhost}>
+            <div className={styles.src}></div>
+            <div className={styles.gBar}></div>
+          </div>
           {/* Citizen-side recent submissions list */}
           <div className={[styles.w, styles['w-rss']].join(' ')}>
             <div className={styles.wHead}>
               <div className={styles.h}></div><div className={styles.t}></div>
             </div>
             <div className={styles.list}>
-              <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
+              <div className={[styles.item, styles.zkSent].join(' ')}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
               <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
               <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></div></div>
               <div className={styles.item}><div className={styles.src}></div><div className={styles.title}></div><div className={styles.when}></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/);
+});