@conduction/docusaurus-preset 2.4.2 → 2.6.0

package/package.json

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

package/src/components/AtomZones/AtomZones.jsx

@@ -0,0 +1,319 @@
+/**
+ * <AtomZones />
+ *
+ * The "Five atoms, one chassis" visual reference. Renders five
+ * zone cards, each focusing on one atom of the canonical Conduction
+ * app chassis: Topbar, Left navigation, Main column, Page header,
+ * Sidebar. The focused atom is outlined in KNVB orange; everything
+ * else fades to 25% opacity so the reader sees *where* the atom
+ * sits in context.
+ *
+ * Mirrors the static-HTML reference at
+ *   preview/components/app-mock.html#five-atoms
+ * so the React surface and the design-system kit page stay aligned.
+ *
+ * Used by Docusaurus consumers (nextcloud-vue.conduction.nl,
+ * procest.conduction.nl, openregister.conduction.nl) to teach the
+ * chassis-plus-atoms pattern on architecture pages.
+ *
+ * Self-contained: bundles its own chassis JSX + zone-focus styles
+ * via :global() in AtomZones.module.css. Doesn't reuse <AppMock/>'s
+ * variants — those intentionally skip the .pageHeader atom — so
+ * the page-header zone can render correctly.
+ *
+ * No props today. A future `app="..."` prop could re-tint the body
+ * accent (cobalt/mint/lavender), but the zone-focus story is
+ * inherently chassis-level, not variant-level.
+ */
+
+import React from 'react';
+import styles from './AtomZones.module.css';
+
+const ZONES = [
+  {
+    code: '.topbar',
+    title: 'Topbar',
+    applies: <><strong>App</strong> &middot; <strong>Desk</strong> &middot; always</>,
+    body:
+      "The Nextcloud chrome row. Sits across every page unconditionally because every Conduction app lives inside Nextcloud's workspace. The shelf icons are the cross-app navigation; per-app links never go here.",
+    focus: 'focusTopbar',
+    facts: [
+      ['Inside', <>logo, 14 app-shelf icons, spacer, optional pill, bell, avatar</>],
+      ['Tokens', <><code>--c-blue-cobalt</code> bg; whites at <code>0.4</code> / <code>0.7</code> / <code>1.0</code> alpha</>],
+      ['Height', <><code>24px</code> fixed; <code>flex-shrink: 0</code></>],
+    ],
+    tips: [
+      { text: "The shelf shows other Nextcloud apps, never this app's own pages" },
+      { text: 'Avatar is the only solid white circle, top-right' },
+      { text: "Don't add a per-app logo here; the body handles that", dont: true },
+    ],
+  },
+  {
+    code: '.nav',
+    title: 'Left navigation',
+    applies: <><strong>App</strong> &middot; required &middot; <em className={styles.never}>Desk: never</em></>,
+    body:
+      "The per-app sidebar. Carries this app's own primary navigation, plus a footer pinned to the bottom for global access (Settings, Feedback). The active item is the only place cobalt-100 backgrounds a row.",
+    focus: 'focusNav',
+    facts: [
+      ['Inside', <>navHead (cobalt-blue card with hex glyph + label), 5&ndash;9 nav items (one with <code>.active</code>), and a <code>.footer</code> with Settings + Feedback pinned to the bottom</>],
+      ['Width', <><code>22%</code>, min <code>100px</code>; <code>flex-shrink: 0</code></>],
+      ['Tokens', <><code>--c-cobalt-50</code> bg; <code>--c-cobalt-100</code> right border + active bg + footer divider; <code>--c-orange-knvb</code> on the navHead hex</>],
+    ],
+    tips: [
+      { text: 'Always exactly one .active item; never zero, never two' },
+      { text: 'Footer always carries Settings + Feedback, anchored bottom via margin-top: auto' },
+      { text: "Don't add per-app sign-out here; the user's avatar in the topbar handles identity", dont: true },
+    ],
+  },
+  {
+    code: '.col',
+    title: 'Main column',
+    applies: <><strong>App</strong> &middot; <strong>Desk</strong> &middot; always</>,
+    body:
+      'The work surface. In an App pattern, the column opens with a .pageHeader (title + actions), then KPI strip and panels. In a Desk pattern, .col nests inside .grid to become a full-bleed widget canvas with no page header.',
+    focus: 'focusCol',
+    facts: [
+      ['Inside', <>App pattern: <code>.pageHeader</code> + <code>.kpiRow</code> + <code>.panelRow</code>s + tables. Desk pattern: <code>.grid</code> with <code>.w</code> widgets (no pageHeader)</>],
+      ['Width', <><code>flex: 1</code>; <code>min-width: 0</code>; <code>overflow: hidden</code></>],
+      ['Tokens', <>White bg; tokens scope to inner panels (<code>--c-cobalt-100</code> borders, <code>--c-mint-500</code> / <code>--c-orange-knvb</code> KPI accents)</>],
+    ],
+    tips: [
+      { text: 'The single orange accent of the variant lives somewhere in here, never in the rails' },
+      { text: "KPI strip is the most-recognisable App-pattern signature; use it when there's a number worth surfacing" },
+      { text: "Don't let panels overflow horizontally; min-width: 0 is load-bearing", dont: true },
+    ],
+  },
+  {
+    code: '.pageHeader',
+    title: 'Page header',
+    applies: <><strong>Index</strong> &middot; <strong>Detail</strong> &middot; <em className={styles.never}>Desk: never</em></>,
+    body:
+      "The first row of .col on every Index and Detail template. Carries the page title (left) and exactly two action buttons (right): one ghost (border-only, secondary action) and one primary (filled cobalt). The header tracks .col's width: when the sidebar is open the header constrains; when the sidebar is closed it spans full-width.",
+    focus: 'focusPageHeader',
+    facts: [
+      ['Inside', <>title-bar (left, cobalt-blue rounded rect with the page title), spacer, then exactly two action buttons: <code>.btn.ghost</code> (white with cobalt border, secondary) on the left of the pair, then <code>.btn</code> (filled cobalt, primary)</>],
+      ['Height', <><code>14&ndash;16px</code> band, sits flush with <code>.col</code>'s top padding</>],
+      ['Width', <>tracks <code>.col</code>: full-spread when sidebar closed, constrained when sidebar open</>],
+      ['Tokens', <><code>--c-blue-cobalt</code> for the title-bar and primary button; <code>--c-cobalt-200</code> border on ghost button; white bg on ghost</>],
+    ],
+    tips: [
+      { text: 'Identical anatomy on Index and Detail; only the title changes' },
+      { text: 'Exactly two buttons, never one, never three. If you need a third action, group into an "Actions…" dropdown behind the ghost button' },
+      { text: "Don't render the page title as plain text inside a panel; the page header IS the title", dont: true },
+    ],
+  },
+  {
+    code: '.detail',
+    title: 'Sidebar',
+    applies: <><strong>App</strong> &middot; optional &middot; <em className={styles.never}>Desk: never</em></>,
+    body:
+      'The right-hand sidebar. Optional, dismissible, anchored to the active record or the active view. Carries an icon + title + description in a header, then a tabbed body (Search / Columns by default). Class stays .detail for code; we call it the Sidebar in copy.',
+    focus: 'focusDetail',
+    facts: [
+      ['Inside', <><code>.sb-head</code> (icon + title + description + close), <code>.sb-tabs</code> (2&ndash;3 tabs, one <code>.active</code>), then a <code>.sb-body</code> of inputs / filters / pinned metadata</>],
+      ['Width', <><code>26%</code>, min <code>130px</code>; <code>flex-shrink: 0</code></>],
+      ['Tokens', <>White bg; <code>--c-cobalt-100</code> left border; <code>--c-blue-cobalt</code> active-tab underline; <code>--c-cobalt-50</code> on the icon background</>],
+    ],
+    tips: [
+      { text: "Sidebar should be dismissible; it's a drawer, not a permanent rail" },
+      { text: 'Default tabs on an Index page: Search + Columns. Default on Detail: Overview + Activity' },
+      { text: "Don't put global navigation here; that's .nav's job. The sidebar is scoped to the current view.", dont: true },
+    ],
+  },
+];
+
+/**
+ * Reference chassis with all five atoms: topbar, nav (with footer),
+ * col (with pageHeader + kpiRow + panelRow), and detail.rich.
+ *
+ * Class names are emitted as global strings so the chassis renders
+ * with the same selectors used in the design-system kit page; the
+ * AtomZones.module.css uses :global(...) to target them. This means
+ * one source of styling for the chassis, regardless of whether it's
+ * loaded inside a CSS-Modules pipeline (preset consumers) or via the
+ * static kit page.
+ */
+function ChassisFrame({ focus }) {
+  return (
+    <div className={`${styles.zoneFrame} ${styles[focus]}`}>
+      <div className="am-frame">
+        <div className="am-topbar">
+          <div className="am-logo"></div>
+          {Array.from({ length: 14 }).map((_, i) => (
+            <div key={i} className="am-icon"></div>
+          ))}
+          <div className="am-spacer"></div>
+          <div className="am-bell"></div>
+          <div className="am-avatar"></div>
+        </div>
+        <div className="am-body">
+          <div className="am-nav">
+            <div className="am-navHead">
+              <div className="am-h"></div>
+              <div className="am-l"></div>
+            </div>
+            {[true, false, false, false, false].map((active, i) => (
+              <div
+                key={i}
+                className={`am-item ${active ? 'am-active' : ''}`}
+              >
+                <div className="am-ico"></div>
+                <div className="am-l"></div>
+              </div>
+            ))}
+            <div className="am-footer">
+              <div className="am-item">
+                <div className="am-ico"></div>
+                <div className="am-l"></div>
+              </div>
+              <div className="am-item">
+                <div className="am-ico"></div>
+                <div className="am-l"></div>
+              </div>
+            </div>
+          </div>
+          <div className="am-col">
+            <div className="am-pageHeader">
+              <div className="am-title-bar"></div>
+              <div className="am-spacer"></div>
+              <div className="am-actions">
+                <div className="am-btn am-ghost"></div>
+                <div className="am-btn"></div>
+              </div>
+            </div>
+            <div className="am-kpiRow">
+              <div className="am-kpi">
+                <div className="am-ico"></div>
+                <div className="am-meta">
+                  <div className="am-num"></div>
+                  <div className="am-label"></div>
+                </div>
+              </div>
+              <div className="am-kpi am-forest">
+                <div className="am-ico"></div>
+                <div className="am-meta">
+                  <div className="am-num"></div>
+                  <div className="am-label"></div>
+                </div>
+              </div>
+              <div className="am-kpi am-amber">
+                <div className="am-ico"></div>
+                <div className="am-meta">
+                  <div className="am-num"></div>
+                  <div className="am-label"></div>
+                </div>
+              </div>
+            </div>
+            <div className="am-panelRow">
+              <div className="am-panel">
+                <div className="am-head">
+                  <div className="am-title"></div>
+                </div>
+                <div className="am-stack">
+                  <div className="am-item">
+                    <div className="am-lines">
+                      <div className="am-l1"></div>
+                    </div>
+                  </div>
+                  <div className="am-item">
+                    <div className="am-lines">
+                      <div className="am-l1"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="am-panel">
+                <div className="am-head">
+                  <div className="am-title"></div>
+                </div>
+                <div className="am-stack">
+                  <div className="am-item">
+                    <div className="am-av am-b"></div>
+                    <div className="am-lines">
+                      <div className="am-l1"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="am-detail am-rich">
+            <div className="am-sb-head">
+              <div className="am-ico"></div>
+              <div className="am-meta">
+                <div className="am-title"></div>
+                <div className="am-desc"></div>
+              </div>
+              <div className="am-close"></div>
+            </div>
+            <div className="am-sb-tabs">
+              <div className="am-sb-tab am-active">
+                <div className="am-ico"></div>
+                <div className="am-l"></div>
+              </div>
+              <div className="am-sb-tab">
+                <div className="am-ico"></div>
+                <div className="am-l"></div>
+              </div>
+            </div>
+            <div className="am-sb-body">
+              <div className="am-sb-input"></div>
+              <div className="am-sb-filter">
+                <div className="am-lbl"></div>
+                <div className="am-field"></div>
+              </div>
+              <div className="am-sb-filter">
+                <div className="am-lbl"></div>
+                <div className="am-field"></div>
+              </div>
+              <div className="am-sb-filter">
+                <div className="am-lbl"></div>
+                <div className="am-field"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ZoneCard({ zone }) {
+  return (
+    <div className={styles.zoneCard}>
+      <div className={styles.zoneHead}>
+        <code>{zone.code}</code>
+        <h3>{zone.title}</h3>
+        <span className={styles.applies}>{zone.applies}</span>
+      </div>
+      <p className={styles.lede}>{zone.body}</p>
+      <ChassisFrame focus={zone.focus} />
+      <dl className={styles.facts}>
+        {zone.facts.map(([term, def], i) => (
+          <React.Fragment key={i}>
+            <dt>{term}</dt>
+            <dd>{def}</dd>
+          </React.Fragment>
+        ))}
+      </dl>
+      <ul className={styles.tips}>
+        {zone.tips.map((tip, i) => (
+          <li key={i} className={tip.dont ? styles.dont : undefined}>
+            {tip.text}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function AtomZones() {
+  return (
+    <div className={styles.zones}>
+      {ZONES.map((zone) => (
+        <ZoneCard key={zone.code} zone={zone} />
+      ))}
+    </div>
+  );
+}

package/src/components/AtomZones/AtomZones.module.css

@@ -0,0 +1,713 @@
+/**
+ * <AtomZones /> styles.
+ *
+ * Two layers:
+ *
+ *   1. Locally-scoped layout (zones grid, zone-card, zone-head,
+ *      facts dl, tips list). Standard CSS-Modules class names.
+ *
+ *   2. The chassis atom toolkit (.am-frame, .am-topbar, .am-nav,
+ *      .am-col, .am-pageHeader, .am-detail, etc.) declared via
+ *      :global() so every chassis renders identically regardless of
+ *      consumer Webpack config. Class names are `am-`-prefixed to
+ *      avoid colliding with Docusaurus host-page utility classes.
+ *
+ * Mirrors the static-HTML reference at
+ *   preview/components/app-mock.html#five-atoms
+ * (the .anatomy .zones / .zone-card / .zone-focus rules and the
+ * inline .frame .pageHeader / .frame .nav .footer additions).
+ *
+ * Tokens only; one orange accent (KNVB) reserved for the focused
+ * atom outline + the navHead hex glyph.
+ */
+
+/* ============================================================
+   Layout — zones grid + zone-card
+   ============================================================ */
+
+.zones {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-5);
+  margin: var(--space-6) 0 var(--space-10);
+}
+
+@media (max-width: 1100px) {
+  .zones {
+    grid-template-columns: 1fr;
+  }
+}
+
+.zoneCard {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.zoneHead {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.zoneHead code {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-50);
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+
+.zoneHead h3 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--c-blue-cobalt);
+  letter-spacing: -0.01em;
+}
+
+.applies {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-left: auto;
+}
+
+.applies strong {
+  color: var(--c-mint-500);
+  font-weight: 500;
+}
+
+.never {
+  color: var(--c-cobalt-300);
+  font-style: italic;
+}
+
+.lede {
+  margin: 0;
+  color: var(--c-cobalt-700);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.facts {
+  margin: 0;
+  display: grid;
+  grid-template-columns: 110px 1fr;
+  gap: 8px var(--space-4);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.facts dt {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  align-self: start;
+  padding-top: 2px;
+}
+
+.facts dd {
+  margin: 0;
+  color: var(--c-cobalt-700);
+}
+
+.facts dd code {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-50);
+  padding: 1px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.tips {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tips li {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--c-cobalt-700);
+  padding-left: 18px;
+  position: relative;
+}
+
+.tips li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 7px;
+  width: 8px;
+  height: 9px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-orange-knvb);
+}
+
+.tips li.dont::before {
+  background: var(--c-red-vermillion, #c0392b);
+}
+
+/* ============================================================
+   Zone frame (the cobalt-50 cushion that holds the chassis)
+   ============================================================ */
+
+.zoneFrame {
+  background: var(--c-cobalt-50);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+}
+
+/* ============================================================
+   Chassis — global so the markup matches the design-system kit
+   ============================================================ */
+
+.zoneFrame :global(.am-frame) {
+  width: 100%;
+  max-width: 560px;
+  margin: 0 auto;
+  aspect-ratio: 16 / 10;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--conduction-typography-font-family-body);
+  position: relative;
+}
+
+/* --- Topbar ---------------------------------------------------- */
+
+.zoneFrame :global(.am-topbar) {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  background: var(--c-blue-cobalt);
+  flex-shrink: 0;
+  height: 24px;
+}
+
+.zoneFrame :global(.am-topbar .am-logo) {
+  width: 16px;
+  height: 12px;
+  border-radius: 6px;
+  background: white;
+}
+
+.zoneFrame :global(.am-topbar .am-icon) {
+  width: 8px;
+  height: 8px;
+  border-radius: 1px;
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.zoneFrame :global(.am-topbar .am-spacer) {
+  flex: 1;
+}
+
+.zoneFrame :global(.am-topbar .am-bell) {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.zoneFrame :global(.am-topbar .am-avatar) {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: white;
+}
+
+/* --- Body wrapper --------------------------------------------- */
+
+.zoneFrame :global(.am-body) {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* --- Left navigation ----------------------------------------- */
+
+.zoneFrame :global(.am-nav) {
+  width: 22%;
+  min-width: 100px;
+  flex-shrink: 0;
+  background: var(--c-cobalt-50);
+  border-right: 1px solid var(--c-cobalt-100);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.zoneFrame :global(.am-nav .am-navHead) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--c-blue-cobalt);
+  padding: 6px;
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+
+.zoneFrame :global(.am-nav .am-navHead .am-h) {
+  width: 8px;
+  height: 9px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-orange-knvb);
+}
+
+.zoneFrame :global(.am-nav .am-navHead .am-l) {
+  flex: 1;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 1px;
+}
+
+.zoneFrame :global(.am-nav .am-item) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  border-radius: 3px;
+}
+
+.zoneFrame :global(.am-nav .am-item.am-active) {
+  background: var(--c-cobalt-100);
+}
+
+.zoneFrame :global(.am-nav .am-item .am-ico) {
+  width: 8px;
+  height: 8px;
+  border-radius: 1px;
+  background: var(--c-cobalt-400);
+  flex-shrink: 0;
+}
+
+.zoneFrame :global(.am-nav .am-item.am-active .am-ico) {
+  background: var(--c-blue-cobalt);
+}
+
+.zoneFrame :global(.am-nav .am-item .am-l) {
+  flex: 1;
+  height: 4px;
+  background: var(--c-cobalt-200);
+  border-radius: 1px;
+}
+
+.zoneFrame :global(.am-nav .am-item.am-active .am-l) {
+  background: var(--c-cobalt-700);
+  height: 5px;
+}
+
+.zoneFrame :global(.am-nav .am-footer) {
+  margin-top: auto;
+  padding-top: 8px;
+  border-top: 1px solid var(--c-cobalt-100);
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+/* --- Main column --------------------------------------------- */
+
+.zoneFrame :global(.am-col) {
+  flex: 1;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* --- Page header --------------------------------------------- */
+
+.zoneFrame :global(.am-pageHeader) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.zoneFrame :global(.am-pageHeader .am-title-bar) {
+  flex: 1;
+  height: 14px;
+  background: var(--c-blue-cobalt);
+  border-radius: 3px;
+  max-width: 45%;
+}
+
+.zoneFrame :global(.am-pageHeader .am-spacer) {
+  flex: 1;
+}
+
+.zoneFrame :global(.am-pageHeader .am-actions) {
+  display: flex;
+  gap: 4px;
+}
+
+.zoneFrame :global(.am-pageHeader .am-actions .am-btn) {
+  height: 14px;
+  width: 38px;
+  background: var(--c-blue-cobalt);
+  border-radius: 3px;
+}
+
+.zoneFrame :global(.am-pageHeader .am-actions .am-btn.am-ghost) {
+  background: white;
+  border: 1px solid var(--c-cobalt-200);
+}
+
+/* --- KPI strip ------------------------------------------------ */
+
+.zoneFrame :global(.am-kpiRow) {
+  display: flex;
+  gap: 6px;
+}
+
+.zoneFrame :global(.am-kpi) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 8px;
+  background: var(--c-cobalt-50);
+  border-radius: 4px;
+}
+
+.zoneFrame :global(.am-kpi .am-ico) {
+  width: 14px;
+  height: 16px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-mint-300);
+  flex-shrink: 0;
+}
+
+.zoneFrame :global(.am-kpi.am-forest .am-ico) {
+  background: var(--c-forest-300);
+}
+
+.zoneFrame :global(.am-kpi.am-amber .am-ico) {
+  background: var(--c-orange-knvb);
+}
+
+.zoneFrame :global(.am-kpi .am-meta) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.zoneFrame :global(.am-kpi .am-num) {
+  height: 7px;
+  background: var(--c-cobalt-900);
+  border-radius: 1px;
+  width: 35%;
+}
+
+.zoneFrame :global(.am-kpi .am-label) {
+  height: 3px;
+  background: var(--c-cobalt-400);
+  border-radius: 1px;
+  width: 70%;
+}
+
+/* --- Panel row + panels --------------------------------------- */
+
+.zoneFrame :global(.am-panelRow) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  flex: 1;
+  min-height: 0;
+}
+
+.zoneFrame :global(.am-panel) {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: 4px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.zoneFrame :global(.am-panel .am-head) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.zoneFrame :global(.am-panel .am-head .am-title) {
+  height: 5px;
+  background: var(--c-cobalt-700);
+  border-radius: 1px;
+  width: 35%;
+}
+
+.zoneFrame :global(.am-panel .am-stack) {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.zoneFrame :global(.am-panel .am-item) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 0;
+  border-bottom: 1px solid var(--c-cobalt-50);
+}
+
+.zoneFrame :global(.am-panel .am-item:last-child) {
+  border-bottom: 0;
+}
+
+.zoneFrame :global(.am-panel .am-item .am-av) {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--c-mint-300);
+  flex-shrink: 0;
+}
+
+.zoneFrame :global(.am-panel .am-item .am-av.am-b) {
+  background: var(--c-lavender-300);
+}
+
+.zoneFrame :global(.am-panel .am-item .am-lines) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.zoneFrame :global(.am-panel .am-item .am-l1) {
+  height: 4px;
+  background: var(--c-cobalt-700);
+  border-radius: 1px;
+  width: 65%;
+}
+
+/* --- Detail / Sidebar (rich) ---------------------------------- */
+
+.zoneFrame :global(.am-detail) {
+  width: 26%;
+  min-width: 130px;
+  flex-shrink: 0;
+  background: white;
+  border-left: 1px solid var(--c-cobalt-100);
+  display: flex;
+  flex-direction: column;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-head) {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-head .am-ico) {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  background: var(--c-cobalt-50);
+  flex-shrink: 0;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-head .am-meta) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-head .am-title) {
+  height: 6px;
+  background: var(--c-cobalt-900);
+  border-radius: 1px;
+  width: 50%;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-head .am-desc) {
+  height: 3px;
+  background: var(--c-cobalt-300);
+  border-radius: 1px;
+  width: 85%;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-head .am-close) {
+  width: 8px;
+  height: 8px;
+  background: var(--c-cobalt-300);
+  flex-shrink: 0;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-tabs) {
+  display: flex;
+  gap: 4px;
+  padding: 4px 10px 0;
+  border-bottom: 1px solid var(--c-cobalt-100);
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-tab) {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px;
+  border-bottom: 2px solid transparent;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-tab.am-active) {
+  border-bottom-color: var(--c-blue-cobalt);
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-tab .am-ico) {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-cobalt-300);
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-tab.am-active .am-ico) {
+  background: var(--c-cobalt-700);
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-tab .am-l) {
+  height: 3px;
+  background: var(--c-cobalt-300);
+  width: 24px;
+  border-radius: 1px;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-tab.am-active .am-l) {
+  background: var(--c-cobalt-700);
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-body) {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  overflow: hidden;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-input) {
+  height: 14px;
+  background: white;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: 3px;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-filter) {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-filter .am-lbl) {
+  height: 3px;
+  background: var(--c-cobalt-400);
+  width: 30%;
+  border-radius: 1px;
+}
+
+.zoneFrame :global(.am-detail.am-rich .am-sb-filter .am-field) {
+  height: 12px;
+  background: white;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: 2px;
+}
+
+/* ============================================================
+   Zone-focus overlay — dim everything except the focused atom
+   ============================================================ */
+
+.zoneFrame :global(.am-topbar),
+.zoneFrame :global(.am-body > .am-nav),
+.zoneFrame :global(.am-body > .am-col),
+.zoneFrame :global(.am-body > .am-detail),
+.zoneFrame :global(.am-pageHeader) {
+  transition: opacity 200ms;
+}
+
+/* Topbar */
+.focusTopbar :global(.am-body) {
+  opacity: 0.25;
+}
+.focusTopbar :global(.am-topbar) {
+  box-shadow: 0 0 0 2px var(--c-orange-knvb);
+}
+
+/* Left navigation */
+.focusNav :global(.am-topbar),
+.focusNav :global(.am-body > .am-col),
+.focusNav :global(.am-body > .am-detail) {
+  opacity: 0.25;
+}
+.focusNav :global(.am-body > .am-nav) {
+  box-shadow: inset 0 0 0 2px var(--c-orange-knvb);
+}
+
+/* Main column */
+.focusCol :global(.am-topbar),
+.focusCol :global(.am-body > .am-nav),
+.focusCol :global(.am-body > .am-detail) {
+  opacity: 0.25;
+}
+.focusCol :global(.am-body > .am-col) {
+  box-shadow: inset 0 0 0 2px var(--c-orange-knvb);
+}
+
+/* Page header */
+.focusPageHeader :global(.am-topbar),
+.focusPageHeader :global(.am-body > .am-nav),
+.focusPageHeader :global(.am-body > .am-detail),
+.focusPageHeader :global(.am-body > .am-col > *:not(.am-pageHeader)) {
+  opacity: 0.25;
+}
+.focusPageHeader :global(.am-pageHeader) {
+  box-shadow: 0 0 0 2px var(--c-orange-knvb);
+  border-radius: 4px;
+}
+
+/* Sidebar */
+.focusDetail :global(.am-topbar),
+.focusDetail :global(.am-body > .am-nav),
+.focusDetail :global(.am-body > .am-col) {
+  opacity: 0.25;
+}
+.focusDetail :global(.am-body > .am-detail) {
+  box-shadow: inset 0 0 0 2px var(--c-orange-knvb);
+}

package/src/components/index.js

@@ -66,6 +66,11 @@ export {Hex, HexPrism, Platform, DomainTree, DiagramPipeline, SideBox, Honeycomb
 export {default as ComposeBlock} from './ComposeBlock/ComposeBlock.jsx';
 export {default as AppsGrid} from './AppsGrid/AppsGrid.jsx';
 export {default as AppMock} from './AppMock/AppMock.jsx';
+export {default as WidgetMock} from './WidgetMock/WidgetMock.jsx';
+export {default as SidebarMock} from './SidebarMock/SidebarMock.jsx';
+export {default as MockScene} from './MockScene/MockScene.jsx';
+export {default as IntegrationIcon} from './IntegrationIcon/IntegrationIcon.jsx';
+export {default as AtomZones} from './AtomZones/AtomZones.jsx';
 export {default as HexNetwork} from './HexNetwork/HexNetwork.jsx';
 export {default as Showcase} from './Showcase/Showcase.jsx';
 export {default as RotatingCards} from './RotatingCards/RotatingCards.jsx';