@conduction/docusaurus-preset 3.27.2 → 3.31.0

package/src/components/AiDisclosure/disclosure.js

@@ -0,0 +1,169 @@
+/**
+ * disclosure.js — pure resolver + copy/asset tables for AiDisclosure.
+ *
+ * No React and no webpack-only imports (no `?url` SVG imports) live
+ * here on purpose: this module is `require()`-able directly by
+ * Node's built-in test runner, and `import`-able from the JSX
+ * component via CommonJS/ESM interop. Keeping the decision logic and
+ * the copy register out of the component is what makes tasks 5.1-5.4
+ * testable without spinning up a bundler.
+ *
+ * @spec openspec/changes/ai-content-disclosure/tasks.md#task-1.2
+ * @spec openspec/changes/ai-content-disclosure/tasks.md#task-2.1
+ * @spec openspec/changes/ai-content-disclosure/tasks.md#task-2.2
+ * @spec openspec/changes/ai-content-disclosure/tasks.md#task-3.3
+ */
+
+'use strict';
+
+// The three values the `ai` frontmatter key accepts. Anything else -
+// including an empty string - is an unrecognised value per the spec's
+// "An unrecognised value fails loudly and renders nothing" requirement.
+const AI_KINDS = ['generated', 'modified', 'assisted'];
+
+// kind -> vendored icon filename prefix (see static/img/ai-disclosure/
+// PROVENANCE.md). "assisted" maps to the Commission's Basic mark,
+// whose vendored files carry no kind segment in the filename
+// (`ai-black.svg`, not `ai-basic-black.svg`).
+const KIND_TO_FILE_PREFIX = {
+  generated: 'ai-generated',
+  modified: 'ai-modified',
+  assisted: 'ai',
+};
+
+const TREATMENTS = ['black', 'white', 'black-transparent', 'white-transparent'];
+
+// Source viewBox dimensions per mark (icons/PROVENANCE.md). Each mark
+// has its own aspect ratio; a single uniform box would stretch two of
+// the three marks.
+const VIEWBOX = {
+  assisted: {width: 566.93, height: 566.93},
+  modified: {width: 1700.79, height: 566.93},
+  generated: {width: 1789.84, height: 566.93},
+};
+
+// Three kinds x four locales. Every string states a fact about the
+// page and stops - no compliance claim, no Code-of-Practice claim.
+// See design.md "The thing most likely to be got wrong".
+const COPY = {
+  nl: {
+    generated: 'Deze pagina is gegenereerd met AI.',
+    modified: 'Deze pagina is gedeeltelijk aangepast met AI.',
+    assisted: 'Deze pagina is geschreven met hulp van AI.',
+  },
+  en: {
+    generated: 'This page was generated with AI.',
+    modified: 'This page was partially modified with AI.',
+    assisted: 'This page was written with AI assistance.',
+  },
+  de: {
+    generated: 'Diese Seite wurde mit KI erstellt.',
+    modified: 'Diese Seite wurde teilweise mit KI bearbeitet.',
+    assisted: 'Diese Seite wurde mit KI-Unterstützung geschrieben.',
+  },
+  fr: {
+    generated: "Cette page a été générée avec l'IA.",
+    modified: "Cette page a été partiellement modifiée avec l'IA.",
+    assisted: "Cette page a été rédigée avec l'aide de l'IA.",
+  },
+};
+
+const LOCALES = Object.keys(COPY);
+
+function isValidKind(value) {
+  return AI_KINDS.indexOf(value) !== -1;
+}
+
+/**
+ * Resolve a page's `ai` frontmatter value.
+ *
+ * Absence (`undefined`) is the normal opt-out case: no banner, no
+ * warning. A *present* but unrecognised value (unknown string, empty
+ * string) is a defect - it warns, naming the file, the offending
+ * value, and the permitted values, and still resolves to no kind. It
+ * never falls back to a mark: a typo must not become a published
+ * authorship claim.
+ *
+ * @param {string|undefined} rawValue - the page's frontmatter `ai` value
+ * @param {string} sourcePath - the doc/blog source file, for the warning
+ * @returns {{kind: string|null, warning: string|null}}
+ */
+function resolveAiFrontmatter(rawValue, sourcePath) {
+  if (rawValue === undefined) {
+    return {kind: null, warning: null};
+  }
+  if (isValidKind(rawValue)) {
+    return {kind: rawValue, warning: null};
+  }
+  const file = sourcePath || 'unknown file';
+  const shown = rawValue === '' ? '(empty)' : JSON.stringify(rawValue);
+  const warning =
+    `[ai-content-disclosure] ${file}: unrecognised "ai" frontmatter value ${shown} - ` +
+    `permitted values are ${AI_KINDS.join(', ')}. Rendering no disclosure banner.`;
+  return {kind: null, warning};
+}
+
+function getIconFilename(kind, treatment) {
+  if (!isValidKind(kind)) {
+    throw new Error(`getIconFilename: unknown kind "${kind}"`);
+  }
+  if (TREATMENTS.indexOf(treatment) === -1) {
+    throw new Error(`getIconFilename: unknown treatment "${treatment}"`);
+  }
+  return `${KIND_TO_FILE_PREFIX[kind]}-${treatment}.svg`;
+}
+
+// Site-relative (no leading slash) path under `static/`. The marks are
+// served as plain static files - not run through webpack's `.svg`
+// pipeline - because this preset also enables @docusaurus/plugin-svgr
+// (via the classic preset), which unconditionally turns any `.svg`
+// imported from a JS/JSX/MDX file into a React component, regardless
+// of a `?url` suffix. An inlined SVGR component would also reuse
+// unscoped `.cls-N { fill: ... }` class names across every mark on the
+// page (see static/img/ai-disclosure/PROVENANCE.md), so two different
+// marks rendered together could bleed colours into each other. A
+// plain `<img src>` pointed at an untouched static file avoids both
+// problems and is the same mechanism this preset already uses for the
+// favicon and the default og:image (see static/img/).
+const ICONS_BASE_PATH = 'img/ai-disclosure';
+
+function getIconPath(kind, treatment) {
+  return `${ICONS_BASE_PATH}/${getIconFilename(kind, treatment)}`;
+}
+
+function getViewBox(kind) {
+  if (!isValidKind(kind)) {
+    throw new Error(`getViewBox: unknown kind "${kind}"`);
+  }
+  return VIEWBOX[kind];
+}
+
+/**
+ * Copy for one kind in one locale. No fallback: every locale in
+ * LOCALES must carry all three kinds (asserted by the locale-coverage
+ * test), so an undefined return here means the COPY table itself is
+ * incomplete, not that a reader silently sees a leaked English string.
+ */
+function getCopy(kind, locale) {
+  if (!isValidKind(kind)) {
+    throw new Error(`getCopy: unknown kind "${kind}"`);
+  }
+  const table = COPY[locale];
+  return table ? table[kind] : undefined;
+}
+
+module.exports = {
+  AI_KINDS,
+  TREATMENTS,
+  LOCALES,
+  KIND_TO_FILE_PREFIX,
+  VIEWBOX,
+  COPY,
+  ICONS_BASE_PATH,
+  isValidKind,
+  resolveAiFrontmatter,
+  getIconFilename,
+  getIconPath,
+  getViewBox,
+  getCopy,
+};

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>
+    </>
+  );
+}