@conduction/docusaurus-preset 3.33.0 → 3.35.0

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

@@ -1,21 +1,25 @@
 /**
- * HRMQ abstract — people administration.
+ * HRMQ abstract — hours administration.
  *
- * Inferred from the app role (HR: employees, contracts, leave): a
- * people list with hex avatars next to a leave-balance card of
- * labelled horizontal bars. Tone: mint — the team is in order.
+ * Content rework (wave 4): the earlier people-list + leave-balance
+ * pair misrepresented the app (HRMQ's daily surface is hours and
+ * approval, not a personnel directory). The mock now shows the
+ * timesheet week — five day columns of hour bars plus a submit
+ * button — next to an approval card: the submitted week arriving as
+ * a row, its pip ticking mint on approval, and a payroll counter
+ * that grows when the approved hours land. Tone: mint — the team's
+ * hours are in order.
+ *
+ * Animation: day bars fill in a stagger → submit press → the
+ * approval row's pip ticks mint → the payroll counter widens.
+ * Base styles are the approved end state.
  */
 
 import React from 'react';
 import styles from '../AppMock.module.css';
 
-const PEOPLE = ['var(--c-mint-500)', 'var(--c-mint-300)', 'var(--c-forest-300)', 'var(--c-mint-300)', 'var(--c-mint-500)'];
-const BALANCES = [
-  {fill: '72%', shade: 'var(--c-mint-500)'},
-  {fill: '45%', shade: 'var(--c-mint-500)'},
-  {fill: '88%', shade: 'var(--c-mint-300)'},
-  {fill: '20%', shade: 'var(--c-mint-300)'},
-];
+/* Hour-bar heights for the five day columns of the week. */
+const WEEK = ['70%', '85%', '60%', '90%', '45%'];
 
 export default function HrmqMock() {
   return (
@@ -27,7 +31,7 @@ export default function HrmqMock() {
         <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.hrmq].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) => (
@@ -45,29 +49,43 @@ export default function HrmqMock() {
             </div>
           </div>
           <div className={styles.panelRow} style={{gridTemplateColumns: '1.2fr 1fr'}}>
-            {/* People list — hex avatars */}
-            <div className={styles.panel}>
+            {/* Timesheet — the week's hour bars + submit */}
+            <div className={[styles.panel, styles.timesheet].join(' ')}>
               <div className={styles.head}><div className={styles.title}></div></div>
-              <div className={styles.stack}>
-                {PEOPLE.map((shade, i) => (
-                  <div key={i} className={styles.item}>
-                    <div style={{width: 13, height: 15, clipPath: 'var(--hex-pointy-top)', background: shade, flexShrink: 0}}></div>
-                    <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+              <div className={styles.week}>
+                {WEEK.map((h, i) => (
+                  <div key={i} className={styles.dayCol}>
+                    <div className={styles.dayBar} style={{height: h}}></div>
+                    <div className={styles.dayLabel}></div>
                   </div>
                 ))}
               </div>
+              <div className={styles.sheetFoot}>
+                <div className={styles.sheetSum}></div>
+                <div className={[styles.btn, styles.submitBtn].join(' ')}></div>
+              </div>
             </div>
-            {/* Leave-balance card — labelled bars */}
-            <div className={styles.panel}>
+            {/* Approval + payroll — the submitted week arrives, is
+                approved (mint tick), and the payroll counter grows. */}
+            <div className={[styles.panel, styles.approval].join(' ')}>
               <div className={styles.head}><div className={styles.title}></div></div>
-              {BALANCES.map(({fill, shade}, i) => (
-                <div key={i} style={{display: 'flex', flexDirection: 'column', gap: 3}}>
-                  <div className={styles.row + ' ' + styles.short} style={{height: 3}}></div>
-                  <div style={{height: 5, background: 'var(--c-cobalt-100)', borderRadius: 2}}>
-                    <div style={{width: fill, height: 5, background: shade, borderRadius: 2}}></div>
-                  </div>
+              <div className={styles.stack}>
+                <div className={[styles.item, styles.approveRow].join(' ')}>
+                  <div className={styles.av}></div>
+                  <div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div>
+                  <div className={styles.approvePip}></div>
+                </div>
+                <div className={styles.item}>
+                  <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.donePip}></div>
                 </div>
-              ))}
+              </div>
+              {/* Payroll counter — widens when the approval lands */}
+              <div className={styles.payroll}>
+                <div className={styles.pLabel}></div>
+                <div className={styles.pNum}></div>
+              </div>
             </div>
           </div>
         </div>

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

@@ -6,6 +6,12 @@
  * 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) => (
@@ -33,16 +39,36 @@ export default function LarpingAppMock() {
           ))}
         </div>
         <div className={styles.col}>
-          {/* Scene timeline (one done, one active in orange, three to-do) */}
-          <div className={[styles.w, styles['w-graph-bar']].join(' ')} style={{minHeight: 0}}>
-            <div className={styles.wHead}>
-              <div className={styles.h}></div><div className={styles.t}></div>
+          {/* Scene timeline (one done, one active in orange — the
+              variant's single orange — three to-do). Reuses the
+              procest timeline atoms; the wrapper div provides the
+              `.procest` scope those styles require. The previous
+              markup here was an empty w-graph-bar shell that rendered
+              nothing but its header. */}
+          <div className={styles.procest}>
+            <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.h}></div><div className={styles.label}></div>
+              </div>
+              <div className={[styles.step, styles.todo].join(' ')}>
+                <div className={styles.h}></div><div className={styles.label}></div>
+              </div>
+              <div className={[styles.step, styles.todo].join(' ')}>
+                <div className={styles.h}></div><div className={styles.label}></div>
+              </div>
+              <div className={[styles.step, styles.todo].join(' ')}>
+                <div className={styles.h}></div><div className={styles.label}></div>
+              </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>
@@ -52,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/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/OpenBuildMock.jsx

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

@@ -6,6 +6,11 @@
  * 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>