capture-flow 0.0.0-stage → 0.1.0

package/vendor/wajha/engine/devices/mock/apps/finance.ts

@@ -0,0 +1,164 @@
+/** Finance dashboard: balance, smooth area chart, quick actions, transactions. */
+import { rgba } from '../../../color';
+import { avatar, avatarStack } from '../art';
+import { icon, type IconName } from '../icons';
+import type { Area, Mk } from '../kit';
+import { bar, body, box, brandFill, card, circle, money, num, series, title } from '../kit';
+import type { MockApp } from '../widgets';
+import { areaChart, chip, iconButton, listRow, sectionHeader, segmented } from '../widgets';
+
+const TX_ICONS: IconName[] = ['bag', 'music', 'card', 'flame', 'compass', 'phone', 'leaf'];
+
+function transactions(m: Mk, x: number, y: number, w: number, rows: number, rowH = 66): void {
+  const t = m.t;
+  for (let i = 0; i < rows; i++) {
+    const income = i % 4 === 2;
+    const v = income ? m.rng.range(800, 3200) : m.rng.range(4, 180);
+    listRow(m, x, y + i * rowH, w, {
+      icon: TX_ICONS[(i + m.seed) % TX_ICONS.length],
+      color: t.accents[i % 4],
+      titleW: 80 + m.rng.range(0, 60),
+      subW: 50 + m.rng.range(0, 40),
+      value: `${income ? '+' : '-'}${money(v)}`,
+      valueColor: income ? t.good : t.text,
+    });
+  }
+}
+
+function balanceCard(m: Mk, x: number, y: number, w: number, h: number): void {
+  card(m, x, y, w, h, 26, brandFill(m, x, y, w, h), 1.2);
+  const ctx = m.ctx;
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(x, y, w, h);
+  ctx.clip();
+  circle(m, x + w * 0.92, y + h * 0.05, h * 0.62, 'rgba(255, 255, 255, 0.10)');
+  circle(m, x + w * 0.98, y + h * 0.95, h * 0.42, 'rgba(255, 255, 255, 0.08)');
+  ctx.restore();
+  bar(m, x + 22, y + 24, 70, 6, 'rgba(255, 255, 255, 0.7)');
+  const big = money(m.rng.range(12000, 68000), 0);
+  num(m, big, x + 22, y + 72, Math.min(36, w * 0.11), 700, '#ffffff');
+  num(m, '•••• 4821', x + 22, y + h - 22, 14, 600, 'rgba(255, 255, 255, 0.82)');
+  circle(m, x + w - 50, y + h - 28, 13, 'rgba(255, 255, 255, 0.55)');
+  circle(m, x + w - 34, y + h - 28, 13, 'rgba(255, 255, 255, 0.32)');
+}
+
+function chartCard(m: Mk, r: Area, points: number, labels: number): void {
+  const t = m.t;
+  card(m, r.x, r.y, r.w, r.h, 26);
+  title(m, r.x + 20, r.y + 18, 96, 16);
+  segmented(m, r.x + r.w - Math.min(200, r.w * 0.5) - 16, r.y + 14, Math.min(200, r.w * 0.5), 4, 2, 30);
+  const values = series(m.rng, points, 0.35, 0.2, 0.025);
+  const hi = Math.max(1, points - 4);
+  areaChart(m, { x: r.x + 18, y: r.y + 70, w: r.w - 36, h: r.h - 112 }, values, {
+    color: t.accent,
+    highlight: hi,
+    tooltip: money(4000 + values[hi] * 9000, 0),
+    grid: r.w > 420,
+  });
+  for (let i = 0; i < labels; i++) {
+    const lx = r.x + 18 + ((r.w - 36) * (i + 0.5)) / labels;
+    bar(m, lx - 11, r.y + r.h - 26, 22, 5, t.bar3);
+  }
+}
+
+const ACTIONS: IconName[] = ['arrowUpRight', 'arrowDown', 'plus', 'grid'];
+
+export const finance: MockApp = {
+  id: 'finance',
+  nav: ['home', 'chart', 'card', 'layers', 'users', 'settings'],
+  glyph: 'card',
+  tabs: ['home', 'chart', 'card', 'user'],
+  tabSelected: 0,
+  narrow(m, a) {
+    const t = m.t;
+    const M = 20;
+    const x = a.x + M;
+    const w = a.w - 2 * M;
+    let y = a.y + 8;
+    avatar(m, x + 21, y + 22, 42, m.seed);
+    body(m, x + 54, y + 4, 62, 12);
+    title(m, x + 54, y + 20, 108, 17);
+    iconButton(m, x + w - 21, y + 22, 42, 'bell', { badge: true });
+    iconButton(m, x + w - 73, y + 22, 42, 'search');
+    y += 70;
+    body(m, x, y, 96, 13);
+    const big = money(m.rng.range(9000, 86000), 0);
+    const bw = num(m, big, x, y + 56, 46, 700, t.text);
+    num(m, `.${String(m.rng.int(10, 99))}`, x + bw + 2, y + 56, 26, 600, t.text2);
+    chip(m, x, y + 72, 28, { icon: 'arrowUpRight', text: `+${(m.rng.range(1.2, 9.8)).toFixed(1)}%`, fill: rgba(t.good, t.dark ? 0.16 : 0.12), ink: t.good });
+    y += 122;
+    const ch = Math.min(236, Math.max(180, a.h * 0.3));
+    chartCard(m, { x, y, w, h: ch }, 13, 6);
+    y += ch + 22;
+    const slot = w / ACTIONS.length;
+    ACTIONS.forEach((name, i) => {
+      const cx = x + slot * (i + 0.5);
+      const on = i === 0;
+      if (on) circle(m, cx, y + 28, 28, t.accent);
+      else iconButton(m, cx, y + 28, 56, name, { fill: t.surface });
+      if (on) icon(m.ctx, name, cx, y + 28, 24, t.onAccent, false, 2.2);
+      bar(m, cx - 18, y + 68, 36, 5.5, t.bar2);
+    });
+    y += 98;
+    sectionHeader(m, x, y, w);
+    y += 40;
+    const rows = Math.max(3, Math.ceil((a.y + a.h - y) / 66));
+    card(m, x - 6, y - 10, w + 12, rows * 66 + 14, 24);
+    transactions(m, x + 8, y, w - 16, rows);
+  },
+  wide(m, a) {
+    const t = m.t;
+    const gap = 20;
+    const cols = a.w > 860 ? 4 : 3;
+    const cw = (a.w - gap * (cols - 1)) / cols;
+    const statIcons: IconName[] = ['card', 'arrowUpRight', 'arrowDown', 'flame'];
+    for (let i = 0; i < cols; i++) {
+      const x = a.x + i * (cw + gap);
+      card(m, x, a.y, cw, 122, 22);
+      box(m, x + 18, a.y + 18, 38, 38, 12, rgba(t.accents[i], t.dark ? 0.2 : 0.12));
+      icon(m.ctx, statIcons[i], x + 37, a.y + 37, 19, t.accents[i], false, 2.1);
+      body(m, x + 66, a.y + 23, 70, 13);
+      num(m, money(m.rng.range(1200, 48000), 0), x + 18, a.y + 98, Math.min(28, cw * 0.13), 700, t.text);
+      const up = i !== 2;
+      chip(m, x + cw - 82, a.y + 76, 24, { icon: up ? 'arrowUpRight' : 'arrowDown', text: `${(m.rng.range(1, 12)).toFixed(1)}%`, fill: rgba(up ? t.good : t.bad, 0.12), ink: up ? t.good : t.bad });
+    }
+    const y2 = a.y + 122 + gap;
+    const h2 = Math.min(340, Math.max(220, (a.h - 142) * 0.58));
+    const leftW = a.w * 0.64;
+    chartCard(m, { x: a.x, y: y2, w: leftW, h: h2 }, 22, 12);
+    const rx = a.x + leftW + gap;
+    const rw = a.w - leftW - gap;
+    const bh = h2 * 0.58;
+    balanceCard(m, rx, y2, rw, bh);
+    card(m, rx, y2 + bh + gap, rw, h2 - bh - gap, 22);
+    title(m, rx + 18, y2 + bh + gap + 16, 92, 15);
+    avatarStack(m, rx + 18, y2 + bh + gap + (h2 - bh - gap) * 0.62, 34, 4, m.seed + 3, t.surface);
+    circle(m, rx + rw - 36, y2 + bh + gap + (h2 - bh - gap) * 0.62, 17, t.accent);
+    icon(m.ctx, 'plus', rx + rw - 36, y2 + bh + gap + (h2 - bh - gap) * 0.62, 16, t.onAccent, false, 2.6);
+
+    const y3 = y2 + h2 + gap;
+    const h3 = a.y + a.h - y3;
+    if (h3 < 80) return;
+    card(m, a.x, y3, a.w, h3 + 40, 22);
+    sectionHeader(m, a.x + 20, y3 + 18, a.w - 40, 120);
+    const rows = Math.max(1, Math.ceil((h3 - 60) / 62));
+    for (let i = 0; i < rows; i++) {
+      const ry = y3 + 60 + i * 62;
+      listRow(m, a.x + 20, ry, a.w * 0.38, {
+        icon: TX_ICONS[(i + m.seed) % TX_ICONS.length],
+        color: t.accents[i % 4],
+        titleW: 90 + m.rng.range(0, 50),
+        subW: 60,
+      });
+      num(m, `${m.rng.int(1, 28)}.${String(m.rng.int(1, 12)).padStart(2, '0')}.2026`, a.x + a.w * 0.5, ry + 29, 13.5, 500, t.text2);
+      const ok = i % 3 !== 1;
+      chip(m, a.x + a.w * 0.68, ry + 10, 26, { fill: rgba(ok ? t.good : t.warn, 0.14), ink: ok ? t.good : t.warn, barW: 44 });
+      num(m, `-${money(m.rng.range(8, 420))}`, a.x + a.w - 22, ry + 29, 15, 650, t.text, 'right');
+      if (i < rows - 1) {
+        m.ctx.fillStyle = t.line;
+        m.ctx.fillRect(a.x + 20, ry + 54, a.w - 40, 1);
+      }
+    }
+  },
+};

package/vendor/wajha/engine/devices/mock/apps/fitness.ts

@@ -0,0 +1,145 @@
+/** Fitness: activity rings, stat tiles, weekly bars, workouts. */
+import { rgba } from '../../../color';
+import { avatar, photo } from '../art';
+import { icon, type IconName } from '../icons';
+import type { Area, Mk } from '../kit';
+import { bar, body, card, circle, linear, money, num, progressRing, series, smoothPath, title } from '../kit';
+import { tint } from '../theme';
+import type { MockApp } from '../widgets';
+import { barChart, chip, segmented } from '../widgets';
+
+/** Ring colours: vivid, Apple-like, but drawn from the palette. */
+function ringColors(m: Mk): [string, string, string] {
+  const a = m.t.accents;
+  return [a[0], a[1], a[2]];
+}
+
+function rings(m: Mk, cx: number, cy: number, r: number, lw: number): void {
+  const cols = ringColors(m);
+  const prog = [0.82, 0.64, 0.92];
+  cols.forEach((c, i) => {
+    const rr = r - i * (lw + 4);
+    progressRing(m, cx, cy, rr, lw, prog[i], linear(m, cx - rr, cy - rr, cx + rr, cy + rr, [
+      [0, c],
+      [1, rgba(c, 0.82)],
+    ]), rgba(c, m.t.dark ? 0.2 : 0.14));
+  });
+}
+
+const STATS: { icon: IconName; value: (m: Mk) => string }[] = [
+  { icon: 'flame', value: (m) => money(m.rng.int(320, 780), 0) },
+  { icon: 'activity', value: (m) => money(m.rng.int(5200, 12800), 0) },
+  { icon: 'drop', value: (m) => (m.rng.range(1.2, 2.6)).toFixed(1) },
+  { icon: 'moon', value: (m) => `${m.rng.int(6, 8)}:${String(m.rng.int(0, 59)).padStart(2, '0')}` },
+];
+
+function statTile(m: Mk, r: Area, i: number): void {
+  const t = m.t;
+  const c = t.accents[i % 4];
+  card(m, r.x, r.y, r.w, r.h, 22);
+  circle(m, r.x + 34, r.y + 34, 18, tint(t, c, 0.84));
+  icon(m.ctx, STATS[i].icon, r.x + 34, r.y + 34, 19, c, false, 2.1);
+  num(m, STATS[i].value(m), r.x + 18, r.y + r.h - 34, Math.min(26, r.w * 0.17), 700, t.text);
+  body(m, r.x + 18, r.y + r.h - 26, r.w * 0.38, 12);
+  // Tiny trend line.
+  const vals = series(m.rng, 7, 0.4, 0.3, 0.03);
+  const sx = r.x + r.w - 70;
+  const sy = r.y + 22;
+  const ctx = m.ctx;
+  ctx.beginPath();
+  smoothPath(ctx, vals.map((v, j) => [sx + j * 9, sy + 26 - v * 26] as [number, number]));
+  ctx.lineWidth = 2.2;
+  ctx.lineCap = 'round';
+  ctx.strokeStyle = c;
+  ctx.stroke();
+  ctx.lineCap = 'butt';
+}
+
+function ringCard(m: Mk, r: Area): void {
+  const t = m.t;
+  card(m, r.x, r.y, r.w, r.h, 26);
+  const rad = Math.min(r.h * 0.38, r.w * 0.22);
+  const cx = r.x + 22 + rad;
+  const cy = r.y + r.h / 2;
+  rings(m, cx, cy, rad, Math.max(10, rad * 0.21));
+  const cols = ringColors(m);
+  const vals = [`${m.rng.int(380, 560)}/600`, `${m.rng.int(20, 34)}/45`, `${m.rng.int(9, 12)}/12`];
+  const tx = cx + rad + 26;
+  const step = Math.min(46, (r.h - 40) / 3);
+  vals.forEach((v, i) => {
+    const ty = cy - step + i * step;
+    circle(m, tx + 5, ty - 5, 5, cols[i]);
+    num(m, v, tx + 18, ty + 1, 18, 700, t.text);
+    body(m, tx + 18, ty + 6, 54, 11);
+  });
+}
+
+function weekCard(m: Mk, r: Area): void {
+  const t = m.t;
+  card(m, r.x, r.y, r.w, r.h, 24);
+  title(m, r.x + 20, r.y + 18, 100, 15);
+  chip(m, r.x + r.w - 100, r.y + 14, 26, { icon: 'arrowUpRight', text: '+12%', fill: rgba(t.good, 0.13), ink: t.good });
+  const vals = series(m.rng, 7, 0.55, 0.45, 0);
+  barChart(m, { x: r.x + 14, y: r.y + 58, w: r.w - 28, h: r.h - 96 }, vals, t.accent, 4);
+  for (let i = 0; i < 7; i++) bar(m, r.x + 14 + ((r.w - 28) * (i + 0.5)) / 7 - 6, r.y + r.h - 24, 12, 5, i === 4 ? t.accent : t.bar3);
+}
+
+function workoutRow(m: Mk, x: number, y: number, w: number, k: number): void {
+  const t = m.t;
+  photo(m, x, y, 58, 58, 16, m.seed + k * 3 + 1);
+  title(m, x + 72, y + 8, 110 + (k % 3) * 20, 15);
+  icon(m.ctx, 'clock', x + 79, y + 41, 13, t.text2, false, 2.2);
+  num(m, `${m.rng.int(20, 59)}:00`, x + 90, y + 45.5, 12.5, 500, t.text2);
+  icon(m.ctx, 'flame', x + 146, y + 41, 13, t.text2, false, 2.2);
+  num(m, String(m.rng.int(180, 640)), x + 157, y + 45.5, 12.5, 500, t.text2);
+  icon(m.ctx, 'chevronRight', x + w - 10, y + 29, 18, t.text2, false, 2.2);
+}
+
+export const fitness: MockApp = {
+  id: 'fitness',
+  nav: ['activity', 'flame', 'calendar', 'chart', 'users', 'settings'],
+  glyph: 'activity',
+  tabs: ['activity', 'flame', 'chart', 'user'],
+  tabSelected: 0,
+  narrow(m, a) {
+    const t = m.t;
+    const M = 20;
+    const x = a.x + M;
+    const w = a.w - 2 * M;
+    let y = a.y + 8;
+    bar(m, x, y + 6, 92, 6, t.bar2);
+    title(m, x, y + 18, 130, 28);
+    avatar(m, x + w - 21, y + 24, 42, m.seed + 4);
+    y += 74;
+    ringCard(m, { x, y, w, h: 196 });
+    y += 214;
+    const gap = 14;
+    const tw = (w - gap) / 2;
+    for (let i = 0; i < 4; i++) statTile(m, { x: x + (i % 2) * (tw + gap), y: y + Math.floor(i / 2) * (128 + gap), w: tw, h: 128 }, i);
+    y += 2 * 128 + gap + 18;
+    weekCard(m, { x, y, w, h: 196 });
+    y += 214;
+    title(m, x, y, 120, 17);
+    y += 36;
+    for (let k = 0; y < a.y + a.h + 30; k++, y += 76) workoutRow(m, x, y, w, k);
+  },
+  wide(m, a) {
+    const gap = 20;
+    const leftW = a.w * 0.4;
+    ringCard(m, { x: a.x, y: a.y, w: leftW, h: 260 });
+    const rx = a.x + leftW + gap;
+    const rw = a.w - leftW - gap;
+    const tw = (rw - gap) / 2;
+    for (let i = 0; i < 4; i++) statTile(m, { x: rx + (i % 2) * (tw + gap), y: a.y + Math.floor(i / 2) * (120 + gap), w: tw, h: 120 }, i);
+    const y2 = a.y + 260 + gap;
+    const h2 = Math.max(160, a.y + a.h - y2);
+    const cw = a.w * 0.6;
+    weekCard(m, { x: a.x, y: y2, w: cw, h: h2 });
+    const lx = a.x + cw + gap;
+    const lw = a.w - cw - gap;
+    card(m, lx, y2, lw, h2 + 30, 24);
+    title(m, lx + 20, y2 + 18, 110, 15);
+    segmented(m, lx + lw - 150, y2 + 12, 130, 3, 0, 28);
+    for (let k = 0, y = y2 + 62; y < a.y + a.h; k++, y += 74) workoutRow(m, lx + 20, y, lw - 40, k);
+  },
+};

package/vendor/wajha/engine/devices/mock/apps/index.ts

@@ -0,0 +1,14 @@
+/** Every mock app, in seed order. Seed n shows APPS[n mod length]. */
+import type { MockApp } from '../widgets';
+import { calendar } from './calendar';
+import { chat } from './chat';
+import { finance } from './finance';
+import { fitness } from './fitness';
+import { meditation } from './meditation';
+import { music } from './music';
+import { shop } from './shop';
+import { social } from './social';
+import { tasks } from './tasks';
+import { travel } from './travel';
+
+export const APPS: readonly MockApp[] = [finance, social, tasks, fitness, chat, music, travel, shop, calendar, meditation];

package/vendor/wajha/engine/devices/mock/apps/meditation.ts

@@ -0,0 +1,167 @@
+/** Meditation timer: calm gradient, breathing halo, big countdown ring, sessions. */
+import { lighten, mix, rgba } from '../../../color';
+import { photo } from '../art';
+import { icon, type IconName } from '../icons';
+import type { Mk } from '../kit';
+import { bar, body, box, card, circle, linear, num, radial, shadowed, title } from '../kit';
+import type { MockApp } from '../widgets';
+
+function halo(m: Mk, cx: number, cy: number, r: number, progress: number, ink: string): void {
+  const t = m.t;
+  const ctx = m.ctx;
+  for (let i = 3; i >= 1; i--) circle(m, cx, cy, r * (1 + i * 0.13), rgba(t.accent, t.dark ? 0.05 + (3 - i) * 0.03 : 0.06 + (3 - i) * 0.035));
+  circle(m, cx, cy, r, radial(m, cx, cy - r * 0.3, r * 1.3, [
+    [0, t.dark ? rgba(lighten(t.accent, 0.2), 0.32) : rgba('#ffffff', 0.95)],
+    [1, t.dark ? rgba(t.accent, 0.1) : rgba(lighten(t.accent, 0.7), 0.9)],
+  ]));
+  const lw = Math.max(8, r * 0.075);
+  const rr = r * 0.86;
+  ctx.beginPath();
+  ctx.arc(cx, cy, rr, 0, Math.PI * 2);
+  ctx.lineWidth = lw;
+  ctx.strokeStyle = rgba(t.accent, t.dark ? 0.2 : 0.14);
+  ctx.stroke();
+  const a1 = -Math.PI / 2 + Math.PI * 2 * progress;
+  ctx.beginPath();
+  ctx.arc(cx, cy, rr, -Math.PI / 2, a1);
+  ctx.lineCap = 'round';
+  ctx.strokeStyle = linear(m, cx - rr, cy - rr, cx + rr, cy + rr, [
+    [0, t.companion],
+    [1, t.accent],
+  ]);
+  ctx.stroke();
+  ctx.lineCap = 'butt';
+  const kx = cx + Math.cos(a1) * rr;
+  const ky = cy + Math.sin(a1) * rr;
+  shadowed(m, 10, 3, rgba(t.accent, 0.4), () => circle(m, kx, ky, lw * 0.95, '#ffffff'));
+  circle(m, kx, ky, lw * 0.45, t.accent);
+  num(m, '12:45', cx, cy + r * 0.13, Math.min(60, r * 0.42), 300, ink, 'center');
+  bar(m, cx - r * 0.22, cy + r * 0.28, r * 0.44, 6, rgba(ink, 0.35));
+}
+
+const STATS: { icon: IconName; value: string }[] = [
+  { icon: 'flame', value: '7' },
+  { icon: 'clock', value: '128' },
+  { icon: 'heart', value: '14' },
+];
+
+function sessionCard(m: Mk, x: number, y: number, w: number, h: number, k: number): void {
+  photo(m, x, y, w, h, 22, m.seed + k * 4 + 3);
+  box(m, x, y + h * 0.4, w, h * 0.6, [0, 0, 22, 22], linear(m, 0, y + h * 0.4, 0, y + h, [
+    [0, 'rgba(0, 0, 0, 0)'],
+    [1, 'rgba(0, 0, 0, 0.5)'],
+  ]));
+  bar(m, x + 14, y + h - 40, w * 0.55, 8, 'rgba(255, 255, 255, 0.95)');
+  num(m, `${5 + ((k * 7) % 20)}:00`, x + 14, y + h - 14, 12, 600, 'rgba(255, 255, 255, 0.85)');
+  circle(m, x + w - 24, y + 24, 14, 'rgba(255, 255, 255, 0.3)');
+  icon(m.ctx, 'play', x + w - 23, y + 24, 12, '#ffffff', false, 1.6);
+}
+
+function inkFor(m: Mk): string {
+  return m.t.dark ? '#ffffff' : m.t.text;
+}
+
+export const meditation: MockApp = {
+  id: 'meditation',
+  nav: ['moon', 'leaf', 'music', 'chart', 'heart', 'settings'],
+  glyph: 'leaf',
+  tabs: null,
+  tabSelected: 0,
+  backdrop(m, W, H) {
+    const t = m.t;
+    const ctx = m.ctx;
+    ctx.fillStyle = linear(m, 0, 0, 0, H, t.dark
+      ? [
+          [0, mix(t.accent, '#090912', 0.72)],
+          [0.6, '#0b0b14'],
+          [1, '#07070b'],
+        ]
+      : [
+          [0, lighten(t.accent, 0.82)],
+          [0.55, lighten(t.companion, 0.9)],
+          [1, '#f7f7fa'],
+        ]);
+    ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = radial(m, W * 0.15, H * 0.12, W * 0.8, [
+      [0, rgba(t.companion, t.dark ? 0.22 : 0.25)],
+      [1, rgba(t.companion, 0)],
+    ]);
+    ctx.fillRect(0, 0, W, H);
+  },
+  ink: inkFor,
+  narrow(m, a) {
+    const t = m.t;
+    const ink = inkFor(m);
+    const M = 22;
+    const x = a.x + M;
+    const w = a.w - 2 * M;
+    let y = a.y + 8;
+    icon(m.ctx, 'close', x + 10, y + 18, 22, ink, false, 2.2);
+    bar(m, a.x + a.w / 2 - 40, y + 14, 80, 8, rgba(ink, 0.7));
+    icon(m.ctx, 'more', x + w - 10, y + 18, 24, ink, false);
+    y += 54;
+    bar(m, a.x + a.w / 2 - 92, y, 184, 16, rgba(ink, 0.92));
+    bar(m, a.x + a.w / 2 - 70, y + 30, 140, 8, rgba(ink, 0.4));
+    y += 64;
+    const r = Math.min(w * 0.38, a.h * 0.21, 170);
+    halo(m, a.x + a.w / 2, y + r * 1.3, r, 0.62, ink);
+    y += r * 2.6 + 18;
+    const step = w / 3;
+    STATS.forEach((s, i) => {
+      const cx = x + step * (i + 0.5);
+      icon(m.ctx, s.icon, cx - 20, y + 10, 18, t.accent, false, 2.2);
+      num(m, s.value, cx - 6, y + 16, 18, 700, ink);
+      bar(m, cx - 20, y + 30, 40, 5, rgba(ink, 0.3));
+    });
+    y += 64;
+    const cy = y + 40;
+    const glass = t.dark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(255, 255, 255, 0.8)';
+    circle(m, a.x + a.w / 2 - 92, cy, 26, glass);
+    icon(m.ctx, 'prev', a.x + a.w / 2 - 92, cy, 20, ink, false, 1.6);
+    shadowed(m, 28, 12, rgba(t.accent, 0.45), () => circle(m, a.x + a.w / 2, cy, 40, t.accent));
+    icon(m.ctx, 'pause', a.x + a.w / 2, cy, 30, t.onAccent, false);
+    circle(m, a.x + a.w / 2 + 92, cy, 26, glass);
+    icon(m.ctx, 'next', a.x + a.w / 2 + 92, cy, 20, ink, false, 1.6);
+    y += 112;
+    title(m, x, y, 120, 17, rgba(ink, 0.85));
+    y += 36;
+    const cw = Math.min(170, w * 0.46);
+    for (let i = 0; x + i * (cw + 12) < a.x + a.w; i++) sessionCard(m, x + i * (cw + 12), y, cw, Math.max(120, Math.min(170, a.y + a.h - y + 40)), i);
+  },
+  wide(m, a) {
+    const t = m.t;
+    const gap = 20;
+    const lw = a.w * 0.5;
+    card(m, a.x, a.y, lw, a.h + 40, 28, linear(m, a.x, a.y, a.x + lw, a.y + a.h, t.dark
+      ? [
+          [0, mix(t.accent, '#0b0b14', 0.7)],
+          [1, '#0b0b12'],
+        ]
+      : [
+          [0, lighten(t.accent, 0.85)],
+          [1, lighten(t.companion, 0.9)],
+        ]), 1);
+    const ink = inkFor(m);
+    const r = Math.min(lw * 0.3, a.h * 0.3);
+    halo(m, a.x + lw / 2, a.y + a.h * 0.44, r, 0.62, ink);
+    const cy = a.y + a.h * 0.44 + r * 1.55;
+    shadowed(m, 24, 10, rgba(t.accent, 0.4), () => circle(m, a.x + lw / 2, cy, 34, t.accent));
+    icon(m.ctx, 'pause', a.x + lw / 2, cy, 26, t.onAccent, false);
+    const rx = a.x + lw + gap;
+    const rw = a.w - lw - gap;
+    title(m, rx, a.y + 4, 140, 18);
+    const cw = (rw - gap) / 2;
+    const ch = Math.min(200, (a.h - 200) / 2);
+    for (let i = 0; i < 4; i++) sessionCard(m, rx + (i % 2) * (cw + gap), a.y + 40 + Math.floor(i / 2) * (ch + gap), cw, ch, i);
+    const sy = a.y + 40 + 2 * (ch + gap);
+    const sw = (rw - gap * 2) / 3;
+    STATS.forEach((s, i) => {
+      const sx = rx + i * (sw + gap);
+      card(m, sx, sy, sw, 110, 22);
+      circle(m, sx + 32, sy + 32, 16, rgba(t.accents[i], 0.14));
+      icon(m.ctx, s.icon, sx + 32, sy + 32, 17, t.accents[i], false, 2.2);
+      num(m, s.value, sx + 18, sy + 86, 26, 700, t.text);
+      body(m, sx + 18 + 44, sy + 72, sw * 0.3, 12);
+    });
+  },
+};

package/vendor/wajha/engine/devices/mock/apps/music.ts

@@ -0,0 +1,152 @@
+/** Music player: large cover art on a colour-matched backdrop, waveform scrubber, transport controls. */
+import { darken, lighten, mix, rgba, rotateHue } from '../../../color';
+import { albumArt } from '../art';
+import { icon } from '../icons';
+import type { Mk } from '../kit';
+import { bar, body, box, card, circle, linear, num, paragraph, radial, shadowed, title } from '../kit';
+import type { MockApp } from '../widgets';
+import { sectionHeader } from '../widgets';
+
+/** Colour the backdrop takes from the cover. */
+function coverTone(m: Mk): string {
+  return rotateHue(m.t.accents[0], ((m.seed * 37) % 60) - 30);
+}
+
+function waveform(m: Mk, x: number, cy: number, w: number, played: number, color: string, rest: string): void {
+  const n = Math.max(12, Math.floor(w / 6));
+  const step = w / n;
+  for (let i = 0; i < n; i++) {
+    const v = 0.18 + 0.82 * Math.abs(Math.sin(i * 0.9 + m.seed) * 0.6 + Math.sin(i * 0.31) * 0.4);
+    const h = 4 + v * 26;
+    box(m, x + i * step, cy - h / 2, step * 0.55, h, step * 0.27, i / n < played ? color : rest);
+  }
+}
+
+function controls(m: Mk, cx: number, cy: number, w: number, ink: string): void {
+  const t = m.t;
+  const ctx = m.ctx;
+  const sp = Math.min(w / 4.6, 82);
+  icon(ctx, 'shuffle', cx - sp * 2, cy, 22, rgba(ink, 0.55), false, 2);
+  icon(ctx, 'prev', cx - sp, cy, 32, ink, false, 1.6);
+  shadowed(m, 24, 10, rgba(t.accent, 0.4), () => circle(m, cx, cy, 37, t.accent));
+  icon(ctx, 'pause', cx, cy, 30, t.onAccent, false);
+  icon(ctx, 'next', cx + sp, cy, 32, ink, false, 1.6);
+  icon(ctx, 'repeat', cx + sp * 2, cy, 22, t.accent, false, 2);
+}
+
+export const music: MockApp = {
+  id: 'music',
+  nav: ['home', 'search', 'music', 'list', 'heart', 'settings'],
+  glyph: 'music',
+  tabs: null,
+  tabSelected: 0,
+  backdrop(m, W, H) {
+    const t = m.t;
+    const c = coverTone(m);
+    const ctx = m.ctx;
+    ctx.fillStyle = linear(m, 0, 0, 0, H, t.dark
+      ? [
+          [0, darken(c, 0.45)],
+          [0.55, mix(darken(c, 0.7), t.bg, 0.4)],
+          [1, t.bg],
+        ]
+      : [
+          [0, lighten(c, 0.72)],
+          [0.6, lighten(c, 0.9)],
+          [1, t.bg],
+        ]);
+    ctx.fillRect(0, 0, W, H);
+    ctx.fillStyle = radial(m, W * 0.8, H * 0.1, W * 0.9, [
+      [0, rgba(rotateHue(c, 40), t.dark ? 0.35 : 0.28)],
+      [1, rgba(c, 0)],
+    ]);
+    ctx.fillRect(0, 0, W, H);
+  },
+  ink: (m) => (m.t.dark ? '#ffffff' : m.t.text),
+  narrow(m, a) {
+    const t = m.t;
+    const ink = t.dark ? '#ffffff' : t.text;
+    const M = 26;
+    const x = a.x + M;
+    const w = a.w - 2 * M;
+    let y = a.y + 8;
+    icon(m.ctx, 'chevronDown', x + 10, y + 18, 26, ink, false, 2.4);
+    bar(m, a.x + a.w / 2 - 34, y + 6, 68, 5, rgba(ink, 0.45));
+    bar(m, a.x + a.w / 2 - 54, y + 20, 108, 8, rgba(ink, 0.85));
+    icon(m.ctx, 'more', x + w - 10, y + 18, 24, ink, false);
+    y += 58;
+    const s = Math.min(w, a.h * 0.46);
+    const ax = a.x + (a.w - s) / 2;
+    shadowed(m, 46, 22, rgba(darken(coverTone(m), 0.4), 0.45), () => box(m, ax, y, s, s, 24, coverTone(m)));
+    albumArt(m, ax, y, s, 24, m.seed + 2);
+    y += s + 30;
+    bar(m, x, y + 4, w * 0.56, 13, ink);
+    bar(m, x, y + 30, w * 0.36, 8, rgba(ink, 0.5));
+    icon(m.ctx, 'heart', x + w - 14, y + 18, 26, t.accent, true, 2);
+    y += 66;
+    waveform(m, x, y + 14, w, 0.38, ink, rgba(ink, 0.22));
+    num(m, '1:24', x, y + 48, 12.5, 600, rgba(ink, 0.6));
+    num(m, '-2:31', x + w, y + 48, 12.5, 600, rgba(ink, 0.6), 'right');
+    y += 98;
+    controls(m, a.x + a.w / 2, y, w, ink);
+    y += 70;
+    icon(m.ctx, 'phone', x + 10, y, 20, rgba(ink, 0.55), false, 2);
+    icon(m.ctx, 'share', a.x + a.w / 2, y, 20, rgba(ink, 0.55), false, 2);
+    icon(m.ctx, 'list', x + w - 10, y, 20, rgba(ink, 0.55), false, 2);
+    y += 34;
+    if (y < a.y + a.h - 60) {
+      const lh = Math.max(120, a.y + a.h - y + 40);
+      box(m, x - 8, y, w + 16, lh, 26, t.dark ? 'rgba(255, 255, 255, 0.07)' : 'rgba(255, 255, 255, 0.6)');
+      bar(m, x + 12, y + 22, 70, 8, rgba(ink, 0.8));
+      paragraph(m, x + 12, y + 50, w - 24, Math.max(1, Math.min(6, Math.floor((lh - 60) / 30))), 18, rgba(ink, 0.32));
+    }
+  },
+  wide(m, a) {
+    const t = m.t;
+    const c = coverTone(m);
+    const heroH = Math.min(240, a.h * 0.36);
+    card(m, a.x, a.y, a.w, heroH, 26, linear(m, a.x, a.y, a.x + a.w, a.y + heroH, [
+      [0, darken(c, 0.25)],
+      [1, rotateHue(c, 50)],
+    ]), 1);
+    bar(m, a.x + 32, a.y + 38, 80, 7, 'rgba(255, 255, 255, 0.7)');
+    bar(m, a.x + 32, a.y + 62, Math.min(320, a.w * 0.34), 22, '#ffffff');
+    bar(m, a.x + 32, a.y + 98, Math.min(240, a.w * 0.26), 8, 'rgba(255, 255, 255, 0.7)');
+    box(m, a.x + 32, a.y + heroH - 70, 128, 42, 21, '#ffffff');
+    icon(m.ctx, 'play', a.x + 58, a.y + heroH - 49, 16, c, false, 1.6);
+    bar(m, a.x + 76, a.y + heroH - 52, 58, 6, darken(c, 0.2));
+    const as = heroH - 48;
+    albumArt(m, a.x + a.w - as - 24, a.y + 24, as, 18, m.seed + 5);
+    albumArt(m, a.x + a.w - as * 1.7 - 40, a.y + 24 + as * 0.15, as * 0.7, 16, m.seed + 6);
+
+    let y = a.y + heroH + 26;
+    sectionHeader(m, a.x, y, a.w, 150);
+    y += 40;
+    const cols = a.w > 900 ? 6 : 5;
+    const gap = 18;
+    const cw = (a.w - gap * (cols - 1)) / cols;
+    for (let row = 0; y + cw * 0.5 < a.y + a.h - 70; row++) {
+      for (let i = 0; i < cols; i++) {
+        const cx = a.x + i * (cw + gap);
+        albumArt(m, cx, y, cw, 16, m.seed + row * cols + i + 9);
+        title(m, cx, y + cw + 10, cw * 0.7, 14);
+        body(m, cx, y + cw + 30, cw * 0.48, 12);
+      }
+      y += cw + 64;
+    }
+    // Now playing bar.
+    const py = a.y + a.h - 64;
+    card(m, a.x, py, a.w, 76, 22, t.dark ? t.surface2 : t.surface, 1.2);
+    albumArt(m, a.x + 12, py + 10, 56, 12, m.seed + 2);
+    title(m, a.x + 82, py + 16, 120, 15);
+    body(m, a.x + 82, py + 38, 80, 12);
+    const ccx = a.x + a.w / 2;
+    icon(m.ctx, 'prev', ccx - 54, py + 32, 22, t.text, false, 1.6);
+    circle(m, ccx, py + 32, 22, t.accent);
+    icon(m.ctx, 'pause', ccx, py + 32, 18, t.onAccent, false);
+    icon(m.ctx, 'next', ccx + 54, py + 32, 22, t.text, false, 1.6);
+    const wx = ccx + 100;
+    const ww = Math.max(0, a.x + a.w - 40 - wx);
+    if (ww > 60) waveform(m, wx, py + 32, ww, 0.42, t.accent, t.bar3);
+  },
+};