capture-flow 0.0.0-stage → 0.1.1

package/vendor/wajha/engine/devices/macbook.ts

@@ -0,0 +1,187 @@
+/**
+ * MacBook Pro seen straight on: aluminium-rimmed glass lid with a notch,
+ * a glimpse of the hinge, and the thin front slab of the base with its
+ * thumb scoop. The base is the widest part and spans the whole geometry.
+ */
+import type { Ctx2D } from '../types';
+import { darken, lighten, mix } from '../color';
+import type { MacLayout } from './geometry';
+import type { FramePaint } from './finish';
+import { roundRectPath } from './paths';
+import type { ScreenContent } from './screen';
+import { paintScreen } from './screen';
+import { paintBand, paintInnerShadow, paintLens } from './slab';
+
+function lidPath(ctx: Ctx2D, L: MacLayout, inset: number): void {
+  const { lid } = L;
+  const t = Math.max(0, lid.rTop - inset);
+  const b = Math.max(0, lid.rBottom - inset);
+  roundRectPath(ctx, lid.x + inset, lid.y + inset, lid.w - 2 * inset, lid.h - 2 * inset, [t, t, b, b]);
+}
+
+/** Front slab of the base: tiny top corners, soft elliptical bottom corners where the case curves under. */
+export function basePath(ctx: Ctx2D, L: MacLayout): void {
+  const { x, y, w, h } = L.base;
+  if (!(w > 0) || !(h > 0)) return;
+  const rt = Math.min(h * 0.22, w / 4);
+  const rx = Math.min(w * 0.034, w / 4);
+  const ry = Math.min(h * 0.78, h - rt);
+  const k = 0.5523; // cubic circle constant
+  ctx.moveTo(x + rt, y);
+  ctx.lineTo(x + w - rt, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + rt);
+  ctx.lineTo(x + w, y + h - ry);
+  ctx.bezierCurveTo(x + w, y + h - ry * (1 - k), x + w - rx * (1 - k), y + h, x + w - rx, y + h);
+  ctx.lineTo(x + rx, y + h);
+  ctx.bezierCurveTo(x + rx * (1 - k), y + h, x, y + h - ry * (1 - k), x, y + h - ry);
+  ctx.lineTo(x, y + rt);
+  ctx.quadraticCurveTo(x, y, x + rt, y);
+  ctx.closePath();
+}
+
+/** Lid and base outlines, for the drop shadow. */
+export function macBodyPath(ctx: Ctx2D, L: MacLayout): void {
+  lidPath(ctx, L, 0);
+  basePath(ctx, L);
+}
+
+function paintBase(ctx: Ctx2D, L: MacLayout, paint: FramePaint, px: number): void {
+  const { x, y, w, h } = L.base;
+  const c = paint.base;
+  const g = ctx.createLinearGradient(0, y, 0, y + h);
+  if (paint.finish === 'clay') {
+    g.addColorStop(0, lighten(c, 0.05));
+    g.addColorStop(1, darken(c, 0.12));
+  } else if (paint.finish === 'matte') {
+    g.addColorStop(0, lighten(c, 0.16));
+    g.addColorStop(0.5, c);
+    g.addColorStop(1, darken(c, 0.28));
+  } else {
+    g.addColorStop(0, lighten(c, 0.5));
+    g.addColorStop(0.1, lighten(c, 0.2));
+    g.addColorStop(0.45, c);
+    g.addColorStop(0.82, darken(c, 0.2));
+    g.addColorStop(1, darken(c, 0.45));
+  }
+  ctx.beginPath();
+  basePath(ctx, L);
+  ctx.fillStyle = g;
+  ctx.fill();
+
+  if (paint.finish !== 'clay') {
+    // Brushed aluminium falls off towards the ends and brightens in the middle.
+    const hg = ctx.createLinearGradient(x, 0, x + w, 0);
+    hg.addColorStop(0, 'rgba(0, 0, 0, 0.2)');
+    hg.addColorStop(0.07, 'rgba(0, 0, 0, 0)');
+    hg.addColorStop(0.5, `rgba(255, 255, 255, ${paint.finish === 'metal' ? 0.1 : 0.05})`);
+    hg.addColorStop(0.93, 'rgba(0, 0, 0, 0)');
+    hg.addColorStop(1, 'rgba(0, 0, 0, 0.2)');
+    ctx.beginPath();
+    basePath(ctx, L);
+    ctx.fillStyle = hg;
+    ctx.fill();
+  }
+
+  // Thumb scoop in the top edge.
+  const nw = w * 0.13;
+  const nh = h * 0.42;
+  const nx = x + (w - nw) / 2;
+  const sg = ctx.createLinearGradient(0, y, 0, y + nh);
+  sg.addColorStop(0, darken(c, paint.finish === 'clay' ? 0.16 : 0.38));
+  sg.addColorStop(1, darken(c, paint.finish === 'clay' ? 0.05 : 0.1));
+  ctx.beginPath();
+  ctx.moveTo(nx, y);
+  ctx.bezierCurveTo(nx + nh * 0.9, y, nx + nh * 0.55, y + nh, nx + nh * 1.9, y + nh);
+  ctx.lineTo(nx + nw - nh * 1.9, y + nh);
+  ctx.bezierCurveTo(nx + nw - nh * 0.55, y + nh, nx + nw - nh * 0.9, y, nx + nw, y);
+  ctx.closePath();
+  ctx.fillStyle = sg;
+  ctx.fill();
+
+  if (paint.finish === 'metal') {
+    // Chamfered top edge catching the light.
+    const hair = Math.min(1 / px, h * 0.08);
+    ctx.fillStyle = lighten(c, 0.72);
+    ctx.fillRect(x + w * 0.004, y, w * 0.992, hair);
+  }
+  // Underside in shadow, with the case curving away from view.
+  const ug = ctx.createLinearGradient(0, y + h * 0.82, 0, y + h);
+  ug.addColorStop(0, 'rgba(0, 0, 0, 0)');
+  ug.addColorStop(1, `rgba(0, 0, 0, ${paint.finish === 'clay' ? 0.12 : 0.28})`);
+  ctx.beginPath();
+  basePath(ctx, L);
+  ctx.fillStyle = ug;
+  ctx.fill();
+}
+
+function paintHinge(ctx: Ctx2D, L: MacLayout, paint: FramePaint): void {
+  const { x, y, w, h } = L.hinge;
+  const g = ctx.createLinearGradient(0, y, 0, y + h);
+  if (paint.finish === 'clay') {
+    g.addColorStop(0, darken(paint.base, 0.35));
+    g.addColorStop(1, darken(paint.base, 0.2));
+  } else {
+    g.addColorStop(0, '#0b0b0d');
+    g.addColorStop(0.55, mix('#26262a', paint.base, 0.15));
+    g.addColorStop(1, '#0e0e10');
+  }
+  ctx.beginPath();
+  roundRectPath(ctx, x, y, w, h, [0, 0, h * 0.5, h * 0.5]);
+  ctx.fillStyle = g;
+  ctx.fill();
+}
+
+function paintNotch(ctx: Ctx2D, L: MacLayout, paint: FramePaint, px: number): void {
+  const s = L.screen;
+  const nw = L.notch.w;
+  const nh = L.notch.h;
+  if (!(nw > 0) || !(nh > 0)) return;
+  const x = s.x + (s.w - nw) / 2;
+  const y = s.y - Math.min(1 / px, (s.y - L.rim) * 0.5); // overlap the bezel so no seam shows
+  const r = nh * 0.36;
+  const f = Math.min(nh * 0.24, nw * 0.1);
+  const bottom = s.y + nh;
+  ctx.beginPath();
+  ctx.moveTo(x - f, y);
+  ctx.quadraticCurveTo(x, y, x, y + f);
+  ctx.lineTo(x, bottom - r);
+  ctx.quadraticCurveTo(x, bottom, x + r, bottom);
+  ctx.lineTo(x + nw - r, bottom);
+  ctx.quadraticCurveTo(x + nw, bottom, x + nw, bottom - r);
+  ctx.lineTo(x + nw, y + f);
+  ctx.quadraticCurveTo(x + nw, y, x + nw + f, y);
+  ctx.closePath();
+  ctx.fillStyle = paint.bezel;
+  ctx.fill();
+  paintLens(ctx, s.x + s.w / 2, s.y + nh * 0.46, nh * 0.17);
+}
+
+/** Paints the whole laptop with its top-left at the current origin. */
+export function paintMacbook(ctx: Ctx2D, L: MacLayout, paint: FramePaint, px: number, content: ScreenContent): void {
+  paintHinge(ctx, L, paint);
+  paintBase(ctx, L, paint, px);
+
+  const lidBox = { x: L.lid.x, y: L.lid.y, w: L.lid.w, h: L.lid.h };
+  paintBand(ctx, (inset) => lidPath(ctx, L, inset), L.rim, paint, px, lidBox);
+  // Black glass around the display, as a ring that tucks one pixel under the screen.
+  const s = L.screen;
+  const o = Math.min(1 / px, s.w * 0.01, s.h * 0.01);
+  ctx.beginPath();
+  lidPath(ctx, L, L.rim);
+  roundRectPath(ctx, s.x + o, s.y + o, s.w - 2 * o, s.h - 2 * o, [s.radius, s.radius, 0, 0]);
+  ctx.fillStyle = paint.bezel;
+  ctx.fill('evenodd');
+  if (!paint.bezelMatchesBody) {
+    const hair = Math.min(1 / px, L.rim);
+    ctx.lineWidth = hair;
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';
+    ctx.beginPath();
+    lidPath(ctx, L, L.rim + hair * 0.5);
+    ctx.stroke();
+  }
+
+  const screenPath = (c: Ctx2D) => roundRectPath(c, s.x, s.y, s.w, s.h, [s.radius, s.radius, 0, 0]);
+  paintScreen(ctx, s, screenPath, content);
+  if (paint.bezelMatchesBody) paintInnerShadow(ctx, s, screenPath, L.lid.w * 0.008 * px, L.lid.w * 0.0015 * px, 0.18);
+  paintNotch(ctx, L, paint, px);
+}

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

@@ -0,0 +1,145 @@
+/** Calendar / agenda: week strip, hourly timeline with coloured events, now indicator. */
+import { darken, mix, rgba } from '../../../color';
+import { avatarStack } from '../art';
+import { icon } from '../icons';
+import type { Area, Mk } from '../kit';
+import { bar, box, card, circle, num, title } from '../kit';
+import { tint } from '../theme';
+import type { MockApp } from '../widgets';
+import { iconButton } from '../widgets';
+
+interface Event {
+  start: number;
+  end: number;
+  color: number;
+  people: number;
+}
+
+const EVENTS: readonly Event[] = [
+  { start: 9, end: 10, color: 0, people: 3 },
+  { start: 10.5, end: 12, color: 1, people: 0 },
+  { start: 13, end: 13.75, color: 2, people: 2 },
+  { start: 14.5, end: 16, color: 3, people: 4 },
+  { start: 16.5, end: 17.5, color: 0, people: 0 },
+  { start: 18.5, end: 20, color: 2, people: 2 },
+];
+
+const hourLabel = (h: number) => {
+  const total = Math.round(h * 60);
+  return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, '0')}`;
+};
+
+function eventBlock(m: Mk, x: number, y: number, w: number, h: number, ev: Event, k: number): void {
+  const t = m.t;
+  const c = t.accents[ev.color % 4];
+  box(m, x, y, w, h, 14, tint(t, c, t.dark ? 0.76 : 0.85));
+  box(m, x + 6, y + 8, 4, Math.max(4, h - 16), 2, c);
+  const ink = t.dark ? mix(c, '#ffffff', 0.35) : darken(c, 0.35);
+  bar(m, x + 20, y + 13, Math.min(w - 40, 100 + ((k * 23) % 60)), 7.5, ink);
+  if (h > 46) num(m, `${hourLabel(ev.start)} - ${hourLabel(ev.end)}`, x + 20, y + 41, 12, 600, rgba(ink, 0.75));
+  if (ev.people > 0 && h > 60 && w > 160) avatarStack(m, x + w - 16 - 24 * (1 + (ev.people - 1) * 0.66), y + h - 24, 24, ev.people, m.seed + k * 5, tint(t, c, t.dark ? 0.76 : 0.85));
+}
+
+function weekStrip(m: Mk, x: number, y: number, w: number, first: number, selected: number): void {
+  const t = m.t;
+  const step = w / 7;
+  for (let i = 0; i < 7; i++) {
+    const cx = x + step * (i + 0.5);
+    const on = i === selected;
+    if (on) box(m, cx - Math.min(23, step * 0.42), y, Math.min(46, step * 0.84), 70, 18, t.accent);
+    bar(m, cx - 6, y + 14, 12, 5, on ? rgba(t.onAccent, 0.75) : t.bar3);
+    num(m, String(first + i), cx, y + 48, 18, 700, on ? t.onAccent : t.text, 'center');
+    if (i % 3 !== 2 && !on) circle(m, cx, y + 62, 2.6, t.accents[i % 4]);
+  }
+}
+
+function timeline(m: Mk, a: Area, top: number, startHour: number, hourH: number, labelW: number): void {
+  const t = m.t;
+  const ctx = m.ctx;
+  const hours = Math.ceil((a.y + a.h - top) / hourH) + 1;
+  for (let i = 0; i < hours; i++) {
+    const hy = top + i * hourH;
+    num(m, `${startHour + i}:00`, a.x + labelW - 10, hy + 4, 11.5, 500, t.text2, 'right');
+    ctx.fillStyle = t.line;
+    ctx.fillRect(a.x + labelW, hy, a.w - labelW, 1);
+  }
+  EVENTS.forEach((ev, k) => {
+    const y = top + (ev.start - startHour) * hourH + 2;
+    const h = (ev.end - ev.start) * hourH - 4;
+    if (y > a.y + a.h + 40) return;
+    eventBlock(m, a.x + labelW + 6, y, a.w - labelW - 6, h, ev, k);
+  });
+  const ny = top + (11.3 - startHour) * hourH;
+  ctx.fillStyle = t.bad;
+  ctx.fillRect(a.x + labelW, ny - 1, a.w - labelW, 2);
+  circle(m, a.x + labelW, ny, 5, t.bad);
+}
+
+export const calendar: MockApp = {
+  id: 'calendar',
+  nav: ['calendar', 'list', 'clock', 'users', 'inbox', 'settings'],
+  glyph: 'calendar',
+  tabs: ['calendar', 'list', 'users', 'settings'],
+  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;
+    num(m, '2026', x, y + 14, 14, 600, t.accent);
+    title(m, x, y + 20, 136, 28);
+    iconButton(m, x + w - 73, y + 26, 42, 'search');
+    circle(m, x + w - 21, y + 26, 21, t.accent);
+    icon(m.ctx, 'plus', x + w - 21, y + 26, 20, t.onAccent, false, 2.6);
+    y += 72;
+    const first = 12 + (m.seed % 9);
+    weekStrip(m, x, y, w, first, 2);
+    y += 86;
+    card(m, x - 6, y, w + 12, a.y + a.h - y + 60, 26);
+    timeline(m, { x: x + 4, y: a.y, w: w - 8, h: a.h }, y + 24, 9, 74, 52);
+  },
+  wide(m, a) {
+    const t = m.t;
+    const ctx = m.ctx;
+    card(m, a.x, a.y, a.w, a.h + 40, 24);
+    const labelW = 64;
+    const top = a.y + 78;
+    const cols = 7;
+    const cw = (a.w - labelW - 16) / cols;
+    const first = 12 + (m.seed % 9);
+    for (let i = 0; i < cols; i++) {
+      const cx = a.x + labelW + cw * (i + 0.5);
+      const on = i === 2;
+      bar(m, cx - 10, a.y + 18, 20, 5, t.bar3);
+      if (on) circle(m, cx, a.y + 46, 18, t.accent);
+      num(m, String(first + i), cx, a.y + 52, 17, 700, on ? t.onAccent : t.text, 'center');
+      if (i > 0) {
+        ctx.fillStyle = t.line;
+        ctx.fillRect(a.x + labelW + cw * i, top, 1, a.h);
+      }
+    }
+    const hourH = 64;
+    const hours = Math.ceil((a.y + a.h - top) / hourH) + 1;
+    for (let i = 0; i < hours; i++) {
+      const hy = top + i * hourH;
+      num(m, `${8 + i}:00`, a.x + labelW - 12, hy + 4, 11.5, 500, t.text2, 'right');
+      ctx.fillStyle = t.line;
+      ctx.fillRect(a.x + labelW, hy, a.w - labelW - 16, 1);
+    }
+    for (let d = 0; d < cols; d++) {
+      for (let j = 0; j < 2 + ((d * 5 + m.seed) % 2); j++) {
+        const ev = EVENTS[(d * 2 + j + m.seed) % EVENTS.length];
+        const start = 8.5 + ((d * 3 + j * 4) % 9);
+        const len = ev.end - ev.start;
+        const y = top + (start - 8) * hourH + 2;
+        if (y > a.y + a.h) continue;
+        eventBlock(m, a.x + labelW + cw * d + 4, y, cw - 8, len * hourH - 4, { ...ev, start, end: start + len }, d * 3 + j);
+      }
+    }
+    const ny = top + 3.3 * hourH;
+    ctx.fillStyle = t.bad;
+    ctx.fillRect(a.x + labelW, ny - 1, a.w - labelW - 16, 2);
+    circle(m, a.x + labelW + cw * 2, ny, 5, t.bad);
+  },
+};

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

@@ -0,0 +1,213 @@
+/** Messaging: a conversation laid out bottom-up like a real chat, with photo and voice bubbles. */
+import { mix, rgba } from '../../../color';
+import { avatar, photo } from '../art';
+import { icon } from '../icons';
+import type { Area, Mk } from '../kit';
+import { bar, body, box, card, circle, linear, num, title } from '../kit';
+import type { MockApp } from '../widgets';
+
+type Msg =
+  | { kind: 'text'; out: boolean; lines: number[]; time?: string }
+  | { kind: 'image'; out: boolean }
+  | { kind: 'voice'; out: boolean }
+  | { kind: 'typing' }
+  | { kind: 'date' };
+
+const THREAD: readonly Msg[] = [
+  { kind: 'date' },
+  { kind: 'text', out: false, lines: [0.92, 0.58] },
+  { kind: 'text', out: true, lines: [0.52] },
+  { kind: 'text', out: true, lines: [0.96, 0.7], time: '9:38' },
+  { kind: 'image', out: false },
+  { kind: 'text', out: false, lines: [0.48] },
+  { kind: 'voice', out: true },
+  { kind: 'text', out: false, lines: [1, 0.86, 0.42], time: '9:40' },
+  { kind: 'text', out: true, lines: [0.62], time: '9:41' },
+  { kind: 'typing' },
+];
+
+function msgHeight(msg: Msg, maxW: number): number {
+  switch (msg.kind) {
+    case 'text':
+      return 20 + msg.lines.length * 19 + (msg.time ? 16 : 0);
+    case 'image':
+      return Math.round(maxW * 0.66);
+    case 'voice':
+      return 54;
+    case 'typing':
+      return 42;
+    case 'date':
+      return 28;
+  }
+}
+
+function sender(msg: Msg): 'in' | 'out' | 'none' {
+  if (msg.kind === 'date') return 'none';
+  if (msg.kind === 'typing') return 'in';
+  return msg.out ? 'out' : 'in';
+}
+
+function bubbleFill(m: Mk, out: boolean, x: number, y: number, w: number, h: number): string | CanvasGradient {
+  const t = m.t;
+  if (out)
+    return linear(m, x, y, x + w, y + h, [
+      [0, t.accent],
+      [1, mix(t.accent, t.companion, 0.45)],
+    ]);
+  return t.dark ? t.surface2 : t.surface;
+}
+
+function drawMsg(m: Mk, msg: Msg, a: Area, y: number, h: number, maxW: number, k: number): void {
+  const t = m.t;
+  const M = 16;
+  if (msg.kind === 'date') {
+    box(m, a.x + a.w / 2 - 44, y, 88, 24, 12, t.dark ? t.surface2 : rgba(t.text, 0.06));
+    bar(m, a.x + a.w / 2 - 24, y + 9.5, 48, 5, t.bar2);
+    return;
+  }
+  const out = msg.kind !== 'typing' && msg.out;
+  const radii: [number, number, number, number] = out ? [20, 20, 6, 20] : [20, 20, 20, 6];
+  let w: number;
+  if (msg.kind === 'text') w = Math.max(...msg.lines) * (maxW - 28) + 28;
+  else if (msg.kind === 'image') w = maxW * 0.8;
+  else if (msg.kind === 'voice') w = Math.min(maxW, 236);
+  else w = 70;
+  const x = out ? a.x + a.w - M - w : a.x + M;
+  if (msg.kind === 'image') {
+    photo(m, x, y, w, h, radii, m.seed + k);
+    return;
+  }
+  const fill = bubbleFill(m, out, x, y, w, h);
+  if (!out && !t.dark) card(m, x, y, w, h, radii[0], fill, 0.3);
+  box(m, x, y, w, h, radii, fill);
+  const ink = out ? rgba(t.onAccent, 0.88) : t.bar2;
+  if (msg.kind === 'text') {
+    msg.lines.forEach((f, i) => bar(m, x + 14, y + 16 + i * 19, (maxW - 28) * f, 7, ink));
+    if (msg.time) {
+      num(m, msg.time, x + w - 14 - (out ? 18 : 0), y + h - 9, 11, 500, out ? rgba(t.onAccent, 0.7) : t.text2, 'right');
+      if (out) {
+        icon(m.ctx, 'check', x + w - 22, y + h - 13, 12, rgba(t.onAccent, 0.8), false, 2.6);
+        icon(m.ctx, 'check', x + w - 17, y + h - 13, 12, rgba(t.onAccent, 0.8), false, 2.6);
+      }
+    }
+  } else if (msg.kind === 'voice') {
+    circle(m, x + 28, y + h / 2, 16, out ? 'rgba(255, 255, 255, 0.22)' : t.accent);
+    icon(m.ctx, 'play', x + 29.5, y + h / 2, 14, t.onAccent, false, 1.6);
+    const bars = 22;
+    const bx0 = x + 54;
+    const bw = (w - 54 - 52) / bars;
+    for (let i = 0; i < bars; i++) {
+      const v = 0.25 + 0.75 * Math.abs(Math.sin(i * 1.7 + k) * Math.cos(i * 0.6));
+      const bh = 4 + v * 22;
+      box(m, bx0 + i * bw, y + h / 2 - bh / 2, Math.max(1.5, bw * 0.55), bh, 2, i < 9 ? (out ? t.onAccent : t.accent) : out ? 'rgba(255, 255, 255, 0.45)' : t.bar3);
+    }
+    num(m, '0:24', x + w - 14, y + h / 2 + 4.5, 12, 600, out ? rgba(t.onAccent, 0.85) : t.text2, 'right');
+  } else {
+    for (let i = 0; i < 3; i++) circle(m, x + 22 + i * 13, y + h / 2, 4.2, rgba(t.text2, 0.4 + i * 0.2));
+  }
+}
+
+/** Lays the thread out from `bottom` upwards until `top`, cycling when the screen is tall. */
+function thread(m: Mk, a: Area, top: number, bottom: number): void {
+  const maxW = Math.min(a.w * 0.74, 360);
+  let y = bottom;
+  let i = THREAD.length - 1;
+  let prev: Msg | null = null;
+  for (let n = 0; n < 80 && y > top; n++) {
+    const msg = THREAD[((i % THREAD.length) + THREAD.length) % THREAD.length];
+    const h = msgHeight(msg, maxW);
+    const gap = prev && sender(prev) === sender(msg) ? 6 : 14;
+    y -= h + (prev ? gap : 0);
+    drawMsg(m, msg, a, y, h, maxW, n);
+    prev = msg;
+    i--;
+  }
+}
+
+function inputBar(m: Mk, x: number, y: number, w: number): void {
+  const t = m.t;
+  circle(m, x + 20, y + 22, 20, t.dark ? t.surface2 : t.surface);
+  icon(m.ctx, 'plus', x + 20, y + 22, 20, t.text2, false, 2.3);
+  const fx = x + 50;
+  const fw = w - 100;
+  if (!t.dark) card(m, fx, y, fw, 44, 22, t.surface, 0.35);
+  else box(m, fx, y, fw, 44, 22, t.surface2);
+  bar(m, fx + 18, y + 19, fw * 0.42, 6, t.bar3);
+  icon(m.ctx, 'camera', fx + fw - 22, y + 22, 20, t.text2, false, 2);
+  circle(m, x + w - 22, y + 22, 22, t.accent);
+  icon(m.ctx, 'mic', x + w - 22, y + 22, 20, t.onAccent, false, 2.3);
+}
+
+function header(m: Mk, x: number, y: number, w: number): void {
+  const t = m.t;
+  icon(m.ctx, 'chevronLeft', x + 8, y + 22, 24, t.accent, false, 2.6);
+  avatar(m, x + 52, y + 22, 42, m.seed + 21);
+  circle(m, x + 67, y + 37, 6.5, t.dark ? t.bg : t.surface);
+  circle(m, x + 67, y + 37, 4.5, t.good);
+  title(m, x + 82, y + 4, 112, 16);
+  bar(m, x + 82, y + 30, 46, 5.5, t.good);
+  icon(m.ctx, 'video', x + w - 52, y + 22, 24, t.accent, false, 2);
+  icon(m.ctx, 'phone', x + w - 10, y + 22, 22, t.accent, false, 2);
+}
+
+export const chat: MockApp = {
+  id: 'chat',
+  nav: ['chat', 'users', 'phone', 'bookmark', 'folder', 'settings'],
+  glyph: 'chat',
+  tabs: null,
+  tabSelected: 0,
+  narrow(m, a) {
+    const t = m.t;
+    const x = a.x + 12;
+    const w = a.w - 24;
+    const inputY = a.y + a.h - 52;
+    thread(m, a, a.y + 64, inputY - 14);
+    // Header and input sit on solid panels so the cut-off thread slides under them.
+    m.ctx.fillStyle = linear(m, 0, a.y - 60, 0, a.y + 76, [
+      [0.75, t.bg],
+      [1, rgba(t.bg, 0)],
+    ]);
+    m.ctx.fillRect(a.x, a.y - 60, a.w, 136);
+    header(m, x, a.y + 4, w);
+    m.ctx.fillStyle = linear(m, 0, inputY - 24, 0, inputY + 6, [
+      [0, rgba(t.bg, 0)],
+      [1, t.bg],
+    ]);
+    m.ctx.fillRect(a.x, inputY - 24, a.w, a.y + a.h - inputY + 60);
+    inputBar(m, x, inputY, w);
+  },
+  wide(m, a) {
+    const t = m.t;
+    const lw = Math.min(330, a.w * 0.34);
+    card(m, a.x, a.y, lw, a.h + 40, 22);
+    box(m, a.x + 16, a.y + 16, lw - 32, 38, 12, t.surface2);
+    icon(m.ctx, 'search', a.x + 36, a.y + 35, 16, t.text2, false, 2.2);
+    bar(m, a.x + 52, a.y + 32, 70, 5.5, t.bar3);
+    for (let i = 0, y = a.y + 70; y < a.y + a.h; i++, y += 72) {
+      const on = i === 1;
+      if (on) box(m, a.x + 8, y - 6, lw - 16, 68, 16, t.dark ? rgba(t.accent, 0.16) : rgba(t.accent, 0.08));
+      avatar(m, a.x + 40, y + 28, 48, m.seed + 20 + i);
+      title(m, a.x + 74, y + 8, 90 + (i % 3) * 18, 15);
+      body(m, a.x + 74, y + 30, lw - 140, 12);
+      num(m, `${9 - (i % 6)}:${String((i * 17) % 60).padStart(2, '0')}`, a.x + lw - 18, y + 22, 11.5, 500, t.text2, 'right');
+      if (i % 3 === 0) {
+        circle(m, a.x + lw - 30, y + 38, 10, t.accent);
+        num(m, String(1 + (i % 4)), a.x + lw - 30, y + 42, 11, 700, t.onAccent, 'center');
+      }
+    }
+    const tx = a.x + lw + 20;
+    const tw = a.w - lw - 20;
+    card(m, tx, a.y, tw, a.h + 40, 22);
+    header(m, tx + 16, a.y + 14, tw - 32);
+    m.ctx.fillStyle = t.line;
+    m.ctx.fillRect(tx, a.y + 72, tw, 1);
+    const ta: Area = { x: tx + 8, y: a.y, w: tw - 16, h: a.h };
+    m.ctx.save();
+    m.ctx.beginPath();
+    m.ctx.rect(tx, a.y + 73, tw, a.h - 73);
+    m.ctx.clip();
+    thread(m, ta, a.y + 73, a.y + a.h - 72);
+    m.ctx.restore();
+    inputBar(m, tx + 16, a.y + a.h - 58, tw - 32);
+  },
+};