@conduction/docusaurus-preset 3.34.0 → 3.36.0

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

@@ -170,6 +170,154 @@ test('larpingapp: the scene timeline renders five steps (was an empty shell)', (
   assert.equal((html.match(/step now/g) || []).length, 1, 'exactly one active (orange) step');
 });
 
+/* ---- Wave 2 — storytelling animation hooks ---- */
+
+test('docudesk: word-level rows with five ordered PII marks, and the live drop-zone', () => {
+  const html = render({app: 'docudesk'});
+  assert.match(html, /class="body opencatalogi docudesk"/);
+  assert.equal((html.match(/class="words"/g) || []).length, 5, 'five word-bar rows');
+  for (const n of [1, 2, 3, 4, 5]) {
+    assert.match(html, new RegExp(`word mark mark-${n}`), `mark-${n} missing`);
+  }
+  assert.match(html, /w w-upload zoneLive/);
+  assert.match(html, /class="zoneFile"/);
+});
+
+test('shillinq: bank line, reconciling row 3, ledger totals, and the KPI grow hook', () => {
+  const html = render({app: 'shillinq'});
+  assert.match(html, /class="body decidesk shillinq"/);
+  assert.match(html, /class="bankLine"/);
+  assert.equal((html.match(/item inv/g) || []).length, 5, 'five invoice rows');
+  assert.equal((html.match(/item inv reconciling/g) || []).length, 1, 'exactly one reconciling row');
+  // The reconciling row is row 3: two plain rows precede it.
+  assert.match(html, /item inv"[\s\S]*?item inv"[\s\S]*?item inv reconciling/);
+  assert.equal((html.match(/tick open/g) || []).length, 1, 'one still-open tick (row 5)');
+  assert.match(html, /class="totNet"/);
+  assert.match(html, /kpi kpiGrow/);
+});
+
+test('doriath: key hex, both mask layers, value, and the countdown hairline', () => {
+  const html = render({app: 'doriath'});
+  assert.match(html, /class="body decidesk doriath"/);
+  assert.match(html, /class="keyHex"/);
+  assert.match(html, /class="vMask"/);
+  assert.match(html, /class="vValue"/);
+  assert.match(html, /class="vCountdown"/);
+  assert.equal((html.match(/class="maskDots"/g) || []).length, 5, 'five locked list entries keep their dot masks');
+});
+
+test('opencatalogi: search bar with query fill; three matches and three dimmed cards', () => {
+  const html = render({app: 'opencatalogi'});
+  assert.match(html, /class="search"/);
+  assert.match(html, /class="q"/);
+  assert.equal((html.match(/class="card[^"]*match"/g) || []).length, 3, 'three matching cards');
+  assert.equal((html.match(/class="card[^"]*dim"/g) || []).length, 3, 'three dimmed cards');
+});
+
+test('openconnector: two travel dots on the arrows and the inserted run row with mint tick', () => {
+  const html = render({app: 'openconnector'});
+  assert.match(html, /class="travelDotA"/);
+  assert.match(html, /class="travelDotB"/);
+  assert.match(html, /item newRun/);
+  assert.match(html, /class="runTick"/);
+});
+
+test('procest: advanced base state (2 done, 1 now), two ghost overlays, and the re-sort pair', () => {
+  const html = render({app: 'procest'});
+  assert.match(html, /class="step"/, 'first step done');
+  assert.match(html, /step advanceFrom/, 'second step advanced out of active');
+  assert.match(html, /step now advanceTo/, 'third step is the newly active one');
+  assert.equal((html.match(/step now/g) || []).length, 1, 'one active step');
+  assert.equal((html.match(/step todo/g) || []).length, 2, 'two to-do steps');
+  assert.match(html, /ghost ghostNow/);
+  assert.match(html, /ghost ghostTodo/);
+  assert.match(html, /item sortUp/);
+  assert.match(html, /item sortDown/);
+});
+
+test('openregister: the landing object row and the KPI grow hook', () => {
+  const html = render({app: 'openregister'});
+  assert.match(html, /item newObj/);
+  assert.match(html, /kpi kpiGrow/);
+});
+
+/* ---- Wave 4 — content reworks ---- */
+
+test('decidesk: vote tally (for/against/abstain + quorum) and the adopt-flip decision row', () => {
+  const html = render({app: 'decidesk'});
+  assert.equal((html.match(/class="tallyRow /g) || []).length, 3, 'three tally rows');
+  assert.match(html, /tallyRow for/);
+  assert.match(html, /tallyRow against/);
+  assert.match(html, /tallyRow abstain/);
+  assert.equal((html.match(/class="quorum"/g) || []).length, 1, 'quorum line on the for-track only');
+  assert.match(html, /item decisionRow/);
+  assert.match(html, /statusPill adoptFlip/);
+});
+
+test('hrmq: reworked to a timesheet + approval surface (no people-list panels left)', () => {
+  const html = render({app: 'hrmq'});
+  assert.match(html, /class="body decidesk hrmq"/);
+  assert.equal((html.match(/class="dayCol"/g) || []).length, 5, 'five day columns');
+  assert.equal((html.match(/class="dayBar"/g) || []).length, 5, 'five hour bars');
+  assert.match(html, /btn submitBtn/);
+  assert.match(html, /item approveRow/);
+  assert.match(html, /class="approvePip"/);
+  assert.match(html, /class="payroll"/);
+  assert.match(html, /class="pNum"/);
+});
+
+test('larpingapp: XP ripple — lifted source card, travelling token, timeline intact', () => {
+  const html = render({app: 'larpingapp'});
+  assert.match(html, /class="body opencatalogi larping"/);
+  assert.match(html, /card b xpSource/);
+  assert.match(html, /class="xpToken"/);
+  assert.equal((html.match(/step now/g) || []).length, 1);
+});
+
+test('softwarecatalog: scan band, CVE-hit row 4, and the vermillion CVE bar (orange accent bar intact)', () => {
+  const html = render({app: 'softwarecatalog'});
+  assert.match(html, /class="body openregister swc"/);
+  assert.match(html, /class="scanBand"/);
+  assert.match(html, /item blocked cveHit/);
+  assert.match(html, /bar cve/);
+  assert.equal((html.match(/bar accent/g) || []).length, 1, 'exactly one orange accent bar');
+});
+
+test('zaakafhandelapp: travelling submission ghost and the dressed new case row', () => {
+  const html = render({app: 'zaakafhandelapp'});
+  assert.match(html, /class="body procest zaak"/);
+  assert.match(html, /class="zkGhost"/);
+  assert.match(html, /item zkNew/);
+  assert.match(html, /item zkSent/);
+  assert.equal((html.match(/item late/g) || []).length, 1, 'the SLA-late row survives the rework');
+});
+
+test('hermiq: inline styles moved to the module — bubbles, typing indicator, chips, approval', () => {
+  const html = render({app: 'hermiq'});
+  assert.match(html, /class="body decidesk hermiq"/);
+  assert.equal((html.match(/bubble user/g) || []).length, 2, 'two user bubbles');
+  assert.equal((html.match(/bubble agent/g) || []).length, 2, 'two agent bubbles');
+  assert.match(html, /class="typing"/);
+  assert.equal((html.match(/class="tDot"/g) || []).length, 3, 'three typing dots');
+  assert.match(html, /statusPill chip1/);
+  assert.match(html, /chip chip2/);
+  assert.match(html, /chip chip3/);
+  assert.match(html, /statusPill approveChip/);
+  assert.match(html, /class="promptField"/);
+  assert.match(html, /btn sendBtn/);
+  // The wave-4 requirement: presentation no longer rides inline styles.
+  assert.doesNotMatch(html, /style="[^"]*(background|border-radius|align-self)/, 'presentation styles must live in the module');
+});
+
+test('openbuild: template highlight, travelling ghost chip, landing app row, publish pulse', () => {
+  const html = render({app: 'openbuild'});
+  assert.match(html, /item tplSource/);
+  assert.match(html, /class="buildGhost"/);
+  assert.match(html, /item newApp/);
+  assert.match(html, /kpi kpiGrow/);
+  assert.match(html, /kpi forest publishedKpi/);
+});
+
 test('reserved accent families: no variant inline-styles coral or gold', () => {
   // SKILL.md reserves the coral and gold families; the one-orange rule
   // is enforced per component by review, but coral/gold must never

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

@@ -1,5 +1,5 @@
 /**
- * App Versions abstract — fleet version dashboard.
+ * Versioniq abstract — fleet version dashboard.
  *
  * Inferred from the app role (tracking installed app versions across
  * a workspace): a KPI strip over an app list — app hex, name, version

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

@@ -1,14 +1,32 @@
 /**
- * DeciDesk abstract — left nav + centre with action row, KPI strip,
- * and two tables. Reference: localhost:8080/apps/decidesk.
+ * Decidiq abstract — left nav + centre with action row, KPI strip,
+ * vote tally, and decision row. Reference: localhost:8080/apps/decidesk.
  *
  * Hero of the centre is the trio of primary buttons (New Decision /
- * Action Item / Minutes); we render them as accent-pill rows top right.
+ * Action Item / Minutes) rendered as accent-pill rows top right.
+ *
+ * Content rework (wave 4): the two former placeholder panels (a bare
+ * accent row / a bare short row) are now the app's actual story — a
+ * vote tally (for / against / abstain bars with a quorum line) and a
+ * decision row whose status flips pending → adopted. The tally fills,
+ * the "for" bar crosses the quorum line (which ticks mint), and the
+ * decision pill flips to adopted. Base styles are the adopted end
+ * state. The KPI strip keeps its single amber cell as the variant's
+ * one orange; the pending pill replays via the shared beta-pill
+ * coral/orange styling only transiently.
  */
 
 import React from 'react';
 import styles from '../AppMock.module.css';
 
+/* for / against / abstain — fill widths of the tally tracks. The
+   "for" bar carries the quorum line and crosses it as it fills. */
+const TALLY = [
+  {cls: 'for', fill: '72%'},
+  {cls: 'against', fill: '30%'},
+  {cls: 'abstain', fill: '16%'},
+];
+
 export default function DeciDeskMock() {
   return (
     <>
@@ -55,12 +73,35 @@ export default function DeciDeskMock() {
             </div>
           </div>
           <div className={styles.panelRow}>
-            <div className={styles.panel}>
+            {/* Vote tally — for / against / abstain with quorum line */}
+            <div className={[styles.panel, styles.tally].join(' ')}>
               <div className={styles.head}><div className={styles.title}></div></div>
-              <div className={styles.row + ' ' + styles.accent}></div>
+              {TALLY.map(({cls, fill}, i) => (
+                <div key={i} className={[styles.tallyRow, styles[cls]].join(' ')}>
+                  <div className={styles.tLabel}></div>
+                  <div className={styles.track}>
+                    <div className={styles.fill} style={{width: fill}}></div>
+                    {cls === 'for' && <div className={styles.quorum}></div>}
+                  </div>
+                </div>
+              ))}
             </div>
-            <div className={styles.panel}>
+            {/* Decision row — pending → adopted flip */}
+            <div className={[styles.panel, styles.decision].join(' ')}>
               <div className={styles.head}><div className={styles.title}></div></div>
+              <div className={[styles.item, styles.decisionRow].join(' ')}>
+                <div className={styles.dIco}></div>
+                <div className={styles.lines}>
+                  <div className={styles.l1}></div>
+                  <div className={styles.l2}></div>
+                </div>
+                {/* Base pill = adopted (mint). The keyframes replay the
+                    pending (beta-coloured) phase before the flip. */}
+                <div className={[styles.statusPill, styles.adoptFlip].join(' ')}>
+                  <div className={styles.h}></div><div className={styles.t}></div>
+                </div>
+              </div>
+              <div className={styles.row}></div>
               <div className={styles.row + ' ' + styles.short}></div>
             </div>
           </div>

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

@@ -1,16 +1,35 @@
 /**
- * DocuDesk abstract — three-pane document workshop.
+ * Filinq abstract — three-pane document workshop.
  *
  * Inferred from the app's role (template-driven document generation,
  * anonymisation, signing, archiving): centre stage shows a list of
  * recent documents with status pips (green = signed, amber = awaiting
  * sign, terra = anonymised, red = blocked) plus an anonymise drop-zone
  * widget. Left nav for templates / drafts / signed / archive.
+ *
+ * Animation (wave 2): the document rows are word-level bars; the
+ * marked (PII) words black out one by one — the anonymiser working
+ * through the open document set. Base styles are the redacted end
+ * state; the keyframes replay the before-state and the black-out.
+ * The drop-zone shares the `.zoneLive` marching-ants + file-drop
+ * treatment with the docudesk-anonymise dashboard widget.
  */
 
 import React from 'react';
 import styles from '../AppMock.module.css';
 
+/* Word-bar layout per document row: widths in px, `mark` = a PII word
+   the anonymiser blacks out. Five rows, five marked words total, so
+   the black-out cascade reads one word at a time across the list.
+   markIndex orders the cascade (drives the amDdMark<N> keyframes). */
+const DOC_ROWS = [
+  {pip: '', words: [{w: 16}, {w: 10, mark: 1}, {w: 20}, {w: 12}]},
+  {pip: 'review', words: [{w: 12}, {w: 18}, {w: 9, mark: 2}, {w: 14}]},
+  {pip: '', words: [{w: 20}, {w: 12}, {w: 16}, {w: 8, mark: 3}]},
+  {pip: 'todo', words: [{w: 10, mark: 4}, {w: 16}, {w: 12}, {w: 18}]},
+  {pip: '', words: [{w: 14}, {w: 12, mark: 5}, {w: 18}, {w: 10}]},
+];
+
 export default function DocuDeskMock() {
   return (
     <>
@@ -21,7 +40,7 @@ export default function DocuDeskMock() {
         <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.docudesk].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,25 +58,36 @@ export default function DocuDeskMock() {
               <div className={styles.btn}></div>
             </div>
           </div>
-          {/* Document list with anonymisation/sign status pips */}
+          {/* Document list — word bars with PII marks blacking out */}
           <div className={[styles.w, styles['w-jira']].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.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.todo].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>
+              {DOC_ROWS.map(({pip, words}, i) => (
+                <div key={i} className={[styles.item, pip && styles[pip]].filter(Boolean).join(' ')}>
+                  <div className={styles.id}></div>
+                  <div className={styles.words}>
+                    {words.map(({w, mark}, j) => (
+                      <div
+                        key={j}
+                        className={[styles.word, mark && styles.mark, mark && styles[`mark-${mark}`]].filter(Boolean).join(' ')}
+                        style={{width: w}}
+                      ></div>
+                    ))}
+                  </div>
+                  <div className={styles.pip}></div>
+                </div>
+              ))}
             </div>
           </div>
-          {/* Anonymise drop-zone */}
-          <div className={[styles.w, styles['w-upload']].join(' ')}>
+          {/* Anonymise drop-zone — live marching ants + file drop */}
+          <div className={[styles.w, styles['w-upload'], styles.zoneLive].join(' ')}>
             <div className={styles.wHead}>
               <div className={styles.h}></div><div className={styles.t}></div>
             </div>
             <div className={styles.zone}>
+              <div className={styles.zoneFile}></div>
               <div className={styles.ico}></div>
               <div className={styles.label}></div>
             </div>

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

@@ -1,11 +1,17 @@
 /**
- * Doriath abstract — secrets vault.
+ * Keepiq abstract — secrets vault.
  *
  * Inferred from the app role (storing and sharing secrets): a list of
  * locked entries — key hex, name, masked value rendered as a dot
  * pattern — next to one unlocked detail card on a cobalt-900 surface
  * with the revealed value in light. Tones: cobalt-900 for the vault
  * interior, lavender for the keys.
+ *
+ * Animation (wave 2): the key hex turns, the mask dots unmask, the
+ * value wipes in, a mint countdown hairline runs out, and the entry
+ * auto-relocks. Base styles are the revealed state (what static
+ * frames show); the keyframes replay lock → unlock → countdown →
+ * relock as one seamless loop.
  */
 
 import React from 'react';
@@ -13,9 +19,9 @@ import styles from '../AppMock.module.css';
 
 export default function DoriathMock() {
   const mask = (n) => (
-    <div style={{display: 'flex', gap: 2, flexShrink: 0}}>
+    <div className={styles.maskDots}>
       {Array.from({length: n}).map((_, i) => (
-        <div key={i} style={{width: 3, height: 3, borderRadius: '50%', background: 'var(--c-cobalt-400)'}}></div>
+        <div key={i} className={styles.dot}></div>
       ))}
     </div>
   );
@@ -28,7 +34,7 @@ export default function DoriathMock() {
         <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.doriath].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) => (
@@ -53,23 +59,32 @@ export default function DoriathMock() {
               <div className={styles.stack}>
                 {[6, 5, 7, 5, 6].map((dots, i) => (
                   <div key={i} className={styles.item}>
-                    <div style={{width: 10, height: 11, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-lavender-500)', flexShrink: 0}}></div>
+                    <div className={styles.keyChip}></div>
                     <div className={styles.lines}><div className={styles.l1}></div></div>
                     {mask(dots)}
                   </div>
                 ))}
               </div>
             </div>
-            {/* Unlocked entry — vault-dark card, value revealed */}
-            <div className={styles.panel} style={{background: 'var(--c-cobalt-900)', borderColor: 'var(--c-cobalt-900)'}}>
-              <div style={{display: 'flex', alignItems: 'center', gap: 5}}>
-                <div style={{width: 12, height: 14, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-lavender-300)', flexShrink: 0}}></div>
-                <div style={{height: 6, width: '45%', background: 'var(--c-lavender-300)', borderRadius: 1}}></div>
+            {/* Unlocked entry — vault-dark card. The key turns, the
+                masked dots unmask, the value wipes in, the countdown
+                hairline runs out, and the card relocks. */}
+            <div className={[styles.panel, styles.vaultCard].join(' ')}>
+              <div className={styles.vHead}>
+                <div className={styles.keyHex}></div>
+                <div className={styles.vTitle}></div>
+              </div>
+              <div className={styles.vMeta}></div>
+              <div className={styles.vSecret}>
+                <div className={styles.vMask}>
+                  {Array.from({length: 7}).map((_, i) => (
+                    <div key={i} className={styles.dot}></div>
+                  ))}
+                </div>
+                <div className={styles.vValue}></div>
               </div>
-              <div style={{height: 3, width: '60%', background: 'rgba(255,255,255,0.25)', borderRadius: 1}}></div>
-              <div style={{height: 10, width: '85%', background: 'rgba(255,255,255,0.9)', borderRadius: 2}}></div>
-              <div style={{height: 3, width: '50%', background: 'rgba(255,255,255,0.25)', borderRadius: 1}}></div>
-              <div style={{height: 3, width: '70%', background: 'rgba(255,255,255,0.25)', borderRadius: 1}}></div>
+              <div className={styles.vCountdown}></div>
+              <div className={styles.vMetaShort}></div>
             </div>
           </div>
         </div>

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

@@ -6,6 +6,14 @@
  * user bubbles right, agent bubbles left — with a tool-call chip row
  * between agent turns and a prompt input at the bottom. Tones:
  * workspace-blue for the human side, mint for confirmed tool runs.
+ *
+ * Wave 4: the inline styles moved into AppMock.module.css (.hermiq
+ * scope) so the surface can animate. The loop: the user's bubble
+ * pops in, a typing indicator blinks, the agent's answer grows, the
+ * tool chips light left-to-right, the approval chip — the variant's
+ * single orange — ticks mint once approved, the tool-result bubble
+ * grows, and the user follows up. Base styles are the approved end
+ * state (all chips lit, approval mint).
  */
 
 import React from 'react';
@@ -21,13 +29,13 @@ export default function HermiqMock() {
         <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.hermiq].filter(Boolean).join(' ')}>
         {/* Agent list rail */}
         <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) => (
             <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
-              <div className={styles.ico} style={{borderRadius: '50%'}}></div>
+              <div className={[styles.ico, styles.round].join(' ')}></div>
               <div className={styles.l}></div>
             </div>
           ))}
@@ -40,29 +48,41 @@ export default function HermiqMock() {
               <div className={styles.btn + ' ' + styles.ghost}></div>
             </div>
           </div>
-          <div className={styles.panel} style={{flex: 1, gap: 8, justifyContent: 'flex-end'}}>
+          <div className={[styles.panel, styles.convo].join(' ')}>
             {/* User asks */}
-            <div style={{alignSelf: 'flex-end', width: '42%', height: 12, borderRadius: '8px 2px 8px 8px', background: 'var(--c-workspaceblue-300)'}}></div>
+            <div className={[styles.bubble, styles.user, styles.turn1].join(' ')}></div>
+            {/* Typing indicator — blinks while the agent thinks.
+                Hidden at rest and in static frames. */}
+            <div className={styles.typing}>
+              <div className={styles.tDot}></div>
+              <div className={styles.tDot}></div>
+              <div className={styles.tDot}></div>
+            </div>
             {/* Agent answers */}
-            <div style={{alignSelf: 'flex-start', width: '58%', height: 18, borderRadius: '2px 8px 8px 8px', background: 'var(--c-cobalt-50)', border: '1px solid var(--c-cobalt-100)'}}></div>
-            {/* Tool-call chip row — mint = tool run confirmed */}
-            <div style={{display: 'flex', alignItems: 'center', gap: 4}}>
-              <div className={styles.statusPill}>
+            <div className={[styles.bubble, styles.agent, styles.turn2].join(' ')}></div>
+            {/* Tool-call chip row — chips light L→R; the approval chip
+                (the variant's one orange while pending) ticks mint. */}
+            <div className={styles.chips}>
+              <div className={[styles.statusPill, styles.chip1].join(' ')}>
+                <div className={styles.h}></div>
+                <div className={styles.t}></div>
+              </div>
+              <div className={[styles.chip, styles.chip2].join(' ')}></div>
+              <div className={[styles.chip, styles.chip3].join(' ')}></div>
+              <div className={[styles.statusPill, styles.approveChip].join(' ')}>
                 <div className={styles.h}></div>
                 <div className={styles.t}></div>
               </div>
-              <div style={{width: 34, height: 9, borderRadius: 999, background: 'var(--c-cobalt-100)'}}></div>
-              <div style={{width: 26, height: 9, borderRadius: 999, background: 'var(--c-cobalt-100)'}}></div>
             </div>
             {/* Agent continues with the tool result */}
-            <div style={{alignSelf: 'flex-start', width: '64%', height: 24, borderRadius: '2px 8px 8px 8px', background: 'var(--c-cobalt-50)', border: '1px solid var(--c-cobalt-100)'}}></div>
+            <div className={[styles.bubble, styles.agent, styles.tall, styles.turn3].join(' ')}></div>
             {/* User follows up */}
-            <div style={{alignSelf: 'flex-end', width: '34%', height: 12, borderRadius: '8px 2px 8px 8px', background: 'var(--c-workspaceblue-300)'}}></div>
+            <div className={[styles.bubble, styles.user, styles.narrow, styles.turn4].join(' ')}></div>
           </div>
           {/* Prompt input */}
-          <div className={styles.actions} style={{alignItems: 'center'}}>
-            <div style={{flex: 1, height: 16, background: 'white', border: '1px solid var(--c-cobalt-200)', borderRadius: 8}}></div>
-            <div className={styles.btn} style={{width: 28}}></div>
+          <div className={[styles.actions, styles.promptRow].join(' ')}>
+            <div className={styles.promptField}></div>
+            <div className={[styles.btn, styles.sendBtn].join(' ')}></div>
           </div>
         </div>
       </div>

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

@@ -1,21 +1,25 @@
 /**
- * HRMQ abstract — people administration.
+ * Humaniq 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 (Humaniq'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>