@pecot/visual-mcp 0.0.0-stage → 1.1.0

package/cli/dist/infra/slidev-to-pptx/prerender-capture.d.ts

@@ -0,0 +1,75 @@
+import type { Page, ElementHandle } from 'playwright';
+import type { Logger } from '../../domain/slidev-to-pptx/logger.js';
+import type { PrerenderTarget, PrerenderConfig } from './prerender-config.js';
+export interface PrerenderResult {
+    readonly selector: string;
+    readonly slideNumber: number;
+    readonly fileIndex: number;
+    readonly success: boolean;
+    readonly error?: string;
+    readonly imagePath?: string;
+    readonly imageSize?: number;
+}
+export interface CaptureResult {
+    readonly count: number;
+    readonly errors: readonly string[];
+    readonly results: readonly PrerenderResult[];
+    readonly processedCount: number;
+}
+/**
+要素がビューポート外にあるかを判定する純粋関数。
+*/
+export declare function isElementOffscreen(box: Readonly<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}>, viewport: Readonly<{
+    width: number;
+    height: number;
+}>): boolean;
+/**
+ラスタ化する要素の上に重なる装飾のうち、DOM から native shape として別に描かれるもの。
+要素のスクリーンショットは上に重なるものごと撮るため、写り込むと PPTX で同じ図形が画像と native shape の二重になる。
+高解像度ページで撮影している間だけ隠す。
+- `.marker-overlay`: annotated-image / annotated-terminal / annotated-diagram のマーカーと引き線。
+  図・ターミナル窓の上に重なる。
+*/
+export declare const CAPTURE_HIDDEN_OVERLAY_SELECTORS: readonly string[];
+/**
+captureAndReplaceElements の入力。
+*/
+export interface CaptureRequest {
+    readonly hiResPage: Readonly<Page>;
+    /**
+    差し替える要素（変換ページ側）。hiResElements と同じ順序で対応する
+    */
+    readonly elements: readonly ElementHandle<SVGElement | HTMLElement>[];
+    /**
+    撮影する要素（高解像度ページ側）
+    */
+    readonly hiResElements: readonly ElementHandle<SVGElement | HTMLElement>[];
+    readonly target: Readonly<PrerenderTarget>;
+    readonly config: Readonly<PrerenderConfig>;
+    /**
+    成果物のファイル名に使うステップ番号（stepIndex）
+    */
+    readonly slideNum: number;
+    readonly slidesDir: string;
+    /**
+    ステップ内の通番の開始値
+    */
+    readonly globalIndex: number;
+    readonly logger: Logger;
+    /**
+    meta.json の left / top の原点（変換ページの viewport 座標）。既定 (0, 0) は 1 ステップ
+    1 ページの現行方式でスライドが viewport 左上にある前提。1 パス方式は print ページの
+    対象コンテナの左上を渡し、スライド基準の座標にする。
+    */
+    readonly origin?: Readonly<{
+        x: number;
+        y: number;
+    }>;
+}
+export declare function captureAndReplaceElements(request: Readonly<CaptureRequest>): Promise<CaptureResult>;
+//# sourceMappingURL=prerender-capture.d.ts.map

package/cli/dist/infra/slidev-to-pptx/prerender-capture.js

@@ -0,0 +1,299 @@
+// 旧 lib 由来の Playwright スクリーンショット処理を踏襲するため、次の規則を本ファイル内で無効化する。
+/* eslint-disable unicorn/name-replacements, unicorn/import-style, unicorn/prefer-global-this */
+/* eslint-disable unicorn/no-null, unicorn/prefer-modern-dom-apis, no-restricted-syntax */
+/* eslint-disable security/detect-object-injection, security/detect-non-literal-fs-filename */
+/* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
+import { writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { sanitizeErrorMessage } from '../../domain/slidev-to-pptx/error-utils.js';
+/**
+要素がビューポート外にあるかを判定する純粋関数。
+*/
+export function isElementOffscreen(box, viewport) {
+    return (box.x + box.width <= 0
+        || box.y + box.height <= 0
+        || box.x >= viewport.width
+        || box.y >= viewport.height);
+}
+/**
+ラスタ化する要素の上に重なる装飾のうち、DOM から native shape として別に描かれるもの。
+要素のスクリーンショットは上に重なるものごと撮るため、写り込むと PPTX で同じ図形が画像と native shape の二重になる。
+高解像度ページで撮影している間だけ隠す。
+- `.marker-overlay`: annotated-image / annotated-terminal / annotated-diagram のマーカーと引き線。
+  図・ターミナル窓の上に重なる。
+*/
+export const CAPTURE_HIDDEN_OVERLAY_SELECTORS = ['.marker-overlay'];
+/**
+重なりの装飾を隠す。元の visibility は data 属性に退避し、restoreCaptureOverlays で戻す
+*/
+async function hideCaptureOverlays(page) {
+    await page.evaluate((selectors) => {
+        const matchedElements = globalThis.document.querySelectorAll(selectors.join(','));
+        for (const element of matchedElements) {
+            element.dataset['prerenderOverlayVisibility'] = element.style.visibility;
+            element.style.visibility = 'hidden';
+        }
+    }, CAPTURE_HIDDEN_OVERLAY_SELECTORS);
+}
+async function restoreCaptureOverlays(page) {
+    await page.evaluate(() => {
+        for (const element of globalThis.document.querySelectorAll('[data-prerender-overlay-visibility]')) {
+            element.style.visibility = element.dataset['prerenderOverlayVisibility'] ?? '';
+            delete element.dataset['prerenderOverlayVisibility'];
+        }
+    });
+}
+export async function captureAndReplaceElements(request) {
+    const { hiResPage, elements, hiResElements, target, config, slideNum, slidesDir, globalIndex, logger, origin } = request;
+    const originX = origin?.x ?? 0;
+    const originY = origin?.y ?? 0;
+    let count = 0;
+    const errors = [];
+    const results = [];
+    /**
+    同一要素に失敗エントリが二重に積まれるのを防ぐ。
+    boundingBox() が throw した要素でも、hiRes 側の screenshot は成功し得る。
+    そのため、同じ fileIndex に別文言で 2 件積む場合がある。
+    1 件は Phase 1 の catch（`boundingBox取得失敗: …`）、もう 1 件は Phase 3 の `!box`（`boundingBox is null`）。
+    `--json` の errors[] は要素単位の一覧として読まれるので、先に確定した具体的な理由だけ残す。
+    診断用の warn ログは各分岐でそのまま出す（重複の抑止対象は results だけ）。
+    */
+    const failedIndexes = new Set();
+    const recordFailure = (index, error) => {
+        if (failedIndexes.has(index))
+            return;
+        failedIndexes.add(index);
+        results.push({ selector: target.selector, slideNumber: slideNum, fileIndex: globalIndex + index, success: false, error });
+    };
+    const boxes = [];
+    for (const [i, element] of elements.entries()) {
+        try {
+            const box = await element.boundingBox();
+            if (box && target.clipPadding) {
+                box.x -= (target.clipPadding.left ?? 0);
+                box.y -= (target.clipPadding.top ?? 0);
+                box.width += (target.clipPadding.left ?? 0) + (target.clipPadding.right ?? 0);
+                box.height += (target.clipPadding.top ?? 0) + (target.clipPadding.bottom ?? 0);
+            }
+            logger.debug(`  [${i.toString()}] boundingBox: ${box ? `x=${box.x.toFixed(1)} y=${box.y.toFixed(1)} w=${box.width.toFixed(1)} h=${box.height.toFixed(1)}` : 'null'}`);
+            boxes.push(box);
+        }
+        catch (error) {
+            const message = sanitizeErrorMessage(error);
+            logger.warn(`  警告: ${target.selector}[${i.toString()}] (スライド${slideNum.toString()}): boundingBox取得失敗 — ${message}`);
+            recordFailure(i, `boundingBox取得失敗: ${message}`);
+            boxes.push(null);
+        }
+    }
+    const screenshots = [];
+    const hiResBoxes = [];
+    const viewportSize = hiResPage.viewportSize();
+    /**
+    boundingBox が null の要素を、screenshot を呼ばずに失敗として積む。
+    `display: none` の要素で boundingBox() は throw せず、null を返すだけ。
+    そのまま screenshot() へ渡すと、Playwright が可視化を既定 timeout（計測 30 秒）まで待ってから throw する。
+    撮れないことは box の時点で確定しているため、待つ意味がない。
+    記録の形（warn 文言・error 接頭辞・3 配列への push）は下の catch と揃える。
+    */
+    const recordInvisible = (index) => {
+        const reason = '要素が不可視（boundingBox が null）';
+        logger.warn(`  警告: ${target.selector}[${index.toString()}] (スライド${slideNum.toString()}): hiResスクリーンショット失敗 — ${reason}`);
+        recordFailure(index, `hiResスクリーンショット失敗: ${reason}`);
+        screenshots.push(null);
+        hiResBoxes.push(null);
+    };
+    // 撮影ループの途中で throw しても、隠した装飾は finally で必ず戻す
+    await hideCaptureOverlays(hiResPage);
+    try {
+        for (const [i, hiResElement] of hiResElements.entries()) {
+            try {
+                let hiResBox = await hiResElement.boundingBox();
+                const offscreen = hiResBox && viewportSize && isElementOffscreen(hiResBox, viewportSize);
+                if (offscreen) {
+                    logger.debug(`  [${i.toString()}] ビューポート外 — hiResで一時移動してキャプチャ`);
+                    const savedTransforms = await hiResElement.evaluate((element_) => {
+                        const saved = [];
+                        let ancestor = element_.parentElement;
+                        let index = 0;
+                        while (ancestor && ancestor !== document.body) {
+                            const cs = window.getComputedStyle(ancestor);
+                            if (cs.transform && cs.transform !== 'none') {
+                                const markerId = `prtf-${Date.now().toString()}-${(index++).toString()}`;
+                                ancestor.dataset['prerenderTransformId'] = markerId;
+                                const entry = {
+                                    markerId,
+                                    originalTransform: ancestor.style.transform,
+                                    originalOverflow: null,
+                                };
+                                if (cs.overflow === 'hidden' || cs.overflow === 'clip') {
+                                    entry.originalOverflow = ancestor.style.overflow;
+                                    ancestor.style.overflow = 'visible';
+                                }
+                                ancestor.style.transform = 'none';
+                                saved.push(entry);
+                            }
+                            ancestor = ancestor.parentElement;
+                        }
+                        return saved;
+                    });
+                    // 祖先の transform を解除したまま抜けると、同一 hiResPage 上の後続要素が破損する。
+                    // そのため、ここから先は失敗パス（box が null / screenshot の throw）でも finally の復元を必ず通す。
+                    try {
+                        await hiResPage.waitForTimeout(100);
+                        hiResBox = await hiResElement.boundingBox();
+                        logger.debug(`  [${i.toString()}] 一時移動後 hiRes boundingBox: ${hiResBox ? `w=${hiResBox.width.toFixed(1)} h=${hiResBox.height.toFixed(1)}` : 'null'}`);
+                        // 一時移動しても box が返らない要素は、撮らずに失敗とする（screenshot の可視化待ちを回避）。
+                        if (hiResBox === null) {
+                            recordInvisible(i);
+                        }
+                        else if (target.clipPadding) {
+                            const clip = {
+                                x: hiResBox.x - (target.clipPadding.left ?? 0),
+                                y: hiResBox.y - (target.clipPadding.top ?? 0),
+                                width: hiResBox.width + (target.clipPadding.left ?? 0) + (target.clipPadding.right ?? 0),
+                                height: hiResBox.height + (target.clipPadding.top ?? 0) + (target.clipPadding.bottom ?? 0),
+                            };
+                            screenshots.push(await hiResPage.screenshot({ type: 'png', clip }));
+                            hiResBoxes.push(clip);
+                        }
+                        else {
+                            screenshots.push(await hiResElement.screenshot({ type: 'png' }));
+                            hiResBoxes.push(hiResBox);
+                        }
+                    }
+                    finally {
+                        if (savedTransforms.length > 0) {
+                            await hiResElement.evaluate((_element, transforms) => {
+                                for (const { markerId, originalTransform, originalOverflow } of transforms) {
+                                    const restored = document.querySelector(`[data-prerender-transform-id="${CSS.escape(markerId)}"]`);
+                                    if (!restored) {
+                                        continue;
+                                    }
+                                    restored.style.transform = originalTransform;
+                                    if (originalOverflow !== null) {
+                                        restored.style.overflow = originalOverflow;
+                                    }
+                                    delete restored.dataset['prerenderTransformId'];
+                                }
+                            }, savedTransforms);
+                        }
+                    }
+                }
+                else {
+                    logger.debug(`  [${i.toString()}] hiRes boundingBox: ${hiResBox ? `x=${hiResBox.x.toFixed(1)} y=${hiResBox.y.toFixed(1)} w=${hiResBox.width.toFixed(1)} h=${hiResBox.height.toFixed(1)}` : 'null'}`);
+                    if (hiResBox === null) {
+                        recordInvisible(i);
+                    }
+                    else if (target.clipPadding) {
+                        const clip = {
+                            x: hiResBox.x - (target.clipPadding.left ?? 0),
+                            y: hiResBox.y - (target.clipPadding.top ?? 0),
+                            width: hiResBox.width + (target.clipPadding.left ?? 0) + (target.clipPadding.right ?? 0),
+                            height: hiResBox.height + (target.clipPadding.top ?? 0) + (target.clipPadding.bottom ?? 0),
+                        };
+                        screenshots.push(await hiResPage.screenshot({ type: 'png', clip }));
+                        hiResBoxes.push(clip);
+                    }
+                    else {
+                        screenshots.push(await hiResElement.screenshot({ type: 'png' }));
+                        hiResBoxes.push(hiResBox);
+                    }
+                }
+            }
+            catch (error) {
+                const message = sanitizeErrorMessage(error);
+                logger.warn(`  警告: ${target.selector}[${i.toString()}] (スライド${slideNum.toString()}): hiResスクリーンショット失敗 — ${message}`);
+                recordFailure(i, `hiResスクリーンショット失敗: ${message}`);
+                screenshots.push(null);
+                hiResBoxes.push(null);
+            }
+        }
+    }
+    finally {
+        await restoreCaptureOverlays(hiResPage);
+    }
+    const maxLen = Math.min(elements.length, screenshots.length);
+    for (let i = maxLen - 1; i >= 0; i--) {
+        try {
+            const screenshot = screenshots[i];
+            if (!screenshot)
+                continue;
+            const fileIndex = globalIndex + i;
+            const hiResPath = join(slidesDir, `prerender-slide${slideNum.toString()}-${fileIndex.toString()}.png`);
+            await writeFile(hiResPath, screenshot);
+            logger.info(`  高解像度画像: prerender-slide${slideNum.toString()}-${fileIndex.toString()}.png (${(screenshot.length / 1024).toFixed(0)} KB)`);
+            const base64 = screenshot.toString('base64');
+            const dataUrl = `data:image/png;base64,${base64}`;
+            const box = boxes[i];
+            if (!box) {
+                logger.warn(`  警告: ${target.selector}[${i.toString()}] (スライド${slideNum.toString()}): boundingBox が null — 要素が不可視またはサイズゼロ`);
+                recordFailure(i, 'boundingBox is null');
+                continue;
+            }
+            const metaPath = join(slidesDir, `prerender-slide${slideNum.toString()}-${fileIndex.toString()}.meta.json`);
+            const left = box.x - originX;
+            const top = box.y - originY;
+            await writeFile(metaPath, JSON.stringify({
+                width: Math.round(box.width * config.pptxImageScale),
+                height: Math.round(box.height * config.pptxImageScale),
+                left,
+                top,
+                selector: target.selector,
+            }));
+            logger.debug(`  meta: width=${Math.round(box.width * config.pptxImageScale).toString()} height=${Math.round(box.height * config.pptxImageScale).toString()} left=${left.toString()} top=${top.toString()}`);
+            const hiResBox = hiResBoxes[i];
+            if (!hiResBox) {
+                logger.warn(`  警告: ${target.selector}[${i.toString()}] (スライド${slideNum.toString()}): hiRes boundingBox が null`);
+                recordFailure(i, 'hiRes boundingBox is null');
+                continue;
+            }
+            const actualWidth = Math.round(hiResBox.width * config.deviceScaleFactor);
+            const actualHeight = Math.round(hiResBox.height * config.deviceScaleFactor);
+            logger.debug(`  DOM置換: ${target.selector}[${i.toString()}] → img (${actualWidth.toString()}x${actualHeight.toString()})`);
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- elements[i] は上限内で non-null
+            await elements[i].evaluate((element_, { dataUrl: dataUrlInner, cssWidth, cssHeight, actualWidth: actualW, actualHeight: actualH, clipPadding }) => {
+                const cs = window.getComputedStyle(element_);
+                const layoutProperties = {};
+                for (const property of ['position', 'top', 'right', 'bottom', 'left',
+                    'margin', 'zIndex', 'flexShrink', 'flexGrow', 'alignSelf']) {
+                    // CSSStyleDeclaration の keyof にはメソッドも含まれ unbound-method になるため、文字列索引へキャストする
+                    layoutProperties[property] = cs[property] ?? '';
+                }
+                const img = document.createElement('img');
+                img.src = dataUrlInner;
+                img.width = actualW;
+                img.height = actualH;
+                img.style.width = `${cssWidth.toString()}px`;
+                img.style.height = `${cssHeight.toString()}px`;
+                img.style.display = 'block';
+                for (const [property, value] of Object.entries(layoutProperties)) {
+                    img.style[property] = value;
+                }
+                if (clipPadding) {
+                    if (clipPadding.top)
+                        img.style.marginTop = `-${clipPadding.top.toString()}px`;
+                    if (clipPadding.left)
+                        img.style.marginLeft = `-${clipPadding.left.toString()}px`;
+                }
+                element_.style.display = 'none';
+                element_.dataset['prerenderHidden'] = 'true';
+                img.dataset['prerenderImg'] = 'true';
+                element_.insertAdjacentElement('afterend', img);
+            }, { dataUrl, cssWidth: box.width, cssHeight: box.height, actualWidth, actualHeight, clipPadding: target.clipPadding ?? null });
+            results.push({ selector: target.selector, slideNumber: slideNum, fileIndex, success: true, imagePath: hiResPath, imageSize: screenshot.length });
+            count++;
+        }
+        catch (error) {
+            const message = sanitizeErrorMessage(error);
+            logger.warn(`  警告: ${target.selector}[${i.toString()}] (スライド${slideNum.toString()}): ${message}`);
+            recordFailure(i, message);
+            errors.push(message);
+        }
+    }
+    return { count, errors, results, processedCount: maxLen };
+}
+/* eslint-enable unicorn/name-replacements, unicorn/import-style, unicorn/prefer-global-this */
+/* eslint-enable unicorn/no-null, unicorn/prefer-modern-dom-apis, no-restricted-syntax */
+/* eslint-enable security/detect-object-injection, security/detect-non-literal-fs-filename */
+/* eslint-enable @typescript-eslint/prefer-readonly-parameter-types */
+//# sourceMappingURL=prerender-capture.js.map

package/cli/dist/infra/slidev-to-pptx/prerender-config.d.ts

@@ -0,0 +1,70 @@
+export type WaitStrategy = {
+    readonly type: 'fixed';
+    readonly delay?: number;
+} | {
+    readonly type: 'selectorState';
+    readonly selector: string;
+    readonly state?: 'detached' | 'visible' | 'hidden' | 'attached';
+    readonly timeout?: number;
+    readonly settleDelay?: number;
+};
+export interface PrerenderTarget {
+    readonly selector: string;
+    readonly waitStrategy?: WaitStrategy;
+    readonly clipPadding?: Readonly<{
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    }>;
+}
+export interface PrerenderConfig {
+    readonly targets: readonly PrerenderTarget[];
+    readonly defaultWaitStrategy: WaitStrategy;
+    readonly deviceScaleFactor: number;
+    readonly pptxImageScale: number;
+}
+/**
+selectorState の timeout 省略時の待ち上限（ms）。現行方式と 1 パス方式で共有する
+*/
+export declare const DEFAULT_SELECTOR_TIMEOUT_MS = 15000;
+/**
+fixed の delay 省略時、および待ち戦略が 1 つも決まらないときの待ち時間（ms）
+*/
+export declare const DEFAULT_FIXED_DELAY_MS = 500;
+/**
+config.deviceScaleFactor が 0 のときに使う高解像度ページの倍率
+*/
+export declare const DEFAULT_DEVICE_SCALE_FACTOR = 5;
+/**
+高解像度ページの deviceScaleFactor。0（未設定相当）なら既定値にする。
+*/
+export declare function highResolutionDeviceScaleFactor(config: Readonly<PrerenderConfig>): number;
+/**
+待ち戦略を「セレクタの状態待ち」と「固定の待ち時間」に解いた形。既定値は適用済み。
+*/
+export interface ResolvedWait {
+    readonly type: WaitStrategy['type'];
+    /**
+    selectorState のときだけ持つ
+    */
+    readonly selectorWait?: {
+        readonly selector: string;
+        readonly state: NonNullable<Extract<WaitStrategy, {
+            type: 'selectorState';
+        }>['state']>;
+        readonly timeout: number;
+    };
+    /**
+    状態待ちの後に置く待ち時間（fixed の delay / selectorState の settleDelay）。0 なら待たない
+    */
+    readonly delay: number;
+}
+/**
+ターゲットの待ち戦略を解決する。target.waitStrategy → defaultStrategy → fixed（既定 delay）の
+順で選び、省略値に既定値を入れる。現行方式（ターゲットごと）と 1 パス方式（まとめて 1 回）が
+同じ解決結果を使う。
+*/
+export declare function resolveWait(target: Readonly<PrerenderTarget>, defaultStrategy: Readonly<WaitStrategy> | undefined): ResolvedWait;
+export declare const prerenderConfig: PrerenderConfig;
+//# sourceMappingURL=prerender-config.d.ts.map

package/cli/dist/infra/slidev-to-pptx/prerender-config.js

@@ -0,0 +1,84 @@
+// LCodeBlock 等の複雑なコンポーネントを Playwright スクリーンショットで画像化する infra 設定。
+// domain 純粋層から切り出して infra 配下に配置する (Playwright 依存を引き連れる infra の責務)。
+/**
+selectorState の timeout 省略時の待ち上限（ms）。現行方式と 1 パス方式で共有する
+*/
+export const DEFAULT_SELECTOR_TIMEOUT_MS = 15_000;
+/**
+fixed の delay 省略時、および待ち戦略が 1 つも決まらないときの待ち時間（ms）
+*/
+export const DEFAULT_FIXED_DELAY_MS = 500;
+/**
+config.deviceScaleFactor が 0 のときに使う高解像度ページの倍率
+*/
+export const DEFAULT_DEVICE_SCALE_FACTOR = 5;
+/**
+高解像度ページの deviceScaleFactor。0（未設定相当）なら既定値にする。
+*/
+export function highResolutionDeviceScaleFactor(config) {
+    return config.deviceScaleFactor || DEFAULT_DEVICE_SCALE_FACTOR;
+}
+/**
+ターゲットの待ち戦略を解決する。target.waitStrategy → defaultStrategy → fixed（既定 delay）の
+順で選び、省略値に既定値を入れる。現行方式（ターゲットごと）と 1 パス方式（まとめて 1 回）が
+同じ解決結果を使う。
+*/
+export function resolveWait(target, defaultStrategy) {
+    const strategy = target.waitStrategy ?? defaultStrategy ?? { type: 'fixed', delay: DEFAULT_FIXED_DELAY_MS };
+    if (strategy.type === 'selectorState') {
+        return {
+            type: strategy.type,
+            selectorWait: {
+                selector: strategy.selector,
+                state: strategy.state ?? 'detached',
+                timeout: strategy.timeout ?? DEFAULT_SELECTOR_TIMEOUT_MS,
+            },
+            delay: strategy.settleDelay ?? 0,
+        };
+    }
+    return { type: strategy.type, delay: strategy.delay ?? DEFAULT_FIXED_DELAY_MS };
+}
+export const prerenderConfig = {
+    targets: [
+        {
+            selector: '.terminal-window',
+            // consumer は 2 つある。
+            // LCodeBlock では、fetch + Shiki highlight が完了すると loading ref が false になる。
+            // その時点で .loading-overlay が除去される。これはコンポーネント側の契約。
+            // LAnnotatedTerminal は、frontmatter 直渡しで待つ対象が無く .loading-overlay を持たない。
+            // そのため detached 待ちは、要素不在としてただちに解決する。
+            waitStrategy: {
+                type: 'selectorState',
+                selector: '.loading-overlay',
+                state: 'detached',
+                timeout: 15_000,
+            },
+        },
+        { selector: '.point-number' },
+        {
+            selector: '.diagram-bare',
+            // iframe 内 MutationObserver が SVG 描画完了を検出すると、親に postMessage('drawio:rendered') を発火する。
+            // その時点で .loading-overlay が除去される。これはコンポーネント側の契約。
+            waitStrategy: {
+                type: 'selectorState',
+                selector: '.loading-overlay',
+                state: 'detached',
+                timeout: 15_000,
+                settleDelay: 1000,
+            },
+        },
+        { selector: '.section-badge' },
+        { selector: '.donut-wrapper' },
+        { selector: '.step-nav-bar' },
+        { selector: '.topic-number' },
+        { selector: '.gantt-prerender' },
+        {
+            selector: '.artifact-iframe',
+            waitStrategy: { type: 'fixed', delay: 2000 },
+        },
+    ],
+    defaultWaitStrategy: { type: 'fixed', delay: 500 },
+    deviceScaleFactor: 5,
+    pptxImageScale: 2,
+};
+//# sourceMappingURL=prerender-config.js.map

package/cli/dist/infra/slidev-to-pptx/prerender.d.ts

@@ -0,0 +1,11 @@
+import type { Page, Browser } from 'playwright';
+import type { Logger } from '../../domain/slidev-to-pptx/logger.js';
+import { type PrerenderResult } from './prerender-capture.js';
+import { type PrerenderConfig } from './prerender-config.js';
+export declare function prerenderComplexElements(page: Readonly<Page>, browser: Readonly<Browser>, config: Readonly<PrerenderConfig>, slideNum: number, slidesDir: string, logger: Logger, slideUrl?: string): Promise<PrerenderResult[]>;
+/**
+prerender で差し替えた要素を元に戻す。`scopeSelector` 指定時はその要素の内側だけを戻す
+（1 パス方式で 1 コンテナ分だけを戻すため。省略時は document 全体）。
+*/
+export declare function restorePrerenderElements(page: Readonly<Page>, logger: Logger, scopeSelector?: string): Promise<void>;
+//# sourceMappingURL=prerender.d.ts.map

package/cli/dist/infra/slidev-to-pptx/prerender.js

@@ -0,0 +1,100 @@
+import { timeouts } from '../../domain/slidev-to-pptx/config.js';
+import { errorMessage } from '../../domain/slidev-to-pptx/error-utils.js';
+import { slideVisibleFunctionSource } from '../../domain/slidev-to-pptx/visibility.js';
+import { captureAndReplaceElements } from './prerender-capture.js';
+import { highResolutionDeviceScaleFactor, resolveWait } from './prerender-config.js';
+import { locateTargetsInVisibleSlides, waitForSelectorInVisibleSlide, waitForCssAnimations, waitForFontsReady, waitForDataWaitfor } from './visibility-helpers.js';
+async function executeWaitStrategy(hiResPage, target, wait, logger) {
+    logger.verbose(`  ${target.selector}: 待機戦略=${wait.type}`);
+    if (wait.selectorWait !== undefined) {
+        try {
+            await waitForSelectorInVisibleSlide(hiResPage, target.selector, wait.selectorWait.selector, {
+                state: wait.selectorWait.state,
+                timeout: wait.selectorWait.timeout,
+            });
+            logger.info(`  ${target.selector}: レンダリング完了を検出`);
+        }
+        catch (error) {
+            logger.warn(`  警告: ${target.selector} のレンダリング待機がタイムアウト: ${errorMessage(error)}`);
+        }
+    }
+    if (wait.delay > 0) {
+        await hiResPage.waitForTimeout(wait.delay);
+    }
+}
+export async function prerenderComplexElements(page, browser, config, slideNum, slidesDir, logger, slideUrl) {
+    const allResults = [];
+    let globalIndex = 0;
+    for (const target of config.targets) {
+        const elements = await locateTargetsInVisibleSlides(page, target.selector);
+        logger.verbose(`  ${target.selector}: ${elements.length.toString()}件検出`);
+        if (elements.length === 0) {
+            continue;
+        }
+        const hiResPage = await browser.newPage({
+            viewport: { width: 960, height: 540 },
+            deviceScaleFactor: highResolutionDeviceScaleFactor(config),
+        });
+        try {
+            const targetUrl = slideUrl ?? page.url();
+            await hiResPage.goto(targetUrl, { waitUntil: 'load' });
+            await hiResPage.waitForFunction((visibleFn) => {
+                // eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-call
+                const isVisible = new Function('return ' + visibleFn)();
+                return [...document.querySelectorAll('.slidev-page')].some(s => isVisible(s));
+            }, slideVisibleFunctionSource, { timeout: 30_000 });
+            await waitForFontsReady(hiResPage, timeouts.fontsReady);
+            await waitForDataWaitfor(hiResPage, undefined, timeouts.dataWaitfor, logger);
+            await executeWaitStrategy(hiResPage, target, resolveWait(target, config.defaultWaitStrategy), logger);
+            await waitForCssAnimations(hiResPage, timeouts.cssAnimationSettle, logger);
+            const hiResElements = await locateTargetsInVisibleSlides(hiResPage, target.selector);
+            logger.verbose(`  ${target.selector}: ${hiResElements.length.toString()}件検出 (hiRes)`);
+            if (elements.length !== hiResElements.length) {
+                logger.warn(`  警告: ${target.selector} の検出数が不一致 (page: ${elements.length.toString()}, hiRes: ${hiResElements.length.toString()})`);
+            }
+            const captureResult = await captureAndReplaceElements({ hiResPage, elements, hiResElements, target, config, slideNum, slidesDir, globalIndex, logger });
+            allResults.push(...captureResult.results);
+            globalIndex += captureResult.processedCount;
+            if (captureResult.count > 0) {
+                logger.info(`  プリレンダリング: ${target.selector} → ${captureResult.count.toString()}件を画像化 (${config.deviceScaleFactor.toString()}x)`);
+            }
+            if (captureResult.errors.length > 0) {
+                logger.warn(`  警告: ${target.selector} で ${captureResult.errors.length.toString()}件のエラー`);
+                for (const error of captureResult.errors)
+                    logger.warn(`    - ${error}`);
+            }
+        }
+        finally {
+            await hiResPage.close();
+        }
+    }
+    return allResults;
+}
+/**
+prerender で差し替えた要素を元に戻す。`scopeSelector` 指定時はその要素の内側だけを戻す
+（1 パス方式で 1 コンテナ分だけを戻すため。省略時は document 全体）。
+*/
+export async function restorePrerenderElements(page, logger, scopeSelector) {
+    const prefix = scopeSelector === undefined ? '' : `${scopeSelector} `;
+    await page.evaluate((scopePrefix) => {
+        for (const element of globalThis.document.querySelectorAll(`${scopePrefix}[data-prerender-hidden]`)) {
+            const htmlElement = element;
+            htmlElement.style.display = '';
+            delete htmlElement.dataset['prerenderHidden'];
+        }
+        for (const img of globalThis.document.querySelectorAll(`${scopePrefix}[data-prerender-img]`)) {
+            img.remove();
+        }
+    }, prefix);
+    const remaining = await page.evaluate((scopePrefix) => ({
+        hidden: globalThis.document.querySelectorAll(`${scopePrefix}[data-prerender-hidden]`).length,
+        imgs: globalThis.document.querySelectorAll(`${scopePrefix}[data-prerender-img]`).length,
+    }), prefix);
+    if (remaining.hidden > 0 || remaining.imgs > 0) {
+        logger.warn(`  警告: DOM復元が不完全 — 残存: hidden=${remaining.hidden.toString()}, img=${remaining.imgs.toString()}`);
+    }
+    logger.verbose('プリレンダリング要素を復元');
+}
+/* eslint-enable unicorn/name-replacements, no-restricted-syntax */
+/* eslint-enable @typescript-eslint/prefer-readonly-parameter-types */
+//# sourceMappingURL=prerender.js.map

package/cli/dist/infra/slidev-to-pptx/runner.d.ts

@@ -0,0 +1,15 @@
+import type { SlidevRunner } from '../../domain/_shared/ports.js';
+import type { SpawnResult } from '../../domain/_shared/spawn-result.js';
+export type SlidevBinResolver = () => string;
+export declare class ChildProcessSlidevRunner implements SlidevRunner {
+    private readonly resolveBin;
+    constructor(resolver?: SlidevBinResolver);
+    build(projectDirectory: string, options: Readonly<{
+        theme?: string;
+        timeoutMs: number;
+        stdout?: NodeJS.WritableStream;
+        stderr?: NodeJS.WritableStream;
+        signal?: AbortSignal;
+    }>): Promise<SpawnResult>;
+}
+//# sourceMappingURL=runner.d.ts.map