@conduction/docusaurus-preset 2.8.1 → 2.10.0

package/MISSING_COMPONENTS.md

@@ -90,6 +90,8 @@ slot-based children pass through. All exported from `Diagrams/Diagrams.jsx`.
 - **DiagramPipeline** wraps `<cn-pipeline>` (renamed from Pipeline to avoid the components/Pipeline name collision)
 - **SideBox** wraps `<cn-side-box>`
 - **HoneycombBg** wraps `<cn-honeycomb-bg>`
+- **Pair** wraps `<cn-pair>` (leftLabel, leftCaption, leftColor, rightLabel, rightCaption, rightColor, bridgeLabel, arrow). Two systems linked by an orange arrow; the integration-page headline diagram. Owns the one-orange-per-scene budget. Extracted 2026-05-13 from the `.pair-banner` pattern in `preview/product-pages/integrations.html`.
+- **ArchFlow** wraps `<cn-arch-flow>` (arrow: right | down | none). One row of a request-flow / architecture diagram. Child elements style themselves by attribute (`accent` solid cobalt, `hex` orange pointy-top, `muted` half-opacity). Stack multiple rows for a multi-layer system view. Extracted 2026-05-13 from the `.arch-diagram` pattern in `preview/product-pages/technical-docs.html`.
 
 ## Theme swizzles
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "2.8.1",
+  "version": "2.10.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },
@@ -21,7 +21,9 @@
     "./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"
+    "./diagrams/cn-honeycomb-bg": "./src/diagrams/cn-honeycomb-bg.js",
+    "./diagrams/cn-pair": "./src/diagrams/cn-pair.js",
+    "./diagrams/cn-arch-flow": "./src/diagrams/cn-arch-flow.js"
   },
   "files": [
     "src/",

package/src/components/DetailHero/DetailHero.jsx

@@ -45,11 +45,25 @@
  */
 
 import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import HexBullet from '../primitives/HexBullet';
 import Button from '../primitives/Button';
+import {deriveStability} from '../../theme/brand.jsx';
 import {downloadsForApp, formatDownloads} from '../../data/app-downloads';
 import styles from './DetailHero.module.css';
 
+/**
+ * Per-stability hex-bullet colour. Keeps the hero badge and the
+ * navbar pill on the same maturity story without each site having
+ * to pass a colour explicitly.
+ */
+const STABILITY_COLORS = {
+  Stable: 'var(--c-mint-500)',
+  Beta:   'var(--c-orange-knvb)',
+  RC:     'var(--c-blue-cobalt)',
+  Alpha:  'var(--c-red-vermillion)',
+};
+
 export default function DetailHero({
   crumb,
   status,
@@ -76,6 +90,23 @@ export default function DetailHero({
      existing on-cream rendering used by connext apps detail pages. */
   const bgClass = background === 'cobalt' ? styles.bgCobalt : null;
 
+  /* Reconcile the hero's badge row with the navbar version pill so
+     they can't drift apart. When the caller doesn't pass `version`
+     and/or `status` props, fall back to the same customFields.appVersion
+     the navbar reads, and auto-derive Stable/Beta/RC/Alpha from the
+     SemVer string via deriveStability(). Sites can still pass explicit
+     props to override (e.g. a static-site demo that wants to show
+     "Preview" instead of the auto-derived label). */
+  const {siteConfig} = useDocusaurusContext();
+  const appVersion = siteConfig?.customFields?.appVersion;
+  const resolvedVersion = version || (appVersion ? `v${appVersion}` : undefined);
+  const resolvedStatus = status || (appVersion
+    ? {
+        label: deriveStability(appVersion),
+        color: STABILITY_COLORS[deriveStability(appVersion)],
+      }
+    : undefined);
+
   return (
     <section className={[styles.head, hasIllustration && styles.withIllustration, bgClass, className].filter(Boolean).join(' ')}>
       {crumb && Array.isArray(crumb) && (
@@ -99,15 +130,15 @@ export default function DetailHero({
 
       <div className={styles.headInner}>
         <div className={styles.copy}>
-          {(status || version || locales || dlCount > 0) && (
+          {(resolvedStatus || resolvedVersion || locales || dlCount > 0) && (
             <div className={styles.badgeRow}>
-              {status && (
+              {resolvedStatus && (
                 <span className={styles.badge}>
-                  <HexBullet size="md" color={status.color || 'var(--c-mint-500)'} />
-                  {status.label}
+                  <HexBullet size="md" color={resolvedStatus.color || STABILITY_COLORS[resolvedStatus.label] || 'var(--c-mint-500)'} />
+                  {resolvedStatus.label}
                 </span>
               )}
-              {version && <span className={[styles.badge, styles.versionBadge].join(' ')}>{version}</span>}
+              {resolvedVersion && <span className={[styles.badge, styles.versionBadge].join(' ')}>{resolvedVersion}</span>}
               {locales && <span className={[styles.badge, styles.versionBadge].join(' ')}>{locales}</span>}
               {dlCount > 0 && (
                 <span

package/src/components/Diagrams/Diagrams.jsx

@@ -146,3 +146,48 @@ export function HoneycombBg(props) {
   useDiagramRuntime();
   return <cn-honeycomb-bg {...props} />;
 }
+
+/* ============================================================
+   <Pair /> wraps <cn-pair>
+   Two systems linked by an orange arrow. Attribute names are
+   camelCase in React, converted to dashed on the element.
+   ============================================================ */
+export function Pair({
+  leftLabel, leftCaption, leftColor,
+  rightLabel, rightCaption, rightColor,
+  bridgeLabel, arrow,
+  children, ...rest
+}) {
+  useDiagramRuntime();
+  return (
+    <cn-pair
+      {...attrs({
+        'left-label':    leftLabel,
+        'left-caption':  leftCaption,
+        'left-color':    leftColor,
+        'right-label':   rightLabel,
+        'right-caption': rightCaption,
+        'right-color':   rightColor,
+        'bridge-label':  bridgeLabel,
+        arrow,
+      })}
+      {...rest}
+    >
+      {children}
+    </cn-pair>
+  );
+}
+
+/* ============================================================
+   <ArchFlow /> wraps <cn-arch-flow>
+   One row of an architecture diagram. Children with `accent`,
+   `hex`, or `muted` attributes are styled by the web component.
+   ============================================================ */
+export function ArchFlow({arrow, children, ...rest}) {
+  useDiagramRuntime();
+  return (
+    <cn-arch-flow {...attrs({arrow})} {...rest}>
+      {children}
+    </cn-arch-flow>
+  );
+}

package/src/components/PlatformDiagram/PlatformDiagram.jsx

@@ -87,6 +87,7 @@ export default function PlatformDiagram({workspace, lists = [], flows = []}) {
                 name={item.name}
                 meta={item.meta}
                 desc={item.desc}
+                href={item.href}
                 brand-color={item.brandColor}
               >
                 {item.icon}

package/src/components/index.js

@@ -58,11 +58,12 @@ export {default as CookieCli} from './CookieCli/CookieCli.jsx';
 export {default as GameModal} from './GameModal/GameModal.jsx';
 
 /* Diagram-set web-component React wrappers (cn-hex, cn-hex-prism,
-   cn-platform, cn-domain-tree, cn-pipeline, cn-side-box, cn-honeycomb-bg).
-   Type-checked, autocompletable React surface for the framework-agnostic
-   diagram set in @conduction/diagrams. The bare web components still
-   work in plain HTML; the wrappers are the React-friendly version. */
-export {Hex, HexPrism, Platform, DomainTree, DiagramPipeline, SideBox, HoneycombBg} from './Diagrams/Diagrams.jsx';
+   cn-platform, cn-domain-tree, cn-pipeline, cn-side-box, cn-honeycomb-bg,
+   cn-pair, cn-arch-flow). Type-checked, autocompletable React surface
+   for the framework-agnostic diagram set in @conduction/diagrams. The
+   bare web components still work in plain HTML; the wrappers are the
+   React-friendly version. */
+export {Hex, HexPrism, Platform, DomainTree, DiagramPipeline, SideBox, HoneycombBg, Pair, ArchFlow} from './Diagrams/Diagrams.jsx';
 export {default as ComposeBlock} from './ComposeBlock/ComposeBlock.jsx';
 export {default as AppsGrid} from './AppsGrid/AppsGrid.jsx';
 export {default as AppMock} from './AppMock/AppMock.jsx';

package/src/data/apps-registry.js

@@ -32,7 +32,6 @@ export const APPS_REGISTRY = {
   openconnector:   {slug: 'openconnector',   name: 'OpenConnector',    productHref: '/apps/openconnector',   docsHref: 'https://docs.conduction.nl/openconnector',   academyHref: '/academy?app=openconnector'},
   docudesk:        {slug: 'docudesk',        name: 'DocuDesk',         productHref: '/apps/docudesk',        docsHref: 'https://docs.conduction.nl/docudesk',        academyHref: '/academy?app=docudesk'},
   mydash:          {slug: 'mydash',          name: 'MyDash',           productHref: '/apps/mydash',          docsHref: 'https://docs.conduction.nl/mydash',          academyHref: '/academy?app=mydash'},
-  openwoo:         {slug: 'openwoo',         name: 'OpenWoo',          productHref: '/apps/openwoo',         docsHref: 'https://docs.conduction.nl/openwoo',         academyHref: '/academy?app=openwoo'},
   zaakafhandelapp: {slug: 'zaakafhandelapp', name: 'ZaakAfhandelApp',  productHref: '/apps/zaakafhandelapp', docsHref: 'https://docs.conduction.nl/zaakafhandelapp', academyHref: '/academy?app=zaakafhandelapp'},
   pipelinq:        {slug: 'pipelinq',        name: 'PipelinQ',         productHref: '/apps/pipelinq',        docsHref: 'https://docs.conduction.nl/pipelinq',        academyHref: '/academy?app=pipelinq'},
   procest:         {slug: 'procest',         name: 'Procest',          productHref: '/apps/procest',         docsHref: 'https://docs.conduction.nl/procest',         academyHref: '/academy?app=procest'},
@@ -40,6 +39,10 @@ export const APPS_REGISTRY = {
   softwarecatalog: {slug: 'softwarecatalog', name: 'SoftwareCatalog',  productHref: '/apps/softwarecatalog', docsHref: 'https://docs.conduction.nl/softwarecatalog', academyHref: '/academy?app=softwarecatalog'},
   larpingapp:      {slug: 'larpingapp',      name: 'LarpingApp',       productHref: '/apps/larpingapp',      docsHref: 'https://docs.conduction.nl/larpingapp',      academyHref: '/academy?app=larpingapp'},
   nldesign:        {slug: 'nldesign',        name: 'NLDesign',         productHref: '/apps/nldesign',        docsHref: 'https://docs.conduction.nl/nldesign',        academyHref: '/academy?app=nldesign'},
+  shillinq:        {slug: 'shillinq',        name: 'Shillinq',         productHref: '/apps/shillinq',        docsHref: 'https://docs.conduction.nl/shillinq',        academyHref: '/academy?app=shillinq'},
+  openbuilt:       {slug: 'openbuilt',       name: 'OpenBuilt',        productHref: '/apps/openbuilt',       docsHref: 'https://docs.conduction.nl/openbuilt',       academyHref: '/academy?app=openbuilt'},
+  doriath:         {slug: 'doriath',         name: 'Doriath',          productHref: '/apps/doriath',         docsHref: 'https://docs.conduction.nl/doriath',         academyHref: '/academy?app=doriath'},
+  'app-versions':  {slug: 'app-versions',    name: 'App Versions',     productHref: '/apps/app-versions',    docsHref: 'https://docs.conduction.nl/app-versions',    academyHref: '/academy?app=app-versions'},
 };
 
 export const APP_SLUGS = Object.keys(APPS_REGISTRY);

package/src/diagrams/cn-arch-flow.js

@@ -0,0 +1,168 @@
+/**
+ * <cn-arch-flow> — a single row of an architecture diagram.
+ *
+ * The "Request flow" pattern from preview/product-pages/technical-docs.html.
+ * One row of boxes connected by arrows, where one box is solid cobalt
+ * (the "owned by us" node) and at most one is an orange pointy-top hex
+ * (the validator or attention node). Stack multiple <cn-arch-flow>s for
+ * a multi-layer system diagram.
+ *
+ *   <cn-arch-flow arrow="right">
+ *     <span>Client</span>
+ *     <span accent>API layer</span>
+ *     <span hex>Validator</span>
+ *   </cn-arch-flow>
+ *   <cn-arch-flow arrow="down">
+ *     <span>Schema registry</span>
+ *     <span accent>Storage adapter</span>
+ *     <span>Audit log</span>
+ *   </cn-arch-flow>
+ *   <cn-arch-flow arrow="none">
+ *     <span>Nextcloud DB</span>
+ *     <span>MySQL</span>
+ *     <span>PostgreSQL</span>
+ *     <span>MongoDB</span>
+ *     <span muted>…</span>
+ *   </cn-arch-flow>
+ *
+ * Arrows are auto-inserted between consecutive children (skip with
+ * arrow="none"). Each child is styled by its attributes — no class
+ * names needed.
+ *
+ * Slots
+ *   default  — row members, in order. Auto-numbered to interleave
+ *              arrows between them in the shadow DOM.
+ *
+ * Attributes
+ *   arrow    — right | down | none   (default: right)
+ *
+ * Child attributes (set on the slotted elements, not on cn-arch-flow)
+ *   accent   — solid cobalt fill, white text. The "system" node.
+ *   hex      — orange pointy-top hex. Use once per scene; this is the
+ *              one-orange-per-scene knob for the diagram.
+ *   muted    — opacity 0.5; for "and more" / out-of-scope placeholders.
+ */
+
+class CnArchFlow extends HTMLElement {
+  static get observedAttributes() { return ['arrow']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+    this._observer = new MutationObserver(() => this.render());
+    this._observer.observe(this, { childList: true, attributes: true, subtree: true });
+  }
+
+  disconnectedCallback() {
+    if (this._observer) this._observer.disconnect();
+  }
+
+  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
+
+  render() {
+    const arrow = this.getAttribute('arrow') || 'right';
+    const nodes = [...this.children];
+    nodes.forEach((el, i) => { el.setAttribute('slot', `node-${i}`); });
+
+    const arrowGlyph = arrow === 'down' ? '↓' : '→';
+    const showArrows = arrow !== 'none';
+
+    let rowMarkup = '';
+    for (let i = 0; i < nodes.length; i++) {
+      rowMarkup += `<slot name="node-${i}"></slot>`;
+      if (showArrows && i < nodes.length - 1) {
+        rowMarkup += `<span class="arrow" aria-hidden="true">${arrowGlyph}</span>`;
+      }
+    }
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+        }
+
+        .panel {
+          background: var(--c-cobalt-50);
+          border: 1px solid var(--c-cobalt-100);
+          border-radius: var(--radius-md);
+          padding: var(--space-6);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: var(--space-3);
+          flex-wrap: wrap;
+          font-size: 11px;
+          text-align: center;
+        }
+
+        .arrow {
+          color: var(--c-cobalt-400);
+          font-size: 16px;
+          flex-shrink: 0;
+        }
+
+        /* Default node: white rounded box with cobalt-200 border. */
+        ::slotted(*) {
+          flex: 1 1 0;
+          min-width: 80px;
+          padding: var(--space-3) var(--space-2);
+          background: white;
+          border: 1px solid var(--c-cobalt-200);
+          border-radius: var(--radius-sm);
+          color: var(--c-cobalt-800);
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 11px;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          min-height: 38px;
+        }
+
+        /* accent: the "system" node — solid cobalt brand fill. */
+        ::slotted([accent]) {
+          background: var(--c-blue-cobalt);
+          color: white;
+          border-color: var(--c-blue-cobalt);
+        }
+
+        /* hex: the orange pointy-top hex. The one-orange-per-scene knob.
+         * Replaces the rectangle entirely with a clip-pathed shape so the
+         * brand rule (hexes never rotate, always pointy-top) holds. */
+        ::slotted([hex]) {
+          flex: 0 0 auto;
+          width: 64px;
+          min-width: 0;
+          height: 74px;
+          padding: 0;
+          background: var(--c-orange-knvb);
+          color: white;
+          border: 0;
+          border-radius: 0;
+          clip-path: var(--hex-pointy-top);
+          font-weight: 600;
+          font-size: 12px;
+        }
+
+        /* muted: out-of-scope / "and more" placeholder. */
+        ::slotted([muted]) {
+          opacity: 0.5;
+        }
+      </style>
+
+      <div class="panel">${rowMarkup}</div>
+    `;
+  }
+}
+
+if (!customElements.get('cn-arch-flow')) {
+  customElements.define('cn-arch-flow', CnArchFlow);
+}
+
+export { CnArchFlow };

package/src/diagrams/cn-pair.js

@@ -0,0 +1,192 @@
+/**
+ * <cn-pair> — two systems linked by a bridge, with one orange arrow.
+ *
+ * The "system A talks to system B" diagram. Used at the top of every
+ * integration / connector page where the relationship between two
+ * systems is the headline. Extracted from the .pair-banner pattern
+ * in preview/product-pages/integrations.html.
+ *
+ *   <cn-pair
+ *     left-label="Open Register"
+ *     left-caption="nextcloud.example"
+ *     right-label="xWiki"
+ *     right-caption="xwiki.example"
+ *     right-color="cobalt-700"
+ *     bridge-label="OpenConnector integration">
+ *     <svg slot="left-icon" viewBox="0 0 24 24">...</svg>
+ *     <svg slot="right-icon" viewBox="0 0 24 24">...</svg>
+ *   </cn-pair>
+ *
+ * The bridge arrow is always KNVB orange — this component owns the
+ * "one orange per scene" budget for the page. Don't place a second
+ * <cn-pair> or a <cn-hex color="orange"> on the same screen.
+ *
+ * Slots
+ *   left-icon   — SVG for the left hex (24×24 viewBox, currentColor stroke)
+ *   right-icon  — SVG for the right hex
+ *
+ * Attributes
+ *   left-label, right-label       — strong text under each hex
+ *   left-caption, right-caption   — optional Plex Mono code-style caption
+ *   left-color, right-color       — cobalt | cobalt-700 | nextcloud | commonground
+ *                                   default: cobalt (left), cobalt-700 (right)
+ *   bridge-label                  — text under the orange arrow
+ *   arrow                         — glyph to render (default: ↔)
+ */
+
+const COLOR_MAP = {
+  'cobalt':       'var(--c-blue-cobalt)',
+  'cobalt-700':   'var(--c-cobalt-700)',
+  'cobalt-900':   'var(--c-cobalt-900)',
+  'nextcloud':    'var(--c-nextcloud-blue)',
+  'commonground': 'var(--c-commonground-yellow)',
+  'mint':         'var(--c-mint-500)',
+  'lavender':     'var(--c-lavender-500)',
+};
+
+class CnPair extends HTMLElement {
+  static get observedAttributes() {
+    return [
+      'left-label', 'left-caption', 'left-color',
+      'right-label', 'right-caption', 'right-color',
+      'bridge-label', 'arrow',
+    ];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() { this.render(); }
+  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
+
+  render() {
+    const leftLabel    = this.getAttribute('left-label')   || '';
+    const leftCaption  = this.getAttribute('left-caption') || '';
+    const leftColorKey = this.getAttribute('left-color')   || 'cobalt';
+    const rightLabel   = this.getAttribute('right-label')   || '';
+    const rightCaption = this.getAttribute('right-caption') || '';
+    const rightColorKey= this.getAttribute('right-color')   || 'cobalt-700';
+    const bridgeLabel  = this.getAttribute('bridge-label') || '';
+    const arrow        = this.getAttribute('arrow') || '↔';
+
+    const leftBg  = COLOR_MAP[leftColorKey]  || COLOR_MAP.cobalt;
+    const rightBg = COLOR_MAP[rightColorKey] || COLOR_MAP['cobalt-700'];
+
+    /* Common Ground yellow needs cobalt-900 ink for WCAG AA. Every
+       other supported fill takes white. */
+    const leftInk  = leftColorKey  === 'commonground' ? 'var(--c-cobalt-900)' : 'white';
+    const rightInk = rightColorKey === 'commonground' ? 'var(--c-cobalt-900)' : 'white';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--conduction-typography-font-family-body, system-ui, sans-serif);
+        }
+
+        .panel {
+          display: grid;
+          grid-template-columns: 1fr auto 1fr;
+          align-items: center;
+          gap: var(--space-5);
+          padding: var(--space-6);
+          background: var(--c-cobalt-50);
+          border-radius: var(--radius-md);
+        }
+
+        .side {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: var(--space-2);
+          text-align: center;
+        }
+
+        .hex {
+          width: 64px;
+          height: 74px;
+          clip-path: var(--hex-pointy-top);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .hex.left  { background: ${leftBg};  color: ${leftInk};  }
+        .hex.right { background: ${rightBg}; color: ${rightInk}; }
+
+        ::slotted(svg) {
+          width: 30px;
+          height: 30px;
+        }
+
+        .label {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--c-cobalt-900);
+        }
+        .caption {
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 11px;
+          color: var(--c-cobalt-400);
+          letter-spacing: 0.06em;
+        }
+        .caption:empty { display: none; }
+
+        .bridge {
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 12px;
+          color: var(--c-cobalt-700);
+          letter-spacing: 0.05em;
+          text-align: center;
+          max-width: 160px;
+        }
+        .bridge .arrow {
+          display: block;
+          font-size: 28px;
+          color: var(--c-orange-knvb);
+          line-height: 1;
+          margin-bottom: 4px;
+        }
+        .bridge .arrow[aria-hidden="true"] + .bridge-label:empty { display: none; }
+
+        @media (max-width: 700px) {
+          .panel {
+            grid-template-columns: 1fr;
+            gap: var(--space-4);
+          }
+          .bridge .arrow { transform: rotate(90deg); }
+        }
+      </style>
+
+      <div class="panel" role="figure" aria-label="${this._escape(leftLabel)} ↔ ${this._escape(rightLabel)}">
+        <div class="side">
+          <span class="hex left"><slot name="left-icon"></slot></span>
+          <span class="label">${this._escape(leftLabel)}</span>
+          <span class="caption">${this._escape(leftCaption)}</span>
+        </div>
+        <div class="bridge">
+          <span class="arrow" aria-hidden="true">${this._escape(arrow)}</span>
+          <span class="bridge-label">${this._escape(bridgeLabel)}</span>
+        </div>
+        <div class="side">
+          <span class="hex right"><slot name="right-icon"></slot></span>
+          <span class="label">${this._escape(rightLabel)}</span>
+          <span class="caption">${this._escape(rightCaption)}</span>
+        </div>
+      </div>
+    `;
+  }
+
+  _escape(s) {
+    return String(s).replace(/[<>&"']/g, c => ({
+      '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;'
+    }[c]));
+  }
+}
+
+if (!customElements.get('cn-pair')) {
+  customElements.define('cn-pair', CnPair);
+}
+
+export { CnPair };

package/src/diagrams/index.js

@@ -17,6 +17,8 @@
  *   <cn-pipeline>       — horizontal flow of stages connected by arrows
  *   <cn-side-box>       — rectangle-feed-prism pattern for non-app surfaces
  *   <cn-honeycomb-bg>   — honeycomb backdrop wrapper for hero scenes
+ *   <cn-pair>           — two systems bridged by an orange arrow
+ *   <cn-arch-flow>      — single row of an architecture / request-flow diagram
  */
 
 export * from './cn-hex.js';
@@ -26,3 +28,5 @@ export * from './cn-platform.js';
 export * from './cn-pipeline.js';
 export * from './cn-side-box.js';
 export * from './cn-honeycomb-bg.js';
+export * from './cn-pair.js';
+export * from './cn-arch-flow.js';

package/src/theme/Navbar/index.jsx

@@ -49,7 +49,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
-import {brandFor, productWordmark} from '../brand.jsx';
+import {brandFor, productWordmark, deriveStability} from '../brand.jsx';
 import {ICONS} from '../../components/primitives/icons';
 import styles from './styles.module.css';
 
@@ -126,14 +126,18 @@ function NavItem({item, location, appVersion}) {
     return <Link to={to} className={className}>{content}</Link>;
   }
 
-  /* Version pill: code-typeface "Stable · v{version}" chip. Source is
-     customFields.appVersion (set by createConfig() from appinfo/info.xml
-     or package.json). Hidden when no version is available so sites
-     without an app version (Hydra, design-system itself) get a clean
-     navbar instead of an empty pill. */
+  /* Version pill: code-typeface "{Stability} · v{version}" chip.
+     Source is customFields.appVersion (set by createConfig() from
+     appinfo/info.xml or package.json). The maturity prefix
+     (Stable/Beta/RC/Alpha) is auto-derived from the SemVer string —
+     `0.1.0` → Beta, `1.0.0-rc.2` → RC, `1.2.3` → Stable. Sites can
+     still pass an explicit `prefix` to override. Hidden when no
+     version is available so sites without an app version (Hydra,
+     design-system itself) get a clean navbar instead of an empty
+     pill. */
   if (typeIs(item, 'versionPill')) {
     if (!appVersion) return null;
-    const prefix = item.prefix || 'Stable';
+    const prefix = item.prefix || deriveStability(appVersion);
     return (
       <span className={styles.versionPill} title={`${prefix} · v${appVersion}`}>
         {prefix} · v{appVersion}

package/src/theme/brand.jsx

@@ -108,3 +108,36 @@ export function productWordmark(title, brandPrefix) {
   }
   return null;
 }
+
+/**
+ * Derive the maturity label that prefixes the version pill and the
+ * DetailHero status badge. Driven by SemVer:
+ *
+ *   1.0.0+         → "Stable"
+ *   0.x.y          → "Beta"   (every 0.x is pre-1.0 by SemVer rule)
+ *   *-alpha.N      → "Alpha"
+ *   *-beta.N       → "Beta"
+ *   *-rc.N         → "RC"
+ *   anything else  → "Stable" (safe default for non-SemVer strings)
+ *
+ * Both the navbar pill (theme/Navbar) and DetailHero (components/
+ * DetailHero) call this so the chrome and the landing-page status
+ * badge can't drift apart. Sites can still pass an explicit string
+ * to override (`versionPill.prefix = 'Preview'` etc.).
+ */
+export function deriveStability(version) {
+  if (!version || typeof version !== 'string') return 'Stable';
+  /* Pre-release tags win first — '1.0.0-beta.2' is Beta, not Stable.
+     Match case-insensitively because info.xml authors aren't
+     consistent (`-Beta`, `-BETA`, …). */
+  const pre = version.match(/-(alpha|beta|rc)(?:\.|$|-)/i);
+  if (pre) {
+    const tag = pre[1].toLowerCase();
+    if (tag === 'rc') return 'RC';
+    return tag === 'alpha' ? 'Alpha' : 'Beta';
+  }
+  /* No pre-release tag — 0.x is by SemVer convention not yet stable. */
+  const major = version.match(/^(\d+)\./);
+  if (major && parseInt(major[1], 10) === 0) return 'Beta';
+  return 'Stable';
+}

package/static/lib/platform-diagram.css

@@ -96,8 +96,12 @@ platform-diagram .workspace:not(.box-wrap):not(.workspace-corner-hex) .role {
   margin-top: 14px;
 }
 
-/* ---- Box-wrap (positioning shell for each list) ---- */
-platform-diagram .box-wrap { position: relative; }
+/* ---- Box-wrap (positioning shell for each list) ----
+   Hover raises the wrap's z-index so its absolute-positioned .desc
+   tooltip stacks above neighbouring lists (without this the tooltip
+   slides under the next .box-wrap and is unreadable). */
+platform-diagram .box-wrap { position: relative; z-index: 1; }
+platform-diagram .box-wrap:hover { z-index: 20; }
 
 /* ---- List-box ---- */
 platform-diagram .box {
@@ -138,6 +142,8 @@ platform-diagram .row .name {
   min-width: 0;
 }
 platform-diagram .row + .row { border-top: 1px solid var(--c-cobalt-50); }
+platform-diagram a.row { text-decoration: none; color: inherit; cursor: pointer; }
+platform-diagram a.row:hover { text-decoration: none; }
 
 /* Multi-column box: rows are wrapped in <.col> so the .row+.row border only
    draws within a single column. The columns sit side by side with a thin
@@ -396,15 +402,17 @@ platform-diagram .box-wrap.app-builder {
   opacity: var(--pd-list-progress);
 }
 
-/* App Builder list: dashed coming-soon styling */
-platform-diagram .box-wrap.app-builder .box {
+/* App Builder list: when a COMING SOON-style badge is attached we treat the
+   cluster as a placeholder (dashed border, faded text). When no badge is
+   set the cluster styles like every other list — OpenBuilt is a real app. */
+platform-diagram .box-wrap.app-builder.has-badge .box {
   border-style: dashed;
   background: var(--c-cobalt-50);
   opacity: 0.92;
 }
-platform-diagram .box-wrap.app-builder .row { color: var(--c-cobalt-400); font-style: italic; }
-platform-diagram .box-wrap.app-builder .row .desc { font-style: normal; }
-platform-diagram .box-wrap.app-builder .row:hover .name { color: var(--c-cobalt-700); }
+platform-diagram .box-wrap.app-builder.has-badge .row { color: var(--c-cobalt-400); font-style: italic; }
+platform-diagram .box-wrap.app-builder.has-badge .row .desc { font-style: normal; }
+platform-diagram .box-wrap.app-builder.has-badge .row:hover .name { color: var(--c-cobalt-700); }
 
 /* Badge (e.g. COMING SOON) — generic, attaches to any .box-wrap */
 platform-diagram .box-wrap .badge {

package/static/lib/platform-diagram.js

@@ -139,6 +139,7 @@
         name:       itemEl.getAttribute('name') || '',
         meta:       itemEl.getAttribute('meta') || '',
         desc:       itemEl.getAttribute('desc') || '',
+        href:       itemEl.getAttribute('href') || '',
         brand:      itemEl.hasAttribute('brand') || itemEl.hasAttribute('brand-color'),
         brandColor: itemEl.getAttribute('brand-color') || '',
         glyph:      svg ? svg.cloneNode(true) : null,
@@ -160,7 +161,8 @@
     const positionClass = POSITION_CLASS[list.position] || list.position;
     const familyClass   = list.family ? `fam-${list.family}` : '';
     const colsClass     = list.columns > 1 ? `cols-${list.columns}` : '';
-    wrap.className = `box-wrap ${positionClass} ${familyClass} ${colsClass}`.trim();
+    const badgeClass = list.badge ? 'has-badge' : '';
+    wrap.className = `box-wrap ${positionClass} ${familyClass} ${colsClass} ${badgeClass}`.trim();
 
     if (list.badge) {
       const badge = document.createElement('span');
@@ -173,8 +175,9 @@
     box.className = 'box' + (list.columns > 1 ? ` cols-${list.columns}` : '');
 
     function makeRow(item) {
-      const row = document.createElement('div');
+      const row = document.createElement(item.href ? 'a' : 'div');
       row.className = 'row';
+      if (item.href) row.setAttribute('href', item.href);
 
       const glyph = document.createElement('span');
       glyph.className = 'glyph' + (item.brand ? ' brand' : '');