@erclx/canon 5.52.0 → 5.54.0

package/src/demo/theme.ts

@@ -1,112 +0,0 @@
-import { readdirSync, readFileSync } from 'node:fs'
-import { join } from 'node:path'
-import { cursorHotspot, type Cursor, type CursorSet } from '@/demo/pointer'
-
-/**
- * Reads a cursor theme folder so `--cursor` can point at one. Spike 3 measured
- * the browser decoding a Windows cursor resource directly, so nothing here
- * converts anything: the bytes go into a data URI and the header supplies the
- * hotspot.
- *
- * Three of the nineteen states a theme carries are read. A drag, a resize, or a
- * wait shows the default arrow where a real session would show something else,
- * and the two animated states have no still frame to draw at all.
- */
-
-const CURSOR_MIME = 'image/x-icon'
-const EXTENSION = /\.cur$/i
-
-/** Ordered per state, most specific first, so an exact name beats a longer one. */
-const NAMES: Record<string, readonly string[]> = {
-  default: ['arrow', 'normal', 'default'],
-  pointer: ['link', 'hand', 'pointer'],
-  text: ['ibeam', 'beam', 'text'],
-}
-
-export type CursorFiles = Partial<Record<string, string>>
-
-/**
- * Picks one file per state out of a directory listing. Matching runs on the
- * name rather than on the contents because a theme states its intent there, and
- * a shorter match wins so `Arrow.cur` beats `Arrow Alternate.cur`.
- */
-export function matchCursorFiles(files: readonly string[]): CursorFiles {
-  const cursors = files.filter((file) => EXTENSION.test(file))
-  const matched: CursorFiles = {}
-
-  for (const [state, names] of Object.entries(NAMES)) {
-    const found = names
-      .flatMap((name) =>
-        cursors.filter((file) => file.toLowerCase().includes(name)),
-      )
-      .sort((left, right) => left.length - right.length)[0]
-    if (found) matched[state] = found
-  }
-
-  return matched
-}
-
-export type ThemeLoad =
-  | { status: 'loaded'; cursors: CursorSet; states: string[] }
-  | { status: 'failed'; reason: string }
-
-/**
- * Falls back to the bundled artwork per state rather than per theme, so a
- * folder carrying an arrow and no hand still contributes its arrow.
- */
-export function loadCursorTheme(dir: string, fallback: CursorSet): ThemeLoad {
-  let listing: string[]
-  try {
-    listing = readdirNames(dir)
-  } catch (error) {
-    return {
-      status: 'failed',
-      reason: `${dir} could not be read: ${message(error)}`,
-    }
-  }
-
-  const matched = matchCursorFiles(listing)
-  const states = Object.keys(matched)
-  if (!states.length) {
-    return {
-      status: 'failed',
-      reason: `${dir} holds no .cur file named after a pointer, link, or text state`,
-    }
-  }
-
-  const cursors: Record<string, Cursor> = { ...fallback }
-  for (const [state, file] of Object.entries(matched)) {
-    if (!file) continue
-    const loaded = readCursor(join(dir, file))
-    if (loaded) cursors[state] = loaded
-  }
-
-  return { status: 'loaded', cursors, states }
-}
-
-function readCursor(path: string): Cursor | undefined {
-  let bytes: Uint8Array
-  try {
-    bytes = readFileSync(path)
-  } catch {
-    return undefined
-  }
-
-  const hotspot = cursorHotspot(bytes)
-  if (!hotspot) return undefined
-
-  return {
-    image: `data:${CURSOR_MIME};base64,${Buffer.from(bytes).toString('base64')}`,
-    hotspot,
-  }
-}
-
-function readdirNames(dir: string): string[] {
-  return readdirSync(dir, { withFileTypes: true })
-    .filter((entry) => entry.isFile())
-    .map((entry) => entry.name)
-}
-
-function message(error: unknown): string {
-  return error instanceof Error ? error.message : String(error)
-}

package/src/demo/timeline.ts

@@ -1,64 +0,0 @@
-import { mkdirSync, writeFileSync } from 'node:fs'
-import { basename, dirname, extname, join } from 'node:path'
-import type { DemoStep } from '@/demo/compile'
-
-/**
- * A step's target in viewport pixels, which are the video frame's own
- * coordinates because the recording is sized to the viewport.
- */
-export interface TargetBox {
-  readonly x: number
-  readonly y: number
-  readonly width: number
-  readonly height: number
-}
-
-/** One step as the run clocked it, in wall-clock milliseconds. */
-export interface StepTiming {
-  readonly index: number
-  readonly kind: DemoStep['kind']
-  readonly startedAt: number
-  readonly endedAt: number
-  readonly box?: TargetBox
-}
-
-/**
- * Times count from the recording's start rather than the first step, since
- * that is the clock a composition places the take on. A step ends once its
- * hold has played, so the span covers what the viewer sees of it.
- */
-export interface TimelineEntry {
-  readonly index: number
-  readonly kind: DemoStep['kind']
-  readonly startMs: number
-  readonly endMs: number
-  readonly box?: TargetBox
-}
-
-export function timelineEntry(
-  timing: StepTiming,
-  recordingStart: number,
-): TimelineEntry {
-  return {
-    index: timing.index,
-    kind: timing.kind,
-    startMs: Math.round(timing.startedAt - recordingStart),
-    endMs: Math.round(timing.endedAt - recordingStart),
-    ...(timing.box ? { box: timing.box } : {}),
-  }
-}
-
-export function timelinePath(videoPath: string): string {
-  return join(
-    dirname(videoPath),
-    `${basename(videoPath, extname(videoPath))}.timeline.json`,
-  )
-}
-
-export function writeTimeline(
-  path: string,
-  entries: readonly TimelineEntry[],
-): void {
-  mkdirSync(dirname(path), { recursive: true })
-  writeFileSync(path, `${JSON.stringify({ entries }, null, 2)}\n`)
-}

package/src/design/adapter.ts

@@ -1,59 +0,0 @@
-import { basename, join } from 'node:path'
-import { DESIGN_BASE_CSS } from '@/design/regen'
-import type { InstalledFile, SyncAdapter } from '@/sync/engine'
-
-/**
- * The channel a design value reaches a target on.
- *
- * Base plus a target-owned override, reconciled by the three-way merge the sync
- * engine already implements. Overwrite was dropped before this was built and
- * the reason is a measurement rather than an argument: a headless sync in
- * another domain deleted a deploy job, replaced a screenshot harness, and
- * reverted a shipped fix, because naming a stack was read as consent to lose an
- * edit inside it.
- *
- * Layering is what bounds what the merge has to arbitrate. Nothing a project
- * wrote lives in the base, so the base changes freely, and the merge shrinks to
- * the properties a target actually overrode.
- */
-
-/** The folder a design install writes into, under the target's `.claude/`. */
-export const DESIGN_INSTALL_DIR = join('.claude', 'design')
-
-/**
- * Where a target's own values go. `projectSubdir` makes every file here
- * project-authored by location rather than by the name inference, so an
- * override named `base.css` is still the target's and never overwritten.
- *
- * It ships absent rather than empty. An empty override is a file a project did
- * not ask for and did not write, the merge already handles a missing side, and
- * an empty file invites a target to fill it before it has an opinion.
- */
-export const DESIGN_PROJECT_SUBDIR = 'project'
-
-export function designSourceDir(root: string): string {
-  return join(root, 'src', 'design')
-}
-
-export function createDesignAdapter(root: string): SyncAdapter {
-  const base = join(root, DESIGN_BASE_CSS)
-
-  return {
-    banner: 'canon design sync',
-    label: 'design',
-    missingMessage:
-      "No design surface found in target. Run 'canon design install' first.",
-    unit: 'changes',
-    installPattern: '**/*.css',
-    installedRoot: (target: string) => join(target, DESIGN_INSTALL_DIR),
-    /**
-     * One shipped file, matched by name the way the gov adapter matches a rule,
-     * so a base that moved inside the toolkit still syncs into the place the
-     * target already holds it.
-     */
-    locateSource: (file: InstalledFile) =>
-      basename(file.path) === basename(base) ? base : undefined,
-    projectSubdir: DESIGN_PROJECT_SUBDIR,
-    stamp: { domain: 'design', toolkitRoot: root },
-  }
-}

package/src/design/base.css

@@ -1,203 +0,0 @@
-/* Generated by `canon design regen` from src/design/neutral.ts. Do not edit.
-   This is the base half of a design install. A target overrides a value in
-   .claude/design/project/, which the three-way merge leaves alone, so this
-   file changes freely and nothing a project wrote lives in it. */
-
-:root {
-  --color-background: #0e0e0e;
-  --color-surface: #141414;
-  --color-chrome: #1a1a1a;
-  --color-border: #292929;
-  --color-text: #dddddd;
-  --color-text-body: #b2b2b2;
-  --color-text-secondary: #8e8e8e;
-  --color-muted: #7f7f7f;
-  --color-accent: #ececec;
-  --color-success: #61c454;
-  --color-light-background: #fafafa;
-  --color-light-surface: #f1f1f1;
-  --color-light-chrome: #e8e8e8;
-  --color-light-text: #252525;
-  --color-light-text-body: #444444;
-  --color-light-text-secondary: #5f5f5f;
-  --color-light-muted: #6c6c6c;
-  --color-light-accent: #191919;
-  --color-light-success: #2d6b22;
-  --color-light-border: #d4d4d4;
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 0.875rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2.5rem;
-  --space-2xl: 4rem;
-  --space-3xl: 6rem;
-  --t0: 3.175rem;
-  --t1: 2.375rem;
-  --t2: 1.375rem;
-  --t3: 1.125rem;
-  --t4: 0.9375rem;
-  --t5: 0.8125rem;
-  --t6: 0.6875rem;
-  --type-display-family: Geist Variable, DejaVu Sans, sans-serif;
-  --type-display-size: 2.375rem;
-  --type-display-lh: 1.3;
-  --type-page-display-family: Geist Variable, DejaVu Sans, sans-serif;
-  --type-page-display-size: 3.175rem;
-  --type-page-display-lh: 1.1;
-  --type-heading-family: Geist Variable, DejaVu Sans, sans-serif;
-  --type-heading-size: 1.375rem;
-  --type-heading-lh: 1.3;
-  --type-body-family: Geist Variable, DejaVu Sans, sans-serif;
-  --type-body-size: 0.9375rem;
-  --type-body-lh: 1.65;
-  --type-label-family: Geist Variable, DejaVu Sans, sans-serif;
-  --type-label-size: 0.8125rem;
-  --type-label-lh: 1.45;
-  --type-code-family: Noto Sans Mono, DejaVu Sans Mono, monospace;
-  --type-code-size: 0.8125rem;
-  --type-code-lh: 1.3;
-  --radius-frame: 12px;
-  --radius-panel: 10px;
-  --radius-action: 7px;
-  --radius-pill: 999px;
-  --radius-marker: 999px;
-}
-
-[data-theme='light'] {
-  --color-background: var(--color-light-background);
-  --color-surface: var(--color-light-surface);
-  --color-chrome: var(--color-light-chrome);
-  --color-text: var(--color-light-text);
-  --color-text-body: var(--color-light-text-body);
-  --color-text-secondary: var(--color-light-text-secondary);
-  --color-muted: var(--color-light-muted);
-  --color-accent: var(--color-light-accent);
-  --color-success: var(--color-light-success);
-  --color-border: var(--color-light-border);
-}
-
-/* status
-   A dot and a word, not a pill. A bordered uppercase chip is a second
-   vocabulary for a fact the dot already carries, so the marker is the only
-   status shape and `.is-done` is the only variant. */
-
-.status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.42rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0;
-  text-transform: none;
-  color: var(--color-muted);
-  white-space: nowrap;
-}
-
-.status::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  flex: none;
-  border-radius: var(--radius-marker);
-  background: var(--color-border);
-}
-
-.status.is-done::before {
-  background: var(--color-accent);
-}
-
-/* scrollbar
-   Every scrolling region takes the same bar, the page included. Scoping it
-   to one component leaves its neighbors on the browser default, which is
-   what reads as two designs on one page. `scrollbar-color` covers Firefox
-   and the `::-webkit-` rules cover the rest, both from the same two tokens
-   so the two engines cannot drift apart. */
-
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
-}
-
-*::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  border-radius: var(--radius-marker);
-  background: var(--color-border);
-  /* Inset by painting a border in the page color, which is what keeps the
-     thumb off the edges without a second element. */
-  border: 3px solid var(--color-background);
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background: var(--color-muted);
-}
-
-*::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-/* hand-drawn-figure
-   The hand-drawn SVG diagram figure and its caption, sized wider than the
-   reading measure and cleared past an outline rail on a wide viewport. */
-
-/* ---- Figures: hand-drawn, and wider than the measure ---- */
-
-:root {
-  --figure-hand: 'Virgil', 'Excalifont', cursive;
-  --figure-wide: 64rem;
-}
-
-figure {
-  margin: 2.75rem 0;
-  width: var(--figure-wide);
-  max-width: 92vw;
-  margin-left: 50%;
-  transform: translateX(-50%);
-}
-
-figure svg {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-/* CSS beats an SVG presentation attribute, so the diagrams pick up the
-   hand face without editing a single lesson. */
-figure svg text {
-  font-family: var(--figure-hand);
-}
-
-figcaption {
-  font-family: var(--figure-hand);
-  font-size: 1rem;
-  color: var(--color-muted);
-  margin: 1rem auto 0;
-  line-height: 1.5;
-  max-width: 52rem;
-}
-
-/* A figure breaks the measure and must still clear an outline rail. Deriving
-   the ceiling from the viewport does not hold, since a rail positioned from
-   the centre keeps overlapping as the window widens, so the ceiling is fixed
-   instead. */
-@media (min-width: 1421px) {
-  figure {
-    max-width: 54rem;
-  }
-}
-
-@media (max-width: 640px) {
-  figure {
-    width: 100%;
-    max-width: 100%;
-    margin-left: 0;
-    transform: none;
-  }
-}

package/src/design/brand-favicon.ts

@@ -1,18 +0,0 @@
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
-import { FAVICON_COLORS, renderFavicon } from '@/design/favicon'
-import { PROJECT_ROOT } from '@/roots/project'
-
-const BRAND_MARK = 'assets/brand/mark.svg'
-
-/**
- * The brand icon, built from the mark and the favicon's own pair, the same two
- * inputs `web/public/favicon.svg` is generated from. Every surface that shows
- * the icon reads it here rather than keeping a copy that drifts from the mark.
- * It sits apart from `favicon.ts` because the card build imports that module
- * through an `@` alias pointed at `web/src`, so it must import nothing.
- */
-export function brandFavicon(): string {
-  const mark = readFileSync(join(PROJECT_ROOT, BRAND_MARK), 'utf8')
-  return renderFavicon(mark, FAVICON_COLORS)
-}

package/src/design/neutral.ts

@@ -1,127 +0,0 @@
-import type { ColorToken, DesignTokens } from '@/design/tokens'
-import { TOKENS } from '@/design/tokens'
-
-/**
- * The token set `canon design install` hands a target, achromatic so the only
- * palette a target renders is one it wrote under `.claude/design/project/`.
- * Type, spacing, and radii are this repository's by spread, and only the color
- * list is a second copy, held to the same roles by `neutral.test.ts`.
- *
- * Grounds, surface, chrome, and border take the OKLCH lightness of the toolkit
- * role they replace at chroma 0. Text roles are solved against `surface` for
- * the contrast targets `TOKENS` records (13.5, 8.6, 5.6, 4.6), and the accent
- * for 15.5, past `text` so it still reads apart from body copy. The state
- * roles keep the toolkit's values, since a state color is a meaning rather
- * than a palette.
- */
-
-const DARK_GROUNDS = ['background', 'surface'] as const
-const LIGHT_GROUNDS = ['light-background', 'light-surface'] as const
-
-function toolkitRole(role: string): ColorToken {
-  const token = TOKENS.color.find((candidate) => candidate.role === role)
-  if (token === undefined) throw new Error(`TOKENS declares no ${role} role`)
-  return token
-}
-
-const NEUTRAL_COLOR: readonly ColorToken[] = [
-  { role: 'background', intent: 'page canvas', value: '#0e0e0e' },
-  {
-    role: 'surface',
-    intent: 'cards, panels, raised blocks',
-    value: '#141414',
-  },
-  {
-    role: 'chrome',
-    intent: 'the window titlebar, one step above the canvas',
-    value: '#1a1a1a',
-  },
-  { role: 'border', intent: 'every rule and panel edge', value: '#292929' },
-  {
-    role: 'text',
-    intent: 'headings, counts, emphasized runs',
-    value: '#dddddd',
-    grounds: DARK_GROUNDS,
-  },
-  {
-    role: 'text-body',
-    intent: 'default body copy',
-    value: '#b2b2b2',
-    grounds: DARK_GROUNDS,
-  },
-  {
-    role: 'text-secondary',
-    intent: 'labels, captions, supporting copy',
-    value: '#8e8e8e',
-    grounds: DARK_GROUNDS,
-  },
-  {
-    role: 'muted',
-    intent: 'the faintest step, trailing notes',
-    value: '#7f7f7f',
-    grounds: DARK_GROUNDS,
-  },
-  {
-    role: 'accent',
-    intent: 'install command, mark, primary action',
-    value: '#ececec',
-    grounds: DARK_GROUNDS,
-  },
-  toolkitRole('success'),
-  toolkitRole('warning'),
-  toolkitRole('error'),
-  {
-    role: 'light-background',
-    intent: 'page canvas on a light ground',
-    value: '#fafafa',
-  },
-  {
-    role: 'light-surface',
-    intent: 'cards and panels on a light ground',
-    value: '#f1f1f1',
-  },
-  {
-    role: 'light-chrome',
-    intent: 'the window titlebar, one step above the canvas',
-    value: '#e8e8e8',
-  },
-  {
-    role: 'light-text',
-    intent: 'primary text on a light ground',
-    value: '#252525',
-    grounds: LIGHT_GROUNDS,
-  },
-  {
-    role: 'light-text-body',
-    intent: 'default body copy on a light ground',
-    value: '#444444',
-    grounds: LIGHT_GROUNDS,
-  },
-  {
-    role: 'light-text-secondary',
-    intent: 'labels, captions, supporting copy on a light ground',
-    value: '#5f5f5f',
-    grounds: LIGHT_GROUNDS,
-  },
-  {
-    role: 'light-muted',
-    intent: 'secondary text on a light ground',
-    value: '#6c6c6c',
-    grounds: LIGHT_GROUNDS,
-  },
-  {
-    role: 'light-accent',
-    intent: 'links and primary action on light',
-    value: '#191919',
-    grounds: LIGHT_GROUNDS,
-  },
-  toolkitRole('light-success'),
-  {
-    role: 'light-border',
-    intent: 'rules and panel edges on light',
-    value: '#d4d4d4',
-    verify: true,
-  },
-]
-
-export const NEUTRAL_TOKENS: DesignTokens = { ...TOKENS, color: NEUTRAL_COLOR }