@conduction/docusaurus-preset 2.8.1 → 2.9.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.9.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/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/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/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';