@conduction/docusaurus-preset 3.43.0 → 3.44.1

package/src/components/Reconcile/engine.js

@@ -0,0 +1,228 @@
+/**
+ * Reconcile — the rules, with no DOM and no clock of its own.
+ *
+ * Shillinq's game. The bank statement is in and the invoices are open.
+ * Match each payment to the invoice it settles, before the month
+ * closes. One of the lines on the statement matches nothing at all,
+ * and sending that one to an invoice is how money goes missing
+ * quietly.
+ *
+ * So there are three moves, not two: match it, or flag it as the one
+ * that does not belong. Flagging a genuine payment is a mistake too,
+ * because a bookkeeper who cries wolf at every line is a bookkeeper
+ * nobody listens to.
+ *
+ * Time and randomness are injected; the component owns the clock.
+ */
+
+/* Round amounts in whole euros: the game is about matching, not about
+   arithmetic with cents. */
+const AMOUNTS = [120, 240, 360, 480, 750, 900, 1240, 1600, 2100, 3400];
+const REFERENCES = ['2026-014', '2026-027', '2026-031', '2026-048', '2026-052', '2026-066'];
+
+export const DEFAULTS = {
+  lives: 3,
+  invoices: 4,
+  clockStartMs: 24000,
+  clockFloorMs: 9000,
+  rampPerPoint: 90,
+  pointsPerMatch: 8,
+  pointsPerFraud: 20,
+  pointsPerSheet: 12,
+};
+
+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;
+  };
+}
+
+function shuffled(list, random) {
+  const out = [...list];
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+
+export function clockMs(state) {
+  return Math.max(state.cfg.clockFloorMs, state.cfg.clockStartMs - state.score * state.cfg.rampPerPoint);
+}
+
+/**
+ * Deal a sheet: N invoices, N payments that settle them, and one more
+ * payment that settles nothing.
+ *
+ * The odd one out is built from an amount no invoice carries, because
+ * a fraud line that happens to equal a real invoice would make the
+ * right answer unknowable.
+ */
+function deal(state, now) {
+  const amounts = shuffled(AMOUNTS, state.random).slice(0, state.cfg.invoices);
+  const references = shuffled(REFERENCES, state.random);
+
+  const invoices = amounts.map((amount, i) => ({
+    id: `inv-${i}`,
+    reference: references[i % references.length],
+    amount,
+    settled: false,
+  }));
+
+  const payments = invoices.map((invoice, i) => ({
+    id: `pay-${i}`,
+    amount: invoice.amount,
+    reference: invoice.reference,
+    fraud: false,
+    done: false,
+  }));
+
+  const spare = AMOUNTS.filter((a) => !amounts.includes(a));
+  payments.push({
+    id: 'pay-odd',
+    amount: spare[Math.floor(state.random() * spare.length)],
+    /* A reference nobody issued: close enough to look filed, wrong
+       enough to be findable. */
+    reference: `2026-${900 + Math.floor(state.random() * 90)}`,
+    fraud: true,
+    done: false,
+  });
+
+  return {
+    ...state,
+    sheet: {
+      invoices,
+      payments: shuffled(payments, state.random),
+      startedAt: now,
+      expiresAt: now + clockMs(state),
+    },
+  };
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  const base = {
+    cfg,
+    random: mulberry32(seed),
+    sheet: null,
+    score: 0,
+    lives: cfg.lives,
+    matched: 0,
+    caught: 0,
+    mistakes: 0,
+    sheets: 0,
+    last: null,
+    over: false,
+  };
+  return deal(base, now);
+}
+
+export function remaining(state, now) {
+  if (!state.sheet) return 0;
+  const total = state.sheet.expiresAt - state.sheet.startedAt;
+  if (total <= 0) return 0;
+  return Math.min(1, Math.max(0, (state.sheet.expiresAt - now) / total));
+}
+
+/** Everything on this sheet handled? */
+export function sheetDone(state) {
+  return Boolean(state.sheet) && state.sheet.payments.every((p) => p.done);
+}
+
+function loseLife(state, reason, now) {
+  const lives = state.lives - 1;
+  return {
+    ...state,
+    lives,
+    mistakes: state.mistakes + 1,
+    last: {result: reason, at: now},
+    over: lives <= 0,
+  };
+}
+
+function advance(state, now) {
+  if (!sheetDone(state)) return state;
+  const cleared = {
+    ...state,
+    score: state.score + state.cfg.pointsPerSheet,
+    sheets: state.sheets + 1,
+    last: {result: 'sheet', at: now},
+  };
+  return deal(cleared, now);
+}
+
+/**
+ * Send a payment to an invoice.
+ *
+ * Right pays, wrong costs a life, and the fraud line costs a life
+ * wherever it is sent: that is the mistake the app exists to prevent.
+ */
+export function match(state, paymentId, invoiceId, now) {
+  if (state.over || !state.sheet) return state;
+  const payment = state.sheet.payments.find((p) => p.id === paymentId);
+  const invoice = state.sheet.invoices.find((i) => i.id === invoiceId);
+  if (!payment || !invoice || payment.done || invoice.settled) return state;
+
+  if (payment.fraud || payment.amount !== invoice.amount) {
+    return loseLife(state, payment.fraud ? 'paidFraud' : 'mismatch', now);
+  }
+
+  const next = {
+    ...state,
+    sheet: {
+      ...state.sheet,
+      payments: state.sheet.payments.map((p) => (p.id === paymentId ? {...p, done: true} : p)),
+      invoices: state.sheet.invoices.map((i) => (i.id === invoiceId ? {...i, settled: true} : i)),
+    },
+    score: state.score + state.cfg.pointsPerMatch,
+    matched: state.matched + 1,
+    last: {result: 'matched', at: now},
+  };
+  return advance(next, now);
+}
+
+/**
+ * Flag a payment as the one that belongs to nobody.
+ *
+ * Crying wolf at a genuine payment costs a life too. A game that only
+ * punished missing the fraud would teach you to flag everything.
+ */
+export function flag(state, paymentId, now) {
+  if (state.over || !state.sheet) return state;
+  const payment = state.sheet.payments.find((p) => p.id === paymentId);
+  if (!payment || payment.done) return state;
+
+  if (!payment.fraud) return loseLife(state, 'flaggedGood', now);
+
+  const next = {
+    ...state,
+    sheet: {
+      ...state.sheet,
+      payments: state.sheet.payments.map((p) => (p.id === paymentId ? {...p, done: true} : p)),
+    },
+    score: state.score + state.cfg.pointsPerFraud,
+    caught: state.caught + 1,
+    last: {result: 'caught', at: now},
+  };
+  return advance(next, now);
+}
+
+/** The month closes on its own, and an unfinished sheet costs a life. */
+export function step(state, now) {
+  if (state.over || !state.sheet) return state;
+  if (now < state.sheet.expiresAt) return state;
+  const hit = loseLife(state, 'monthClosed', now);
+  return hit.over ? {...hit, sheet: null} : deal(hit, 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.matched)} regels gematcht · ${n(state.caught)} keer fraude gevonden`
+    : `${n(state.matched)} lines matched · ${n(state.caught)} caught out`;
+}

package/src/components/ReferenceCard/ReferenceCard.module.css

@@ -5,7 +5,7 @@
 .grid { display: grid; gap: 16px; }
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
 
 .card {
   background: white;

package/src/components/RotatingCards/RotatingCards.module.css

@@ -65,7 +65,7 @@
 }
 
 @media (max-width: 900px) {
-  .card { grid-template-columns: 1fr; min-height: auto; }
+  .card { grid-template-columns: minmax(0, 1fr); min-height: auto; }
 }
 
 /* ---------- Image side (coloured panel) — full-bleed to all edges

package/src/components/Showcase/Showcase.module.css

@@ -33,8 +33,8 @@
 /* ---------- Body ---------- */
 .body { display: grid; gap: var(--space-8); align-items: stretch; }
 .layout-side  .body { grid-template-columns: 1fr 1.2fr; }
-.layout-stack .body { grid-template-columns: 1fr; gap: var(--space-6); }
-@media (max-width: 900px) { .layout-side .body { grid-template-columns: 1fr; } }
+.layout-stack .body { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
+@media (max-width: 900px) { .layout-side .body { grid-template-columns: minmax(0, 1fr); } }
 
 /* ---------- List of items ---------- */
 .list { display: flex; flex-direction: column; gap: var(--space-3); }

package/src/components/SolutionCard/SolutionCard.module.css

@@ -5,7 +5,7 @@
 .grid { display: grid; gap: 20px; }
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
 
 .card {
   background: white;

package/src/components/StatsStrip/StatsStrip.module.css

@@ -34,7 +34,7 @@
   }
 }
 @media (max-width: 500px) {
-  .inner { grid-template-columns: 1fr; }
+  .inner { grid-template-columns: minmax(0, 1fr); }
 }
 
 .value {

package/src/components/WidgetShelf/WidgetShelf.module.css

@@ -53,7 +53,7 @@
 }
 .cols-2 { grid-template-columns: repeat(2, 1fr); }
 .cols-3 { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+@media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } }
 
 /* ---- Carousel (default) ----
  *
@@ -172,7 +172,7 @@
   .carousel .card { width: auto; }
 }
 @media (prefers-reduced-motion: reduce) and (max-width: 900px) {
-  .group { grid-template-columns: 1fr; }
+  .group { grid-template-columns: minmax(0, 1fr); }
 }
 
 .card {

package/src/components/index.js

@@ -66,6 +66,9 @@ export {default as BlueprintRush} from './BlueprintRush/BlueprintRush.jsx';
 export {default as RecordRun} from './RecordRun/RecordRun.jsx';
 export {default as HiddenGame} from './HiddenGame/HiddenGame.jsx';
 export {default as MonsterRun} from './MonsterRun/MonsterRun.jsx';
+export {default as DiceDuel} from './DiceDuel/DiceDuel.jsx';
+export {default as Reconcile} from './Reconcile/Reconcile.jsx';
+export {default as PipeFit} from './PipeFit/PipeFit.jsx';
 export {default as LockPick} from './LockPick/LockPick.jsx';
 export {default as PaintByTokens} from './PaintByTokens/PaintByTokens.jsx';
 export {default as Redaction} from './Redaction/Redaction.jsx';

package/src/components/primitives/SectionHead.module.css

@@ -17,7 +17,7 @@
 .align-stack .lede { max-width: 60ch; margin-top: 16px; }
 
 @media (max-width: 900px) {
-  .align-split { grid-template-columns: 1fr; gap: 24px; }
+  .align-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
 }
 
 .title {

package/src/components/primitives/icons.jsx

@@ -46,6 +46,26 @@ export const ICONS = {
       <polyline points="13 6 19 12 13 18"/>
     </svg>
   ),
+
+  /* Hamburger. Opens the navbar drawer below the desktop breakpoint.
+     Three bars rather than a "more" glyph because the drawer holds the
+     whole primary navigation, not an overflow remainder. */
+  menu: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <line x1="4" y1="7" x2="20" y2="7"/>
+      <line x1="4" y1="12" x2="20" y2="12"/>
+      <line x1="4" y1="17" x2="20" y2="17"/>
+    </svg>
+  ),
+
+  /* Close. Dismisses the navbar drawer. Same stroke weight as `menu` so
+     the toggle does not visually jump when the icon swaps. */
+  close: (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <line x1="6" y1="6" x2="18" y2="18"/>
+      <line x1="18" y1="6" x2="6" y2="18"/>
+    </svg>
+  ),
 };
 
 /**

package/src/theme/Navbar/index.jsx

@@ -191,6 +191,44 @@ export default function Navbar() {
   const items = navbar.items || [];
   const brand = brandFor(location.pathname, navbar.title);
 
+  /* Mobile drawer. Below the desktop breakpoint the whole primary
+     navigation moves into a drawer, rather than being allowed to
+     overflow the bar: at 390px the inline bar needs about 571px, so
+     the trailing items used to land off-screen with no way to reach
+     them (the site clips horizontal overflow, so they were not even
+     scrollable). Everything goes in, links and CTAs both, because the
+     bar has to fit an unknown number of items on an unknown wordmark
+     length. Keeping any of them inline only moves the cliff. */
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const toggleRef = React.useRef(null);
+
+  /* Close on navigation. Without this the drawer stays open over the
+     page the visitor just asked for. */
+  React.useEffect(() => {
+    setMenuOpen(false);
+  }, [location.pathname]);
+
+  /* While open: Escape closes and returns focus to the toggle, and the
+     page behind the drawer does not scroll. Both effects are torn down
+     together so a route change mid-gesture cannot strand the body with
+     `overflow: hidden`. */
+  React.useEffect(() => {
+    if (!menuOpen) return undefined;
+    const onKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setMenuOpen(false);
+        toggleRef.current?.focus();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [menuOpen]);
+
   /* Wordmark resolution order:
      1. ConNext / Common Ground sub-brand → custom JSX (Con<Next>, …)
      2. Conduction product app (Open*, Docu*, My*, …) → prefix-light
@@ -278,6 +316,41 @@ export default function Navbar() {
           <NavItem key={i} item={item} location={location} appVersion={appVersion} />
         ))}
       </div>
+
+      {/* Drawer toggle. Rendered on every viewport and hidden with CSS
+          above the breakpoint, so the markup does not depend on a
+          client-side width measurement that SSR cannot make. */}
+      <button
+        ref={toggleRef}
+        type="button"
+        className={styles.menuToggle}
+        aria-expanded={menuOpen}
+        aria-controls="navbar-drawer"
+        aria-label={menuOpen
+          ? translate({id: 'preset.navbar.menu.close', message: 'Close menu', description: 'Accessible label for the navbar drawer toggle while the drawer is open'})
+          : translate({id: 'preset.navbar.menu.open', message: 'Open menu', description: 'Accessible label for the navbar drawer toggle while the drawer is closed'})}
+        onClick={() => setMenuOpen((open) => !open)}
+      >
+        <span className={styles.iconGlyph} aria-hidden="true">
+          {menuOpen ? ICONS.close : ICONS.menu}
+        </span>
+      </button>
+
+      {/* Drawer. Kept mounted and hidden so the toggle's aria-controls
+          always resolves to a real element. `hidden` also keeps the
+          links out of the tab order and out of the accessibility tree
+          while closed, which a purely visual `display: none` on the
+          parent would not guarantee across the breakpoint. */}
+      <div id="navbar-drawer" className={styles.drawer} hidden={!menuOpen}>
+        <div className={styles.drawerItems}>
+          {leftItems.map((item, i) => (
+            <NavItem key={`l${i}`} item={item} location={location} appVersion={appVersion} />
+          ))}
+          {rightItems.map((item, i) => (
+            <NavItem key={`r${i}`} item={item} location={location} appVersion={appVersion} />
+          ))}
+        </div>
+      </div>
     </nav>
   );
 }

package/src/theme/Navbar/styles.module.css

@@ -193,15 +193,212 @@
   white-space: nowrap;
 }
 
-/* Responsive collapse, simplified for v1.
-   TODO: hamburger menu like the design-system mock. */
-@media (max-width: 900px) {
+/**
+ * Drawer toggle (hamburger).
+ *
+ * Hidden above the breakpoint. Always rendered in the markup so the
+ * button's `aria-controls` resolves during server rendering, when
+ * there is no viewport width to branch on.
+ *
+ * 44px square. WCAG 2.2 SC 2.5.8 (AA) only requires 24x24, which this
+ * clears comfortably; 44 is the size a thumb actually wants, and it is
+ * the primary control on every phone-width page.
+ */
+.menuToggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-sm);
+  background: white;
+  color: var(--c-cobalt-700);
+  font-size: 22px;
+  cursor: pointer;
+  transition: color 160ms ease, background 160ms ease;
+}
+.menuToggle:hover {
+  color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-50);
+}
+
+/**
+ * Drawer panel.
+ *
+ * `display: none` by default rather than relying on the `hidden`
+ * attribute alone, because the rules below set a display value and any
+ * such declaration overrides the UA default for `[hidden]`. Opening is
+ * therefore scoped to the breakpoint AND to `:not([hidden])`, so the
+ * panel can never appear on desktop even if the state says open.
+ *
+ * Positioned against .nav, which is `position: sticky` and so already
+ * a containing block for absolutely positioned descendants.
+ */
+.drawer {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border-bottom: 1px solid var(--c-cobalt-100);
+  box-shadow: 0 12px 24px rgba(16, 42, 86, 0.10);
+  max-height: 75vh;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.drawerItems {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 24px 20px;
+}
+
+/* Every interactive row in the drawer gets a full-width 44px target.
+   Styling by context rather than by passing a variant down through
+   NavItem keeps the item types (link, cta, github, apiDocs, locale)
+   rendering exactly as they do in the bar. */
+.drawerItems > a {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  width: 100%;
+  border-bottom: 1px solid var(--c-cobalt-50);
+  font-size: 16px;
+}
+.drawerItems > a:last-child { border-bottom: none; }
+
+/* The locale item is a list, not a single row, so it sizes to its
+   contents and lets the language links below own the 44px rhythm. */
+.drawerItems > .localeWrapper {
+  display: block;
+  width: 100%;
+}
+
+/* The install CTA keeps its filled treatment but becomes a full-width
+   block, so it reads as the primary action of the drawer. */
+.drawerItems > .cta {
+  justify-content: center;
+  margin-top: 16px;
+  border-bottom: none;
+  padding: 12px 16px;
+}
+
+/* Icon-only items (GitHub) need a visible hit area in a vertical list,
+   where there is no neighbouring label to borrow width from. */
+.drawerItems > .iconLink {
+  width: 100%;
+  justify-content: flex-start;
+  height: auto;
+}
+
+/* The version pill is a static chip, not a control: keep it inline and
+   out of the 44px rhythm. */
+.drawerItems > .versionPill {
+  align-self: flex-start;
+  margin-top: 12px;
+}
+
+/**
+ * Locale switcher inside the drawer.
+ *
+ * Two Infima behaviours have to be undone here.
+ *
+ * First, Infima hides `.navbar__item` outright below 996px, because it
+ * expects its own mobile sidebar to take over. Inside this drawer that
+ * rule collapses the locale item to a zero-height blank row, so the
+ * display value is restored explicitly.
+ *
+ * Second, the menu is a hover dropdown positioned absolutely. A hover
+ * dropdown is the wrong control on touch, and in a vertical panel the
+ * absolute menu lands off the side of the screen. Pinning it into the
+ * flow and dropping the trigger turns it into what it should be on a
+ * phone: a plain list of the available languages.
+ */
+.drawer .localeWrapper :global(.navbar__item) {
+  display: block;
+  width: 100%;
+  padding: 0;
+}
+
+/* The trigger just repeats the current locale, which the list already
+   marks as active. Dropping it avoids an "English / English /
+   Nederlands" stutter. */
+.drawer .localeWrapper :global(.navbar__link) {
+  display: none;
+}
+
+.drawer .localeWrapper :global(.dropdown__menu) {
+  position: static;
+  display: block;
+  transform: none;
+  opacity: 1;
+  visibility: visible;
+  box-shadow: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  max-height: none;
+}
+
+.drawer .localeWrapper :global(.dropdown__link) {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  margin: 0;
+  border-radius: 0;
+  border-bottom: 1px solid var(--c-cobalt-50);
+  font-size: 16px;
+}
+
+/**
+ * Breakpoint.
+ *
+ * 996px matches Docusaurus's own navbar collapse, so the drawer and
+ * the framework's mobile sidebar agree about where "mobile" starts.
+ * Measured on conduction.nl: the inline bar needs 571px at its
+ * narrowest and 775px with a full item set, so collapsing at 996px
+ * clears both with room for sites that add items.
+ */
+@media (max-width: 996px) {
   .nav {
-    padding: 16px 24px;
-    flex-wrap: wrap;
-    gap: 16px;
+    padding: 12px 16px;
+    gap: 12px;
   }
   .left { gap: 16px; }
-  .links { gap: 16px; }
-  .ctas { gap: 8px; }
+
+  /* The bar keeps only the wordmark and the toggle. */
+  .links,
+  .ctas {
+    display: none;
+  }
+
+  .menuToggle {
+    display: inline-flex;
+  }
+
+  .drawer:not([hidden]) {
+    display: block;
+  }
+
+  /* Long product wordmarks must not push the toggle off the bar. The
+     wordmark is also the home link, so it gets the same 44px height as
+     the toggle it sits opposite. */
+  .wordmark {
+    font-size: 19px;
+    min-width: 0;
+    min-height: 44px;
+  }
+  .wordmarkText {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .left {
+    min-width: 0;
+    flex: 1;
+  }
 }