@conduction/docusaurus-preset 3.34.0 → 3.36.0

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

@@ -1,11 +1,17 @@
 /**
- * LarpingApp abstract — character + scene workshop.
+ * Larpinq abstract — character + scene workshop.
  *
  * Inferred from the app role (LARP setting management, character sheets,
  * scenes, NPCs, factions): centre shows a character grid (3×2 cards
  * with hex avatars in different family tones) plus a scene timeline
  * across the top so a session organiser can move stages forward. Left
  * nav for characters / scenes / NPCs / factions / rules / archive.
+ *
+ * Animation (wave 4, the XP ripple): the second character card lifts,
+ * an XP hex token rises from it to the scene timeline's active stage,
+ * the stage hex pulses as it absorbs the token, and every character
+ * card's text rows grow in a stagger — the whole party levelling from
+ * the played scene. Base styles are the settled (post-XP) end state.
  */
 
 import React from 'react';
@@ -22,7 +28,7 @@ export default function LarpingAppMock() {
         <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.larping].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) => (
@@ -58,10 +64,11 @@ export default function LarpingAppMock() {
               </div>
             </div>
           </div>
-          {/* Character grid */}
+          {/* Character grid. Card 2 (.xpSource) lifts and releases the
+              XP token that travels up to the timeline's active stage. */}
           <div className={styles.grid}>
             {charTones.map((cls, i) => (
-              <div key={i} className={[styles.card, cls && styles[cls]].filter(Boolean).join(' ')}>
+              <div key={i} className={[styles.card, cls && styles[cls], i === 1 && styles.xpSource].filter(Boolean).join(' ')}>
                 <div className={styles.ico}></div>
                 <div className={styles.row + ' ' + styles.head}></div>
                 <div className={styles.row + ' ' + styles.short}></div>
@@ -71,6 +78,9 @@ export default function LarpingAppMock() {
               </div>
             ))}
           </div>
+          {/* XP token — travels from the lifted card to the timeline.
+              Hidden at rest and in static frames. */}
+          <div className={styles.xpToken}></div>
         </div>
       </div>
     </>

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

@@ -4,8 +4,8 @@
  * Demonstrates the cross-app widget angle: any Conduction app that
  * registers a Nextcloud dashboard widget shows up here. The mock
  * pictures the canonical mix:
- *  - DocuDesk  → upload-to-anonymise dropzone widget
- *  - Procest   → werkvoorraad (case queue) widget
+ *  - Filinq    → upload-to-anonymise dropzone widget
+ *  - Dossiq    → werkvoorraad (case queue) widget
  *  - Mail      → Important mail (avatar list)
  *  - Calendar  → upcoming-events mini grid
  *  - Jira      → external-app status board
@@ -37,7 +37,7 @@ export default function LaunchPadWidgetsMock() {
       </div>
       <div className={[styles.body, styles.launchpad, styles.lpWidgets].filter(Boolean).join(' ')}>
         <div className={styles.grid}>
-          {/* Column 1: Procest werkvoorraad + DocuDesk upload */}
+          {/* Column 1: Dossiq werkvoorraad + Filinq upload */}
           <div className={styles.col}>
             <div className={[styles.w, styles['w-werkvoorraad']].join(' ')} style={ARRIVE(0)}>
               <div className={styles.wHead}>

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

@@ -1,5 +1,5 @@
 /**
- * NLDesign abstract — theme settings panel.
+ * Thematiq abstract — theme settings panel.
  *
  * Inferred from the app role (NL Design System theme for Nextcloud):
  * centre shows a settings layout with a colour-swatch row, a type

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

@@ -1,5 +1,5 @@
 /**
- * OpenBuild abstract — three-pane citizen-developer app builder: left
+ * Buildiq abstract — three-pane citizen-developer app builder: left
  * builder nav + centre dashboard + right manifest/detail rail.
  * Reference: live screenshot at http://localhost:8080/apps/openbuild/.
  *
@@ -7,6 +7,12 @@
  * Published / Templates / Versions) over two panels — a virtual-app card
  * list ("Virtual apps") and a template-catalogue list ("Templates").
  * Right rail abstracts the per-app manifest/schema editor.
+ *
+ * Animation (wave 4): the top template row highlights, a ghost chip
+ * travels from the template catalogue into the virtual-apps list, the
+ * new app row lands there, the first KPI widens, and the published
+ * KPI's hex pulses mint — template to running app in one loop. Base
+ * styles are the published end state.
  */
 
 import React from 'react';
@@ -40,11 +46,11 @@ export default function OpenBuildMock({ sidebar = null }) {
         <div className={styles.col}>
           {/* KPI strip: Virtual apps / Published / Templates / Versions */}
           <div className={styles.kpiRow}>
-            <div className={styles.kpi}>
+            <div className={[styles.kpi, styles.kpiGrow].join(' ')}>
               <div className={styles.ico}></div>
               <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
             </div>
-            <div className={[styles.kpi, styles.forest].join(' ')}>
+            <div className={[styles.kpi, styles.forest, styles.publishedKpi].join(' ')}>
               <div className={styles.ico}></div>
               <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
             </div>
@@ -57,12 +63,18 @@ export default function OpenBuildMock({ sidebar = null }) {
               <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
             </div>
           </div>
-          {/* Virtual-app card list + template catalogue */}
+          {/* Virtual-app card list + template catalogue. The ghost
+              chip travels template row → apps list; the new app row
+              (.newApp) lands at the top of the virtual-apps stack. */}
           <div className={styles.panelRow}>
             <div className={styles.panel}>
               <div className={styles.head}><div className={styles.title}></div></div>
               <div className={styles.stack}>
-                {['b','d','a','c'].map((cls, i) => (
+                <div className={[styles.item, styles.newApp].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>
+                {['d','a','c'].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>
@@ -74,13 +86,16 @@ export default function OpenBuildMock({ sidebar = null }) {
               <div className={styles.head}><div className={styles.title}></div></div>
               <div className={styles.stack}>
                 {[0,1,2,3].map(i => (
-                  <div key={i} className={styles.item}>
+                  <div key={i} className={[styles.item, i === 0 && styles.tplSource].filter(Boolean).join(' ')}>
                     <div className={styles.lines}><div className={styles.l1}></div></div>
                   </div>
                 ))}
               </div>
             </div>
           </div>
+          {/* Ghost chip — travels from the template catalogue into the
+              virtual-apps list. Hidden at rest and in static frames. */}
+          <div className={styles.buildGhost}></div>
         </div>
         {/* Right rail: per-app manifest / schema editor. When AppMock passes
             a `sidebar` prop it renders there instead of this placeholder. */}

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

@@ -5,13 +5,28 @@
  * search across registers"): centre is a 3×2 grid of catalogue cards,
  * each with a hex glyph in a different family colour to signal the
  * categorical mix. Left nav for catalogues / publications / sources.
+ *
+ * Animation (wave 2): a query types into the search bar, the grid
+ * dims, the three matching cards snap back to full strength, and
+ * their status pills tick mint. Base styles are the filtered end
+ * state (non-matches dimmed); keyframes replay the unfiltered
+ * before-state and the search.
  */
 
 import React from 'react';
 import styles from '../AppMock.module.css';
 
+/* Cards 1, 3 and 5 (indices 0/2/4) match the query; the others dim. */
+const CARDS = [
+  {tone: '', match: true},
+  {tone: 'b', match: false},
+  {tone: 'c', match: true},
+  {tone: 'd', match: false},
+  {tone: 'e', match: true},
+  {tone: '', match: false},
+];
+
 export default function OpenCatalogiMock() {
-  const cards = ['', 'b', 'c', 'd', 'e', ''];
   return (
     <>
       <div className={styles.topbar}>
@@ -36,14 +51,18 @@ export default function OpenCatalogiMock() {
         <div className={styles.col}>
           <div className={styles.head}>
             <div className={styles.row + ' ' + styles.head} style={{width: 30}}></div>
+            {/* Federated search bar — the query types in, the grid filters */}
+            <div className={styles.search}>
+              <div className={styles.sIco}></div>
+              <div className={styles.q}></div>
+            </div>
             <div className={styles.actions}>
-              <div className={styles.btn + ' ' + styles.ghost}></div>
               <div className={styles.btn}></div>
             </div>
           </div>
           <div className={styles.grid}>
-            {cards.map((cls, i) => (
-              <div key={i} className={[styles.card, cls && styles[cls]].filter(Boolean).join(' ')}>
+            {CARDS.map(({tone, match}, i) => (
+              <div key={i} className={[styles.card, tone && styles[tone], match ? styles.match : styles.dim].filter(Boolean).join(' ')}>
                 <div className={styles.ico}></div>
                 <div className={styles.row + ' ' + styles.head}></div>
                 <div className={styles.row}></div>

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

@@ -1,11 +1,16 @@
 /**
- * OpenConnector abstract — source-connector-target pipeline view.
+ * Integriq abstract — source-connector-target pipeline view.
  *
  * Inferred from the app's role ("integration plane between Conduction
  * apps and external APIs"): the centre stage shows a single canonical
  * pipeline (lavender source → cobalt connector → forest target), with
  * a status table below for recent runs. Left nav for sources, jobs,
  * mappings, sync logs, schedules.
+ *
+ * Animation (wave 2): a lavender record dot travels source →
+ * connector, re-emerges forest on the far side → target (the mapping
+ * made visible), then a new run row inserts at the top of the runs
+ * table and ticks mint. Base styles are the completed end state.
  */
 
 import React from 'react';
@@ -45,12 +50,18 @@ export default function OpenConnectorMock() {
               <div className={styles.ico}></div>
               <div className={styles.row + ' ' + styles.short}></div>
             </div>
-            <div className={styles.arrow}></div>
+            <div className={styles.arrow}>
+              {/* Record dot, lavender leg: source → connector */}
+              <div className={styles.travelDotA}></div>
+            </div>
             <div className={styles.conn}>
               <div className={styles.ico}></div>
               <div className={styles.label}></div>
             </div>
-            <div className={styles.arrow}></div>
+            <div className={styles.arrow}>
+              {/* Record dot, forest leg: connector → target */}
+              <div className={styles.travelDotB}></div>
+            </div>
             <div className={styles.target}>
               <div className={styles.ico}></div>
               <div className={styles.row + ' ' + styles.short}></div>
@@ -64,7 +75,18 @@ export default function OpenConnectorMock() {
               </div>
             </div>
             <div className={styles.stack}>
-              {['a','d','b','c'].map((cls, i) => (
+              {/* The freshly-inserted run row: slides in when the dot
+                  lands, its trailing pip ticks mint. Present (mint)
+                  in the static end state. */}
+              <div className={[styles.item, styles.newRun].join(' ')}>
+                <div className={[styles.av, styles.d].join(' ')}></div>
+                <div className={styles.lines}>
+                  <div className={styles.l1}></div>
+                  <div className={styles.l2}></div>
+                </div>
+                <div className={styles.runTick}></div>
+              </div>
+              {['a','d','b'].map((cls, i) => (
                 <div key={i} className={styles.item}>
                   <div className={[styles.av, styles[cls]].join(' ')}></div>
                   <div className={styles.lines}>

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

@@ -5,6 +5,11 @@
  * Centre is the canonical "Dashboard" view: KPI strip top, two
  * side-by-side tables ("Popular Search Terms" / "Objects by Register"),
  * second row of two more. Right rail shows Filter Statistics + Totals.
+ *
+ * Animation (wave 2): a new object row lands in the "Objects by
+ * Register" table, the first KPI's number widens to absorb the count,
+ * and the right-rail statistics rows repaint in a stagger — the
+ * dashboard reacting to a write. Base styles are the landed end state.
  */
 
 import React from 'react';
@@ -38,7 +43,7 @@ export default function OpenRegisterMock({ sidebar = null }) {
         <div className={styles.col}>
           {/* KPI strip */}
           <div className={styles.kpiRow}>
-            <div className={styles.kpi}>
+            <div className={[styles.kpi, styles.kpiGrow].join(' ')}>
               <div className={styles.ico}></div>
               <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
             </div>
@@ -70,7 +75,13 @@ export default function OpenRegisterMock({ sidebar = null }) {
             <div className={styles.panel}>
               <div className={styles.head}><div className={styles.title}></div></div>
               <div className={styles.stack}>
-                {['b','d','c','a'].map((cls, i) => (
+                {/* The freshly-written object row: lands with a slide
+                    when the loop fires. Present in static frames. */}
+                <div className={[styles.item, styles.newObj].join(' ')}>
+                  <div className={[styles.av, styles.d].join(' ')}></div>
+                  <div className={styles.lines}><div className={styles.l1}></div></div>
+                </div>
+                {['b','d','c'].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>

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

@@ -1,5 +1,5 @@
 /**
- * Planix abstract — planning board.
+ * Planiq abstract — planning board.
  *
  * Inferred from the app role (scheduling people and work over time):
  * a week grid of five day columns with placed planning blocks at

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

@@ -1,11 +1,17 @@
 /**
- * Procest abstract — case management with process timeline.
+ * Dossiq abstract — case management with process timeline.
  *
  * 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>
@@ -83,7 +110,7 @@ export default function ProcestMock({ sidebar = null }) {
         </div>
         {/* Optional sidebar (typically a <SidebarMock kind="..." />)
             renders here as a flex sibling of .col, taking the .detail
-            slot. Procest's case detail view doesn't ship a default
+            slot. Dossiq's case detail view doesn't ship a default
             detail rail, so without the prop nothing extra renders. */}
         {sidebar}
       </div>

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

@@ -1,5 +1,5 @@
 /**
- * Scholiq abstract — learning environment.
+ * Learniq abstract — learning environment.
  *
  * Inferred from the app role (courses, lessons, credentials): centre
  * shows a course-card grid, each card carrying a progress bar, with a

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

@@ -1,11 +1,18 @@
 /**
- * SoftwareCatalog abstract — IT-asset inventory list.
+ * Stackiq abstract — IT-asset inventory list.
  *
  * Inferred from the app role (software inventory, licences, contracts,
  * dependencies): centre shows a tabular app list with status pips
  * (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>