@agent-native/core 0.80.11 → 0.81.0

package/corpus/templates/design/shared/board-objects.ts

@@ -0,0 +1,288 @@
+/**
+ * Board object types shared between the frontend, actions, and agent skills.
+ *
+ * Board objects are persisted canvas primitives stored inside designs.data under
+ * the "boardObjects" key. Unlike code-layer nodes (which live inside screen HTML
+ * files), board objects float on the infinite canvas surface and are not bound
+ * to any screen iframe.
+ *
+ * The kind set mirrors DraftPrimitiveKind in MultiScreenCanvas.tsx exactly so
+ * the same shape-rendering logic (DraftPrimitiveContent / canvasPrimitiveReactStyle)
+ * can be reused for the visual output in BoardObjectLayer.
+ */
+
+export type CanvasPrimitiveKindLike =
+  | "frame"
+  | "rectangle"
+  | "ellipse"
+  | "polygon"
+  | "star"
+  | "line"
+  | "arrow"
+  | "text"
+  | "path";
+
+export interface BoardObjectEntry {
+  id: string;
+  kind: CanvasPrimitiveKindLike;
+  /**
+   * Bounding-box geometry in canvas units (same coordinate space as
+   * FrameGeometry — offset from the canvas origin before SURFACE_PADDING is
+   * applied).  z is the stacking order; rotation is in degrees (clockwise).
+   */
+  geometry: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation?: number;
+    z?: number;
+  };
+  /** CSS fill colour (background). Defaults to theme primary tint when absent. */
+  fill?: string;
+  /** CSS stroke colour (border). Defaults to theme primary stroke when absent. */
+  stroke?: string;
+  /** Stroke width in pixels. */
+  strokeWidth?: number;
+  /** Text content — only meaningful when kind === "text". */
+  text?: string;
+  /**
+   * SVG path data string — only meaningful when kind is "path", "line", or "arrow".
+   * Falls back to a pointsToPath conversion when absent and `points` is set.
+   */
+  pathData?: string;
+  /**
+   * Raw point list for polyline/polygon kinds without explicit pathData.
+   * Each entry is a canvas-space {x, y} point.
+   */
+  points?: Array<{ x: number; y: number }>;
+  /**
+   * When true the text box grows horizontally to fit its content
+   * (single-line auto-size mode).
+   */
+  autoSize?: boolean;
+  /** Human-readable label shown in the layers panel. */
+  name?: string;
+  /** ISO 8601 creation timestamp. */
+  createdAt: string;
+}
+
+// ---------------------------------------------------------------------------
+// Valid kind set for runtime validation
+// ---------------------------------------------------------------------------
+
+const VALID_KINDS = new Set<string>([
+  "frame",
+  "rectangle",
+  "ellipse",
+  "polygon",
+  "star",
+  "line",
+  "arrow",
+  "text",
+  "path",
+]);
+
+// ---------------------------------------------------------------------------
+// parseBoardObjects
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse the boardObjects map from an unknown value (e.g. from designs.data JSON).
+ *
+ * Accepts:
+ *   - A Record<string, BoardObjectEntry> already deserialized from JSON.
+ *   - A JSON string that encodes such a record.
+ *   - null / undefined / any other value → returns an empty record.
+ *
+ * Individual entries that are missing the required `id`, `kind`, or `geometry`
+ * fields are silently dropped so a partially-corrupt payload never prevents
+ * the canvas from rendering.
+ */
+export function parseBoardObjects(
+  value: unknown,
+): Record<string, BoardObjectEntry> {
+  let raw: unknown = value;
+
+  // Attempt to parse JSON strings.
+  if (typeof raw === "string") {
+    try {
+      raw = JSON.parse(raw);
+    } catch {
+      return {};
+    }
+  }
+
+  if (raw == null || typeof raw !== "object" || Array.isArray(raw)) {
+    return {};
+  }
+
+  const result: Record<string, BoardObjectEntry> = {};
+  for (const [key, entry] of Object.entries(raw as Record<string, unknown>)) {
+    if (!isValidEntry(entry)) continue;
+    result[key] = entry as BoardObjectEntry;
+  }
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// draftToBoardObjectEntry
+// ---------------------------------------------------------------------------
+
+/**
+ * Minimal structural type matching DraftPrimitive in MultiScreenCanvas.tsx.
+ * Defined here so shared/board-objects.ts stays free of React/frontend imports.
+ */
+export interface DraftPrimitiveLike {
+  id: string;
+  kind: CanvasPrimitiveKindLike;
+  geometry: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation?: number;
+    z?: number;
+  };
+  points?: Array<{ x: number; y: number }>;
+  pathData?: string;
+  text?: string;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  autoSize?: boolean;
+}
+
+/**
+ * Convert a DraftPrimitive (in-progress canvas shape) to a BoardObjectEntry
+ * ready for persistence.
+ *
+ * Called by MultiScreenCanvas when a drawn primitive is outside all frames
+ * (single-screen designs always absorb into the frame instead).
+ */
+export function draftToBoardObjectEntry(
+  draft: DraftPrimitiveLike,
+): BoardObjectEntry {
+  const entry: BoardObjectEntry = {
+    id: draft.id,
+    kind: draft.kind,
+    geometry: { ...draft.geometry },
+    createdAt: new Date().toISOString(),
+  };
+  if (draft.fill !== undefined) entry.fill = draft.fill;
+  if (draft.stroke !== undefined) entry.stroke = draft.stroke;
+  if (draft.strokeWidth !== undefined) entry.strokeWidth = draft.strokeWidth;
+  if (draft.text !== undefined) entry.text = draft.text;
+  if (draft.pathData !== undefined) entry.pathData = draft.pathData;
+  if (draft.points !== undefined) entry.points = draft.points;
+  if (draft.autoSize !== undefined) entry.autoSize = draft.autoSize;
+  return entry;
+}
+
+// ---------------------------------------------------------------------------
+// Board-object resize helpers
+// ---------------------------------------------------------------------------
+
+/** Geometry shape for resize calculations (same as BoardObjectEntry.geometry). */
+export interface BoardObjectGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation?: number;
+  z?: number;
+}
+
+/**
+ * Apply a resize delta to a board object's geometry given the resize handle
+ * (one of "nw", "ne", "se", "sw") and the mouse delta (dx, dy) in canvas units.
+ *
+ * - "nw": move top-left corner → adjusts x, y, width, height.
+ * - "ne": move top-right corner → adjusts y, width, height.
+ * - "se": move bottom-right corner → adjusts width, height.
+ * - "sw": move bottom-left corner → adjusts x, width, height.
+ *
+ * Width and height are clamped to a minimum of 4 pixels.
+ */
+export function applyBoardObjectResize(
+  origin: BoardObjectGeometry,
+  handle: string,
+  dx: number,
+  dy: number,
+): BoardObjectGeometry {
+  const MIN_SIZE = 4;
+  let { x, y, width, height } = origin;
+
+  switch (handle) {
+    case "nw":
+      x = origin.x + dx;
+      y = origin.y + dy;
+      width = Math.max(MIN_SIZE, origin.width - dx);
+      height = Math.max(MIN_SIZE, origin.height - dy);
+      // Keep anchor at bottom-right
+      if (origin.width - dx < MIN_SIZE) x = origin.x + origin.width - MIN_SIZE;
+      if (origin.height - dy < MIN_SIZE)
+        y = origin.y + origin.height - MIN_SIZE;
+      break;
+    case "ne":
+      y = origin.y + dy;
+      width = Math.max(MIN_SIZE, origin.width + dx);
+      height = Math.max(MIN_SIZE, origin.height - dy);
+      if (origin.height - dy < MIN_SIZE)
+        y = origin.y + origin.height - MIN_SIZE;
+      break;
+    case "se":
+      width = Math.max(MIN_SIZE, origin.width + dx);
+      height = Math.max(MIN_SIZE, origin.height + dy);
+      break;
+    case "sw":
+      x = origin.x + dx;
+      width = Math.max(MIN_SIZE, origin.width - dx);
+      height = Math.max(MIN_SIZE, origin.height + dy);
+      if (origin.width - dx < MIN_SIZE) x = origin.x + origin.width - MIN_SIZE;
+      break;
+    default:
+      break;
+  }
+
+  return { ...origin, x, y, width, height };
+}
+
+/**
+ * Map a resize handle string to the CSS cursor value shown while dragging.
+ */
+export function getBoardObjectResizeCursor(handle: string): string {
+  switch (handle) {
+    case "nw":
+    case "se":
+      return "nwse-resize";
+    case "ne":
+    case "sw":
+      return "nesw-resize";
+    default:
+      return "se-resize";
+  }
+}
+
+function isValidEntry(entry: unknown): entry is BoardObjectEntry {
+  if (entry == null || typeof entry !== "object" || Array.isArray(entry)) {
+    return false;
+  }
+  const e = entry as Record<string, unknown>;
+  if (typeof e["id"] !== "string" || !e["id"]) return false;
+  if (typeof e["kind"] !== "string" || !VALID_KINDS.has(e["kind"])) {
+    return false;
+  }
+  if (typeof e["createdAt"] !== "string") return false;
+  const geo = e["geometry"];
+  if (geo == null || typeof geo !== "object" || Array.isArray(geo)) {
+    return false;
+  }
+  const g = geo as Record<string, unknown>;
+  return (
+    typeof g["x"] === "number" &&
+    typeof g["y"] === "number" &&
+    typeof g["width"] === "number" &&
+    typeof g["height"] === "number"
+  );
+}

package/corpus/templates/design/shared/code-layer.ts

@@ -1659,6 +1659,17 @@ function layerNameFor(
 }
 
 function treeTypeForNode(node: CodeLayerNode): CodeLayerTreeNodeType {
+  // Canvas primitives (drawn shapes / board objects) carry their kind via
+  // data-an-primitive so the layers panel shows a true shape/text/frame icon
+  // instead of the generic code glyph. The marker wins over tag heuristics:
+  // these primitives are <div>s, which would otherwise classify as "element".
+  const primitiveKind = node.dataAttributes["data-an-primitive"];
+  if (primitiveKind) {
+    if (primitiveKind === "text") return "text";
+    if (primitiveKind === "frame") return "frame";
+    if (primitiveKind === "image") return "image";
+    return "shape";
+  }
   if (TEXT_LAYER_TAGS.has(node.tag)) return "text";
   if (IMAGE_LAYER_TAGS.has(node.tag)) return "image";
   if (SHAPE_LAYER_TAGS.has(node.tag)) return "shape";
@@ -3371,6 +3382,47 @@ export function applyVisualEdit(
   };
 }
 
+/**
+ * Attributes injected by the editor at runtime that must NOT appear in
+ * on-disk source files. These are stripped before any write-back so that
+ * the saved file stays clean and matches what a developer would author.
+ *
+ * - `data-agent-native-node-id` — stable selection id stamped by the editor.
+ * - `data-agent-native-layer-name` is intentionally kept: it is a
+ *   developer-authored attribute (the canonical layer-name hint) and is
+ *   useful in committed source.  Only ephemeral runtime stamps are removed.
+ */
+const EDITOR_ONLY_ATTRIBUTES: readonly string[] = ["data-agent-native-node-id"];
+
+/**
+ * Strip editor-only runtime attributes from an HTML string, returning clean
+ * source suitable for writing back to disk.
+ *
+ * Currently removes `data-agent-native-node-id` (and any future attributes
+ * listed in EDITOR_ONLY_ATTRIBUTES). The function operates on the raw HTML
+ * string with a regex that handles both quoted forms and unquoted values, and
+ * is safe to apply to already-clean source (idempotent).
+ *
+ * @param html  The raw HTML string, potentially containing editor stamps.
+ * @returns     A new string with all editor-only attributes removed.
+ */
+export function stripEditorOnlyAttributes(html: string): string {
+  if (!html || typeof html !== "string") return html ?? "";
+  let result = html;
+  for (const attr of EDITOR_ONLY_ATTRIBUTES) {
+    // Match the attribute with optional surrounding whitespace. The value may
+    // be double-quoted, single-quoted, or unquoted (no spaces / > chars).
+    // A leading \s+ is required so we only strip the attribute name+value pair
+    // and leave surrounding markup intact.
+    const re = new RegExp(
+      `\\s+${attr.replace(/-/g, "\\-")}\\s*=\\s*(?:"[^"]*"|'[^']*'|[^\\s"'=><\`]+)`,
+      "gi",
+    );
+    result = result.replace(re, "");
+  }
+  return result;
+}
+
 export interface MoveNodeBetweenDocumentsOptions {
   nodeId: string;
   anchorNodeId?: string;

package/corpus/templates/design/shared/motion-compiler.ts

@@ -125,6 +125,7 @@ export function compile(timeline: MotionTimeline): CompileResult {
  */
 export function parse(css: string): MotionTrack[] {
   const tracks: MotionTrack[] = [];
+  const targetByAnimationName = parseAnimationTargets(css);
   const kfRe = /@keyframes\s+(an-motion-[^\s{]+)\s*\{/g;
   let m: RegExpExecArray | null;
 
@@ -138,15 +139,33 @@ export function parse(css: string): MotionTrack[] {
     if (body === null) continue;
 
     tracks.push({
-      targetNodeId: decoded.targetNodeId,
+      targetNodeId: targetByAnimationName.get(fullName) ?? decoded.targetNodeId,
       property: decoded.property,
-      keyframes: parseKeyframeBody(body),
+      keyframes: parseKeyframeBody(body, decoded.property),
     });
   }
 
   return tracks;
 }
 
+/**
+ * Extract the CSS body from a managed `<style data-agent-native-motion>` block
+ * inside an HTML document. Returns `null` when the document has no managed block
+ * or the block is malformed.
+ */
+export function extractManagedMotionCss(html: string): string | null {
+  const openRe = /<style\b(?=[^>]*\bdata-agent-native-motion\b)[^>]*>/i;
+  const openMatch = openRe.exec(html);
+  if (!openMatch) return null;
+
+  const bodyStart = openMatch.index + openMatch[0].length;
+  const afterOpen = html.slice(bodyStart);
+  const closeMatch = /<\s*\/\s*style\b[^>]*>/i.exec(afterOpen);
+  if (!closeMatch) return null;
+
+  return afterOpen.slice(0, closeMatch.index).trim();
+}
+
 /**
  * Return the djb2 hash of a CSS string — useful for verifying stored
  * `compiled_hash` values without re-compiling a full timeline.
@@ -292,6 +311,30 @@ function escAttr(value: string): string {
   return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
 }
 
+function unescAttr(value: string): string {
+  return value.replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+}
+
+function parseAnimationTargets(css: string): Map<string, string> {
+  const targets = new Map<string, string>();
+  const ruleRe =
+    /\[data-agent-native-node-id="((?:\\.|[^"\\])*)"\]\s*\{([^}]*)\}/g;
+  let m: RegExpExecArray | null;
+
+  while ((m = ruleRe.exec(css)) !== null) {
+    const targetNodeId = unescAttr(m[1]);
+    const body = m[2];
+    const nameMatch = body.match(/animation-name\s*:\s*([^;]+)/);
+    if (!nameMatch) continue;
+    for (const name of nameMatch[1].split(",")) {
+      const trimmed = name.trim();
+      if (trimmed) targets.set(trimmed, targetNodeId);
+    }
+  }
+
+  return targets;
+}
+
 /**
  * Find the content of the CSS block that starts just after position `start`
  * (i.e., just after the opening `{`). Returns `null` on unbalanced braces.
@@ -309,10 +352,14 @@ function extractBlock(css: string, start: number): string | null {
 }
 
 /** Parse the interior of a `@keyframes` block into `MotionKeyframe[]`. */
-function parseKeyframeBody(body: string): MotionKeyframe[] {
+function parseKeyframeBody(body: string, property: string): MotionKeyframe[] {
   const frames: MotionKeyframe[] = [];
   const stopRe = /([\d.]+%|from|to)\s*\{([^}]*)\}/g;
   let m: RegExpExecArray | null;
+  const propRe = new RegExp(
+    `^\\s*${escapeRegExp(property)}\\s*:\\s*([^;]+)`,
+    "m",
+  );
 
   while ((m = stopRe.exec(body)) !== null) {
     const pctStr = m[1];
@@ -323,10 +370,10 @@ function parseKeyframeBody(body: string): MotionKeyframe[] {
     const easeMatch = content.match(/animation-timing-function\s*:\s*([^;]+)/);
     const ease = easeMatch ? (easeMatch[1].trim() as MotionEase) : undefined;
 
-    // Extract the first non-timing property as the animated value.
-    const propMatch = content.match(
-      /^(?!.*animation-timing-function)[a-zA-Z-]+\s*:\s*([^;]+)/m,
-    );
+    // Extract the animated property's value. The compiler emits the same
+    // property for every stop, so parsing by the decoded property avoids
+    // confusing `animation-timing-function` with the animated value.
+    const propMatch = content.match(propRe);
     const value = propMatch ? propMatch[1].trim() : "";
 
     frames.push({ t, value, ...(ease !== undefined ? { ease } : {}) });
@@ -335,6 +382,10 @@ function parseKeyframeBody(body: string): MotionKeyframe[] {
   return frames;
 }
 
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
 /**
  * djb2 string hash — deterministic, no crypto dependency.
  * Returns a 32-bit unsigned integer as a decimal string.

package/corpus/templates/design/shared/motion-timeline.ts

@@ -138,8 +138,8 @@ export const MOTION_PROPERTY_PRESETS: MotionPropertyPreset[] = [
 /**
  * Build a brand-new {@link MotionTrack} for a target node + property, seeded
  * with two keyframes (start/end) so it is immediately valid for both the live
- * preview bridge and the `apply-motion-edit` "Write to CSS" commit. Used by the
- * MotionDock "create first track" path.
+ * preview bridge and the `apply-motion-edit` managed CSS persist path. Used by
+ * the MotionDock "create first track" path.
  *
  * When `preset` is omitted, a neutral 0 → 1 opacity-style pair is used so the
  * track still compiles; callers normally pass a {@link MotionPropertyPreset}.

package/corpus/templates/design/tsconfig.json

@@ -17,5 +17,6 @@
     "react-router.config.ts",
     ".react-router/types/**/*",
     ".generated/**/*"
-  ]
+  ],
+  "exclude": ["node_modules", "dist", "app/**/*.bridge.ts"]
 }

package/corpus/templates/slides/AGENTS.md

@@ -54,6 +54,15 @@ extending the editor's save path, enqueue a granular op (`patch-slide`,
 - `navigate` moves the UI to decks, slides, imports, and exports.
 - Use app actions for full deck/slide data instead of relying on ambient context.
 
+## Export Behavior
+
+- Browser PowerPoint export uses the rendered slide DOM to generate native,
+  editable PPTX text/shapes/images. Do not replace it with full-slide images
+  unless the user explicitly asks for non-editable visual snapshots.
+- Google Slides export is a PPTX import workflow: generate the same editable
+  PPTX and have the user import it into Google Slides. Creating a native Google
+  Slides file directly requires a separate Google Slides API batchUpdate path.
+
 ## Skills
 
 Read the relevant skill before deeper work:

package/corpus/templates/slides/app/components/editor/EditorToolbar.tsx

@@ -129,6 +129,8 @@ interface EditorToolbarProps {
   onDuplicateDeck?: () => void;
   /** Export the deck as PDF */
   onExportPdf?: () => void;
+  /** Export the deck as PPTX */
+  onExportPptx?: () => Promise<void> | void;
   /** Active deck aspect ratio (defaults to 16:9 when omitted) */
   aspectRatio?: AspectRatio;
   /** Change the deck's aspect ratio */
@@ -251,6 +253,7 @@ export default function EditorToolbar({
   onTogglePinMode,
   onDuplicateDeck,
   onExportPdf,
+  onExportPptx,
   aspectRatio,
   onSetAspectRatio,
   designSystemTitle,
@@ -929,6 +932,7 @@ graph TD
           deckTitle={deckTitle}
           onDuplicate={onDuplicateDeck ?? (() => {})}
           onExportPdf={onExportPdf ?? (() => {})}
+          onExportPptx={onExportPptx ?? (() => {})}
         />
       </div>
 

package/corpus/templates/slides/app/components/editor/ExportMenu.tsx

@@ -23,6 +23,7 @@ interface ExportMenuProps {
   deckTitle: string;
   onDuplicate: () => void;
   onExportPdf: () => void;
+  onExportPptx: () => Promise<void> | void;
   onShareLink?: () => void;
   onShareTeam?: () => void;
 }
@@ -32,6 +33,7 @@ export function ExportMenu({
   deckTitle,
   onDuplicate,
   onExportPdf,
+  onExportPptx,
   onShareLink,
   onShareTeam,
 }: ExportMenuProps) {
@@ -66,30 +68,9 @@ export function ExportMenu({
     }
   };
 
-  const fetchPptxExport = async () => {
-    const res = await fetch(`${appBasePath()}/api/exports/pptx`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ deckId }),
-    });
-    if (!res.ok) {
-      throw new Error(
-        await readErrorMessage(res, t("editorExport.pptxFailed")),
-      );
-    }
-    return {
-      blob: await res.blob(),
-      filename: filenameFromDisposition(
-        res.headers.get("content-disposition"),
-        ".pptx",
-      ),
-    };
-  };
-
   const handleExportPptx = async () => {
     try {
-      const { blob, filename } = await fetchPptxExport();
-      triggerBlobDownload(blob, filename);
+      await onExportPptx();
     } catch (err) {
       console.error("Export failed:", err);
       toast({
@@ -105,8 +86,7 @@ export function ExportMenu({
 
   const handleExportGoogleSlides = async () => {
     try {
-      const { blob, filename } = await fetchPptxExport();
-      triggerBlobDownload(blob, filename);
+      await onExportPptx();
       toast({
         title: t("editorExport.googleSlidesDownloaded"),
         description: t("editorExport.googleSlidesImportHint"),

package/corpus/templates/slides/app/lib/export-pdf-client.ts

@@ -20,7 +20,7 @@ import { type AspectRatio, getAspectRatioDims } from "./aspect-ratios";
  * setting the attribute and re-assigning the same src. This is the root
  * cause of the "blank images in exported PDF" bug Rochkind reported.
  */
-async function preloadImagesWithCors(root: HTMLElement): Promise<void> {
+export async function preloadImagesWithCors(root: HTMLElement): Promise<void> {
   const imgs = Array.from(root.querySelectorAll<HTMLImageElement>("img"));
   await Promise.all(
     imgs.map(async (img) => {
@@ -60,6 +60,33 @@ async function preloadImagesWithCors(root: HTMLElement): Promise<void> {
   );
 }
 
+export function findSlideExportSource(
+  slideId: string,
+  slideIndex: number,
+  slideCount: number,
+): HTMLElement {
+  const candidates = Array.from(
+    document.querySelectorAll<HTMLElement>(
+      `[data-slide-canvas="${CSS.escape(slideId)}"]`,
+    ),
+  );
+  // Don't silently drop missing slides — a collapsed sidebar (mobile
+  // default) would otherwise produce a partial export with no warning.
+  if (candidates.length === 0) {
+    throw new Error(
+      `Slide ${slideIndex + 1} of ${slideCount} is not currently rendered. Open the slide sidebar and try again.`,
+    );
+  }
+
+  // A given slide can appear multiple times (sidebar thumbnail + active
+  // editor canvas); pick the one with the largest natural width so we
+  // capture full-resolution pixels even when the visible copy is scaled
+  // down via CSS transform.
+  return candidates.reduce((best, el) =>
+    el.offsetWidth > best.offsetWidth ? el : best,
+  );
+}
+
 export async function exportDeckAsPdf(
   deckTitle: string,
   slideIds: string[],
@@ -99,25 +126,7 @@ export async function exportDeckAsPdf(
 
   for (let i = 0; i < slideIds.length; i++) {
     const slideId = slideIds[i];
-    // A given slide can appear multiple times (sidebar thumbnail + active
-    // editor canvas); pick the one with the largest natural width so we
-    // capture full-resolution pixels even when the visible copy is scaled
-    // down via CSS transform.
-    const candidates = Array.from(
-      document.querySelectorAll<HTMLElement>(
-        `[data-slide-canvas="${CSS.escape(slideId)}"]`,
-      ),
-    );
-    // Don't silently drop missing slides — a collapsed sidebar (mobile
-    // default) would otherwise produce a partial PDF with no warning.
-    if (candidates.length === 0) {
-      throw new Error(
-        `Slide ${i + 1} of ${slideIds.length} is not currently rendered. Open the slide sidebar and try again.`,
-      );
-    }
-    const source = candidates.reduce((best, el) =>
-      el.offsetWidth > best.offsetWidth ? el : best,
-    );
+    const source = findSlideExportSource(slideId, i, slideIds.length);
 
     // Force CORS-enabled re-fetch on every cross-origin <img> before
     // capture — otherwise the canvas tainting check inside modern-screenshot