@conduction/docusaurus-preset 3.28.0 → 3.31.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.28.0",
+  "version": "3.31.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"
   },
   "bin": {
-    "validate-ai-baseline": "./bin/validate-ai-baseline.mjs"
+    "validate-ai-baseline": "bin/validate-ai-baseline.mjs"
   },
   "description": "Conduction brand preset for Docusaurus 3. Tokens, theme, navbar, footer, i18n config for nl/en/de/fr, and the React component library that powers conduction.nl and the Conduction product sites.",
   "main": "src/index.js",
@@ -61,10 +61,10 @@
   "homepage": "https://design-system.conduction.nl/",
   "repository": {
     "type": "git",
-    "url": "https://codeberg.org/Conduction/design-system.git",
+    "url": "git+https://github.com/ConductionNL/design-system.git",
     "directory": "docusaurus-preset"
   },
   "bugs": {
-    "url": "https://codeberg.org/Conduction/design-system/issues"
+    "url": "https://github.com/ConductionNL/design-system/issues"
   }
 }

package/src/components/AppMock/AppMock.jsx

@@ -51,6 +51,14 @@ import OpenWooMock from './variants/OpenWooMock.jsx';
 import PipelinQMock from './variants/PipelinQMock.jsx';
 import SoftwareCatalogMock from './variants/SoftwareCatalogMock.jsx';
 import ZaakAfhandelAppMock from './variants/ZaakAfhandelAppMock.jsx';
+import HermiqMock from './variants/HermiqMock.jsx';
+import PortaliqMock from './variants/PortaliqMock.jsx';
+import ScholiqMock from './variants/ScholiqMock.jsx';
+import ShillinqMock from './variants/ShillinqMock.jsx';
+import DoriathMock from './variants/DoriathMock.jsx';
+import PlanixMock from './variants/PlanixMock.jsx';
+import HrmqMock from './variants/HrmqMock.jsx';
+import AppVersionsMock from './variants/AppVersionsMock.jsx';
 
 const VARIANTS = {
   launchpad:           {Component: LaunchPadMock,           label: 'LaunchPad'},
@@ -70,6 +78,14 @@ const VARIANTS = {
   pipelinq:         {Component: PipelinQMock,         label: 'PipelinQ'},
   softwarecatalog:  {Component: SoftwareCatalogMock,  label: 'SoftwareCatalog'},
   zaakafhandelapp:  {Component: ZaakAfhandelAppMock,  label: 'ZaakAfhandelApp'},
+  hermiq:           {Component: HermiqMock,           label: 'Hermiq'},
+  portaliq:         {Component: PortaliqMock,         label: 'Portaliq'},
+  scholiq:          {Component: ScholiqMock,          label: 'Scholiq'},
+  shillinq:         {Component: ShillinqMock,         label: 'Shillinq'},
+  doriath:          {Component: DoriathMock,          label: 'Doriath'},
+  planix:           {Component: PlanixMock,           label: 'Planix'},
+  hrmq:             {Component: HrmqMock,             label: 'HRMQ'},
+  'app-versions':   {Component: AppVersionsMock,      label: 'App Versions'},
 };
 
 export default function AppMock({app, size = 'md', sidebar = null, caption = false, className}) {

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

@@ -0,0 +1,83 @@
+/**
+ * App Versions 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
+ * chip, and a status dot column where mint = up to date and
+ * terracotta = an update is waiting. Tone: workspace-blue — this is
+ * about the workspace itself.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+const APPS = [
+  {upToDate: true},
+  {upToDate: true},
+  {upToDate: false, newChip: true},
+  {upToDate: true},
+  {upToDate: false, newChip: true},
+  {upToDate: true},
+];
+
+export default function AppVersionsMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.decidesk].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].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '30%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+            </div>
+          </div>
+          <div className={styles.kpiRow}>
+            <div className={styles.kpi}>
+              <div className={styles.ico} style={{background: 'var(--c-workspaceblue-500)'}}></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}></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.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+          </div>
+          {/* App rows: hex · name · version chip(s) · status dot */}
+          <div className={styles.panel} style={{flex: 1}}>
+            <div className={styles.head}><div className={styles.title}></div></div>
+            <div className={styles.stack}>
+              {APPS.map(({upToDate, newChip}, i) => (
+                <div key={i} className={styles.item}>
+                  <div style={{width: 11, height: 13, clipPath: 'var(--hex-pointy-top)', background: upToDate ? 'var(--c-workspaceblue-500)' : 'var(--c-workspaceblue-300)', flexShrink: 0}}></div>
+                  <div className={styles.lines}><div className={styles.l1}></div></div>
+                  <div style={{width: 26, height: 9, borderRadius: 999, background: 'var(--c-cobalt-100)', flexShrink: 0}}></div>
+                  {newChip && <div style={{width: 26, height: 9, borderRadius: 999, background: 'var(--c-workspaceblue-300)', flexShrink: 0}}></div>}
+                  <div style={{width: 6, height: 6, borderRadius: '50%', background: upToDate ? 'var(--c-mint-500)' : 'var(--c-terracotta-500)', flexShrink: 0}}></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,79 @@
+/**
+ * Doriath 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.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function DoriathMock() {
+  const mask = (n) => (
+    <div style={{display: 'flex', gap: 2, flexShrink: 0}}>
+      {Array.from({length: n}).map((_, i) => (
+        <div key={i} style={{width: 3, height: 3, borderRadius: '50%', background: 'var(--c-cobalt-400)'}}></div>
+      ))}
+    </div>
+  );
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.decidesk].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) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '25%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          <div className={styles.panelRow} style={{gridTemplateColumns: '1.4fr 1fr'}}>
+            {/* Locked entries — key hex + name + masked value */}
+            <div className={styles.panel}>
+              <div className={styles.head}><div className={styles.title}></div></div>
+              <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.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>
+              </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>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,71 @@
+/**
+ * Hermiq abstract — agent chat surface.
+ *
+ * Inferred from the app role (AI agents working inside the workspace):
+ * left rail lists the available agents, centre shows a conversation —
+ * 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.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function HermiqMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.decidesk].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.l}></div>
+            </div>
+          ))}
+        </div>
+        {/* Conversation */}
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '30%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+            </div>
+          </div>
+          <div className={styles.panel} style={{flex: 1, gap: 8, justifyContent: 'flex-end'}}>
+            {/* User asks */}
+            <div style={{alignSelf: 'flex-end', width: '42%', height: 12, borderRadius: '8px 2px 8px 8px', background: 'var(--c-workspaceblue-300)'}}></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.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>
+            {/* User follows up */}
+            <div style={{alignSelf: 'flex-end', width: '34%', height: 12, borderRadius: '8px 2px 8px 8px', background: 'var(--c-workspaceblue-300)'}}></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>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,77 @@
+/**
+ * HRMQ abstract — people 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.
+ */
+
+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)'},
+];
+
+export default function HrmqMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.decidesk].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) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '25%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          <div className={styles.panelRow} style={{gridTemplateColumns: '1.2fr 1fr'}}>
+            {/* People list — hex avatars */}
+            <div className={styles.panel}>
+              <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>
+                ))}
+              </div>
+            </div>
+            {/* Leave-balance card — labelled bars */}
+            <div className={styles.panel}>
+              <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>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,80 @@
+/**
+ * Planix 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
+ * varying heights, over a small capacity KPI strip. Tone: lavender —
+ * process and workflow.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+/* Per day column: [height, shade] pairs; null = free slot spacer. */
+const WEEK = [
+  [[14, 500], [10, 300]],
+  [[8, 300], [16, 500], [8, 300]],
+  [[12, 300], null, [10, 500]],
+  [[18, 500]],
+  [[8, 300], [8, 300]],
+];
+
+export default function PlanixMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.decidesk].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) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '25%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          <div className={styles.kpiRow}>
+            <div className={[styles.kpi, styles.lavender].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}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+          </div>
+          {/* Week grid with placed planning blocks */}
+          <div className={styles.w} style={{flex: 1}}>
+            <div className={styles.wHead}>
+              <div className={styles.h}></div><div className={styles.t}></div>
+            </div>
+            <div style={{flex: 1, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4, minHeight: 60}}>
+              {WEEK.map((day, i) => (
+                <div key={i} style={{background: 'var(--c-cobalt-50)', borderRadius: 2, padding: 3, display: 'flex', flexDirection: 'column', gap: 2}}>
+                  {day.map((block, j) => block
+                    ? <div key={j} style={{height: block[0], borderRadius: 1, background: `var(--c-lavender-${block[1]})`}}></div>
+                    : <div key={j} style={{height: 8}}></div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,63 @@
+/**
+ * Portaliq abstract — external portal, seen from the visitor's side.
+ *
+ * Inferred from the app role (public-facing portals on top of the
+ * workspace): a slim public header instead of the full Nextcloud icon
+ * row, then a submission form card next to a message inbox list. No
+ * left nav — the visitor gets one page, not an admin surface. Tones:
+ * cobalt for the frame, mint for the delivered/confirmed states.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+export default function PortaliqMock() {
+  return (
+    <>
+      {/* Public header: logo + a few page links, no app-icon strip */}
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        <div className={styles.spacer}></div>
+        {Array.from({length: 3}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.decidesk].filter(Boolean).join(' ')}>
+        <div className={styles.col}>
+          {/* Portal masthead */}
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '35%'}}></div>
+            <div className={styles.statusPill}>
+              <div className={styles.h}></div>
+              <div className={styles.t}></div>
+            </div>
+          </div>
+          <div className={styles.panelRow} style={{gridTemplateColumns: '1.2fr 1fr'}}>
+            {/* Submission form card */}
+            <div className={styles.panel}>
+              <div className={styles.head}><div className={styles.title}></div></div>
+              <div className={styles.row + ' ' + styles.head} style={{width: '25%', height: 4}}></div>
+              <div style={{height: 14, background: 'white', border: '1px solid var(--c-cobalt-200)', borderRadius: 3}}></div>
+              <div className={styles.row + ' ' + styles.head} style={{width: '30%', height: 4}}></div>
+              <div style={{height: 14, background: 'white', border: '1px solid var(--c-cobalt-200)', borderRadius: 3}}></div>
+              <div className={styles.row + ' ' + styles.head} style={{width: '20%', height: 4}}></div>
+              <div style={{height: 26, background: 'white', border: '1px solid var(--c-cobalt-200)', borderRadius: 3}}></div>
+              <div className={styles.actions} style={{justifyContent: 'flex-end', marginTop: 2}}>
+                <div className={styles.btn}></div>
+              </div>
+            </div>
+            {/* Message inbox list */}
+            <div className={[styles.panel, styles['w-mail']].join(' ')}>
+              <div className={styles.head}><div className={styles.title}></div></div>
+              <div className={styles.list}>
+                <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+                <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+                <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+                <div className={styles.item}><div className={styles.av}></div><div className={styles.lines}><div className={styles.l1}></div><div className={styles.l2}></div></div></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,74 @@
+/**
+ * Scholiq 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
+ * credential chip on the completed course. Left nav for courses /
+ * lessons / learners / certificates. Tone: forest — data you can
+ * trust a diploma to.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+const PROGRESS = [
+  {ico: 'b', fill: '100%', done: true},
+  {ico: 'b', fill: '65%'},
+  {ico: null, fill: '40%'},
+  {ico: 'b', fill: '80%'},
+  {ico: 'e', fill: '25%'},
+  {ico: 'b', fill: '10%'},
+];
+
+export default function ScholiqMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.opencatalogi].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) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6}}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '30%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          {/* Course cards with progress bars */}
+          <div className={styles.grid}>
+            {PROGRESS.map(({ico, fill, done}, i) => (
+              <div key={i} className={[styles.card, ico && styles[ico]].filter(Boolean).join(' ')}>
+                <div className={styles.ico}></div>
+                <div className={styles.row}></div>
+                <div className={styles.row + ' ' + styles.short}></div>
+                <div style={{height: 4, background: 'var(--c-cobalt-100)', borderRadius: 2}}>
+                  <div style={{width: fill, height: 4, background: 'var(--c-forest-500)', borderRadius: 2}}></div>
+                </div>
+                {done && (
+                  /* Credential chip — course completed, certificate issued */
+                  <div style={{display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 6px', borderRadius: 999, background: 'var(--c-forest-300)', alignSelf: 'flex-start'}}>
+                    <div style={{width: 6, height: 7, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-forest-500)'}}></div>
+                    <div style={{height: 3, width: 22, background: 'var(--c-forest-500)', borderRadius: 1}}></div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}