@conduction/docusaurus-preset 3.31.0 → 3.33.0

package/src/components/KanbanMock/KanbanMock.module.css

@@ -0,0 +1,325 @@
+/**
+ * <KanbanMock /> styles. Scoped under `.km` (display: contents), the
+ * AppMock `.am` convention, so specimen pages can reuse the file as a
+ * plain global stylesheet.
+ *
+ * One shared timeline (--km-dur, default 7s):
+ *
+ *   0–10%   cursor travels to the top card in column 1
+ *   14%     the card lifts (scale + deeper shadow)
+ *   16–50%  card + cursor drag to column 2's top slot
+ *   50–54%  the card settles into the slot
+ *   54–56%  the column counts (3→2, 2→3) and the lane € KPIs
+ *           (€ 48k→€ 30k, € 27k→€ 45k) crossfade — right at the drop
+ *   56–86%  hold
+ *   86–100% card fades back to its origin, counts + KPIs revert, loop
+ *
+ * Geometry: the mover is absolutely positioned over the board, so its
+ * keyframe coordinates must equal the top card slot of columns 1 and
+ * 2. Those slots mix %-sized board chrome with px-sized column chrome,
+ * so the coordinates are calc() custom properties (--km-x1, --km-x2,
+ * --km-y, --km-card-w) derived below rather than by-eye percentages —
+ * that keeps the landing exact at every frame width. Derivation:
+ *   board padding 6%/5% of frame width W; column gap 4% of the 90%
+ *   content box = 3.6%W; columns (90% − 7.2%)/3 = 27.6%W;
+ *   col chrome = 1px border + 10px padding = 11px;
+ *   vertical: 6%W top pad = 9.6% of the 16/10 frame height, + KPI row
+ *   34px + 12px row gap + col chrome 11px + head 16px + head margin
+ *   2px + col gap 8px = 83px.
+ *
+ * prefers-reduced-motion (and .static from running={false}) renders
+ * the static board: no cursor, no animation, the card resting in its
+ * origin column, original counts and KPI values. Tokens only; the
+ * mover's status dot (mint) is the only non-neutral accent; no orange.
+ */
+
+.km { display: contents; }
+
+.km .figure {
+  margin: 0;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+  max-width: 100%;
+}
+
+.km .frame {
+  --km-dur: 7s;
+  /* Card-slot geometry (see the derivation in the header comment). */
+  --km-x1: calc(5% + 11px);
+  --km-x2: calc(36.2% + 11px);
+  --km-y: calc(9.6% + 83px);
+  --km-card-w: calc(27.6% - 22px);
+  width: 100%;
+  max-width: 720px;
+  aspect-ratio: 16 / 10;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+  overflow: hidden;
+  position: relative;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.km .size-sm { max-width: 480px; }
+.km .size-md { max-width: 720px; }
+
+.km .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;
+}
+
+/* ---- Board ---- */
+
+.km .board {
+  position: absolute;
+  inset: 0;
+  padding: 6% 5%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto 1fr;
+  /* Fixed 12px row gap (part of the mover's --km-y derivation);
+     percentage column gap so lanes track the frame width. */
+  gap: 12px 4%;
+}
+
+/* ---- KPI row above the lanes ---- */
+
+.km .kpis {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* Same content box as the board, so 4% aligns tiles with lanes. */
+  gap: 4%;
+  min-width: 0;
+}
+
+.km .kpi {
+  box-sizing: border-box;
+  height: 34px; /* fixed: part of the mover's --km-y derivation */
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-1);
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+.km .kpiBar {
+  display: block;
+  width: 26%;
+  height: 4px;
+  border-radius: 1px;
+  background: var(--c-cobalt-300);
+  flex-shrink: 0;
+}
+.km .kpiValue {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 38px;
+  height: 14px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+  white-space: nowrap;
+}
+/* The crossfading value spans reuse .countBefore/.countAfter (same
+   timeline, same static overrides) but sit right-aligned in the tile
+   instead of filling a pill. */
+.km .kpiValue .countBefore,
+.km .kpiValue .countAfter {
+  inset: auto;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  white-space: nowrap;
+}
+/* A lane total that never changes (third lane). */
+.km .kpiStill { display: inline-flex; align-items: center; }
+
+.km .col {
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.km .colHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+.km .colBar {
+  display: block;
+  flex: 1;
+  max-width: 55%;
+  height: 5px;
+  border-radius: 1.5px;
+  background: var(--c-cobalt-700);
+}
+
+/* Count pill: two stacked digits crossfading on the timeline. */
+.km .count,
+.km .countStatic {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-100);
+  color: var(--c-cobalt-700);
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  font-weight: 600;
+}
+.km .countBefore,
+.km .countAfter {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.km .countBefore { animation: kmCountBefore var(--km-dur) linear infinite; }
+.km .countAfter  { opacity: 0; animation: kmCountAfter var(--km-dur) linear infinite; }
+
+/* ---- Cards ---- */
+
+.km .card,
+.km .mover {
+  /* Explicit border-box: --km-card-w describes the full card box, and
+     not every consumer of this file ships a global box-sizing reset. */
+  box-sizing: border-box;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-1);
+  padding: 8px 9px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+/* The gap where the travelling card lives at rest. Exactly the
+   mover's height (2px border + 16px padding + 23px content) so the
+   card sits flush in the slot when it lands. */
+.km .slotGap { height: 41px; flex-shrink: 0; }
+
+.km .cardTop { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
+.km .cardBar  { display: block; height: 4px; border-radius: 1px; background: var(--c-cobalt-700); }
+.km .cardLine { display: block; height: 3px; border-radius: 1px; background: var(--c-cobalt-200); width: 78%; }
+.km .cardDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--c-mint-500);
+  flex-shrink: 0;
+}
+
+/* ---- The travelling card ---- */
+
+.km .mover {
+  position: absolute;
+  /* Origin: column 1's top slot. Exact calc() geometry — see the
+     header comment — so the card sits flush in the slot at rest and
+     when it lands, at every frame width. The lift is a transform so
+     left/top always mean "the slot". */
+  left: var(--km-x1);
+  top: var(--km-y);
+  width: var(--km-card-w);
+  animation: kmMove var(--km-dur) linear infinite;
+  z-index: 2;
+}
+
+@keyframes kmMove {
+  0%, 10% { left: var(--km-x1); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  14%     { left: var(--km-x1); top: var(--km-y); transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-3); opacity: 1; }
+  50%     { left: var(--km-x2); top: var(--km-y); transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-3); opacity: 1; }
+  54%     { left: var(--km-x2); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  86%     { left: var(--km-x2); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+  92%     { left: var(--km-x2); top: var(--km-y); opacity: 0; }
+  96%     { left: var(--km-x1); top: var(--km-y); opacity: 0; }
+  100%    { left: var(--km-x1); top: var(--km-y); transform: translateY(0) scale(1);      box-shadow: var(--shadow-1); opacity: 1; }
+}
+
+/* ---- Cursor ---- */
+
+.km .cursor {
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  left: 60%;
+  top: 60%;
+  fill: var(--c-cobalt-900);
+  stroke: white;
+  stroke-width: 1;
+  filter: drop-shadow(0 1px 2px rgba(10, 23, 47, 0.35));
+  animation: kmCursor var(--km-dur) linear infinite;
+  z-index: 3;
+}
+
+@keyframes kmCursor {
+  0%      { left: 60%; top: 60%; }
+  10%     { left: calc(var(--km-x1) + 10%); top: calc(var(--km-y) + 18px); }  /* over the card */
+  14%     { left: calc(var(--km-x1) + 10%); top: calc(var(--km-y) + 15px); }
+  50%     { left: calc(var(--km-x2) + 10%); top: calc(var(--km-y) + 15px); }  /* drag with the card */
+  54%     { left: calc(var(--km-x2) + 10%); top: calc(var(--km-y) + 18px); }
+  64%     { left: 60%; top: 60%; }  /* release, drift away */
+  100%    { left: 60%; top: 60%; }
+}
+
+/* ---- Count crossfade ---- */
+
+/* Counts and KPI values swap the moment the card settles: the drop
+   ends at 54%, the crossfade runs 54–56%. They revert while the card
+   fades back to its origin (86–96%). */
+@keyframes kmCountBefore {
+  0%, 54%   { opacity: 1; }
+  56%, 88%  { opacity: 0; }
+  93%, 100% { opacity: 1; }
+}
+@keyframes kmCountAfter {
+  0%, 54%   { opacity: 0; }
+  56%, 88%  { opacity: 1; }
+  93%, 100% { opacity: 0; }
+}
+
+/* ---- Static board (running={false} and reduced motion) ---- */
+
+.km .static .mover,
+.km .static .cursor,
+.km .static .countBefore,
+.km .static .countAfter { animation: none; }
+.km .static .cursor { opacity: 0; visibility: hidden; }
+.km .static .countBefore { opacity: 1; }
+.km .static .countAfter { opacity: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .km .mover,
+  .km .cursor,
+  .km .countBefore,
+  .km .countAfter { animation: none; }
+  .km .cursor { opacity: 0; visibility: hidden; }
+  .km .countBefore { opacity: 1; }
+  .km .countAfter { opacity: 0; }
+}

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

@@ -0,0 +1,114 @@
+/**
+ * KanbanMock.render.test.js — renders the real <KanbanMock> JSX to
+ * static markup (the SSR path Docusaurus takes at build time) and
+ * asserts on the output: the KPI row above the lanes with its
+ * before/after € values, the column counts, and the static mode.
+ *
+ * Uses the same esbuild-bundle-then-renderToStaticMarkup technique as
+ * AiDisclosure.render.test.js / scripts/build-kit.mjs. CSS modules
+ * are stubbed with an identity proxy (styles.foo → 'foo'), so class
+ * assertions read as the source class names.
+ */
+
+'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, '..', 'KanbanMock.jsx');
+const PRESET_ROOT = path.resolve(__dirname, '..', '..', '..', '..');
+const SCRATCH = path.join(PRESET_ROOT, '.tmp-kanban-mock-test');
+
+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 KanbanMock;
+
+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)];
+  KanbanMock = require(outFile).default;
+});
+
+after(async () => {
+  await fs.rm(SCRATCH, {recursive: true, force: true});
+});
+
+function render(props) {
+  return renderToStaticMarkup(React.createElement(KanbanMock, props));
+}
+
+test('SSR smoke: renders the board with three lanes and the travelling card', () => {
+  const html = render({});
+  assert.equal((html.match(/class="col"/g) || []).length, 3);
+  assert.match(html, /class="mover"/);
+});
+
+test('KPI row: one € tile per lane, before/after values on the two lanes the deal moves between', () => {
+  const html = render({});
+  assert.match(html, /class="kpis"/);
+  assert.equal((html.match(/class="kpi"/g) || []).length, 3);
+  // Source lane loses the €18k deal, target lane gains it.
+  assert.match(html, /class="countBefore">€ 48k</);
+  assert.match(html, /class="countAfter">€ 30k</);
+  assert.match(html, /class="countBefore">€ 27k</);
+  assert.match(html, /class="countAfter">€ 45k</);
+  // Third lane never changes: a still value, no crossfade spans.
+  assert.match(html, /class="kpiStill">€ 64k</);
+});
+
+test('KPI arithmetic: the moved deal value leaving lane 1 equals the value entering lane 2', () => {
+  const html = render({});
+  const nums = [...html.matchAll(/class="count(Before|After)">€ (\d+)k</g)].map((m) => Number(m[2]));
+  assert.equal(nums.length, 4, 'expected two crossfading € tiles (2 values each)');
+  // Order in markup: lane1 before, lane1 after, lane2 before, lane2 after.
+  const [l1From, l1To, l2From, l2To] = nums;
+  assert.equal(l1From - l1To, l2To - l2From, 'the deal value must shift lanes, not appear or vanish');
+  assert.ok(l1From - l1To > 0, 'source lane must decrement');
+});
+
+test('column counts: source lane 3→2, target lane 2→3, third lane static 4', () => {
+  const html = render({});
+  assert.match(html, /class="count"><span class="countBefore">3<\/span><span class="countAfter">2<\/span>/);
+  assert.match(html, /class="count"><span class="countBefore">2<\/span><span class="countAfter">3<\/span>/);
+  assert.match(html, /class="countStatic">4</);
+});
+
+test('aria-label names the counts and lane totals updating at the drop', () => {
+  const html = render({});
+  assert.match(html, /aria-label="[^"]*column counts and the lane value totals update at the drop[^"]*"/);
+});
+
+test('running={false} renders the static frame class', () => {
+  const html = render({running: false});
+  assert.match(html, /class="frame size-md static"/);
+});

package/src/components/LeafMock/LeafMock.jsx

@@ -0,0 +1,173 @@
+/**
+ * <LeafMock />
+ *
+ * Token-built abstract of one workspace integration leaf: the small
+ * panels that show *what an app plugs into* — contacts, the meetings
+ * calendar, mail, files. Used on Showcase items and app detail pages
+ * that previously reused a generic <AppMock> for every leaf.
+ *
+ * Same abstraction level as <AppMock> (honeycomb.io/technologies/*):
+ * greeked content, tokens only, no real text beyond short labels.
+ * Four variants:
+ *
+ *   - contacts: address-book rows with pointy-top hex avatars and a
+ *     mint sync arrow to a phone silhouette
+ *   - calendar: mini month grid with one highlighted day and a
+ *     linked-event chip (lavender bar)
+ *   - 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)
+ *
+ * Usage:
+ *
+ *   <LeafMock leaf="contacts" />
+ *   <LeafMock leaf="calendar" caption size="sm" />
+ *
+ * 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
+ *   - className: string
+ */
+
+import React from 'react';
+import styles from './LeafMock.module.css';
+
+function Greek({w, tone = 'sub'}) {
+  return <span className={[styles.greek, styles[`greek-${tone}`]].join(' ')} style={{width: w}} />;
+}
+
+function ContactsLeaf() {
+  return (
+    <div className={styles.contacts}>
+      <div className={styles.contactList}>
+        {[0, 1, 2].map((i) => (
+          <div key={i} className={styles.contactRow}>
+            <span className={[styles.hexAvatar, styles[`hexAvatar-${i}`]].join(' ')} />
+            <span className={styles.contactLines}>
+              <Greek w="64%" tone="title" />
+              <Greek w="44%" />
+            </span>
+          </div>
+        ))}
+      </div>
+      <svg className={styles.syncArrow} viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M4 9h13m0 0l-3.5-3.5M17 9l-3.5 3.5M20 15H7m0 0l3.5-3.5M7 15l3.5 3.5" />
+      </svg>
+      <div className={styles.phone}>
+        <div className={styles.phoneScreen}>
+          <span className={styles.phoneRow} />
+          <span className={styles.phoneRow} />
+          <span className={styles.phoneRow} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CalendarLeaf() {
+  /* 7×4 mini month; day 10 (index 9) is the highlighted, linked day. */
+  const days = Array.from({length: 28}, (_, i) => i);
+  return (
+    <div className={styles.calendar}>
+      <div className={styles.monthGrid}>
+        {days.map((i) => (
+          <span key={i} className={[styles.day, i === 9 && styles.dayActive].filter(Boolean).join(' ')} />
+        ))}
+      </div>
+      <div className={styles.eventChip}>
+        <span className={styles.eventBar} />
+        <span className={styles.eventLines}>
+          <Greek w="70%" tone="title" />
+          <Greek w="46%" />
+        </span>
+        <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" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function MailLeaf() {
+  return (
+    <div className={styles.mail}>
+      {[0, 1, 2].map((i) => (
+        <div key={i} className={[styles.mailRow, i === 1 && styles.mailRowActive].filter(Boolean).join(' ')}>
+          <span className={styles.mailDot} />
+          <span className={styles.mailLines}>
+            <Greek w="58%" tone="title" />
+            <Greek w="82%" />
+          </span>
+          {i === 1 && (
+            <span className={styles.actionChip}>
+              <svg className={styles.plusIcon} viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12 5v14M5 12h14" />
+              </svg>
+              <Greek w="26px" tone="chip" />
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function FilesLeaf() {
+  return (
+    <div className={styles.files}>
+      {[0, 1, 2].map((i) => (
+        <div key={i} className={styles.fileRow}>
+          <span className={[styles.fileIcon, i === 0 && styles.folderIcon].filter(Boolean).join(' ')} />
+          <span className={styles.fileLines}>
+            <Greek w={i === 1 ? '72%' : '54%'} tone="title" />
+          </span>
+          {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" />
+              </svg>
+              <Greek w="26px" tone="chip" />
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const VARIANTS = {
+  contacts: {Component: ContactsLeaf, label: 'Contacts leaf'},
+  calendar: {Component: CalendarLeaf, label: 'Calendar leaf'},
+  mail:     {Component: MailLeaf,     label: 'Mail leaf'},
+  files:    {Component: FilesLeaf,    label: 'Files leaf'},
+};
+
+export default function LeafMock({leaf, size = 'md', caption, className}) {
+  const variant = VARIANTS[leaf];
+  if (!variant) {
+    return (
+      <div className={styles.lm}>
+        <div className={[styles.frame, styles[`size-${size}`], className].filter(Boolean).join(' ')}>
+          <div className={styles.empty}>Unknown leaf: {leaf}</div>
+        </div>
+      </div>
+    );
+  }
+  const {Component, label} = variant;
+  return (
+    <div className={styles.lm}>
+      <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
+        <div className={[styles.frame, styles[`size-${size}`]].filter(Boolean).join(' ')}>
+          <Component />
+        </div>
+        {caption && (
+          <figcaption className={styles.caption}>
+            {caption === true ? label : caption}
+          </figcaption>
+        )}
+      </figure>
+    </div>
+  );
+}