@conduction/docusaurus-preset 2.3.1 → 2.4.0

package/package.json

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

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

@@ -184,6 +184,12 @@
 .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; }

package/src/components/IntegrationIcon/IntegrationIcon.jsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -52,6 +52,7 @@
 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';
@@ -71,89 +72,98 @@ import NextcloudActivity             from './variants/NextcloudActivity.jsx';
  *              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' },
     ],
   },
 };
@@ -184,7 +194,11 @@ export default function SidebarMock({ kind, embedded = false, className }) {
         <div className={amStyles['sb-tabs']}>
           {tabs.map((t, i) => (
             <div key={t.id || i} className={[amStyles['sb-tab'], t.active && amStyles.active].filter(Boolean).join(' ')}>
-              <div className={amStyles.ico}></div>
+              {t.icon ? (
+                <IntegrationIcon name={t.icon} size="xs" />
+              ) : (
+                <div className={amStyles.ico}></div>
+              )}
               <div className={amStyles.l}></div>
             </div>
           ))}