capture-flow 0.0.0-stage → 0.1.0

package/vendor/wajha/engine/patterns.ts

@@ -0,0 +1,263 @@
+/**
+ * Background patterns drawn over the fill at `opacity`. `scale` (a fraction
+ * of u) sets the spacing between features:
+ *   dots      dot grid, one dot per `spacing` square
+ *   grid      hairline grid with `spacing` cells
+ *   diagonal  45deg lines, `spacing` apart (measured perpendicular)
+ *   noise     film grain; grains are spacing / 20 (at least one pixel)
+ *   waves     horizontal sine lines, `spacing` apart, wavelength 3 x spacing
+ *   rings     concentric circles around the centre of the background box
+ * Tiled kinds are rendered once into a small cached tile and filled with a
+ * repeating pattern anchored at the background box origin, so in panorama
+ * mode (box = the whole strip, translated per slide) the pattern runs on
+ * seamlessly from one slide to the next.
+ */
+import type { Pattern } from '../model/types';
+import type { Ctx2D, ImageLike, RenderEnv } from './types';
+import { parseColor, rgba, type RGBA } from './color';
+import { clamp, hash2, num, TAU, type Rect } from './geometry';
+import { engineCache } from './cache';
+
+const tiles = engineCache<string, ImageLike>(48, 8 * 1024 * 1024);
+/** CanvasPattern objects belong to a context; keep one per (context, tile) without pinning either. */
+const patternCache = new WeakMap<Ctx2D, WeakMap<object, CanvasPattern>>();
+
+interface TileSpec {
+  key: string;
+  /** Period of the pattern in canvas pixels (may be fractional). */
+  pw: number;
+  ph: number;
+  /** Draws one period in period units; the context is already scaled to the tile. */
+  draw(g: Ctx2D, color: string, rgb: RGBA): void;
+  /** Noise is drawn pixel by pixel and must not be resampled. */
+  exact?: boolean;
+}
+
+const KINDS = new Set(['dots', 'grid', 'diagonal', 'noise', 'waves', 'rings']);
+
+/** Spacing in pixels for a pattern on a canvas with unit u (clamped to sane limits). */
+export function patternSpacing(pattern: Pattern, u: number): number {
+  return clamp(num(pattern.scale, 0) * u, 2, Math.max(4, u * 2));
+}
+
+function tileSpec(kind: string, spacing: number, res: number): TileSpec | null {
+  const s = spacing;
+  switch (kind) {
+    case 'dots': {
+      const r = clamp(s * 0.09, 0.6, s * 0.45);
+      return {
+        key: `dots|${s}`,
+        pw: s,
+        ph: s,
+        draw(g, color) {
+          g.fillStyle = color;
+          g.beginPath();
+          g.arc(s / 2, s / 2, r, 0, TAU);
+          g.fill();
+        },
+      };
+    }
+    case 'grid': {
+      const lw = clamp(s * 0.03, 1, s * 0.3);
+      // Lines run through the middle of each cell (pixel-snapped), so the slide edge never
+      // gets a line that reads as a border.
+      const o = Math.round((s - lw) / 2);
+      return {
+        key: `grid|${s}`,
+        pw: s,
+        ph: s,
+        draw(g, color) {
+          g.fillStyle = color;
+          g.beginPath();
+          g.rect(0, o, s, lw);
+          g.rect(o, 0, lw, s);
+          // One fill for both lines: crossings are not painted twice with translucent colours.
+          g.fill();
+        },
+      };
+    }
+    case 'diagonal': {
+      const p = s * Math.SQRT2;
+      const lw = clamp(s * 0.1, 1, s * 0.45);
+      return {
+        key: `diagonal|${s}`,
+        pw: p,
+        ph: p,
+        draw(g, color) {
+          g.strokeStyle = color;
+          g.lineWidth = lw;
+          g.beginPath();
+          // Three parallel "/" lines so the stroke also covers the tile corners after wrapping.
+          for (let k = -1; k <= 1; k++) {
+            g.moveTo(k * p - lw, p + lw);
+            g.lineTo((k + 1) * p + lw, -lw);
+          }
+          g.stroke();
+        },
+      };
+    }
+    case 'waves': {
+      const lambda = s * 3;
+      const amp = s * 0.18;
+      const lw = clamp(s * 0.06, 1, s * 0.3);
+      return {
+        key: `waves|${s}`,
+        pw: lambda,
+        ph: s,
+        draw(g, color) {
+          g.strokeStyle = color;
+          g.lineWidth = lw;
+          g.lineJoin = 'round';
+          g.beginPath();
+          const steps = 48;
+          // Rows above and below, and a little past both sides, so strokes meet across tile seams.
+          for (const dy of [-s, 0, s]) {
+            for (let i = -2; i <= steps + 2; i++) {
+              const x = (i / steps) * lambda;
+              const y = s / 2 + dy + amp * Math.sin((i / steps) * TAU);
+              if (i === -2) g.moveTo(x, y);
+              else g.lineTo(x, y);
+            }
+          }
+          g.stroke();
+        },
+      };
+    }
+    case 'noise': {
+      // Grains are whole device pixels; the period is given in canvas units.
+      const grain = Math.max(1, Math.round((s / 20) * res));
+      const cells = grain === 1 ? 256 : clamp(Math.floor(384 / grain), 32, 192);
+      const size = cells * grain;
+      return {
+        key: `noise|${grain}`,
+        pw: size / res,
+        ph: size / res,
+        exact: true,
+        draw(g, _color, rgb) {
+          const img = g.createImageData(size, size);
+          const d = img.data;
+          for (let cy = 0; cy < cells; cy++) {
+            for (let cx = 0; cx < cells; cx++) {
+              const a = Math.round(hash2(cx, cy, 0x5eed) * 255 * rgb.a);
+              for (let y = cy * grain; y < (cy + 1) * grain; y++) {
+                for (let x = cx * grain; x < (cx + 1) * grain; x++) {
+                  const i = (y * size + x) * 4;
+                  d[i] = rgb.r;
+                  d[i + 1] = rgb.g;
+                  d[i + 2] = rgb.b;
+                  d[i + 3] = a;
+                }
+              }
+            }
+          }
+          g.putImageData(img, 0, 0);
+        },
+      };
+    }
+    default:
+      return null;
+  }
+}
+
+/** Tiles larger than this are rendered at reduced resolution (only for extreme spacings). */
+const MAX_TILE_SIDE = 2048;
+const MAX_TILE_PIXELS = 1_500_000;
+
+function tileFor(spec: TileSpec, rgb: RGBA, env: RenderEnv, res: number): ImageLike | null {
+  const color = rgba(rgb);
+  // Device resolution (res = transform scale), capped so huge spacings never allocate a giant
+  // tile every frame (it would never fit the cache).
+  const k = spec.exact ? 1 : Math.min(res, MAX_TILE_SIDE / Math.max(spec.pw, spec.ph), Math.sqrt(MAX_TILE_PIXELS / (spec.pw * spec.ph)));
+  const tw = spec.exact ? Math.round(spec.pw * res) : Math.max(2, Math.round(spec.pw * k));
+  const th = spec.exact ? Math.round(spec.ph * res) : Math.max(2, Math.round(spec.ph * k));
+  const key = `${spec.key}|${color}|${tw}x${th}`;
+  const hit = tiles.get(key);
+  if (hit) return hit;
+  let made: { canvas: ImageLike; ctx: Ctx2D };
+  try {
+    made = env.createCanvas(tw, th);
+  } catch {
+    return null;
+  }
+  const g = made.ctx;
+  g.save();
+  if (!spec.exact) g.scale(tw / spec.pw, th / spec.ph);
+  spec.draw(g, color, rgb);
+  g.restore();
+  tiles.set(key, made.canvas, tw * th * 4);
+  return made.canvas;
+}
+
+function patternFor(ctx: Ctx2D, tile: ImageLike): CanvasPattern | null {
+  let perCtx = patternCache.get(ctx);
+  if (!perCtx) {
+    perCtx = new WeakMap();
+    patternCache.set(ctx, perCtx);
+  }
+  let p = perCtx.get(tile);
+  if (!p) {
+    p = ctx.createPattern(tile, 'repeat') ?? undefined;
+    if (!p) return null;
+    perCtx.set(tile, p);
+  }
+  return p;
+}
+
+function drawRings(ctx: Ctx2D, box: Rect, area: Rect, spacing: number, color: string): void {
+  const cx = box.x + box.w / 2;
+  const cy = box.y + box.h / 2;
+  const nearX = Math.max(0, area.x - cx, cx - (area.x + area.w));
+  const nearY = Math.max(0, area.y - cy, cy - (area.y + area.h));
+  const farX = Math.max(Math.abs(area.x - cx), Math.abs(area.x + area.w - cx));
+  const farY = Math.max(Math.abs(area.y - cy), Math.abs(area.y + area.h - cy));
+  const lw = clamp(spacing * 0.05, 1, spacing * 0.4);
+  const first = Math.max(1, Math.floor((Math.hypot(nearX, nearY) - lw) / spacing));
+  const last = Math.min(first + 1500, Math.ceil((Math.hypot(farX, farY) + lw) / spacing));
+  ctx.strokeStyle = color;
+  ctx.lineWidth = lw;
+  ctx.beginPath();
+  for (let k = first; k <= last; k++) {
+    const r = k * spacing;
+    ctx.moveTo(cx + r, cy);
+    ctx.arc(cx, cy, r, 0, TAU);
+  }
+  ctx.stroke();
+}
+
+/**
+ * Paints a pattern laid out over `box` into `area`. Invalid patterns
+ * (unknown kind, zero opacity, non-positive scale) paint nothing.
+ */
+export function paintPattern(ctx: Ctx2D, pattern: Pattern | null | undefined, box: Rect, area: Rect, u: number, env: RenderEnv, pxScale = 1): void {
+  if (!pattern || typeof pattern !== 'object' || !KINDS.has(pattern.kind)) return;
+  const opacity = clamp(num(pattern.opacity, 0), 0, 1);
+  if (opacity <= 0 || !(num(pattern.scale, 0) > 0) || !(area.w > 0) || !(area.h > 0)) return;
+  const spacing = patternSpacing(pattern, u);
+  const rgb = parseColor(typeof pattern.color === 'string' ? pattern.color : '#000000');
+  const color = rgba(rgb);
+  ctx.save();
+  try {
+    ctx.globalAlpha *= opacity;
+    if (pattern.kind === 'rings') {
+      drawRings(ctx, box, area, spacing, color);
+      return;
+    }
+    const res = clamp(num(pxScale, 1), 0.1, 4);
+    const spec = tileSpec(pattern.kind, spacing, res);
+    if (!spec) return;
+    const tile = tileFor(spec, rgb, env, res);
+    if (!tile) return;
+    const pat = patternFor(ctx, tile);
+    if (!pat) return;
+    const sx = spec.pw / tile.width;
+    const sy = spec.ph / tile.height;
+    ctx.translate(box.x, box.y);
+    ctx.scale(sx, sy);
+    ctx.fillStyle = pat;
+    // Tiles are rendered at device resolution and drawn ~1:1; bilinear sampling is enough.
+    ctx.imageSmoothingQuality = 'low';
+    ctx.fillRect((area.x - box.x) / sx, (area.y - box.y) / sy, area.w / sx, area.h / sy);
+  } finally {
+    ctx.restore();
+  }
+}

package/vendor/wajha/engine/render.ts

@@ -0,0 +1,364 @@
+/**
+ * Slide composition: background, pattern, then every element in painter's
+ * order. Each element is drawn translated to its anchor, rotated about its
+ * centre and faded by its opacity, and renderSlide reports where every
+ * visible element ended up so the editor can hit-test and draw handles.
+ *
+ * Bad data never throws out of here: sizes, positions and colours are
+ * sanitised, and an element that still fails to draw is skipped so the rest
+ * of the slide renders.
+ */
+import type { DeviceElement, DeviceFrameId, FamilyId, ImageElement, ShapeElement, TextElement } from '../model/types';
+import { FAMILIES } from '../model/catalog';
+import { mirrorElement } from '../model/mirror';
+import { resolveShot, resolveText } from '../model/resolve';
+import { styleForLanguage } from '../model/typography';
+import type { Ctx2D, DeviceGeometry, ElementBox, ImageLike, RenderInput, RenderResult, RenderSlideFn } from './types';
+import { drawDevice } from './devices';
+import { paintBackground } from './background';
+import { drawShape, shapeSize } from './shapes';
+import { drawImageElement, resolveImage, type ImageSources } from './images';
+import { drawTextBlock, layoutTextBlock } from './text';
+import { clamp, DEG, num, roundedRect, transformScale } from './geometry';
+import type { PaintContext } from './paint';
+
+/** Used when neither the screenshot nor the family knows the screen shape (iPhone 6.9″). */
+const DEFAULT_SCREEN_ASPECT = 2868 / 1320;
+
+interface Scene {
+  input: RenderInput;
+  width: number;
+  height: number;
+  u: number;
+  pxScale: number;
+  pc: PaintContext;
+  sources: ImageSources;
+  result: RenderResult;
+}
+
+function resetState(ctx: Ctx2D): void {
+  ctx.globalAlpha = 1;
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.shadowColor = 'rgba(0, 0, 0, 0)';
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  ctx.lineWidth = 1;
+  ctx.lineCap = 'butt';
+  ctx.lineJoin = 'miter';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'alphabetic';
+  ctx.direction = 'ltr';
+  if (typeof ctx.setLineDash === 'function') ctx.setLineDash([]);
+  if ('filter' in ctx) ctx.filter = 'none';
+  if ('letterSpacing' in ctx) ctx.letterSpacing = '0px';
+}
+
+const elementId = (el: { id: unknown }): string => (typeof el.id === 'string' ? el.id : String(el.id ?? ''));
+
+function attempt<T>(fn: () => T, fallback: T): T {
+  try {
+    return fn();
+  } catch {
+    return fallback;
+  }
+}
+
+/** Translates to the element centre, rotates, applies opacity, draws; the caller saves/restores. */
+function place(ctx: Ctx2D, cx: number, cy: number, rotation: number, opacity: number, draw: () => void): void {
+  ctx.translate(cx, cy);
+  if (rotation) ctx.rotate(rotation * DEG);
+  ctx.globalAlpha *= opacity;
+  draw();
+}
+
+function textElement(ctx: Ctx2D, el: TextElement, scene: Scene, cx: number, ay: number, rotation: number, opacity: number): ElementBox {
+  const { input, u } = scene;
+  const raw = attempt(() => resolveText(input.slide, el.key, input.lang, input.baseLang), '');
+  const layout = layoutTextBlock(ctx, {
+    text: typeof raw === 'string' ? raw : '',
+    style: el.style && typeof el.style === 'object' ? styleForLanguage(el.style, input.typography) : el.style,
+    boxWidth: Math.max(0, num(el.width, 0) * u),
+    unit: u,
+    rtl: input.rtl === true,
+    lang: input.lang,
+  });
+  const h = layout.height;
+  // y is the top edge, centre or bottom edge of the block; boxes are always centred.
+  const cy = el.valign === 'top' ? ay + h / 2 : el.valign === 'bottom' ? ay - h / 2 : ay;
+  if (layout.overflow) scene.result.overflowingText.push(elementId(el));
+  attempt(() => place(ctx, cx, cy, rotation, opacity, () => drawTextBlock(ctx, layout, { unit: u, pxScale: scene.pxScale })), undefined);
+  return { id: elementId(el), cx, cy, w: layout.boxWidth, h, rotation };
+}
+
+function sanitizeGeometry(g: unknown, fallbackW: number, fallbackH: number): { w: number; h: number } {
+  if (g && typeof g === 'object') {
+    const o = g as Partial<DeviceGeometry>;
+    const w = num(o.width, -1);
+    const h = num(o.height, -1);
+    if (w >= 0 && h >= 0) return { w, h };
+  }
+  return { w: fallbackW, h: fallbackH };
+}
+
+/** Plain stand-in used only if the device painter fails, so the layout stays legible. */
+function drawFallbackDevice(ctx: Ctx2D, w: number, h: number, screen: ImageLike | null): void {
+  ctx.fillStyle = '#1d1d22';
+  ctx.beginPath();
+  roundedRect(ctx, -w / 2, -h / 2, w, h, w * 0.12);
+  ctx.fill();
+  const inset = w * 0.035;
+  ctx.save();
+  try {
+    ctx.beginPath();
+    roundedRect(ctx, -w / 2 + inset, -h / 2 + inset, w - 2 * inset, h - 2 * inset, w * 0.09);
+    ctx.clip();
+    ctx.fillStyle = '#3a3a42';
+    ctx.fillRect(-w / 2, -h / 2, w, h);
+    if (screen) {
+      const sw = w - 2 * inset;
+      const sh = h - 2 * inset;
+      const k = Math.max(sw / screen.width, sh / screen.height);
+      ctx.drawImage(screen, -(screen.width * k) / 2, -(screen.height * k) / 2, screen.width * k, screen.height * k);
+    }
+  } finally {
+    ctx.restore();
+  }
+}
+
+function deviceElement(ctx: Ctx2D, el: DeviceElement, index: number, scene: Scene, cx: number, cy: number, rotation: number, opacity: number): ElementBox {
+  const { input, u, sources, result } = scene;
+  const widthPx = Math.max(0, num(el.width, 0) * u);
+  const shot = attempt(() => resolveShot(input.slide, input.family, el.slot, input.lang, input.baseLang), null);
+  const assetId = typeof shot === 'string' && shot ? shot : null;
+  const known = assetId ? sources.getAssetAspect(assetId) : null;
+  const screenAspect = deviceScreenAspect(el.frame, input.family, known);
+  const image = assetId ? sources.getImage(assetId) : null;
+  let placeholder: 'mock' | 'empty' = input.placeholder === 'empty' ? 'empty' : 'mock';
+  if (!assetId) result.missingShots.push(elementId(el));
+  else if (!image) {
+    // Resolved but still decoding: a calm empty screen instead of a mock that flashes away.
+    result.pendingImages.push(elementId(el));
+    placeholder = 'empty';
+  }
+  const fallback = { w: widthPx, h: widthPx * screenAspect };
+  if (widthPx < 1) return { id: elementId(el), cx, cy, w: fallback.w, h: fallback.h, rotation };
+
+  const theme = input.theme;
+  const palette = Array.isArray(theme?.palette) ? theme.palette.filter((c): c is string => typeof c === 'string') : [];
+  const slideIndex = Math.floor(num(input.slideIndex, 0));
+  let size = fallback;
+  ctx.translate(cx, cy);
+  if (rotation) ctx.rotate(rotation * DEG);
+  ctx.globalAlpha *= opacity;
+  try {
+    const geometry = drawDevice(ctx, {
+      el,
+      widthPx,
+      unit: u,
+      screenAspect,
+      screen: image,
+      placeholder,
+      mock: { seed: mockSeed(slideIndex, index), palette, dark: theme?.mockDark === true },
+      env: input.env,
+    });
+    size = sanitizeGeometry(geometry, fallback.w, fallback.h);
+  } catch {
+    attempt(() => drawFallbackDevice(ctx, fallback.w, fallback.h, image), undefined);
+  }
+  return { id: elementId(el), cx, cy, w: size.w, h: size.h, rotation };
+}
+
+function shapeElement(ctx: Ctx2D, el: ShapeElement, scene: Scene, cx: number, cy: number, rotation: number, opacity: number): ElementBox {
+  const { w, h } = shapeSize(el, scene.u);
+  // Decoration, so on a mirrored slide its outline and fill flip too (a blob, a gradient); a picture fill keeps reading normally.
+  const flip = scene.input.mirror === true && el.fill?.type !== 'image';
+  attempt(
+    () =>
+      place(ctx, cx, cy, rotation, opacity, () => {
+        if (flip) ctx.scale(-1, 1);
+        drawShape(ctx, el, scene.u, scene.pc);
+      }),
+    undefined,
+  );
+  return { id: elementId(el), cx, cy, w, h, rotation };
+}
+
+function imageElement(ctx: Ctx2D, el: ImageElement, scene: Scene, cx: number, cy: number, rotation: number, opacity: number): ElementBox {
+  const { aspect } = resolveImage(el, scene.sources);
+  const w = Math.max(0, num(el.width, 0) * scene.u);
+  const h = w * aspect;
+  attempt(() => place(ctx, cx, cy, rotation, opacity, () => drawImageElement(ctx, el, scene.u, scene.pxScale, scene.sources)), undefined);
+  return { id: elementId(el), cx, cy, w, h, rotation };
+}
+
+/** The family whose screen each frame shows; frame "none" has no shape of its own. */
+const FRAME_FAMILY: Record<DeviceFrameId, FamilyId | null> = {
+  iphone: 'iphone',
+  ipad: 'ipad',
+  'android-phone': 'android-phone',
+  'android-tablet': 'android-tablet',
+  macbook: 'mac',
+  watch: 'watch',
+  tv: 'apple-tv',
+  vision: 'vision',
+  browser: 'mac',
+  none: null,
+};
+
+/** Frames that can lie on their side: phones and tablets. */
+const TURNABLE_FRAMES: ReadonlySet<DeviceFrameId> = new Set(['iphone', 'ipad', 'android-phone', 'android-tablet']);
+
+/** How far a screenshot's aspect may differ from its frame's before it is cropped to the frame instead. */
+const SHOT_ASPECT_TOLERANCE = 0.2;
+
+const near = (a: number, b: number) => Math.abs(a / b - 1) <= SHOT_ASPECT_TOLERANCE;
+
+/**
+ * Screen aspect (height / width) of a device element. A frame keeps its own
+ * screen shape: a MacBook stays a laptop on an iPhone slide, a phone stays a
+ * phone on a Mac slide. Phones and tablets lie on their side on landscape
+ * slides, and turn to fit a screenshot taken the other way round. A
+ * screenshot close to the frame's shape (a phone shot of a slightly
+ * different model) sets the exact aspect; any other is cover-fitted into the
+ * frame's screen. Frame "none" shows the screenshot as it is, or the slide
+ * family's screen without one.
+ */
+export function deviceScreenAspect(frame: DeviceFrameId, family: FamilyId, assetAspect: number | null): number {
+  const shot = assetAspect !== null && Number.isFinite(assetAspect) && assetAspect > 0 ? assetAspect : null;
+  const own = FRAME_FAMILY[frame] ?? null;
+  const familyAspect = num(FAMILIES[own ?? family]?.screenAspect, 0);
+  let natural = familyAspect > 0 ? familyAspect : DEFAULT_SCREEN_ASPECT;
+  const turnable = TURNABLE_FRAMES.has(frame);
+  if (turnable && FAMILIES[family]?.landscape === true) natural = 1 / natural;
+  let aspect = natural;
+  if (shot !== null && (own === null || near(shot, natural) || (turnable && near(shot, 1 / natural)))) aspect = shot;
+  return clamp(aspect, 0.05, 20);
+}
+
+/** Seed of the generated mock screen shown by the device at `elementIndex` of slide `slideIndex`. */
+export function mockSeed(slideIndex: number, elementIndex: number): number {
+  return slideIndex * 31 + elementIndex * 7 + 3;
+}
+
+/**
+ * Whether a mirrored slide flips its background. Gradients, mesh blobs and
+ * patterns do; a photo or picture does not (its text would read backwards),
+ * unless it is a panorama: mirrored slides keep a panorama's seams joined,
+ * because the store lists right-to-left screenshots from the right.
+ */
+function flipsBackground(input: RenderInput): boolean {
+  const own = input.layout?.background ?? null;
+  const fill = (own ?? input.theme?.background ?? null)?.fill;
+  return fill?.type !== 'image' || (!own && input.theme?.panorama === true);
+}
+
+/** Renders one slide into `ctx` at (0, 0, width, height). See RenderSlideFn. */
+export const renderSlide: RenderSlideFn = (ctx, input) => {
+  const result: RenderResult = { boxes: [], missingShots: [], overflowingText: [], pendingImages: [] };
+  const width = num(input?.width, 0);
+  const height = num(input?.height, 0);
+  if (!(width >= 1) || !(height >= 1)) return result;
+  const u = Math.min(width, height);
+
+  const getImage = (id: string): ImageLike | null =>
+    attempt(() => {
+      const img = input.getImage(id);
+      return img && img.width > 0 && img.height > 0 ? img : null;
+    }, null);
+  const getAssetAspect = (id: string): number | null =>
+    attempt(() => {
+      const a = input.getAssetAspect(id);
+      return typeof a === 'number' && Number.isFinite(a) && a > 0 ? a : null;
+    }, null);
+  const pxScale = transformScale(ctx);
+  const scene: Scene = {
+    input,
+    width,
+    height,
+    u,
+    pxScale,
+    pc: { env: input.env, u, getImage, pxScale },
+    sources: { getImage, getAssetAspect },
+    result,
+  };
+
+  ctx.save();
+  try {
+    resetState(ctx);
+    // Elements may hang off the slide; when several slides share one canvas (thumbnails),
+    // they must not bleed into the neighbours.
+    ctx.beginPath();
+    ctx.rect(0, 0, width, height);
+    ctx.clip();
+
+    const theme = input.theme;
+    const mirror = input.mirror === true;
+    ctx.save();
+    if (mirror && flipsBackground(input)) {
+      ctx.translate(width, 0);
+      ctx.scale(-1, 1);
+    }
+    attempt(
+      () =>
+        paintBackground(
+          ctx,
+          {
+            width,
+            height,
+            own: input.layout?.background ?? null,
+            theme: theme?.background ?? null,
+            panorama: theme?.panorama === true,
+            slideIndex: input.slideIndex,
+            slideCount: input.slideCount,
+          },
+          scene.pc,
+        ),
+      undefined,
+    );
+    ctx.restore();
+
+    const elements: unknown[] = Array.isArray(input.layout?.elements) ? input.layout.elements : [];
+    elements.forEach((item, index) => {
+      if (!item || typeof item !== 'object') return;
+      const own = item as DeviceElement | TextElement | ShapeElement | ImageElement;
+      const el = mirror ? attempt(() => mirrorElement(own), own) : own;
+      if (el.hidden === true) return;
+      const opacity = clamp(num(el.opacity, 1), 0, 1);
+      if (opacity <= 0) return;
+      const cx = num(el.x, 0.5) * width;
+      const cy = num(el.y, 0.5) * height;
+      const rotation = num(el.rotation, 0);
+      ctx.save();
+      try {
+        let box: ElementBox | null = null;
+        switch (el.kind) {
+          case 'device':
+            box = deviceElement(ctx, el, index, scene, cx, cy, rotation, opacity);
+            break;
+          case 'text':
+            box = textElement(ctx, el, scene, cx, cy, rotation, opacity);
+            break;
+          case 'shape':
+            box = shapeElement(ctx, el, scene, cx, cy, rotation, opacity);
+            break;
+          case 'image':
+            box = imageElement(ctx, el, scene, cx, cy, rotation, opacity);
+            break;
+          default:
+            box = null;
+        }
+        if (box) result.boxes.push(box);
+      } catch {
+        // Skip the element; the rest of the slide still renders.
+      } finally {
+        ctx.restore();
+      }
+    });
+  } finally {
+    ctx.restore();
+  }
+  return result;
+};