slides-grab 1.2.0 → 1.2.1

package/skills/slides-grab-design/SKILL.md

@@ -25,20 +25,28 @@ Generate high-quality `slide-XX.html` files in the selected slides workspace (`s
 1. Read approved `slide-outline.md`.
 2. Before generating slides, write a quick **visual thesis** (mood/material/energy), a **content plan** (opener → support/proof → detail/story → close/CTA), and the core design tokens (background, surface, text, muted, accent + display/headline/body/caption roles).
 3. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
-4. If the deck needs a complex diagram (architecture, workflows, relationship maps, multi-node concepts), create the diagram in `tldraw`, export it with `slides-grab tldraw`, and treat the result as a local slide asset under `<slides-dir>/assets/`.
-5. Run `slides-grab validate --slides-dir <path>` after generation or edits.
-6. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
-7. Run `slides-grab build-viewer --slides-dir <path>` only after validation passes.
-8. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.
-9. Iterate on user feedback by editing only requested slide files, then re-run validation and rebuild the viewer.
-10. Keep revising until user approves conversion stage.
+4. When a slide explicitly needs bespoke imagery, when the user asks for an image, or when stronger imagery would materially improve the slide, prefer `slides-grab image --prompt "<prompt>" --slides-dir <path>` to generate a local asset with Nano Banana Pro and save it under `<slides-dir>/assets/`.
+5. If the deck needs a complex diagram (architecture, workflows, relationship maps, multi-node concepts), create the diagram in `tldraw`, export it with `slides-grab tldraw`, and treat the result as a local slide asset under `<slides-dir>/assets/`.
+6. If the slide needs a local video, store the video under `<slides-dir>/assets/`, reference it as `./assets/<file>`, and prefer a `poster="./assets/<file>"` thumbnail so PDF export uses a stable still image.
+7. If the source video starts on YouTube or another supported page, use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly if needed) to download it into `<slides-dir>/assets/` before saving the slide HTML.
+8. Run `slides-grab validate --slides-dir <path>` after generation or edits.
+9. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.
+10. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.
+11. Launch the interactive editor for visual review: `slides-grab edit --slides-dir <path>`
+12. Iterate on user feedback by editing only requested slide files, then re-run validation after each edit round.
+13. When the user confirms editing is complete, suggest: build the viewer (`slides-grab build-viewer --slides-dir <path>`) for a final read-only preview, or proceed to export (PDF/PPTX).
+14. Keep revising until user approves conversion stage.
 
 ## Rules
 - Keep slide size 720pt x 405pt.
 - Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`).
-- Put local images under `<slides-dir>/assets/` and reference them as `./assets/<file>`.
+- Put local images and videos under `<slides-dir>/assets/` and reference them as `./assets/<file>`.
 - Allow `data:` URLs when the slide must be fully self-contained.
 - Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.
+- Prefer `slides-grab image` with Nano Banana Pro for bespoke slide imagery before reaching for remote URLs.
+- If `GOOGLE_API_KEY` (or `GEMINI_API_KEY`) is unavailable or the Nano Banana API fails, ask the user for a Google API key or fall back to web search + download into `<slides-dir>/assets/`.
+- Prefer local videos with a `poster="./assets/<file>"` thumbnail so PDF export uses the still image.
+- Use `slides-grab fetch-video` or `yt-dlp` to pull supported web videos into `<slides-dir>/assets/` before saving slide HTML.
 - Prefer `<img>` for slide imagery and `data-image-placeholder` when no final asset exists.
 - Default to one job per slide, one dominant visual anchor, and copy that scans in seconds.
 - Treat opening slides and section dividers like posters, not dashboards.

package/skills/slides-grab-design/references/design-rules.md

@@ -6,6 +6,8 @@ These are the packaged design rules for installable `slides-grab` skills.
 - Validate slides: `slides-grab validate --slides-dir <path>`
 - Build review viewer: `slides-grab build-viewer --slides-dir <path>`
 - Launch editor: `slides-grab edit --slides-dir <path>`
+- Generate a bespoke image asset: `slides-grab image --prompt "<prompt>" --slides-dir <path>`
+- Download a web video into slide assets: `slides-grab fetch-video --url <youtube-url> --slides-dir <path>`
 - Render `tldraw` diagrams: `slides-grab tldraw --input <path> --output <path>`
 
 ## Slide spec
@@ -18,7 +20,11 @@ These are the packaged design rules for installable `slides-grab` skills.
 ## Asset rules
 - Store deck-local assets in `<slides-dir>/assets/`
 - Reference deck-local assets as `./assets/<file>`
+- Use `slides-grab image --prompt "<prompt>" --slides-dir <path>` with Nano Banana Pro for bespoke generated images when helpful
 - If an image comes from the web, download it into `<slides-dir>/assets/` before referencing it
+- If a video comes from YouTube or another supported page, use `slides-grab fetch-video` (or `yt-dlp` directly) to download it into `<slides-dir>/assets/` before referencing it
+- Keep local videos and their poster thumbnails together under `<slides-dir>/assets/`
+- If `GOOGLE_API_KEY` / `GEMINI_API_KEY` is unavailable, ask the user for a Google API key or fall back to web search + download
 - Use `tldraw`-generated local assets for complex diagrams when possible
 - Allow `data:` URLs only when the slide must be fully self-contained
 - Do not leave remote `http(s)://` image URLs in saved slide HTML
@@ -49,6 +55,7 @@ These are the packaged design rules for installable `slides-grab` skills.
 
 ## Review loop
 - Generate or edit only the needed slide files.
+- Prefer `slides-grab image` before remote image sourcing when the slide needs bespoke imagery.
 - Prefer `tldraw` for complex diagrams instead of hand-building dense diagram geometry in HTML/CSS.
 - Re-run validation after every generation/edit pass.
 - Rebuild the viewer only after validation passes.

package/skills/slides-grab-design/references/detailed-design-rules.md

@@ -7,11 +7,15 @@
 
 ### 4. Image Usage Rules (Local Asset / Data URL / Remote URL / Placeholder)
 - Always include alt on img tags.
-- Use `./assets/<file>` as the default image contract for slide HTML.
+- Use `./assets/<file>` as the default image and video contract for slide HTML.
 - Keep slide assets in `<slides-dir>/assets/`.
 - Use `tldraw`-generated assets for complex diagrams whenever possible.
+- Use `slides-grab image --prompt "<prompt>" --slides-dir <path>` with Nano Banana Pro when a slide needs bespoke generated imagery.
 - `data:` URLs are allowed for fully self-contained slides.
 - Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.
+- Store local videos under `<slides-dir>/assets/`, reference them as `./assets/<file>`, and prefer `poster="./assets/<file>"` for export-friendly thumbnails.
+- If a video starts on YouTube or another supported page, use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly if needed) before saving the slide HTML.
+- If `GOOGLE_API_KEY` or `GEMINI_API_KEY` is unavailable, or the Nano Banana API fails, ask the user for a Google API key or fall back to web search + download into `<slides-dir>/assets/`.
 - Do not use absolute filesystem paths in slide HTML.
 - Do not use non-body `background-image` for content imagery; use `<img>` instead.
 - Use `data-image-placeholder` to reserve space when no image is available yet.
@@ -24,7 +28,9 @@
 - After slide generation or edits, run `slides-grab validate --slides-dir <path>`.
 - After validation passes, run `slides-grab build-viewer --slides-dir <path>`.
 - Edit only the relevant HTML file during revision loops.
+- When the brief explicitly calls for an image, the user requests one, or the slide clearly benefits from it, prefer `slides-grab image` before falling back to remote image sourcing.
 - Prefer `slides-grab tldraw` + local exported assets for architecture, workflow, relationship, and other complex diagrams.
+- Keep local videos and their poster thumbnails together under `<slides-dir>/assets/`.
 - Never start PPTX conversion without explicit approval.
 - Never forget to build the viewer after slide changes.
 - Do not persist runtime-only editor/viewer injections in saved slide HTML.
@@ -32,6 +38,6 @@
 ## Important Notes
 - CSS gradients are not supported in PowerPoint conversion; replace them with background images.
 - Always include the Pretendard CDN link.
-- Use `./assets/<file>` from each `slide-XX.html` and avoid absolute filesystem paths.
+- Use `./assets/<file>` from each `slide-XX.html` for local images and videos, and avoid absolute filesystem paths.
 - Always include `#` prefix in CSS colors.
 - Never place text directly in `div`/`span`.

package/src/editor/codex-edit.js

@@ -37,19 +37,24 @@ const EDITOR_PPT_DESIGN_DUPLICATE_PATTERNS = [
 const EDITOR_PPT_DESIGN_SKILL_FALLBACK = [
   '## Workflow',
   '1. Read approved `slide-outline.md` or the existing slide before editing.',
-  '2. Run `slides-grab validate --slides-dir <path>` after generation or edits.',
-  '3. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.',
-  '4. Run `slides-grab build-viewer --slides-dir <path>` only after validation passes.',
-  '5. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.',
-  '6. Iterate on user feedback by editing only requested slide files, then re-run validation and rebuild the viewer.',
-  '7. Keep revising until user approves conversion stage.',
+  '2. When a slide needs bespoke imagery, prefer `slides-grab image --prompt "<prompt>" --slides-dir <path>` so Nano Banana Pro saves a local asset under `<slides-dir>/assets/`.',
+  '3. Run `slides-grab validate --slides-dir <path>` after generation or edits.',
+  '4. If validation fails, automatically fix the source slide HTML/CSS and re-run validation until it passes.',
+  '5. Run `slides-grab build-viewer --slides-dir <path>` only after validation passes.',
+  '6. Run the slide litmus check from `references/beautiful-slide-defaults.md` before presenting the deck for review.',
+  '7. Iterate on user feedback by editing only requested slide files, then re-run validation and rebuild the viewer.',
+  '8. Keep revising until user approves conversion stage.',
   '',
   '## Rules',
   '- Keep slide size 720pt x 405pt.',
   '- Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`).',
-  '- Put local images under `<slides-dir>/assets/` and reference them as `./assets/<file>`.',
+  '- Put local images and videos under `<slides-dir>/assets/` and reference them as `./assets/<file>`.',
   '- Allow `data:` URLs when the slide must be fully self-contained.',
   '- Do not leave remote `http(s)://` image URLs in saved slide HTML; download source images into `<slides-dir>/assets/` and reference them as `./assets/<file>`.',
+  '- For local videos, use `<video src="./assets/<file>">` and prefer `poster="./assets/<file>"` so PDF export can use a thumbnail.',
+  '- If a video starts on YouTube or another supported page, use `slides-grab fetch-video --url <youtube-url> --slides-dir <path>` (or `yt-dlp` directly if needed) to download it into `<slides-dir>/assets/` before saving the slide HTML.',
+  '- Prefer `slides-grab image` with Nano Banana Pro for bespoke imagery when it improves the slide.',
+  '- If `GOOGLE_API_KEY` or `GEMINI_API_KEY` is unavailable, or the Nano Banana API fails, ask the user for a Google API key or fall back to web search + download into `<slides-dir>/assets/`.',
   '- Prefer `<img>` for slide imagery and `data-image-placeholder` when no final asset exists.',
   '- Do not present slides for review until `slides-grab validate --slides-dir <path>` passes.',
   '- Do not start conversion before approval.',
@@ -65,10 +70,14 @@ const DETAILED_DESIGN_SKILL_FALLBACK = [
   '',
   '### 4. Image Usage Rules (Local Asset / Data URL / Remote URL / Placeholder)',
   '- Always include alt on img tags.',
-  '- Use ./assets/<file> as the default image contract for slide HTML.',
+  '- Use ./assets/<file> as the default image and video contract for slide HTML.',
   '- Keep slide assets in <slides-dir>/assets/.',
+  '- Use `slides-grab image --prompt "<prompt>" --slides-dir <path>` with Nano Banana Pro when the slide needs bespoke imagery.',
   '- data: URLs are allowed for fully self-contained slides.',
   '- Do not leave remote http(s):// image URLs in saved slide HTML; download source images into <slides-dir>/assets/ and reference them as ./assets/<file>.',
+  '- Store local videos under <slides-dir>/assets/, reference them as ./assets/<file>, and prefer poster images under ./assets/ for PDF export.',
+  '- If a video starts on YouTube or another supported page, use slides-grab fetch-video --url <youtube-url> --slides-dir <path> (or yt-dlp directly if needed) before saving slide HTML.',
+  '- If GOOGLE_API_KEY or GEMINI_API_KEY is unavailable, or the Nano Banana API fails, ask the user for a Google API key or fall back to web search + download into <slides-dir>/assets/.',
   '- Do not use absolute filesystem paths in slide HTML.',
   '- Do not use non-body background-image for content imagery; use <img> instead.',
   '- Use data-image-placeholder to reserve space when no image is available yet.',
@@ -80,13 +89,14 @@ const DETAILED_DESIGN_SKILL_FALLBACK = [
   '## Workflow (Stage 2: Design + Human Review)',
   '- After slide generation or edits, run slides-grab build-viewer --slides-dir <path>.',
   '- Edit only the relevant HTML file during revision loops.',
+  '- Prefer slides-grab image before remote image sourcing when a slide explicitly needs bespoke imagery.',
   '- Never start PPTX conversion without explicit approval.',
   '- Never forget to rebuild the viewer after slide changes.',
   '',
   '## Important Notes',
   '- CSS gradients are not supported in PowerPoint conversion; replace them with background images.',
   '- Always include the Pretendard CDN link.',
-  '- Use ./assets/<file> from each slide-XX.html and avoid absolute filesystem paths.',
+  '- Use ./assets/<file> from each slide-XX.html for local images and videos, and avoid absolute filesystem paths.',
   '- Always include # prefix in CSS colors.',
   '- Never place text directly in div/span.',
 ].join('\n');
@@ -396,8 +406,11 @@ export function buildCodexEditPrompt({ slideFile, slidePath, userPrompt, selecti
     '- Keep existing structure/content unless the request requires a change.',
     '- Keep slide dimensions at 720pt x 405pt.',
     '- Keep text in semantic tags (<p>, <h1>-<h6>, <ul>, <ol>, <li>).',
-    '- You may add or update supporting files required for the requested slide, including local assets under <slides-dir>/assets/ and tldraw source/export files used to generate those assets.',
+    '- You may add or update supporting files required for the requested slide, including local images and videos under <slides-dir>/assets/ and tldraw source/export files used to generate those assets.',
+    '- When the request needs bespoke imagery, prefer `slides-grab image --prompt "<prompt>" --slides-dir <path>` so Nano Banana Pro saves the asset under <slides-dir>/assets/.',
+    '- If GOOGLE_API_KEY or GEMINI_API_KEY is unavailable, or the Nano Banana API fails, ask the user for a Google API key or fall back to web search + download into <slides-dir>/assets/.',
     '- If you create or update a supporting asset, store it under <slides-dir>/assets/ and reference it from the requested slide as ./assets/<file>.',
+    '- If you need a web-hosted video, download it into <slides-dir>/assets/ first with slides-grab fetch-video --url <youtube-url> --slides-dir <path> (or yt-dlp directly if needed), then reference only the local file.',
     '- Keep local assets under ./assets/ and preserve portable relative paths.',
     '- Do not modify unrelated assets, shared resources, or generated files that are not required for the requested slide.',
     '- Do not persist runtime-only editor/viewer injections such as <base>, debug scripts, or viewer wrapper markup into the slide file.',

package/src/image-contract.js

@@ -6,6 +6,27 @@ const CSS_URL_RE = /url\(\s*(['"]?)(.*?)\1\s*\)/gi;
 
 export const LOCAL_ASSET_PREFIX = './assets/';
 
+const ASSET_CONTRACT_RULES = {
+  image: {
+    label: 'image',
+    remoteCode: 'remote-image-url',
+    remoteInsecureCode: 'remote-image-url-insecure',
+    absoluteCode: 'absolute-filesystem-image-path',
+    rootRelativeCode: 'root-relative-image-path',
+    otherSchemeCode: 'unsupported-image-url-scheme',
+    noncanonicalCode: 'noncanonical-relative-image-path',
+  },
+  video: {
+    label: 'video',
+    remoteCode: 'remote-video-url',
+    remoteInsecureCode: 'remote-video-url-insecure',
+    absoluteCode: 'absolute-filesystem-video-path',
+    rootRelativeCode: 'root-relative-video-path',
+    otherSchemeCode: 'unsupported-video-url-scheme',
+    noncanonicalCode: 'noncanonical-relative-video-path',
+  },
+};
+
 export function looksLikeAbsoluteFilesystemPath(value) {
   return ABSOLUTE_FILESYSTEM_PATH_RE.test((value || '').trim());
 }
@@ -53,7 +74,9 @@ function injectIntoHead(html, snippet) {
   return `${snippet}\n${html}`;
 }
 
-export function buildImageContractReport({ slideFile, sources = [] }) {
+function buildAssetContractReport({ slideFile, sources = [], assetType = 'image' }) {
+  const rules = ASSET_CONTRACT_RULES[assetType] || ASSET_CONTRACT_RULES.image;
+  const { label } = rules;
   const issues = [];
 
   for (const entry of sources) {
@@ -67,8 +90,8 @@ export function buildImageContractReport({ slideFile, sources = [] }) {
     if (classification.kind === 'remote-url') {
       issues.push({
         severity: 'critical',
-        code: 'remote-image-url',
-        message: 'Remote image URLs are unsupported in saved slide HTML. Download the image into ./assets/<file> instead.',
+        code: rules.remoteCode,
+        message: `Remote ${label} URLs are unsupported in saved slide HTML. Download the ${label} into ./assets/<file> instead.`,
         slide: slideFile,
         ...entry,
       });
@@ -78,8 +101,8 @@ export function buildImageContractReport({ slideFile, sources = [] }) {
     if (classification.kind === 'remote-url-insecure') {
       issues.push({
         severity: 'critical',
-        code: 'remote-image-url-insecure',
-        message: 'Remote http:// image URLs are unsupported in saved slide HTML. Download the image into ./assets/<file> instead.',
+        code: rules.remoteInsecureCode,
+        message: `Remote http:// ${label} URLs are unsupported in saved slide HTML. Download the ${label} into ./assets/<file> instead.`,
         slide: slideFile,
         ...entry,
       });
@@ -89,8 +112,8 @@ export function buildImageContractReport({ slideFile, sources = [] }) {
     if (classification.kind === 'absolute-filesystem-path') {
       issues.push({
         severity: 'critical',
-        code: 'absolute-filesystem-image-path',
-        message: 'Absolute filesystem paths are unsupported. Use ./assets/<file> instead.',
+        code: rules.absoluteCode,
+        message: `Absolute filesystem ${label} paths are unsupported. Use ./assets/<file> instead.`,
         slide: slideFile,
         ...entry,
       });
@@ -100,8 +123,19 @@ export function buildImageContractReport({ slideFile, sources = [] }) {
     if (classification.kind === 'root-relative-path') {
       issues.push({
         severity: 'critical',
-        code: 'root-relative-image-path',
-        message: 'Root-relative image paths are unsupported. Use ./assets/<file> instead.',
+        code: rules.rootRelativeCode,
+        message: `Root-relative ${label} paths are unsupported. Use ./assets/<file> instead.`,
+        slide: slideFile,
+        ...entry,
+      });
+      continue;
+    }
+
+    if (classification.kind === 'other-scheme' && rules.otherSchemeCode) {
+      issues.push({
+        severity: 'critical',
+        code: rules.otherSchemeCode,
+        message: `Non-file URL schemes for ${label} assets are unsupported in saved slide HTML. Download the ${label} into ./assets/<file> instead.`,
         slide: slideFile,
         ...entry,
       });
@@ -111,8 +145,8 @@ export function buildImageContractReport({ slideFile, sources = [] }) {
     if (classification.kind === 'noncanonical-relative-path') {
       issues.push({
         severity: 'warning',
-        code: 'noncanonical-relative-image-path',
-        message: 'Use ./assets/<file> for portable local assets.',
+        code: rules.noncanonicalCode,
+        message: `Use ./assets/<file> for portable local ${label} assets.`,
         slide: slideFile,
         ...entry,
       });
@@ -122,6 +156,14 @@ export function buildImageContractReport({ slideFile, sources = [] }) {
   return issues;
 }
 
+export function buildImageContractReport({ slideFile, sources = [] }) {
+  return buildAssetContractReport({ slideFile, sources, assetType: 'image' });
+}
+
+export function buildVideoContractReport({ slideFile, sources = [] }) {
+  return buildAssetContractReport({ slideFile, sources, assetType: 'video' });
+}
+
 export function buildSlideRuntimeHtml(html, { baseHref, slideFile }) {
   const snippets = [];
 
@@ -134,6 +176,7 @@ export function buildSlideRuntimeHtml(html, { baseHref, slideFile }) {
   const slideFile = ${JSON.stringify(slideFile)};
   const localAssetPrefix = ${JSON.stringify(LOCAL_ASSET_PREFIX)};
   const absolutePathRe = ${ABSOLUTE_FILESYSTEM_PATH_RE.toString()};
+  const schemeRe = ${SCHEME_RE.toString()};
   const prefix = '[slides-grab:image]';
 
   function describeElement(element) {
@@ -166,36 +209,100 @@ export function buildSlideRuntimeHtml(html, { baseHref, slideFile }) {
     console.error(prefix + ' ' + slideFile + ': ' + message, detail);
   }
 
+  function validateAssetSource(kind, source, { allowEmpty = true, onNoncanonical = 'warn' } = {}) {
+    const value = (source || '').trim();
+    if (!value) {
+      return allowEmpty;
+    }
+    if (value.startsWith('data:')) {
+      return true;
+    }
+    if (value.startsWith('https://')) {
+      fail('remote ' + kind + ' URL is unsupported in saved slides; download it into ./assets/<file>', { src: value });
+      return false;
+    }
+    if (value.startsWith('http://')) {
+      fail('remote http:// ' + kind + ' URL is unsupported in saved slides; download it into ./assets/<file>', { src: value });
+      return false;
+    }
+    if (absolutePathRe.test(value) || value.startsWith('/')) {
+      fail('non-portable ' + kind + ' path is unsupported', { src: value });
+      return false;
+    }
+    if (schemeRe.test(value)) {
+      fail('unsupported ' + kind + ' URL scheme in saved slides; download it into ./assets/<file>', { src: value });
+      return false;
+    }
+    if (!value.startsWith(localAssetPrefix)) {
+      const report = onNoncanonical === 'fail' ? fail : warn;
+      report('noncanonical local ' + kind + ' path should use ./assets/<file>', { src: value });
+    }
+    return true;
+  }
+
+  function getVideoSources(video) {
+    const sources = [];
+    const directSrc = (video.getAttribute('src') || '').trim();
+    if (directSrc) {
+      sources.push(directSrc);
+    }
+    for (const source of video.querySelectorAll('source[src]')) {
+      const src = (source.getAttribute('src') || '').trim();
+      if (src) {
+        sources.push(src);
+      }
+    }
+    return sources;
+  }
+
   window.addEventListener('error', (event) => {
     const target = event.target;
-    if (!(target instanceof HTMLImageElement)) return;
-    const src = (target.getAttribute('src') || target.currentSrc || '').trim();
-    if (!src || src.startsWith('data:')) return;
-    if (src.startsWith(localAssetPrefix)) {
-      fail('missing local asset', { src });
+    if (target instanceof HTMLImageElement) {
+      const src = (target.getAttribute('src') || target.currentSrc || '').trim();
+      if (!src || src.startsWith('data:')) return;
+      if (src.startsWith(localAssetPrefix)) {
+        fail('missing local asset', { src });
+        return;
+      }
+      fail('image failed to load', { src });
       return;
     }
-    fail('image failed to load', { src });
+
+    if (target instanceof HTMLVideoElement) {
+      const sources = getVideoSources(target);
+      if (sources.some((src) => src.startsWith(localAssetPrefix))) {
+        fail('missing local video asset', { sources });
+        return;
+      }
+      fail('video failed to load', { sources });
+      return;
+    }
+
+    if (target instanceof HTMLSourceElement && target.parentElement instanceof HTMLVideoElement) {
+      const src = (target.getAttribute('src') || '').trim();
+      if (!src) return;
+      if (src.startsWith(localAssetPrefix)) {
+        fail('missing local video asset', { src });
+        return;
+      }
+      fail('video source failed to load', { src });
+    }
   }, true);
 
   window.addEventListener('DOMContentLoaded', () => {
     for (const image of document.querySelectorAll('img[src]')) {
       const src = (image.getAttribute('src') || '').trim();
-      if (!src || src.startsWith('data:')) continue;
-      if (src.startsWith('https://')) {
-        fail('remote image URL is unsupported in saved slides; download it into ./assets/<file>', { src });
-        continue;
-      }
-      if (src.startsWith('http://')) {
-        fail('remote http:// image URL is unsupported in saved slides; download it into ./assets/<file>', { src });
-        continue;
-      }
-      if (absolutePathRe.test(src) || src.startsWith('/')) {
-        fail('non-portable image path is unsupported', { src });
-        continue;
+      validateAssetSource('image', src);
+    }
+
+    for (const video of document.querySelectorAll('video')) {
+      for (const src of getVideoSources(video)) {
+        validateAssetSource('video', src);
       }
-      if (!src.startsWith(localAssetPrefix)) {
-        warn('noncanonical local image path should use ./assets/<file>', { src });
+
+      const poster = (video.getAttribute('poster') || '').trim();
+      if (poster) {
+        validateAssetSource('image', poster);
       }
     }