@conduction/docusaurus-preset 0.1.0

package/MISSING_COMPONENTS.md

@@ -0,0 +1,109 @@
+# Component coverage map
+
+Tracks which `preview/components/*.html` patterns ship as React components in
+`@conduction/docusaurus-preset`. Started as a gap list during the connext landing
+port; now reads as a coverage map. Anything still missing lives in **Open gaps**
+at the bottom.
+
+> Last refreshed 2026-05-06 against `src/components/index.js` and the static kit.
+
+## Atomic primitives
+
+Every higher-level component composes from these. Each one was extracted when
+its CSS rule appeared in three or more component files.
+
+- **HexBullet** — `primitives/HexBullet.jsx`. Three sizes (sm 8×9, md 12×14, lg 44×50) of the pointy-top clip-path hex. Used in eyebrows, pill bullets, status badges, footer triad.
+- **HexThumbnail** — `primitives/HexThumbnail.jsx`. Single pointy-top hex tile holding an icon, photo (clip-path masked), or illustration. Four sizes (sm 56×64, md 88×100, lg 160×184, xl 240×280), six tones. Used by every academy card and hero.
+- **AuthorByline** — `primitives/AuthorByline.jsx`. Avatar (initials or photo) + name + bullet separator + formatted date. Three tones (default, on-dark, muted). Used on every academy card and detail page.
+- **Eyebrow** — `primitives/Eyebrow.jsx`. Uppercase Plex Mono caption with optional leading HexBullet.
+- **Section** — `primitives/Section.jsx`. The 1280px-max wrapper. Background variants (default, tinted, inverse), spacing variants (default, tight, flush).
+- **SectionHead** — `primitives/SectionHead.jsx`. Eyebrow + h2 + lede. Two layouts (split 1.1fr/1fr; stack centred).
+- **Card** — `primitives/Card.jsx`. White / cobalt-100 / radius-lg. Tones: surface (default), ghost (dashed), inverse (cobalt-900).
+- **Pill** — `primitives/Pill.jsx`. Mono-caps chip with optional bullet. Status badges, app tags, sector labels.
+- **Button** — `primitives/Button.jsx`. Primary / secondary / ghost + on-dark variants for cobalt CTA panels.
+- **NextBlue / CgYellow / KnvbOrange / CommonGroundPlus** — `primitives/BrandCitation.jsx`. Type-checked wrappers around the global `next-blue` / `cg-yellow` / `knvb-orange` / `commonground-plus` CSS classes. Replaces ad-hoc `<span className="next-blue">Nextcloud</span>` with `<NextBlue>Nextcloud</NextBlue>`.
+
+## Composite components
+
+Most consume one or more primitives.
+
+- **Hero** — `Hero/Hero.jsx`. Two-column landing hero. Composes Eyebrow + Button.
+- **StatsStrip** — `StatsStrip/StatsStrip.jsx`. Four-up cobalt-50 stats band.
+- **CtaBanner** — `CtaBanner/CtaBanner.jsx`. Cobalt CTA panel. Composes ConductionBg + on-dark Button.
+- **PlatformOverview** — `PlatformOverview/PlatformOverview.jsx`. Section-head + diagram wrapper.
+- **PlatformDiagram** — `PlatformDiagram/PlatformDiagram.jsx`. Typed wrapper around the bespoke `<platform-diagram>` web component. Pass workspace + lists + flows as data. Reveals on scroll via `--pd-list-progress` / `--pd-hex-progress` CSS variables.
+- **AppsPreview / AppCard** — `AppsPreview/AppsPreview.jsx`. Static 3-up apps grid. Composes SectionHead + HexBullet.
+- **AppsGrid** — `AppsGrid/AppsGrid.jsx`. Filterable apps catalogue with category chips. Reuses AppCard.
+- **SolutionCard / SolutionGrid** — `SolutionCard/SolutionCard.jsx`. Sector-tinted solution cards. Composes Pill.
+- **PartnerCard / PartnerGrid / BecomePartner** — `PartnerCard/PartnerCard.jsx`. Three tiers (partner, certified, strategic). Plus `variant="other"` for the compact mini-avatar card used on partner-detail pages.
+- **PartnerDirectory** — `PartnerDirectory/PartnerDirectory.jsx`. Self-contained faceted directory used on `/partners` and embedded on the homepage. Internally derives facets from the partner data; pair with a `becomePartner` object for the trailing CTA card. No dedicated static-kit specimen — composed from PartnerCard + FacetedFilters.
+- **PartnerSidecard** — `PartnerSidecard/PartnerSidecard.jsx`. Sticky right rail used inside partner-detail pages. Holds the tier credential, "apps they ship", and "solutions they deliver". Bleeds into the Specialties section without wrapping the page.
+- **ManagedCommonGround** — `ManagedCommonGround/ManagedCommonGround.jsx`. Yellow-themed managed-stack panel used on `/commonground` and `/support`. Component-list + price line + dual CTA. No dedicated static-kit specimen.
+- **Clients** (+ `DEFAULT_CLIENTS`, `DEFAULT_PARTNERS`) — `Clients/Clients.jsx`. Three-row right-to-left honeycomb marquee with grayscale-to-colour hover, lane-pause-on-hover, and `prefers-reduced-motion` respect. Specimen: `preview/components/clients-marquee.html`.
+- **ReferenceCard / ReferenceGrid** — `ReferenceCard/ReferenceCard.jsx`. Customer-reference cards on partner-detail pages.
+- **PairCard / PairRow** — `PairCard/PairCard.jsx`. Compact "related item" cards on app- and solution-detail pages.
+- **EmployeeCard / TeamGrid** — `EmployeeCard/EmployeeCard.jsx`. Three variants (compact, photo, detail) for the /about team grid.
+- **FeatureList / FeatureItem** — `FeatureList/FeatureItem.jsx`. Single-column USPs with hex glyphs. Use `items={…}` array OR `<FeatureItem>` children, not both.
+- **FeatureGrid / FeatureGridItem / FeatureGridGroup** — `FeatureGrid/FeatureGrid.jsx`. Compact spec list with hover-tooltip and stable/beta/soon status hexes.
+- **HowSteps / HowStep** — `HowSteps/HowSteps.jsx`. Numbered process-step row. Auto-numbers and auto-tints (cobalt → orange → cobalt-700) when `number` and `tier` are omitted.
+- **Pipeline / PipelineStep / IconList** — `Pipeline/Pipeline.jsx`. Horizontal hex-numbered pipeline with chevron flow lines and optional source/consumer end-boxes.
+- **DetailHero** — `DetailHero/DetailHero.jsx`. Shared 1fr/360px hero pattern between app/solution/partner detail pages. Crumb + status + version + locales + downloads badge + h1 + tagline + 3 CTAs + right-column illustration.
+- **FacetedFilters / FilterChip** — `FacetedFilters/FacetedFilters.jsx`. Sidebar facet checkbox panel + active-chip strip.
+- **ConductionBg** — `ConductionBg/ConductionBg.jsx`. Parallax honeycomb background. Real component with self-contained runtime hook.
+- **HexNetwork** — `HexNetwork/HexNetwork.jsx`. Centre hex with surrounding satellites. Used on `/support` to render the partner network around Conduction.
+- **HexBackground** — `HexBackground/HexBackground.jsx`. Hex pattern fill primitive.
+- **HexRain** — `HexRain/HexRain.jsx`. The "twelve apps" mini-game in the hero column. Lazy-loads the runtime via Head.
+- **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, MyDash + variants, NLDesign, OpenCatalogi, OpenConnector, OpenRegister, OpenWoo, PipelinQ, Procest, SoftwareCatalog, ZaakAfhandelApp). Each variant lives under `AppMock/variants/`. Specimen: `preview/components/app-mock.html`.
+- **ExternalAppShelf** — `ExternalAppShelf/ExternalAppShelf.jsx`. Third-party-app shelf (Outlook-style, Mattermost, Keycloak, etc.) used on `/connext`. No dedicated specimen.
+- **WidgetShelf** — `WidgetShelf/WidgetShelf.jsx`. Widget showcase grid with eyebrow + title + lede + N-column widget cards. No dedicated specimen.
+- **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`. No dedicated specimen.
+
+## Academy components
+
+Card-and-chrome patterns for academy.conduction.nl. One feed of blogs, guides,
+case studies, webinars, and tutorials, distinguished by a `contentType:`
+frontmatter. Specimen: `preview/components/academy.html`.
+
+- **ContentCard / ContentCardGrid** — `ContentCard/ContentCard.jsx`. The "Keep learning…" card: hex-thumb panel on the left, author byline + title + summary + tag pills on the right. Three column counts, drops to single-column under 700px. Composes HexThumbnail, AuthorByline, Pill.
+- **FeaturedCard** — `FeaturedCard/FeaturedCard.jsx`. Cobalt-900 hero spot with body copy left and a large pointy-top hex flanked by two satellite hexes right. The single KNVB orange satellite is the page's one orange accent (override with `accent="cobalt"` if a screen already burns its orange budget).
+- **ContentTypeFilter** — `ContentTypeFilter/ContentTypeFilter.jsx`. Top-of-page chip row driven by `?type=`. Controlled mode (`value` + `onChange`) or uncontrolled link mode (`hrefForType`). The taxonomy lives in `ContentTypeFilter/contentTypes.js` so chips, card pills, and detail-hero pills all draw from one list.
+- **NewsletterCta** — `NewsletterCta/NewsletterCta.jsx`. Cobalt-50 (or inverse cobalt-900) panel with title, lede, email input, submit, fineprint. Form is unwired by default; pass `action` or `onSubmit` to connect it.
+- **RelatedPosts** — `RelatedPosts/RelatedPosts.jsx`. Bottom-of-detail-page block with a "Keep learning…" heading, a "View all" pill on the right, and a content-card grid below. Accepts `items` for data-driven render or children for hand-composed.
+- **ContentDetailHero** — `ContentDetailHero/ContentDetailHero.jsx`. Header for individual posts. Crumb, content-type chip + tags, h1, summary, author byline, optional duration, then a 16:9 cover region. Distinct from `<DetailHero/>` which is for app/solution/partner pages with a 360px right-side hex.
+
+## Diagram-set web-component wrappers
+
+Thin React wrappers around the framework-agnostic web components in
+`diagrams/`. Lazy-import the runtime, type-checked observed-attribute props,
+slot-based children pass through. All exported from `Diagrams/Diagrams.jsx`.
+
+- **Hex** wraps `<cn-hex>` (color, size, variant, layout, interactive)
+- **HexPrism** wraps `<cn-hex-prism>` (family, size, state)
+- **Platform** wraps `<cn-platform>` (ground)
+- **DomainTree** wraps `<cn-domain-tree>`
+- **DiagramPipeline** wraps `<cn-pipeline>` (renamed from Pipeline to avoid the components/Pipeline name collision)
+- **SideBox** wraps `<cn-side-box>`
+- **HoneycombBg** wraps `<cn-honeycomb-bg>`
+
+## Theme swizzles
+
+- **Navbar** — `theme/Navbar/index.jsx`. Replaces Docusaurus's default Infima navbar. Items come from `themeConfig.navbar`. Switches the wordmark for the ConNext and Common Ground sub-brands via `theme/brand.jsx`.
+- **Footer canal scene** — `theme/Footer/index.jsx`. Full canal scene (Amsterdam trapgevel skyline, kade with bikes/cars, cobalt canal with orange boats, brand block + link grid riding on the water). Templates injected via `dangerouslySetInnerHTML` so the runtime can `.content`-clone them. Re-hydrates on SPA route changes.
+- **MDXPage** — `theme/MDXPage/index.jsx`. Drops the Docusaurus default `col col--8 col--offset-2` wrapper for pages with `hide_table_of_contents: true`, so marketing surfaces render full-width. Adds the `marketing-page` class on `<main>` so `brand.css` can zero-out stray top margins (no gap between navbar and hero).
+
+## Open gaps
+
+Three earlier gaps (PartnerCard.OtherCard variant, diagram-set web component
+wrappers, brand-citation utilities) closed in April–May 2026 and are folded
+into the lists above.
+
+- **Locale switcher integration on the kit's static `landing.html`** — the top-navbar.html ships an NL/EN switcher (querystring driven), but the kit's individual pages don't yet have a translation dictionary so the switch is cosmetic on those pages. The connext site already has full Docusaurus i18n; the kit is one round of NL copy away from full parity.
+- **Static specimen pages for composed components** — `ManagedCommonGround`, `PartnerDirectory`, `WidgetShelf`, `ExternalAppShelf`, `FAQ` ship as React but have no `preview/components/*.html` reference. They're composed from primitives that already have specimens, so the absence is reasonable, but a designer reviewing the kit can't see them outside the live site.
+- **PartnerCard `logoAlt` prop** — accepted but never passed by any current MDX usage. Either drop or document an a11y fallback expectation.
+- **PartnerDirectory `solutions` field** — included in `partners-catalog.js` per partner, never consumed by `<PartnerCard>` (harmless spread). Decide whether to surface (e.g. inside the card) or remove from the data.

package/README.md

@@ -0,0 +1,171 @@
+# @conduction/docusaurus-preset
+
+Brand-default Docusaurus 3 config for Conduction sites. Tokens, theme, navbar, footer, four-locale i18n (nl / en / de / fr), all pre-wired.
+
+## Status
+
+Source lives inside the [design-system monorepo](https://github.com/ConductionNL/design-system); published to npm under the `@conduction` scope as a single package. Install in any product site with `npm i @conduction/docusaurus-preset`. The diagram web-component runtime (`<cn-hex>`, `<cn-platform>`, etc.) ships inside this same package under `@conduction/docusaurus-preset/diagrams` — no separate install needed.
+
+## What it gives you
+
+- **Brand CSS** — tokens (cobalt palette, KNVB orange, Plex Mono, hex clip-paths, Common Ground yellow) auto-applied to Docusaurus's Infima theme variables. Navbar, footer, sidebar, buttons, code blocks all inherit the brand without a single swizzle.
+- **i18n config** — four locales pinned: NL default at the URL root, EN/DE/FR at `/en/`, `/de/`, `/fr/`. `htmlLang` per locale, `trailingSlash: true`, locale dropdown ready.
+- **Brand-default navbar** — locale-dropdown + GitHub link. Sites override `items[]` for site-specific navigation.
+- **Brand-default footer** — three-column link grid + Conduction-tells (KvK, BTW, address). Sites override per page or globally.
+- **Sensible defaults** — `trailingSlash`, `onBrokenLinks: 'warn'`, `respectPrefersColorScheme`, dark-mode brand mapping.
+
+## Usage
+
+```js
+// docusaurus.config.js
+const { createConfig } = require('@conduction/docusaurus-preset');
+
+module.exports = createConfig({
+  title: 'Conduction',
+  tagline: 'Open-source apps for the Nextcloud workspace.',
+  url: 'https://conduction.nl',
+  baseUrl: '/',
+  organizationName: 'ConductionNL',
+  projectName: 'design-system',
+
+  // Optional overrides
+  navbar: {
+    items: [
+      { to: '/docs/intro', label: 'Docs', position: 'left' },
+      { to: '/blog', label: 'Blog', position: 'left' },
+      // brand-default items (locale dropdown, GitHub) are merged in
+    ],
+  },
+
+  // Site-specific CSS appended after brand.css
+  customCss: ['./src/css/site.css'],
+});
+```
+
+The function returns a complete Docusaurus config with brand defaults pre-applied. Override any field by passing it in or merging after.
+
+## API
+
+`createConfig(opts)` — returns a Docusaurus config object.
+
+| Option | Required | Default | Purpose |
+| --- | --- | --- | --- |
+| `title` | ✓ | — | Site title (also used as the navbar title and footer reference). |
+| `tagline` |  | `''` | Site tagline. |
+| `url` | ✓ | — | Production URL, e.g. `https://connext.conduction.nl`. |
+| `baseUrl` |  | `'/'` | Path under the URL. Almost always `/` since each site has its own subdomain. |
+| `favicon` |  | `'img/favicon.svg'` | Favicon path under `static/`. |
+| `organizationName` |  | `'ConductionNL'` | GitHub org. |
+| `projectName` |  | `'design-system'` | GitHub repo. |
+| `i18n` |  | nl / en / de / fr, NL default | Override the brand-default i18n block. |
+| `navbar` |  | locale dropdown + GitHub | Merged into the brand-default navbar object. |
+| `footer` |  | three-column link grid | Replaces the brand-default footer. |
+| `customCss` |  | `[]` | Site-specific CSS, appended to `brand.css`. |
+| `presets` |  | `[['classic', …]]` | Replaces the default preset list. |
+| `plugins` |  | `[]` | Docusaurus plugins. |
+| `themeConfig` |  | `{}` | Merged into the brand-default `themeConfig`. |
+| `editUrl` |  | undefined | Edit-this-doc link. |
+| `blog` |  | enabled | Set `false` to disable the blog plugin. |
+
+Also exported: `I18N`, `baseNavbar(siteName)`, `baseFooter()` for sites that want to compose manually.
+
+## Brand CSS exports
+
+| Path | Purpose |
+| --- | --- |
+| `@conduction/docusaurus-preset/css/brand.css` | The default. Imported by `createConfig()` automatically. |
+| `@conduction/docusaurus-preset/css/tokens.css` | Just the tokens, no Infima mapping. Use if you swizzle the entire theme. |
+
+## OpenCatalogi content plugin
+
+A future `@conduction/docusaurus-plugin-opencatalogi` will pull pages from a Nextcloud OpenCatalogi register at build time. The shape:
+
+```js
+// docusaurus.config.js
+module.exports = createConfig({
+  title: 'Conduction',
+  url: 'https://conduction.nl',
+  plugins: [
+    [
+      '@conduction/docusaurus-plugin-opencatalogi',
+      {
+        // Where to fetch from (production: a public read-only API; local: localhost)
+        apiUrl: process.env.OPENCATALOGI_URL || 'http://localhost:8080/index.php/apps/openregister/api',
+        register: 'connext-content',
+        schema: 'page',
+        // Where to drop the generated Markdown
+        output: 'i18n/{locale}/docusaurus-plugin-content-pages',
+        // Pull translations per locale; fall back to defaultLocale where missing
+        locales: ['nl', 'en', 'de', 'fr'],
+      },
+    ],
+  ],
+});
+```
+
+The plugin runs during `docusaurus build`, fetches OpenCatalogi objects, writes Markdown files per locale into the i18n folders, and Docusaurus picks them up as if they were committed. End result: editors update content in the Nextcloud OpenCatalogi UI, push triggers a build, the static site is regenerated. No runtime API calls; the production site stays a static deploy.
+
+That plugin is not yet built. Until it lands, sites use plain Markdown in `docs/` and `i18n/<locale>/`.
+
+## Local development against a local Nextcloud
+
+Once the OpenCatalogi plugin is built, the dev workflow becomes:
+
+```bash
+# Start the local Nextcloud (Conduction's docker-compose dev environment)
+cd ~/nextcloud-docker-dev && docker compose up -d
+
+# Start Docusaurus, pointing at localhost:8080
+cd ~/.../sites/www
+OPENCATALOGI_URL=http://localhost:8080/index.php/apps/openregister/api npm start
+```
+
+`npm start` runs Docusaurus's hot-reload dev server. The plugin re-fetches on each rebuild so editing in the Nextcloud UI shows up after a save.
+
+## Consume from a product site
+
+```bash
+npm i @conduction/docusaurus-preset @docusaurus/core @docusaurus/preset-classic react react-dom
+```
+
+Then use `createConfig()` in your `docusaurus.config.js` as shown in [Usage](#usage) above. The diagram web components register themselves on the client when `<Hero/>` or `<Diagrams/>` mount — no extra import needed in MDX. To register them eagerly (e.g. for a docs page that uses `<cn-hex>` directly without a wrapper), import the runtime module:
+
+```js
+// site src/clientModules/diagrams.js
+import '@conduction/docusaurus-preset/diagrams';
+```
+
+This is how product sites such as `mydash.conduction.nl/docs/...` adopt the brand without copying CSS or theme code, and stay in sync as the design-system evolves.
+
+## Releasing
+
+Releases are tag-triggered. Pushing a tag `vX.Y.Z` runs [.github/workflows/publish-packages.yml](../.github/workflows/publish-packages.yml), which publishes `@conduction/docusaurus-preset` to npm under the `@conduction` scope. The diagram primitives ship inside the same tarball under `src/diagrams/`, so there is exactly one npm release per tag.
+
+**One-time setup** (per repo, since Conduction keeps secrets repo-local):
+
+1. Sign in to npm with an account that's a member of the `@conduction` org and has publish rights on the scope. (`npm login` from the CLI, or via [npmjs.com](https://www.npmjs.com/login).)
+2. Create an automation token under your *user* settings (npm tokens are user-level, not org-level): npmjs.com → avatar dropdown → "Access Tokens" → "Generate New Token" → **Automation**. Copy the value.
+3. Add it as a repo secret: <https://github.com/ConductionNL/design-system/settings/secrets/actions> → "New repository secret" → name `NPM_TOKEN`, paste the token.
+4. (Optional) Verify the workflow with a dry run: Actions → "Publish packages" → Run workflow → leave "dry_run" checked. Watch for `+ @conduction/docusaurus-preset@…` in the logs without an actual upload.
+
+The token publishes **on behalf of the user account**, not the org, so anyone with the right org-level permission can generate the token. Rotate by replacing the secret; no need to redeploy or amend the workflow.
+
+**Per release:**
+
+```bash
+# Bump the preset version. The diagrams source ships inside the preset,
+# so there is one version to bump and one tag to push.
+$EDITOR docusaurus-preset/package.json   # "version": "0.2.0"
+
+git add docusaurus-preset/package.json
+git commit -m "Bump @conduction/docusaurus-preset to 0.2.0"
+git tag v0.2.0
+git push origin main
+git push origin v0.2.0   # this triggers the publish workflow
+```
+
+The workflow runs `npm publish --workspace @conduction/docusaurus-preset --access public`. Watch the run on the Actions tab. If it fails, fix the issue, bump the patch (`0.2.1`), re-tag — npm rejects re-publishing the same version.
+
+## License
+
+EUPL-1.2 + MIT.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@conduction/docusaurus-preset",
+  "version": "0.1.0",
+  "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",
+  "exports": {
+    ".": "./src/index.js",
+    "./components": "./src/components/index.js",
+    "./data": "./src/data/app-downloads.js",
+    "./css/brand.css": "./src/css/brand.css",
+    "./css/tokens.css": "./src/css/tokens.css",
+    "./theme": "./src/theme.js",
+    "./diagrams": "./src/diagrams/index.js",
+    "./diagrams/cn-hex": "./src/diagrams/cn-hex.js",
+    "./diagrams/cn-hex-prism": "./src/diagrams/cn-hex-prism.js",
+    "./diagrams/cn-platform": "./src/diagrams/cn-platform.js",
+    "./diagrams/cn-domain-tree": "./src/diagrams/cn-domain-tree.js",
+    "./diagrams/cn-pipeline": "./src/diagrams/cn-pipeline.js",
+    "./diagrams/cn-side-box": "./src/diagrams/cn-side-box.js",
+    "./diagrams/cn-honeycomb-bg": "./src/diagrams/cn-honeycomb-bg.js"
+  },
+  "files": [
+    "src/",
+    "static/",
+    "README.md",
+    "MISSING_COMPONENTS.md"
+  ],
+  "keywords": [
+    "conduction",
+    "connext",
+    "docusaurus",
+    "docusaurus-preset",
+    "design-system",
+    "diagrams",
+    "web-components",
+    "hex",
+    "nextcloud"
+  ],
+  "peerDependencies": {
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "EUPL-1.2",
+  "author": "Conduction <info@conduction.nl>",
+  "homepage": "https://design-system.conduction.nl/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ConductionNL/design-system.git",
+    "directory": "docusaurus-preset"
+  },
+  "bugs": {
+    "url": "https://github.com/ConductionNL/design-system/issues"
+  }
+}

package/src/components/AgentTrace/AgentTrace.jsx

@@ -0,0 +1,128 @@
+/**
+ * <AgentTrace />
+ *
+ * Fake terminal log of an AI agent doing work. Reference: the dark
+ * terminal block on honeycomb.io's hero showing a Claude-style tool
+ * trace ("Found the root cause", "honeycomb - run_query (MCP)…",
+ * "Pollinating..."). Translated to Conduction tokens: cobalt-900
+ * background, white body text, KNVB-orange status, cobalt-200/400
+ * ghosted continuation lines, mint-300 success, lavender-300 tool
+ * names. Monospace throughout.
+ *
+ * The component is presentational only — it doesn't run anything.
+ * Pass it a list of lines and it renders them with the right
+ * indentation, bullets, and colour. Optional cursor + bottom mode
+ * strip mirror the Claude CLI footer.
+ *
+ * Used wherever a marketing surface needs to *show* what an agent
+ * does without embedding a real screencap. Pairs well with
+ * <AppMock> on the same page (the agent log is the "behind the
+ * scenes", the AppMock is the "what the user sees").
+ *
+ * Usage in MDX:
+ *
+ *   <AgentTrace
+ *     lines={[
+ *       { kind: 'expand',     text: '+65 lines (expand)' },
+ *       { kind: 'continuation', text: 'input: "latency errors", dataset_slug: "frontend") , max_queries: 15)' },
+ *       { kind: 'note',  bullet: 'done', text: 'Found the root cause. Reading more to understand the issue.' },
+ *       { kind: 'tool',  text: 'openconnector - run_pipeline (MCP)(register_slug: "zaak", limit: 50)' },
+ *       { kind: 'expand',     text: '+38 lines (ctrl+o to expand)' },
+ *       { kind: 'note',  bullet: 'info', text: 'Reading register…', muted: '(ctrl+o to expand)' },
+ *       { kind: 'status', text: 'Synthesising…' },
+ *     ]}
+ *     cursor
+ *     mode="accept edits on (shift+tab to cycle)"
+ *   />
+ *
+ * Props:
+ *   - lines: list of `{kind, text, bullet?, muted?, indent?}` rows.
+ *     - kind 'expand'       → muted "+N lines" expandable marker
+ *     - kind 'continuation' → indented muted continuation of the
+ *                              previous tool call line
+ *     - kind 'note'         → primary line with optional bullet:
+ *                              'done' (white), 'info' (workspace-blue),
+ *                              'orange' (KNVB), 'mint' (mint-300)
+ *     - kind 'tool'         → tool-call line, lavender accented
+ *     - kind 'status'       → KNVB-orange "ing…" status line
+ *   - cursor:    boolean — render a blinking cursor at the bottom
+ *   - mode:      string — bottom strip caption ("accept edits on…")
+ */
+
+import React from 'react';
+import styles from './AgentTrace.module.css';
+
+function bulletClass(b) {
+  switch (b) {
+    case 'done':   return styles.bDone;
+    case 'info':   return styles.bInfo;
+    case 'orange': return styles.bOrange;
+    case 'mint':   return styles.bMint;
+    default:       return styles.bDone;
+  }
+}
+
+export default function AgentTrace({lines = [], cursor = false, mode, className}) {
+  return (
+    <div className={[styles.trace, className].filter(Boolean).join(' ')} role="img" aria-label="Agent trace">
+      <div className={styles.body}>
+        {lines.map((ln, i) => {
+          const indent = ln.indent ? {paddingLeft: `${ln.indent * 18}px`} : undefined;
+          if (ln.kind === 'expand') {
+            return (
+              <div key={i} className={[styles.line, styles.expand].join(' ')} style={indent}>
+                <span className={styles.expandRail} aria-hidden="true">└</span>
+                <span className={styles.muted}>{ln.text}</span>
+              </div>
+            );
+          }
+          if (ln.kind === 'continuation') {
+            return (
+              <div key={i} className={[styles.line, styles.continuation].join(' ')} style={indent}>
+                <span className={styles.continuationText}>{ln.text}</span>
+              </div>
+            );
+          }
+          if (ln.kind === 'tool') {
+            return (
+              <div key={i} className={[styles.line, styles.tool].join(' ')} style={indent}>
+                <span className={[styles.bullet, styles.bDone].join(' ')} aria-hidden="true">•</span>
+                <span className={styles.toolText}>{ln.text}</span>
+              </div>
+            );
+          }
+          if (ln.kind === 'status') {
+            return (
+              <div key={i} className={[styles.line, styles.status].join(' ')} style={indent}>
+                <span className={[styles.bullet, styles.bOrange].join(' ')} aria-hidden="true">•</span>
+                <span className={styles.statusText}>{ln.text}<span className={styles.dots} aria-hidden="true">...</span></span>
+              </div>
+            );
+          }
+          /* default: 'note' */
+          return (
+            <div key={i} className={[styles.line, styles.note].join(' ')} style={indent}>
+              <span className={[styles.bullet, bulletClass(ln.bullet)].join(' ')} aria-hidden="true">•</span>
+              <span className={styles.noteText}>
+                {ln.text}
+                {ln.muted && <span className={styles.muted}> {ln.muted}</span>}
+              </span>
+            </div>
+          );
+        })}
+        {cursor && (
+          <div className={[styles.line, styles.cursorLine].join(' ')}>
+            <span className={styles.prompt}>&gt;</span>
+            <span className={styles.cursor} aria-hidden="true"></span>
+          </div>
+        )}
+      </div>
+      {mode && (
+        <div className={styles.modeBar}>
+          <span className={styles.modeArrow} aria-hidden="true">&gt;&gt;</span>
+          <span className={styles.modeText}>{mode}</span>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,115 @@
+/**
+ * <AgentTrace /> styles. Cobalt-900 terminal panel with monospace
+ * lines and Claude-CLI-style coloured bullets.
+ */
+
+.trace {
+  background: var(--c-cobalt-900);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6) var(--space-7) 0;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 14px;
+  line-height: 1.6;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  box-shadow: var(--shadow-3);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding-bottom: var(--space-5);
+}
+
+.line {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  font-feature-settings: "calt" 0;
+}
+
+/* Bullets — set inline-block so the gap works the same across kinds. */
+.bullet {
+  display: inline-block;
+  width: 12px;
+  flex-shrink: 0;
+  text-align: center;
+  font-weight: 700;
+  line-height: inherit;
+}
+.bDone   { color: white; }
+.bInfo   { color: var(--c-workspace-300); }
+.bOrange { color: var(--c-orange-knvb); }
+.bMint   { color: var(--c-mint-300); }
+
+/* Note — primary, white text. */
+.noteText { color: white; }
+
+/* Tool — lavender accent. */
+.toolText { color: var(--c-lavender-300); }
+
+/* Status — orange, with animated dots. */
+.statusText { color: var(--c-orange-knvb); }
+.dots {
+  display: inline-block;
+  margin-left: 2px;
+  animation: dots 1400ms steps(4, end) infinite;
+  white-space: pre;
+  overflow: hidden;
+  vertical-align: bottom;
+  width: 1.2em;
+}
+@keyframes dots {
+  0%   { width: 0; }
+  25%  { width: 0.4em; }
+  50%  { width: 0.8em; }
+  75%  { width: 1.2em; }
+  100% { width: 1.2em; }
+}
+
+/* Expand marker — gray rail + muted text. */
+.expand { color: var(--c-cobalt-200); }
+.expandRail {
+  display: inline-block;
+  width: 12px;
+  color: var(--c-cobalt-300);
+  flex-shrink: 0;
+  text-align: center;
+}
+.muted { color: var(--c-cobalt-200); }
+
+/* Continuation — indented under a tool call, lighter than primary. */
+.continuation { padding-left: 30px; }
+.continuationText { color: var(--c-cobalt-100); }
+
+/* Cursor */
+.cursorLine { color: var(--c-cobalt-300); margin-top: var(--space-2); }
+.prompt { color: var(--c-cobalt-300); margin-right: 6px; }
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 14px;
+  background: white;
+  vertical-align: -2px;
+  animation: blink 1100ms steps(2, end) infinite;
+}
+@keyframes blink {
+  0%, 50%   { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Mode strip at the bottom — separator + caption ("accept edits on…"). */
+.modeBar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--c-cobalt-200);
+  font-size: 13px;
+}
+.modeArrow { color: var(--c-cobalt-300); }
+.modeText  { color: var(--c-cobalt-200); }