@conduction/docusaurus-preset 3.38.0 → 3.39.0

package/src/components/StampRush/__tests__/engine.test.js

@@ -0,0 +1,182 @@
+/**
+ * engine.test.js — the stamp-rush rules.
+ *
+ * The rule worth protecting is the asymmetry: adopting a decision that
+ * has no quorum costs you, and holding one back costs you nothing. A
+ * game that scored both the same would teach the opposite of what the
+ * app does.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, step, stamp, tempo, summarise, SLOTS, READY, NO_QUORUM, CONFLICT, DEFAULTS,
+} = require('../engine.js');
+
+/** Run the clock forward in ticks, so spawns and expiries both fire. */
+function run(state, fromMs, toMs, tick = 60) {
+  let s = state;
+  for (let t = fromMs; t <= toMs; t += tick) s = step(s, t);
+  return s;
+}
+
+function put(state, slot, kind, now = 0, lifeMs = 1000) {
+  const slots = [...state.slots];
+  slots[slot] = {kind, id: `x${slot}`, bornAt: now, expiresAt: now + lifeMs, quorum: {have: 7, need: 7}};
+  return {...state, slots};
+}
+
+test('a new game starts empty, alive and scoreless', () => {
+  const s = createGame({seed: 1});
+  assert.equal(s.slots.length, SLOTS);
+  assert.equal(s.slots.filter(Boolean).length, 0);
+  assert.equal(s.lives, DEFAULTS.lives);
+  assert.equal(s.score, 0);
+  assert.equal(s.over, false);
+});
+
+test('cards appear over time, and never two in one slot', () => {
+  let s = run(createGame({seed: 3}), 0, 6000);
+  const filled = s.slots.filter(Boolean);
+  assert.ok(filled.length > 0, 'nothing ever spawned');
+  assert.ok(filled.length <= SLOTS);
+  const ids = new Set(filled.map((c) => c.id));
+  assert.equal(ids.size, filled.length);
+});
+
+test('adopting a ready decision scores, and a streak pays more each time', () => {
+  let s = createGame({seed: 5});
+  s = put(s, 0, READY);
+  s = stamp(s, 0, 10);
+  const first = s.score;
+  assert.equal(first, DEFAULTS.pointsPerAdopt);
+  assert.equal(s.adopted, 1);
+  assert.equal(s.combo, 1);
+
+  s = put(s, 1, READY);
+  s = stamp(s, 1, 20);
+  assert.equal(s.score - first, DEFAULTS.pointsPerAdopt + DEFAULTS.comboBonus);
+  assert.equal(s.bestCombo, 2);
+});
+
+test('stamping a decision without quorum costs a life and breaks the streak', () => {
+  let s = createGame({seed: 5});
+  s = put(s, 0, READY);
+  s = stamp(s, 0, 10);
+  s = put(s, 1, NO_QUORUM);
+  const before = s.score;
+  s = stamp(s, 1, 20);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.combo, 0);
+  assert.equal(s.score, before, 'a mistake must not also pay');
+  assert.equal(s.mistakes, 1);
+});
+
+test('a conflict of interest is judged exactly like a missing quorum', () => {
+  let s = stamp(put(createGame({seed: 5}), 2, CONFLICT), 2, 10);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+});
+
+test('holding a bad decision back costs nothing, and is counted', () => {
+  let s = put(createGame({seed: 5}), 3, NO_QUORUM, 0, 500);
+  s = step(s, 600);
+  assert.equal(s.lives, DEFAULTS.lives, 'restraint was punished');
+  assert.equal(s.held, 1);
+  assert.equal(s.slots[3], null);
+});
+
+test('letting a ready decision expire costs a life', () => {
+  let s = put(createGame({seed: 5}), 4, READY, 0, 500);
+  s = step(s, 600);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.slots[4], null);
+});
+
+test('three mistakes end the run, and nothing scores after it', () => {
+  let s = createGame({seed: 5});
+  for (let i = 0; i < 3; i++) {
+    s = put(s, i, NO_QUORUM);
+    s = stamp(s, i, 10 * i);
+  }
+  assert.equal(s.over, true);
+  assert.equal(s.lives, 0);
+
+  const after = stamp(put({...s, over: true}, 5, READY), 5, 99);
+  assert.equal(after.score, s.score, 'the board kept scoring after game over');
+});
+
+test('stamping an empty slot is not a mistake', () => {
+  const s = createGame({seed: 5});
+  const after = stamp(s, 2, 10);
+  assert.equal(after.lives, s.lives);
+  assert.equal(after.score, s.score);
+});
+
+test('the board speeds up with the score, down to a floor a person can still read', () => {
+  const slow = tempo(createGame({seed: 1}));
+  const mid = tempo({...createGame({seed: 1}), score: 400});
+  assert.ok(mid.spawnMs < slow.spawnMs, 'the game never got harder');
+  assert.ok(mid.lifeMs < slow.lifeMs);
+  /* 400 points is a good run, not an endless one, and the curve is
+     deliberately still short of its floors there: the floors are the
+     end of the ramp, not the middle of it. */
+  assert.ok(mid.spawnMs > DEFAULTS.spawnFloorMs);
+  assert.ok(mid.lifeMs > DEFAULTS.lifeFloorMs);
+
+  const relentless = tempo({...createGame({seed: 1}), score: 5000});
+  assert.equal(relentless.spawnMs, DEFAULTS.spawnFloorMs, 'the spawn rate never clamps');
+  assert.equal(relentless.lifeMs, DEFAULTS.lifeFloorMs, 'card lifetime never clamps');
+});
+
+test('a full board does not skip its next spawn once a slot frees up', () => {
+  let s = createGame({seed: 9, now: 0});
+  for (let i = 0; i < SLOTS; i++) s = put(s, i, READY, 0, 100000);
+  s = step(s, 5000);
+  assert.equal(s.slots.filter(Boolean).length, SLOTS);
+  s = stamp(s, 0, 5001);
+  s = step(s, 5200);
+  assert.ok(s.slots[0], 'the freed slot stayed empty');
+});
+
+test('the same seed plays the same game, a different one does not', () => {
+  const a = run(createGame({seed: 42}), 0, 4000);
+  const b = run(createGame({seed: 42}), 0, 4000);
+  const c = run(createGame({seed: 43}), 0, 4000);
+  const shape = (s) => s.slots.map((x) => (x ? x.kind : '-')).join(',');
+  assert.equal(shape(a), shape(b));
+  assert.notEqual(shape(a), shape(c));
+});
+
+test('both kinds of decision actually turn up over a long run', () => {
+  let s = createGame({seed: 11});
+  const seen = new Set();
+  for (let t = 0; t < 60000; t += 50) {
+    s = step(s, t);
+    s.slots.forEach((c) => { if (c) seen.add(c.kind); });
+    /* Keep it alive: adopt what is ready, hold the rest. */
+    s.slots.forEach((c, i) => { if (c && c.kind === READY) s = stamp(s, i, t); });
+    if (s.over) break;
+  }
+  assert.ok(seen.has(READY));
+  assert.ok(seen.has(NO_QUORUM) || seen.has(CONFLICT));
+});
+
+test('a perfect player is never punished by the clock', () => {
+  let s = createGame({seed: 21});
+  for (let t = 0; t < 30000; t += 40) {
+    s = step(s, t);
+    s.slots.forEach((c, i) => { if (c && c.kind === READY) s = stamp(s, i, t); });
+  }
+  assert.equal(s.over, false, 'playing correctly still ended the run');
+  assert.equal(s.lives, DEFAULTS.lives);
+  assert.ok(s.score > 0);
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {adopted: 12, bestCombo: 5};
+  assert.match(summarise(s, 'en'), /12 decisions adopted · streak 5/);
+  assert.match(summarise(s, 'nl'), /12 besluiten vastgesteld · reeks 5/);
+});

package/src/components/StampRush/engine.js

@@ -0,0 +1,185 @@
+/**
+ * Stamp rush — the rules, with no DOM and no clock of its own.
+ *
+ * Decidiq's game. Decisions land on your desk faster than you can read
+ * them, and the whole job is telling apart the ones you may adopt from
+ * the ones you may not. Stamping a decision that has no quorum, or one
+ * you should have declared an interest in, is the mistake the app
+ * exists to prevent, so here it costs you.
+ *
+ * Time and randomness are injected. The component owns the clock; this
+ * file owns the rules, which is what makes them testable and what
+ * keeps the arcade from being the only place they are written down.
+ *
+ *   let s = createGame({seed: 7});
+ *   s = step(s, now);          // expire what is stale, spawn what is due
+ *   s = stamp(s, slotIndex, now);
+ */
+
+export const SLOTS = 6;
+
+/* Card kinds. Only `ready` may be stamped; the other two are the
+   decisions a secretary is supposed to hold back. */
+export const READY = 'ready';
+export const NO_QUORUM = 'noQuorum';
+export const CONFLICT = 'conflict';
+
+export const DEFAULTS = {
+  lives: 3,
+  /* Spawn cadence and card lifetime both tighten as the score climbs,
+     which is the whole difficulty curve. The floors are what a person
+     can still react to: under about 400ms between cards the board
+     stops being readable, and a card that lives under 900ms cannot be
+     read before it has to be judged. */
+  spawnStartMs: 1100,
+  spawnFloorMs: 420,
+  lifeStartMs: 1900,
+  lifeFloorMs: 900,
+  rampPerPoint: 1.4,
+  /* Two in five cards must be held back. Fewer and the game is a
+     clicking exercise; more and it is mostly waiting. */
+  badShare: 0.4,
+  pointsPerAdopt: 10,
+  comboBonus: 2,
+};
+
+/* A small deterministic generator, so a test can pin a run and a
+   player still gets a different board every time. */
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return function random() {
+    a |= 0; a = (a + 0x6D2B79F5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  return {
+    cfg,
+    random: mulberry32(seed),
+    slots: Array.from({length: SLOTS}, () => null),
+    score: 0,
+    lives: cfg.lives,
+    combo: 0,
+    bestCombo: 0,
+    adopted: 0,
+    held: 0,
+    mistakes: 0,
+    startedAt: now,
+    nextSpawnAt: now + cfg.spawnStartMs,
+    over: false,
+  };
+}
+
+/** Interval and lifetime at the current score. */
+export function tempo(state) {
+  const {cfg, score} = state;
+  const shed = score * cfg.rampPerPoint;
+  return {
+    spawnMs: Math.max(cfg.spawnFloorMs, cfg.spawnStartMs - shed),
+    lifeMs: Math.max(cfg.lifeFloorMs, cfg.lifeStartMs - shed),
+  };
+}
+
+function loseLife(state) {
+  const lives = state.lives - 1;
+  return {...state, lives, combo: 0, mistakes: state.mistakes + 1, over: lives <= 0};
+}
+
+/**
+ * Advance the board to `now`: expire cards whose time is up, then
+ * spawn at most one card per call into a free slot.
+ *
+ * Letting a ready decision expire costs a life. Letting one of the
+ * others expire is the correct call and costs nothing, which is the
+ * only way the game can reward restraint.
+ */
+export function step(state, now) {
+  if (state.over) return state;
+  let next = {...state, slots: [...state.slots]};
+
+  for (let i = 0; i < next.slots.length; i++) {
+    const card = next.slots[i];
+    if (!card || now < card.expiresAt) continue;
+    next.slots[i] = null;
+    if (card.kind === READY) {
+      next = {...loseLife(next), slots: next.slots};
+      if (next.over) return next;
+    } else {
+      next.held = next.held + 1;
+    }
+  }
+
+  if (now >= next.nextSpawnAt) {
+    const free = [];
+    for (let i = 0; i < next.slots.length; i++) if (!next.slots[i]) free.push(i);
+    if (free.length) {
+      const {spawnMs, lifeMs} = tempo(next);
+      const slot = free[Math.floor(next.random() * free.length)];
+      const roll = next.random();
+      const kind = roll < next.cfg.badShare
+        ? (roll < next.cfg.badShare / 2 ? NO_QUORUM : CONFLICT)
+        : READY;
+      next.slots[slot] = {
+        kind,
+        id: `${slot}-${Math.round(now)}`,
+        bornAt: now,
+        expiresAt: now + lifeMs,
+        /* Shown on the card so the player has something to read
+           rather than a colour to memorise. */
+        quorum: kind === NO_QUORUM
+          ? {have: 2 + Math.floor(next.random() * 3), need: 7}
+          : {have: 7, need: 7},
+      };
+      next.nextSpawnAt = now + spawnMs;
+    } else {
+      /* Board full: try again shortly rather than skipping a beat. */
+      next.nextSpawnAt = now + 120;
+    }
+  }
+
+  return next;
+}
+
+/**
+ * Stamp the card in `slot`.
+ *
+ * Stamping an empty slot is not punished: the game is about judging
+ * what is in front of you, and a jumpy hand is not the mistake being
+ * taught here.
+ */
+export function stamp(state, slot, now) {
+  if (state.over) return state;
+  const card = state.slots[slot];
+  if (!card) return state;
+
+  const slots = [...state.slots];
+  slots[slot] = null;
+
+  if (card.kind !== READY) {
+    return {...loseLife({...state, slots}), slots};
+  }
+
+  const combo = state.combo + 1;
+  const gained = state.cfg.pointsPerAdopt + (combo - 1) * state.cfg.comboBonus;
+  return {
+    ...state,
+    slots,
+    score: state.score + gained,
+    combo,
+    bestCombo: Math.max(state.bestCombo, combo),
+    adopted: state.adopted + 1,
+    lastGain: {slot, points: gained, at: now},
+  };
+}
+
+/** The line that goes on the game-over card and into the post. */
+export function summarise(state, locale = 'en') {
+  const n = (v) => Number(v || 0).toLocaleString(locale);
+  return locale === 'nl'
+    ? `${n(state.adopted)} besluiten vastgesteld · reeks ${n(state.bestCombo)}`
+    : `${n(state.adopted)} decisions adopted · streak ${n(state.bestCombo)}`;
+}

package/src/components/ThemeSeamMock/ThemeSeamMock.jsx

@@ -0,0 +1,79 @@
+/**
+ * <ThemeSeamMock />
+ *
+ * One application, twice: the stock Conduction finish underneath, a
+ * second design system stitched over the top of it. A seam travels
+ * across the frame and the surface behind it changes finish, then the
+ * loop hands the frame back.
+ *
+ * The mock makes one argument, and it is the argument Thematiq makes:
+ * an application that paints from tokens rethemes when the tokens
+ * change. Nothing here restyles a component. The themed layer is the
+ * same <AppMock /> inside a wrapper that redefines the palette and
+ * radius tokens, which is exactly what installing a token set does to
+ * a Nextcloud.
+ *
+ * Usage:
+ *
+ *   <ThemeSeamMock app="openregister" theme="lasuite" />
+ *   <ThemeSeamMock app="nldesign" size="sm" running={false} />
+ *
+ * Props:
+ *   - app:     an AppMock slug (default 'openregister')
+ *   - theme:   a key of THEMES (default 'lasuite') — the finish that
+ *              is stitched over the stock one
+ *   - size:    'sm' | 'md' (default) — forwarded to AppMock
+ *   - running: boolean (default true). false renders the themed end
+ *              state with the seam at rest, the same thing
+ *              prefers-reduced-motion gives.
+ *   - label:   optional caption under the frame
+ *   - className: string
+ *
+ * Both layers run their own AppMock with `running={false}`: the
+ * variant's own loop would compete with the seam for attention, and
+ * the two layers have to stay in identical states or the wipe reveals
+ * a different screen instead of a different finish.
+ */
+
+import React from 'react';
+import AppMock from '../AppMock/AppMock.jsx';
+import styles from './ThemeSeamMock.module.css';
+
+/* Each theme is a class on the themed layer that redefines tokens.
+   Adding one is a CSS block plus a line here, never a new component. */
+const THEMES = {
+  lasuite: {className: 'lasuite', label: 'La Suite'},
+};
+
+export default function ThemeSeamMock({
+  app = 'openregister',
+  theme = 'lasuite',
+  size = 'md',
+  running = true,
+  label,
+  className,
+}) {
+  const resolvedTheme = THEMES[theme] || THEMES.lasuite;
+  const composed = [
+    styles.seamScene,
+    styles[`size-${size}`],
+    !running && styles.static,
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <figure className={composed}>
+      <div className={styles.stack}>
+        <div className={styles.layer}>
+          <AppMock app={app} size={size} running={false} />
+        </div>
+        <div className={[styles.layer, styles.themed, styles[resolvedTheme.className]].join(' ')}>
+          <AppMock app={app} size={size} running={false} />
+        </div>
+        {/* The seam itself: the stitch line the two halves meet on. */}
+        <span className={styles.seam} aria-hidden="true" />
+      </div>
+      {label && <figcaption className={styles.caption}>{label}</figcaption>}
+    </figure>
+  );
+}

package/src/components/ThemeSeamMock/ThemeSeamMock.module.css

@@ -0,0 +1,178 @@
+/**
+ * <ThemeSeamMock /> styles.
+ *
+ * Three things happen here.
+ *
+ * 1. The themed layer sits exactly on top of the stock one and is
+ *    clipped from the left, so animating the clip wipes one finish
+ *    over the other. Both layers render the same frame, so the wipe
+ *    reads as a change of finish rather than a change of screen.
+ * 2. The themed finish is nothing but redefined tokens. Every rule in
+ *    AppMock.module.css paints from the palette and radius tokens, so
+ *    redefining them on an ancestor rethemes the whole frame without
+ *    one component-level override. That is the mock's entire claim.
+ * 3. The seam travels with the clip edge, drawn as a stitch rather
+ *    than a plain line.
+ *
+ * Conventions from the animated-atomics waves apply: one duration
+ * token (--ts-dur) drives the loop, the loop resets while the seam is
+ * invisible, and `.static` / prefers-reduced-motion render the
+ * themed end state rather than a blank or a half-wiped frame.
+ */
+
+.seamScene {
+  --ts-dur: 9s;
+  margin: 0;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+  max-width: 720px;
+}
+/* Scoped to .seamScene on purpose. `size-sm` / `size-md` are class
+   names several mock components share, so the extracted stylesheet
+   merges them into one selector group that can land before
+   .seamScene's own rule. At equal specificity that group loses, the
+   scene keeps the 720px default while the frame inside it caps at
+   480, and the seam then travels 24px past the frame it is crossing.
+   Chaining the two classes settles it by specificity instead of by
+   source order. Keep these in step with AppMock's frame widths: the
+   scene box and the frame box have to be the same box. */
+.seamScene.size-sm { max-width: 480px; }
+.seamScene.size-md { max-width: 720px; }
+
+/* Both layers occupy one grid cell, and the cell carries the frame's
+   own 16/10 ratio. Stacking them with `position: absolute` instead
+   lets the cell take its height from the surrounding column, and then
+   the frame's aspect ratio makes the frame narrower than the box the
+   seam and the clip run across: the seam finishes past the right edge
+   of the frame it is supposed to be crossing. The grid cell and the
+   frame are the same box, so they cannot drift apart. */
+.stack {
+  position: relative;
+  display: grid;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  isolation: isolate;
+}
+
+.layer {
+  grid-area: 1 / 1;
+  width: 100%;
+  height: 100%;
+}
+
+/* ======================================================================
+   The finishes
+   ====================================================================== */
+
+/* La Suite: neutral greyscale surfaces, violet accent, four-pixel
+   corners. The values come from the deployed Cunningham palette; the
+   point is not the exact hex but that nothing below the token layer
+   had to change. */
+.lasuite {
+  --c-blue-cobalt: #6A6AF4;
+  --c-cobalt-900: #161616;
+  --c-cobalt-800: #242424;
+  --c-cobalt-700: #3A3A3A;
+  --c-cobalt-600: #6A6A6A;
+  --c-cobalt-500: #6A6AF4;
+  --c-cobalt-400: #929292;
+  --c-cobalt-300: #CECECE;
+  --c-cobalt-200: #E5E5E5;
+  --c-cobalt-100: #EEEEEE;
+  --c-cobalt-50:  #F6F6F6;
+  --c-lavender-500: #6A6AF4;
+  --c-lavender-300: #C5C5FB;
+  --radius-lg: 4px;
+  --radius-md: 4px;
+  --radius-sm: 2px;
+}
+
+/* ======================================================================
+   The seam
+   ====================================================================== */
+
+.seam {
+  position: absolute;
+  top: -2%;
+  bottom: -2%;
+  left: 0;
+  width: 2px;
+  z-index: 2;
+  /* A stitch, not a rule: dashes with a cross-hatch either side. */
+  background:
+    repeating-linear-gradient(
+      to bottom,
+      var(--c-cobalt-700) 0 6px,
+      transparent 6px 12px
+    );
+  opacity: 0;
+}
+.seam::before,
+.seam::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 7px;
+  background:
+    repeating-linear-gradient(
+      to bottom,
+      transparent 0 3px,
+      var(--c-cobalt-400) 3px 4px,
+      transparent 4px 12px
+    );
+}
+.seam::before { right: 100%; }
+.seam::after  { left: 100%; }
+
+.caption {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--c-cobalt-400);
+  text-transform: uppercase;
+  text-align: center;
+}
+
+/* ======================================================================
+   The loop
+   ====================================================================== */
+
+/* End state, and what a frozen frame shows: the themed finish, whole,
+   with no seam across it. */
+.themed { clip-path: inset(0 0 0 0); }
+
+@media (prefers-reduced-motion: no-preference) {
+  .seamScene:not(.static) .themed {
+    animation: tsWipe var(--ts-dur) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+  .seamScene:not(.static) .seam {
+    animation: tsSeam var(--ts-dur) cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  /* Stock frame for the first beat, the finish wipes across, then it
+     holds. The reset happens in one step at the very end, while the
+     themed layer is fading rather than sliding, so no rewind is
+     visible. */
+  @keyframes tsWipe {
+    0%, 14%   { clip-path: inset(0 100% 0 0); opacity: 1; }
+    52%       { clip-path: inset(0 0 0 0);    opacity: 1; }
+    88%       { clip-path: inset(0 0 0 0);    opacity: 1; }
+    97%       { clip-path: inset(0 0 0 0);    opacity: 0; }
+    97.01%    { clip-path: inset(0 100% 0 0); opacity: 0; }
+    100%      { clip-path: inset(0 100% 0 0); opacity: 1; }
+  }
+
+  /* The seam has to share tsWipe's start (14%), end (52%) and range
+     (0 to 100%) exactly. Starting it two percent later and four
+     percent along left the stitch trailing the edge it is supposed to
+     be cutting by about thirty pixels in the middle of the sweep. */
+  @keyframes tsSeam {
+    0%, 13.9% { left: 0;    opacity: 0; }
+    14%       { left: 0;    opacity: 1; }
+    52%       { left: 100%; opacity: 1; }
+    60%, 100% { left: 100%; opacity: 0; }
+  }
+}