@conduction/docusaurus-preset 3.27.2 → 3.31.0

package/src/components/AppMock/variants/ScholiqMock.jsx

@@ -0,0 +1,74 @@
+/**
+ * Scholiq abstract — learning environment.
+ *
+ * Inferred from the app role (courses, lessons, credentials): centre
+ * shows a course-card grid, each card carrying a progress bar, with a
+ * credential chip on the completed course. Left nav for courses /
+ * lessons / learners / certificates. Tone: forest — data you can
+ * trust a diploma to.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+const PROGRESS = [
+  {ico: 'b', fill: '100%', done: true},
+  {ico: 'b', fill: '65%'},
+  {ico: null, fill: '40%'},
+  {ico: 'b', fill: '80%'},
+  {ico: 'e', fill: '25%'},
+  {ico: 'b', fill: '10%'},
+];
+
+export default function ScholiqMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.opencatalogi].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6}}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '30%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          {/* Course cards with progress bars */}
+          <div className={styles.grid}>
+            {PROGRESS.map(({ico, fill, done}, i) => (
+              <div key={i} className={[styles.card, ico && styles[ico]].filter(Boolean).join(' ')}>
+                <div className={styles.ico}></div>
+                <div className={styles.row}></div>
+                <div className={styles.row + ' ' + styles.short}></div>
+                <div style={{height: 4, background: 'var(--c-cobalt-100)', borderRadius: 2}}>
+                  <div style={{width: fill, height: 4, background: 'var(--c-forest-500)', borderRadius: 2}}></div>
+                </div>
+                {done && (
+                  /* Credential chip — course completed, certificate issued */
+                  <div style={{display: 'inline-flex', alignItems: 'center', gap: 3, padding: '2px 6px', borderRadius: 999, background: 'var(--c-forest-300)', alignSelf: 'flex-start'}}>
+                    <div style={{width: 6, height: 7, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-forest-500)'}}></div>
+                    <div style={{height: 3, width: 22, background: 'var(--c-forest-500)', borderRadius: 1}}></div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/AppMock/variants/ShillinqMock.jsx

@@ -0,0 +1,90 @@
+/**
+ * Shillinq abstract — bookkeeping ledger.
+ *
+ * Inferred from the app role (invoices, VAT, bank reconciliation):
+ * a VAT/summary KPI strip over an invoice table — document icon,
+ * description, two amount columns (net / VAT), and a reconciliation
+ * tick column where a mint hex = matched against the bank and a
+ * muted pip = still open. Tone: terracotta — documents, human work.
+ */
+
+import React from 'react';
+import styles from '../AppMock.module.css';
+
+const INVOICES = [
+  {amount: 26, vat: 16, matched: true},
+  {amount: 20, vat: 12, matched: true},
+  {amount: 30, vat: 18, matched: false},
+  {amount: 22, vat: 14, matched: true},
+  {amount: 18, vat: 10, matched: false},
+];
+
+export default function ShillinqMock() {
+  return (
+    <>
+      <div className={styles.topbar}>
+        <div className={styles.logo}></div>
+        {Array.from({length: 14}).map((_, i) => <div key={i} className={styles.icon}></div>)}
+        <div className={styles.spacer}></div>
+        <div className={styles.bell}></div>
+        <div className={styles.avatar}></div>
+      </div>
+      <div className={[styles.body, styles.decidesk].filter(Boolean).join(' ')}>
+        <div className={styles.nav}>
+          <div className={styles.navHead}><div className={styles.h}></div><div className={styles.l}></div></div>
+          {[true, false, false, false, false].map((active, i) => (
+            <div key={i} className={[styles.item, active && styles.active].filter(Boolean).join(' ')}>
+              <div className={styles.ico}></div>
+              <div className={styles.l}></div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.col}>
+          <div className={styles.head}>
+            <div className={styles.row + ' ' + styles.head} style={{width: '30%'}}></div>
+            <div className={styles.actions}>
+              <div className={styles.btn + ' ' + styles.ghost}></div>
+              <div className={styles.btn}></div>
+            </div>
+          </div>
+          {/* VAT / summary strip */}
+          <div className={styles.kpiRow}>
+            <div className={styles.kpi}>
+              <div className={styles.ico} style={{background: 'var(--c-terracotta-500)'}}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+            <div className={styles.kpi}>
+              <div className={styles.ico} style={{background: 'var(--c-terracotta-300)'}}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+            <div className={styles.kpi}>
+              <div className={styles.ico}></div>
+              <div className={styles.meta}><div className={styles.num}></div><div className={styles.label}></div></div>
+            </div>
+          </div>
+          {/* Invoice table: doc · description · net · VAT · reconciled */}
+          <div className={styles.panel} style={{flex: 1}}>
+            <div className={styles.head}><div className={styles.title}></div></div>
+            <div className={styles.stack}>
+              {INVOICES.map(({amount, vat, matched}, i) => (
+                <div key={i} className={styles.item}>
+                  <div style={{width: 11, height: 13, clipPath: 'var(--hex-pointy-top)', background: 'var(--c-terracotta-300)', flexShrink: 0}}></div>
+                  <div className={styles.lines}><div className={styles.l1}></div></div>
+                  <div style={{width: amount, height: 4, background: 'var(--c-cobalt-700)', borderRadius: 1, flexShrink: 0}}></div>
+                  <div style={{width: vat, height: 4, background: 'var(--c-cobalt-300)', borderRadius: 1, flexShrink: 0}}></div>
+                  {/* Bank-reconciliation tick: mint hex = matched */}
+                  <div style={{width: 9, height: 10, clipPath: 'var(--hex-pointy-top)', background: matched ? 'var(--c-mint-500)' : 'var(--c-cobalt-200)', flexShrink: 0}}></div>
+                </div>
+              ))}
+            </div>
+            {/* Totals line */}
+            <div style={{display: 'flex', justifyContent: 'flex-end', gap: 6, paddingTop: 4, borderTop: '1px solid var(--c-cobalt-100)'}}>
+              <div style={{width: 32, height: 6, background: 'var(--c-cobalt-900)', borderRadius: 1}}></div>
+              <div style={{width: 20, height: 6, background: 'var(--c-cobalt-400)', borderRadius: 1}}></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/CookieCli/CookieCli.jsx

@@ -31,9 +31,11 @@
  * on every save.
  */
 
-import React, {useState, useEffect, useMemo, useCallback} from 'react';
+import React, {useState, useEffect, useMemo, useCallback, useRef} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import styles from './CookieCli.module.css';
+import SpaceInvaders from './spaceInvaders';
+import {runCommand} from './shell';
 
 const STORAGE_KEY = 'conduction:cookie-cli';
 
@@ -136,25 +138,127 @@ export default function CookieCli({
     save(minimal);
   }, [categories, save]);
 
-  /* Bind keyboard shortcuts: A = accept all, S = save, R = reject,
-     1-9 = toggle category n. */
+  /* ---- the shell, and the game hiding in it ---- */
+
+  const [buffer, setBuffer] = useState('');
+  const [history, setHistory] = useState([]); // [{cmd, lines}]
+  const [mode, setMode] = useState('shell');  // 'shell' | 'game'
+  const gameRef = useRef(null);
+  const screenRef = useRef(null);
+  const hudRef = useRef(null);
+  const footerRef = useRef(null);
+  const promptRef = useRef(null);
+
+  const emit = useCallback((cmd, lines) => {
+    setHistory((prev) => [...prev, {cmd, lines}]);
+  }, []);
+
+  const exitGame = useCallback(() => {
+    if (gameRef.current) gameRef.current.stop();
+    gameRef.current = null;
+    setMode('shell');
+    emit(null, [{text: '# thanks for playing. back to your regularly scheduled cookies.', tone: 'cmt'}]);
+  }, [emit]);
+
+  const startGame = useCallback(() => {
+    emit(null, [
+      {text: 'Loading game.exe ...', tone: 'cmt'},
+      {text: '[OK] CONDUCTION SPACE INVADERS v0.1', tone: 'ok'},
+    ]);
+    setMode('game');
+  }, [emit]);
+
+  /* Construct the engine once the game surface is actually on screen.
+     Building it in the click handler would hand it refs that are still
+     null, because the panel it draws into has not rendered yet. */
+  useEffect(() => {
+    if (mode !== 'game' || gameRef.current) return undefined;
+    gameRef.current = new SpaceInvaders({
+      onFrame: ({screen, hud, footer}) => {
+        if (screenRef.current) screenRef.current.innerHTML = screen;
+        if (hudRef.current) hudRef.current.innerHTML = hud;
+        if (footerRef.current) footerRef.current.innerHTML = footer;
+      },
+      onExit: exitGame,
+    });
+    return () => {
+      if (gameRef.current) { gameRef.current.stop(); gameRef.current = null; }
+    };
+  }, [mode, exitGame]);
+
+  const submit = useCallback((line) => {
+    const result = runCommand(line);
+    if (result.clear) { setHistory([]); return; }
+    emit(line, result.lines);
+    if (result.effect === 'game') startGame();
+  }, [emit, startGame]);
+
+  /* One key handler for both modes.
+     In game mode every key belongs to the game. In shell mode the rule is
+     the kit specimen's, exactly: digits pick cookie options while the
+     prompt is empty, and everything else types.
+
+     There used to be [A] [S] [R] accelerators here, live whenever the
+     prompt was empty. They quietly ate the first letter of any command
+     starting with those letters, which made `sudo` and `rm` unreachable:
+     typing `sudo` answered the consent dialog and closed the banner
+     instead. A shell that silently refuses a third of the alphabet is
+     worse than one with no shortcuts, and the three actions are buttons
+     you can click or tab to. */
   useEffect(() => {
-    if (!isBrowser || decided) return;
+    if (!isBrowser || decided) return undefined;
+
     function onKey(e) {
       if (e.metaKey || e.ctrlKey || e.altKey) return;
-      const k = e.key.toLowerCase();
-      if (k === 'a') { e.preventDefault(); acceptAll(); return; }
-      if (k === 's') { e.preventDefault(); saveCurrent(); return; }
-      if (k === 'r') { e.preventDefault(); rejectNonEssential(); return; }
-      const idx = parseInt(e.key, 10);
-      if (!Number.isNaN(idx) && idx >= 1 && idx <= categories.length) {
+
+      if (mode === 'game') {
+        if (gameRef.current) gameRef.current.onKey(e);
+        return;
+      }
+
+      if (e.key === 'Enter') {
         e.preventDefault();
-        toggle(categories[idx - 1]);
+        const line = buffer;
+        setBuffer('');
+        submit(line);
+        return;
+      }
+      if (e.key === 'Backspace') {
+        e.preventDefault();
+        setBuffer((b) => b.slice(0, -1));
+        return;
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        setBuffer('');
+        return;
+      }
+
+      /* Digits toggle only from an empty prompt, so a filename or a version
+         number can still be typed. */
+      if (buffer.length === 0) {
+        const idx = parseInt(e.key, 10);
+        if (!Number.isNaN(idx) && idx >= 1 && idx <= categories.length) {
+          e.preventDefault();
+          toggle(categories[idx - 1]);
+          return;
+        }
+      }
+
+      if (e.key.length === 1) {
+        e.preventDefault();
+        setBuffer((b) => b + e.key);
       }
     }
+
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [isBrowser, decided, acceptAll, saveCurrent, rejectNonEssential, toggle, categories]);
+  }, [isBrowser, decided, mode, buffer, submit, toggle, categories]);
+
+  /* Keep the prompt in view as output accumulates. */
+  useEffect(() => {
+    if (promptRef.current) promptRef.current.scrollIntoView({block: 'nearest'});
+  }, [history, mode]);
 
   /* Hide the banner once the user has made a decision; the prompt
      reappears via window.ConductionCookieCli.reset(). */
@@ -184,7 +288,7 @@ export default function CookieCli({
         </div>
         <p className={styles.comment}># Pick what you're OK with. Essential cookies are required.</p>
 
-        <ul className={styles.opts}>
+        <ul className={styles.opts} style={mode === 'game' ? {display: 'none'} : undefined}>
           {categories.map((c, i) => {
             const on = !!selected[c.key] || !!c.required;
             return (
@@ -206,17 +310,86 @@ export default function CookieCli({
           })}
         </ul>
 
-        <div className={styles.actions}>
-          <button type="button" className={[styles.btn, styles.btnPrimary].join(' ')} onClick={acceptAll}>
-            <span className={styles.btnKey}>A</span>Accept all
-          </button>
-          <button type="button" className={styles.btn} onClick={saveCurrent}>
-            <span className={styles.btnKey}>S</span>Save selection
-          </button>
-          <button type="button" className={styles.btn} onClick={rejectNonEssential}>
-            <span className={styles.btnKey}>R</span>Reject non-essential
-          </button>
-        </div>
+        {/* Scrollback. Command output is plain text with a tone class; the
+            game is the only thing that writes HTML, and it escapes its own
+            content in spaceInvaders.js. */}
+        {history.length > 0 && (
+          <div className={styles.scrollback}>
+            {history.map((block, i) => (
+              <div key={i} className={styles.outBlock}>
+                {block.cmd != null && (
+                  <div className={styles.prompt}>
+                    <span className={styles.user}>you</span>
+                    <span className={styles.sigil}>@</span>
+                    <span className={styles.host}>{siteHost}</span>
+                    <span className={styles.sigil}>:</span>
+                    <span className={styles.path}>~</span>
+                    <span className={styles.sigil}>$</span>{' '}
+                    <span className={styles.cmd}>{block.cmd}</span>
+                  </div>
+                )}
+                {block.lines.length > 0 && (
+                  <pre className={styles.out}>
+                    {block.lines.map((l, j) => (
+                      <div key={j} className={l.tone ? styles[`tone_${l.tone}`] : undefined}>{l.text}</div>
+                    ))}
+                  </pre>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {mode === 'game' ? (
+          <div className={styles.game}>
+            <div className={styles.gameHud} ref={hudRef} />
+            <pre className={styles.gameScreen} ref={screenRef} />
+            <div className={styles.gameFooter} ref={footerRef} />
+          </div>
+        ) : (
+          <>
+            {/* The live prompt. Typing is captured on window rather than in an
+                <input>, because the banner is not focused when it appears and
+                we do not want to steal focus from the page to make a joke
+                work. The hidden input keeps mobile keyboards reachable. */}
+            <div
+              className={styles.prompt}
+              ref={promptRef}
+              title="you can type here ;)"
+              style={{cursor: 'text'}}
+              onClick={() => { if (promptRef.current) promptRef.current.querySelector('input')?.focus(); }}
+            >
+              <span className={styles.user}>you</span>
+              <span className={styles.sigil}>@</span>
+              <span className={styles.host}>{siteHost}</span>
+              <span className={styles.sigil}>:</span>
+              <span className={styles.path}>~</span>
+              <span className={styles.sigil}>$</span>{' '}
+              <span className={styles.cmd}>{buffer}</span>
+              <span className={styles.cursor} aria-hidden="true" />
+              <input
+                type="text"
+                value={buffer}
+                onChange={() => {}}
+                className={styles.hiddenInput}
+                aria-label="Terminal input. Type help for commands."
+                tabIndex={-1}
+              />
+            </div>
+
+            <div className={styles.actions}>
+              <button type="button" className={[styles.btn, styles.btnPrimary].join(' ')} onClick={acceptAll}>
+                <span className={styles.btnKey}>A</span>Accept all
+              </button>
+              <button type="button" className={styles.btn} onClick={saveCurrent}>
+                <span className={styles.btnKey}>S</span>Save selection
+              </button>
+              <button type="button" className={styles.btn} onClick={rejectNonEssential}>
+                <span className={styles.btnKey}>R</span>Reject non-essential
+              </button>
+            </div>
+          </>
+        )}
       </div>
     </div>
   );

package/src/components/CookieCli/CookieCli.module.css

@@ -32,6 +32,15 @@
   width: calc(100% - 48px);
   max-width: 640px;
   overflow: hidden;
+
+  /* Cap the panel to the viewport and let the body scroll inside it.
+     Without this the panel grows with the shell scrollback and the game
+     surface until its title bar is pushed off the top of the screen: the
+     consent buttons then sit above the fold with no way to reach them.
+     Flex column so the title bar stays put and only .body scrolls. */
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 48px);
 }
 
 .bar {
@@ -52,7 +61,14 @@
 .title { flex: 1; text-align: center; }
 .title b { color: var(--term-fg); }
 
-.body { padding: 18px 20px; }
+/* min-height:0 is load-bearing: a flex child defaults to min-height:auto,
+   which refuses to shrink below its content, so overflow-y would never
+   engage and the panel would grow past the viewport anyway. */
+.body {
+  padding: 18px 20px;
+  overflow-y: auto;
+  min-height: 0;
+}
 
 .prompt { color: var(--term-fg); margin: 6px 0; }
 .user { color: var(--term-green); }
@@ -164,3 +180,125 @@
   .actions { flex-direction: column; }
   .btn { justify-content: center; }
 }
+
+/* ============================================================
+ * The shell, and the game hiding in it
+ * ============================================================
+ * Colours mirror the kit specimen (preview/cookie-cli.html):
+ * cobalt UFOs, KNVB-orange lasers, green player.
+ *
+ * The game paints by writing HTML into a ref, so its class names are
+ * plain strings that never pass through the CSS-modules rewriter. They
+ * have to be :global() or they would style nothing at all, silently. */
+
+.scrollback {
+  max-height: 40vh;
+  overflow-y: auto;
+  margin-bottom: 4px;
+}
+
+.outBlock { margin-bottom: 6px; }
+
+.out {
+  margin: 4px 0;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--term-fg-dim);
+  white-space: pre-wrap;
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+.tone_ok   { color: var(--term-green); }
+.tone_warn { color: #F7C76F; }
+.tone_cmt  { color: var(--term-fg-dim); }
+.tone_dir  { color: var(--term-cobalt); }
+
+/* Blinking block cursor after the typed text. */
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 14px;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  background: var(--term-green);
+  animation: cookieCliBlink 1s steps(2, start) infinite;
+}
+
+@keyframes cookieCliBlink {
+  to { visibility: hidden; }
+}
+
+/* Respect a reduced-motion preference: keep the cursor, drop the blink. */
+@media (prefers-reduced-motion: reduce) {
+  .cursor { animation: none; }
+}
+
+/* Off-screen, not display:none — a hidden input still has to be reachable
+   for mobile keyboards, and display:none would remove it from the a11y
+   tree entirely. */
+.hiddenInput {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.game { padding-top: 4px; }
+
+.gameHud {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  border-top: 1px dashed #1F2A45;
+  border-bottom: 1px dashed #1F2A45;
+  padding: 6px 0;
+  margin-bottom: 8px;
+  font-size: 12px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.gameHud :global(.hud-label) { color: var(--term-fg-dim); font-size: 10px; }
+.gameHud :global(.hud-val)   { color: var(--term-fg); font-weight: 600; }
+
+.gameScreen {
+  font-family: "IBM Plex Mono", ui-monospace, monospace;
+  font-size: 14px;
+  line-height: 1;
+  letter-spacing: 0.06em;
+  white-space: pre;
+  padding: 10px 12px;
+  margin: 0;
+  color: var(--term-fg);
+  background: rgba(6, 9, 18, 0.5);
+  border: 1px solid #15203A;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.gameFooter {
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px dashed #1F2A45;
+  font-size: 11px;
+  color: var(--term-fg-dim);
+  text-align: center;
+  letter-spacing: 0.04em;
+}
+
+.gameScreen :global(.g-ufo)    { color: var(--term-cobalt); text-shadow: 0 0 6px rgba(104, 146, 217, 0.55); }
+.gameScreen :global(.g-player) { color: var(--term-green);  text-shadow: 0 0 6px rgba(95, 227, 154, 0.55); font-weight: 600; }
+.gameScreen :global(.g-laser)  { color: #F36C21;            text-shadow: 0 0 8px rgba(243, 108, 33, 0.95); font-weight: 700; }
+.gameScreen :global(.g-bomb)   { color: #FF6B7A;            text-shadow: 0 0 6px rgba(255, 107, 122, 0.6); }
+.gameScreen :global(.g-boom)   { color: #F7C76F;            text-shadow: 0 0 10px rgba(247, 199, 111, 0.85); font-weight: 700; }
+
+.gameHud :global(.g-laser)  { color: #F36C21; }
+.gameHud :global(.g-player) { color: var(--term-green); }
+
+.gameFooter :global(.ok)   { color: var(--term-green); }
+.gameFooter :global(.warn) { color: #F7C76F; }
+.gameFooter :global(.cmt)  { color: var(--term-fg-dim); }