@conduction/docusaurus-preset 3.33.0 → 3.34.0

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/);
+});