capture-flow 0.0.0-stage → 0.1.0

package/vendor/wajha/engine/devices/mock/kit.ts

@@ -0,0 +1,213 @@
+/**
+ * Drawing primitives for mock screens. Mock code works in "points": the
+ * context is scaled so a phone is 390 points wide, like iOS layout, and
+ * every size below reads like a real UI spec. Text is language-neutral:
+ * rounded skeleton bars, plus digits where a real app shows numbers.
+ */
+import type { Ctx2D } from '../../types';
+import { roundRectPath, type Radii } from '../paths';
+import type { Rng } from './rng';
+import type { MockTheme } from './theme';
+
+export interface Area {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export type Form = 'phone' | 'tablet' | 'desktop';
+
+/** Everything a mock painter needs. */
+export interface Mk {
+  ctx: Ctx2D;
+  t: MockTheme;
+  rng: Rng;
+  /** Canvas pixels per point; shadow blur ignores transforms, so it is scaled by hand. */
+  px: number;
+  os: 'ios' | 'android';
+  form: Form;
+  /** Non-negative integer below 1e6 (normalised by paintMockScreen), safe as an array offset. */
+  seed: number;
+}
+
+export const FONT = '"Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+
+export type Paint = string | CanvasGradient;
+
+export function rr(m: Mk, x: number, y: number, w: number, h: number, r: number | Radii): void {
+  m.ctx.beginPath();
+  roundRectPath(m.ctx, x, y, w, h, r);
+}
+
+/** Filled rounded rectangle. */
+export function box(m: Mk, x: number, y: number, w: number, h: number, r: number | Radii, fill: Paint): void {
+  rr(m, x, y, w, h, r);
+  m.ctx.fillStyle = fill;
+  m.ctx.fill();
+}
+
+/** A skeleton line of text: a pill of height `h`. */
+export function bar(m: Mk, x: number, y: number, w: number, h: number, color: Paint = m.t.bar2): void {
+  if (w <= 0) return;
+  box(m, x, y, w, h, h / 2, color);
+}
+
+/** Title-weight skeleton text for a font of `size` points, top at `y`. */
+export function title(m: Mk, x: number, y: number, w: number, size = 17, color: Paint = m.t.bar): void {
+  bar(m, x, y + size * 0.22, w, size * 0.56, color);
+}
+
+/** Body skeleton text for a font of `size` points, top at `y`. */
+export function body(m: Mk, x: number, y: number, w: number, size = 13, color: Paint = m.t.bar2): void {
+  bar(m, x, y + size * 0.27, w, size * 0.46, color);
+}
+
+/** A paragraph: `count` lines, the last one shorter. */
+export function paragraph(m: Mk, x: number, y: number, w: number, count: number, size = 13, color: Paint = m.t.bar2): number {
+  const lh = size * 1.45;
+  for (let i = 0; i < count; i++) {
+    const last = i === count - 1 && count > 1;
+    body(m, x, y + i * lh, last ? w * (0.45 + 0.3 * m.rng.next()) : w * (0.88 + 0.12 * m.rng.next()), size, color);
+  }
+  return count * lh;
+}
+
+export function circle(m: Mk, cx: number, cy: number, r: number, fill: Paint): void {
+  if (!(r > 0)) return;
+  m.ctx.beginPath();
+  m.ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  m.ctx.fillStyle = fill;
+  m.ctx.fill();
+}
+
+export function ringStroke(m: Mk, cx: number, cy: number, r: number, lw: number, color: Paint): void {
+  if (!(r > 0)) return;
+  m.ctx.beginPath();
+  m.ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  m.ctx.lineWidth = lw;
+  m.ctx.strokeStyle = color;
+  m.ctx.stroke();
+}
+
+/** Progress arc from 12 o'clock, clockwise, with round caps over a track. */
+export function progressRing(m: Mk, cx: number, cy: number, r: number, lw: number, p: number, color: Paint, track: Paint | null): void {
+  const ctx = m.ctx;
+  if (track) ringStroke(m, cx, cy, r, lw, track);
+  const k = Math.min(Math.max(p, 0), 1);
+  if (k <= 0) return;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2 * k);
+  ctx.lineWidth = lw;
+  ctx.lineCap = 'round';
+  ctx.strokeStyle = color;
+  ctx.stroke();
+  ctx.lineCap = 'butt';
+}
+
+export function linear(m: Mk, x0: number, y0: number, x1: number, y1: number, stops: ReadonlyArray<readonly [number, string]>): CanvasGradient {
+  const g = m.ctx.createLinearGradient(x0, y0, x1, y1);
+  for (const [o, c] of stops) g.addColorStop(o, c);
+  return g;
+}
+
+export function radial(m: Mk, cx: number, cy: number, r: number, stops: ReadonlyArray<readonly [number, string]>): CanvasGradient {
+  const g = m.ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(r, 0.001));
+  for (const [o, c] of stops) g.addColorStop(o, c);
+  return g;
+}
+
+/** The theme's hero gradient across a rect, top-left to bottom-right. */
+export function brandFill(m: Mk, x: number, y: number, w: number, h: number): CanvasGradient {
+  return linear(m, x, y, x + w, y + h, [
+    [0, m.t.brand[0]],
+    [1, m.t.brand[1]],
+  ]);
+}
+
+/** Runs `draw` with a soft drop shadow given in points. */
+export function shadowed(m: Mk, blur: number, dy: number, color: string, draw: () => void): void {
+  const ctx = m.ctx;
+  ctx.save();
+  ctx.shadowColor = color;
+  ctx.shadowBlur = blur * m.px;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = dy * m.px;
+  draw();
+  ctx.restore();
+}
+
+/**
+ * A raised card: soft shadow in light mode, a hairline in dark mode where
+ * shadows disappear. `fill` defaults to the surface colour.
+ */
+export function card(m: Mk, x: number, y: number, w: number, h: number, r = 22, fill: Paint = m.t.surface, lift = 1): void {
+  if (w <= 0 || h <= 0) return;
+  if (!m.t.dark && lift > 0) {
+    shadowed(m, 18 * lift, 7 * lift, m.t.shadow, () => box(m, x, y, w, h, r, fill));
+  } else {
+    box(m, x, y, w, h, r, fill);
+    if (m.t.dark && lift > 0) {
+      rr(m, x + 0.5, y + 0.5, w - 1, h - 1, Math.max(0, r - 0.5));
+      m.ctx.lineWidth = 1;
+      m.ctx.strokeStyle = 'rgba(255, 255, 255, 0.045)';
+      m.ctx.stroke();
+    }
+  }
+}
+
+/** Draws digits/symbols (never words). Returns the advance width in points. */
+export function num(m: Mk, text: string, x: number, y: number, size: number, weight: number, color: Paint, align: CanvasTextAlign = 'left'): number {
+  const ctx = m.ctx;
+  ctx.font = `${weight} ${size}px ${FONT}`;
+  ctx.textAlign = align;
+  ctx.textBaseline = 'alphabetic';
+  ctx.fillStyle = color;
+  ctx.fillText(text, x, y);
+  return ctx.measureText(text).width;
+}
+
+/** Width of `text` at a size/weight without drawing. */
+export function measure(m: Mk, text: string, size: number, weight: number): number {
+  m.ctx.font = `${weight} ${size}px ${FONT}`;
+  return m.ctx.measureText(text).width;
+}
+
+/** Smooth curve through points (Catmull-Rom as cubic Béziers); adds to the current path. */
+export function smoothPath(ctx: Ctx2D, pts: ReadonlyArray<readonly [number, number]>, moveFirst = true, tension = 1): void {
+  if (pts.length === 0) return;
+  if (moveFirst) ctx.moveTo(pts[0][0], pts[0][1]);
+  else ctx.lineTo(pts[0][0], pts[0][1]);
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[Math.max(0, i - 1)];
+    const p1 = pts[i];
+    const p2 = pts[i + 1];
+    const p3 = pts[Math.min(pts.length - 1, i + 2)];
+    const k = tension / 6;
+    ctx.bezierCurveTo(p1[0] + (p2[0] - p0[0]) * k, p1[1] + (p2[1] - p0[1]) * k, p2[0] - (p3[0] - p1[0]) * k, p2[1] - (p3[1] - p1[1]) * k, p2[0], p2[1]);
+  }
+}
+
+/** A smooth random walk of `n` values in 0..1, for charts. */
+export function series(rng: Rng, n: number, start = 0.45, vol = 0.22, drift = 0.02): number[] {
+  const out: number[] = [];
+  let v = start;
+  for (let i = 0; i < n; i++) {
+    v += (rng.next() - 0.5) * vol + drift;
+    v = Math.min(0.92, Math.max(0.08, v));
+    out.push(v);
+  }
+  return out;
+}
+
+/** Format helpers for believable numbers. */
+export function money(v: number, decimals = 2): string {
+  const fixed = Math.abs(v).toFixed(decimals);
+  const [int, frac] = fixed.split('.');
+  const grouped = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return frac ? `${grouped}.${frac}` : grouped;
+}
+
+export function clock(h: number, min: number): string {
+  return `${h}:${String(min).padStart(2, '0')}`;
+}

package/vendor/wajha/engine/devices/mock/rng.ts

@@ -0,0 +1,40 @@
+/** Small seeded PRNG (mulberry32) so mock screens are identical on every run and platform. */
+
+export interface Rng {
+  /** Uniform in [0, 1). */
+  next(): number;
+  /** Uniform in [lo, hi). */
+  range(lo: number, hi: number): number;
+  /** Integer in [lo, hi] inclusive. */
+  int(lo: number, hi: number): number;
+  pick<T>(items: readonly T[]): T;
+  chance(p: number): boolean;
+}
+
+/** Folds any number (fractions, negatives, NaN) into a well-mixed 32-bit seed. */
+export function hashSeed(n: number): number {
+  const v = Number.isFinite(n) ? n : 0;
+  let h = Math.imul((Math.floor(v) | 0) ^ 0x9e3779b9, 0x85ebca6b);
+  h ^= Math.round((v - Math.floor(v)) * 1e6);
+  h = Math.imul(h ^ (h >>> 15), 0xc2b2ae35);
+  h ^= h >>> 13;
+  h = Math.imul(h, 0x27d4eb2f);
+  return (h ^ (h >>> 16)) >>> 0;
+}
+
+export function createRng(seed: number): Rng {
+  let a = hashSeed(seed) || 0x6d2b79f5;
+  const next = () => {
+    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;
+  };
+  return {
+    next,
+    range: (lo, hi) => lo + (hi - lo) * next(),
+    int: (lo, hi) => Math.floor(lo + (hi - lo + 1) * next()),
+    pick: (items) => items[Math.min(items.length - 1, Math.floor(next() * items.length))],
+    chance: (p) => next() < p,
+  };
+}

package/vendor/wajha/engine/devices/mock/theme.ts

@@ -0,0 +1,133 @@
+/**
+ * Colours of a mock app, derived from the project palette. Palettes often
+ * contain background colours (white, near-black, beige) next to the brand
+ * colour, so accents are chosen by colourfulness and nudged until they read
+ * on the mock's own background.
+ */
+import type { Color } from '../../../model/types';
+import { chroma, contrast, darken, fromHsl, lighten, luminance, mix, parseColor, rotateHue, toHex, toHsl } from '../../color';
+
+export interface MockTheme {
+  dark: boolean;
+  bg: string;
+  surface: string;
+  surface2: string;
+  sidebar: string;
+  /** Numerals and icons. */
+  text: string;
+  text2: string;
+  /** Skeleton text: titles, body copy, faint placeholders. */
+  bar: string;
+  bar2: string;
+  bar3: string;
+  line: string;
+  shadow: string;
+  /** Four harmonious accents, the first one is the brand colour. */
+  accents: [string, string, string, string];
+  accent: string;
+  /** Text/bars on top of an accent fill. */
+  onAccent: string;
+  /** Accent tint for chips and icon tiles. */
+  soft: string;
+  /** A colour close in hue to the accent, so two-colour gradients never turn muddy. */
+  companion: string;
+  /** Rich single-hue gradient for hero cards: start and end colours. */
+  brand: [string, string];
+  good: string;
+  bad: string;
+  warn: string;
+}
+
+/** Vivid, modern defaults for projects without a usable palette. */
+export const FALLBACK_PALETTE: readonly string[] = ['#6c5ce7', '#ff7a59', '#00b894', '#0984e3'];
+
+const HEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+
+/** Palette colours that can carry an accent: colourful enough and not almost white or black. */
+export function usableAccents(palette: readonly Color[]): string[] {
+  const seen = new Set<string>();
+  const vividOnes: string[] = [];
+  const dullOnes: string[] = [];
+  for (const raw of palette) {
+    if (typeof raw !== 'string' || !HEX.test(raw.trim())) continue;
+    const rgb = parseColor(raw);
+    if (rgb.a < 0.5) continue;
+    const c = toHex({ ...rgb, a: 1 }, false);
+    if (seen.has(c)) continue;
+    seen.add(c);
+    const L = luminance(c);
+    const ch = chroma(c);
+    if (ch < 0.16 || L > 0.86 || L < 0.012) continue;
+    // Keep the designer's order, but let muted tones follow the vivid ones.
+    (ch >= 0.35 ? vividOnes : dullOnes).push(c);
+  }
+  return [...vividOnes, ...dullOnes];
+}
+
+/** Distance between two hues on the colour wheel, 0..180 degrees. */
+export function hueDistance(a: string, b: string): number {
+  const d = Math.abs(toHsl(a).h - toHsl(b).h) % 360;
+  return d > 180 ? 360 - d : d;
+}
+
+/** Moves a colour towards white or black until it reaches `target` contrast with `bg` (bounded). */
+function ensureContrast(c: string, bg: string, target: number): string {
+  let out = c;
+  const towardsWhite = luminance(bg) < 0.3;
+  for (let i = 0; i < 10 && contrast(out, bg) < target; i++) out = towardsWhite ? lighten(out, 0.12) : darken(out, 0.1);
+  return out;
+}
+
+/** Keeps saturation alive after contrast fixes so accents never turn grey-brown. */
+function vivid(c: string): string {
+  const hsl = toHsl(c);
+  return hsl.s < 0.45 && chroma(c) > 0.12 ? fromHsl({ ...hsl, s: Math.min(1, hsl.s + 0.25) }) : c;
+}
+
+export function mockTheme(palette: readonly Color[], dark: boolean): MockTheme {
+  const picked = usableAccents(palette);
+  const src = picked.length > 0 ? picked : [...FALLBACK_PALETTE];
+  const first = src[0];
+  // Fill missing accents with hue rotations of the brand colour: always harmonious.
+  const rotations = [38, -48, 152];
+  const raw: string[] = [first];
+  for (let i = 1; i < 4; i++) raw.push(src[i] ?? rotateHue(first, rotations[i - 1]));
+
+  const bg = dark ? '#0b0b0f' : '#f3f4f7';
+  const surface = dark ? '#17181d' : '#ffffff';
+  const accents = raw.map((c) => vivid(ensureContrast(c, dark ? surface : '#ffffff', dark ? 3.2 : 2.4))) as MockTheme['accents'];
+  const accent = accents[0];
+  const text = dark ? '#f4f5f7' : '#0e1015';
+  const onAccent = contrast('#ffffff', accent) >= 2.3 ? '#ffffff' : '#101114';
+  // sRGB blends of distant hues (teal + amber) go olive; keep gradient partners within ~70 degrees.
+  const companion = hueDistance(accent, accents[1]) <= 70 ? accents[1] : rotateHue(accent, 34);
+
+  return {
+    dark,
+    bg,
+    surface,
+    surface2: dark ? '#22232a' : '#eef0f4',
+    sidebar: dark ? '#121217' : '#f7f7f9',
+    text,
+    text2: dark ? '#8f92a1' : '#7a808c',
+    bar: mix(text, surface, dark ? 0.16 : 0.2),
+    bar2: mix(text, surface, dark ? 0.66 : 0.74),
+    bar3: mix(text, surface, dark ? 0.82 : 0.88),
+    line: dark ? 'rgba(255, 255, 255, 0.07)' : 'rgba(16, 22, 34, 0.07)',
+    shadow: dark ? 'rgba(0, 0, 0, 0.5)' : 'rgba(22, 30, 52, 0.1)',
+    accents,
+    accent,
+    onAccent,
+    soft: mix(accent, surface, dark ? 0.78 : 0.86),
+    companion,
+    brand: [lighten(accent, 0.05), darken(mix(accent, companion, 0.6), 0.16)],
+    good: dark ? '#34d399' : '#12a46b',
+    bad: dark ? '#fb7185' : '#e5484d',
+    warn: dark ? '#fbbf24' : '#f59e0b',
+  };
+}
+
+/** Accent tint over a surface, for icon tiles and chips in any accent. */
+export function tint(t: MockTheme, color: string, amount = 0.86): string {
+  return mix(color, t.surface, t.dark ? Math.min(amount, 0.8) : amount);
+}

package/vendor/wajha/engine/devices/mock/widgets.ts

@@ -0,0 +1,231 @@
+/** Reusable app widgets: buttons, chips, section headers, charts, list rows. */
+import { mix, rgba } from '../../color';
+import type { Area, Mk } from './kit';
+import { bar, body, box, card, circle, linear, measure, num, smoothPath, title } from './kit';
+import { icon, type IconName } from './icons';
+import { tint } from './theme';
+
+/** The app types every mock screen can show. */
+export type MockArchetypeId = 'finance' | 'social' | 'tasks' | 'fitness' | 'chat' | 'music' | 'travel' | 'shop' | 'calendar' | 'meditation';
+
+export interface MockApp {
+  id: MockArchetypeId;
+  /** Sidebar navigation on tablets and desktops. */
+  nav: readonly IconName[];
+  /** Logo glyph. */
+  glyph: IconName;
+  /** Phone tab bar icons, or null when the app has its own bottom controls. */
+  tabs: readonly IconName[] | null;
+  tabSelected: number;
+  /** Full-screen backdrop; defaults to the theme background. */
+  backdrop?(m: Mk, W: number, H: number): void;
+  /** Status bar ink when the app's top is not the theme background. */
+  ink?(m: Mk): string;
+  /**
+   * Phone / tablet content. `a` runs from below the status bar to above the
+   * tab bar; `full` is the whole screen (for full-bleed apps).
+   */
+  narrow(m: Mk, a: Area, full: Area): void;
+  /** Desktop content inside the app shell. */
+  wide(m: Mk, a: Area): void;
+}
+
+/** Round icon button; `badge` adds a notification dot. */
+export function iconButton(m: Mk, cx: number, cy: number, d: number, name: IconName, opts: { badge?: boolean; fill?: string; ink?: string; lift?: boolean } = {}): void {
+  const t = m.t;
+  const fill = opts.fill ?? t.surface;
+  if (opts.lift !== false && !t.dark && fill === t.surface) {
+    card(m, cx - d / 2, cy - d / 2, d, d, d / 2, fill, 0.5);
+  } else {
+    circle(m, cx, cy, d / 2, fill);
+  }
+  icon(m.ctx, name, cx, cy, d * 0.46, opts.ink ?? t.text, false, 2);
+  if (opts.badge) {
+    circle(m, cx + d * 0.22, cy - d * 0.22, d * 0.12, fill);
+    circle(m, cx + d * 0.22, cy - d * 0.22, d * 0.085, t.bad);
+  }
+}
+
+/** Section title with a "see all" link on the right. */
+export function sectionHeader(m: Mk, x: number, y: number, w: number, titleW = 118): void {
+  title(m, x, y, titleW, 18);
+  bar(m, x + w - 46, y + 7, 46, 6, m.t.accent);
+}
+
+/** A pill chip with an optional icon and number. Returns its width. */
+export function chip(m: Mk, x: number, y: number, h: number, opts: { text?: string; icon?: IconName; fill: string; ink: string; barW?: number }): number {
+  const pad = h * 0.42;
+  const iconW = opts.icon ? h * 0.52 : 0;
+  const textW = opts.text ? measure(m, opts.text, h * 0.46, 600) : 0;
+  const barW = opts.barW ?? 0;
+  const gap = h * 0.22;
+  const parts = [iconW, textW, barW].filter((v) => v > 0);
+  const w = pad * 2 + parts.reduce((s, v) => s + v, 0) + gap * Math.max(0, parts.length - 1);
+  box(m, x, y, w, h, h / 2, opts.fill);
+  let cx = x + pad;
+  if (opts.icon) {
+    icon(m.ctx, opts.icon, cx + iconW / 2, y + h / 2, iconW, opts.ink, false, 2.6);
+    cx += iconW + gap;
+  }
+  if (opts.text) {
+    num(m, opts.text, cx, y + h * 0.66, h * 0.46, 600, opts.ink);
+    cx += textW + gap;
+  }
+  if (barW > 0) bar(m, cx, y + h / 2 - h * 0.1, barW, h * 0.2, opts.ink);
+  return w;
+}
+
+/** Segmented control of `n` skeleton labels with one selected. */
+export function segmented(m: Mk, x: number, y: number, w: number, n: number, selected: number, h = 30): void {
+  const t = m.t;
+  box(m, x, y, w, h, h / 2, t.surface2);
+  const sw = w / n;
+  for (let i = 0; i < n; i++) {
+    const on = i === selected;
+    if (on) card(m, x + i * sw + 3, y + 3, sw - 6, h - 6, (h - 6) / 2, t.dark ? mix(t.surface2, '#ffffff', 0.12) : '#ffffff', 0.25);
+    bar(m, x + i * sw + sw * 0.32, y + h / 2 - 2.6, sw * 0.36, 5.2, on ? t.bar : t.bar2);
+  }
+}
+
+export interface ChartOptions {
+  color: string;
+  lw?: number;
+  /** Index of a highlighted point with marker and tooltip. */
+  highlight?: number;
+  tooltip?: string;
+  grid?: boolean;
+  fillAlpha?: number;
+  /** Stretch values to the chart height (default true). */
+  normalize?: boolean;
+}
+
+/** Smooth area chart of values in 0..1 over the rect. */
+export function areaChart(m: Mk, r: Area, values: readonly number[], o: ChartOptions): void {
+  if (values.length < 2 || !(r.w > 0) || !(r.h > 0)) return;
+  const ctx = m.ctx;
+  const t = m.t;
+  // Stretch the series over the chart height so every chart looks lively.
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const v of values) {
+    lo = Math.min(lo, v);
+    hi = Math.max(hi, v);
+  }
+  const span = hi - lo > 1e-6 ? hi - lo : 1;
+  const norm = (v: number) => (o.normalize === false ? v : 0.1 + ((v - lo) / span) * 0.78);
+  const pts = values.map((v, i) => [r.x + (r.w * i) / (values.length - 1), r.y + r.h - norm(v) * r.h] as [number, number]);
+  if (o.grid) {
+    ctx.save();
+    ctx.setLineDash([3, 5]);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = t.line;
+    for (let i = 0; i <= 3; i++) {
+      const gy = r.y + (r.h * i) / 3;
+      ctx.beginPath();
+      ctx.moveTo(r.x, gy);
+      ctx.lineTo(r.x + r.w, gy);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  ctx.beginPath();
+  smoothPath(ctx, pts);
+  ctx.lineTo(r.x + r.w, r.y + r.h);
+  ctx.lineTo(r.x, r.y + r.h);
+  ctx.closePath();
+  ctx.fillStyle = linear(m, 0, r.y, 0, r.y + r.h, [
+    [0, rgba(o.color, o.fillAlpha ?? (m.t.dark ? 0.32 : 0.26))],
+    [1, rgba(o.color, 0)],
+  ]);
+  ctx.fill();
+  ctx.beginPath();
+  smoothPath(ctx, pts);
+  ctx.lineWidth = o.lw ?? 2.6;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+  ctx.strokeStyle = o.color;
+  ctx.stroke();
+  if (o.highlight !== undefined) {
+    const [hx, hy] = pts[Math.max(0, Math.min(pts.length - 1, o.highlight))];
+    ctx.save();
+    ctx.setLineDash([3, 4]);
+    ctx.lineWidth = 1.4;
+    ctx.strokeStyle = rgba(o.color, 0.5);
+    ctx.beginPath();
+    ctx.moveTo(hx, hy);
+    ctx.lineTo(hx, r.y + r.h);
+    ctx.stroke();
+    ctx.restore();
+    circle(m, hx, hy, 9, rgba(o.color, 0.18));
+    circle(m, hx, hy, 5.2, t.surface);
+    ctx.beginPath();
+    ctx.arc(hx, hy, 5.2, 0, Math.PI * 2);
+    ctx.lineWidth = 2.6;
+    ctx.strokeStyle = o.color;
+    ctx.stroke();
+    if (o.tooltip) {
+      const tw = measure(m, o.tooltip, 12.5, 600) + 20;
+      const th = 28;
+      const tx = Math.min(Math.max(hx - tw / 2, r.x), r.x + r.w - tw);
+      const ty = hy - th - 14;
+      const ink = t.dark ? '#ffffff' : '#111318';
+      box(m, tx, ty, tw, th, 9, ink);
+      ctx.beginPath();
+      ctx.moveTo(hx - 5, ty + th - 0.5);
+      ctx.lineTo(hx + 5, ty + th - 0.5);
+      ctx.lineTo(hx, ty + th + 5);
+      ctx.closePath();
+      ctx.fillStyle = ink;
+      ctx.fill();
+      num(m, o.tooltip, tx + tw / 2, ty + 18.5, 12.5, 600, t.dark ? '#111318' : '#ffffff', 'center');
+    }
+  }
+  ctx.lineCap = 'butt';
+}
+
+/** Vertical bar chart with rounded bars; `hi` is the highlighted bar. */
+export function barChart(m: Mk, r: Area, values: readonly number[], color: string, hi: number, track: string | null = null): void {
+  const n = values.length;
+  if (n === 0) return;
+  const gap = r.w / n;
+  const bw = Math.min(gap * 0.5, 26);
+  values.forEach((v, i) => {
+    const bx = r.x + gap * (i + 0.5) - bw / 2;
+    if (track) box(m, bx, r.y, bw, r.h, bw / 2, track);
+    const bh = Math.max(bw, r.h * v);
+    box(m, bx, r.y + r.h - bh, bw, bh, bw / 2, i === hi ? color : rgba(color, m.t.dark ? 0.35 : 0.25));
+  });
+}
+
+/** A list row: icon tile, title and subtitle bars, trailing value. */
+export function listRow(m: Mk, x: number, y: number, w: number, opts: { icon: IconName; color: string; titleW: number; subW: number; value?: string; valueColor?: string; sub?: string }): void {
+  const t = m.t;
+  box(m, x, y, 46, 46, 15, tint(t, opts.color));
+  icon(m.ctx, opts.icon, x + 23, y + 23, 21, opts.color, false, 2.1);
+  title(m, x + 60, y + 4, opts.titleW, 15);
+  if (opts.sub) num(m, opts.sub, x + 60, y + 39, 12.5, 500, t.text2);
+  else body(m, x + 60, y + 25, opts.subW, 13);
+  if (opts.value) num(m, opts.value, x + w, y + 29, 15.5, 650, opts.valueColor ?? t.text, 'right');
+}
+
+/** Rating stars, `value` of 5. */
+export function stars(m: Mk, x: number, cy: number, size: number, value: number): void {
+  for (let i = 0; i < 5; i++) {
+    const on = i < Math.round(value);
+    icon(m.ctx, 'star', x + size / 2 + i * size * 1.1, cy, size, on ? '#f5b014' : m.t.bar3, on, 1.6);
+  }
+}
+
+/** A primary call-to-action button with a skeleton label. */
+export function primaryButton(m: Mk, x: number, y: number, w: number, h: number, color: string = m.t.accent, glyph?: IconName): void {
+  const t = m.t;
+  box(m, x, y, w, h, h / 2, color);
+  const labelW = Math.min(w * 0.36, 110);
+  const ink = color === t.accent ? t.onAccent : '#ffffff';
+  if (glyph) {
+    icon(m.ctx, glyph, x + w / 2 - labelW / 2 - 6, y + h / 2, h * 0.4, ink, false, 2.4);
+    bar(m, x + w / 2 - labelW / 2 + 12, y + h / 2 - 3, labelW, 6, rgba(ink, 0.92));
+  } else {
+    bar(m, x + (w - labelW) / 2, y + h / 2 - 3, labelW, 6, rgba(ink, 0.92));
+  }
+}