@reftrixmcp/mcp-server 0.1.7

package/dist/services/responsive/multi-viewport-capture.service.js

@@ -0,0 +1,841 @@
+"use strict";
+// SPDX-FileCopyrightText: 2026 TKMD and Reftrix Contributors
+// SPDX-License-Identifier: AGPL-3.0-only
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiViewportCaptureService = exports.MultiViewportCaptureService = exports.MAX_SCREENSHOT_HEIGHT = exports.DEFAULT_VIEWPORTS = void 0;
+const logger_1 = require("../../utils/logger");
+const shared_browser_manager_1 = require("./shared-browser-manager");
+const external_css_fetcher_1 = require("../external-css-fetcher");
+/**
+ * デフォルトビューポートプリセット
+ */
+exports.DEFAULT_VIEWPORTS = [
+    { name: "desktop", width: 1920, height: 1080 },
+    { name: "tablet", width: 768, height: 1024 },
+    { name: "mobile", width: 375, height: 667 },
+];
+/**
+ * デフォルトナビゲーションセレクタ
+ */
+const DEFAULT_NAV_SELECTORS = [
+    "nav",
+    "header nav",
+    '[role="navigation"]',
+    ".navigation",
+    ".nav",
+    "#nav",
+    "#navigation",
+];
+/**
+ * フルページスクリーンショットの高さ上限（px）
+ * 極端に長いページでのメモリ消費増大を防止する
+ */
+exports.MAX_SCREENSHOT_HEIGHT = 30_000;
+/**
+ * デフォルトハンバーガーメニューセレクタ
+ */
+const DEFAULT_HAMBURGER_SELECTORS = [
+    ".hamburger",
+    ".hamburger-menu",
+    ".burger",
+    ".burger-menu",
+    '[aria-label*="menu"]',
+    '[aria-label*="Menu"]',
+    ".mobile-menu-toggle",
+    ".menu-toggle",
+    "button[aria-expanded]",
+    ".nav-toggle",
+];
+/**
+ * Multi-Viewport Capture Service
+ */
+class MultiViewportCaptureService {
+    browserManager = new shared_browser_manager_1.SharedBrowserManager("MultiViewportCapture");
+    /**
+     * 複数ビューポートでページをキャプチャ
+     *
+     * @param url - キャプチャ対象URL
+     * @param options - キャプチャオプション
+     * @param sharedBrowser - 共有ブラウザインスタンス（Worker pipeline用、指定時はchromium.launch()をスキップ）
+     * @returns ビューポートごとのキャプチャ結果配列
+     */
+    async captureAllViewports(url, options, sharedBrowser) {
+        const viewports = options.viewports ?? exports.DEFAULT_VIEWPORTS;
+        const startTime = Date.now();
+        if ((0, logger_1.isDevelopment)()) {
+            logger_1.logger.info("[MultiViewportCapture] Starting multi-viewport capture", {
+                url,
+                viewports: viewports.map((v) => v.name),
+                usingSharedBrowser: !!sharedBrowser,
+            });
+        }
+        const browser = await this.browserManager.resolveOrLaunch(sharedBrowser);
+        const results = [];
+        // 順次キャプチャ（並列だとリソース消費が大きいため）
+        let viewportIndex = 0;
+        for (const viewport of viewports) {
+            try {
+                // crawl-delay 適用: 2回目以降のキャプチャ前に遅延を挿入
+                const crawlDelay = options.crawlDelayMs;
+                if (viewportIndex > 0 && crawlDelay !== undefined && crawlDelay > 0) {
+                    if ((0, logger_1.isDevelopment)()) {
+                        logger_1.logger.info("[MultiViewportCapture] Applying crawl-delay before capture", {
+                            viewport: viewport.name,
+                            crawlDelayMs: crawlDelay,
+                        });
+                    }
+                    await new Promise((resolve) => setTimeout(resolve, crawlDelay));
+                }
+                const result = await this.captureAtViewport(browser, url, viewport, options);
+                results.push(result);
+            }
+            catch (error) {
+                const errorMessage = error instanceof Error ? error.message : String(error);
+                if ((0, logger_1.isDevelopment)()) {
+                    logger_1.logger.error("[MultiViewportCapture] Capture failed for viewport", {
+                        viewport: viewport.name,
+                        error: errorMessage,
+                    });
+                }
+                results.push({
+                    viewport,
+                    html: "",
+                    layoutInfo: this.createEmptyLayoutInfo(viewport),
+                    navigationInfo: this.createDefaultNavigationInfo(),
+                    error: errorMessage,
+                });
+            }
+            viewportIndex++;
+        }
+        const elapsedMs = Date.now() - startTime;
+        if ((0, logger_1.isDevelopment)()) {
+            logger_1.logger.info("[MultiViewportCapture] Multi-viewport capture completed", {
+                url,
+                viewportsCount: results.length,
+                successCount: results.filter((r) => !r.error).length,
+                elapsedMs,
+            });
+        }
+        return results;
+    }
+    /**
+     * 指定ビューポートでページをキャプチャ
+     */
+    async captureAtViewport(browser, url, viewport, options) {
+        let context = null;
+        let page = null;
+        try {
+            // コンテキストを作成（ビューポートサイズ設定）
+            context = await browser.newContext({
+                viewport: {
+                    width: viewport.width,
+                    height: viewport.height,
+                },
+                userAgent: shared_browser_manager_1.SharedBrowserManager.getUserAgent(viewport.name),
+            });
+            page = await context.newPage();
+            page.setDefaultTimeout(options.timeout);
+            // ページに移動
+            await page.goto(url, {
+                timeout: options.timeout,
+                waitUntil: options.waitUntil ?? "load",
+            });
+            // DOM安定化待機（オプション）
+            if (options.waitForDomStable !== false) {
+                await this.waitForDomStable(page, options.domStableTimeout ?? 500);
+            }
+            // HTML取得
+            const html = await page.content();
+            // レイアウト情報取得
+            const layoutInfo = await this.extractLayoutInfo(page, viewport);
+            // ナビゲーション情報取得
+            const navigationInfo = await this.detectNavigation(page);
+            // スクリーンショット取得（オプション）
+            // exactOptionalPropertyTypes対応：undefinedを含めず条件付きで返す
+            if (options.includeScreenshots) {
+                const screenshot = await this.captureScreenshot(page, viewport, options.fullPage ?? true);
+                return {
+                    viewport,
+                    html,
+                    screenshot,
+                    layoutInfo,
+                    navigationInfo,
+                };
+            }
+            return {
+                viewport,
+                html,
+                layoutInfo,
+                navigationInfo,
+            };
+        }
+        finally {
+            if (page) {
+                await page.close().catch(() => { });
+            }
+            if (context) {
+                await context.close().catch(() => { });
+            }
+        }
+    }
+    /**
+     * DOM安定化待機
+     */
+    async waitForDomStable(page, stableTimeout = 500) {
+        await page.evaluate(`(async function() {
+        const stableTimeout = ${stableTimeout};
+        const maxWait = 5000;
+        const startTime = Date.now();
+        let lastMutationTime = Date.now();
+
+        return new Promise((resolve) => {
+          const maxWaitTimer = setTimeout(() => {
+            observer.disconnect();
+            resolve({ stable: false });
+          }, maxWait);
+
+          const checkInterval = setInterval(() => {
+            if (Date.now() - lastMutationTime >= stableTimeout) {
+              clearInterval(checkInterval);
+              clearTimeout(maxWaitTimer);
+              observer.disconnect();
+              resolve({ stable: true });
+            }
+          }, 100);
+
+          const observer = new MutationObserver(() => {
+            lastMutationTime = Date.now();
+          });
+
+          observer.observe(document.body || document.documentElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+          });
+        });
+      })()`);
+    }
+    /**
+     * レイアウト情報を抽出
+     * Phase 2: セマンティック要素のcomputedStyleベース検出 + 既存セレクタベースのフォールバック
+     * Phase 4: 拡張タイポグラフィ（h1-h6, p:first-of-type）、セクション間スペーシング
+     */
+    async extractLayoutInfo(page, _viewport) {
+        const info = await page.evaluate(`
+      (function() {
+        // ブレークポイント抽出（同一オリジンのスタイルシートのみ）
+        var breakpoints = [];
+        for (var si = 0; si < document.styleSheets.length; si++) {
+          try {
+            var sheet = document.styleSheets[si];
+            for (var ri = 0; ri < sheet.cssRules.length; ri++) {
+              var rule = sheet.cssRules[ri];
+              if (rule.type === CSSRule.MEDIA_RULE) {
+                var media = rule.media.mediaText;
+                var match = media.match(/(\\d+)px/g);
+                if (match) {
+                  breakpoints.push.apply(breakpoints, match);
+                }
+              }
+            }
+          } catch (e) {
+            // CORS制限のあるスタイルシートはスキップ
+          }
+        }
+
+        // Phase 2: セマンティック要素のcomputedStyle走査（200要素上限）
+        var SEMANTIC_SELECTOR = 'header, nav, main, section, aside, footer, article, table, figure';
+        var MAX_ELEMENTS = 200;
+        var semanticElements = [];
+        var gridColumns;
+        var flexDirection;
+        var firstGridFound = false;
+        var firstFlexFound = false;
+
+        // セマンティック要素 + main直接子要素を収集（重複除去）
+        var semanticEls = document.querySelectorAll(SEMANTIC_SELECTOR);
+        var mainEl = document.querySelector('main');
+        var mainChildren = mainEl ? Array.from(mainEl.children) : [];
+        var seen = new Set();
+        var allEls = [];
+        for (var i = 0; i < semanticEls.length; i++) {
+          if (!seen.has(semanticEls[i])) {
+            seen.add(semanticEls[i]);
+            allEls.push(semanticEls[i]);
+          }
+        }
+        for (var j = 0; j < mainChildren.length; j++) {
+          if (!seen.has(mainChildren[j])) {
+            seen.add(mainChildren[j]);
+            allEls.push(mainChildren[j]);
+          }
+        }
+
+        for (var k = 0; k < allEls.length && k < MAX_ELEMENTS; k++) {
+          var el = allEls[k];
+          var cs = window.getComputedStyle(el);
+          var display = cs.display;
+          var visibility = cs.visibility;
+          var opacity = parseFloat(cs.opacity);
+          var rect = el.getBoundingClientRect();
+
+          var tagName = el.tagName.toLowerCase();
+          var selector = tagName;
+          if (el.id) {
+            selector = '#' + el.id;
+          } else if (el.className && typeof el.className === 'string') {
+            var cls = el.className.trim().split(/\\s+/).slice(0, 2).join('.');
+            if (cls) { selector = tagName + '.' + cls; }
+          }
+
+          var elemInfo = {
+            selector: selector,
+            tagName: tagName,
+            display: display,
+            visibility: visibility,
+            opacity: opacity,
+            boundingRect: {
+              x: Math.round(rect.x),
+              y: Math.round(rect.y),
+              width: Math.round(rect.width),
+              height: Math.round(rect.height),
+            },
+          };
+
+          // grid検出
+          if (display === 'grid' || display === 'inline-grid') {
+            var templateColumns = cs.gridTemplateColumns;
+            if (templateColumns && templateColumns !== 'none') {
+              elemInfo.gridColumns = templateColumns.split(' ').filter(function(c) { return c && c !== 'none'; }).length;
+              if (!firstGridFound) {
+                gridColumns = elemInfo.gridColumns;
+                firstGridFound = true;
+              }
+            }
+          }
+
+          // flex検出
+          if (display === 'flex' || display === 'inline-flex') {
+            elemInfo.flexDirection = cs.flexDirection;
+            if (!firstFlexFound) {
+              flexDirection = cs.flexDirection;
+              firstFlexFound = true;
+            }
+          }
+
+          semanticElements.push(elemInfo);
+        }
+
+        // フォールバック: セレクタベースのgrid/flex検出
+        if (!firstGridFound) {
+          var gridContainer = document.querySelector('[style*="grid"], .grid, [class*="grid"]');
+          if (gridContainer) {
+            var gs = window.getComputedStyle(gridContainer);
+            var tc = gs.gridTemplateColumns;
+            if (tc && tc !== 'none') {
+              gridColumns = tc.split(' ').filter(function(c) { return c && c !== 'none'; }).length;
+            }
+          }
+        }
+        if (!firstFlexFound) {
+          var flexContainer = document.querySelector('[style*="flex"], .flex, [class*="flex"]');
+          if (flexContainer) {
+            var fs = window.getComputedStyle(flexContainer);
+            flexDirection = fs.flexDirection;
+          }
+        }
+
+        // タイポグラフィ情報（既存: 後方互換）
+        var typography;
+        var h1El = document.querySelector('h1');
+        var bodyEl = document.body;
+        if (bodyEl) {
+          var bodyStyle = window.getComputedStyle(bodyEl);
+          var bodyFontSize = parseFloat(bodyStyle.fontSize) || 16;
+          var bodyLineHeight = bodyStyle.lineHeight === 'normal'
+            ? 1.2
+            : parseFloat(bodyStyle.lineHeight) / bodyFontSize;
+          var h1FontSize = bodyFontSize;
+          if (h1El) {
+            h1FontSize = parseFloat(window.getComputedStyle(h1El).fontSize) || bodyFontSize;
+          }
+          typography = { h1FontSize: h1FontSize, bodyFontSize: bodyFontSize, bodyLineHeight: bodyLineHeight };
+        }
+
+        // Phase 4: 拡張タイポグラフィ（h1-h6 + p:first-of-type）
+        var headings = [];
+        for (var hi = 1; hi <= 6; hi++) {
+          var heading = document.querySelector('h' + hi);
+          if (heading) {
+            var hfs = parseFloat(window.getComputedStyle(heading).fontSize) || 0;
+            if (hfs > 0) {
+              headings.push({ tag: 'h' + hi, fontSize: hfs });
+            }
+          }
+        }
+        var pFirstOfType;
+        var pFirst = document.querySelector('p:first-of-type');
+        if (pFirst) {
+          var pfs = parseFloat(window.getComputedStyle(pFirst).fontSize);
+          if (pfs > 0) { pFirstOfType = pfs; }
+        }
+        var extendedTypography = (headings.length > 0 || pFirstOfType !== undefined)
+          ? { headings: headings, pFirstOfType: pFirstOfType }
+          : undefined;
+
+        // スペーシング情報（既存: 後方互換）
+        var spacing;
+        if (bodyEl) {
+          var bStyle = window.getComputedStyle(bodyEl);
+          var bodyPadding = {
+            top: parseFloat(bStyle.paddingTop) || 0,
+            right: parseFloat(bStyle.paddingRight) || 0,
+            bottom: parseFloat(bStyle.paddingBottom) || 0,
+            left: parseFloat(bStyle.paddingLeft) || 0,
+          };
+          spacing = { bodyPadding: bodyPadding };
+          var mainContainer = document.querySelector('main, [role="main"], .container, .wrapper, #main');
+          if (mainContainer) {
+            var cStyle = window.getComputedStyle(mainContainer);
+            spacing.mainContainerPadding = {
+              top: parseFloat(cStyle.paddingTop) || 0,
+              right: parseFloat(cStyle.paddingRight) || 0,
+              bottom: parseFloat(cStyle.paddingBottom) || 0,
+              left: parseFloat(cStyle.paddingLeft) || 0,
+            };
+          }
+        }
+
+        // Phase 4: セクション間スペーシング
+        var sectionSpacing = [];
+        var sectionEls = document.querySelectorAll('section, main > *');
+        var maxSections = 50;
+        for (var si2 = 0; si2 < sectionEls.length && si2 < maxSections; si2++) {
+          var sEl = sectionEls[si2];
+          var sStyle = window.getComputedStyle(sEl);
+          var mTop = parseFloat(sStyle.marginTop) || 0;
+          var mBot = parseFloat(sStyle.marginBottom) || 0;
+          if (mTop > 0 || mBot > 0) {
+            var sTag = sEl.tagName.toLowerCase();
+            var sSel = sTag;
+            if (sEl.id) { sSel = '#' + sEl.id; }
+            sectionSpacing.push({ selector: sSel, marginTop: mTop, marginBottom: mBot });
+          }
+        }
+
+        return {
+          documentWidth: document.documentElement.scrollWidth,
+          documentHeight: document.documentElement.scrollHeight,
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          scrollHeight: document.body ? document.body.scrollHeight : 0,
+          breakpoints: breakpoints.filter(function(v, i, a) { return a.indexOf(v) === i; }),
+          gridColumns: gridColumns,
+          flexDirection: flexDirection,
+          typography: typography,
+          spacing: spacing,
+          semanticElements: semanticElements,
+          extendedTypography: extendedTypography,
+          sectionSpacing: sectionSpacing.length > 0 ? sectionSpacing : undefined,
+        };
+      })()
+    `);
+        return info;
+    }
+    /**
+     * ナビゲーション情報を検出
+     * Phase 3: BoundingRectベースの検出 + 既存セレクタベースのフォールバック
+     */
+    async detectNavigation(page) {
+        const info = await page.evaluate(`
+      (function() {
+        var navSelectors = ${JSON.stringify(DEFAULT_NAV_SELECTORS)};
+        var hamburgerSelectors = ${JSON.stringify(DEFAULT_HAMBURGER_SELECTORS)};
+        var hasHorizontalMenu = false;
+        var hasHamburgerMenu = false;
+        var hasBottomNav = false;
+        var navSelector = null;
+
+        // Step 1: ヘッダー領域走査（上部200px以内の全a/button要素）
+        var allClickable = document.querySelectorAll('a, button');
+        var headerLinks = [];
+        for (var i = 0; i < allClickable.length; i++) {
+          var el = allClickable[i];
+          var rect = el.getBoundingClientRect();
+          if (rect.top < 200 && rect.height > 0 && rect.width > 0) {
+            var cs = window.getComputedStyle(el);
+            if (cs.display !== 'none' && cs.visibility !== 'hidden') {
+              headerLinks.push({ rect: rect });
+            }
+          }
+        }
+
+        // Step 2: 水平メニュー判定（Y座標差 < 20pxの要素が3つ以上）
+        if (headerLinks.length >= 3) {
+          var yGroups = {};
+          for (var hi = 0; hi < headerLinks.length; hi++) {
+            var yKey = Math.round(headerLinks[hi].rect.top / 20) * 20;
+            if (!yGroups[yKey]) { yGroups[yKey] = 0; }
+            yGroups[yKey]++;
+          }
+          var yKeys = Object.keys(yGroups);
+          for (var yi = 0; yi < yKeys.length; yi++) {
+            if (yGroups[yKeys[yi]] >= 3) {
+              hasHorizontalMenu = true;
+              break;
+            }
+          }
+        }
+
+        // Step 3: ハンバーガー判定（非表示nav要素の近傍にボタンが存在）
+        var headerNavs = document.querySelectorAll('nav, [role="navigation"]');
+        for (var ni = 0; ni < headerNavs.length; ni++) {
+          var nav = headerNavs[ni];
+          var navRect = nav.getBoundingClientRect();
+          if (navRect.top < 200) {
+            var navStyle = window.getComputedStyle(nav);
+            if (navStyle.display === 'none' || navStyle.visibility === 'hidden') {
+              var parent = nav.parentElement;
+              if (parent) {
+                var buttons = parent.querySelectorAll('button, [role="button"], [aria-expanded]');
+                for (var bi = 0; bi < buttons.length; bi++) {
+                  var btnStyle = window.getComputedStyle(buttons[bi]);
+                  if (btnStyle.display !== 'none' && btnStyle.visibility !== 'hidden') {
+                    hasHamburgerMenu = true;
+                    break;
+                  }
+                }
+              }
+            }
+          }
+          if (hasHamburgerMenu) break;
+        }
+
+        // フォールバック: 既存セレクタベースのハンバーガー検出
+        if (!hasHamburgerMenu) {
+          for (var hsi = 0; hsi < hamburgerSelectors.length; hsi++) {
+            var hel = document.querySelector(hamburgerSelectors[hsi]);
+            if (hel) {
+              var hs = window.getComputedStyle(hel);
+              if (hs.display !== 'none' && hs.visibility !== 'hidden') {
+                hasHamburgerMenu = true;
+                break;
+              }
+            }
+          }
+        }
+
+        // Step 4: ボトムナビ判定（position:fixed + ページ下部60px以内）
+        var fixedCandidates = document.querySelectorAll('nav, div, footer');
+        var vpHeight = window.innerHeight;
+        for (var fi = 0; fi < fixedCandidates.length; fi++) {
+          var fStyle = window.getComputedStyle(fixedCandidates[fi]);
+          if (fStyle.position === 'fixed') {
+            var fRect = fixedCandidates[fi].getBoundingClientRect();
+            if (fRect.bottom >= vpHeight - 60 && fRect.height > 0 && fRect.height < 100) {
+              hasBottomNav = true;
+              break;
+            }
+          }
+        }
+
+        // フォールバック: セレクタベースのボトムナビ検出
+        if (!hasBottomNav) {
+          var bottomNavSelectors = ['.bottom-nav', '.bottom-navigation', '[class*="bottom-nav"]', '.tab-bar'];
+          for (var bni = 0; bni < bottomNavSelectors.length; bni++) {
+            var bel = document.querySelector(bottomNavSelectors[bni]);
+            if (bel) {
+              var bs = window.getComputedStyle(bel);
+              if (bs.display !== 'none') {
+                hasBottomNav = true;
+                break;
+              }
+            }
+          }
+        }
+
+        // ナビゲーション要素検出（セレクタ取得用）
+        for (var nsi = 0; nsi < navSelectors.length; nsi++) {
+          var nEl = document.querySelector(navSelectors[nsi]);
+          if (nEl) {
+            navSelector = navSelectors[nsi];
+            break;
+          }
+        }
+
+        // ナビゲーションタイプ判定
+        var type = 'other';
+        if (hasHamburgerMenu && !hasHorizontalMenu) {
+          type = 'hamburger-menu';
+        } else if (hasHorizontalMenu && !hasHamburgerMenu) {
+          type = 'horizontal-menu';
+        } else if (hasBottomNav) {
+          type = 'bottom-nav';
+        } else if (navSelector && !hasHamburgerMenu && !hasHorizontalMenu) {
+          type = 'hidden';
+        }
+
+        return {
+          type: type,
+          hasHamburgerMenu: hasHamburgerMenu,
+          hasHorizontalMenu: hasHorizontalMenu,
+          hasBottomNav: hasBottomNav,
+          selector: navSelector,
+        };
+      })()
+    `);
+        return info;
+    }
+    /**
+     * スクリーンショットをキャプチャ
+     * フルページ指定時、ページ高さが MAX_SCREENSHOT_HEIGHT を超える場合はクリップする
+     */
+    async captureScreenshot(page, viewport, fullPage) {
+        let buffer;
+        let capturedHeight;
+        if (fullPage) {
+            const scrollHeight = await page.evaluate(() => document.body.scrollHeight);
+            const clipped = scrollHeight > exports.MAX_SCREENSHOT_HEIGHT;
+            if (clipped) {
+                if ((0, logger_1.isDevelopment)()) {
+                    logger_1.logger.warn("[MultiViewportCapture] Page height exceeds MAX_SCREENSHOT_HEIGHT, clipping screenshot", {
+                        viewport: viewport.name,
+                        scrollHeight,
+                        maxHeight: exports.MAX_SCREENSHOT_HEIGHT,
+                    });
+                }
+                // clip を指定して上限までキャプチャ（fullPage: false で clip 指定）
+                buffer = await page.screenshot({
+                    fullPage: false,
+                    type: "png",
+                    clip: {
+                        x: 0,
+                        y: 0,
+                        width: viewport.width,
+                        height: exports.MAX_SCREENSHOT_HEIGHT,
+                    },
+                });
+                capturedHeight = exports.MAX_SCREENSHOT_HEIGHT;
+            }
+            else {
+                buffer = await page.screenshot({
+                    fullPage: true,
+                    type: "png",
+                });
+                capturedHeight = scrollHeight;
+            }
+        }
+        else {
+            buffer = await page.screenshot({
+                fullPage: false,
+                type: "png",
+            });
+            capturedHeight = viewport.height;
+        }
+        return {
+            name: viewport.name,
+            width: viewport.width,
+            height: viewport.height,
+            screenshot: {
+                base64: buffer.toString("base64"),
+                format: "png",
+                width: viewport.width,
+                height: capturedHeight,
+            },
+        };
+    }
+    /**
+     * 空のレイアウト情報を作成
+     */
+    createEmptyLayoutInfo(viewport) {
+        return {
+            documentWidth: viewport.width,
+            documentHeight: viewport.height,
+            viewportWidth: viewport.width,
+            viewportHeight: viewport.height,
+            scrollHeight: viewport.height,
+            breakpoints: [],
+        };
+    }
+    /**
+     * デフォルトのナビゲーション情報を作成
+     */
+    createDefaultNavigationInfo() {
+        return {
+            type: "other",
+            hasHamburgerMenu: false,
+            hasHorizontalMenu: false,
+            hasBottomNav: false,
+        };
+    }
+    /**
+     * 外部CSSからブレークポイントを抽出
+     * SSRF保護は external-css-fetcher に組み込み済み
+     *
+     * @param html - ページHTML
+     * @param pageUrl - ページURL（相対URL解決用）
+     * @returns ブレークポイント値の配列（例: ['768px', '1024px']）
+     */
+    async extractBreakpointsFromExternalCss(html, pageUrl) {
+        try {
+            const cssUrls = (0, external_css_fetcher_1.extractCssUrls)(html, pageUrl);
+            if (cssUrls.length === 0) {
+                return [];
+            }
+            const results = await (0, external_css_fetcher_1.fetchAllCss)(cssUrls.map((u) => u.url), { timeout: 5000 });
+            const breakpoints = new Set();
+            const mediaQueryPattern = /@media[^{]*\{/g;
+            const pxValuePattern = /(\d+)px/g;
+            for (const result of results) {
+                if (!result.content)
+                    continue;
+                let mediaMatch;
+                while ((mediaMatch = mediaQueryPattern.exec(result.content)) !== null) {
+                    const mediaRule = mediaMatch[0];
+                    let pxMatch;
+                    while ((pxMatch = pxValuePattern.exec(mediaRule)) !== null) {
+                        if (pxMatch[1]) {
+                            breakpoints.add(`${pxMatch[1]}px`);
+                        }
+                    }
+                }
+                // reset lastIndex for reuse
+                mediaQueryPattern.lastIndex = 0;
+            }
+            if ((0, logger_1.isDevelopment)()) {
+                logger_1.logger.info("[MultiViewportCapture] External CSS breakpoints extracted", {
+                    cssUrlCount: cssUrls.length,
+                    breakpointCount: breakpoints.size,
+                });
+            }
+            return Array.from(breakpoints);
+        }
+        catch (error) {
+            if ((0, logger_1.isDevelopment)()) {
+                logger_1.logger.warn("[MultiViewportCapture] Failed to extract breakpoints from external CSS", {
+                    error: error instanceof Error ? error.message : String(error),
+                });
+            }
+            return [];
+        }
+    }
+    /**
+     * 指定幅でセマンティック要素のcomputedStyleを取得
+     * precise ブレークポイント検出用
+     */
+    async captureSemanticStylesAtWidth(browser, url, width, timeout) {
+        let context = null;
+        let page = null;
+        try {
+            context = await browser.newContext({
+                viewport: { width, height: 800 },
+            });
+            page = await context.newPage();
+            page.setDefaultTimeout(timeout);
+            await page.goto(url, { timeout, waitUntil: "load" });
+            await this.waitForDomStable(page, 300);
+            const layoutInfo = await this.extractLayoutInfo(page, {
+                name: `probe-${width}`,
+                width,
+                height: 800,
+            });
+            return layoutInfo.semanticElements ?? [];
+        }
+        finally {
+            if (page)
+                await page.close().catch(() => { });
+            if (context)
+                await context.close().catch(() => { });
+        }
+    }
+    /**
+     * preciseモード: 二分探索でブレークポイントを±8px精度で特定
+     * 最大3ブレークポイントまで探索
+     *
+     * @param browser - ブラウザインスタンス
+     * @param url - 対象URL
+     * @param candidateBreakpoints - 候補ブレークポイント（px値の数値配列）
+     * @param timeout - タイムアウト
+     * @returns 検証済みブレークポイント
+     */
+    async detectPreciseBreakpoints(browser, url, candidateBreakpoints, timeout) {
+        // 最大3ブレークポイントに制限
+        const candidates = candidateBreakpoints.slice(0, 3);
+        const results = [];
+        for (const candidate of candidates) {
+            try {
+                // 候補±50pxの範囲でスタイル比較
+                const lowWidth = Math.max(320, candidate - 50);
+                const highWidth = Math.min(4096, candidate + 50);
+                const stylesLow = await this.captureSemanticStylesAtWidth(browser, url, lowWidth, timeout);
+                const stylesHigh = await this.captureSemanticStylesAtWidth(browser, url, highWidth, timeout);
+                if (!this.semanticStylesDiffer(stylesLow, stylesHigh)) {
+                    // スタイルが同じ → このブレークポイントでは変化なし
+                    results.push({ value: candidate, verified: false });
+                    continue;
+                }
+                // 二分探索（±8px精度まで）
+                let lo = lowWidth;
+                let hi = highWidth;
+                while (hi - lo > 8) {
+                    const mid = Math.floor((lo + hi) / 2);
+                    const stylesMid = await this.captureSemanticStylesAtWidth(browser, url, mid, timeout);
+                    if (this.semanticStylesDiffer(stylesMid, stylesHigh)) {
+                        // midとhighが異なる → ブレークポイントはmid〜hiの間
+                        lo = mid;
+                    }
+                    else {
+                        // midとhighが同じ → ブレークポイントはlo〜midの間
+                        hi = mid;
+                    }
+                }
+                results.push({ value: hi, verified: true });
+            }
+            catch (error) {
+                if ((0, logger_1.isDevelopment)()) {
+                    logger_1.logger.warn("[MultiViewportCapture] Precise breakpoint detection failed", {
+                        candidate,
+                        error: error instanceof Error ? error.message : String(error),
+                    });
+                }
+                results.push({ value: candidate, verified: false });
+            }
+        }
+        return results;
+    }
+    /**
+     * 2つのセマンティックスタイル配列に有意な差異があるか判定
+     */
+    semanticStylesDiffer(a, b) {
+        // タグ名ベースでマッチングして比較
+        const bBySelector = new Map();
+        for (const elem of b) {
+            bBySelector.set(elem.selector, elem);
+        }
+        for (const elemA of a) {
+            const elemB = bBySelector.get(elemA.selector);
+            if (!elemB)
+                continue;
+            // display/visibility/opacity/gridColumns/flexDirectionの差異をチェック
+            if (elemA.display !== elemB.display ||
+                elemA.visibility !== elemB.visibility ||
+                Math.abs(elemA.opacity - elemB.opacity) > 0.01 ||
+                elemA.gridColumns !== elemB.gridColumns ||
+                elemA.flexDirection !== elemB.flexDirection) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * ブラウザを終了
+     * 共有ブラウザの場合はブラウザを閉じない（所有者が管理）
+     */
+    async close() {
+        await this.browserManager.close();
+    }
+}
+exports.MultiViewportCaptureService = MultiViewportCaptureService;
+// シングルトンインスタンス
+exports.multiViewportCaptureService = new MultiViewportCaptureService();
+//# sourceMappingURL=multi-viewport-capture.service.js.map