capture-flow 0.0.0-stage → 0.1.0

package/vendor/wajha/engine/color.ts

@@ -0,0 +1,125 @@
+/** Colour helpers shared by the engine (and safe to use from the UI). */
+
+export interface RGBA {
+  /** 0..255 */
+  r: number;
+  g: number;
+  b: number;
+  /** 0..1 */
+  a: number;
+}
+
+const clamp = (v: number, lo: number, hi: number) => (v < lo ? lo : v > hi ? hi : v);
+
+/** Parses #rgb, #rgba, #rrggbb or #rrggbbaa. Anything else becomes opaque black. */
+export function parseColor(input: string): RGBA {
+  const s = input.trim().replace(/^#/, '');
+  const ok = /^([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(s);
+  if (!ok) return { r: 0, g: 0, b: 0, a: 1 };
+  const full = s.length <= 4 ? [...s].map((ch) => ch + ch).join('') : s;
+  const n = (i: number) => parseInt(full.slice(i, i + 2), 16);
+  return { r: n(0), g: n(2), b: n(4), a: full.length === 8 ? n(6) / 255 : 1 };
+}
+
+export function toHex(c: RGBA, withAlpha = c.a < 1): string {
+  const h = (v: number) => Math.round(clamp(v, 0, 255)).toString(16).padStart(2, '0');
+  return `#${h(c.r)}${h(c.g)}${h(c.b)}${withAlpha ? h(c.a * 255) : ''}`;
+}
+
+/** CSS rgba() string, optionally multiplying the alpha. */
+export function rgba(color: string | RGBA, alphaMul = 1): string {
+  const c = typeof color === 'string' ? parseColor(color) : color;
+  const a = clamp(c.a * alphaMul, 0, 1);
+  return `rgba(${Math.round(c.r)}, ${Math.round(c.g)}, ${Math.round(c.b)}, ${+a.toFixed(4)})`;
+}
+
+/** Linear mix in sRGB space; t = 0 gives a, t = 1 gives b. */
+export function mix(a: string, b: string, t: number): string {
+  const x = parseColor(a);
+  const y = parseColor(b);
+  const k = clamp(t, 0, 1);
+  return toHex({
+    r: x.r + (y.r - x.r) * k,
+    g: x.g + (y.g - x.g) * k,
+    b: x.b + (y.b - x.b) * k,
+    a: x.a + (y.a - x.a) * k,
+  });
+}
+
+export const lighten = (hex: string, amount: number) => mix(hex, '#ffffff', amount);
+export const darken = (hex: string, amount: number) => mix(hex, '#000000', amount);
+
+/** WCAG relative luminance, 0 (black) .. 1 (white). */
+export function luminance(hex: string): number {
+  const { r, g, b } = parseColor(hex);
+  const lin = (v: number) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+export function isDark(hex: string): boolean {
+  return luminance(hex) < 0.4;
+}
+
+/** WCAG contrast ratio between two colours (1..21). */
+export function contrast(a: string, b: string): number {
+  const la = luminance(a);
+  const lb = luminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+
+export interface HSL {
+  /** Hue in degrees, 0..360 */
+  h: number;
+  /** 0..1 */
+  s: number;
+  /** 0..1 */
+  l: number;
+}
+
+/** sRGB to HSL. Greys report hue 0. */
+export function toHsl(hex: string): HSL {
+  const { r, g, b } = parseColor(hex);
+  const R = r / 255;
+  const G = g / 255;
+  const B = b / 255;
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const l = (max + min) / 2;
+  const d = max - min;
+  if (d < 1e-6) return { h: 0, s: 0, l };
+  const s = d / (1 - Math.abs(2 * l - 1));
+  let h: number;
+  if (max === R) h = ((G - B) / d) % 6;
+  else if (max === G) h = (B - R) / d + 2;
+  else h = (R - G) / d + 4;
+  h *= 60;
+  return { h: h < 0 ? h + 360 : h, s: clamp(s, 0, 1), l };
+}
+
+/** HSL to "#rrggbb". Hue wraps; saturation and lightness are clamped. */
+export function fromHsl({ h, s, l }: HSL): string {
+  const hue = Number.isFinite(h) ? ((h % 360) + 360) % 360 : 0;
+  const S = Number.isFinite(s) ? clamp(s, 0, 1) : 0;
+  const L = Number.isFinite(l) ? clamp(l, 0, 1) : 0;
+  const c = (1 - Math.abs(2 * L - 1)) * S;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = L - c / 2;
+  const [r, g, b] =
+    hue < 60 ? [c, x, 0] : hue < 120 ? [x, c, 0] : hue < 180 ? [0, c, x] : hue < 240 ? [0, x, c] : hue < 300 ? [x, 0, c] : [c, 0, x];
+  return toHex({ r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255, a: 1 });
+}
+
+/** Rotates the hue by `degrees`, keeping saturation and lightness (alpha is dropped). */
+export function rotateHue(hex: string, degrees: number): string {
+  const c = toHsl(hex);
+  return fromHsl({ ...c, h: c.h + degrees });
+}
+
+/** Colourfulness 0 (grey) .. 1 (pure hue): max - min channel, like HSV chroma. */
+export function chroma(hex: string): number {
+  const { r, g, b } = parseColor(hex);
+  return (Math.max(r, g, b) - Math.min(r, g, b)) / 255;
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Android hardware: a Pixel-like phone (punch-hole camera, power above the
+ * volume rocker on the right) and tablet (camera on the top bezel).
+ */
+import type { ScreenRect } from '../types';
+import type { SlabHardware } from './slab';
+import { paintButton, paintLens } from './slab';
+
+/** Punch-hole camera: diameter as a fraction of the device width, centre as a fraction of the screen width below its top. */
+export const PUNCH_HOLE = { diameter: 0.034, centerY: 0.052 };
+
+export function punchHole(screen: ScreenRect, deviceWidth: number): { cx: number; cy: number; r: number } {
+  const r = Math.min(deviceWidth * PUNCH_HOLE.diameter, screen.h * 0.2) / 2;
+  return { cx: screen.x + screen.w / 2, cy: screen.y + Math.max(screen.w * PUNCH_HOLE.centerY, r * 1.6), r };
+}
+
+export const androidPhoneHardware: SlabHardware = {
+  buttons(ctx, L, paint) {
+    const out = L.w * 0.0058;
+    const limit = L.h - L.radius;
+    if (L.w * 0.55 < limit) paintButton(ctx, 'right', L.w, L.w * 0.42, L.w * 0.55, out, paint);
+    if (L.w * 0.92 < limit) paintButton(ctx, 'right', L.w, L.w * 0.64, L.w * 0.92, out, paint);
+  },
+  overlays(ctx, L) {
+    const { cx, cy, r } = punchHole(L.screen, L.w);
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.fillStyle = '#000000';
+    ctx.fill();
+    // Lens glass: a darker core with a faint blue reflection, readable only up close.
+    const g = ctx.createRadialGradient(cx - r * 0.25, cy - r * 0.3, 0, cx, cy, r * 0.62);
+    g.addColorStop(0, 'rgba(70, 86, 130, 0.5)');
+    g.addColorStop(0.5, 'rgba(14, 18, 32, 0.7)');
+    g.addColorStop(1, 'rgba(0, 0, 0, 0)');
+    ctx.beginPath();
+    ctx.arc(cx, cy, r * 0.62, 0, Math.PI * 2);
+    ctx.fillStyle = g;
+    ctx.fill();
+  },
+};
+
+export const androidTabletHardware: SlabHardware = {
+  buttons(ctx, L, paint) {
+    const out = L.w * 0.0042;
+    paintButton(ctx, 'top', 0, L.w * 0.7, L.w * 0.8, out, paint);
+    const limit = L.h - L.radius;
+    if (L.w * 0.3 < limit) paintButton(ctx, 'right', L.w, L.w * 0.12, L.w * 0.3, out, paint);
+  },
+  bezel(ctx, L) {
+    const bezel = L.inset - L.band;
+    paintLens(ctx, L.w / 2, L.band + bezel / 2, Math.min(L.w * 0.0046, bezel * 0.3));
+  },
+};

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

@@ -0,0 +1,170 @@
+/**
+ * Desktop browser window: rounded window, toolbar with traffic lights,
+ * navigation chevrons, a URL field and a few actions. The chrome is light
+ * or dark following the luminance of the frame colour.
+ */
+import type { Ctx2D } from '../types';
+import { darken, lighten, luminance, mix } from '../color';
+import type { BrowserLayout } from './geometry';
+import type { FramePaint } from './finish';
+import { roundRectPath } from './paths';
+import type { ScreenContent } from './screen';
+import { paintScreen } from './screen';
+
+export const TRAFFIC_LIGHTS = ['#ff5f57', '#febc2e', '#28c840'] as const;
+
+/** Toolbar tones for a frame colour; exported for tests. */
+export function browserChrome(paint: FramePaint): { dark: boolean; toolbar: string; top: string; bottom: string } {
+  const dark = luminance(paint.base) < 0.4;
+  const toolbar = paint.finish === 'clay' ? paint.base : dark ? mix('#232327', paint.base, 0.45) : mix('#f3f3f5', paint.base, 0.4);
+  if (paint.finish === 'metal') return { dark, toolbar, top: lighten(toolbar, dark ? 0.07 : 0.4), bottom: darken(toolbar, dark ? 0.12 : 0.035) };
+  if (paint.finish === 'matte') return { dark, toolbar, top: lighten(toolbar, dark ? 0.03 : 0.2), bottom: darken(toolbar, dark ? 0.05 : 0.015) };
+  return { dark, toolbar, top: toolbar, bottom: toolbar };
+}
+
+function stroke(ctx: Ctx2D, color: string, width: number, draw: () => void): void {
+  ctx.beginPath();
+  draw();
+  ctx.lineWidth = width;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.strokeStyle = color;
+  ctx.stroke();
+}
+
+/** Paints window and toolbar with the top-left at the current origin, then the page. */
+export function paintBrowser(ctx: Ctx2D, L: BrowserLayout, paint: FramePaint, px: number, content: ScreenContent): void {
+  const { w, h, radius: R, toolbar: T } = L;
+  const chrome = browserChrome(paint);
+  const ink = chrome.dark ? 'rgba(255, 255, 255, 0.55)' : 'rgba(0, 0, 0, 0.5)';
+  const faint = chrome.dark ? 'rgba(255, 255, 255, 0.24)' : 'rgba(0, 0, 0, 0.2)';
+
+  // Only the toolbar needs painting: the page covers the rest of the window.
+  const tg = ctx.createLinearGradient(0, 0, 0, T);
+  tg.addColorStop(0, chrome.top);
+  tg.addColorStop(1, chrome.bottom);
+  ctx.beginPath();
+  roundRectPath(ctx, 0, 0, w, Math.min(h, T + Math.min(1 / px, T * 0.1)), [R, R, 0, 0]);
+  ctx.fillStyle = tg;
+  ctx.fill();
+
+  // Traffic lights.
+  const r = T * 0.115;
+  const gap = T * 0.38;
+  const x0 = T * 0.42;
+  const cy = T / 2;
+  TRAFFIC_LIGHTS.forEach((color, i) => {
+    const cx = x0 + i * gap;
+    const g = ctx.createLinearGradient(0, cy - r, 0, cy + r);
+    g.addColorStop(0, lighten(color, 0.12));
+    g.addColorStop(1, darken(color, 0.06));
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.fillStyle = g;
+    ctx.fill();
+    ctx.lineWidth = Math.min(r * 0.18, 0.8 / px);
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.14)';
+    ctx.stroke();
+  });
+
+  // Back / forward.
+  const icon = T * 0.13;
+  const lw = Math.max(T * 0.038, 0.5 / px);
+  const navX = x0 + 2 * gap + r + T * 0.62;
+  stroke(ctx, ink, lw, () => {
+    ctx.moveTo(navX + icon * 0.5, cy - icon);
+    ctx.lineTo(navX - icon * 0.5, cy);
+    ctx.lineTo(navX + icon * 0.5, cy + icon);
+  });
+  const fwdX = navX + T * 0.55;
+  stroke(ctx, faint, lw, () => {
+    ctx.moveTo(fwdX - icon * 0.5, cy - icon);
+    ctx.lineTo(fwdX + icon * 0.5, cy);
+    ctx.lineTo(fwdX - icon * 0.5, cy + icon);
+  });
+
+  // URL field, centred, with a padlock, the address as a skeleton bar and a reload arrow.
+  const leftEnd = fwdX + T * 0.5;
+  const rightStart = w - T * 1.75;
+  const pw = Math.min(w * 0.44, Math.max(0, 2 * Math.min(w / 2 - leftEnd, rightStart - w / 2)));
+  const ph = T * 0.58;
+  if (pw > T * 2) {
+    const px0 = (w - pw) / 2;
+    const py0 = cy - ph / 2;
+    ctx.beginPath();
+    roundRectPath(ctx, px0, py0, pw, ph, ph * 0.32);
+    ctx.fillStyle = chrome.dark ? 'rgba(255, 255, 255, 0.085)' : 'rgba(0, 0, 0, 0.06)';
+    ctx.fill();
+    const barW = pw * 0.34;
+    const barH = ph * 0.26;
+    const lockW = ph * 0.26;
+    const groupW = lockW + ph * 0.22 + barW;
+    const gx = w / 2 - groupW / 2;
+    // Padlock.
+    const lockH = lockW * 0.8;
+    const ly = cy - lockH * 0.28;
+    ctx.beginPath();
+    roundRectPath(ctx, gx, ly, lockW, lockH, lockW * 0.18);
+    ctx.fillStyle = ink;
+    ctx.fill();
+    stroke(ctx, ink, lockW * 0.17, () => {
+      ctx.moveTo(gx + lockW * 0.24, ly);
+      ctx.arc(gx + lockW / 2, ly - lockW * 0.08, lockW * 0.26, Math.PI, 0);
+      ctx.lineTo(gx + lockW * 0.76, ly);
+    });
+    ctx.beginPath();
+    roundRectPath(ctx, gx + lockW + ph * 0.22, cy - barH / 2, barW, barH, barH / 2);
+    ctx.fillStyle = chrome.dark ? 'rgba(255, 255, 255, 0.42)' : 'rgba(0, 0, 0, 0.34)';
+    ctx.fill();
+    // Reload.
+    const rx = px0 + pw - ph * 0.5;
+    const rr = ph * 0.16;
+    stroke(ctx, faint, Math.max(ph * 0.05, 0.5 / px), () => {
+      ctx.arc(rx, cy, rr, -Math.PI * 0.35, Math.PI * 1.45);
+    });
+  }
+
+  // Share and new tab.
+  const sx = w - T * 1.15;
+  const s = T * 0.15;
+  stroke(ctx, ink, lw, () => {
+    ctx.moveTo(sx - s * 0.6, cy - s * 0.15);
+    ctx.lineTo(sx - s * 0.9, cy - s * 0.15);
+    ctx.lineTo(sx - s * 0.9, cy + s * 1.05);
+    ctx.lineTo(sx + s * 0.9, cy + s * 1.05);
+    ctx.lineTo(sx + s * 0.9, cy - s * 0.15);
+    ctx.lineTo(sx + s * 0.6, cy - s * 0.15);
+    ctx.moveTo(sx, cy + s * 0.35);
+    ctx.lineTo(sx, cy - s * 1.15);
+    ctx.moveTo(sx - s * 0.45, cy - s * 0.7);
+    ctx.lineTo(sx, cy - s * 1.15);
+    ctx.lineTo(sx + s * 0.45, cy - s * 0.7);
+  });
+  const nx = w - T * 0.5;
+  stroke(ctx, ink, lw, () => {
+    ctx.moveTo(nx - s, cy);
+    ctx.lineTo(nx + s, cy);
+    ctx.moveTo(nx, cy - s);
+    ctx.lineTo(nx, cy + s);
+  });
+
+  // Toolbar separator.
+  const hair = Math.min(1 / px, T * 0.05);
+  ctx.fillStyle = chrome.dark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(0, 0, 0, 0.1)';
+  ctx.fillRect(0, T - hair, w, hair);
+
+  const sc = L.screen;
+  paintScreen(ctx, sc, (c) => roundRectPath(c, sc.x, sc.y, sc.w, sc.h, [0, 0, sc.radius, sc.radius]), content);
+
+  // Window outline: a hairline that keeps the window crisp on any background.
+  const outline = paint.bezelMatchesBody
+    ? darken(chrome.toolbar, chrome.dark ? 0.3 : 0.14)
+    : chrome.dark
+      ? 'rgba(255, 255, 255, 0.16)'
+      : 'rgba(0, 0, 0, 0.16)';
+  ctx.lineWidth = hair;
+  ctx.strokeStyle = outline;
+  ctx.beginPath();
+  roundRectPath(ctx, hair / 2, hair / 2, w - hair, h - hair, Math.max(0, R - hair / 2));
+  ctx.stroke();
+}

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

@@ -0,0 +1,154 @@
+/**
+ * Colour recipes for frame finishes. Every tone is derived from the single
+ * body colour the user picks, so graphite, silver, titanium, gold, white,
+ * black and pastel clays all get believable highlights and shades.
+ */
+import type { FrameFinish, FrameStyle } from '../../model/types';
+import { darken, lighten, luminance, mix, parseColor, toHex } from '../color';
+
+/** Colour at an offset 0..1. */
+export type Stops = ReadonlyArray<readonly [number, string]>;
+
+export interface FramePaint {
+  finish: FrameFinish;
+  /** Body colour as "#rrggbb". */
+  base: string;
+  bezel: string;
+  /** True when the bezel is drawn in the body colour (clay mockup look). */
+  bezelMatchesBody: boolean;
+  /** Profile across a band, 0 = outer edge .. 1 = inner edge next to the glass. */
+  band: Stops;
+  /** Semi-transparent overlay along the body (environment reflection), top-left to bottom-right. */
+  sheen: Stops | null;
+  /** Hardware buttons: outer (shadowed) edge and lit face. */
+  buttonEdge: string;
+  buttonFace: string;
+  /** Dark luminance class decides whether glints read as light-on-dark. */
+  isDarkBody: boolean;
+}
+
+export const BLACK_BEZEL = '#050507';
+
+const FINISHES: readonly FrameFinish[] = ['metal', 'matte', 'clay'];
+
+/** Linear interpolation inside a stop list (stops must be sorted by offset). */
+export function sampleStops(stops: Stops, t: number): string {
+  if (stops.length === 0) return '#000000';
+  const k = Number.isFinite(t) ? Math.min(Math.max(t, 0), 1) : 0;
+  if (k <= stops[0][0]) return stops[0][1];
+  for (let i = 1; i < stops.length; i++) {
+    const [o1, c1] = stops[i];
+    if (k <= o1) {
+      const [o0, c0] = stops[i - 1];
+      return mix(c0, c1, o1 > o0 ? (k - o0) / (o1 - o0) : 1);
+    }
+  }
+  return stops[stops.length - 1][1];
+}
+
+/** Opaque "#rrggbb" for any input, so alpha in the body colour never leaks into the artwork. */
+function opaque(color: string): string {
+  const c = parseColor(color);
+  return toHex({ ...c, a: 1 }, false);
+}
+
+function metalBand(base: string, L: number): Stops {
+  // Light metals read through darker edges, dark metals through bright glints.
+  const light = L > 0.5;
+  const mid = L > 0.15;
+  const edge = darken(base, light ? 0.34 : mid ? 0.46 : 0.42);
+  const glint = lighten(base, light ? 0.85 : mid ? 0.62 : 0.4);
+  const shade = darken(base, light ? 0.14 : 0.3);
+  const inner = darken(base, light ? 0.5 : 0.62);
+  return [
+    [0, edge],
+    [0.12, mix(edge, base, 0.6)],
+    [0.27, glint],
+    [0.4, mix(glint, base, 0.6)],
+    [0.62, base],
+    [0.84, shade],
+    [1, inner],
+  ];
+}
+
+function metalSheen(L: number): Stops {
+  const k = L > 0.5 ? 0.8 : 1;
+  const w = (a: number) => `rgba(255, 255, 255, ${+(a * k).toFixed(3)})`;
+  const b = (a: number) => `rgba(0, 0, 0, ${+(a * (L > 0.5 ? 1.2 : 1)).toFixed(3)})`;
+  return [
+    [0, w(0.3)],
+    [0.1, w(0.06)],
+    [0.28, b(0.1)],
+    [0.47, w(0.16)],
+    [0.55, w(0.02)],
+    [0.72, b(0.08)],
+    [0.88, w(0.08)],
+    [1, b(0.22)],
+  ];
+}
+
+/** Resolves a frame style into concrete paint. Unknown finishes fall back to metal, unknown colours to black. */
+export function framePaint(style: FrameStyle): FramePaint {
+  // Styles come from user files; tolerate a missing object or fields rather than throwing mid-render.
+  const s: Partial<FrameStyle> = style ?? {};
+  const finish: FrameFinish = s.finish && FINISHES.includes(s.finish) ? s.finish : 'metal';
+  const base = opaque(typeof s.color === 'string' ? s.color : '#000000');
+  const L = luminance(base);
+  const matchBezel = s.bezel === 'match';
+  const bezel = matchBezel ? base : BLACK_BEZEL;
+  const isDarkBody = L < 0.18;
+
+  if (finish === 'metal') {
+    const band = metalBand(base, L);
+    return {
+      finish,
+      base,
+      bezel,
+      bezelMatchesBody: matchBezel,
+      band,
+      sheen: metalSheen(L),
+      buttonEdge: darken(base, L > 0.5 ? 0.32 : 0.45),
+      buttonFace: sampleStops(band, 0.3),
+      isDarkBody,
+    };
+  }
+  if (finish === 'matte') {
+    const edge = darken(base, L > 0.5 ? 0.16 : 0.3);
+    return {
+      finish,
+      base,
+      bezel,
+      bezelMatchesBody: matchBezel,
+      band: [
+        [0, edge],
+        [0.2, base],
+        [0.8, base],
+        [1, darken(base, L > 0.5 ? 0.2 : 0.38)],
+      ],
+      sheen: [
+        [0, 'rgba(255, 255, 255, 0.10)'],
+        [0.5, 'rgba(255, 255, 255, 0)'],
+        [1, 'rgba(0, 0, 0, 0.10)'],
+      ],
+      buttonEdge: edge,
+      buttonFace: base,
+      isDarkBody,
+    };
+  }
+  // Clay: a soft solid object, defined only by a whisper of edge shading.
+  return {
+    finish,
+    base,
+    bezel,
+    bezelMatchesBody: matchBezel,
+    band: [
+      [0, darken(base, 0.08)],
+      [0.3, base],
+      [1, base],
+    ],
+    sheen: null,
+    buttonEdge: darken(base, 0.1),
+    buttonFace: base,
+    isDarkBody,
+  };
+}