capture-flow 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,113 @@
+/**
+ * Path builders shared by the device frames and the mock screens.
+ *
+ * Everything is hand-rolled on moveTo/lineTo/arc/bezierCurveTo because
+ * `roundRect` is missing on the older WebKit builds we support, and because
+ * Apple hardware needs continuous ("squircle") corners that no canvas API
+ * offers. Builders only add to the current path; callers begin, fill, stroke
+ * or clip.
+ */
+import type { Ctx2D } from '../types';
+
+/** Corner radii clockwise from the top-left corner. */
+export type Radii = readonly [number, number, number, number];
+
+const HALF_PI = Math.PI / 2;
+
+const finitePos = (v: number) => (Number.isFinite(v) && v > 0 ? v : 0);
+
+/**
+ * Adds a rectangle with circular corners. Radii are clamped to half of the
+ * shorter side, so a huge radius gives a pill or a circle, never a bow tie.
+ */
+export function roundRectPath(ctx: Ctx2D, x: number, y: number, w: number, h: number, r: number | Radii): void {
+  if (!(w > 0) || !(h > 0) || !Number.isFinite(x + y + w + h)) return;
+  const max = Math.min(w, h) / 2;
+  const [a, b, c, d] = typeof r === 'number' ? [r, r, r, r] : r;
+  const tl = Math.min(finitePos(a), max);
+  const tr = Math.min(finitePos(b), max);
+  const br = Math.min(finitePos(c), max);
+  const bl = Math.min(finitePos(d), max);
+  ctx.moveTo(x + tl, y);
+  ctx.lineTo(x + w - tr, y);
+  if (tr > 0) ctx.arc(x + w - tr, y + tr, tr, -HALF_PI, 0);
+  ctx.lineTo(x + w, y + h - br);
+  if (br > 0) ctx.arc(x + w - br, y + h - br, br, 0, HALF_PI);
+  ctx.lineTo(x + bl, y + h);
+  if (bl > 0) ctx.arc(x + bl, y + h - bl, bl, HALF_PI, Math.PI);
+  ctx.lineTo(x, y + tl);
+  if (tl > 0) ctx.arc(x + tl, y + tl, tl, Math.PI, Math.PI + HALF_PI);
+  ctx.closePath();
+}
+
+/** Corner frames for a clockwise walk: corner point, incoming edge direction, outgoing edge direction. */
+type Corner = { ox: number; oy: number; ux: number; uy: number; vx: number; vy: number };
+
+/**
+ * Adds a rectangle with continuous-curvature corners (the iOS look), using
+ * Figma's corner-smoothing construction: each corner starts `(1 + smoothing)
+ * * radius` before the corner point, eases in with a cubic, follows a short
+ * circular arc and eases out with a mirrored cubic. `smoothing` 0 is a plain
+ * circular corner; 0.6 matches iOS app icons. Smoothing is reduced when the
+ * longer corner would not fit, which keeps small shapes well-formed.
+ */
+export function smoothRectPath(ctx: Ctx2D, x: number, y: number, w: number, h: number, radius: number, smoothing: number): void {
+  if (!(w > 0) || !(h > 0) || !Number.isFinite(x + y + w + h)) return;
+  const budget = Math.min(w, h) / 2;
+  const R = Math.min(finitePos(radius), budget);
+  let xi = Number.isFinite(smoothing) ? Math.min(Math.max(smoothing, 0), 1) : 0;
+  if (R > 0) xi = Math.min(xi, budget / R - 1);
+  if (R <= 0 || xi < 0.01) {
+    roundRectPath(ctx, x, y, w, h, R);
+    return;
+  }
+  const p = Math.min((1 + xi) * R, budget);
+  const arcMeasure = HALF_PI * (1 - xi);
+  const L = Math.sin(arcMeasure / 2) * R * Math.SQRT2;
+  const alpha = (HALF_PI - arcMeasure) / 2;
+  const beta = (Math.PI / 4) * xi;
+  const c = R * Math.tan(alpha / 2) * Math.cos(beta);
+  const d = c * Math.tan(beta);
+  const b = (p - L - c - d) / 3;
+  const a = 2 * b;
+
+  const corners: Corner[] = [
+    { ox: x + w, oy: y, ux: 1, uy: 0, vx: 0, vy: 1 },
+    { ox: x + w, oy: y + h, ux: 0, uy: 1, vx: -1, vy: 0 },
+    { ox: x, oy: y + h, ux: -1, uy: 0, vx: 0, vy: -1 },
+    { ox: x, oy: y, ux: 0, uy: -1, vx: 1, vy: 0 },
+  ];
+  // Point at (along u, along v) in a corner's frame.
+  const at = (k: Corner, su: number, sv: number): [number, number] => [k.ox + k.ux * su + k.vx * sv, k.oy + k.uy * su + k.vy * sv];
+
+  ctx.moveTo(x + p, y);
+  for (const k of corners) {
+    const [x0, y0] = at(k, -p, 0);
+    ctx.lineTo(x0, y0);
+    const [c1x, c1y] = at(k, -p + a, 0);
+    const [c2x, c2y] = at(k, -p + a + b, 0);
+    const [x1, y1] = at(k, -p + a + b + c, d);
+    ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x1, y1);
+    const [cx, cy] = at(k, -R, R);
+    const [x2, y2] = at(k, -p + a + b + c + L, d + L);
+    const t1 = Math.atan2(y1 - cy, x1 - cx);
+    let t2 = Math.atan2(y2 - cy, x2 - cx);
+    if (t2 < t1) t2 += Math.PI * 2;
+    ctx.arc(cx, cy, R, t1, t2);
+    const [c3x, c3y] = at(k, -p + a + b + c + L + d, d + L + c);
+    const [c4x, c4y] = at(k, -p + a + b + c + L + d, d + L + b + c);
+    const [x3, y3] = at(k, 0, p);
+    ctx.bezierCurveTo(c3x, c3y, c4x, c4y, x3, y3);
+  }
+  ctx.closePath();
+}
+
+/** Adds a rounded rectangle inset by `inset` on every side, shrinking the radius to stay concentric. */
+export function insetSmoothRect(ctx: Ctx2D, w: number, h: number, radius: number, smoothing: number, inset: number): void {
+  smoothRectPath(ctx, inset, inset, w - 2 * inset, h - 2 * inset, Math.max(0, radius - inset), smoothing);
+}
+
+/** Adds a horizontal pill (fully rounded ends). */
+export function pillPath(ctx: Ctx2D, x: number, y: number, w: number, h: number): void {
+  roundRectPath(ctx, x, y, w, h, Math.min(w, h) / 2);
+}

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

@@ -0,0 +1,75 @@
+/**
+ * What appears on a device screen: the user's screenshot (cover-fit), a
+ * generated mock app, or a calm empty gradient. Callers provide the clip
+ * path so every frame keeps its own corner shape.
+ */
+import type { Color, FamilyId } from '../../model/types';
+import type { Ctx2D, ImageLike } from '../types';
+import { paintMockScreen } from '../mock';
+
+export interface ScreenContent {
+  image: ImageLike | null;
+  placeholder: 'mock' | 'empty';
+  mock: { seed: number; palette: Color[]; dark: boolean };
+  /** Mock screen flavour for this frame. */
+  family?: FamilyId;
+  chrome: 'device' | 'web';
+  /** Paint black under the screenshot, like a real panel (devices), or not (bare screenshots). */
+  backdrop: boolean;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/** True when an image can actually be drawn. */
+export function isDrawable(img: ImageLike | null): img is ImageLike {
+  return !!img && Number.isFinite(img.width) && Number.isFinite(img.height) && img.width > 0 && img.height > 0;
+}
+
+/** Source rectangle that covers a `w` x `h` box with an `iw` x `ih` image, centred. */
+export function coverSource(iw: number, ih: number, w: number, h: number): Rect {
+  const scale = Math.max(w / iw, h / ih);
+  const sw = Math.min(iw, w / scale);
+  const sh = Math.min(ih, h / scale);
+  return { x: (iw - sw) / 2, y: (ih - sh) / 2, w: sw, h: sh };
+}
+
+/** Neutral placeholder: one calm vertical gradient. */
+export function paintEmptyScreen(ctx: Ctx2D, r: Rect, dark: boolean): void {
+  const g = ctx.createLinearGradient(0, r.y, 0, r.y + r.h);
+  g.addColorStop(0, dark ? '#202026' : '#f8f8fa');
+  g.addColorStop(0.55, dark ? '#18181c' : '#eeeef2');
+  g.addColorStop(1, dark ? '#101013' : '#e3e3e9');
+  ctx.fillStyle = g;
+  ctx.fillRect(r.x, r.y, r.w, r.h);
+}
+
+/** Fills the screen rect `r`, clipped by the path `clip` adds. Restores all state. */
+export function paintScreen(ctx: Ctx2D, r: Rect, clip: (ctx: Ctx2D) => void, content: ScreenContent): void {
+  if (!(r.w > 0) || !(r.h > 0)) return;
+  ctx.save();
+  ctx.beginPath();
+  clip(ctx);
+  ctx.clip();
+  const img = content.image;
+  if (isDrawable(img)) {
+    if (content.backdrop) {
+      ctx.fillStyle = '#000';
+      ctx.fillRect(r.x, r.y, r.w, r.h);
+    }
+    const src = coverSource(img.width, img.height, r.w, r.h);
+    ctx.imageSmoothingEnabled = true;
+    if ('imageSmoothingQuality' in ctx) ctx.imageSmoothingQuality = 'high';
+    ctx.drawImage(img, src.x, src.y, src.w, src.h, r.x, r.y, r.w, r.h);
+  } else if (content.placeholder === 'mock') {
+    ctx.translate(r.x, r.y);
+    paintMockScreen(ctx, r.w, r.h, { ...content.mock, family: content.family, chrome: content.chrome });
+  } else {
+    paintEmptyScreen(ctx, r, content.mock.dark);
+  }
+  ctx.restore();
+}

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

@@ -0,0 +1,124 @@
+/**
+ * Soft drop shadows shaped like a device body, without ctx.filter.
+ *
+ * Canvas shadows ignore the current transform: shadowBlur and shadowOffset
+ * are in canvas pixels. That is what we want for the light direction (a
+ * tilted phone still casts its shadow straight down), but it means lengths
+ * must be scaled by the transform's zoom (DPR, editor zoom) by hand.
+ */
+import type { Shadow } from '../../model/types';
+import type { Ctx2D } from '../types';
+import type { RGBA } from '../color';
+import { parseColor, rgba } from '../color';
+
+interface Affine {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+}
+
+/** The current transform, or null on engines without getTransform. */
+export function currentMatrix(ctx: Ctx2D): Affine | null {
+  if (typeof ctx.getTransform !== 'function') return null;
+  const m = ctx.getTransform();
+  const vals = [m.a, m.b, m.c, m.d, m.e, m.f];
+  return vals.every(Number.isFinite) ? { a: m.a, b: m.b, c: m.c, d: m.d, e: m.e, f: m.f } : null;
+}
+
+/** Canvas pixels per local unit (geometric mean of the axis scales), 1 when unknown. */
+export function currentScale(ctx: Ctx2D): number {
+  const m = currentMatrix(ctx);
+  if (!m) return 1;
+  const s = Math.sqrt(Math.abs(m.a * m.d - m.b * m.c));
+  return Number.isFinite(s) && s > 0 ? s : 1;
+}
+
+const fin = (v: number) => (Number.isFinite(v) ? v : 0);
+
+/**
+ * Contact shading: a few soft strokes along the outline, nudged down,
+ * standing in for a tight second shadow that grounds the device like real
+ * product shots. Canvas blurs are full-area convolutions and a second one
+ * doubled the cost of a device; strokes cost a fraction and read the same.
+ * `c` is the falloff in canvas pixels; the inner half of each stroke is
+ * hidden under the opaque body painted afterwards.
+ */
+function contactEdge(ctx: Ctx2D, color: RGBA, c: number, offsetY: number, m: Affine, scale: number, addPath: (ctx: Ctx2D) => void): void {
+  if (!(c >= 0.75)) return;
+  const det = m.a * m.d - m.b * m.c;
+  if (Math.abs(det) < 1e-12) return;
+  ctx.save();
+  // A downward canvas offset expressed in local units, so it survives rotation.
+  ctx.translate((-m.c * offsetY) / det, (m.a * offsetY) / det);
+  ctx.lineJoin = 'round';
+  for (const [k, a] of CONTACT_STEPS) {
+    ctx.lineWidth = (2 * c * k) / scale;
+    ctx.strokeStyle = rgba(color, a);
+    ctx.beginPath();
+    addPath(ctx);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+/** [half-width as a fraction of the falloff, alpha]; overlapping strokes build a smooth ramp. */
+const CONTACT_STEPS: ReadonlyArray<readonly [number, number]> = [
+  [1, 0.03],
+  [0.62, 0.04],
+  [0.36, 0.055],
+  [0.16, 0.07],
+];
+
+/**
+ * Paints only the shadow of the shape that `addPath` describes (local
+ * coordinates, box `w` x `h` at the current origin): the designer's shadow
+ * as specified, plus optional contact shading (`contact`) along the outline.
+ */
+export function drawShadow(ctx: Ctx2D, shadow: Shadow, unit: number, w: number, h: number, addPath: (ctx: Ctx2D) => void, contact = true): void {
+  const color = parseColor(shadow.color);
+  if (!(color.a > 0)) return;
+  const m = currentMatrix(ctx);
+  const det = m ? m.a * m.d - m.b * m.c : 1;
+  const scale = Math.sqrt(Math.abs(det)) || 1;
+  const u = Math.max(0, fin(unit)) * scale;
+  const blur = Math.max(0, fin(shadow.blur)) * u;
+  const x = fin(shadow.x) * u;
+  const y = fin(shadow.y) * u;
+  if (blur === 0 && x === 0 && y === 0) return;
+
+  ctx.save();
+  ctx.shadowColor = rgba(color);
+  ctx.shadowBlur = blur;
+  if (m && Math.abs(det) > 1e-12) {
+    // Draw the casting shape far to the left of the canvas and push its
+    // shadow back by the same distance: only the shadow lands on screen,
+    // so translucent screens or antialiased edges never show a dark copy.
+    const cx = m.a * (w / 2) + m.c * (h / 2) + m.e;
+    const extent = (w + h) * scale;
+    const canvasW = ctx.canvas && Number.isFinite(ctx.canvas.width) ? ctx.canvas.width : 0;
+    const far = Math.abs(cx) + extent + canvasW + blur * 3 + 256;
+    ctx.translate((-far * m.d) / det, (far * m.b) / det);
+    ctx.shadowOffsetX = far + x;
+    ctx.shadowOffsetY = y;
+  } else {
+    // No transform access: cast from the shape itself but clip the shape
+    // away, which is the CSS box-shadow look (shadow only outside the body).
+    const pad = blur * 4 + 1e4;
+    ctx.beginPath();
+    ctx.rect(-w - pad, -h - pad, 3 * w + 2 * pad, 3 * h + 2 * pad);
+    addPath(ctx);
+    ctx.clip('evenodd');
+    ctx.shadowOffsetX = x;
+    ctx.shadowOffsetY = y;
+  }
+  ctx.fillStyle = '#000';
+  ctx.beginPath();
+  addPath(ctx);
+  ctx.fill();
+  ctx.restore();
+
+  if (contact && blur > 0 && m) contactEdge(ctx, color, Math.min(blur * 0.2, 24 * scale), Math.max(0, y) * 0.12, m, scale, addPath);
+}

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

@@ -0,0 +1,200 @@
+/**
+ * Shared painter for "slab" devices (phones and tablets): metal band,
+ * uniform bezel, screen, then per-device hardware. Frames plug their
+ * cameras and buttons in through `SlabHardware`.
+ */
+import type { Ctx2D } from '../types';
+import type { SlabLayout } from './geometry';
+import type { FramePaint } from './finish';
+import { sampleStops } from './finish';
+import { insetSmoothRect, roundRectPath, smoothRectPath } from './paths';
+import type { Rect, ScreenContent } from './screen';
+import { paintScreen } from './screen';
+
+export interface SlabHardware {
+  /** Side buttons, painted before the body so the body hides where they attach. */
+  buttons?(ctx: Ctx2D, L: SlabLayout, paint: FramePaint): void;
+  /** Cameras sitting in the bezel, painted before the screen. */
+  bezel?(ctx: Ctx2D, L: SlabLayout, px: number): void;
+  /** Islands and punch holes, painted over the screen. */
+  overlays?(ctx: Ctx2D, L: SlabLayout, px: number): void;
+}
+
+/** Fills the ring between two insets of a shape (even-odd), touching only the ring's pixels. */
+export function fillRing(ctx: Ctx2D, pathAt: (inset: number) => void, outer: number, inner: number, fill: string | CanvasGradient): void {
+  ctx.beginPath();
+  pathAt(outer);
+  pathAt(inner);
+  ctx.fillStyle = fill;
+  ctx.fill('evenodd');
+}
+
+/**
+ * Paints a band from the outer edge of a shape to `band` inside it.
+ * `pathAt(inset)` must add the shape inset by `inset`. The profile is
+ * built from thin concentric strokes over a base fill, which gives a true
+ * cross-band gradient (bright glint, darker edges) that linear gradients
+ * cannot, and the base fill hides seams between strokes. Fills are rings,
+ * not whole shapes: the inside is covered later anyway and full-size fills
+ * dominated the raster cost.
+ */
+export function paintBand(ctx: Ctx2D, pathAt: (inset: number) => void, band: number, paint: FramePaint, px: number, box: Rect): void {
+  // Reaches one pixel under whatever is painted inside the band, so no seam shows.
+  fillRing(ctx, pathAt, 0, band + Math.min(1 / px, band), sampleStops(paint.band, 0.55));
+  if (band > 0) {
+    const n = Math.max(1, Math.min(24, Math.ceil((band * px) / 0.75)));
+    const step = band / n;
+    ctx.lineWidth = step;
+    for (let i = 0; i < n; i++) {
+      ctx.strokeStyle = sampleStops(paint.band, (i + 0.5) / n);
+      ctx.beginPath();
+      pathAt((i + 0.5) * step);
+      ctx.stroke();
+    }
+  }
+  if (paint.sheen && band > 0) {
+    const g = ctx.createLinearGradient(box.x, box.y, box.x + box.w, box.y + box.h);
+    for (const [offset, color] of paint.sheen) g.addColorStop(offset, color);
+    fillRing(ctx, pathAt, 0, band, g);
+  }
+}
+
+/** Soft shadow cast inwards along a screen's edge, so a body-coloured bezel reads as a raised frame. */
+export function paintInnerShadow(ctx: Ctx2D, r: Rect, clip: (ctx: Ctx2D) => void, blur: number, offsetY: number, alpha: number): void {
+  ctx.save();
+  ctx.beginPath();
+  clip(ctx);
+  ctx.clip();
+  ctx.beginPath();
+  ctx.rect(r.x - r.w, r.y - r.h, r.w * 3, r.h * 3);
+  clip(ctx);
+  ctx.shadowColor = `rgba(0, 0, 0, ${alpha})`;
+  ctx.shadowBlur = blur;
+  ctx.shadowOffsetY = offsetY;
+  ctx.fillStyle = '#000';
+  ctx.fill('evenodd');
+  ctx.restore();
+}
+
+export type Edge = 'left' | 'right' | 'top';
+
+/**
+ * A hardware button sticking out of a straight body edge. `edge` is the
+ * x (left/right) or y (top) of that edge, `from`/`to` the span along it.
+ */
+export function paintButton(ctx: Ctx2D, side: Edge, edge: number, from: number, to: number, out: number, paint: FramePaint): void {
+  if (!(to > from) || !(out > 0)) return;
+  const root = out * 1.6;
+  const len = to - from;
+  let x: number;
+  let y: number;
+  let w: number;
+  let h: number;
+  let g: CanvasGradient;
+  if (side === 'top') {
+    x = from;
+    y = edge - out;
+    w = len;
+    h = out + root;
+    g = ctx.createLinearGradient(0, edge - out, 0, edge);
+  } else {
+    x = side === 'left' ? edge - out : edge - root;
+    y = from;
+    w = out + root;
+    h = len;
+    g = side === 'left' ? ctx.createLinearGradient(edge - out, 0, edge, 0) : ctx.createLinearGradient(edge + out, 0, edge, 0);
+  }
+  g.addColorStop(0, paint.buttonEdge);
+  g.addColorStop(0.45, paint.buttonFace);
+  g.addColorStop(1, paint.buttonFace);
+  ctx.fillStyle = g;
+  ctx.beginPath();
+  roundRectPath(ctx, x, y, w, h, out * 0.95);
+  ctx.fill();
+}
+
+/** A front camera lens: dark ring, deep blue glass, one tiny glint. */
+export function paintLens(ctx: Ctx2D, cx: number, cy: number, r: number): void {
+  if (!(r > 0)) return;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fillStyle = '#16171c';
+  ctx.fill();
+  const g = ctx.createRadialGradient(cx - r * 0.2, cy - r * 0.25, 0, cx, cy, r * 0.72);
+  g.addColorStop(0, '#2a3350');
+  g.addColorStop(0.55, '#0d1120');
+  g.addColorStop(1, '#05060a');
+  ctx.beginPath();
+  ctx.arc(cx, cy, r * 0.68, 0, Math.PI * 2);
+  ctx.fillStyle = g;
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(cx - r * 0.24, cy - r * 0.26, r * 0.16, 0, Math.PI * 2);
+  ctx.fillStyle = 'rgba(170, 190, 255, 0.35)';
+  ctx.fill();
+}
+
+/** Body, band, bezel, screen and hardware of a phone or tablet, at the current origin (device top-left). */
+export function paintSlab(ctx: Ctx2D, L: SlabLayout, paint: FramePaint, px: number, content: ScreenContent, hw: SlabHardware): void {
+  if (L.upright) {
+    // Lying on its side: the upright device turned a quarter to the left,
+    // its screen content painted the right way up.
+    ctx.save();
+    ctx.translate(0, L.h);
+    ctx.rotate(-Math.PI / 2);
+    paintUpright(ctx, L.upright, paint, px, content, hw, true);
+    ctx.restore();
+    return;
+  }
+  paintUpright(ctx, L, paint, px, content, hw, false);
+}
+
+function paintUpright(ctx: Ctx2D, L: SlabLayout, paint: FramePaint, px: number, content: ScreenContent, hw: SlabHardware, turned: boolean): void {
+  const body = (inset: number) => insetSmoothRect(ctx, L.w, L.h, L.radius, L.smoothing, inset);
+  hw.buttons?.(ctx, L, paint);
+  paintBand(ctx, body, L.band, paint, px, { x: 0, y: 0, w: L.w, h: L.h });
+
+  // Bezel ring. Its hole follows the screen's own corners (tablets use a
+  // rounder screen than the body), tucked one pixel under the screen edge.
+  const s = L.screen;
+  const o = Math.min(1 / px, s.w / 4, s.h / 4);
+  ctx.beginPath();
+  body(L.band);
+  smoothRectPath(ctx, s.x + o, s.y + o, s.w - 2 * o, s.h - 2 * o, Math.max(0, s.radius - o), L.screenSmoothing);
+  ctx.fillStyle = paint.bezel;
+  ctx.fill('evenodd');
+  if (!paint.bezelMatchesBody) {
+    // Cover glass catches a hairline of light where it meets the frame.
+    const hair = Math.min(1 / px, (L.inset - L.band) * 0.25);
+    ctx.lineWidth = hair;
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.09)';
+    ctx.beginPath();
+    body(L.band + hair * 0.5);
+    ctx.stroke();
+  }
+  hw.bezel?.(ctx, L, px);
+
+  const screenPath = (c: Ctx2D) => smoothRectPath(c, s.x, s.y, s.w, s.h, s.radius, L.screenSmoothing);
+  if (turned) paintTurnedScreen(ctx, s, screenPath, content, L.w);
+  else paintScreen(ctx, s, screenPath, content);
+  if (paint.bezelMatchesBody) paintInnerShadow(ctx, s, screenPath, L.w * 0.014 * px, L.w * 0.003 * px, 0.2);
+  hw.overlays?.(ctx, L, px);
+}
+
+/**
+ * The screen of a device painted turned (see paintSlab): clipped to its
+ * shape in the device's own coordinates, then filled with the turn undone,
+ * so a landscape screenshot or mock reads the right way up. `uprightW` is
+ * the upright device's width, the turned device's height.
+ */
+function paintTurnedScreen(ctx: Ctx2D, s: Rect, clip: (ctx: Ctx2D) => void, content: ScreenContent, uprightW: number): void {
+  ctx.save();
+  ctx.beginPath();
+  clip(ctx);
+  ctx.clip();
+  ctx.rotate(Math.PI / 2);
+  ctx.translate(0, -uprightW);
+  const r = { x: s.y, y: uprightW - s.x - s.w, w: s.h, h: s.w };
+  paintScreen(ctx, r, (c) => c.rect(r.x, r.y, r.w, r.h), content);
+  ctx.restore();
+}

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

@@ -0,0 +1,43 @@
+/**
+ * Apple Vision Pro: an app window as visionOS shows it, a sheet of frosted
+ * glass floating in space with the grab bar under it. The glass ignores the
+ * frame colour: visionOS windows are always glass.
+ */
+import type { Ctx2D } from '../types';
+import type { VisionLayout } from './geometry';
+import { pillPath, roundRectPath } from './paths';
+import type { ScreenContent } from './screen';
+import { paintScreen } from './screen';
+
+export function visionBodyPath(ctx: Ctx2D, L: VisionLayout): void {
+  const g = L.window;
+  roundRectPath(ctx, g.x, g.y, g.w, g.h, g.radius);
+}
+
+export function paintVision(ctx: Ctx2D, L: VisionLayout, px: number, content: ScreenContent): void {
+  const g = L.window;
+  // Frosted glass: a light tint that brightens towards the top edge.
+  const tint = ctx.createLinearGradient(0, g.y, 0, g.y + g.h);
+  tint.addColorStop(0, 'rgba(255, 255, 255, 0.34)');
+  tint.addColorStop(1, 'rgba(255, 255, 255, 0.16)');
+  ctx.beginPath();
+  visionBodyPath(ctx, L);
+  ctx.fillStyle = tint;
+  ctx.fill();
+  // A bright hairline where the glass catches the light.
+  const hair = Math.max(1 / px, g.w * 0.0012);
+  ctx.lineWidth = hair;
+  ctx.strokeStyle = 'rgba(255, 255, 255, 0.55)';
+  ctx.beginPath();
+  roundRectPath(ctx, g.x + hair / 2, g.y + hair / 2, g.w - hair, g.h - hair, Math.max(0, g.radius - hair / 2));
+  ctx.stroke();
+
+  const s = L.screen;
+  paintScreen(ctx, s, (c) => roundRectPath(c, s.x, s.y, s.w, s.h, s.radius), content);
+
+  const b = L.bar;
+  ctx.beginPath();
+  pillPath(ctx, b.x, b.y, b.w, b.h);
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.62)';
+  ctx.fill();
+}

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

@@ -0,0 +1,14 @@
+/** Apple Watch: Digital Crown and side button on the right edge; TVs have no hardware to draw. */
+import type { SlabHardware } from './slab';
+import { paintButton } from './slab';
+
+export const watchHardware: SlabHardware = {
+  buttons(ctx, L, paint) {
+    // Digital Crown: wide and proud of the case, a third of the way down.
+    paintButton(ctx, 'right', L.w, L.h * 0.22, L.h * 0.38, L.w * 0.055, paint);
+    // Side button below it, flatter and longer.
+    paintButton(ctx, 'right', L.w, L.h * 0.5, L.h * 0.68, L.w * 0.022, paint);
+  },
+};
+
+export const tvHardware: SlabHardware = {};