@conduction/docusaurus-preset 0.1.0

package/src/components/PartnerSidecard/PartnerSidecard.module.css

@@ -0,0 +1,185 @@
+/**
+ * <PartnerSidecard /> styles.
+ * Narrow rail (~300px) shown to the right of partner-detail body content.
+ * Card backgrounds + chip styling mirror <PartnerCard> so the directory
+ * and the detail-rail tell the same visual story per tier.
+ */
+
+.rail {
+  font-family: var(--conduction-typography-font-family-body);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+  width: 100%;
+  max-width: 320px;
+}
+
+/* ---------- Tier card ---------- */
+
+.tierCard {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  position: relative;
+  box-shadow: var(--shadow-1);
+}
+
+.tier-strategic .tierCard {
+  background: var(--c-blue-cobalt);
+  border-color: var(--c-blue-cobalt);
+  color: white;
+}
+
+.tier-certified .tierCard {
+  /* white card, but a hairline gold stripe + the gold avatar reads it as
+     "Conduction-issued credential" rather than just another Partner. */
+  border-top: 4px solid var(--c-gold-500);
+}
+
+.tierBadge {
+  display: block;
+  width: 44px;
+  height: 44px;
+  margin: 0 0 var(--space-3);
+}
+
+.tierLabel {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-700);
+  margin-bottom: var(--space-2);
+  font-weight: 600;
+}
+.tier-strategic .tierLabel { color: rgba(255, 255, 255, 0.78); }
+.tier-certified .tierLabel { color: var(--c-gold-600, #8B6914); }
+
+.tierBlurb {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--c-cobalt-700);
+  margin: 0;
+}
+.tier-strategic .tierBlurb { color: rgba(255, 255, 255, 0.85); }
+
+/* ---------- Generic section ---------- */
+
+.section {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  box-shadow: var(--shadow-1);
+}
+
+.sectionTitle {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  font-weight: 600;
+  margin: 0 0 var(--space-3);
+}
+
+/* ---------- Apps chip row ---------- */
+
+.chipRow {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-family: var(--conduction-typography-font-family-code);
+}
+
+/* ---------- Solutions list ---------- */
+
+.chipColumn {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.solutionLink {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-900);
+  text-decoration: none;
+  transition: background 160ms, color 160ms;
+}
+.solutionLink:hover {
+  background: var(--c-blue-cobalt);
+  color: white;
+  text-decoration: none;
+}
+
+.solutionIcon {
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+.solutionIcon svg {
+  width: 22px;
+  height: 22px;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.solutionTitle {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+/* ---------- CTA ---------- */
+
+.cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--c-blue-cobalt);
+  color: white;
+  padding: 12px 18px;
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+  transition: background 160ms;
+}
+.cta:hover {
+  background: var(--c-cobalt-900);
+  color: white;
+  text-decoration: none;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 900px) {
+  .rail {
+    max-width: 100%;
+  }
+}

package/src/components/Pipeline/Pipeline.jsx

@@ -0,0 +1,198 @@
+/**
+ * <Pipeline /> + <PipelineStep /> + <IconList />
+ *
+ * Horizontal pipeline of flat hex tiles, family-coloured per step,
+ * mirroring preview/components/pipeline-flow.html. Each step has a
+ * stage number + uppercase kicker above the hex, an explanatory
+ * name + caption below, and (optionally) a small pill inside the
+ * hex (e.g. "files · users · auth" on a workspace step). A single
+ * animated dotted flow line runs full-width behind the hex row,
+ * threading through every hex equator.
+ *
+ * Family palette follows the locked PRISM-FAMILY POLICY in tokens.css:
+ *   mint        integrate / connect    (OpenConnector)
+ *   forest      data / registers       (OpenRegister)
+ *   terracotta  documents / search     (OpenCatalogi)
+ *   lavender    process / views        (MyDash)
+ *   workspace   Nextcloud workspace    (centre platform hex)
+ *
+ * Sources / consumers end-boxes use <IconList />, also exported on its
+ * own so the same kit-styled "label + bordered list of icon-tagged
+ * items" pattern can be dropped anywhere outside the pipeline.
+ *
+ * Each item can be a plain string or an object:
+ *   - string                  → default doc icon + label
+ *   - {label, icon: 'doc'}    → built-in glyph by name (see GLYPHS)
+ *   - {label, icon: <svg/>}   → custom React node (rendered as-is,
+ *                                without the bordered tile wrapper)
+ *
+ * Usage in MDX:
+ *
+ *   <Pipeline
+ *     start={{label: 'Sources', items: [
+ *       {label: 'Spreadsheets', icon: 'doc'},
+ *       {label: 'Databases', icon: 'db'},
+ *       {label: 'REST / SOAP', icon: 'api'},
+ *       {label: 'Legacy', icon: 'legacy'},
+ *     ]}}
+ *     steps={[
+ *       {number: '01', kicker: 'Ingest', name: 'OpenConnector',
+ *         caption: 'Pulls schemas, REST, SOAP, files.'},
+ *       {number: 'PLATFORM', name: 'Nextcloud', family: 'workspace',
+ *         pill: 'files · users · auth'},
+ *       {number: '02', kicker: 'Present', name: 'OpenCatalogi',
+ *         caption: 'Indexes every register.'},
+ *     ]}
+ *     end={{label: 'Consumers', items: [
+ *       {label: 'Citizens', icon: 'person'},
+ *       {label: 'APIs', icon: 'api'},
+ *       {label: 'Open data', icon: 'download'},
+ *     ]}}
+ *   />
+ */
+
+import React from 'react';
+import styles from './Pipeline.module.css';
+
+/* ===== Family palette =====
+   Locked PRISM-FAMILY POLICY (tokens.css). fill = -300, ink = -700. */
+const FAMILY_COLORS = {
+  mint:       { fill: '#87CFA8', ink: '#155234' },
+  forest:     { fill: '#7DAA7C', ink: '#1E461C' },
+  terracotta: { fill: '#DA9D8A', ink: '#6E2A1C' },
+  lavender:   { fill: '#B7A7E3', ink: '#483982' },
+  workspace:  { fill: '#67BEEA', ink: '#014C77' },
+};
+
+const FAMILY_LABEL = {
+  mint:       'INTEGRATE',
+  forest:     'DATA',
+  terracotta: 'SEARCH',
+  lavender:   'VIEWS',
+  workspace:  'WORKSPACE',
+};
+
+function inferFamily(name) {
+  const n = (name || '').toLowerCase();
+  if (n.includes('connector')) return 'mint';
+  if (n.includes('register')) return 'forest';
+  if (n.includes('catalog')) return 'terracotta';
+  if (n.includes('mydash') || n.includes('dashboard')) return 'lavender';
+  if (n.includes('nextcloud') || n.includes('workspace') || n.includes('platform')) return 'workspace';
+  return 'forest';
+}
+
+/* ===== Hex tile ===== */
+/* Flat pointy-top hex (no extruded sides). Geometry mirrors the kit's
+   top-face polygon so the silhouette matches the rest of the brand.
+   When `pill` is supplied the family sub-label is replaced with a
+   small white pill — kit-identical to the workspace hex's
+   "files · users · auth" tag. */
+function HexTile({name, family, pill}) {
+  const c = FAMILY_COLORS[family] || FAMILY_COLORS.forest;
+  const sub = FAMILY_LABEL[family];
+  return (
+    <svg viewBox="0 0 120 86" className={styles.prism} aria-hidden="true">
+      <polygon points="60,4 96,24 96,62 60,82 24,62 24,24" fill={c.fill} />
+      <text x="60" y="40" textAnchor="middle" fontSize="10" fontWeight="700" fill={c.ink} letterSpacing="-0.02em">{name}</text>
+      {pill ? (
+        <>
+          <rect x="22" y="48" width="76" height="14" rx="7" fill="white" fillOpacity="0.94" />
+          <text x="60" y="58" textAnchor="middle" fontSize="7" fontWeight="600" fill={c.ink}>{pill}</text>
+        </>
+      ) : sub ? (
+        <text x="60" y="58" textAnchor="middle" fontFamily="ui-monospace, Menlo, monospace" fontSize="7" letterSpacing="1.4" fill={c.ink}>{sub}</text>
+      ) : null}
+    </svg>
+  );
+}
+
+export function PipelineStep({number, kicker, name, caption, family, pill, className}) {
+  const fam = family || inferFamily(name);
+  return (
+    <div className={[styles.step, className].filter(Boolean).join(' ')}>
+      {number && <div className={styles.num}>{number}</div>}
+      {kicker && <div className={styles.kicker}>{kicker}</div>}
+      <HexTile name={name} family={fam} pill={pill} />
+      {name && <div className={styles.name}>{name}</div>}
+      {caption && <div className={styles.caption}>{caption}</div>}
+    </div>
+  );
+}
+
+/* ===== Item icons =====
+   Built-in glyph presets with kit-identical colours: blue-cobalt
+   stroke (#21468B) on a 22x22 white tile with a cobalt-200 hairline
+   border. Match the four-icon source / four-icon consumer set used
+   by preview/components/pipeline-flow.html. */
+const STROKE = 'var(--c-blue-cobalt)';
+const GLYPHS = {
+  /* Sources */
+  doc:      <path d="M6 8h10 M6 11h10 M6 14h6" stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round" />,
+  db:       <g stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round"><rect x="6" y="7" width="10" height="9"/><path d="M8 11h6 M8 13h6"/></g>,
+  api:      <path d="M11 8a3 3 0 0 1 3 3h-6a3 3 0 0 1 3-3z M7 14h8" stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round" />,
+  legacy:   <path d="M7 16V9l4-2 4 2v7z" stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round" />,
+  /* Consumers */
+  person:   <g stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round"><circle cx="11" cy="9" r="2.5"/><path d="M7 17a4 4 0 0 1 8 0"/></g>,
+  download: <path d="M11 6v8 M7 11l4 4 4-4 M7 17h8" stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round" />,
+  embed:    <g stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round"><rect x="5" y="6" width="12" height="10" rx="1"/><path d="M5 9h12"/></g>,
+  link:     <g stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round"><path d="M9 13a4 4 0 0 1 0-6l2-2"/><path d="M13 9a4 4 0 0 1 0 6l-2 2"/></g>,
+  globe:    <g stroke={STROKE} strokeWidth="1.4" fill="none" strokeLinecap="round"><circle cx="11" cy="11" r="5"/><path d="M6 11h10 M11 6a8 8 0 0 1 0 10 M11 6a8 8 0 0 0 0 10"/></g>,
+};
+
+/* Bordered icon tile (white fill, cobalt-200 stroke) wrapping a glyph. */
+function IconTile({glyph}) {
+  return (
+    <svg viewBox="0 0 22 22" aria-hidden="true">
+      <rect x="0.5" y="0.5" width="21" height="21" rx="3" fill="white" stroke="var(--c-cobalt-200)" strokeWidth="1" />
+      {glyph}
+    </svg>
+  );
+}
+
+function resolveIcon(spec) {
+  if (!spec) return <IconTile glyph={GLYPHS.doc} />;
+  if (typeof spec === 'string') {
+    const g = GLYPHS[spec];
+    return <IconTile glyph={g || GLYPHS.doc} />;
+  }
+  if (React.isValidElement(spec)) return spec;
+  return <IconTile glyph={GLYPHS.doc} />;
+}
+
+/* ===== IconList =====
+   Reusable bordered list with a label header and icon-tagged items.
+   Used by Pipeline as its source / consumer end-boxes; exported so
+   the same pattern can be dropped in standalone elsewhere. */
+export function IconList({label, items = [], className}) {
+  return (
+    <div className={[styles.end, className].filter(Boolean).join(' ')}>
+      {label && <div className={styles.endLabel}>{label}</div>}
+      <ul className={styles.endList}>
+        {items.map((it, i) => {
+          const item = typeof it === 'string' ? {label: it} : (it || {});
+          return (
+            <li key={i}>
+              <span className={styles.endIcon}>{resolveIcon(item.icon)}</span>
+              <span>{item.label}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default function Pipeline({start, end, steps, children, className}) {
+  const stepNodes = steps
+    ? steps.map((s, i) => <PipelineStep key={i} {...s} />)
+    : children;
+
+  return (
+    <div className={[styles.pipeline, className].filter(Boolean).join(' ')}>
+      {start && <IconList {...start} />}
+      <div className={styles.steps}>{stepNodes}</div>
+      {end && <IconList {...end} />}
+    </div>
+  );
+}

package/src/components/Pipeline/Pipeline.module.css

@@ -0,0 +1,206 @@
+/**
+ * <Pipeline /> styles. Layout-grid version of the pipeline-flow.html
+ * pattern. Horizontal at >=1100px, stacks vertically below.
+ *
+ * Each step renders a flat pointy-top hex coloured by family, with
+ * the "01" stage number and uppercase kicker stacked above and an
+ * explanatory name + caption below. A single animated dotted flow
+ * line runs full-width behind the hex row, threading through the hex
+ * equator. The hexes sit above the line via z-index so their fills
+ * occlude the dashes behind them.
+ */
+
+.pipeline {
+  display: grid;
+  grid-template-columns: minmax(160px, 220px) 1fr minmax(160px, 220px);
+  gap: 24px;
+  align-items: start;
+  font-family: var(--conduction-typography-font-family-body);
+  max-width: 1280px;
+  margin: 0 auto;
+}
+@media (max-width: 1100px) {
+  .pipeline { grid-template-columns: 1fr; }
+}
+
+/* Steps row. Position relative so the ::before line can absolute-
+   position itself across the row. */
+.steps {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+@media (max-width: 1100px) {
+  .steps { flex-direction: column; align-items: stretch; gap: 24px; }
+}
+
+/* Full-width animated dotted line. Sits at the hex's vertical centre
+   so it threads through every hex tile. Hexes use z-index:1 so they
+   render above the line and visually occlude the dashes behind them. */
+.steps::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* Hex midline calc: viewBox 0 0 120 86, midline y=43, prism renders
+     at ~100px tall (max-width 140 × aspect 86/120) so midline is ~50px
+     from SVG top. Above the SVG the step stacks num (~14) + kicker
+     (~14) + 8px margin = ~36px → midline lands at ~86px from steps top.
+     Less 1px so the 2px line is centred. */
+  top: 85px;
+  height: 2px;
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--c-cobalt-300) 0 5px,
+    transparent 5px 10px
+  );
+  background-size: 10px 100%;
+  background-repeat: repeat-x;
+  opacity: 0.7;
+  pointer-events: none;
+  z-index: 0;
+  animation: flow-shift 0.9s linear infinite;
+}
+@keyframes flow-shift {
+  from { background-position: 0 0; }
+  to   { background-position: 10px 0; }
+}
+@media (max-width: 1100px) {
+  .steps::before {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    right: auto;
+    width: 2px;
+    height: auto;
+    background-image: repeating-linear-gradient(
+      to bottom,
+      var(--c-cobalt-300) 0 5px,
+      transparent 5px 10px
+    );
+    background-size: 100% 10px;
+    background-repeat: repeat-y;
+    transform: translateX(-50%);
+    animation: flow-shift-vert 0.9s linear infinite;
+  }
+}
+@keyframes flow-shift-vert {
+  from { background-position: 0 0; }
+  to   { background-position: 0 10px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .steps::before { animation: none; }
+}
+
+/* Step: stage above hex, hex in middle, name + caption below. */
+.step {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 0;
+  min-width: 0;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+}
+
+.num {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  color: var(--c-cobalt-400);
+  font-weight: 500;
+}
+
+.kicker {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-bottom: 8px;
+}
+
+.prism {
+  width: 100%;
+  max-width: 140px;
+  height: auto;
+  display: block;
+}
+
+/* Explanatory text under the hex — bold app name + caption sentence,
+   matching the kit's `.captions .col` block beneath pipeline-flow.html. */
+.name {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin-top: 16px;
+}
+.caption {
+  font-size: 13px;
+  color: var(--c-cobalt-700);
+  line-height: 1.5;
+  max-width: 26ch;
+  margin: 6px auto 0;
+}
+
+/* End boxes (sources / consumers). Cobalt-50 ground + cobalt-100
+   border, kit-identical. Each item gets a small rounded-square icon
+   next to the label. */
+.end {
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 18px 20px;
+  align-self: start;
+  display: flex;
+  flex-direction: column;
+  /* Pull the wrapper down so the SOURCES/CONSUMERS label sits roughly
+     level with the per-step kicker text (which lands ~36px below the
+     pipeline top). */
+  margin-top: 18px;
+}
+
+.endLabel {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-bottom: 14px;
+  font-weight: 500;
+}
+
+.endList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.endList li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--c-cobalt-700);
+}
+
+.endIcon {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.endIcon svg {
+  width: 22px;
+  height: 22px;
+  display: block;
+}

package/src/components/PlatformDiagram/PlatformDiagram.jsx

@@ -0,0 +1,110 @@
+/**
+ * <PlatformDiagram />
+ *
+ * React wrapper around the bespoke <platform-diagram> web component
+ * that ships in the kit (preview/components/_lib/platform-diagram.{js,css}).
+ *
+ * The web component does the heavy lifting: it reads its <pd-workspace>,
+ * <pd-list>, <pd-item>, <pd-flow> children, lays them out on the
+ * 1fr/360px/1fr grid, and draws the SVG flow lines between boxes.
+ *
+ * This wrapper accepts a typed prop graph instead of forcing callers
+ * to inline 13+ <pd-item> SVG elements in MDX. It generates the same
+ * DOM the web component expects.
+ *
+ * Lazy-loads the runtime CSS+JS from /lib/platform-diagram.* on the
+ * client; sites that already include those assets via <Head> won't
+ * double-load (the script's IIFE is no-op on re-import, the link tag
+ * is dedupe'd by href).
+ *
+ * Usage in MDX:
+ *
+ *   <PlatformDiagram
+ *     workspace={{logo: '/img/nextcloud-logo.svg', alt: 'Nextcloud', role: 'Workspace'}}
+ *     lists={[
+ *       {position: 'top', family: 'nextcloud', items: [
+ *         {name: 'Files', meta: 'Files', desc: '...', icon: <svg>...</svg>},
+ *         ...
+ *       ]},
+ *       {position: 'top-left', family: 'core', label: 'Technical\nCore', items: [...]},
+ *       {position: 'top-right', family: 'solutions', label: 'Solutions', items: [...]},
+ *       {position: 'bottom-left', family: 'workspace', label: 'Workspace\nApps', items: [...]},
+ *       {position: 'bottom-right', family: 'integrate', label: 'Integrated\nApps',
+ *        columns: 2, items: [...]},
+ *       {position: 'bottom-center', family: 'builder', label: 'App\nBuilder',
+ *        badge: 'COMING SOON', items: [...]},
+ *     ]}
+ *     flows={[
+ *       {from: 'top-left:bottom', to: 'bottom-left:top', shape: 'straight'},
+ *       {from: 'bottom-center:left', to: 'bottom-left:bottom', shape: 'l-h'},
+ *       {from: 'bottom-right:bottom', to: 'bottom-left:bottom', shape: 'c-bracket-bottom', clearance: 280},
+ *       {from: 'top-left:top', to: 'top-right:top', shape: 'c-bracket-top', clearance: 240},
+ *     ]}
+ *   />
+ */
+
+import React from 'react';
+import Head from '@docusaurus/Head';
+import {useLazyScript} from '../../utils/lazyScript';
+
+const ASSET_BASE = '/lib';
+
+export default function PlatformDiagram({workspace, lists = [], flows = []}) {
+  /* platform-diagram.js is loaded post-hydration. The runtime registers
+     a custom-element definition that upgrades any <platform-diagram>
+     element on the page; running it after React hydration prevents the
+     custom-element constructor from mutating the DOM mid-hydration and
+     producing #418 / #423 warnings. See utils/lazyScript.js. */
+  useLazyScript(ASSET_BASE + '/platform-diagram.js', 'platform-diagram');
+
+  return (
+    <>
+      <Head>
+        <link rel="stylesheet" href={ASSET_BASE + '/platform-diagram.css'} />
+      </Head>
+
+      <platform-diagram>
+        {workspace && (
+          <pd-workspace
+            logo={workspace.logo}
+            alt={workspace.alt}
+            role={workspace.role || 'Workspace'}
+          />
+        )}
+
+        {lists.map((list, i) => (
+          <pd-list
+            key={i}
+            position={list.position}
+            family={list.family}
+            label={list.label}
+            badge={list.badge}
+            columns={list.columns}
+          >
+            {(list.items || []).map((item, j) => (
+              <pd-item
+                key={j}
+                name={item.name}
+                meta={item.meta}
+                desc={item.desc}
+                brand-color={item.brandColor}
+              >
+                {item.icon}
+              </pd-item>
+            ))}
+          </pd-list>
+        ))}
+
+        {flows.map((flow, i) => (
+          <pd-flow
+            key={i}
+            from={flow.from}
+            to={flow.to}
+            shape={flow.shape}
+            clearance={flow.clearance}
+          />
+        ))}
+      </platform-diagram>
+    </>
+  );
+}