@conduction/docusaurus-preset 3.34.0 → 3.36.0

package/ANIMATION_ROADMAP.md

@@ -0,0 +1,129 @@
+# Animation roadmap — wave 6 (planned, not yet implemented)
+
+Waves 1–5 of the animated-atomics programme are shipped (see
+`MISSING_COMPONENTS.md` for the per-component coverage). This file
+holds the designs for the two remaining L-size items from the
+animation audit, plus the small registry debts the audit surfaced.
+Nothing in this file is implemented; it is the working spec for the
+next animation PR.
+
+Rules carried over from the shipped waves, binding for wave 6 too:
+
+- Tokens only; no images, no hardcoded colours.
+- One KNVB-orange accent per component, maximum.
+- Every loop is seamless (opacity-swap resets, no visible rewind).
+- `running={false}` and `prefers-reduced-motion` render the
+  meaningful end state, not a blank.
+- Timelines ride the `--am-dur`-style custom-property convention so
+  a consumer can retune duration without touching keyframes.
+
+## 1 · Pipeline — the document travels the flow (L)
+
+**Component:** `src/components/Pipeline/Pipeline.jsx` +
+`Pipeline.module.css` (React, in the preset).
+
+**Audit finding on the claimed dotted-line animation — VERIFIED, it
+exists.** `Pipeline.module.css` draws the full-width dotted flow line
+as `.steps::before` (a `repeating-linear-gradient` dash pattern) and
+animates it with `flow-shift` (0.9s linear infinite,
+`background-position 0 → 10px`, lines 39–67). The stacked mobile
+layout (`max-width: 1100px`) switches to a vertical line with its own
+`flow-shift-vert` twin, and `prefers-reduced-motion: reduce` disables
+both. So the base "the line flows" motion is real and shipping; what
+wave 6 adds is the *payload* making the journey, not the line itself.
+
+**Design — a document hex rides the line:**
+
+- A small terracotta document hex (pointy-top, ~10×11, the same
+  vocabulary as the AppMock `.doc` atoms) spawns at the left end-box
+  (the `IconList` "Sources" column), travels the dotted line
+  left-to-right, and pauses ~400ms at each step hex's equator.
+- At each pause the step hex answers: a 1.06 scale pulse plus a brief
+  ring in the step's own family colour (mint for the Integriq
+  step, workspace-blue for the platform hex, terracotta for
+  OpenCatalogi — never a new orange). The pill inside the hex, when
+  present, bumps with it.
+- Past the last step the document fades into the right end-box
+  ("Consumers"), whose list items tick top-to-bottom with a 120ms
+  stagger (each item's icon tile flashes its border cobalt→mint→rest)
+  — the "everyone downstream can see it now" beat.
+- Loop length: `--pl-dur`, default 9s. The traveller is hidden at
+  0%/100% (opacity swap), so the loop is seamless; the dotted line's
+  independent 0.9s `flow-shift` keeps running underneath and needs no
+  synchronisation.
+- The vertical (stacked) layout re-routes the traveller top-to-bottom
+  along the vertical line; same beats.
+- Static / reduced-motion: the traveller is hidden, every step hex at
+  rest, the consumer list fully ticked — the delivered end state.
+  (`flow-shift` is already disabled by the existing media query.)
+- Implementation note: the traveller must be a sibling of `.steps`
+  positioned against the same `top: 85px` midline calc the line uses;
+  the hexes' `z-index: 1` will occlude it while it passes "through"
+  a hex, which is exactly the right reading.
+
+## 2 · PlatformDiagram — the platform assembles (L, cross-repo)
+
+**Component:** the preset's `PlatformDiagram/PlatformDiagram.jsx` is
+a typed wrapper around the bespoke `<platform-diagram>` web component
+that lives **in the design-system repo, not the preset**:
+`preview/components/_lib/platform-diagram.js` +
+`platform-diagram.css`. The animation therefore lands cross-repo: the
+keyframes and progress logic go into `_lib/platform-diagram.{js,css}`
+(runtime CSS is injected by the web component), while the preset
+wrapper only grows a `running` prop it forwards as an attribute.
+
+**Today:** the component already reveals on scroll via the
+`--pd-list-progress` / `--pd-hex-progress` custom properties — a
+one-shot entrance, not a loop.
+
+**Design — assembly loop:**
+
+- Beat 1, the workspace: the centre workspace slab draws in (scaleY
+  from the baseline) and its topbar dots pop left-to-right.
+- Beat 2, the corner hexes: the four app hexes fly in from their
+  compass corners (translate + fade, 90ms stagger), each with a
+  1.05 settle-bounce as it docks.
+- Beat 3, the flows: the connecting flow lines draw (stroke-dash
+  reveal) from workspace to each hex in the same order the hexes
+  landed.
+- Beat 4, the lists: each side list's rows land with the shipped
+  `.sbLive`-style stagger; the workspace pill flashes mint once when
+  the last row is in — "the platform is complete".
+- Hold ~2.5s assembled, then a soft opacity-cascade reset (the shipped
+  waves' convention; no rewind).
+- Loop length: `--pd-dur`, default 12s. When a `running="false"`
+  attribute (or `prefers-reduced-motion`) is set, the diagram renders
+  fully assembled — identical to today's post-scroll-reveal state, so
+  the existing scroll-progress path can stay as the reduced-motion
+  fallback.
+- Cross-repo sequencing: land the web-component change in
+  `preview/components/_lib/` first (the kit page
+  `preview/components/platform-overview.html` is the specimen), then
+  bump the copy the preset consumes, then add the wrapper prop +
+  render test in the preset. Two PRs, one per repo.
+
+## 3 · Pointer — flow-canvas run animation (spec lives elsewhere)
+
+The FlowMock atomic (shipped, wave 3) is the marketing abstraction of
+the flow editor. The *product* counterpart — the run-line animation on
+the real flow canvas — is specified in the **nextcloud-vue** repo
+(spec merged; `CnFlowCanvas` run-animation spec). Do not re-specify it
+here: when that lands, FlowMock should stay visually consistent with
+it (mint run-line, ~600ms approval hold, single orange halo at the
+approval node), but the preset carries no implementation work for it.
+
+## 4 · SidebarMock icon-registry stand-ins (S, debt)
+
+The audit flagged two tab icons that ship as stand-ins because the
+`IntegrationIcon` registry has no dedicated glyph:
+
+- `docudesk-signatures` — the Signatures tab renders the **mail**
+  icon. Needs a signature glyph (pen-stroke over a baseline, in the
+  registry's stroke style).
+- `docudesk-pii-map` — the PII-map tab renders the **keycloak** icon.
+  Needs a PII/redaction glyph (masked-text bar or eye-off).
+
+Add both to `IntegrationIcon/registry.js`, switch the two tab
+definitions in `SidebarMock.jsx`, and extend the SidebarMock render
+test to pin the new names. Until then the stand-ins are acceptable at
+mock abstraction level but must not leak into product UI.

package/MISSING_COMPONENTS.md

@@ -57,10 +57,12 @@ Most consume one or more primitives.
 - **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. 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`.
+- **AppMock** — `AppMock/AppMock.jsx`. Selector that renders one of 24 app-specific UI mockups (Decidiq, Filinq, Larpinq, LaunchPad + variants, Thematiq, PipelinQ, Portaliq, Dossiq, Learniq, Stackiq, ZaakAfhandelApp, …; `openwoo` aliases to the OpenCatalogi mock). Each variant lives under `AppMock/variants/`. As of the wave-2/4 animation pass every product variant loops a one-scene story on the shared `--am-dur` timeline: portaliq form-submit, nldesign retheme, scholiq progress+credential, launchpad widgets/tiles/BI, pipelinq deal-close (wave 1+3); docudesk PII words blacking out + live dropzone, shillinq bank-line reconciliation, doriath unlock → countdown → relock, opencatalogi federated-search filter, openconnector record-travel + run insert, procest stage advance + row re-sort, openregister object landing + rail repaint (wave 2); decidesk vote tally + pending→adopted flip, hrmq timesheet submit→approve→payroll (content reworked from the earlier people-list, which misrepresented the app), larpingapp XP ripple, softwarecatalog CVE scan sweep, zaakafhandelapp submission travel, hermiq conversation + tool chips + approval tick (inline styles moved to the module), openbuild template→app ghost travel (wave 4). `running={false}` / `prefers-reduced-motion` freeze every loop to its meaningful end state. Specimen: `preview/components/app-mock.html`.
+- **WidgetMock** — `WidgetMock/WidgetMock.jsx`. Standalone abstract of one Nextcloud dashboard widget (14 kinds: nine Conduction + five stock-Nextcloud framing widgets). The ten list-shaped kinds share a single wave-5 refresh primitive (`.wmLive` in AppMock.module.css): a fresh row slides in at the top, the bottom row clips out, and the frame's unread badge bumps — transform/opacity only, so tile height never jumps. `docudesk-anonymise` instead runs the `.zoneLive` dropzone loop (marching-ants dashes, a file hex drops, mint confirm flash). `running={false}` / `prefers-reduced-motion` freeze to the resting tile. Specimen: `preview/components/widget-mock.html`.
+- **SidebarMock** — `SidebarMock/SidebarMock.jsx`. Token-painted Nextcloud right-side detail panel, one registered tab active (9 kinds across Dossiq, Filinq, OpenRegister, OpenCatalogi, Integriq, Decidiq, stock activity). Standalone card or `embedded` into an AppMock's `.detail` slot. Wave-5 loop (`.sbLive`): the panel slides in from the right, the head wipes, the active-tab underline travels in from the neighbouring tab (positioned by `--sb-ix`/`--sb-n` custom properties set from the variant's active index), and the body rows land on a stagger. `running={false}` / `prefers-reduced-motion` freeze to the opened panel. Known stand-ins in the tab icon registry: Signatures tabs borrow the `mail` icon, PII-map tabs borrow `keycloak` (see `ANIMATION_ROADMAP.md`). Specimen: `preview/components/sidebar-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).
+- **BuildMock** — `BuildMock/BuildMock.jsx`. Looping "make it yours" animation: the orange Buildiq 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 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`.
@@ -140,7 +142,7 @@ A 2026-05-20 audit lifted the following inline-only patterns out of `preview/pag
 
 ## OpenRegister leaf docs
 
-- **LeafCard / LeafGrid** — `LeafCard/LeafCard.jsx`. Per-leaf metadata header for the openregister docs. Pointy-top hex + label + status pill + six-field meta grid (group, requiredApp, storage, icon). Four status tints: backend-ready, stub, external (OpenConnector-routed), built-in. `<LeafGrid>` lays cards out for the overview page; each card links to its docs route when `href` is set. Specimen: `preview/components/leaf-card.html`.
+- **LeafCard / LeafGrid** — `LeafCard/LeafCard.jsx`. Per-leaf metadata header for the openregister docs. Pointy-top hex + label + status pill + six-field meta grid (group, requiredApp, storage, icon). Four status tints: backend-ready, stub, external (Integriq-routed), built-in. `<LeafGrid>` lays cards out for the overview page; each card links to its docs route when `href` is set. Specimen: `preview/components/leaf-card.html`.
 
 ## Marketing / explainer
 
@@ -159,4 +161,11 @@ plus the new `IntegrationsBlock`); the locale-switcher integration on
 the `PartnerDirectory solutions` field (consumed in the offering facet);
 the `PartnerCard logoAlt` prop (accepted, with `name + ' logo'` fallback).
 
-No open gaps as of 2026-05-19.
+No open component gaps as of 2026-05-19.
+
+Animation coverage (2026-08-19): waves 1–5 of the animated-atomics
+programme shipped — every AppMock product variant, the WidgetMock
+list-refresh + dropzone primitives, and the SidebarMock open loop.
+The two remaining L-size items (Pipeline document-travels-the-flow,
+PlatformDiagram assembly) and the SidebarMock icon-registry stand-ins
+are specified in [`ANIMATION_ROADMAP.md`](ANIMATION_ROADMAP.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.34.0",
+  "version": "3.36.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"
@@ -34,7 +34,8 @@
     "static/",
     "bin/",
     "README.md",
-    "MISSING_COMPONENTS.md"
+    "MISSING_COMPONENTS.md",
+    "ANIMATION_ROADMAP.md"
   ],
   "keywords": [
     "conduction",

package/src/components/AppMock/AppMock.jsx

@@ -31,7 +31,7 @@
  *   - sidebar: ReactNode                                — renders inside
  *              the right-edge overlay of the frame. Pass a SidebarMock
  *              JSX to model a Nextcloud sidebar opened over this app
- *              (e.g. xWiki tab over a Procest case). Any other node
+ *              (e.g. xWiki tab over a Dossiq case). Any other node
  *              renders verbatim
  *   - caption: boolean — adds a small app-name caption below the frame
  *   - className: string
@@ -70,31 +70,31 @@ const VARIANTS = {
   'launchpad-tiles':   {Component: LaunchPadTilesMock,      label: 'LaunchPad · Tiles & grids'},
   'launchpad-bi':      {Component: LaunchPadBiMock,         label: 'LaunchPad · BI on registers'},
   'launchpad-widgets': {Component: LaunchPadWidgetsMock,    label: 'LaunchPad · Widgets'},
-  openbuild:        {Component: OpenBuildMock,        label: 'OpenBuild'},
+  openbuild:        {Component: OpenBuildMock,        label: 'Buildiq'},
   opencatalogi:     {Component: OpenCatalogiMock,     label: 'OpenCatalogi'},
-  openconnector:    {Component: OpenConnectorMock,    label: 'OpenConnector'},
+  openconnector:    {Component: OpenConnectorMock,    label: 'Integriq'},
   openregister:     {Component: OpenRegisterMock,     label: 'OpenRegister'},
-  procest:          {Component: ProcestMock,          label: 'Procest'},
-  decidesk:         {Component: DeciDeskMock,         label: 'DeciDesk'},
-  docudesk:         {Component: DocuDeskMock,         label: 'DocuDesk'},
-  larpingapp:       {Component: LarpingAppMock,       label: 'LarpingApp'},
-  nldesign:         {Component: NLDesignMock,         label: 'NLDesign'},
+  procest:          {Component: ProcestMock,          label: 'Dossiq'},
+  decidesk:         {Component: DeciDeskMock,         label: 'Decidiq'},
+  docudesk:         {Component: DocuDeskMock,         label: 'Filinq'},
+  larpingapp:       {Component: LarpingAppMock,       label: 'Larpinq'},
+  nldesign:         {Component: NLDesignMock,         label: 'Thematiq'},
   /* `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'},
+  softwarecatalog:  {Component: SoftwareCatalogMock,  label: 'Stackiq'},
   zaakafhandelapp:  {Component: ZaakAfhandelAppMock,  label: 'ZaakAfhandelApp'},
   hermiq:           {Component: HermiqMock,           label: 'Hermiq'},
   portaliq:         {Component: PortaliqMock,         label: 'Portaliq'},
-  scholiq:          {Component: ScholiqMock,          label: 'Scholiq'},
+  scholiq:          {Component: ScholiqMock,          label: 'Learniq'},
   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'},
+  doriath:          {Component: DoriathMock,          label: 'Keepiq'},
+  planix:           {Component: PlanixMock,           label: 'Planiq'},
+  hrmq:             {Component: HrmqMock,             label: 'Humaniq'},
+  'app-versions':   {Component: AppVersionsMock,      label: 'Versioniq'},
 };
 
 export default function AppMock({app, size = 'md', sidebar = null, caption = false, running = true, className}) {