@kabmo-labs/kabmo 0.0.1 → 0.1.0

package/src/client/components/common/batch-selection/SelectionCheckbox.tsx

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The checkbox a sidebar row grows while a batch selection is active.
+ *
+ * A native `<input type="checkbox">` rather than a styled span: it carries the
+ * checked/indeterminate state, the keyboard behaviour and the announcement for
+ * free, and `indeterminate` (a workspace whose sessions are partly selected) is
+ * a DOM PROPERTY with no attribute equivalent — it has to be assigned, which is
+ * what the ref below is for.
+ *
+ * The click is stopped from propagating: the control sits inside a row that
+ * selects or expands on click, so a checkbox that bubbled would do both.
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+
+export interface SelectionCheckboxProps {
+  checked: boolean;
+  /** Draw the dash state (a header whose children are partly selected). */
+  indeterminate?: boolean;
+  /** The accessible name — every row's checkbox names the row it belongs to. */
+  label: string;
+  onChange: () => void;
+  /** `sm` is the row-sized control; `md` is the header's. */
+  size?: 'sm' | 'md';
+}
+
+export function SelectionCheckbox({
+  checked,
+  indeterminate = false,
+  label,
+  onChange,
+  size = 'sm',
+}: SelectionCheckboxProps) {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      checked={checked}
+      aria-label={label}
+      onChange={onChange}
+      onClick={(event) => event.stopPropagation()}
+      className={`shrink-0 accent-ink cursor-pointer rounded border-ink/30 ${
+        size === 'md' ? 'w-3.5 h-3.5' : 'w-3 h-3'
+      }`}
+    />
+  );
+}

package/src/client/components/common/batch-selection/folder-state.test.ts

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The folder-level batch rules, in isolation.
+ *
+ * This is the arithmetic both sidebars share, and every case below is a way the
+ * two could disagree — or a way "select all" could reach something the user
+ * cannot see. The pagination case is the one a browser found: a window would
+ * tick rows with no checkbox on screen and no way to untick them.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { folderBatchState } from '@/client/components/common/batch-selection/folder-state';
+import type { BatchBinding } from '@/client/components/common/batch-selection/types';
+import type { SessionItemData, WorkspaceFolderData } from '@/shared/types';
+
+const folder = { id: 7, name: 'kabmo', isExpanded: true, sessions: [], hasMore: false, totalSessions: 0 } as WorkspaceFolderData;
+
+function sessions(count: number, archived = 0): SessionItemData[] {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `s${index}`,
+    folder_id: 7,
+    title: `session ${index}`,
+    is_archived: archived,
+  }));
+}
+
+/** A binding whose selection is `selected` over `mode`. */
+function binding(
+  mode: 'session' | 'workspace',
+  selected: string[],
+  scopeFolderId: number | null = 7,
+): BatchBinding {
+  const all = new Set(selected);
+  return {
+    mode,
+    scopeFolderId,
+    selected,
+    toggle: () => {},
+    selectAllOf: () => {},
+    unselectAllOf: () => {},
+    summaryOf: (available) => {
+      const count = available.filter((id) => all.has(id)).length;
+      return {
+        count,
+        all: available.length > 0 && count === available.length,
+        some: count > 0 && count < available.length,
+      };
+    },
+  };
+}
+
+function state(overrides: Partial<Parameters<typeof folderBatchState>[0]> = {}) {
+  return folderBatchState({
+    folder,
+    sessions: sessions(3),
+    showArchived: false,
+    visibleCount: 1,
+    activeSessionId: null,
+    ...overrides,
+  });
+}
+
+describe('folderBatchState without a mode', () => {
+  test('no checkboxes and the window applies', () => {
+    const result = state();
+    expect(result.folderCheckbox).toBe(false);
+    expect(result.sessionCheckboxes).toBe(false);
+    expect(result.folderSummary).toBeNull();
+    // `visibleCount` 1 over 3 rows: the normal list paginates.
+    expect(result.rendered).toHaveLength(1);
+    expect(result.hiddenCount).toBe(2);
+  });
+});
+
+describe('folderBatchState in session mode', () => {
+  test('the scoped folder draws a header checkbox and row checkboxes', () => {
+    const result = state({ batch: binding('session', []) });
+    expect(result.folderCheckbox).toBe(true);
+    expect(result.sessionCheckboxes).toBe(true);
+    expect(result.selectableIds).toEqual(['s0', 's1', 's2']);
+  });
+
+  test('the window is lifted so every selectable row is on screen', () => {
+    const result = state({ batch: binding('session', []) });
+    expect(result.rendered).toHaveLength(3);
+    expect(result.hiddenCount).toBe(0);
+  });
+
+  test('a workspace that did not start the selection stays ordinary', () => {
+    const result = state({ batch: binding('session', [], 99) });
+    expect(result.folderCheckbox).toBe(false);
+    expect(result.sessionCheckboxes).toBe(false);
+    expect(result.rendered).toHaveLength(1);
+  });
+
+  test('the summary reports partial selection against the offered rows', () => {
+    const result = state({ batch: binding('session', ['s1']) });
+    expect(result.folderSummary).toEqual({ count: 1, all: false, some: true });
+  });
+
+  test('archived rows are not offered while the filter hides them', () => {
+    const result = state({
+      batch: binding('session', []),
+      sessions: [...sessions(2), ...sessions(1, 1)],
+      showArchived: false,
+    });
+    expect(result.selectableIds).toEqual(['s0', 's1']);
+  });
+});
+
+describe('folderBatchState in workspace mode', () => {
+  test('the header owns the FOLDER id, and rows stay ordinary', () => {
+    const result = state({ batch: binding('workspace', []) });
+    expect(result.folderCheckbox).toBe(true);
+    expect(result.sessionCheckboxes).toBe(false);
+    expect(result.selectableIds).toEqual(['7']);
+    // The window is untouched: workspace mode selects folders, not rows.
+    expect(result.rendered).toHaveLength(1);
+    expect(result.hiddenCount).toBe(2);
+  });
+
+  test('a selected folder reads as all of its own one-id scope', () => {
+    const result = state({ batch: binding('workspace', ['7']) });
+    expect(result.folderSummary).toEqual({ count: 1, all: true, some: false });
+  });
+});

package/src/client/components/common/batch-selection/folder-state.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One folder's batch state, shared by the desktop category and the phone's
+ * drawer item.
+ *
+ * The two layouts draw the same rules — which checkbox the header carries, what
+ * its tri-state reports, which rows are selectable, and how the pagination
+ * window behaves — and they had drifted into two copies of that arithmetic.
+ * Stating it once is what keeps "select all" counting the same rows on a phone
+ * and on a desktop.
+ *
+ * Three rules are load-bearing:
+ *
+ *   - a workspace checkbox exists in BOTH modes, but means different things: the
+ *     folder itself in `workspace` mode, its rows in `session` mode;
+ *   - the summary is computed over the rows the ARCHIVE FILTER offers, so
+ *     "select all" can never reach a row the user cannot see or unselect;
+ *   - a session selection lifts the pagination window, because a window would
+ *     tick rows that have no checkbox on screen.
+ */
+
+import { selectableSessionIds } from '@/shared/lib/workspace/batch-select';
+import { selectVisibleSessions } from '@/shared/lib/workspace/session-visibility';
+import { headerSelectable, rowsSelectable } from '@/client/components/common/batch-selection/types';
+import type { BatchBinding } from '@/client/components/common/batch-selection/types';
+import type { SessionItemData, WorkspaceFolderData } from '@/shared/types';
+
+export interface FolderBatchInput {
+  batch?: BatchBinding;
+  folder: WorkspaceFolderData;
+  /** The rows the archive filter currently offers. */
+  sessions: SessionItemData[];
+  showArchived: boolean;
+  /** The list's page size (`useShowMore`), unused while selecting. */
+  visibleCount: number;
+  activeSessionId: number | string | null;
+  sessionStatus?: Record<string, string | undefined>;
+}
+
+export interface FolderBatchState {
+  /** The header draws a checkbox (workspace mode, or this folder's session mode). */
+  folderCheckbox: boolean;
+  /** The rows draw checkboxes. */
+  sessionCheckboxes: boolean;
+  /** Null when the header has no checkbox. */
+  folderSummary: { count: number; all: boolean; some: boolean } | null;
+  /** What the header checkbox selects. */
+  selectableIds: string[];
+  /** Header click: select or unselect everything this header owns. */
+  toggleFolderSelection: () => void;
+  /** Rows to render — every offered row while selecting, else the window. */
+  rendered: SessionItemData[];
+  /** Rows the next "Show more" reveals; 0 while selecting. */
+  hiddenCount: number;
+}
+
+export function folderBatchState({
+  batch,
+  folder,
+  sessions,
+  showArchived,
+  visibleCount,
+  activeSessionId,
+  sessionStatus,
+}: FolderBatchInput): FolderBatchState {
+  const folderCheckbox = batch ? headerSelectable(batch, folder.id) : false;
+  const sessionCheckboxes = batch ? rowsSelectable(batch, folder.id) : false;
+  const selectableIds = sessionCheckboxes
+    ? selectableSessionIds(sessions, showArchived)
+    : folderCheckbox
+      ? [String(folder.id)]
+      : [];
+  const folderSummary = batch && folderCheckbox ? batch.summaryOf(selectableIds) : null;
+
+  const windowed = selectVisibleSessions(sessions, visibleCount, { activeSessionId, sessionStatus });
+
+  const toggleFolderSelection = () => {
+    if (!batch) return;
+    if (folderCheckbox && !sessionCheckboxes) {
+      batch.toggle(String(folder.id));
+      return;
+    }
+    if (!sessionCheckboxes) return;
+    if (folderSummary?.all) batch.unselectAllOf(selectableIds);
+    else batch.selectAllOf(selectableIds);
+  };
+
+  return {
+    folderCheckbox,
+    sessionCheckboxes,
+    folderSummary,
+    selectableIds,
+    toggleFolderSelection,
+    rendered: sessionCheckboxes ? sessions : windowed.rendered,
+    hiddenCount: sessionCheckboxes ? 0 : windowed.hiddenCount,
+  };
+}

package/src/client/components/common/batch-selection/types.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The props a category/folder hands down to its rows while a batch selection is
+ * active, shared by the desktop category and the phone's drawer item.
+ *
+ * It is one object rather than six props because every field is only meaningful
+ * together: a `selected` list without a `mode` is a selection nothing draws, and
+ * a `scopeFolderId` without the session mode is a scope nothing applies to. Both
+ * layouts read the same shape, so a row cannot grow a checkbox on one layout and
+ * not the other.
+ */
+
+import type { BatchMode, SelectionSummary } from '@/shared/lib/workspace/batch-select';
+
+export interface BatchBinding {
+  /** The active mode, or null when the sidebar is not selecting. */
+  mode: BatchMode | null;
+  /** The workspace a SESSION selection is scoped to (null in workspace mode). */
+  scopeFolderId: number | null;
+  /** Ids currently selected, in click order. */
+  selected: readonly string[];
+  toggle: (id: string) => void;
+  selectAllOf: (ids: readonly string[]) => void;
+  unselectAllOf: (ids: readonly string[]) => void;
+  /** Tri-state summary over a set of ids the folder can offer. */
+  summaryOf: (available: readonly string[]) => SelectionSummary;
+}
+
+/** True when this folder's own header should draw a checkbox. */
+export function headerSelectable(binding: BatchBinding, folderId: number): boolean {
+  return binding.mode === 'workspace'
+    || (binding.mode === 'session' && binding.scopeFolderId === folderId);
+}
+
+/** True when this folder's SESSION rows should draw checkboxes. */
+export function rowsSelectable(binding: BatchBinding, folderId: number): boolean {
+  return binding.mode === 'session' && binding.scopeFolderId === folderId;
+}

package/src/client/components/common/brand-wordmark/Mark.tsx

@@ -0,0 +1,62 @@
+/**
+ * The `K` of the wordmark: the app icon itself.
+ *
+ * The wordmark used to spell its leading letter in the UI font and colour it
+ * orange, which made the K a coloured character rather than the brand mark.
+ * This is `public/icon.svg` — the same rounded green tile, the same three
+ * strokes at the same 7/64 weight, the same orange upper arm — drawn inline so
+ * the word starts with the logo.
+ *
+ * **The tile is sized to the cap band, not to the line box.** The icon's ink is
+ * 41 of its 64 units tall (0.64), so a tile of `1.5625 × cap` puts the K's own
+ * height exactly on the cap height — the letter does not shrink when it gains
+ * its plate. That makes the plate taller than the cap band, and a plate whose
+ * bottom sits on the baseline would lift the K half that difference; the
+ * `vertical-align` below shifts the whole box down by the overhang so the ink's
+ * bottom lands on the baseline and its top on the cap line. Both numbers are
+ * derived from the same two constants (`1.5625 = 1 / 0.64`, overhang
+ * `(1.5625 − 1) / 2`), so they cannot drift apart.
+ *
+ * Both are expressed in `cap`, which is the font's own cap height — the mark
+ * then aligns on every face the stack resolves to, and not just on the one this
+ * was measured against. `0.7046em` is that cap height on the current stack
+ * (10.5688px at 15px, 11.2734 at 16, 16.9102 at 24 — 0.70459 each) and the
+ * class carries it as the fallback for engines without the unit; an unsupported
+ * inline declaration is dropped, so the class applies there.
+ *
+ * `inline-block` is not decoration: Tailwind's preflight makes every `svg`
+ * `display: block`, and a block box inside the wordmark's inline flow breaks the
+ * word onto its own line.
+ *
+ * **The `a` is tucked into the plate by `0.28em` of negative right margin**, so
+ * the word reads as a lockup rather than a plate with a word after it. The limit
+ * is the icon's lower arm, which ends 2.1px inside the plate at 15px: measured
+ * at five depths, `-0.20em` left 2.12px of clearance to that stroke and
+ * `-0.28em` leaves 0.93px — the deepest value that still keeps the letter off
+ * the arm's round cap, while putting its ink 3.8px inside a 16.5px plate.
+ *
+ * The tile and cream are `--color-brand-tile` / `--color-brand-cream`, not theme
+ * tokens: the icon is the same mark in every palette, and on a dark canvas a
+ * themed plate would be a hole rather than a plate. They are set as inline
+ * `style` declarations rather than presentation attributes, because a `var()`
+ * in a presentation attribute is not resolved (measured: the rect computed to
+ * black and the stem to `none`).
+ */
+export function BrandMark({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      className={`inline-block h-[1.1009em] w-auto flex-none [vertical-align:-0.1982em] ${className}`}
+      style={{ height: '1.5625cap', verticalAlign: '-0.28125cap', marginRight: '-0.28em' }}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect width="64" height="64" rx="14" style={{ fill: 'var(--color-brand-tile)' }} />
+      <g fill="none" strokeWidth={7} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M20 15v34" style={{ stroke: 'var(--color-brand-cream)' }} />
+        <path d="M20 32 42 15" style={{ stroke: 'var(--color-brand)' }} />
+        <path d="M20 32 42 49" style={{ stroke: 'var(--color-brand-cream)' }} />
+      </g>
+    </svg>
+  );
+}

package/src/client/components/common/brand-wordmark/index.test.tsx

@@ -70,24 +70,46 @@ describe('BrandWordmark', () => {
     expect([...runs.keys()]).toEqual(['K', 'ab', 'mo']);
   });
 
-  test('each run carries its own colour class', () => {
+  test('each run carries its own colour', () => {
     const runs = runsOf(mount());
-    // The K takes the icon's accent token, never a themed colour: the logo does
-    // not change hue with the palette, and the K is the letter that carries it.
-    expect(runs.get('K')?.className).toContain('text-brand');
+    // The K is the app icon, so its colours live on the SVG's own paint: the
+    // green plate, the cream strokes and the brand's orange upper arm.
+    const mark = runs.get('K')?.parentElement?.querySelector('svg');
+    expect(mark).toBeTruthy();
+    expect(mark?.getAttribute('aria-hidden')).toBe('true');
+    const tile = mark?.querySelector('rect');
+    expect(tile?.getAttribute('style')).toContain('--color-brand-tile');
+    const strokes = [...(mark?.querySelectorAll('path') ?? [])].map((p) => p.getAttribute('style'));
+    expect(strokes).toEqual([
+      'stroke: var(--color-brand-cream);',
+      'stroke: var(--color-brand);',
+      'stroke: var(--color-brand-cream);',
+    ]);
+    expect(runs.get('K')?.className).toContain('sr-only');
     // `ab` keeps the previous wordmark's gradient, as a gradient (not a fill).
     expect(runs.get('ab')?.className).toContain('bg-clip-text');
     expect(runs.get('ab')?.className).toContain('bg-gradient-to-r');
-    expect(runs.get('ab')?.className).toContain('from-orange-600');
-    expect(runs.get('ab')?.className).toContain('to-amber-500');
+    expect(runs.get('ab')?.className).toContain('from-amber-500');
+    expect(runs.get('ab')?.className).toContain('to-orange-600');
     // `mo` stays surface ink, which is what keeps it legible on dark palettes.
     expect(runs.get('mo')?.className).toContain('text-ink');
   });
 
+  test('the gradient span pays for the b overhang and mo is spaced off it', () => {
+    const runs = runsOf(mount());
+    // `background-clip: text` clips to the span's box, and the b's right
+    // sidebearing is negative — without the padding its last pixels vanish.
+    const ab = runs.get('ab')!;
+    expect(ab.style.paddingRight).toBe('0.06em');
+    expect(ab.style.marginRight).toBe('-0.06em');
+    // b→m is the tight pair in this face; the margin makes it match a→b.
+    expect(runs.get('mo')!.style.marginLeft).toBe('0.02em');
+  });
+
   test('a caller sets the size and cannot drop the wordmark classes', () => {
     const root = mount('text-2xl').firstElementChild as HTMLElement;
     expect(root.className).toContain('text-2xl');
-    expect(root.className).toContain('tracking-tighter');
+    expect(root.className).toContain('tracking-tight');
     expect(root.className).toContain('font-extrabold');
   });
 });

package/src/client/components/common/brand-wordmark/index.tsx

@@ -10,26 +10,48 @@
  * The word is drawn in three runs, each with its own colour, and the split is
  * deliberate rather than decorative:
  *
- * - **`K`** takes the icon's own accent (`--color-brand`, the orange of the
- *   logo's upper arm). It is the letter that carries the mark, so it uses the
- *   mark's colour exactly — a themed token here would make the K change hue
- *   with the palette while the icon never does.
- * - **`ab`** keeps the gradient the previous wordmark used for its leading run
- *   (`orange-600 → amber-500`), so the word still reads as a continuation of the
- *   product it was renamed from.
+ * - **`K`** is the icon's mark, not a letter: `BrandMark` draws the logo's three
+ *   strokes (ink stem and lower arm, `--color-brand` upper arm) so the word
+ *   begins with the same shape the app icon and the favicon carry.
+ * - **`ab`** keeps the previous wordmark's gradient (`amber-500 → orange-600`),
+ *   run from light to dark so the brightest end sits against the icon's dark
+ *   green plate: the `a` is tucked into that plate, and a dark `a` on dark green
+ *   is the one place the lockup would lose a letter. The warm end still lands
+ *   where the word returns to ink.
  * - **`mo`** is plain surface ink, the colour the trailing run has always had.
  *   Ink is what keeps that run legible on every palette, dark ones included.
  *
+ * Two measurements are encoded in the render, and both fix a letter that was
+ * being cut rather than merely crowded:
+ *
+ * - **`ab` carries a right padding of `0.06em` and an equal negative margin.**
+ *   `background-clip: text` clips the gradient to the span's box, and the `b`'s
+ *   right sidebearing is NEGATIVE — the glyph's ink ends past its advance — so
+ *   the last 2-3 px of the `b` were clipped away at 15px and the letter read as
+ *   if `m` were covering it. Measured on the live wordmark at 4x: the span's box
+ *   ended 0.5px past the `b`'s ink with the clip and 3px past it once padded, so
+ *   the padding pays for the overhang and the negative margin cancels it from
+ *   the layout. A tracked-out `tracking-tight` (`-0.025em`) was part of the same
+ *   crowding: at `-0.05em` the ink gap between `b` and `m` measured 0.017em.
+ * - **`mo` carries `margin-left: 0.02em`.** With the tracking loosened, `a`→`b`
+ *   measures 0.063em of ink gap while `b`→`m` measures 0.043em — the pair reads
+ *   tight because `m`'s left stem is a full vertical beside `b`'s bowl. The
+ *   margin brings the second gap to 0.063em, the same as the first, and leaves
+ *   `m`→`o` (0.042em, the font's own spacing) alone.
+ *
  * `className` carries the SIZE (each surface sets its own) and nothing else: the
  * colour split and the tracking are the brand and are not a per-call-site
  * decision.
  */
+import { BrandMark } from '@/client/components/common/brand-wordmark/Mark';
+
 export function BrandWordmark({ className = 'text-[15px]' }: { className?: string }) {
   return (
-    <span className={`font-extrabold tracking-tighter ${className}`}>
-      <span className="text-brand">K</span>
-      <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-amber-500">ab</span>
-      <span className="text-ink">mo</span>
+    <span className={`font-extrabold tracking-tight ${className}`}>
+      <BrandMark />
+      <span className="sr-only">K</span>
+      <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-orange-600" style={{ paddingRight: '0.06em', marginRight: '-0.06em' }}>ab</span>
+      <span className="text-ink" style={{ marginLeft: '0.02em' }}>mo</span>
     </span>
   );
 }

package/src/client/components/common/brand-wordmark/wordmark-svg.test.ts

@@ -0,0 +1,88 @@
+/**
+ * The README wordmark (`public/kabmo-wordmark.svg`).
+ *
+ * It is a standalone asset — no app stylesheet, no font, no component — so a
+ * README can embed it from any renderer. That independence is exactly why it
+ * needs a test: nothing else in the repository reads the file, and every
+ * property below is one a hand edit would break silently.
+ *
+ * The numbers are the app's own, measured from `BrandWordmark`: a 100-unit cap
+ * height, the plate at `1.5625 x cap` (the icon's ink is 0.64 of its tile, so
+ * the K keeps its proportions), the `a` tucked 0.28em into the plate, the
+ * `b`→`m` gap widened 0.02em, and `tracking-tight` at -0.025em.
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const SOURCE = readFileSync(join(import.meta.dir, '../../../../../public/kabmo-wordmark.svg'), 'utf8');
+
+function attr(name: string): string {
+  const match = SOURCE.match(new RegExp(`${name}="([^"]+)"`));
+  if (!match) throw new Error(`missing ${name}`);
+  return match[1];
+}
+
+describe('public/kabmo-wordmark.svg', () => {
+  test('is a self-contained, accessible image', () => {
+    expect(SOURCE.startsWith('<?xml')).toBe(true);
+    expect(SOURCE).toContain('xmlns="http://www.w3.org/2000/svg"');
+    // A README's <img> gets its accessible name from the SVG itself when the
+    // renderer honours it; `alt` on the <img> is the other half, and both say
+    // the same thing.
+    expect(attr('role')).toBe('img');
+    expect(attr('aria-label')).toBe('Kabmo');
+    expect(SOURCE).toContain('<title>Kabmo</title>');
+    // No external dependency: a font reference or a fetched resource would fail
+    // in a renderer that sandboxes images. (The xmlns URI is a namespace name,
+    // never fetched, so it is not a dependency.)
+    expect(SOURCE).not.toMatch(/@font-face|(?:href|src)="https?:|url\(['"]?https?:/);
+  });
+
+  test('draws the icon plate at the size the K needs', () => {
+    const viewBox = attr('viewBox').split(/\s+/).map(Number);
+    expect(viewBox).toHaveLength(4);
+    const plate = SOURCE.match(/<rect width="([\d.]+)" height="([\d.]+)" y="([-\d.]+)"/);
+    expect(plate).toBeTruthy();
+    const [, w, h, y] = plate!.map(Number);
+    // 1.5625 x a 100-unit cap: the icon's ink is 41 of its 64 units, so this is
+    // the tile that puts the K exactly on the cap height.
+    expect(w).toBe(156.25);
+    expect(h).toBe(156.25);
+    // The ink (41/64 of the tile) is centred on the cap band, whose top is at
+    // -100 in this coordinate system.
+    const inkTop = y + (h - 100) / 2;
+    expect(Math.abs(inkTop + 100)).toBeLessThan(0.02);
+    // The viewBox is the artwork's own bounds, so a renderer adds no padding.
+    expect(Math.abs(viewBox[1] - y)).toBeLessThan(0.02);
+    expect(viewBox[3]).toBeCloseTo(156.25, 1);
+  });
+
+  test('keeps the brand colours, with one ink that works on any README', () => {
+    expect(SOURCE).toContain('fill="#0b5d3b"');       // plate
+    expect(SOURCE).toContain('stroke="#f7f4ea"');     // stem + lower arm
+    expect(SOURCE).toContain('stroke="#f26522"');     // upper arm
+    expect(SOURCE).toContain('stop-color="#f59e0b"'); // a, the light end
+    expect(SOURCE).toContain('stop-color="#ea580c"'); // b, the dark end
+    // One ink, not a media query. A README embeds this as an image, and inside
+    // an image `prefers-color-scheme` follows the CONTAINER only in Chromium —
+    // WebKit resolves it from the OS. Measured: GitHub dark on a light OS
+    // rendered #141310 on #0d1117 (1.02:1) in WebKit. #7e7a72 holds 4.27 on
+    // white and 4.43 on GitHub dark, so it needs no switch at all.
+    expect(SOURCE).toContain('.kabmo-mo { fill: #7e7a72; }');
+    // No media rule at all: the ink must not depend on how the renderer
+    // resolves a colour scheme, which differs between engines inside an image.
+    expect(SOURCE).not.toContain('@media');
+    expect(SOURCE).toContain('fill="#7e7a72"');
+  });
+
+  test('outlines the word, so no font is required', () => {
+    // Three strokes plus two outlined runs: `ab` and `mo`.
+    expect(SOURCE.match(/<path /g)?.length).toBe(5);
+    expect(SOURCE).toContain('fill="url(#kabmo-ab)"');
+    expect(SOURCE).toContain('class="kabmo-mo"');
+    // Outlines are curves, not text elements a renderer could re-flow.
+    expect(SOURCE).not.toContain('<text');
+  });
+});