npm - @conduction/docusaurus-preset - Versions diffs - 2.3.0 → 2.4.0 - Mend

@conduction/docusaurus-preset 2.3.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/package.json +1 -1
package/src/components/AppMock/AppMock.jsx +9 -13
package/src/components/AppMock/AppMock.module.css +55 -21
package/src/components/AppMock/variants/OpenRegisterMock.jsx +20 -15
package/src/components/AppMock/variants/ProcestMock.jsx +6 -1
package/src/components/IntegrationIcon/IntegrationIcon.jsx +55 -0
package/src/components/IntegrationIcon/IntegrationIcon.module.css +34 -0
package/src/components/IntegrationIcon/registry.js +152 -0
package/src/components/MockScene/MockScene.jsx +67 -0
package/src/components/MockScene/MockScene.module.css +99 -0
package/src/components/SidebarMock/SidebarMock.jsx +83 -53
package/src/components/SidebarMock/SidebarMock.module.css +89 -141

package/package.json CHANGED Viewed

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

package/src/components/AppMock/AppMock.jsx CHANGED Viewed

@@ -82,25 +82,21 @@ export default function AppMock({app, size = 'md', sidebar = null, caption = fal
     );
   }
   const {Component, label} = variant;
-  // The `sidebar` prop renders any node as a Nextcloud-style overlay
-  // panel pinned to the right edge of the frame. Typically a
-  // <SidebarMock kind="..." />; the SidebarMock component automatically
-  // drops its standalone chrome via the `embedded` flag we pass here.
-  // Anything else (custom JSX, an image, etc.) renders verbatim inside
-  // the overlay slot.
+  // The `sidebar` prop is forwarded to the variant Component, which
+  // renders it as a flex sibling of `.col` inside the variant's
+  // `.body`, taking the `.detail` slot. SidebarMock children get
+  // `embedded: true` so they drop their standalone .smFrame chrome
+  // and render as the bare `.detail.rich` panel that slots into
+  // .body. Variants that don't accept a sidebar prop (e.g. MyDash)
+  // ignore it; this keeps the change additive.
   const renderedSidebar = React.isValidElement(sidebar)
     ? React.cloneElement(sidebar, { embedded: true })
     : sidebar;
   return (
     <div className={styles.am}>
       <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
-        <div className={[styles.frame, styles[`size-${size}`], renderedSidebar && styles.withSidebar].filter(Boolean).join(' ')}>
-          <Component />
-          {renderedSidebar && (
-            <div className={styles.sidebarOverlay} aria-label="Sidebar overlay">
-              {renderedSidebar}
-            </div>
-          )}
+        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
+          <Component sidebar={renderedSidebar} />
         </div>
         {caption && <figcaption className={styles.caption}>{label}</figcaption>}
       </figure>

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

@@ -47,27 +47,6 @@
 .am .size-md { max-width: 720px; }
 .am .size-lg { max-width: 960px; }
-/* Sidebar overlay: when AppMock receives a `sidebar` prop, the
-   passed JSX renders pinned to the right edge of the frame, full
-   height, modeling a Nextcloud detail panel sliding over the app.
-   The .withSidebar modifier on .frame is a hook for variants that
-   want to dim the underlying canvas; today it doesn't add any
-   styles itself. */
-.am .frame .sidebarOverlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 32%;
-  min-width: 200px;
-  background: white;
-  border-left: 1px solid var(--c-cobalt-200);
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
 .am .caption {
   font-family: var(--conduction-typography-font-family-code);
   font-size: 11px;
@@ -163,6 +142,61 @@
   flex-shrink: 0;
 }
+/* Sidebar (enriched .detail) matches the real Nextcloud sidepanel:
+   header (icon + title + description + close), tabs, then content.
+   Used by SidebarMock embedded mode (slots into <body>'s flex layout
+   as a sibling of .col, taking the .detail slot) and by the kit
+   page templates section. */
+.am .detail.rich { padding: 0; gap: 0; }
+.am .detail.rich .sb-head {
+  display: flex; align-items: center; gap: 6px;
+  padding: 10px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+}
+.am .detail.rich .sb-head .ico {
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-200);
+  flex-shrink: 0;
+}
+.am .detail.rich .sb-head .meta {
+  flex: 1; display: flex; flex-direction: column; gap: 3px;
+  min-width: 0;
+}
+.am .detail.rich .sb-head .title { height: 6px; background: var(--c-cobalt-900); border-radius: 1px; width: 50%; }
+.am .detail.rich .sb-head .desc  { height: 3px; background: var(--c-cobalt-300); border-radius: 1px; width: 85%; }
+.am .detail.rich .sb-head .close { width: 8px; height: 8px; background: var(--c-cobalt-300); flex-shrink: 0; }
+.am .detail.rich .sb-tabs {
+  display: flex;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--c-cobalt-100);
+}
+.am .detail.rich .sb-tab {
+  flex: 1; padding: 6px 0;
+  display: flex; flex-direction: column; align-items: center; gap: 3px;
+  border-bottom: 2px solid transparent;
+}
+.am .detail.rich .sb-tab.active { border-bottom-color: var(--c-blue-cobalt); }
+.am .detail.rich .sb-tab .ico { width: 7px; height: 7px; border-radius: 50%; background: var(--c-cobalt-300); }
+.am .detail.rich .sb-tab.active .ico { background: var(--c-cobalt-700); }
+.am .detail.rich .sb-tab .l { height: 3px; background: var(--c-cobalt-300); width: 24px; border-radius: 1px; }
+.am .detail.rich .sb-tab.active .l { background: var(--c-cobalt-700); }
+/* When a tab carries an <IntegrationIcon> instead of the default
+   .ico dot, tint it via currentColor so inactive tabs stay muted
+   (cobalt-300) and active tabs read in full cobalt-700. */
+.am .detail.rich .sb-tab .ii { color: var(--c-cobalt-300); }
+.am .detail.rich .sb-tab.active .ii { color: var(--c-cobalt-700); }
+.am .detail.rich .sb-body { padding: 10px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
+.am .detail.rich .sb-label { height: 4px; background: var(--c-cobalt-700); width: 40%; border-radius: 1px; }
+.am .detail.rich .sb-input { height: 14px; background: white; border: 1px solid var(--c-cobalt-200); border-radius: 3px; }
+.am .detail.rich .sb-filter { display: flex; flex-direction: column; gap: 4px; }
+.am .detail.rich .sb-filter .lbl  { height: 3px; background: var(--c-cobalt-400); width: 30%; border-radius: 1px; }
+.am .detail.rich .sb-filter .field { height: 12px; background: white; border: 1px solid var(--c-cobalt-200); border-radius: 2px; }
 /* Generic content panel — white card with rounded corners. */
 .am .panel {
   background: white;

package/src/components/AppMock/variants/OpenRegisterMock.jsx CHANGED Viewed

@@ -10,7 +10,7 @@
 import React from 'react';
 import styles from '../AppMock.module.css';
-export default function OpenRegisterMock() {
+export default function OpenRegisterMock({ sidebar = null }) {
   return (
     <>
       <div className={styles.topbar}>
@@ -80,20 +80,25 @@ export default function OpenRegisterMock() {
             </div>
           </div>
         </div>
-        {/* Right detail rail */}
-        <div className={styles.detail}>
-          <div className={styles.row + ' ' + styles.head}></div>
-          <div className={styles.row}></div>
-          <div className={styles.row + ' ' + styles.short}></div>
-          <div style={{height: 8}}></div>
-          <div className={styles.row + ' ' + styles.head}></div>
-          <div className={styles.row + ' ' + styles.dark}></div>
-          <div className={styles.row}></div>
-          <div className={styles.row}></div>
-          <div className={styles.row + ' ' + styles.short}></div>
-          <div className={styles.row + ' ' + styles.accent}></div>
-          <div className={styles.row + ' ' + styles.short}></div>
-        </div>
+        {/* Right detail rail. When AppMock passes a `sidebar` prop
+            (typically a <SidebarMock kind="..." embedded />), it
+            renders as the rich detail rail instead of the placeholder
+            rows. */}
+        {sidebar || (
+          <div className={styles.detail}>
+            <div className={styles.row + ' ' + styles.head}></div>
+            <div className={styles.row}></div>
+            <div className={styles.row + ' ' + styles.short}></div>
+            <div style={{height: 8}}></div>
+            <div className={styles.row + ' ' + styles.head}></div>
+            <div className={styles.row + ' ' + styles.dark}></div>
+            <div className={styles.row}></div>
+            <div className={styles.row}></div>
+            <div className={styles.row + ' ' + styles.short}></div>
+            <div className={styles.row + ' ' + styles.accent}></div>
+            <div className={styles.row + ' ' + styles.short}></div>
+          </div>
+        )}
       </div>
     </>
   );

package/src/components/AppMock/variants/ProcestMock.jsx CHANGED Viewed

@@ -11,7 +11,7 @@
 import React from 'react';
 import styles from '../AppMock.module.css';
-export default function ProcestMock() {
+export default function ProcestMock({ sidebar = null }) {
   return (
     <>
       <div className={styles.topbar}>
@@ -81,6 +81,11 @@ export default function ProcestMock() {
             </div>
           </div>
         </div>
+        {/* Optional sidebar (typically a <SidebarMock kind="..." />)
+            renders here as a flex sibling of .col, taking the .detail
+            slot. Procest's case detail view doesn't ship a default
+            detail rail, so without the prop nothing extra renders. */}
+        {sidebar}
       </div>
     </>
   );

package/src/components/IntegrationIcon/IntegrationIcon.jsx ADDED Viewed

@@ -0,0 +1,55 @@
+/**
+ * <IntegrationIcon />
+ *
+ * Render a token-painted glyph for one of the integrations in the
+ * Conduction registry: Nextcloud-bundled apps (Mail, Calendar, Files,
+ * Talk, Decks, RSS, Activity), workflow tools (xWiki, n8n, Windmill,
+ * OpenProject, Keycloak), LLM providers (Claude, Mistral, Ollama,
+ * OpenAI, Gemini), and adjacent Conduction extensions (OpenTalk,
+ * Matrix, Mattermost, OpenExchange).
+ *
+ * The SVG content lives in registry.js as inline strings, mirroring
+ * the .svg files under brand/assets/integrations/. Both copies use
+ * `fill="currentColor"` (or stroke) so the icon tints to whatever
+ * `color` the parent CSS sets. That means a SidebarMock tab can
+ * render a coloured Mail icon when active and a muted Mail icon when
+ * inactive without swapping the SVG.
+ *
+ * Usage:
+ *
+ *   <IntegrationIcon name="claude" />               // 16×16 default
+ *   <IntegrationIcon name="xwiki" size="md" />      // 24×24
+ *   <IntegrationIcon name="n8n" size="lg" />        // 40×40
+ *
+ * Props:
+ *   - name:  one of INTEGRATIONS keys           (required)
+ *   - size:  'xs' | 'sm' (default) | 'md' | 'lg' | 'xl'
+ *   - title: aria-label override; defaults to registry label
+ *   - className: string
+ */
+import React from 'react';
+import styles from './IntegrationIcon.module.css';
+import amStyles from '../AppMock/AppMock.module.css';
+import { INTEGRATIONS } from './registry.js';
+export default function IntegrationIcon({ name, size = 'sm', title, className }) {
+  const entry = INTEGRATIONS[name];
+  if (!entry) {
+    return (
+      <span
+        className={[amStyles.am, styles.ii, styles[size], className].filter(Boolean).join(' ')}
+        title={`Unknown integration: ${name}`}
+        aria-label={`Unknown integration: ${name}`}
+      />
+    );
+  }
+  return (
+    <span
+      className={[amStyles.am, styles.ii, styles[size], className].filter(Boolean).join(' ')}
+      role="img"
+      aria-label={title || entry.label}
+      dangerouslySetInnerHTML={{ __html: entry.svg }}
+    />
+  );
+}

package/src/components/IntegrationIcon/IntegrationIcon.module.css ADDED Viewed

@@ -0,0 +1,34 @@
+/**
+ * <IntegrationIcon /> styles.
+ *
+ * The icon itself is a 24×24 viewBox SVG with `fill="currentColor"`,
+ * so it tints to whatever colour the parent CSS sets. The wrapper
+ * fixes the rendered box size and inherits the colour from context.
+ */
+/* IntegrationIcon's root element carries `.am` itself so the rules
+   below use a compound selector (no descendant space). The .am scope
+   still namespaces the rule so plain `.ii` on a host page that does
+   not adopt the design system is unaffected. Sizes are compound for
+   the same reason. */
+.am.ii {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 0;
+  color: var(--c-cobalt-700);
+}
+.am.ii svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+/* Sizes match the surfaces that consume the icon: tabs (xs), widget
+   headers (sm), gallery cards (md), hero scene (lg). */
+.am.ii.xs { width: 12px; height: 12px; }
+.am.ii.sm { width: 16px; height: 16px; }
+.am.ii.md { width: 24px; height: 24px; }
+.am.ii.lg { width: 40px; height: 40px; }
+.am.ii.xl { width: 64px; height: 64px; }

package/src/components/IntegrationIcon/registry.js ADDED Viewed

@@ -0,0 +1,152 @@
+/**
+ * Integration icon registry.
+ *
+ * Each entry mirrors the SVG content of a file under
+ * brand/assets/integrations/{category}/{name}.svg. Runtime consumers
+ * (the React <IntegrationIcon /> component, build-kit kit pages,
+ * future SidebarMock tab labels) read inline strings from here so the
+ * icon can render with `currentColor` fill and tint to whatever
+ * colour the parent CSS sets. The .svg files in brand/ are the
+ * designer-readable copy; this file is the consumer copy. They
+ * stay manually in sync (each is one file, edits land in both).
+ *
+ * Categories:
+ *   nextcloud-bundled — surfaces the Nextcloud workspace already
+ *     ships (Mail, Calendar, Files, Talk, Decks, RSS, Activity).
+ *   workflow          — third-party workflow / wiki / SSO tools that
+ *     Conduction integrates with (xWiki, n8n, Windmill, OpenProject,
+ *     Keycloak).
+ *   llm               — large-language-model providers we consume via
+ *     OpenConnector / DocuDesk (Claude, Mistral, Ollama, OpenAI,
+ *     Gemini).
+ *   conduction-ext    — external apps in the Conduction Nextcloud
+ *     ecosystem (OpenTalk, Matrix, Mattermost, OpenExchange).
+ *
+ * The icons themselves are simplified, monochromatic, representational
+ * marks in the Conduction visual style. They are NOT replacements for
+ * official brand marks; consumers that need the canonical logo of a
+ * third-party tool should use that tool's own asset.
+ */
+export const INTEGRATIONS = {
+  // ---- Nextcloud-bundled ----
+  'mail': {
+    category: 'nextcloud-bundled',
+    label: 'Mail',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="6" width="18" height="13" rx="1.5"/><path d="M3.5 7.5l8.5 6 8.5-6"/></svg>',
+  },
+  'calendar': {
+    category: 'nextcloud-bundled',
+    label: 'Calendar',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="1.5"/><path d="M3 10h18M8 3v4M16 3v4"/><circle cx="12" cy="15" r="1.4" fill="currentColor" stroke="none"/></svg>',
+  },
+  'files': {
+    category: 'nextcloud-bundled',
+    label: 'Files',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2.5h8a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>',
+  },
+  'talk': {
+    category: 'nextcloud-bundled',
+    label: 'Talk',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 16V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H8l-4 3z"/></svg>',
+  },
+  'decks': {
+    category: 'nextcloud-bundled',
+    label: 'Decks',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="3" y="4" width="5" height="16" rx="1"/><rect x="9.5" y="4" width="5" height="11" rx="1" opacity="0.7"/><rect x="16" y="4" width="5" height="7" rx="1" opacity="0.4"/></svg>',
+  },
+  'rss': {
+    category: 'nextcloud-bundled',
+    label: 'RSS',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M5 5a14 14 0 0 1 14 14"/><path d="M5 11a8 8 0 0 1 8 8"/><circle cx="6" cy="18" r="2" fill="currentColor"/></svg>',
+  },
+  'activity': {
+    category: 'nextcloud-bundled',
+    label: 'Activity',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12h4l2.5-7 5 14L17 12h4"/></svg>',
+  },
+  // ---- Workflow / auth ----
+  'xwiki': {
+    category: 'workflow',
+    label: 'xWiki',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 4h3.4L9 9.5 11.6 4H15l-4.4 8.5L15 21h-3.4L9 15.5 6.4 21H3l4.4-8.5z"/><rect x="16.5" y="4" width="1.6" height="17" opacity="0.55"/><rect x="19.4" y="4" width="1.6" height="17" opacity="0.35"/></svg>',
+  },
+  'n8n': {
+    category: 'workflow',
+    label: 'n8n',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/><path d="M9 12h6M9 12l9-6M9 12l9 6" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
+  },
+  'windmill': {
+    category: 'workflow',
+    label: 'Windmill',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="2"/><path d="M12 12L17 5L19 8L14 12zM12 12L19 17L16 19L12 14zM12 12L5 7L8 5L12 10z"/><path d="M11 14h2v8h-2z"/></svg>',
+  },
+  'openproject': {
+    category: 'workflow',
+    label: 'OpenProject',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19.35.37h-1.86a4.628 4.628 0 0 0-4.652 4.624v5.609H4.652A4.628 4.628 0 0 0 0 15.23v3.721c0 2.569 2.083 4.679 4.652 4.679h1.86c2.57 0 4.652-2.11 4.652-4.679v-3.72h-2.791v3.88c0 1.026-.835 1.886-1.861 1.886h-1.86c-1.027 0-1.861-.864-1.861-1.886V15.23a1.839 1.839 0 0 1 1.86-1.833h14.697c2.57 0 4.652-2.11 4.652-4.679V4.997A4.628 4.628 0 0 0 19.35.37z"/></svg>',
+  },
+  'keycloak': {
+    category: 'workflow',
+    label: 'Keycloak',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="9" cy="12" r="4"/><circle cx="9" cy="12" r="1.4" fill="#fff"/><path d="M13 12h8M17 12v3M21 12v3" stroke="currentColor" stroke-width="2" fill="none"/></svg>',
+  },
+  // ---- LLMs ----
+  'claude': {
+    category: 'llm',
+    label: 'Claude',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="3.5"/><g stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"><path d="M12 2v4"/><path d="M12 18v4"/><path d="M2 12h4"/><path d="M18 12h4"/><path d="M5.6 5.6l2.8 2.8"/><path d="M15.6 15.6l2.8 2.8"/><path d="M18.4 5.6l-2.8 2.8"/><path d="M8.4 15.6l-2.8 2.8"/></g></svg>',
+  },
+  'mistral': {
+    category: 'llm',
+    label: 'Mistral',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="2" y="3" width="20" height="3" rx="0.5"/><rect x="2" y="8" width="14" height="3" rx="0.5" opacity="0.75"/><rect x="2" y="13" width="20" height="3" rx="0.5" opacity="0.6"/><rect x="2" y="18" width="14" height="3" rx="0.5" opacity="0.4"/></svg>',
+  },
+  'ollama': {
+    category: 'llm',
+    label: 'Ollama',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><ellipse cx="9" cy="14" rx="5" ry="6"/><ellipse cx="14.5" cy="6" rx="2" ry="3"/><path d="M14 9l1.5 2.4 2.5-1z"/><circle cx="6.5" cy="13" r="0.9" fill="#fff"/></svg>',
+  },
+  'openai': {
+    category: 'llm',
+    label: 'OpenAI',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" aria-hidden="true"><polygon points="12,3 21,8 21,16 12,21 3,16 3,8"/><polygon points="12,8 17,11 17,14 12,17 7,14 7,11" fill="currentColor" stroke="none"/></svg>',
+  },
+  'gemini': {
+    category: 'llm',
+    label: 'Gemini',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2L8 8h8z"/><path d="M8 8L4 14l8 8 8-8-4-6z" opacity="0.7"/><circle cx="18.5" cy="4.5" r="1" opacity="0.6"/><circle cx="20" cy="7" r="0.6" opacity="0.4"/></svg>',
+  },
+  // ---- Conduction Nextcloud-extension apps ----
+  'opentalk': {
+    category: 'conduction-ext',
+    label: 'OpenTalk',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="12.5" r="7"/><circle cx="18.5" cy="6.5" r="2.5" fill="currentColor" stroke="none"/></svg>',
+  },
+  'matrix': {
+    category: 'conduction-ext',
+    label: 'Matrix',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>',
+  },
+  'mattermost': {
+    category: 'conduction-ext',
+    label: 'Mattermost',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><path d="M12.081 0C7.048-.034 2.339 3.125.637 8.153c-2.125 6.276 1.24 13.086 7.516 15.21 6.276 2.125 13.086-1.24 15.21-7.516 1.727-5.1-.172-10.552-4.311-13.557l.126 2.547c2.065 2.282 2.88 5.512 1.852 8.549-1.534 4.532-6.594 6.915-11.3 5.321-4.708-1.593-7.28-6.559-5.745-11.092 1.031-3.046 3.655-5.121 6.694-5.67l1.642-1.94A4.87 4.87 0 0 0 12.08 0z"/></svg>',
+  },
+  'openexchange': {
+    category: 'conduction-ext',
+    label: 'OpenExchange',
+    svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><circle cx="8.5" cy="12" r="5"/><path d="M14.5 7l6 10M14.5 17l6-10"/></svg>',
+  },
+};
+export const INTEGRATION_CATEGORIES = {
+  'nextcloud-bundled': { label: 'Nextcloud bundled', desc: 'Surfaces every Nextcloud workspace already ships.' },
+  'workflow':          { label: 'Workflow & auth',   desc: 'Third-party tools we wire into Conduction apps via OpenConnector.' },
+  'llm':               { label: 'LLM providers',     desc: 'Models we call from OpenConnector and DocuDesk.' },
+  'conduction-ext':    { label: 'Conduction extensions', desc: 'Adjacent apps in the Conduction Nextcloud ecosystem.' },
+};

package/src/components/MockScene/MockScene.jsx ADDED Viewed

@@ -0,0 +1,67 @@
+/**
+ * <MockScene />
+ *
+ * Marketing-surface composition. A SidebarMock anchors the centre,
+ * three to five WidgetMocks float around it on a tinted cobalt-50
+ * surface with a soft hex-network watermark. Reach for this when a
+ * card or hero needs to show "data surfaced across the whole
+ * workspace": one sidebar + several widgets, each carrying a real
+ * integration icon, all lit on the same surface.
+ *
+ * Sibling to AppMock + WidgetMock + SidebarMock in the mock family.
+ * AppMock paints a single product surface with chassis chrome.
+ * WidgetMock paints a single dashboard tile. SidebarMock paints a
+ * single detail panel. MockScene paints the overlap.
+ *
+ * Usage:
+ *
+ *   <MockScene
+ *     sidebar={<SidebarMock kind="openregister-metadata" />}
+ *     widgets={[
+ *       { node: <WidgetMock kind="nextcloud-mail" />,     pos: 'top-left' },
+ *       { node: <WidgetMock kind="nextcloud-files" />,    pos: 'top-right' },
+ *       { node: <WidgetMock kind="openregister-activity" />, pos: 'bottom-right' },
+ *     ]}
+ *   />
+ *
+ * Each widget entry is { node, pos } where `pos` selects a corner of
+ * the stage:
+ *   'top-left' | 'top-right' |
+ *   'middle-left' | 'middle-right' |
+ *   'bottom-left' | 'bottom-right'
+ *
+ * Default rotations and offsets give each widget a slight tilt so
+ * the composition reads as playfully arranged rather than gridded.
+ *
+ * Props:
+ *   - sidebar: ReactNode                      (typically <SidebarMock />)
+ *   - widgets: Array<{node: ReactNode, pos: string}>
+ *   - compact: boolean (default false)        — tighter scene for use
+ *                                               inside a card
+ *   - className: string
+ */
+import React from 'react';
+import styles from './MockScene.module.css';
+import amStyles from '../AppMock/AppMock.module.css';
+export default function MockScene({ sidebar, widgets = [], compact = false, className }) {
+  return (
+    <div className={[amStyles.am, styles.scene, className].filter(Boolean).join(' ')}>
+      <div className={[styles.sceneFrame, compact && styles.compact].filter(Boolean).join(' ')}>
+        <div className={styles.sceneStage}>
+          {widgets.map((w, i) => (
+            <div key={i} className={styles.sceneFloat} data-pos={w.pos || 'top-left'}>
+              {w.node}
+            </div>
+          ))}
+          {sidebar && (
+            <div className={styles.sceneCenter}>
+              {sidebar}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MockScene/MockScene.module.css ADDED Viewed

@@ -0,0 +1,99 @@
+/**
+ * <MockScene /> styles.
+ *
+ * Marketing-surface composition. A single sidebar sits at the centre
+ * (slightly larger than its standalone size), with three to five
+ * widgets floating around it at staggered offsets and rotations.
+ * Background: a tinted cobalt-50 surface with a soft hex-network
+ * watermark, so the scene reads as "the workspace" without committing
+ * to a specific app frame.
+ *
+ * Use as the illustration on a card that talks about cross-cutting
+ * integration ("typed data, surfaced everywhere"; "every register,
+ * every workspace surface"). The scene is layout-only; the props pass
+ * through fully-formed SidebarMock + WidgetMock JSX.
+ */
+.am.scene { display: contents; }
+.am .sceneFrame {
+  position: relative;
+  background: var(--c-cobalt-50);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--c-cobalt-100);
+  padding: var(--space-8);
+  min-height: 360px;
+  overflow: hidden;
+  isolation: isolate;
+}
+/* Soft hex-network watermark using radial gradients on top of cobalt-50.
+   Cheap visual texture; no need to bring HexNetwork in for this. */
+.am .sceneFrame::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    radial-gradient(circle at 20% 25%, var(--c-cobalt-100) 0, transparent 35%),
+    radial-gradient(circle at 80% 70%, var(--c-cobalt-100) 0, transparent 35%),
+    radial-gradient(circle at 50% 90%, var(--c-cobalt-100) 0, transparent 30%);
+  opacity: 0.5;
+  pointer-events: none;
+  z-index: 0;
+}
+/* Stage holds the sidebar at the centre and widgets at offsets.
+   position: relative so child position: absolute resolves here. */
+.am .sceneStage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 360px;
+  z-index: 1;
+}
+/* Centre sidebar: anchored, slightly enlarged, drop-shadow for lift. */
+.am .sceneCenter {
+  position: relative;
+  z-index: 4;
+  filter: drop-shadow(0 16px 32px rgba(15, 35, 75, 0.2));
+}
+.am .sceneCenter > .am > .smFrame,
+.am .sceneCenter > .smFrame {
+  width: 320px;
+  height: 440px;
+}
+/* Floating widget wrappers. Each one positions absolutely relative
+   to .sceneStage; the data-pos attribute maps to a corner. */
+.am .sceneFloat {
+  position: absolute;
+  z-index: 2;
+  filter: drop-shadow(0 12px 22px rgba(15, 35, 75, 0.15));
+  transition: transform 200ms;
+}
+.am .sceneFloat[data-pos="top-left"]     { top: 0;       left: 0;       transform: rotate(-3deg); }
+.am .sceneFloat[data-pos="top-right"]    { top: 4%;      right: 0;      transform: rotate(2deg); }
+.am .sceneFloat[data-pos="bottom-left"]  { bottom: 0;    left: 6%;      transform: rotate(2deg); }
+.am .sceneFloat[data-pos="bottom-right"] { bottom: 0;    right: 0;      transform: rotate(-2deg); }
+.am .sceneFloat[data-pos="middle-left"]  { top: 40%;     left: 0;       transform: translateY(-50%) rotate(-2deg); }
+.am .sceneFloat[data-pos="middle-right"] { top: 40%;     right: 0;      transform: translateY(-50%) rotate(2deg); }
+/* Widget frames inside floats: scale down a hair and drop their own
+   shadow so the float-level shadow does the heavy lifting. */
+.am .sceneFloat .wmFrame {
+  box-shadow: none;
+  width: 240px;
+}
+/* Tighter scenes for cards: pass `compact` to the component. */
+.am .sceneFrame.compact {
+  padding: var(--space-6);
+  min-height: 300px;
+}
+.am .sceneFrame.compact .sceneStage { min-height: 300px; }
+.am .sceneFrame.compact .sceneCenter > .am > .smFrame,
+.am .sceneFrame.compact .sceneCenter > .smFrame { width: 260px; height: 360px; }
+.am .sceneFrame.compact .sceneFloat .wmFrame { width: 200px; }

package/src/components/SidebarMock/SidebarMock.jsx CHANGED Viewed

@@ -8,24 +8,32 @@
  * so on). A SidebarMock variant represents one such sidebar with
  * one tab active.
  *
+ * Markup matches the existing .detail.rich pattern that already
+ * lived in the AppMock kit anatomy: a .sb-head row (icon + meta of
+ * title + description + close), a .sb-tabs strip (one per registered
+ * tab, active marker on the current one), and a .sb-body. All
+ * styles live in AppMock.module.css under .am .detail.rich; the
+ * body atoms (smKv / smPerson / smStage / smLog / smPii) live in
+ * SidebarMock.module.css under .am .sb-body so they only apply
+ * inside a sidebar.
+ *
  * Two render modes:
  *
- *   STANDALONE (default): wraps the panel in <div class="am sm"> with
- *   a .smFrame card around it. Use in kit-page specimens or marketing
- *   copy that talks about a single sidebar surface in isolation.
+ *   STANDALONE (default): wraps the .detail.rich panel in
+ *   <div class="am sm"> + .smFrame so it reads as a card on the
+ *   kit page. Use in marketing copy that talks about a single
+ *   sidebar surface in isolation.
  *
  *     <SidebarMock kind="procest-xwiki" />
  *
- *   EMBEDDED: drops the frame so the panel slots directly into the
- *   .sidebarOverlay slot inside an AppMock frame. Set automatically
- *   by AppMock when the `sidebar` prop is a SidebarMock JSX element.
+ *   EMBEDDED: drops the .smFrame wrapper, leaving just
+ *   <div class="detail rich">…</div>. Slots into the .body flex
+ *   layout of an AppMock variant as a sibling of .col, taking the
+ *   detail-rail position. Set automatically by AppMock when the
+ *   `sidebar` prop is a SidebarMock JSX element.
  *
  *     <AppMock app="procest" sidebar={<SidebarMock kind="procest-xwiki" />} />
  *
- * Header bar (title + close) and tab strip are chassis. Body content
- * is per-variant: the JSX file under variants/ provides just the body
- * children, the chassis wraps it.
- *
  * Status colour map matches WidgetMock and AppMock atoms:
  *   mint     = stable / done / signed
  *   orange   = active / pending / due soon
@@ -34,15 +42,17 @@
  *
  * Props:
  *   - kind:     one of VARIANTS keys      (required)
- *   - embedded: boolean (default false)   — drop the standalone chrome
- *                                           so this can render inside
- *                                           an AppMock overlay slot
+ *   - embedded: boolean (default false)   — drop the standalone
+ *                                           .smFrame chrome so the
+ *                                           panel slots into
+ *                                           AppMock's .body layout
  *   - className: string
  */
 import React from 'react';
 import styles from './SidebarMock.module.css';
 import amStyles from '../AppMock/AppMock.module.css';
+import IntegrationIcon from '../IntegrationIcon/IntegrationIcon.jsx';
 import ProcestXWiki                  from './variants/ProcestXWiki.jsx';
 import ProcestTimeline               from './variants/ProcestTimeline.jsx';
@@ -56,95 +66,104 @@ import NextcloudActivity             from './variants/NextcloudActivity.jsx';
 /**
  * Each VARIANTS entry carries:
- *   Component: the JSX that fills the body
+ *   Component: the JSX that fills the .sb-body
  *   label:     human-readable name (used in caption / kit page)
- *   tabs:      ordered list of tab labels with one marked active. The
- *              labels are decorative (kit page renders width-fixed pills)
+ *   tabs:      ordered list of tabs with one .active. The id is
+ *              decorative (rendered as a placeholder bar in .sb-tab .l)
  *              but the active flag drives the highlight.
  */
+/**
+ * Each tab carries an `icon` field: the kebab-case key into the
+ * IntegrationIcon registry (see IntegrationIcon/registry.js). The
+ * SidebarMock renders that icon in the tab's .ico slot, tinted via
+ * currentColor so active tabs read full-cobalt and inactive tabs
+ * read muted-cobalt. The icon makes the tab self-documenting:
+ * Procest's xWiki tab carries the xWiki icon, DocuDesk's Signatures
+ * tab carries an activity-style icon for "stuff happens here", etc.
+ */
 const VARIANTS = {
   'procest-xwiki': {
     Component: ProcestXWiki,
     label: 'Procest · Case sidebar, xWiki tab',
     tabs: [
-      { id: 'activity',  active: false },
-      { id: 'xwiki',     active: true  },
-      { id: 'timeline',  active: false },
-      { id: 'documents', active: false },
+      { id: 'activity',  active: false, icon: 'activity' },
+      { id: 'xwiki',     active: true,  icon: 'xwiki' },
+      { id: 'timeline',  active: false, icon: 'calendar' },
+      { id: 'documents', active: false, icon: 'files' },
     ],
   },
   'procest-timeline': {
     Component: ProcestTimeline,
     label: 'Procest · Case sidebar, Timeline tab',
     tabs: [
-      { id: 'activity',  active: false },
-      { id: 'xwiki',     active: false },
-      { id: 'timeline',  active: true  },
-      { id: 'documents', active: false },
+      { id: 'activity',  active: false, icon: 'activity' },
+      { id: 'xwiki',     active: false, icon: 'xwiki' },
+      { id: 'timeline',  active: true,  icon: 'calendar' },
+      { id: 'documents', active: false, icon: 'files' },
     ],
   },
   'docudesk-signatures': {
     Component: DocuDeskSignatures,
     label: 'DocuDesk · Document sidebar, Signatures tab',
     tabs: [
-      { id: 'activity',      active: false },
-      { id: 'signatures',    active: true  },
-      { id: 'pii',           active: false },
-      { id: 'versions',      active: false },
+      { id: 'activity',   active: false, icon: 'activity' },
+      { id: 'signatures', active: true,  icon: 'mail' },
+      { id: 'pii',        active: false, icon: 'keycloak' },
+      { id: 'versions',   active: false, icon: 'files' },
     ],
   },
   'docudesk-pii-map': {
     Component: DocuDeskPiiMap,
     label: 'DocuDesk · Document sidebar, PII map tab',
     tabs: [
-      { id: 'activity',      active: false },
-      { id: 'signatures',    active: false },
-      { id: 'pii',           active: true  },
-      { id: 'versions',      active: false },
+      { id: 'activity',   active: false, icon: 'activity' },
+      { id: 'signatures', active: false, icon: 'mail' },
+      { id: 'pii',        active: true,  icon: 'keycloak' },
+      { id: 'versions',   active: false, icon: 'files' },
     ],
   },
   'openregister-metadata': {
     Component: OpenRegisterMetadata,
     label: 'OpenRegister · Object sidebar, Metadata tab',
     tabs: [
-      { id: 'activity', active: false },
-      { id: 'metadata', active: true  },
-      { id: 'audit',    active: false },
+      { id: 'activity', active: false, icon: 'activity' },
+      { id: 'metadata', active: true,  icon: 'files' },
+      { id: 'audit',    active: false, icon: 'keycloak' },
     ],
   },
   'opencatalogi-publication-history': {
     Component: OpenCatalogiPublicationHistory,
     label: 'OpenCatalogi · Publication sidebar, History tab',
     tabs: [
-      { id: 'activity', active: false },
-      { id: 'history',  active: true  },
-      { id: 'sources',  active: false },
+      { id: 'activity', active: false, icon: 'activity' },
+      { id: 'history',  active: true,  icon: 'calendar' },
+      { id: 'sources',  active: false, icon: 'rss' },
     ],
   },
   'openconnector-run-detail': {
     Component: OpenConnectorRunDetail,
     label: 'OpenConnector · Run sidebar, Logs tab',
     tabs: [
-      { id: 'activity', active: false },
-      { id: 'logs',     active: true  },
-      { id: 'mapping',  active: false },
+      { id: 'activity', active: false, icon: 'activity' },
+      { id: 'logs',     active: true,  icon: 'n8n' },
+      { id: 'mapping',  active: false, icon: 'windmill' },
     ],
   },
   'decidesk-decision': {
     Component: DeciDeskDecision,
     label: 'DeciDesk · Decision sidebar, Detail tab',
     tabs: [
-      { id: 'activity', active: false },
-      { id: 'detail',   active: true  },
-      { id: 'actions',  active: false },
+      { id: 'activity', active: false, icon: 'activity' },
+      { id: 'detail',   active: true,  icon: 'files' },
+      { id: 'actions',  active: false, icon: 'decks' },
     ],
   },
   'nextcloud-activity': {
     Component: NextcloudActivity,
     label: 'Nextcloud · Stock activity feed',
     tabs: [
-      { id: 'activity', active: true  },
-      { id: 'comments', active: false },
+      { id: 'activity', active: true,  icon: 'activity' },
+      { id: 'comments', active: false, icon: 'talk' },
     ],
   },
 };
@@ -162,19 +181,30 @@ export default function SidebarMock({ kind, embedded = false, className }) {
   }
   const { Component, tabs } = variant;
   const panel = (
-    <div className={styles.smPanel}>
-      <div className={styles.smHead}>
-        <div className={styles.smTitle}></div>
-        <div className={styles.smClose}></div>
+    <div className={[amStyles.detail, amStyles.rich].join(' ')}>
+      <div className={amStyles['sb-head']}>
+        <div className={amStyles.ico}></div>
+        <div className={amStyles.meta}>
+          <div className={amStyles.title}></div>
+          <div className={amStyles.desc}></div>
+        </div>
+        <div className={amStyles.close}></div>
       </div>
       {tabs && tabs.length > 0 && (
-        <div className={styles.smTabs}>
+        <div className={amStyles['sb-tabs']}>
           {tabs.map((t, i) => (
-            <div key={t.id || i} className={[styles.smTab, t.active && styles.smTabActive].filter(Boolean).join(' ')}></div>
+            <div key={t.id || i} className={[amStyles['sb-tab'], t.active && amStyles.active].filter(Boolean).join(' ')}>
+              {t.icon ? (
+                <IntegrationIcon name={t.icon} size="xs" />
+              ) : (
+                <div className={amStyles.ico}></div>
+              )}
+              <div className={amStyles.l}></div>
+            </div>
           ))}
         </div>
       )}
-      <div className={styles.smBody}>
+      <div className={amStyles['sb-body']}>
         <Component />
       </div>
     </div>

package/src/components/SidebarMock/SidebarMock.module.css CHANGED Viewed

@@ -1,29 +1,34 @@
 /**
  * <SidebarMock /> styles.
  *
- * Models the Nextcloud right-side detail panel (the surface where
- * apps register tabs: Activity, Comments, plus app-specific extensions
- * like Procest's xWiki tab or DocuDesk's Signatures tab).
+ * The sidebar chassis (.detail.rich, .sb-head, .sb-tabs, .sb-body and
+ * its built-in atoms .sb-input / .sb-filter / .sb-label) lives in
+ * AppMock/AppMock.module.css. SidebarMock reuses that module so the
+ * panel renders identically whether it is embedded inside an AppMock
+ * (taking the .detail slot in .body's flex layout) or rendered
+ * standalone for kit-page specimens.
  *
- * Two render modes share the same panel internals:
+ * What lives here:
  *
- *   1. STANDALONE (default): the panel renders inside <div class="am sm">
- *      with .smFrame around it (white card, shadow, border-radius). Used
- *      in kit-page specimens and inline marketing copy.
+ *   .smFrame  — the standalone wrapper card (white box, shadow,
+ *               radius, fixed size). Used only when rendering the
+ *               sidebar standalone in marketing copy or kit pages;
+ *               embedded mode skips it so the panel slots into
+ *               .body's flex layout untouched.
  *
- *   2. EMBEDDED: the panel renders inside an <AppMock>'s .sidebarOverlay
- *      via the AppMock `sidebar` prop. The overlay positions absolutely
- *      against the right of the frame and extends full height. SidebarMock
- *      drops the frame/shadow/radius in this mode so it slots cleanly.
- *
- * Both modes pass through the same atom toolkit defined under .smBody
- * here (rows, lists, kvs, log lines). Body content is per-variant.
+ *   .am .sb-body atoms — extra body-level atoms beyond what
+ *               AppMock.module.css already provides under .sb-body
+ *               (.sb-input, .sb-filter, .sb-label). The atoms here
+ *               cover the rest of the marketing surfaces: key/value
+ *               pairs (smKv), person rows with status pip (smPerson),
+ *               stage timelines (smStage), log lines (smLog), and
+ *               PII-redaction pill maps (smPii).
  */
 .am.sm { display: contents; }
-/* ---- Standalone chrome ---- */
+/* Standalone wrapper card. Inside, the .detail.rich panel renders
+   identically to its embedded twin, just clipped to the smFrame box. */
 .am .smFrame {
   width: 300px;
   height: 400px;
@@ -36,110 +41,46 @@
   flex-direction: column;
 }
-/* ---- Panel internals (used in both modes) ---- */
-.am .smPanel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-height: 0;
-  background: white;
-}
-/* Header: title bar plus close button. */
-.am .smHead {
-  padding: 10px 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-bottom: 1px solid var(--c-cobalt-100);
-  flex-shrink: 0;
-}
-.am .smHead .smTitle {
-  flex: 1;
-  height: 5px;
-  background: var(--c-cobalt-700);
-  border-radius: 1px;
-}
-.am .smHead .smClose {
-  width: 10px;
-  height: 10px;
-  background: var(--c-cobalt-300);
-  border-radius: 1px;
-  flex-shrink: 0;
-}
-/* Tab strip: each tab is a width-fixed pill. Active tab is cobalt with
-   a 2px underline that crosses the .smTabs bottom border. */
-.am .smTabs {
-  display: flex;
-  padding: 0 12px;
-  gap: 8px;
-  border-bottom: 1px solid var(--c-cobalt-100);
-  flex-shrink: 0;
-}
-.am .smTab {
-  height: 4px;
-  width: 28px;
-  background: var(--c-cobalt-200);
-  border-radius: 1px;
-  margin: 10px 0 8px;
-  position: relative;
-}
-.am .smTab.smTabActive {
-  background: var(--c-blue-cobalt);
-}
-.am .smTab.smTabActive::after {
-  content: "";
-  position: absolute;
-  bottom: -8px;
-  left: -2px;
-  right: -2px;
-  height: 2px;
-  background: var(--c-blue-cobalt);
-  border-radius: 1px;
-}
-/* Body: scrolling region with stacked sections. */
-.am .smBody {
+/* Inside .smFrame the .detail.rich child needs to fill the box; the
+   default .detail width: 26% rule is meant for an embedded layout so
+   we override here. */
+.am .smFrame > .detail.rich {
+  width: 100%;
+  min-width: 0;
   flex: 1;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 0;
-  overflow: hidden;
+  border-left: none;
 }
-/* ---- Body atoms ---- */
+/* ---- Body atoms beyond the AppMock-provided sb-input / sb-filter ---- */
-/* Generic row. Defaults to a thin neutral bar. Modifiers below tweak it. */
-.am .smBody .row {
+/* Generic row block. Sized by class modifier; defaults to thin neutral. */
+.am .sb-body .row {
   height: 3px;
   background: var(--c-cobalt-200);
   border-radius: 1px;
   flex-shrink: 0;
+  width: 100%;
 }
-.am .smBody .row.head {
+.am .sb-body .row.head {
   height: 5px;
   width: 55%;
   background: var(--c-cobalt-700);
   margin-bottom: 4px;
 }
-.am .smBody .row.short { width: 35%; }
-.am .smBody .row.med   { width: 70%; }
-.am .smBody .row.dark  { background: var(--c-cobalt-700); }
-.am .smBody .row.accent { background: var(--c-orange-knvb); }
+.am .sb-body .row.short { width: 35%; }
+.am .sb-body .row.med   { width: 70%; }
+.am .sb-body .row.dark  { background: var(--c-cobalt-700); }
+.am .sb-body .row.accent { background: var(--c-orange-knvb); }
-/* Section break: horizontal rule with a bit of vertical breathing. */
-.am .smBody .smBreak {
+/* Section break: thin horizontal rule between sub-sections. */
+.am .sb-body .smBreak {
   height: 1px;
   background: var(--c-cobalt-100);
   margin: 4px 0;
 }
-/* Subhead: small block-level title that introduces a section. */
-.am .smBody .smSub {
+/* Subhead: short bold-weight bar that introduces a new section. */
+.am .sb-body .smSub {
   height: 4px;
   width: 40%;
   background: var(--c-cobalt-700);
@@ -147,106 +88,113 @@
   margin-top: 4px;
 }
-/* Key-value list (used for metadata sidebars). Each row is a label +
-   value pair. Label is a short cobalt-400 bar, value is a longer
-   cobalt-700 bar. */
-.am .smBody .smKv {
+/* Key-value list (used for metadata tabs). Label cobalt-400 short bar
+   plus longer cobalt-700 value bar on the same row. */
+.am .sb-body .smKv {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.am .smBody .smKv .k {
+.am .sb-body .smKv .k {
   height: 3px;
   width: 30%;
   background: var(--c-cobalt-400);
   border-radius: 1px;
   flex-shrink: 0;
 }
-.am .smBody .smKv .v {
+.am .sb-body .smKv .v {
   flex: 1;
   height: 3px;
   background: var(--c-cobalt-700);
   border-radius: 1px;
 }
-/* Person row (used for signatures, comments, talk). Avatar plus two
-   text rows plus an optional status pip on the right. */
-.am .smBody .smPerson {
+/* Person row (signatures, comments, history). Avatar + two text rows
+   + optional status pip. .b/.c/.d/.e modifiers shift the avatar to
+   the matching family colour. .pending / .blocked modifiers shift
+   the pip to orange / red. */
+.am .sb-body .smPerson {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.am .smBody .smPerson .av {
+.am .sb-body .smPerson .av {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--c-mint-300);
   flex-shrink: 0;
 }
-.am .smBody .smPerson.b .av { background: var(--c-lavender-300); }
-.am .smBody .smPerson.c .av { background: var(--c-orange-knvb); }
-.am .smBody .smPerson.d .av { background: var(--c-forest-300); }
-.am .smBody .smPerson.e .av { background: var(--c-terracotta-300); }
-.am .smBody .smPerson .lines {
+.am .sb-body .smPerson.b .av { background: var(--c-lavender-300); }
+.am .sb-body .smPerson.c .av { background: var(--c-orange-knvb); }
+.am .sb-body .smPerson.d .av { background: var(--c-forest-300); }
+.am .sb-body .smPerson.e .av { background: var(--c-terracotta-300); }
+.am .sb-body .smPerson .lines {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2px;
   min-width: 0;
 }
-.am .smBody .smPerson .l1 { height: 3px; width: 70%; background: var(--c-cobalt-700); border-radius: 1px; }
-.am .smBody .smPerson .l2 { height: 2px; width: 50%; background: var(--c-cobalt-300); border-radius: 1px; }
-.am .smBody .smPerson .pip {
+.am .sb-body .smPerson .l1 { height: 3px; width: 70%; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .sb-body .smPerson .l2 { height: 2px; width: 50%; background: var(--c-cobalt-300); border-radius: 1px; }
+.am .sb-body .smPerson .pip {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--c-mint-500);
   flex-shrink: 0;
 }
-.am .smBody .smPerson.pending .pip { background: var(--c-orange-knvb); }
-.am .smBody .smPerson.blocked .pip { background: var(--c-red-vermillion); }
+.am .sb-body .smPerson.pending .pip { background: var(--c-orange-knvb); }
+.am .sb-body .smPerson.blocked .pip { background: var(--c-red-vermillion); }
-/* Stage timeline: vertical list with a left-side rail and stage hexes. */
-.am .smBody .smStage {
+/* Stage timeline (case sidebar, Timeline tab). Vertical list with a
+   stage hex on the left and two text rows. Modifiers .now / .late /
+   .todo shift the hex colour. */
+.am .sb-body .smStage {
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.am .smBody .smStage .h {
+.am .sb-body .smStage .h {
   width: 10px;
   height: 11px;
   clip-path: var(--hex-pointy-top);
   background: var(--c-mint-500);
   flex-shrink: 0;
 }
-.am .smBody .smStage.now .h    { background: var(--c-orange-knvb); }
-.am .smBody .smStage.todo .h   { background: var(--c-cobalt-200); }
-.am .smBody .smStage.late .h   { background: var(--c-red-vermillion); }
-.am .smBody .smStage .lines    { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.am .smBody .smStage .l1       { height: 3px; width: 60%; background: var(--c-cobalt-700); border-radius: 1px; }
-.am .smBody .smStage .l2       { height: 2px; width: 40%; background: var(--c-cobalt-300); border-radius: 1px; }
-/* Log line: monospace-ish row with a status colour at the start. */
-.am .smBody .smLog {
+.am .sb-body .smStage.now .h    { background: var(--c-orange-knvb); }
+.am .sb-body .smStage.todo .h   { background: var(--c-cobalt-200); }
+.am .sb-body .smStage.late .h   { background: var(--c-red-vermillion); }
+.am .sb-body .smStage .lines    { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.am .sb-body .smStage .l1       { height: 3px; width: 60%; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .sb-body .smStage .l2       { height: 2px; width: 40%; background: var(--c-cobalt-300); border-radius: 1px; }
+/* Log line (run-detail sidebar). Short timestamp bar + message bar.
+   .warn / .error tint the timestamp to orange / red so the eye can
+   scan severity at a glance. */
+.am .sb-body .smLog {
   display: flex;
   align-items: center;
   gap: 6px;
 }
-.am .smBody .smLog .ts { width: 22px; height: 3px; background: var(--c-cobalt-400); border-radius: 1px; flex-shrink: 0; }
-.am .smBody .smLog .msg { flex: 1; height: 3px; background: var(--c-cobalt-700); border-radius: 1px; }
-.am .smBody .smLog.warn .ts { background: var(--c-orange-knvb); }
-.am .smBody .smLog.error .ts { background: var(--c-red-vermillion); }
+.am .sb-body .smLog .ts { width: 22px; height: 3px; background: var(--c-cobalt-400); border-radius: 1px; flex-shrink: 0; }
+.am .sb-body .smLog .msg { flex: 1; height: 3px; background: var(--c-cobalt-700); border-radius: 1px; }
+.am .sb-body .smLog.warn .ts { background: var(--c-orange-knvb); }
+.am .sb-body .smLog.error .ts { background: var(--c-red-vermillion); }
-/* PII tag: a small inline pill for redacted content. */
-.am .smBody .smPiiBlock {
+/* PII redaction map (DocuDesk PII tab). Inline pills marking spans
+   in a paragraph; .redacted = applied (red), .suggested = proposed
+   (orange), default = neutral text. */
+.am .sb-body .smPiiBlock {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
 }
-.am .smBody .smPii {
+.am .sb-body .smPii {
   height: 6px;
   background: var(--c-cobalt-200);
   border-radius: 1px;
 }
-.am .smBody .smPii.redacted { background: var(--c-red-vermillion); }
-.am .smBody .smPii.suggested { background: var(--c-orange-knvb); }
+.am .sb-body .smPii.redacted { background: var(--c-red-vermillion); }
+.am .sb-body .smPii.suggested { background: var(--c-orange-knvb); }