@conduction/docusaurus-preset 3.33.0 → 3.35.0

package/src/components/LeafMock/LeafMock.jsx

@@ -8,26 +8,39 @@
  *
  * Same abstraction level as <AppMock> (honeycomb.io/technologies/*):
  * greeked content, tokens only, no real text beyond short labels.
- * Four variants:
+ * Four variants, each with a small looping animation on the shared
+ * 6s timeline (--lm-dur):
  *
  *   - contacts: address-book rows with pointy-top hex avatars and a
- *     mint sync arrow to a phone silhouette
+ *     mint sync arrow to a phone silhouette. The arrow pulses and the
+ *     phone rows arrive in a stagger (the sync lands on the phone)
  *   - calendar: mini month grid with one highlighted day and a
- *     linked-event chip (lavender bar)
+ *     linked-event chip (lavender bar). The day pops highlighted,
+ *     then the event chip slides in beneath
  *   - mail:     message list with one highlighted row carrying a
- *     mint "create from email" action chip
- *   - files:    folder/file rows with a link-to-record chip (forest)
+ *     mint "create from email" action chip. The row highlights, then
+ *     the chip pops with an overshoot
+ *   - files:    folder/file rows with a link-to-record chip (forest).
+ *     The linked row slides in, the chip pops, and its link icon
+ *     draws itself (pathLength dash technique)
+ *
+ * `running={false}` (the `.static` frame class) and the user's
+ * prefers-reduced-motion setting freeze each leaf to its meaningful
+ * end state: synced rows, highlighted day + chip, highlighted mail
+ * row + chip, linked file row.
  *
  * Usage:
  *
  *   <LeafMock leaf="contacts" />
  *   <LeafMock leaf="calendar" caption size="sm" />
+ *   <LeafMock leaf="mail" running={false} />
  *
  * Props:
  *   - leaf:      'contacts' | 'calendar' | 'mail' | 'files' (required)
  *   - size:      'sm' | 'md' (default)  — frame width
  *   - caption:   string | true          — small label below the frame;
  *                `true` uses the variant's default label
+ *   - running:   boolean (default true) — false freezes the leaf
  *   - className: string
  */
 
@@ -126,7 +139,9 @@ function FilesLeaf() {
           {i === 1 && (
             <span className={[styles.actionChip, styles.recordChip].join(' ')}>
               <svg className={styles.linkIcon} viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6L12.5 17.5" />
+                {/* pathLength="1" so the draw animation's dash
+                    arithmetic is geometry-independent. */}
+                <path pathLength="1" d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6L12.5 17.5" />
               </svg>
               <Greek w="26px" tone="chip" />
             </span>
@@ -144,7 +159,7 @@ const VARIANTS = {
   files:    {Component: FilesLeaf,    label: 'Files leaf'},
 };
 
-export default function LeafMock({leaf, size = 'md', caption, className}) {
+export default function LeafMock({leaf, size = 'md', caption, running = true, className}) {
   const variant = VARIANTS[leaf];
   if (!variant) {
     return (
@@ -159,7 +174,7 @@ export default function LeafMock({leaf, size = 'md', caption, className}) {
   return (
     <div className={styles.lm}>
       <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
-        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
+        <div className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}>
           <Component />
         </div>
         {caption && (

package/src/components/LeafMock/LeafMock.module.css

@@ -6,6 +6,11 @@
  * Tokens only. Accent discipline per leaf: contacts sync = mint,
  * calendar event bar = lavender, mail action chip = mint, files
  * record chip = forest. No orange anywhere in this component.
+ *
+ * All four leaves animate on the shared --lm-dur timeline (6s),
+ * KanbanMock conventions: base styles are the meaningful end state,
+ * loops reset by opacity swap, `.static` (running={false}) and
+ * prefers-reduced-motion freeze to the base styles.
  */
 
 .lm { display: contents; }
@@ -20,6 +25,7 @@
 }
 
 .lm .frame {
+  --lm-dur: 6s;
   width: 100%;
   max-width: 360px;
   aspect-ratio: 4 / 3;
@@ -235,3 +241,120 @@
 }
 .lm .fileLines { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 .lm .recordChip { background: var(--c-forest-500); }
+
+/* ======================================================================
+   Animations — one shared 6s timeline (--lm-dur) per leaf
+   ====================================================================== */
+
+/* ---- Contacts: the sync arrow double-pulses, then the contact data
+   lands on the phone as three staggered rows. ---- */
+
+.lm .syncArrow { animation: lmSyncPulse var(--lm-dur) ease-in-out infinite; }
+@keyframes lmSyncPulse {
+  0%, 6%    { transform: scale(1); }
+  12%       { transform: scale(1.18); }
+  18%       { transform: scale(1); }
+  26%       { transform: scale(1.18); }
+  32%, 100% { transform: scale(1); }
+}
+
+.lm .phoneRow { animation: lmPhoneRow var(--lm-dur) ease-out infinite both; }
+.lm .phoneRow:nth-child(2) { animation-delay: 0.35s; }
+.lm .phoneRow:nth-child(3) { animation-delay: 0.7s; }
+@keyframes lmPhoneRow {
+  0%, 18%   { opacity: 0; transform: translateX(-4px); }
+  26%, 92%  { opacity: 1; transform: none; }
+  97%, 100% { opacity: 0; transform: none; }
+}
+
+/* ---- Calendar: the linked day pops highlighted, then the event chip
+   slides in beneath the month grid. ---- */
+
+.lm .dayActive { animation: lmDayPop var(--lm-dur) ease-in-out infinite; }
+@keyframes lmDayPop {
+  0%, 8%    { background-color: var(--c-cobalt-50); border-color: var(--c-cobalt-100); transform: scale(1); }
+  16%       { background-color: var(--c-lavender-300); border-color: var(--c-lavender-500); transform: scale(1.35); }
+  22%, 90%  { background-color: var(--c-lavender-300); border-color: var(--c-lavender-500); transform: scale(1); }
+  98%, 100% { background-color: var(--c-cobalt-50); border-color: var(--c-cobalt-100); transform: scale(1); }
+}
+
+.lm .eventChip { animation: lmChipSlide var(--lm-dur) ease-out infinite both; }
+@keyframes lmChipSlide {
+  0%, 22%   { opacity: 0; transform: translateY(8px); }
+  32%, 92%  { opacity: 1; transform: none; }
+  98%, 100% { opacity: 0; transform: none; }
+}
+
+/* ---- Mail: the middle row highlights, then the create-from-email
+   chip pops with an overshoot. ---- */
+
+.lm .mailRowActive { animation: lmRowHl var(--lm-dur) ease-in-out infinite; }
+@keyframes lmRowHl {
+  0%, 10%   { background-color: transparent; border-color: transparent; }
+  20%, 90%  { background-color: var(--c-cobalt-50); border-color: var(--c-cobalt-100); }
+  98%, 100% { background-color: transparent; border-color: transparent; }
+}
+
+.lm .mail .actionChip { transform-origin: center; animation: lmChipPop var(--lm-dur) ease-in-out infinite both; }
+@keyframes lmChipPop {
+  0%, 26%   { opacity: 0; transform: scale(0); }
+  34%       { opacity: 1; transform: scale(1.18); }
+  39%, 90%  { opacity: 1; transform: scale(1); }
+  97%, 100% { opacity: 0; transform: scale(1); }
+}
+
+/* ---- Files: the linked row slides in, the record chip pops, and its
+   link icon draws itself (the path carries pathLength="1"). ---- */
+
+.lm .files .fileRow:nth-child(2) { animation: lmFileRow var(--lm-dur) ease-out infinite both; }
+@keyframes lmFileRow {
+  0%, 8%    { opacity: 0; transform: translateY(-4px); }
+  16%, 92%  { opacity: 1; transform: none; }
+  98%, 100% { opacity: 0; transform: none; }
+}
+
+.lm .files .recordChip { transform-origin: center; animation: lmChipPop var(--lm-dur) ease-in-out infinite both; }
+.lm .files .recordChip .linkIcon path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: lmLinkDraw var(--lm-dur) ease-in-out infinite both;
+}
+@keyframes lmLinkDraw {
+  0%, 34%   { stroke-dashoffset: 1; }
+  56%, 100% { stroke-dashoffset: 0; }
+}
+
+/* ======================================================================
+   Static frames — running={false} adds `.static` to `.lm .frame`; the
+   media query mirrors it for prefers-reduced-motion. Base styles are
+   the end state, so freezing is animation: none plus the icon-draw
+   dash reset.
+   ====================================================================== */
+
+.lm .static .syncArrow,
+.lm .static .phoneRow,
+.lm .static .dayActive,
+.lm .static .eventChip,
+.lm .static .mailRowActive,
+.lm .static .mail .actionChip,
+.lm .static .files .fileRow:nth-child(2),
+.lm .static .files .recordChip,
+.lm .static .files .recordChip .linkIcon path {
+  animation: none;
+}
+.lm .static .files .recordChip .linkIcon path { stroke-dasharray: none; stroke-dashoffset: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .lm .syncArrow,
+  .lm .phoneRow,
+  .lm .dayActive,
+  .lm .eventChip,
+  .lm .mailRowActive,
+  .lm .mail .actionChip,
+  .lm .files .fileRow:nth-child(2),
+  .lm .files .recordChip,
+  .lm .files .recordChip .linkIcon path {
+    animation: none;
+  }
+  .lm .files .recordChip .linkIcon path { stroke-dasharray: none; stroke-dashoffset: 0; }
+}

package/src/components/LeafMock/__tests__/LeafMock.render.test.js

@@ -0,0 +1,105 @@
+/**
+ * LeafMock.render.test.js — SSR-renders the real <LeafMock> for each
+ * of its four leaves and asserts the animation hooks and the P0
+ * `running` prop plumbing (static class on the frame). Same
+ * esbuild-bundle-then-renderToStaticMarkup harness as
+ * KanbanMock.render.test.js; CSS modules stubbed to identity.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'LeafMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-leaf-mock-test');
+
+const LEAVES = ['contacts', 'calendar', 'mail', 'files'];
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let LeafMock;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  LeafMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(LeafMock, props));
+}
+
+test('SSR smoke: every leaf renders a frame, none falls through to Unknown leaf', () => {
+  for (const leaf of LEAVES) {
+    const html = render({leaf});
+    assert.match(html, /class="frame size-md"/, `${leaf}: frame missing`);
+    assert.doesNotMatch(html, /Unknown leaf/, `${leaf}: fell through`);
+  }
+});
+
+test('P0 plumbing: running={false} adds the static class on every leaf; default omits it', () => {
+  for (const leaf of LEAVES) {
+    assert.match(render({leaf, running: false}), /class="frame size-md static"/, `${leaf}: no static frame`);
+    assert.doesNotMatch(render({leaf}), /\bstatic\b/, `${leaf}: static leaked into the running frame`);
+  }
+});
+
+test('contacts: sync arrow and three phone rows (the staggered landing targets)', () => {
+  const html = render({leaf: 'contacts'});
+  assert.match(html, /class="syncArrow"/);
+  assert.equal((html.match(/class="phoneRow"/g) || []).length, 3);
+});
+
+test('calendar: active day and the sliding event chip', () => {
+  const html = render({leaf: 'calendar'});
+  assert.match(html, /day dayActive/);
+  assert.match(html, /class="eventChip"/);
+});
+
+test('mail: highlighted row carries the popping action chip', () => {
+  const html = render({leaf: 'mail'});
+  assert.match(html, /mailRow mailRowActive/);
+  assert.match(html, /class="actionChip"/);
+});
+
+test('files: the record chip link icon carries pathLength="1" for the draw animation', () => {
+  const html = render({leaf: 'files'});
+  assert.match(html, /actionChip recordChip/);
+  assert.match(html, /pathLength="1"/);
+});

package/src/components/MockScene/MockScene.jsx

@@ -44,6 +44,12 @@
  *   - items:     Array of item descriptors (see above)
  *   - width:     scene width in px (default 960)
  *   - height:    scene height in px (default 420)
+ *   - running:   boolean (default true) — the scene assembles: items
+ *     land one by one on a 220ms stagger (opacity + translateY only,
+ *     so the inline left/top positioning is never fought), hold, and
+ *     fade for the loop reset. The loop period derives from the item
+ *     count (--ms-dur, set inline). `running={false}` and
+ *     prefers-reduced-motion show the assembled scene.
  *   - className: string
  */
 
@@ -64,16 +70,24 @@ function renderItem(item) {
   return item.node || null;
 }
 
-export default function MockScene({ items = [], width = 960, height = 420, className }) {
+export default function MockScene({ items = [], width = 960, height = 420, running = true, className }) {
+  /* Landing timing: item i arrives at i × 220ms; ~5s hold after the
+     last landing, then a fade window before the loop restarts. */
+  const STEP = 220;
+  const duration = items.length * STEP + 5600;
   return (
     <div className={[amStyles.am, styles.scene, className].filter(Boolean).join(' ')}>
-      <div className={styles.sceneFrame} style={{ width, height }}>
+      <div
+        className={[styles.sceneFrame, !running && styles.static].filter(Boolean).join(' ')}
+        style={{ width, height, '--ms-dur': `${duration}ms` }}
+      >
         {items.map((item, i) => {
           const wrapperStyle = {
             ...(item.style || {}),
             left: item.x || 0,
             top: item.y || 0,
             zIndex: item.z != null ? item.z : i,
+            animationDelay: `${i * STEP}ms`,
           };
           return (
             <div key={i} className={styles.sceneItem} style={wrapperStyle}>

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

@@ -21,8 +21,28 @@
 
 .am .sceneItem {
   position: absolute;
-  /* `left`, `top`, and optionally `z-index` are set inline by the
-     component from the item's x/y/z values. */
+  /* `left`, `top`, optionally `z-index`, and the landing
+     animation-delay (i × 220ms) are set inline by the component from
+     the item's x/y/z values and index. The landing is transform +
+     opacity only — the inline left/top positioning is never fought.
+     0% and 100% are both hidden, so the staggered delays stay
+     seamless in steady state; `both` keeps a delayed item on its
+     hidden first frame before the initial landing. */
+  animation: msLand var(--ms-dur, 8s) cubic-bezier(0.2, 0.7, 0.3, 1) infinite both;
+}
+
+@keyframes msLand {
+  0%        { opacity: 0; transform: translateY(16px); }
+  4%        { opacity: 1; transform: none; }
+  94%       { opacity: 1; transform: none; }
+  99%, 100% { opacity: 0; transform: none; }
+}
+
+/* Static scene (running={false} and reduced motion): assembled. */
+.am .static .sceneItem { animation: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .am .sceneItem { animation: none; }
 }
 
 /* Widgets inside a scene drop their LaunchPad-style cobalt-900 dashboard

package/src/components/MockScene/__tests__/MockScene.render.test.js

@@ -0,0 +1,101 @@
+/**
+ * MockScene.render.test.js — SSR-renders the real <MockScene> and
+ * asserts the landing-stagger wiring: inline left/top positioning is
+ * preserved untouched (the animation is transform-only), each item
+ * carries its 220ms-stagger animation-delay, the loop period --ms-dur
+ * derives from the item count, and running={false} puts the static
+ * class on the scene frame. Same esbuild harness as
+ * KanbanMock.render.test.js; CSS modules stubbed to identity.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'MockScene.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-mock-scene-test');
+
+const ITEMS = [
+  {type: 'widget', kind: 'nextcloud-mail', x: 0, y: 0, size: 'sm'},
+  {type: 'sidebar', kind: 'openregister-metadata', x: 220, y: 30, size: 'md'},
+  {type: 'widget', kind: 'openregister-activity', x: 540, y: 80, size: 'md'},
+];
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let MockScene;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  MockScene = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(MockScene, props));
+}
+
+test('SSR smoke: renders the scene frame with one wrapper per item', () => {
+  const html = render({items: ITEMS});
+  assert.match(html, /class="sceneFrame"/);
+  assert.equal((html.match(/class="sceneItem"/g) || []).length, ITEMS.length);
+});
+
+test('positioning: inline left/top from item x/y are preserved (animation is transform-only)', () => {
+  const html = render({items: ITEMS});
+  assert.match(html, /left:220px;top:30px/);
+  assert.match(html, /left:540px;top:80px/);
+});
+
+test('landing stagger: each item carries its 220ms-step animation-delay', () => {
+  const html = render({items: ITEMS});
+  for (let i = 0; i < ITEMS.length; i++) {
+    assert.match(html, new RegExp(`animation-delay:${i * 220}ms`), `item ${i}: missing delay`);
+  }
+});
+
+test('loop period: --ms-dur on the frame derives from the item count (+ hold)', () => {
+  const html = render({items: ITEMS});
+  assert.match(html, new RegExp(`--ms-dur:${ITEMS.length * 220 + 5600}ms`));
+});
+
+test('P0 plumbing: running={false} adds the static class to the scene frame; default omits it', () => {
+  assert.match(render({items: ITEMS, running: false}), /class="sceneFrame static"/);
+  assert.doesNotMatch(render({items: ITEMS}), /sceneFrame static/);
+});

package/src/components/SidebarMock/SidebarMock.jsx

@@ -53,7 +53,20 @@
  *                                           .smFrame chrome so the
  *                                           panel slots into
  *                                           AppMock's .body layout
+ *   - running:  boolean (default true)    — false freezes the panel
+ *                                           animation on its settled
+ *                                           end state (same rendering
+ *                                           prefers-reduced-motion
+ *                                           gives)
  *   - className: string
+ *
+ * Animation (wave 5, `.sbLive` in AppMock.module.css): the panel
+ * slides in from the right, the head title/description wipe in, the
+ * active-tab underline travels from the neighbouring tab to the
+ * active one — positioned by the `--sb-ix` / `--sb-n` custom
+ * properties the component sets from the variant's active index —
+ * and the body rows land in a stagger. Base styles are the opened,
+ * settled panel.
  */
 
 import React from 'react';
@@ -175,7 +188,7 @@ const VARIANTS = {
   },
 };
 
-export default function SidebarMock({ kind, size = 'md', embedded = false, className }) {
+export default function SidebarMock({ kind, size = 'md', embedded = false, running = true, className }) {
   const variant = VARIANTS[kind];
   if (!variant) {
     return (
@@ -187,8 +200,19 @@ export default function SidebarMock({ kind, size = 'md', embedded = false, class
     );
   }
   const { Component, tabs } = variant;
+  /* The travelling underline needs the active tab's index and the tab
+     count; both ride custom properties so the CSS can compute the
+     resting offset. It slides in from the neighbouring tab — from the
+     left normally, from the right when the first tab is the active
+     one (there is no left neighbour to come from). */
+  const activeIx = Math.max(0, tabs.findIndex((t) => t.active));
+  const underlineVars = {
+    '--sb-ix': activeIx,
+    '--sb-n': tabs.length,
+    '--sb-from': activeIx > 0 ? '-100%' : '100%',
+  };
   const panel = (
-    <div className={[amStyles.detail, amStyles.rich].join(' ')}>
+    <div className={[amStyles.detail, amStyles.rich, amStyles.sbLive, !running && amStyles.static].filter(Boolean).join(' ')}>
       <div className={amStyles['sb-head']}>
         <div className={amStyles.ico}></div>
         <div className={amStyles.meta}>
@@ -209,6 +233,9 @@ export default function SidebarMock({ kind, size = 'md', embedded = false, class
               <div className={amStyles.l}></div>
             </div>
           ))}
+          {/* Travelling active-tab underline — rests under the active
+              tab; the loop replays the travel from its neighbour. */}
+          <div className={amStyles['sb-underline']} style={underlineVars}></div>
         </div>
       )}
       <div className={amStyles['sb-body']}>

package/src/components/SidebarMock/__tests__/SidebarMock.render.test.js

@@ -0,0 +1,115 @@
+/**
+ * SidebarMock.render.test.js — renders the real <SidebarMock> JSX to
+ * static markup and asserts on the wave-5 animation plumbing: the
+ * panel carries the `.sbLive` scope, `running={false}` puts `.static`
+ * on the panel itself (both standalone and embedded), and the
+ * travelling active-tab underline is present with the `--sb-ix` /
+ * `--sb-n` / `--sb-from` custom properties derived from the
+ * variant's active tab index.
+ *
+ * Same esbuild-bundle-then-renderToStaticMarkup technique as
+ * AppMock.render.test.js; CSS modules stubbed with an identity proxy.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const {before, after} = test;
+const assert = require('node:assert/strict');
+const path = require('node:path');
+const fs = require('node:fs/promises');
+const {build} = require('esbuild');
+const React = require('react');
+const {renderToStaticMarkup} = require('react-dom/server');
+
+const COMPONENT = path.resolve(__dirname, '..', 'SidebarMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-sidebar-mock-test');
+
+/* Must stay in sync with the VARIANTS map in SidebarMock.jsx.
+   activeIx mirrors each variant's active-tab index. */
+const KINDS = {
+  'procest-xwiki': 1,
+  'procest-timeline': 2,
+  'docudesk-signatures': 1,
+  'docudesk-pii-map': 2,
+  'openregister-metadata': 1,
+  'opencatalogi-publication-history': 1,
+  'openconnector-run-detail': 1,
+  'decidesk-decision': 1,
+  'nextcloud-activity': 0,
+};
+
+const cssModuleStub = {
+  name: 'css-module-stub',
+  setup(b) {
+    b.onResolve({filter: /\.module\.css$/}, (args) => ({path: args.path, namespace: 'css-stub'}));
+    b.onLoad({filter: /.*/, namespace: 'css-stub'}, () => ({
+      contents: 'export default new Proxy({}, {get: (_, p) => p});',
+      loader: 'js',
+    }));
+  },
+};
+
+let SidebarMock;
+
+before(async () => {
+  await fs.mkdir(SCRATCH, {recursive: true});
+  const tmpDir = await fs.mkdtemp(path.join(SCRATCH, 'run-'));
+  const outFile = path.join(tmpDir, 'bundle.cjs');
+  await build({
+    entryPoints: [COMPONENT],
+    outfile: outFile,
+    bundle: true,
+    format: 'cjs',
+    jsx: 'automatic',
+    jsxImportSource: 'react',
+    tsconfigRaw: {compilerOptions: {jsx: 'react-jsx', jsxImportSource: 'react'}},
+    platform: 'node',
+    external: ['react'],
+    plugins: [cssModuleStub],
+    logLevel: 'warning',
+  });
+  delete require.cache[require.resolve(outFile)];
+  SidebarMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(SidebarMock, props));
+}
+
+test('SSR smoke: every kind renders the live panel, none falls through to Unknown sidebar', () => {
+  for (const kind of Object.keys(KINDS)) {
+    const html = render({kind});
+    assert.match(html, /detail rich sbLive/, `${kind}: missing sbLive panel scope`);
+    assert.doesNotMatch(html, /Unknown sidebar/, `${kind}: fell through to the unknown branch`);
+  }
+});
+
+test('running={false} puts static on the panel — standalone and embedded', () => {
+  assert.match(render({kind: 'procest-xwiki', running: false}), /detail rich sbLive static/);
+  assert.match(render({kind: 'procest-xwiki', running: false, embedded: true}), /detail rich sbLive static/);
+  assert.doesNotMatch(render({kind: 'procest-xwiki'}), /\bstatic\b/);
+});
+
+test('the travelling underline carries --sb-ix / --sb-n / --sb-from per variant', () => {
+  for (const [kind, ix] of Object.entries(KINDS)) {
+    const html = render({kind});
+    assert.match(html, /class="sb-underline"/, `${kind}: underline missing`);
+    assert.match(html, new RegExp(`--sb-ix:${ix}[;"]`), `${kind}: wrong active index`);
+    assert.match(html, /--sb-n:[0-9]/, `${kind}: tab count missing`);
+    const from = ix > 0 ? '-100%' : '100%';
+    assert.match(html, new RegExp(`--sb-from:${from}`), `${kind}: wrong travel origin`);
+  }
+});
+
+test('embedded mode drops the standalone frame but keeps the live panel', () => {
+  const html = render({kind: 'openregister-metadata', embedded: true});
+  assert.doesNotMatch(html, /smFrame/);
+  assert.match(html, /detail rich sbLive/);
+  assert.match(html, /class="sb-underline"/);
+});