capture-flow 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,116 @@
+/** Shop: search, promo banner, category chips and a product grid. */
+import { darken } from '../../../color';
+import { product } from '../art';
+import { icon, type IconName } from '../icons';
+import type { Mk } from '../kit';
+import { bar, body, box, brandFill, card, circle, num, title } from '../kit';
+import type { MockApp } from '../widgets';
+import { chip, iconButton, sectionHeader } from '../widgets';
+
+const CATEGORIES: IconName[] = ['grid', 'sparkle', 'heart', 'bag', 'star', 'leaf'];
+
+function productCard(m: Mk, x: number, y: number, w: number, h: number, k: number): void {
+  const t = m.t;
+  card(m, x, y, w, h, 22, t.surface, 0.6);
+  const ih = h - 82;
+  product(m, x + 6, y + 6, w - 12, ih, 18, m.seed + k);
+  circle(m, x + w - 26, y + 26, 15, t.dark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.9)');
+  icon(m.ctx, 'heart', x + w - 26, y + 26.5, 16, k % 3 === 0 ? t.bad : t.dark ? '#ffffff' : t.text, k % 3 === 0, 2.2);
+  title(m, x + 14, y + ih + 16, w * 0.62, 14);
+  body(m, x + 14, y + ih + 36, w * 0.4, 12);
+  num(m, String(29 + ((k * 37) % 170)), x + 14, y + h - 14, 18, 700, t.text);
+  circle(m, x + w - 26, y + h - 26, 15, t.accent);
+  icon(m.ctx, 'plus', x + w - 26, y + h - 26, 15, t.onAccent, false, 2.8);
+}
+
+function promo(m: Mk, x: number, y: number, w: number, h: number): void {
+  const t = m.t;
+  card(m, x, y, w, h, 26, brandFill(m, x, y, w, h), 1.1);
+  m.ctx.save();
+  m.ctx.beginPath();
+  m.ctx.rect(x, y, w, h);
+  m.ctx.clip();
+  circle(m, x + w * 0.8, y + h * 0.5, h * 0.62, 'rgba(255, 255, 255, 0.14)');
+  circle(m, x + w * 0.8, y + h * 0.5, h * 0.42, 'rgba(255, 255, 255, 0.12)');
+  m.ctx.restore();
+  product(m, x + w * 0.56, y + 6, w * 0.44, h - 12, 0, m.seed + 4, false);
+  bar(m, x + 22, y + 24, 64, 6, 'rgba(255, 255, 255, 0.75)');
+  num(m, `${20 + (m.seed % 4) * 10}%`, x + 22, y + 72, Math.min(40, h * 0.27), 800, '#ffffff');
+  bar(m, x + 22, y + 86, w * 0.3, 7, 'rgba(255, 255, 255, 0.85)');
+  box(m, x + 22, y + h - 46, 96, 32, 16, '#ffffff');
+  bar(m, x + 44, y + h - 33, 52, 6, darken(t.accents[0], 0.15));
+}
+
+export const shop: MockApp = {
+  id: 'shop',
+  nav: ['home', 'grid', 'heart', 'bag', 'user', 'settings'],
+  glyph: 'bag',
+  tabs: ['home', 'grid', 'heart', 'bag', '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;
+    body(m, x, y + 2, 70, 12);
+    title(m, x, y + 18, 120, 18);
+    icon(m.ctx, 'chevronDown', x + 132, y + 29, 16, t.text2, false, 2.4);
+    iconButton(m, x + w - 21, y + 22, 42, 'bag');
+    circle(m, x + w - 6, y + 6, 10, t.accent);
+    num(m, '3', x + w - 6, y + 10, 11, 700, t.onAccent, 'center');
+    y += 62;
+    const fw = w - 62;
+    if (!t.dark) card(m, x, y, fw, 50, 16, t.surface, 0.45);
+    else box(m, x, y, fw, 50, 16, t.surface2);
+    icon(m.ctx, 'search', x + 24, y + 25, 19, t.text2, false, 2.2);
+    bar(m, x + 44, y + 22, fw * 0.4, 6, t.bar3);
+    box(m, x + w - 50, y, 50, 50, 16, t.accent);
+    icon(m.ctx, 'filter', x + w - 25, y + 25, 21, t.onAccent, false, 2.2);
+    y += 68;
+    const ph = Math.min(170, Math.max(140, w * 0.46));
+    promo(m, x, y, w, ph);
+    y += ph + 22;
+    let cx = x;
+    CATEGORIES.forEach((name, i) => {
+      if (cx > a.x + a.w) return;
+      const on = i === 0;
+      const cw = chip(m, cx, y, 38, { icon: name, fill: on ? t.accent : t.surface, ink: on ? t.onAccent : t.bar2, barW: 30 + ((i * 7) % 18) });
+      cx += cw + 10;
+    });
+    y += 58;
+    sectionHeader(m, x, y, w, 132);
+    y += 38;
+    const gap = 14;
+    const cols = a.w > 460 ? 3 : 2;
+    const cw = (w - gap * (cols - 1)) / cols;
+    const chh = cw + 84;
+    for (let row = 0; y < a.y + a.h + 30; row++, y += chh + gap) {
+      for (let c = 0; c < cols; c++) productCard(m, x + c * (cw + gap), y, cw, chh, row * cols + c);
+    }
+  },
+  wide(m, a) {
+    const t = m.t;
+    const bh = Math.min(220, a.h * 0.34);
+    promo(m, a.x, a.y, a.w, bh);
+    let y = a.y + bh + 22;
+    let cx = a.x;
+    CATEGORIES.forEach((name, i) => {
+      const on = i === 0;
+      const w = chip(m, cx, y, 38, { icon: name, fill: on ? t.accent : t.surface, ink: on ? t.onAccent : t.bar2, barW: 40 + ((i * 7) % 18) });
+      cx += w + 10;
+    });
+    const sw = Math.min(200, a.w * 0.2);
+    box(m, a.x + a.w - sw, y, sw, 38, 19, t.surface);
+    bar(m, a.x + a.w - sw + 18, y + 16, sw * 0.4, 6, t.bar3);
+    icon(m.ctx, 'chevronDown', a.x + a.w - 22, y + 19, 16, t.text2, false, 2.4);
+    y += 60;
+    const cols = a.w > 1000 ? 5 : 4;
+    const gap = 18;
+    const cw = (a.w - gap * (cols - 1)) / cols;
+    const ch = cw * 0.9 + 84;
+    for (let row = 0; y < a.y + a.h; row++, y += ch + gap) {
+      for (let c = 0; c < cols; c++) productCard(m, a.x + c * (cw + gap), y, cw, ch, row * cols + c + 3);
+    }
+  },
+};

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

@@ -0,0 +1,152 @@
+/** Photo feed: stories, a post with a full-bleed photo, actions; desktop shows a masonry grid. */
+import { rgba, rotateHue } from '../../../color';
+import { avatar, avatarStack, photo } from '../art';
+import { icon } from '../icons';
+import type { Mk } from '../kit';
+import { bar, body, box, card, circle, linear, num, paragraph, title } from '../kit';
+import type { MockApp } from '../widgets';
+
+function storyRing(m: Mk, cx: number, cy: number, d: number, k: number, seen: boolean): void {
+  const t = m.t;
+  const r = d / 2;
+  if (seen) circle(m, cx, cy, r, t.bar3);
+  else
+    circle(m, cx, cy, r, linear(m, cx - r, cy + r, cx + r, cy - r, [
+      [0, t.companion],
+      [0.5, t.accent],
+      [1, rotateHue(t.accent, -32)],
+    ]));
+  circle(m, cx, cy, r - 2.6, t.bg);
+  avatar(m, cx, cy, d - 9, k);
+}
+
+function stories(m: Mk, x: number, y: number, w: number, d: number): void {
+  const t = m.t;
+  const step = d + 16;
+  const count = Math.ceil(w / step) + 1;
+  for (let i = 0; i < count; i++) {
+    const cx = x + d / 2 + i * step;
+    if (i === 0) {
+      avatar(m, cx, y + d / 2, d - 6, m.seed + 40);
+      circle(m, cx + d * 0.32, y + d * 0.82, 11, t.bg);
+      circle(m, cx + d * 0.32, y + d * 0.82, 9, t.accent);
+      icon(m.ctx, 'plus', cx + d * 0.32, y + d * 0.82, 12, t.onAccent, false, 3);
+    } else {
+      storyRing(m, cx, y + d / 2, d, m.seed + 40 + i, i > 4);
+    }
+    bar(m, cx - d * 0.32, y + d + 10, d * 0.64, 5, i === 0 ? t.bar3 : t.bar2);
+  }
+}
+
+function postHeader(m: Mk, x: number, y: number, w: number, k: number): void {
+  avatar(m, x + 18, y + 18, 36, k);
+  title(m, x + 46, y + 1, 92 + (k % 3) * 14, 14);
+  body(m, x + 46, y + 19, 60, 12);
+  icon(m.ctx, 'more', x + w - 12, y + 18, 22, m.t.text, false);
+}
+
+function actions(m: Mk, x: number, y: number, w: number, liked: boolean): void {
+  const t = m.t;
+  icon(m.ctx, 'heart', x + 12, y, 27, liked ? t.bad : t.text, liked, 2);
+  num(m, String(m.rng.int(120, 980)), x + 30, y + 5, 14, 600, t.text);
+  icon(m.ctx, 'chat', x + 84, y, 25, t.text, false, 2);
+  num(m, String(m.rng.int(8, 99)), x + 100, y + 5, 14, 600, t.text);
+  icon(m.ctx, 'send', x + 146, y, 24, t.text, false, 2);
+  icon(m.ctx, 'bookmark', x + w - 12, y, 25, t.text, false, 2);
+}
+
+export const social: MockApp = {
+  id: 'social',
+  nav: ['home', 'search', 'compass', 'heart', 'chat', 'user'],
+  glyph: 'camera',
+  tabs: ['home', 'search', 'plus', 'heart', 'user'],
+  tabSelected: 0,
+  narrow(m, a) {
+    const t = m.t;
+    const M = 16;
+    const x = a.x + M;
+    const w = a.w - 2 * M;
+    let y = a.y + 6;
+    box(m, x, y + 6, 106, 22, 11, linear(m, x, 0, x + 106, 0, [
+      [0, t.accent],
+      [1, t.companion],
+    ]));
+    icon(m.ctx, 'heart', x + w - 46, y + 17, 26, t.text, false, 2);
+    circle(m, x + w - 36, y + 7, 4.5, t.bad);
+    icon(m.ctx, 'send', x + w - 8, y + 17, 25, t.text, false, 2);
+    y += 48;
+    const d = Math.min(70, a.w * 0.17);
+    stories(m, x, y, a.w, d);
+    y += d + 32;
+    m.ctx.fillStyle = t.line;
+    m.ctx.fillRect(a.x, y, a.w, 1);
+    y += 12;
+    let k = m.seed * 3;
+    while (y < a.y + a.h) {
+      postHeader(m, x, y, w, m.seed + 60 + k);
+      y += 48;
+      const ph = Math.round(a.w * 1.05);
+      photo(m, a.x, y, a.w, ph, 0, m.seed + k);
+      // Carousel dots over the photo.
+      for (let i = 0; i < 4; i++) circle(m, a.x + a.w / 2 - 18 + i * 12, y + ph - 16, 3.2, i === 0 ? '#ffffff' : 'rgba(255, 255, 255, 0.5)');
+      y += ph + 24;
+      actions(m, x, y, w, k % 2 === 0);
+      y += 26;
+      avatarStack(m, x, y + 9, 20, 3, m.seed + 80 + k, t.bg);
+      body(m, x + 54, y + 2, 150, 13, t.bar);
+      y += 28;
+      y += paragraph(m, x, y, w, 2, 13) + 18;
+      k++;
+    }
+  },
+  wide(m, a) {
+    const t = m.t;
+    const sideW = Math.min(320, a.w * 0.3);
+    const gridW = a.w - sideW - 24;
+    const cols = gridW > 720 ? 4 : 3;
+    const gap = 16;
+    const cw = (gridW - gap * (cols - 1)) / cols;
+    const heights = [1.25, 0.9, 1.4, 1.05, 0.8, 1.3, 1.1, 0.95];
+    for (let c = 0; c < cols; c++) {
+      let y = a.y + (c % 2) * 26;
+      let i = c;
+      while (y < a.y + a.h) {
+        const h = cw * heights[(i + m.seed) % heights.length];
+        const x = a.x + c * (cw + gap);
+        photo(m, x, y, cw, h, 18, m.seed + i * 5 + c);
+        box(m, x, y + h - 56, cw, 56, [0, 0, 18, 18], linear(m, 0, y + h - 56, 0, y + h, [
+          [0, 'rgba(0, 0, 0, 0)'],
+          [1, 'rgba(0, 0, 0, 0.45)'],
+        ]));
+        avatar(m, x + 26, y + h - 26, 28, m.seed + 100 + i);
+        bar(m, x + 48, y + h - 29, cw * 0.36, 6, 'rgba(255, 255, 255, 0.9)');
+        icon(m.ctx, 'heart', x + cw - 24, y + h - 26, 20, '#ffffff', i % 3 === 0, 2);
+        y += h + gap;
+        i += cols;
+      }
+    }
+    // Right column: profile and suggestions.
+    const sx = a.x + gridW + 24;
+    card(m, sx, a.y, sideW, 210, 22);
+    avatar(m, sx + sideW / 2, a.y + 56, 64, m.seed + 7);
+    title(m, sx + sideW / 2 - 60, a.y + 98, 120, 16);
+    body(m, sx + sideW / 2 - 44, a.y + 122, 88, 13);
+    const stats = ['248', '18.4k', '612'];
+    stats.forEach((s, i) => {
+      const cx = sx + sideW * (0.2 + i * 0.3);
+      num(m, s, cx, a.y + 172, 18, 700, t.text, 'center');
+      bar(m, cx - 18, a.y + 182, 36, 5, t.bar3);
+    });
+    let y = a.y + 230;
+    card(m, sx, y, sideW, a.y + a.h - y + 30, 22);
+    title(m, sx + 18, y + 18, 120, 15);
+    y += 56;
+    for (let i = 0; y + 56 < a.y + a.h + 20; i++, y += 60) {
+      avatar(m, sx + 38, y + 20, 40, m.seed + 120 + i);
+      title(m, sx + 68, y + 6, 80 + (i % 3) * 16, 14);
+      body(m, sx + 68, y + 24, 60, 12);
+      box(m, sx + sideW - 92, y + 6, 74, 30, 15, i === 0 ? t.accent : rgba(t.accent, 0.12));
+      bar(m, sx + sideW - 72, y + 18.5, 34, 5, i === 0 ? t.onAccent : t.accent);
+    }
+  },
+};

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

@@ -0,0 +1,131 @@
+/** Task manager: progress card, filter chips, checklist; desktop shows a kanban board. */
+import { darken, rgba } from '../../../color';
+import { avatar, avatarStack, photo } from '../art';
+import { icon } from '../icons';
+import type { Mk } from '../kit';
+import { bar, body, box, brandFill, card, circle, num, progressRing, shadowed, title } from '../kit';
+import { tint } from '../theme';
+import type { MockApp } from '../widgets';
+import { chip } from '../widgets';
+
+function checkbox(m: Mk, cx: number, cy: number, done: boolean, color: string): void {
+  const t = m.t;
+  if (done) {
+    circle(m, cx, cy, 12, color);
+    icon(m.ctx, 'check', cx, cy, 15, '#ffffff', false, 3.2);
+  } else {
+    m.ctx.beginPath();
+    m.ctx.arc(cx, cy, 11, 0, Math.PI * 2);
+    m.ctx.lineWidth = 2;
+    m.ctx.strokeStyle = t.dark ? 'rgba(255, 255, 255, 0.28)' : 'rgba(16, 22, 34, 0.22)';
+    m.ctx.stroke();
+  }
+}
+
+function taskCard(m: Mk, x: number, y: number, w: number, i: number, done: boolean): void {
+  const t = m.t;
+  const color = t.accents[i % 4];
+  card(m, x, y, w, 78, 20, t.surface, 0.55);
+  checkbox(m, x + 30, y + 39, done, t.accent);
+  const tw = Math.min(w - 150, 120 + ((i * 37) % 70));
+  title(m, x + 54, y + 16, tw, 15, done ? t.bar3 : t.bar);
+  if (done) {
+    m.ctx.fillStyle = t.bar2;
+    m.ctx.fillRect(x + 50, y + 25, tw + 8, 1.4);
+  }
+  icon(m.ctx, 'clock', x + 61, y + 54, 13, t.text2, false, 2.2);
+  num(m, `${8 + ((i * 3) % 10)}:${i % 2 === 0 ? '30' : '00'}`, x + 72, y + 58.5, 12.5, 500, t.text2);
+  chip(m, x + 116, y + 44, 22, { fill: tint(t, color, 0.84), ink: t.dark ? color : darken(color, 0.15), barW: 34 + (i % 3) * 8 });
+  if (i % 3 !== 1) avatarStack(m, x + w - 64, y + 39, 24, 2, m.seed + i * 3, t.surface);
+  else circle(m, x + w - 30, y + 39, 5, t.bad);
+}
+
+export const tasks: MockApp = {
+  id: 'tasks',
+  nav: ['inbox', 'calendar', 'list', 'layers', 'users', 'settings'],
+  glyph: 'check',
+  tabs: ['home', 'calendar', 'list', 'user'],
+  tabSelected: 2,
+  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, 74, 6, t.accent);
+    title(m, x, y + 18, 150, 28);
+    avatar(m, x + w - 21, y + 24, 42, m.seed + 2);
+    y += 70;
+    const ch = 134;
+    card(m, x, y, w, ch, 26, brandFill(m, x, y, w, ch), 1.1);
+    const p = 0.68;
+    bar(m, x + 22, y + 28, w * 0.36, 9, 'rgba(255, 255, 255, 0.95)');
+    bar(m, x + 22, y + 48, w * 0.26, 6, 'rgba(255, 255, 255, 0.7)');
+    box(m, x + 22, y + 86, w * 0.48, 8, 4, 'rgba(255, 255, 255, 0.28)');
+    box(m, x + 22, y + 86, w * 0.48 * p, 8, 4, '#ffffff');
+    num(m, '12/18', x + 22, y + 116, 13, 600, 'rgba(255, 255, 255, 0.85)');
+    const rcx = x + w - 66;
+    progressRing(m, rcx, y + ch / 2, 40, 9, p, '#ffffff', 'rgba(255, 255, 255, 0.25)');
+    num(m, '68%', rcx, y + ch / 2 + 7, 19, 700, '#ffffff', 'center');
+    y += ch + 22;
+    let cx = x;
+    [56, 64, 72, 58].forEach((bw, i) => {
+      const on = i === 0;
+      const cw = chip(m, cx, y, 36, { fill: on ? t.accent : t.surface, ink: on ? t.onAccent : t.bar2, barW: bw * 0.62, text: on ? '18' : undefined });
+      cx += cw + 10;
+    });
+    y += 58;
+    title(m, x, y, 104, 17);
+    num(m, '6', x + 116, y + 15, 15, 700, t.text2);
+    y += 34;
+    for (let i = 0; y < a.y + a.h + 40; i++) {
+      taskCard(m, x, y, w, i + m.seed, i === 1 || i === 4);
+      y += 90;
+    }
+    const fx = a.x + a.w - M - 30;
+    const fy = a.y + a.h - 44;
+    shadowed(m, 22, 10, rgba(t.accent, 0.45), () => circle(m, fx, fy, 30, t.accent));
+    icon(m.ctx, 'plus', fx, fy, 26, t.onAccent, false, 2.8);
+  },
+  wide(m, a) {
+    const t = m.t;
+    const cols = a.w > 900 ? 4 : 3;
+    const gap = 18;
+    const cw = (a.w - gap * (cols - 1)) / cols;
+    for (let c = 0; c < cols; c++) {
+      const x = a.x + c * (cw + gap);
+      box(m, x, a.y, cw, a.h + 40, 22, t.dark ? 'rgba(255, 255, 255, 0.03)' : 'rgba(16, 22, 34, 0.035)');
+      circle(m, x + 22, a.y + 24, 5, t.accents[c % 4]);
+      title(m, x + 34, a.y + 16, 76, 15);
+      box(m, x + 120, a.y + 13, 28, 22, 11, t.surface2);
+      num(m, String(3 + ((c * 5 + m.seed) % 7)), x + 134, a.y + 28.5, 12, 700, t.text2, 'center');
+      icon(m.ctx, 'plus', x + cw - 24, a.y + 24, 18, t.text2, false, 2.2);
+      let y = a.y + 52;
+      for (let i = 0; y < a.y + a.h; i++) {
+        const k = c * 7 + i;
+        const cover = (k + m.seed) % 4 === 1;
+        const h = cover ? 230 : 150;
+        card(m, x + 10, y, cw - 20, h, 18, t.surface, 0.5);
+        let iy = y + 16;
+        if (cover) {
+          photo(m, x + 20, iy, cw - 40, 82, 12, m.seed + k);
+          iy += 96;
+        }
+        chip(m, x + 24, iy, 22, { fill: tint(t, t.accents[k % 4], 0.84), ink: t.dark ? t.accents[k % 4] : darken(t.accents[k % 4], 0.15), barW: 30 + (k % 3) * 10 });
+        title(m, x + 24, iy + 32, (cw - 70) * (0.6 + 0.35 * ((k * 13) % 10) / 10), 15);
+        body(m, x + 24, iy + 54, (cw - 70) * 0.8, 12);
+        const fy = y + h - 30;
+        avatarStack(m, x + 24, fy, 24, 2 + (k % 2), m.seed + k, t.surface);
+        icon(m.ctx, 'chat', x + cw - 74, fy, 15, t.text2, false, 2);
+        num(m, String(1 + (k % 9)), x + cw - 62, fy + 4.5, 12, 600, t.text2);
+        if (c === cols - 1) {
+          circle(m, x + cw - 36, fy, 10, t.good);
+          icon(m.ctx, 'check', x + cw - 36, fy, 12, '#ffffff', false, 3);
+        } else {
+          progressRing(m, x + cw - 36, fy, 8, 3, 0.3 + ((k * 17) % 60) / 100, t.accents[c % 4], t.surface2);
+        }
+        y += h + 14;
+      }
+    }
+  },
+};

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

@@ -0,0 +1,121 @@
+/** Travel / maps: full-bleed stylised map, floating search, a place sheet with photo and rating. */
+import { rgba } from '../../../color';
+import { avatar, mapArt, photo } from '../art';
+import { icon, type IconName } from '../icons';
+import type { Mk } from '../kit';
+import { bar, body, box, card, circle, num, rr, shadowed, title } from '../kit';
+import type { MockApp } from '../widgets';
+import { chip, primaryButton, stars } from '../widgets';
+
+const CHIPS: IconName[] = ['bag', 'star', 'flame', 'leaf', 'compass'];
+
+function searchBar(m: Mk, x: number, y: number, w: number): void {
+  const t = m.t;
+  card(m, x, y, w, 52, 18, t.surface, 0.8);
+  icon(m.ctx, 'search', x + 26, y + 26, 19, t.text2, false, 2.2);
+  bar(m, x + 46, y + 23, w * 0.4, 6.5, t.bar3);
+  icon(m.ctx, 'mic', x + w - 62, y + 26, 19, t.text2, false, 2);
+  avatar(m, x + w - 26, y + 26, 34, m.seed + 33);
+}
+
+function chipRow(m: Mk, x: number, y: number, right: number): void {
+  const t = m.t;
+  let cx = x;
+  CHIPS.forEach((name, i) => {
+    if (cx > right) return;
+    const bw = 34 + ((i * 11) % 20);
+    const w = 34 + 8 + bw + 14;
+    card(m, cx, y, w, 34, 17, t.surface, 0.45);
+    circle(m, cx + 17, y + 17, 11, rgba(t.accents[(i + 1) % 4], 0.16));
+    icon(m.ctx, name, cx + 17, y + 17, 13, t.accents[(i + 1) % 4], false, 2.4);
+    bar(m, cx + 34, y + 14.5, bw, 5, t.bar2);
+    cx += w + 8;
+  });
+}
+
+function placeSheet(m: Mk, x: number, y: number, w: number, h: number, k: number): void {
+  const t = m.t;
+  const M = 20;
+  shadowed(m, 30, -6, t.dark ? 'rgba(0, 0, 0, 0.6)' : 'rgba(20, 28, 48, 0.14)', () => box(m, x, y, w, h + 40, [30, 30, 0, 0], t.surface));
+  bar(m, x + w / 2 - 18, y + 8, 36, 5, t.bar3);
+  const ix = x + M;
+  const iw = w - 2 * M;
+  let cy = y + 26;
+  const ph = Math.min(132, h * 0.36);
+  photo(m, ix, cy, iw * 0.64, ph, 18, m.seed + k);
+  photo(m, ix + iw * 0.64 + 8, cy, iw * 0.36 - 8, ph / 2 - 4, 14, m.seed + k + 1);
+  photo(m, ix + iw * 0.64 + 8, cy + ph / 2 + 4, iw * 0.36 - 8, ph / 2 - 4, 14, m.seed + k + 2);
+  cy += ph + 18;
+  title(m, ix, cy, iw * 0.55, 21);
+  icon(m.ctx, 'bookmark', ix + iw - 12, cy + 12, 22, t.text, false, 2);
+  cy += 34;
+  num(m, '4.8', ix, cy + 12, 14, 700, t.text);
+  stars(m, ix + 28, cy + 7.5, 13, 5);
+  num(m, '(2,184)', ix + 104, cy + 12, 13, 500, t.text2);
+  cy += 30;
+  let cx = ix;
+  cx += chip(m, cx, cy, 30, { icon: 'clock', text: '12', fill: t.surface2, ink: t.text2, barW: 22 }) + 8;
+  cx += chip(m, cx, cy, 30, { icon: 'pin', text: '2.4', fill: t.surface2, ink: t.text2, barW: 18 }) + 8;
+  chip(m, cx, cy, 30, { icon: 'star', fill: t.surface2, ink: t.text2, barW: 30 });
+  cy += 48;
+  primaryButton(m, ix, cy, iw - 64, 50, t.accent, 'compass');
+  circle(m, ix + iw - 25, cy + 25, 25, t.surface2);
+  icon(m.ctx, 'share', ix + iw - 25, cy + 25, 20, t.text, false, 2);
+}
+
+export const travel: MockApp = {
+  id: 'travel',
+  nav: ['compass', 'map', 'bookmark', 'calendar', 'users', 'settings'],
+  glyph: 'pin',
+  tabs: null,
+  tabSelected: 0,
+  narrow(m, a, full) {
+    const t = m.t;
+    const sheetH = Math.min(420, Math.max(300, full.h * 0.46));
+    const focusTop = a.y + 120;
+    mapArt(m, a.x, full.y, a.w, full.h, m.seed, undefined, { x: a.x, y: focusTop, w: a.w - 60, h: Math.max(80, full.y + full.h - sheetH - focusTop - 10) });
+    // Keep the status bar readable over the map.
+    const g = m.ctx.createLinearGradient(0, full.y, 0, a.y + 40);
+    g.addColorStop(0, rgba(t.bg, 0.85));
+    g.addColorStop(1, rgba(t.bg, 0));
+    m.ctx.fillStyle = g;
+    m.ctx.fillRect(a.x, full.y, a.w, a.y + 40 - full.y);
+    const M = 16;
+    searchBar(m, a.x + M, a.y + 6, a.w - 2 * M);
+    chipRow(m, a.x + M, a.y + 70, a.x + a.w);
+    // Map controls.
+    const bx = a.x + a.w - M - 46;
+    const by = a.y + 128;
+    card(m, bx, by, 46, 92, 14, t.surface, 0.6);
+    icon(m.ctx, 'layers', bx + 23, by + 23, 19, t.text, false, 2);
+    m.ctx.fillStyle = t.line;
+    m.ctx.fillRect(bx + 8, by + 46, 30, 1);
+    icon(m.ctx, 'send', bx + 23, by + 69, 18, t.accent, false, 2.2);
+    placeSheet(m, a.x, full.y + full.h - sheetH, a.w, sheetH, 3);
+  },
+  wide(m, a) {
+    const t = m.t;
+    m.ctx.save();
+    rr(m, a.x, a.y, a.w, a.h + 40, 24);
+    m.ctx.clip();
+    const pw0 = Math.min(340, a.w * 0.36);
+    mapArt(m, a.x, a.y, a.w, a.h + 40, m.seed, ['leaf', 'bag', 'star', 'flame'], { x: a.x + pw0 + 40, y: a.y + 70, w: a.w - pw0 - 70, h: a.h - 100 });
+    m.ctx.restore();
+    const pw = Math.min(340, a.w * 0.36);
+    const px = a.x + 16;
+    const py = a.y + 16;
+    card(m, px, py, pw, a.h - 32, 22, t.surface, 1);
+    box(m, px + 14, py + 14, pw - 28, 40, 12, t.surface2);
+    icon(m.ctx, 'search', px + 34, py + 34, 16, t.text2, false, 2.2);
+    bar(m, px + 50, py + 31, 90, 5.5, t.bar3);
+    let y = py + 70;
+    for (let i = 0; y + 90 < py + a.h - 32; i++, y += 104) {
+      photo(m, px + 14, y, 92, 88, 14, m.seed + i * 2);
+      title(m, px + 118, y + 8, pw - 160, 15);
+      body(m, px + 118, y + 30, pw - 190, 12);
+      stars(m, px + 118, y + 60, 11, 4 + (i % 2));
+      num(m, (4.4 + (i % 5) / 10).toFixed(1), px + 186, y + 64, 12, 700, t.text);
+    }
+    chipRow(m, px + pw + 16, a.y + 16, a.x + a.w - 40);
+  },
+};