@conduction/docusaurus-preset 2.10.0 → 2.10.2

package/README.md

@@ -6,6 +6,14 @@ Brand-default Docusaurus 3 config for Conduction sites. Tokens, theme, navbar, f
 
 Source lives inside the [design-system monorepo](https://github.com/ConductionNL/design-system); published to npm under the `@conduction` scope as a single package. Install in any product site with `npm i @conduction/docusaurus-preset`. The diagram web-component runtime (`<cn-hex>`, `<cn-platform>`, etc.) ships inside this same package under `@conduction/docusaurus-preset/diagrams` — no separate install needed.
 
+## Brand rules
+
+A few non-negotiables encoded by the package CSS and worth knowing about:
+
+- **App Builder hex is always KNVB orange.** The hex in `<PlatformDiagram/>` representing the "compose your own app" pathway carries `var(--c-orange-knvb)` regardless of whether the cluster ships a `COMING SOON` badge. It is the proposition the eye should land on. Don't gate it on app state.
+- **Pointy-top hexes only, no rotation.** Every `<cn-*>` hex shape is pointy-top by design. Flat-top hexes belong to other brands.
+- **One orange accent per scene.** KNVB orange is the highlight, used once per diagram. The new `<Pair/>` and `<ArchFlow hex>` components own that budget when present.
+
 ## What it gives you
 
 - **Brand CSS** — tokens (cobalt palette, KNVB orange, Plex Mono, hex clip-paths, Common Ground yellow) auto-applied to Docusaurus's Infima theme variables. Navbar, footer, sidebar, buttons, code blocks all inherit the brand without a single swizzle.

package/package.json

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

package/static/lib/platform-diagram.css

@@ -144,6 +144,12 @@ platform-diagram .row .name {
 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; }
+/* Hovered row escapes its own overflow:hidden clip and creates a
+   stacking context so the .desc tooltip can extend below the row AND
+   paint above later-DOM-order siblings. Without overflow:visible the
+   absolute-positioned .desc gets cropped to the row's bounding box;
+   without z-index the .desc has no stacking context to escape. */
+platform-diagram .row:hover { overflow: visible; z-index: 10; }
 
 /* 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
@@ -254,9 +260,11 @@ platform-diagram .workspace-corner-hex.fam-solutions { background: #E34234; }
 platform-diagram .fam-integrate  .glyph,
 platform-diagram .workspace-corner-hex.fam-integrate { background: var(--c-cobalt-400); }
 platform-diagram .fam-builder    .glyph,
-platform-diagram .workspace-corner-hex.fam-builder   { background: var(--c-cobalt-300); }
-/* App Builder hex: KNVB orange (override fam-builder) */
-platform-diagram .workspace-corner-hex.app-builder   { background: var(--c-orange-knvb); }
+platform-diagram .workspace-corner-hex.fam-builder   { background: var(--c-orange-knvb); }
+/* App Builder hex: KNVB orange across the board. The hex represents
+   the "compose your own app" pathway — that's the proposition we want
+   the eye to land on, badge or no badge. */
+platform-diagram .workspace-corner-hex.app-builder { background: var(--c-orange-knvb); }
 platform-diagram .fam-nextcloud  .glyph,
 platform-diagram .workspace-corner-hex.fam-nextcloud { background: var(--c-nextcloud-blue); }
 

package/static/lib/platform-diagram.js

@@ -233,8 +233,9 @@
     if (!list.label || list.position === 'top') return null;
     const positionClass = POSITION_CLASS[list.position] || list.position;
     const familyClass   = list.family ? `fam-${list.family}` : '';
+    const badgeClass    = list.badge ? 'has-badge' : '';
     const hex = document.createElement('div');
-    hex.className = `workspace-corner-hex ${positionClass} ${familyClass}`.trim();
+    hex.className = `workspace-corner-hex ${positionClass} ${familyClass} ${badgeClass}`.trim();
     // Allow newline in label to render a <br>; otherwise straight text.
     if (list.label.includes('\n')) {
       list.label.split('\n').forEach((line, i) => {