@conduction/docusaurus-preset 3.32.0 → 3.34.0

package/MISSING_COMPONENTS.md

@@ -56,14 +56,15 @@ Most consume one or more primitives.
 - **GameModal** — `GameModal/GameModal.jsx`. End-of-game dialog with cross-game progress tracking. Subscribes to `connext:gameend` events.
 - **CookieCli** — `CookieCli/CookieCli.jsx`. Terminal-styled cookie consent banner with localStorage persistence.
 - **ComposeBlock** — `ComposeBlock/ComposeBlock.jsx`. Branded code block (cobalt-900 + Plex Mono + filename pill + copy button). For docker-compose, bash recipes, and any verbatim copy-paste content. Used on `/demo`.
-- **AgentTrace** — `AgentTrace/AgentTrace.jsx`. Terminal-styled agent execution trace with cursor + mode chrome. Specimen: `preview/components/agent-trace.html`.
-- **AppMock** — `AppMock/AppMock.jsx`. Selector that renders one of 16 app-specific UI mockups (DeciDesk, DocuDesk, LarpingApp, LaunchPad + variants, NLDesign, OpenCatalogi, OpenConnector, OpenRegister, OpenWoo, PipelinQ, Procest, SoftwareCatalog, ZaakAfhandelApp). Each variant lives under `AppMock/variants/`. Specimen: `preview/components/app-mock.html`.
-- **FlowMock** — `FlowMock/FlowMock.jsx`. Token-painted abstract of the flow editor: node cards on a dotted canvas with coloured left bars (mint trigger, lavender steps, vermillion end), curved grey edges with pill labels, and a mint run-line looping trigger → step → approval → end. Freezes to the full static route under `prefers-reduced-motion` or `running={false}`. Specimen: `preview/components/flow-mock.html`.
-- **LeafMock** — `LeafMock/LeafMock.jsx`. Small integration-leaf panels for Showcase items: `leaf="contacts"` (hex-avatar rows + mint sync arrow to a phone), `"calendar"` (mini month grid + linked-event chip), `"mail"` (message list + mint create-from-email chip), `"files"` (folder/file rows + forest link-to-record chip).
+- **AgentTrace** — `AgentTrace/AgentTrace.jsx`. Terminal-styled agent execution trace with cursor + mode chrome. Types itself out on a loop: lines reveal left-to-right on a 550ms stagger, status dots start after their line, ~2s hold, soft cascade restart; `running={false}` / `prefers-reduced-motion` show the full trace at rest. Specimen: `preview/components/agent-trace.html`.
+- **AppMock** — `AppMock/AppMock.jsx`. Selector that renders one of 24 app-specific UI mockups (DeciDesk, DocuDesk, LarpingApp, LaunchPad + variants, NLDesign, PipelinQ, Portaliq, Procest, Scholiq, SoftwareCatalog, ZaakAfhandelApp, …; `openwoo` aliases to the OpenCatalogi mock). Each variant lives under `AppMock/variants/`. `running={false}` / `prefers-reduced-motion` freeze the animated variants (portaliq form-submit, nldesign retheme, scholiq progress+credential, launchpad widgets/tiles/BI, pipelinq deal-close) to their meaningful end state on the shared `--am-dur` timeline. Specimen: `preview/components/app-mock.html`.
+- **FlowMock** — `FlowMock/FlowMock.jsx`. Token-painted abstract of the flow editor: node cards on a dotted canvas with coloured left bars (mint trigger, lavender steps, vermillion end), curved grey edges with pill labels, and a mint run-line looping trigger → step → approval → end. The run holds ~600ms at the approval node while an orange halo flashes there (the component's one orange). Freezes to the full static route under `prefers-reduced-motion` or `running={false}`. Specimen: `preview/components/flow-mock.html`.
+- **LeafMock** — `LeafMock/LeafMock.jsx`. Small integration-leaf panels for Showcase items: `leaf="contacts"` (hex-avatar rows + mint sync arrow to a phone), `"calendar"` (mini month grid + linked-event chip), `"mail"` (message list + mint create-from-email chip), `"files"` (folder/file rows + forest link-to-record chip). Each leaf animates on the shared 6s `--lm-dur` loop (sync pulse + phone rows; day pop + chip slide; row highlight + chip pop; row + link-icon draw); `running={false}` / `prefers-reduced-motion` freeze to the end state.
 - **BuildMock** — `BuildMock/BuildMock.jsx`. Looping "make it yours" animation: the orange OpenBuild edit FAB is pressed, a component palette opens, and a widget is dragged into the page layout where it snaps in (~8s loop). `prefers-reduced-motion` / `running={false}` renders the static end state (component placed).
-- **KanbanMock** — `KanbanMock/KanbanMock.jsx`. Looping kanban drag for the pipelinq hero: a cursor lifts the top lead card, drags it to the next column, drops it, and the column counts nudge (~7s loop). `prefers-reduced-motion` / `running={false}` renders the static board.
+- **KanbanMock** — `KanbanMock/KanbanMock.jsx`. Looping kanban drag for the pipelinq hero: a cursor lifts the top lead card, drags it to the next column, drops it flush into the column's card slot, and at the drop the column counts nudge (3→2, 2→3) and the per-lane € KPI tiles above the board shift the moved deal's value (~7s loop, clean reset). `prefers-reduced-motion` / `running={false}` renders the static board with the initial counts and totals.
+- **MockScene** — `MockScene/MockScene.jsx`. Free-form positioning stage for overlap shots of WidgetMocks + SidebarMocks (caller supplies canvas size and per-item x/y/z). The scene assembles on a loop: items land on a 220ms stagger, transform-only so the inline left/top positioning is never fought; `running={false}` / `prefers-reduced-motion` show the assembled scene.
 - **ExternalAppShelf** — `ExternalAppShelf/ExternalAppShelf.jsx`. Third-party-app shelf (Outlook-style, Mattermost, Keycloak, etc.) used on `/connext`. Specimen: `preview/components/external-app-shelf.html`.
-- **WidgetShelf** — `WidgetShelf/WidgetShelf.jsx`. Widget showcase with eyebrow + title + lede. Default is a slow single-row carousel (seamless duplicated track, pause on hover/focus, static wrapping grid under `prefers-reduced-motion`); `carousel={false}` renders the N-column grid. Specimen: `preview/components/widget-shelf.html`.
+- **WidgetShelf** — `WidgetShelf/WidgetShelf.jsx`. Widget showcase with eyebrow + title + lede. Default is a slow single-row carousel (seamless duplicated track, pause on hover/focus, static wrapping grid under `prefers-reduced-motion`); loop duration derives from the widget count (6s per card, min 30s; `speed` overrides), with pause/play + prev/next controls (cobalt ghost, hidden under reduced motion). Widgets without an explicit `panel` get a deterministic auto-generated mini panel (KPI tile / bar chart / list rows / donut, hashed from the title). `carousel={false}` renders the N-column grid. Specimen: `preview/components/widget-shelf.html`.
 - **Showcase** — `Showcase/Showcase.jsx`. Multi-item collapsible showcase with screenshot + body. Used on `/commonground` for the "5-lagen model". Specimen: `preview/components/showcase.html`.
 - **RotatingCards** — `RotatingCards/RotatingCards.jsx`. Rotating card carousel. Specimen: `preview/components/rotating-cards.html`.
 - **FAQ / FAQItem** — `FAQ/FAQ.jsx`. Disclosure-pattern FAQ block. Used on `/support`. Specimen: `preview/components/faq.html`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.32.0",
+  "version": "3.34.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"

package/src/components/AgentTrace/AgentTrace.jsx

@@ -47,6 +47,14 @@
  *     - kind 'status'       → KNVB-orange "ing…" status line
  *   - cursor:    boolean — render a blinking cursor at the bottom
  *   - mode:      string — bottom strip caption ("accept edits on…")
+ *   - running:   boolean (default true) — the trace types itself out:
+ *     each line reveals left-to-right on a 550ms stagger (a per-line
+ *     --at-d delay; the loop period --at-total derives from the line
+ *     count plus a ~2s hold), status-line dots start ticking only
+ *     after their line has appeared, and the loop restarts softly by
+ *     fading lines out in the same order they arrived. `running={false}`
+ *     and prefers-reduced-motion show the full trace at rest (every
+ *     line visible — the meaningful end state).
  */
 
 import React from 'react';
@@ -62,12 +70,25 @@ function bulletClass(b) {
   }
 }
 
-export default function AgentTrace({lines = [], cursor = false, mode, className}) {
+export default function AgentTrace({lines = [], cursor = false, mode, running = true, className}) {
+  /* Typed-reveal timing: line i appears at i × 550ms; after the last
+     line a ~2s hold, then a 600ms fade window before the loop. The
+     CSS animation reads both custom properties. */
+  const STEP = 550;
+  const total = lines.length * STEP + 2600;
+  const delayOf = (i) => ({'--at-d': `${i * STEP}ms`});
   return (
-    <div className={[styles.trace, className].filter(Boolean).join(' ')} role="img" aria-label="Agent trace">
-      <div className={styles.body}>
+    <div
+      className={[styles.trace, !running && styles.static, className].filter(Boolean).join(' ')}
+      role="img"
+      aria-label="Agent trace"
+    >
+      <div className={styles.body} style={{'--at-total': `${total}ms`}}>
         {lines.map((ln, i) => {
-          const indent = ln.indent ? {paddingLeft: `${ln.indent * 18}px`} : undefined;
+          const indent = {
+            ...(ln.indent ? {paddingLeft: `${ln.indent * 18}px`} : null),
+            ...delayOf(i),
+          };
           if (ln.kind === 'expand') {
             return (
               <div key={i} className={[styles.line, styles.expand].join(' ')} style={indent}>
@@ -111,7 +132,7 @@ export default function AgentTrace({lines = [], cursor = false, mode, className}
           );
         })}
         {cursor && (
-          <div className={[styles.line, styles.cursorLine].join(' ')}>
+          <div className={[styles.line, styles.cursorLine].join(' ')} style={delayOf(lines.length)}>
             <span className={styles.prompt}>&gt;</span>
             <span className={styles.cursor} aria-hidden="true"></span>
           </div>

package/src/components/AgentTrace/AgentTrace.module.css

@@ -1,6 +1,17 @@
 /**
  * <AgentTrace /> styles. Cobalt-900 terminal panel with monospace
  * lines and Claude-CLI-style coloured bullets.
+ *
+ * Typed reveal: every .line runs one shared looping animation whose
+ * period is --at-total (set inline by the component from the line
+ * count) and whose start is staggered by the per-line --at-d delay
+ * (i × 550ms, also inline). A line clips open left-to-right over the
+ * first ~4% of the period, holds, and fades near the end — with the
+ * stagger, lines type in and later fade out in arrival order, so the
+ * restart is a soft cascade rather than a hard cut. Status dots and
+ * the prompt cursor inherit the same delay so they only start after
+ * their line exists. `.static` (running={false}) and
+ * prefers-reduced-motion show every line at rest.
  */
 
 .trace {
@@ -29,6 +40,14 @@
   align-items: flex-start;
   gap: var(--space-2);
   font-feature-settings: "calt" 0;
+  animation: atType var(--at-total, 6s) linear var(--at-d, 0ms) infinite both;
+}
+
+@keyframes atType {
+  0%        { opacity: 0; clip-path: inset(0 100% 0 0); }
+  4%        { opacity: 1; clip-path: inset(0 0 0 0); }
+  90%       { opacity: 1; clip-path: inset(0 0 0 0); }
+  96%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
 }
 
 /* Bullets — set inline-block so the gap works the same across kinds. */
@@ -56,7 +75,9 @@
 .dots {
   display: inline-block;
   margin-left: 2px;
-  animation: dots 1400ms steps(4, end) infinite;
+  /* Inherits the line's --at-d so the dots only start ticking after
+     their line has typed in; backwards-fill hides them until then. */
+  animation: dots 1400ms steps(4, end) var(--at-d, 0ms) infinite backwards;
   white-space: pre;
   overflow: hidden;
   vertical-align: bottom;
@@ -94,7 +115,8 @@
   height: 14px;
   background: white;
   vertical-align: -2px;
-  animation: blink 1100ms steps(2, end) infinite;
+  /* Same delay-inheritance as .dots: blinking starts with its line. */
+  animation: blink 1100ms steps(2, end) var(--at-d, 0ms) infinite backwards;
 }
 @keyframes blink {
   0%, 50%   { opacity: 1; }
@@ -113,3 +135,20 @@
 }
 .modeArrow { color: var(--c-cobalt-300); }
 .modeText  { color: var(--c-cobalt-200); }
+
+/* ---- Static trace (running={false} and reduced motion) ----
+   Every line visible at rest, dots at full width, cursor solid. */
+
+.static .line,
+.static .dots,
+.static .cursor {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .line,
+  .dots,
+  .cursor {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,108 @@
+/**
+ * AgentTrace.render.test.js — SSR-renders the real <AgentTrace> and
+ * asserts the typed-reveal wiring: per-line --at-d delays on the
+ * 550ms stagger, the loop period --at-total derived from the line
+ * count, the cursor delayed until after the last line, and the
+ * `running` prop's static class. Same esbuild harness as
+ * KanbanMock.render.test.js; CSS modules stubbed to identity.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'AgentTrace.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-agent-trace-test');
+
+const LINES = [
+  {kind: 'note', bullet: 'done', text: 'Found the root cause.'},
+  {kind: 'tool', text: 'openconnector - run_pipeline (MCP)'},
+  {kind: 'expand', text: '+38 lines (ctrl+o to expand)'},
+  {kind: 'continuation', text: 'register_slug: "zaak", limit: 50'},
+  {kind: 'status', text: 'Synthesising…'},
+];
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let AgentTrace;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  AgentTrace = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(AgentTrace, props));
+}
+
+test('SSR smoke: renders every line kind', () => {
+  const html = render({lines: LINES, cursor: true, mode: 'accept edits on'});
+  for (const cls of ['note', 'tool', 'expand', 'continuation', 'status', 'cursorLine', 'modeBar']) {
+    assert.match(html, new RegExp(`class="[^"]*\\b${cls}\\b`), `missing ${cls}`);
+  }
+});
+
+test('typed reveal: each line carries its --at-d delay on the 550ms stagger', () => {
+  const html = render({lines: LINES});
+  for (let i = 0; i < LINES.length; i++) {
+    assert.match(html, new RegExp(`--at-d:${i * 550}ms`), `line ${i}: missing delay`);
+  }
+});
+
+test('typed reveal: the loop period --at-total derives from the line count (+ hold)', () => {
+  const html = render({lines: LINES});
+  assert.match(html, new RegExp(`--at-total:${LINES.length * 550 + 2600}ms`));
+});
+
+test('cursor: delayed until after the last line', () => {
+  const html = render({lines: LINES, cursor: true});
+  assert.match(html, new RegExp(`--at-d:${LINES.length * 550}ms`));
+});
+
+test('indented lines keep their padding alongside the delay', () => {
+  const html = render({lines: [{kind: 'note', text: 'x', indent: 2}]});
+  assert.match(html, /padding-left:36px/);
+  assert.match(html, /--at-d:0ms/);
+});
+
+test('P0 plumbing: running={false} adds the static class to the trace root; default omits it', () => {
+  assert.match(render({lines: LINES, running: false}), /class="trace static"/);
+  assert.doesNotMatch(render({lines: LINES}), /\bstatic\b/);
+});

package/src/components/AppMock/AppMock.jsx

@@ -22,6 +22,12 @@
  * Props:
  *   - app:     keyof VARIANTS                           (required)
  *   - size:    'sm' | 'md' (default)                    — frame width
+ *   - running: boolean (default true) — false freezes every variant
+ *              animation to its meaningful static end state (the same
+ *              rendering `prefers-reduced-motion: reduce` gives).
+ *              Forwarded to the variant component as well, for variants
+ *              that need JS-side awareness; the CSS `.static` class on
+ *              the frame is what actually stops the keyframes.
  *   - sidebar: ReactNode                                — renders inside
  *              the right-edge overlay of the frame. Pass a SidebarMock
  *              JSX to model a Nextcloud sidebar opened over this app
@@ -47,7 +53,6 @@ import DeciDeskMock from './variants/DeciDeskMock.jsx';
 import DocuDeskMock from './variants/DocuDeskMock.jsx';
 import LarpingAppMock from './variants/LarpingAppMock.jsx';
 import NLDesignMock from './variants/NLDesignMock.jsx';
-import OpenWooMock from './variants/OpenWooMock.jsx';
 import PipelinQMock from './variants/PipelinQMock.jsx';
 import SoftwareCatalogMock from './variants/SoftwareCatalogMock.jsx';
 import ZaakAfhandelAppMock from './variants/ZaakAfhandelAppMock.jsx';
@@ -74,7 +79,11 @@ const VARIANTS = {
   docudesk:         {Component: DocuDeskMock,         label: 'DocuDesk'},
   larpingapp:       {Component: LarpingAppMock,       label: 'LarpingApp'},
   nldesign:         {Component: NLDesignMock,         label: 'NLDesign'},
-  openwoo:          {Component: OpenWooMock,          label: 'OpenWoo'},
+  /* `openwoo` is an alias: the OpenWoo app is retired in favour of
+     OpenCatalogi, so the slug renders the OpenCatalogi mock. The
+     OpenWooMock.jsx variant file is kept for now (no importer left);
+     delete it in a later cleanup wave. */
+  openwoo:          {Component: OpenCatalogiMock,     label: 'OpenCatalogi'},
   pipelinq:         {Component: PipelinQMock,         label: 'PipelinQ'},
   softwarecatalog:  {Component: SoftwareCatalogMock,  label: 'SoftwareCatalog'},
   zaakafhandelapp:  {Component: ZaakAfhandelAppMock,  label: 'ZaakAfhandelApp'},
@@ -88,7 +97,7 @@ const VARIANTS = {
   'app-versions':   {Component: AppVersionsMock,      label: 'App Versions'},
 };
 
-export default function AppMock({app, size = 'md', sidebar = null, caption = false, className}) {
+export default function AppMock({app, size = 'md', sidebar = null, caption = false, running = true, className}) {
   const variant = VARIANTS[app];
   if (!variant) {
     return (
@@ -113,8 +122,8 @@ export default function AppMock({app, size = 'md', sidebar = null, caption = fal
   return (
     <div className={styles.am}>
       <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
-        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
-          <Component sidebar={renderedSidebar} />
+        <div className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}>
+          <Component sidebar={renderedSidebar} running={running} />
         </div>
         {caption && <figcaption className={styles.caption}>{label}</figcaption>}
       </figure>