@conduction/docusaurus-preset 2.10.2 → 3.0.0

package/MISSING_COMPONENTS.md

@@ -84,7 +84,6 @@ Thin React wrappers around the framework-agnostic web components in
 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "2.10.2",
+  "version": "3.0.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/AppMock/AppMock.module.css

@@ -223,13 +223,13 @@
   display: inline-flex; align-items: center; gap: 3px;
   padding: 2px 6px;
   border-radius: 999px;
-  background: var(--c-mint-100);
+  background: var(--c-mint-300);
 }
 .am .statusPill .h  { width: 6px; height: 7px; clip-path: var(--hex-pointy-top); background: var(--c-mint-500); }
-.am .statusPill .t  { height: 3px; width: 22px; background: var(--c-mint-700); border-radius: 1px; }
-.am .statusPill.beta { background: var(--c-coral-50); }
+.am .statusPill .t  { height: 3px; width: 22px; background: var(--c-mint-500); border-radius: 1px; }
+.am .statusPill.beta { background: var(--c-coral-300); }
 .am .statusPill.beta .h { background: var(--c-orange-knvb); }
-.am .statusPill.beta .t { background: var(--c-coral-700); }
+.am .statusPill.beta .t { background: var(--c-coral-500); }
 
 /* KPI strip cell — big number left, label right. */
 .am .kpi {

package/src/components/Diagrams/Diagrams.jsx

@@ -1,7 +1,8 @@
 /**
  * Thin React wrappers for the framework-agnostic diagram web
- * components in @conduction/diagrams: <cn-hex>, <cn-hex-prism>,
- * <cn-platform>, <cn-domain-tree>, etc.
+ * components in @conduction/diagrams: <cn-hex>, <cn-platform>,
+ * <cn-domain-tree>, etc. Brand is flat-hex only; the 3D prism was
+ * removed in v3.0.0.
  *
  * Why React wrappers around already-working web components?
  *   - Type-checked prop names (no remembering "size" vs "scale")
@@ -16,18 +17,13 @@
  *
  * Usage in MDX:
  *
- *   import {Hex, HexPrism} from '@conduction/docusaurus-preset/components';
+ *   import {Hex} from '@conduction/docusaurus-preset/components';
  *
  *   <Hex color="cobalt" size="md" variant="solid">
  *     <span slot="kicker">DATA</span>
  *     OpenRegister
  *   </Hex>
  *
- *   <HexPrism family="coral" size="lg" state="hover">
- *     <span slot="kicker">CATALOG</span>
- *     OpenCatalogi
- *   </HexPrism>
- *
  * The runtime is lazy-loaded once, then customElements.define guards
  * keep subsequent imports a no-op. If the package isn't installed
  * (non-Conduction sites), the import fails silently and the elements
@@ -79,19 +75,6 @@ export function Hex({color, size, variant, layout, interactive, children, ...res
   );
 }
 
-/* ============================================================
-   <HexPrism /> wraps <cn-hex-prism>
-   Observed: family, size, state
-   ============================================================ */
-export function HexPrism({family, size, state, children, ...rest}) {
-  useDiagramRuntime();
-  return (
-    <cn-hex-prism {...attrs({family, size, state})} {...rest}>
-      {children}
-    </cn-hex-prism>
-  );
-}
-
 /* ============================================================
    <Platform /> wraps <cn-platform>
    Slot-based: a centre apex + surrounding hexes/prisms as children.

package/src/components/HexBackground/HexBackground.module.css

@@ -24,12 +24,12 @@
 .tone-cobalt-100   .hexA { background: var(--c-cobalt-100); }
 .tone-cobalt-50    .hexA { background: var(--c-cobalt-50); }
 .tone-cobalt-700   .hexA { background: var(--c-cobalt-700); }
-.tone-mint-100     .hexA { background: var(--c-mint-100); }
-.tone-lavender-100 .hexA { background: var(--c-lavender-100); }
-.tone-forest-100   .hexA { background: var(--c-forest-100); }
-.tone-terracotta-100 .hexA { background: var(--c-terracotta-100); }
-.tone-coral-100    .hexA { background: var(--c-coral-100); }
-.tone-workspace-100 .hexA { background: var(--c-workspace-100); }
+.tone-mint-100     .hexA { background: var(--c-mint-300); }
+.tone-lavender-100 .hexA { background: var(--c-lavender-300); }
+.tone-forest-100   .hexA { background: var(--c-forest-300); }
+.tone-terracotta-100 .hexA { background: var(--c-terracotta-300); }
+.tone-coral-100    .hexA { background: var(--c-coral-300); }
+.tone-workspace-100 .hexA { background: var(--c-workspace-300); }
 
 /* The second hex (density=2) carries a darker tone of the same family
    for layered depth. */

package/src/components/RotatingCards/RotatingCards.module.css

@@ -87,27 +87,27 @@
 }
 
 /* Tone palettes — set the .cardImage background. */
-.tone-mint        .cardImage { background: var(--c-mint-100); }
+.tone-mint        .cardImage { background: var(--c-mint-300); }
 .tone-mint        .cardEyebrow,
-.tone-mint        .cardCta    { color: var(--c-mint-700); }
+.tone-mint        .cardCta    { color: var(--c-mint-500); }
 
-.tone-lavender    .cardImage { background: var(--c-lavender-100); }
+.tone-lavender    .cardImage { background: var(--c-lavender-300); }
 .tone-lavender    .cardEyebrow,
-.tone-lavender    .cardCta    { color: var(--c-lavender-700); }
+.tone-lavender    .cardCta    { color: var(--c-lavender-500); }
 
-.tone-forest      .cardImage { background: var(--c-forest-100); }
+.tone-forest      .cardImage { background: var(--c-forest-300); }
 .tone-forest      .cardEyebrow,
-.tone-forest      .cardCta    { color: var(--c-forest-700); }
+.tone-forest      .cardCta    { color: var(--c-forest-500); }
 
-.tone-terracotta  .cardImage { background: var(--c-terracotta-100); }
+.tone-terracotta  .cardImage { background: var(--c-terracotta-300); }
 .tone-terracotta  .cardEyebrow,
-.tone-terracotta  .cardCta    { color: var(--c-terracotta-700); }
+.tone-terracotta  .cardCta    { color: var(--c-terracotta-500); }
 
-.tone-coral       .cardImage { background: var(--c-coral-100); }
+.tone-coral       .cardImage { background: var(--c-coral-300); }
 .tone-coral       .cardEyebrow,
-.tone-coral       .cardCta    { color: var(--c-coral-700); }
+.tone-coral       .cardCta    { color: var(--c-coral-500); }
 
-.tone-workspace   .cardImage { background: var(--c-workspace-100); }
+.tone-workspace   .cardImage { background: var(--c-workspace-300); }
 .tone-workspace   .cardEyebrow,
 .tone-workspace   .cardCta    { color: var(--c-cobalt-700); }
 

package/src/components/index.js

@@ -57,13 +57,12 @@ export {default as FacetedFilters, FilterChip} from './FacetedFilters/FacetedFil
 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,
-   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';
+/* Diagram-set web-component React wrappers (cn-hex, 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. Brand is
+   flat-hex only; the 3D prism wrapper was removed in v3.0.0. */
+export {Hex, 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/css/tokens.css

@@ -38,97 +38,68 @@
   --c-cobalt-800:         #102246;
   --c-cobalt-900:         #0A172F;
 
-  /* Pastel families for hex-prism categories (per visual-motifs.md)
-     Each family has FIVE roles for prism construction:
-       -50  ultra-light wash (ground / page bg accents)
-       -100 top-face fill (the "lit" face you see in plan view)
-       -300 left-face fill (the slightly shaded vertical face)
-       -500 right-face / stroke (the deeper vertical face + outlines)
-       -700 ink — text on prism, pill outline, chip text
-
-     PRISM-FAMILY POLICY (locked 2026-04):
-       Component prisms get ONE of: lavender, mint, forest, terracotta.
-       The workspace prism uses workspace-blue (= Nextcloud's own brand blue).
-       Cobalt is brand chrome, NOT a prism family.
+  /* Flat-hex category families. Two stops per family — the brand is
+     flat-hex only (the 3D prism mechanism was removed in v3.0.0), so
+     we no longer need separate -50/-100 face fills or -700 ink stops.
+
+       -300 lighter hover/wash variant
+       -500 saturated face — the canonical fill for the category
+
+     HEX-FAMILY POLICY (locked 2026-04, trimmed 2026-05):
+       Component hexes pick exactly one of: lavender, mint, forest,
+       terracotta. The workspace hex uses workspace-blue (= Nextcloud's
+       own brand blue). Cobalt is brand chrome, NOT a category.
        "Kernel" is a banned word in the brand vocabulary (see
        identity/voice.html); use "workspace" everywhere.
-       Coral, gold, gray are NOT prism families. They serve different jobs:
+       Coral, gold, gray are NOT category families. They serve specific jobs:
          · coral  = KNVB-orange accent (focus, hover, single-use highlights). ≤ 8 % page area.
-         · gold   = "Conduction Certified" mark ONLY. Never on a generic prism.
+         · gold   = "Conduction Certified" mark ONLY. Never on a generic hex.
          · gray   = neutral surfaces / strokes. Not a category.
   */
 
   /* — Component family 1: lavender (process / workflow) — */
-  --c-lavender-50:        #F6F2FC;
-  --c-lavender-100:       #ECE6F8;
   --c-lavender-300:       #B7A7E3;
   --c-lavender-500:       #7E66C9;
-  --c-lavender-700:       #483982;
 
   /* — Component family 2: mint (integrate / connect) — */
-  --c-mint-50:            #EAF7F0;
-  --c-mint-100:           #DCF1E6;
   --c-mint-300:           #87CFA8;
   --c-mint-500:           #2E9866;
-  --c-mint-700:           #155234;
 
   /* — Component family 3: forest (data / trustworthy / NLDS-compliant)
-       Distinct from mint — deeper, denser, more "official." Use
-       this for prisms that handle data and registers. — */
-  --c-forest-50:          #EEF5EE;
-  --c-forest-100:         #D7E8D6;
+       Distinct from mint — deeper, denser, more "official." Use this
+       for hexes that handle data and registers. — */
   --c-forest-300:         #7DAA7C;
   --c-forest-500:         #3D7C3A;
-  --c-forest-700:         #1E461C;
 
   /* — Component family 4: terracotta (documents / human work)
-       Tuned around the brand vermillion (#AE1C28) as its 700-deep,
-       so it ties to the Dutch flag without the "alarm" of pure red. — */
-  --c-terracotta-50:      #FBF1EE;
-  --c-terracotta-100:     #F4DCD3;
+       Tuned around the brand vermillion (#AE1C28), so it ties to the
+       Dutch flag without the "alarm" of pure red. — */
   --c-terracotta-300:     #DA9D8A;
   --c-terracotta-500:     #B25E48;
-  --c-terracotta-700:     #6E2A1C;
 
   /* — Workspace family: workspace-blue (= Nextcloud's own brand blue tints) — */
-  --c-workspaceblue-50:    #E5F2FA;
-  --c-workspaceblue-100:   #C8E5F5;
   --c-workspaceblue-300:   #67BEEA;
   --c-workspaceblue-500:   #0082C9;  /* Nextcloud blue */
-  --c-workspaceblue-700:   #014C77;
 
-  /* ----- Reserved colors (NOT prism families) -----
+  /* ----- Reserved colors (NOT category families) -----
      Kept in tokens because they have specific jobs elsewhere. */
 
   /* Coral = KNVB orange accent only — focus rings, hover, occasional highlight. */
-  --c-coral-50:           #FFF3ED;
-  --c-coral-100:          #FFE4DA;
   --c-coral-300:          #FAB29C;
   --c-coral-500:          #F36C21;  /* = KNVB */
-  --c-coral-700:          #9B3A0E;
 
   /* Gold = Conduction Certified mark ONLY. Reserved for the cert avatar
      and trustmark badges. Do not use as a generic family color. */
-  --c-gold-50:            #FDF8E8;
-  --c-gold-100:           #FBF1D5;
   --c-gold-300:           #ECC668;
   --c-gold-500:           #C99A1F;
-  --c-gold-700:           #765806;
 
   /* Gray = neutral surfaces, strokes, side-box chrome. Not a category. */
-  --c-gray-50:            #F4F5F8;
-  --c-gray-100:           #ECEEF2;
   --c-gray-300:           #B7BDC9;
   --c-gray-500:           #6B7280;
-  --c-gray-700:           #3A4150;
 
-  /* Workspace family alias — points to workspace-blue (Nextcloud).
-     The hex-prism API stays uniform: --c-workspace-{50,100,300,500,700} */
-  --c-workspace-50:       var(--c-workspaceblue-50);
-  --c-workspace-100:      var(--c-workspaceblue-100);
+  /* Workspace family alias — points to workspace-blue (Nextcloud). */
   --c-workspace-300:      var(--c-workspaceblue-300);
   --c-workspace-500:      var(--c-workspaceblue-500);
-  --c-workspace-700:      var(--c-workspaceblue-700);
 
   /* ---------- Semantic theme.conduction-2026 ---------- */
   /* Brand */

package/src/diagrams/README.md

@@ -22,11 +22,10 @@ Every Conduction diagram follows the same brand rules: pointy-top hexes, fixed p
 | Component | Status | Purpose |
 | --- | --- | --- |
 | `<cn-hex>` | Available | Pointy-top hex primitive. Label + icon, nine colours, four sizes, solid or outline, optional interactive state. |
-| `<cn-hex-prism>` | Available | 3D isometric prism. Six families, four sizes, slots for label / icon / kicker / pills, coming-state badge. |
 | `<cn-domain-tree>` | Available | Vertical apex-and-branches layout for one-to-many domain maps. Slot-driven; multi-trunk diagrams stack two trees. |
-| `<cn-platform>` | Available | Workspace-plus-orbiting-apps cluster. Six neighbours in a hex ring around a central apex (typically a cobalt cn-hex-prism representing the Nextcloud workspace). |
+| `<cn-platform>` | Available | Workspace-plus-orbiting-apps cluster. Six neighbours in a hex ring around a central cobalt cn-hex representing the Nextcloud workspace. |
 | `<cn-pipeline>` | Available | Horizontal flow of stages with auto-inserted arrow connectors. Three arrow tones. |
-| `<cn-side-box>` | Available | Rectangle-feed-prism pattern. Header chip + icon-and-label rows. Three widths, optional compact + footer. |
+| `<cn-side-box>` | Available | Rectangle-feed-hex pattern. Header chip + icon-and-label rows. Three widths, optional compact + footer. |
 | `<cn-honeycomb-bg>` | Available | Honeycomb backdrop wrapper. Theme + accent + density attributes. Parallax in v2. |
 
 ## Usage
@@ -71,4 +70,4 @@ No build step needed. Drop the module into any HTML page:
 
 ## Roadmap
 
-See the planned components above. Built in this order: `cn-hex` ✅ → `cn-hex-prism` → `cn-domain-tree` (first real consumer on the new identity/domains.html page) → `cn-platform` → `cn-pipeline` → `cn-side-box` → `cn-honeycomb-bg`.
+Brand is flat-hex only. The 3D `<cn-hex-prism>` primitive was removed in v3.0.0 (`@conduction/docusaurus-preset` 3.0.0).

package/src/diagrams/cn-pipeline.js

@@ -1,15 +1,15 @@
 /**
- * <cn-pipeline> — horizontal flow of prisms or hexes connected by arrows.
+ * <cn-pipeline> — horizontal flow of hexes connected by arrows.
  *
  * The flattened cousin of cn-platform. Used in solution pages, how-
  * it-works sections, and any sequence diagram where data moves
  * left-to-right through a series of stages.
  *
  *   <cn-pipeline>
- *     <cn-hex-prism family="coral">Source</cn-hex-prism>
- *     <cn-hex-prism family="lavender">Process</cn-hex-prism>
- *     <cn-hex-prism family="cobalt">Workspace</cn-hex-prism>
- *     <cn-hex-prism family="mint">Sink</cn-hex-prism>
+ *     <cn-hex color="lavender">Source</cn-hex>
+ *     <cn-hex color="forest">Process</cn-hex>
+ *     <cn-hex color="cobalt">Workspace</cn-hex>
+ *     <cn-hex color="mint">Sink</cn-hex>
  *   </cn-pipeline>
  *
  * The component reads its own light-DOM children, assigns each to a

package/src/diagrams/cn-platform.js

@@ -2,11 +2,11 @@
  * <cn-platform> — workspace-plus-orbiting-apps cluster.
  *
  * The canonical "what is ConNext" diagram: a Nextcloud workspace at
- * the centre, six application prisms arranged in a hex ring around
- * it. Used on landing pages, product overviews, ecosystem visuals.
+ * the centre, six application hexes arranged in a hex ring around it.
+ * Used on landing pages, product overviews, ecosystem visuals.
  *
  * Slots
- *   apex     — central element; required (typically a cobalt cn-hex-prism).
+ *   apex     — central element; required (typically a cobalt cn-hex).
  *              Same slot name as cn-domain-tree; "kernel" is a banned
  *              word in the brand vocabulary, see identity/voice.html.
  *   default  — orbiting apps; up to six, positioned in this order:
@@ -19,8 +19,8 @@
  *              Background of the surrounding stage.
  *
  * The component owns only layout + ground + optional connector ring.
- * Each child element keeps its own styling, so the apex element can
- * be a hex prism or a flat hex interchangeably.
+ * Each child element keeps its own styling. Brand is flat-hex only;
+ * the 3D prism was removed in v3.0.0.
  */
 
 class CnPlatform extends HTMLElement {

package/src/diagrams/cn-side-box.js

@@ -1,7 +1,7 @@
 /**
- * <cn-side-box> — the rectangle-feed-prism pattern.
+ * <cn-side-box> — the rectangle-feed-hex pattern.
  *
- * Hex prisms are "the system". Side-boxes are "what feeds it" or
+ * Hexes are "the system". Side-boxes are "what feeds it" or
  * "what consumes it". The shape difference is the hierarchy.
  *
  *   <cn-side-box header="YOUR DATA">

package/src/diagrams/index.js

@@ -7,22 +7,19 @@
  * Usage (no build step):
  *   <script type="module" src="../diagrams/src/index.js"></script>
  *   <cn-hex color="cobalt" size="lg">Connect</cn-hex>
- *   <cn-hex-prism family="coral" size="lg">Catalogi</cn-hex-prism>
  *
  * Components:
  *   <cn-hex>            — pointy-top hex primitive (label + icon)
- *   <cn-hex-prism>      — 3D isometric prism, the atomic unit for platform diagrams
  *   <cn-domain-tree>    — vertical apex-and-branches layout for domain maps
  *   <cn-platform>       — workspace-plus-orbiting-apps cluster
  *   <cn-pipeline>       — horizontal flow of stages connected by arrows
- *   <cn-side-box>       — rectangle-feed-prism pattern for non-app surfaces
+ *   <cn-side-box>       — rectangle-feed 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';
-export * from './cn-hex-prism.js';
 export * from './cn-domain-tree.js';
 export * from './cn-platform.js';
 export * from './cn-pipeline.js';

package/src/diagrams/cn-hex-prism.js

@@ -1,163 +0,0 @@
-/**
- * <cn-hex-prism> — the 3D isometric prism primitive.
- *
- * The atomic unit for ConNext platform diagrams. A pointy-top hexagon
- * extruded ~30° in isometric view, three faces tinted from one family
- * palette: top = family-100 (lit), left = family-300, right = family-500,
- * ink = family-700. Six families ship: cobalt (workspace only), coral,
- * lavender, gold, mint, gray.
- *
- * Slots
- *   default   — label text (the prism's name)
- *   icon      — icon SVG / image, sits above the label on the top face
- *   kicker    — small uppercase line under the label (e.g. "DATA · STABLE")
- *   pills     — optional pill stack floating on the top face
- *
- * Attributes
- *   family    cobalt | coral | lavender | gold | mint | gray   (default: coral)
- *   size      sm | md | lg | xl  or any CSS length             (default: md = 144px)
- *   state     coming                                             (optional)
- *
- * Geometry: SVG viewBox 240×252, paths inscribed for a pointy-top hex
- * extruded by R*0.45 (depth vector). All three faces drawn as polygons,
- * face edges drawn as 1.25-stroke polylines at 18% opacity for subtle
- * faceting. The label-content layer sits in the upper portion so the
- * text hits the top face only, not the side faces.
- */
-
-const SIZES = { sm: 96, md: 144, lg: 192, xl: 240 };
-
-const FAMILIES = {
-  cobalt:   { top: 'var(--c-cobalt-100)',   left: 'var(--c-cobalt-400)',   right: 'var(--c-cobalt-700)',   ink: '#fff' },
-  coral:    { top: 'var(--c-coral-100)',    left: 'var(--c-coral-300)',    right: 'var(--c-coral-500)',    ink: 'var(--c-coral-700)' },
-  lavender: { top: 'var(--c-lavender-100)', left: 'var(--c-lavender-300)', right: 'var(--c-lavender-500)', ink: 'var(--c-lavender-700)' },
-  gold:     { top: 'var(--c-gold-100)',     left: 'var(--c-gold-300)',     right: 'var(--c-gold-500)',     ink: 'var(--c-gold-700)' },
-  mint:     { top: 'var(--c-mint-100)',     left: 'var(--c-mint-300)',     right: 'var(--c-mint-500)',     ink: 'var(--c-mint-700)' },
-  gray:     { top: 'var(--c-gray-100)',     left: 'var(--c-gray-300)',     right: 'var(--c-gray-500)',     ink: 'var(--c-gray-700)' },
-};
-
-class CnHexPrism extends HTMLElement {
-  static get observedAttributes() {
-    return ['family', 'size', 'state'];
-  }
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
-
-  connectedCallback() { this.render(); }
-  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
-
-  render() {
-    const familyKey = this.getAttribute('family') || 'coral';
-    const sizeAttr = this.getAttribute('size') || 'md';
-    const state = this.getAttribute('state');
-
-    const f = FAMILIES[familyKey] || FAMILIES.coral;
-    const sizePx = SIZES[sizeAttr] ? `${SIZES[sizeAttr]}px` : sizeAttr;
-
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          --face-top:   ${f.top};
-          --face-left:  ${f.left};
-          --face-right: ${f.right};
-          --ink:        ${f.ink};
-
-          display: inline-block;
-          width: ${sizePx};
-          position: relative;
-          font-family: var(--conduction-typography-font-family-body, system-ui, sans-serif);
-          color: var(--ink);
-        }
-
-        svg.shape { display: block; width: 100%; height: auto; overflow: visible; }
-        svg.shape .face-top   { fill: var(--face-top); }
-        svg.shape .face-left  { fill: var(--face-left); }
-        svg.shape .face-right { fill: var(--face-right); }
-        svg.shape .face-edge  { stroke: var(--ink); stroke-width: 1.25; fill: none; opacity: 0.18; }
-
-        .content {
-          position: absolute;
-          inset: 0;
-          display: flex; flex-direction: column;
-          align-items: center; justify-content: center;
-          padding-bottom: 18%; /* push content onto top face only */
-          color: var(--ink);
-          text-align: center;
-          pointer-events: none;
-        }
-        ::slotted([slot="icon"]) {
-          width: 22%;
-          height: auto;
-          margin-bottom: 4%;
-          color: currentColor;
-          fill: currentColor;
-        }
-        .label {
-          font-size: calc(${sizePx} * 0.10);
-          font-weight: 700;
-          letter-spacing: -0.01em;
-          line-height: 1.15;
-        }
-        ::slotted([slot="kicker"]) {
-          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
-          font-size: calc(${sizePx} * 0.066);
-          letter-spacing: 0.12em;
-          text-transform: uppercase;
-          margin-top: 2%;
-          opacity: 0.78;
-          color: currentColor;
-        }
-        ::slotted([slot="pills"]) {
-          display: flex; flex-direction: column;
-          gap: 4px; margin-top: 4%;
-          align-items: center;
-        }
-
-        ${state === 'coming' ? `
-          .badge {
-            position: absolute;
-            top: 12%; right: 6%;
-            background: var(--c-cobalt-700);
-            color: white;
-            font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
-            font-size: calc(${sizePx} * 0.05);
-            font-weight: 700;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-            padding: 3px 7px;
-            border-radius: 999px;
-            pointer-events: none;
-          }
-        ` : ''}
-      </style>
-
-      <svg class="shape" viewBox="0 0 240 252" aria-hidden="true">
-        <!-- left face -->
-        <polygon class="face-left"  points="120,84 60,118 60,212 120,246"/>
-        <!-- right face -->
-        <polygon class="face-right" points="120,84 180,118 180,212 120,246"/>
-        <!-- top face (drawn last so it sits on top of the side faces at the seam) -->
-        <polygon class="face-top"   points="120,6 180,40 180,118 120,152 60,118 60,40"/>
-        <!-- subtle face edges, point down + center vertical -->
-        <polyline class="face-edge" points="120,84 60,118 120,152 180,118 120,84"/>
-        <polyline class="face-edge" points="120,152 120,246"/>
-      </svg>
-      <div class="content">
-        <slot name="icon"></slot>
-        <span class="label"><slot></slot></span>
-        <slot name="kicker"></slot>
-        <slot name="pills"></slot>
-      </div>
-      ${state === 'coming' ? `<div class="badge">Coming</div>` : ''}
-    `;
-  }
-}
-
-if (!customElements.get('cn-hex-prism')) {
-  customElements.define('cn-hex-prism', CnHexPrism);
-}
-
-export { CnHexPrism };