@saeroon/cli 0.2.6 → 0.2.7

package/dist/index.js

@@ -3940,10 +3940,12 @@ var EXTRACTION_SCRIPT = `
 
   function rgbToHex(rgb) {
     if (!rgb || rgb === 'transparent') return 'transparent';
-    if (rgb.startsWith('#')) return rgb;
+    if (rgb.startsWith('#')) return rgb.length === 7 ? rgb : null;
+    // rgb()/rgba()\uB9CC \uCC98\uB9AC, oklch/lab/color() \uB4F1 \uCD5C\uC2E0 \uD3EC\uB9F7\uC740 \uAC74\uB108\uB700
+    if (!rgb.startsWith('rgb')) return null;
     const match = rgb.match(/\\d+/g);
-    if (!match || match.length < 3) return rgb;
-    const [r, g, b] = match.map(Number);
+    if (!match || match.length < 3) return null;
+    const [r, g, b] = match.map(n => Math.min(255, Math.max(0, Number(n))));
     return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
   }
 
@@ -3968,18 +3970,18 @@ var EXTRACTION_SCRIPT = `
 
     if (tag === 'header' || tag === 'nav') return 'header';
     if (tag === 'footer') return 'footer';
-    if (/hero|banner|jumbotron|splash|main-?visual/.test(combined)) return 'hero';
-    if (/feature|service|benefit|what-?we/.test(combined)) return 'features';
-    if (/testimonial|review|feedback|client|customer/.test(combined)) return 'testimonials';
-    if (/faq|accordion|question|q-?and-?a/.test(combined)) return 'faq';
-    if (/team|staff|member|about-?us|who-?we/.test(combined)) return 'team';
-    if (/pricing|plan|package/.test(combined)) return 'pricing';
-    if (/contact|inquiry|form|cta|call-?to-?action|get-?started/.test(combined)) return 'cta';
-    if (/gallery|portfolio|work|project|showcase/.test(combined)) return 'gallery';
-    if (/blog|news|article|post/.test(combined)) return 'blog';
-    if (/partner|client|logo|brand|trust/.test(combined)) return 'partners';
-    if (/map|location|address|direction/.test(combined)) return 'map';
-    if (/stat|counter|number|achievement/.test(combined)) return 'stats';
+    if (/hero|banner|jumbotron|splash|main-?visual|\uBA54\uC778s?\uBE44\uC8FC\uC5BC|\uD788\uC5B4\uB85C/.test(combined)) return 'hero';
+    if (/feature|service|benefit|what-?we|\uC5C5\uBB34s?\uC601\uC5ED|\uC11C\uBE44\uC2A4|\uC9C4\uB8CCs?\uACFC\uBAA9|\uCE58\uB8CCs?\uBC29\uBC95|\uBC95\uB960s?\uC11C\uBE44\uC2A4/.test(combined)) return 'features';
+    if (/testimonial|review|feedback|client|customer|\uD6C4\uAE30|\uB9AC\uBDF0|\uC218\uAC15s?\uD6C4\uAE30|\uACE0\uAC1Ds?\uD6C4\uAE30/.test(combined)) return 'testimonials';
+    if (/faq|accordion|question|q-?and-?a|\uC790\uC8FCs?\uBB3B\uB294|\uC9C8\uBB38/.test(combined)) return 'faq';
+    if (/team|staff|member|about-?us|who-?we|\uC758\uB8CC\uC9C4|\uC6D0\uC7A5|\uBCC0\uD638\uC0AC|\uAC15\uC0AC|\uC18C\uAC1C|\uC778\uC0AC\uB9D0/.test(combined)) return 'team';
+    if (/pricing|plan|package|\uAC00\uACA9|\uC694\uAE08|\uD50C\uB79C/.test(combined)) return 'pricing';
+    if (/contact|inquiry|form|cta|call-?to-?action|get-?started|\uC0C1\uB2F4|\uBB38\uC758|\uC608\uC57D|\uC2E0\uCCAD/.test(combined)) return 'cta';
+    if (/gallery|portfolio|work|project|showcase|\uAC24\uB7EC\uB9AC|\uB458\uB7EC\uBCF4\uAE30|\uC2DC\uC124|\uB0B4\uBD80/.test(combined)) return 'gallery';
+    if (/blog|news|article|post|\uBE14\uB85C\uADF8|\uB274\uC2A4|\uC18C\uC2DD|\uCE7C\uB7FC/.test(combined)) return 'blog';
+    if (/partner|client|logo|brand|trust|\uD30C\uD2B8\uB108|\uC81C\uD734/.test(combined)) return 'partners';
+    if (/map|location|address|direction|\uC624\uC2DC\uB294s?\uAE38|\uCC3E\uC544\uC624\uC2DC\uB294s?\uAE38|\uC9C0\uB3C4|\uC704\uCE58/.test(combined)) return 'map';
+    if (/stat|counter|number|achievement|\uC2E4\uC801|\uC131\uACFC|\uC218\uCE58/.test(combined)) return 'stats';
     return 'section';
   }
 
@@ -4019,11 +4021,68 @@ var EXTRACTION_SCRIPT = `
   // \u2500\u2500 1. Structure \u2500\u2500
   const sectionSelectors = 'body > header, body > footer, body > nav, body > main, body > section, body > div, body > article, body > aside';
   const topLevelEls = document.querySelectorAll(sectionSelectors);
+
+  // wrapper \uAC10\uC9C0: body \uC9C1\uACC4 \uC790\uC2DD\uC5D0\uC11C \uC2DC\uC791\uD558\uC5EC wrapper(\uC790\uC2DD 1\uAC1C) \uD480\uAE30
+  let sectionEls = Array.from(topLevelEls).filter(el => el.getBoundingClientRect().height >= 10);
+
+  // \uC758\uBBF8 \uC788\uB294 \uC139\uC158\uC744 \uCC3E\uC744 \uB54C\uAE4C\uC9C0 wrapper\uB97C \uD480\uC5B4\uB098\uAC10 (\uCD5C\uB300 5\uB2E8\uACC4)
+  function unwrapSections(els, depth) {
+    if (depth <= 0) return els;
+    const result = [];
+    let expanded = false;
+    els.forEach(el => {
+      const tag = el.tagName.toLowerCase();
+      // header, footer, nav, section, article \uB4F1 \uC2DC\uB9E8\uD2F1 \uD0DC\uADF8\uB294 \uC720\uC9C0
+      if (['header', 'footer', 'nav', 'section', 'article', 'aside', 'main'].includes(tag)) {
+        // main\uC740 \uADF8 \uC548\uC758 \uC790\uC2DD\uC744 \uD3BC\uCE68
+        if (tag === 'main') {
+          const children = Array.from(el.children).filter(c => c.getBoundingClientRect().height >= 10);
+          if (children.length > 1) {
+            result.push(...children);
+            expanded = true;
+          } else {
+            result.push(el);
+          }
+        } else {
+          result.push(el);
+        }
+        return;
+      }
+      // div \uB798\uD37C \uBC97\uAE30\uAE30
+      const children = Array.from(el.children).filter(c => c.getBoundingClientRect().height >= 10);
+      if (children.length === 1) {
+        // \uB2E8\uC77C \uC790\uC2DD wrapper \u2192 \uBC97\uAE40
+        result.push(...children);
+        expanded = true;
+      } else if (children.length > 1 && depth >= 4) {
+        // \uAE4A\uC774 \uC0C1\uC704 2\uB2E8\uACC4(depth 5\u21924)\uC5D0\uC11C\uB9CC multi-child \uD655\uC7A5
+        result.push(...children);
+        expanded = true;
+      } else {
+        result.push(el);
+      }
+    });
+    if (!expanded) return result;
+    return unwrapSections(result, depth - 1);
+  }
+
+  sectionEls = unwrapSections(sectionEls, 5);
+
+  // leaf \uC694\uC18C \uD544\uD130 \u2014 \uC139\uC158\uC774 \uB420 \uC218 \uC5C6\uB294 \uD0DC\uADF8 \uC81C\uAC70
+  const leafTags = new Set(['img', 'br', 'hr', 'span', 'a', 'input', 'button', 'label', 'iframe', 'video', 'source', 'svg', 'canvas', 'p', 'strong', 'em', 'b', 'i', 'small', 'path', 'circle', 'rect', 'line', 'polygon', 'polyline', 'ellipse', 'g', 'use', 'defs', 'symbol']);
+  sectionEls = sectionEls.filter(el => {
+    const tag = el.tagName.toLowerCase();
+    // heading(h1-h6)\uC740 \uC139\uC158\uC774 \uC544\uB2CC heading \u2014 \uD56D\uC0C1 \uC81C\uC678
+    if (/^h[1-6]$/.test(tag)) return false;
+    // li\uB294 \uB9AC\uC2A4\uD2B8 \uC544\uC774\uD15C\uC774\uC9C0 \uC139\uC158\uC774 \uC544\uB2D8
+    if (tag === 'li') return false;
+    return !leafTags.has(tag);
+  });
+
   const sections = [];
   let maxDepth = 0;
 
-  topLevelEls.forEach(el => {
-    // \uC228\uACA8\uC9C4 \uC694\uC18C \uB610\uB294 \uB108\uBE44 0\uC778 \uC694\uC18C \uC81C\uC678
+  sectionEls.forEach(el => {
     const rect = el.getBoundingClientRect();
     if (rect.height < 10) return;
 
@@ -4050,10 +4109,28 @@ var EXTRACTION_SCRIPT = `
     if (depth > maxDepth) maxDepth = depth;
   });
 
-  // heading hierarchy
+  // heading hierarchy (\uC2DC\uB9E8\uD2F1 + \uB300\uD615 \uD3F0\uD2B8 pseudo-heading)
   const headings = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
   const headingHierarchy = headings.map(h => h.tagName.toLowerCase() + ': ' + (h.textContent || '').trim().slice(0, 80));
 
+  // \uC2DC\uB9E8\uD2F1 heading\uC774 \uBD80\uC871\uD558\uBA74 \uD070 \uD3F0\uD2B8 \uC694\uC18C\uB97C pseudo-heading\uC73C\uB85C \uBCF4\uC644
+  if (headingHierarchy.length < 3) {
+    const largeFontEls = [];
+    document.querySelectorAll('p, span, div, a, strong, em').forEach(el => {
+      const fs = parsePixel(getComputedProp(el, 'font-size'));
+      const text = (el.textContent || '').trim();
+      if (fs >= 24 && text.length > 0 && text.length < 100 && el.children.length <= 2) {
+        largeFontEls.push({ el, fs, text });
+      }
+    });
+    // \uD070 \uC21C\uC11C \uC815\uB82C \uD6C4 \uC0C1\uC704 20\uAC1C
+    largeFontEls.sort((a, b) => b.fs - a.fs);
+    largeFontEls.slice(0, 20).forEach(({ fs, text }) => {
+      const level = fs >= 60 ? 'pseudo-h1' : fs >= 36 ? 'pseudo-h2' : 'pseudo-h3';
+      headingHierarchy.push(level + ' (' + fs + 'px): ' + text.slice(0, 80));
+    });
+  }
+
   // \u2500\u2500 2. Design Tokens \u2500\u2500
 
   // 2a. Colors \u2014 \uBAA8\uB4E0 \uC694\uC18C\uC758 color, backgroundColor \uC218\uC9D1
@@ -4074,11 +4151,61 @@ var EXTRACTION_SCRIPT = `
   const sortedColors = Object.entries(colorMap).sort((a, b) => b[1] - a[1]);
   const sortedBgs = Object.entries(bgColorMap).sort((a, b) => b[1] - a[1]);
 
-  // primary = body\uB098 heading\uC758 \uAC00\uC7A5 \uBE48\uBC88\uD55C \uD14D\uC2A4\uD2B8 \uC0C9\uC0C1\uC774 \uC544\uB2CC \uC0C9 \uC911 1\uC704
   const bodyColor = rgbToHex(getComputedProp(document.body, 'color'));
   const bodyBg = rgbToHex(getComputedProp(document.body, 'background-color'));
-  const nonBodyColors = sortedColors.filter(([c]) => c !== bodyColor && c !== '#ffffff' && c !== '#000000');
-  const allPalette = [...new Set([...sortedColors.map(c => c[0]), ...sortedBgs.map(c => c[0])])].slice(0, 20);
+  // \uAE30\uBCF8 \uB9C1\uD06C\uC0C9(#0000ee), \uD770/\uAC80 \uC81C\uC678
+  const defaultLinkColors = ['#0000ee', '#0000ff', '#551a8b'];
+  const nonBodyColors = sortedColors.filter(([c]) =>
+    c !== bodyColor && c !== '#ffffff' && c !== '#000000' && !defaultLinkColors.includes(c)
+  );
+
+  // heading \uC0C9\uC0C1 \uC218\uC9D1 \u2014 h1-h3 + \uB300\uD615 \uD3F0\uD2B8(24px+) \uC694\uC18C \uD3EC\uD568
+  const headingColorMap = {};
+  document.querySelectorAll('h1, h2, h3, h4').forEach(h => {
+    const c = rgbToHex(getComputedProp(h, 'color'));
+    if (c && c !== 'transparent' && c !== '#ffffff' && c !== '#000000' && !defaultLinkColors.includes(c)) {
+      headingColorMap[c] = (headingColorMap[c] || 0) + 1;
+    }
+  });
+  // \uC2DC\uB9E8\uD2F1 heading\uC774 \uC5C6\uC73C\uBA74 \uB300\uD615 \uD3F0\uD2B8 \uC694\uC18C\uC5D0\uC11C \uC0C9\uC0C1 \uCD94\uCD9C
+  if (Object.keys(headingColorMap).length === 0) {
+    document.querySelectorAll('p, span, div, strong, a').forEach(el => {
+      const fs = parsePixel(getComputedProp(el, 'font-size'));
+      if (fs >= 24 && (el.textContent || '').trim().length > 0 && (el.textContent || '').trim().length < 100) {
+        const c = rgbToHex(getComputedProp(el, 'color'));
+        if (c && c !== 'transparent' && c !== '#ffffff' && c !== '#000000' && !defaultLinkColors.includes(c)) {
+          headingColorMap[c] = (headingColorMap[c] || 0) + 1;
+        }
+      }
+    });
+  }
+  const topHeadingColor = Object.entries(headingColorMap).sort((a, b) => b[1] - a[1])[0];
+
+  const allPalette = [...new Set([...sortedColors.map(c => c[0]), ...sortedBgs.map(c => c[0])])].filter(c => !defaultLinkColors.includes(c)).slice(0, 20);
+
+  // accent \uD6C4\uBCF4: \uCC44\uB3C4\uAC00 \uB192\uC740 \uBE44-\uC911\uB9BD \uC0C9\uC0C1 (\uAC15\uC870/CTA\uC6A9)
+  function hexToHsl(hex) {
+    const r = parseInt(hex.slice(1, 3), 16) / 255;
+    const g = parseInt(hex.slice(3, 5), 16) / 255;
+    const b = parseInt(hex.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min) return { h: 0, s: 0, l };
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+    return { h, s, l };
+  }
+
+  const accentFromPalette = allPalette
+    .filter(c => c.length === 7 && c.startsWith('#'))
+    .map(c => ({ color: c, ...hexToHsl(c) }))
+    .filter(c => c.s > 0.3 && c.l > 0.15 && c.l < 0.85)
+    .sort((a, b) => b.s - a.s);
+  const topAccent = accentFromPalette.length > 0 ? [accentFromPalette[0].color] : null;
 
   // 2b. Typography
   const typographyScale = {};
@@ -4171,13 +4298,30 @@ var EXTRACTION_SCRIPT = `
     document.querySelector('details, [class*=accordion], [class*=collapse], [data-toggle=collapse]')
   );
   const hasModal = !!(
-    document.querySelector('dialog, [class*=modal], [class*=lightbox], [role=dialog]')
+    document.querySelector('dialog, [class*=modal], [role=dialog], [class*=popup]')
+  );
+  const hasTab = !!(
+    document.querySelector('[role=tablist], [role=tab], [class*=tab-content], [class*=tab-pane], [data-toggle=tab], .elementor-tab-title, .e-n-tabs, .e-n-tab-title')
+  );
+  const hasLightbox = !!(
+    document.querySelector('[class*=lightbox], [data-lightbox], [class*=fancybox], [data-fancybox], [class*=glightbox], [data-gallery], [data-elementor-open-lightbox]')
   );
   const hasStickyHeader = (() => {
-    const header = document.querySelector('header, [class*=header], nav');
-    if (!header) return false;
-    const pos = getComputedProp(header, 'position');
-    return pos === 'sticky' || pos === 'fixed';
+    // \uC2DC\uB9E8\uD2F1 \uD0DC\uADF8 \uC6B0\uC120
+    const header = document.querySelector('header, [class*=header], nav, [class*=gnb], [class*=lnb], [id*=header], [id*=gnb]');
+    if (header) {
+      const pos = getComputedProp(header, 'position');
+      if (pos === 'sticky' || pos === 'fixed') return true;
+    }
+    // \uC0C1\uB2E8 fixed/sticky \uC694\uC18C \uD0D0\uC0C9 (\uBE44\uC2DC\uB9E8\uD2F1 \uB9C8\uD06C\uC5C5 \uB300\uC751)
+    const topEls = document.querySelectorAll('body > div, body > div > div');
+    for (const el of topEls) {
+      const pos = getComputedProp(el, 'position');
+      if ((pos === 'sticky' || pos === 'fixed') && el.getBoundingClientRect().top <= 0 && el.getBoundingClientRect().height < 200) {
+        return true;
+      }
+    }
+    return false;
   })();
   const hasScrollAnimations = !!(
     document.querySelector('[class*=aos], [data-aos], [class*=wow], [class*=scroll-animate], [class*=animate-on-scroll]') ||
@@ -4199,6 +4343,7 @@ var EXTRACTION_SCRIPT = `
   // \u2500\u2500 4. Images \u2500\u2500
   const imgEls = document.querySelectorAll('img, picture source, [style*="background-image"]');
   const images = [];
+  const seenImageSrcs = new Set();
 
   imgEls.forEach(el => {
     let src = '';
@@ -4220,6 +4365,9 @@ var EXTRACTION_SCRIPT = `
     }
 
     if (!src || src.startsWith('data:image/svg') || src.includes('.svg')) return;
+    // src \uC911\uBCF5 \uC81C\uAC70
+    if (seenImageSrcs.has(src)) return;
+    seenImageSrcs.add(src);
 
     const rect = el.getBoundingClientRect();
     if (!width) width = Math.round(rect.width);
@@ -4271,20 +4419,21 @@ var EXTRACTION_SCRIPT = `
       src = el.src || el.dataset.src || '';
       if (/youtube.com|youtu.be/.test(src)) {
         platform = 'youtube';
-        type = 'embed';
         // YouTube autoplay \uD30C\uB77C\uBBF8\uD130 \uAC10\uC9C0
         autoplay = /autoplay=1/.test(src);
         muted = /mute=1/.test(src);
         loop = /loop=1/.test(src);
+        // autoplay+muted \u2192 background \uBE44\uB514\uC624\uB85C \uBD84\uB958 (YouTube \uBC30\uACBD \uC601\uC0C1 \uD328\uD134)
+        type = (autoplay && muted) ? 'background' : 'embed';
         // YouTube thumbnail \uCD94\uCD9C
         const ytMatch = src.match(/(?:embed\\/|v=|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/);
         if (ytMatch) posterSrc = 'https://img.youtube.com/vi/' + ytMatch[1] + '/hqdefault.jpg';
       } else if (/vimeo.com/.test(src)) {
         platform = 'vimeo';
-        type = 'embed';
         autoplay = /autoplay=1/.test(src);
         muted = /muted=1/.test(src);
         loop = /loop=1/.test(src);
+        type = (autoplay && muted) ? 'background' : 'embed';
       }
     }
 
@@ -4375,11 +4524,11 @@ var EXTRACTION_SCRIPT = `
     },
     designTokens: {
       colors: {
-        primary: (nonBodyColors[0] || sortedColors[0] || ['#000000'])[0],
-        secondary: (nonBodyColors[1] || sortedColors[1] || ['#666666'])[0],
+        primary: topHeadingColor ? topHeadingColor[0] : (nonBodyColors[0] || sortedColors[0] || ['#000000'])[0],
+        secondary: (nonBodyColors[0] || sortedColors[0] || ['#666666'])[0],
         background: bodyBg || '#ffffff',
         text: bodyColor || '#000000',
-        accent: (nonBodyColors[2] || sortedColors[2] || ['#0066ff'])[0],
+        accent: topAccent ? topAccent[0] : (nonBodyColors[1] || sortedColors[1] || ['#0066ff'])[0],
         palette: allPalette,
       },
       typography: {
@@ -4404,6 +4553,8 @@ var EXTRACTION_SCRIPT = `
       hasCarousel,
       hasAccordion,
       hasModal,
+      hasTab,
+      hasLightbox,
       hasStickyHeader,
       hasParallax,
       detectedAnimations: [...animationNames].slice(0, 20),
@@ -4441,26 +4592,81 @@ async function analyzeReference(options) {
   await writeFile7(analysisPath, JSON.stringify(analysis, null, 2), "utf-8");
   return analysis;
 }
+var POPUP_DISMISS_SCRIPT = `
+  // 1. HTML dialog \uB2EB\uAE30
+  document.querySelectorAll('dialog[open]').forEach(d => d.close());
+  // 2. \uC77C\uBC18 \uD31D\uC5C5/\uBAA8\uB2EC \uB2EB\uAE30 \uBC84\uD2BC \uD074\uB9AD
+  const closeSelectors = [
+    '[class*=popup] [class*=close]', '[class*=modal] [class*=close]',
+    '[class*=popup] [class*=btn-close]', '[class*=modal] [class*=btn-close]',
+    '[aria-label*=close]', '[aria-label*="\uB2EB\uAE30"]', '[aria-label*=Close]',
+    '.popup-close', '.modal-close', '.btn-close',
+    '[class*=overlay] [class*=close]',
+  ];
+  for (const sel of closeSelectors) {
+    document.querySelectorAll(sel).forEach(btn => {
+      try { btn.click(); } catch {}
+    });
+  }
+  // 3. \uC624\uBC84\uB808\uC774/\uB524 \uB808\uC774\uC5B4 \uC81C\uAC70
+  document.querySelectorAll('[class*=overlay], [class*=dimmed], .modal-backdrop, [class*=popup-bg]').forEach(el => {
+    if (el.getBoundingClientRect().width >= window.innerWidth * 0.8) {
+      el.style.display = 'none';
+    }
+  });
+  // 4. body overflow \uBCF5\uC6D0
+  document.body.style.overflow = '';
+  document.body.style.position = '';
+  document.documentElement.style.overflow = '';
+`;
 function captureScreenshot(url, outputPath, width, height, timeout) {
-  const result = spawnSync("npx", [
-    "playwright",
-    "screenshot",
-    "--browser",
-    "chromium",
-    "--viewport-size",
-    `${width},${height}`,
-    "--wait-for-timeout",
-    "3000",
-    "--full-page",
-    url,
-    outputPath
-  ], {
+  const scriptContent = `
+    const { chromium } = require('playwright');
+    (async () => {
+      const browser = await chromium.launch({ headless: true });
+      const context = await browser.newContext({
+        viewport: { width: ${width}, height: ${height} },
+        userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
+      });
+      const page = await context.newPage();
+      await page.goto(${JSON.stringify(url)}, { waitUntil: 'domcontentloaded', timeout: ${timeout} });
+      await page.waitForTimeout(3000);
+      // \uD31D\uC5C5 \uC790\uB3D9 \uB2EB\uAE30
+      await page.evaluate(() => { ${POPUP_DISMISS_SCRIPT} });
+      await page.waitForTimeout(500);
+      await page.screenshot({ path: ${JSON.stringify(outputPath)}, fullPage: true });
+      await browser.close();
+    })().catch(e => {
+      process.stderr.write(e.message);
+      process.exit(1);
+    });
+  `;
+  const result = spawnSync("node", ["-e", scriptContent], {
     stdio: "pipe",
-    timeout: timeout + 15e3
+    timeout: timeout + 3e4,
+    env: { ...process.env }
   });
   if (result.status !== 0) {
     const stderr = result.stderr?.toString() ?? "";
-    throw new Error(`\uC2A4\uD06C\uB9B0\uC0F7 \uCEA1\uCC98 \uC2E4\uD328 (${width}px): ${stderr || "unknown error"}`);
+    const fallbackResult = spawnSync("npx", [
+      "playwright",
+      "screenshot",
+      "--browser",
+      "chromium",
+      "--viewport-size",
+      `${width},${height}`,
+      "--wait-for-timeout",
+      "3000",
+      "--full-page",
+      url,
+      outputPath
+    ], {
+      stdio: "pipe",
+      timeout: timeout + 15e3
+    });
+    if (fallbackResult.status !== 0) {
+      throw new Error(`\uC2A4\uD06C\uB9B0\uC0F7 \uCEA1\uCC98 \uC2E4\uD328 (${width}px): ${stderr || "unknown error"}`);
+    }
   }
 }
 async function extractPageData(url, timeout) {
@@ -4473,8 +4679,13 @@ async function extractPageData(url, timeout) {
         userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
       });
       const page = await context.newPage();
-      await page.goto(${JSON.stringify(url)}, { waitUntil: 'networkidle', timeout: ${timeout} });
-      await page.waitForTimeout(2000);
+      await page.goto(${JSON.stringify(url)}, { waitUntil: 'domcontentloaded', timeout: ${timeout} });
+      await page.waitForTimeout(5000);
+
+      // \uD31D\uC5C5/\uBAA8\uB2EC/\uC624\uBC84\uB808\uC774 \uC790\uB3D9 \uB2EB\uAE30
+      await page.evaluate(() => { ${POPUP_DISMISS_SCRIPT} });
+      await page.waitForTimeout(500);
+
       const data = await page.evaluate(${JSON.stringify(EXTRACTION_SCRIPT)});
       await browser.close();
       process.stdout.write(JSON.stringify(data));
@@ -4536,6 +4747,8 @@ function createFallbackData() {
       hasCarousel: false,
       hasAccordion: false,
       hasModal: false,
+      hasTab: false,
+      hasLightbox: false,
       hasStickyHeader: false,
       hasParallax: false,
       detectedAnimations: [],
@@ -4738,6 +4951,8 @@ async function commandAnalyze(url, options) {
       interactions.hasCarousel && "Carousel",
       interactions.hasAccordion && "Accordion",
       interactions.hasModal && "Modal",
+      interactions.hasTab && "Tab",
+      interactions.hasLightbox && "Lightbox",
       interactions.hasParallax && "Parallax",
       interactions.hasHoverEffects && "Hover Effects"
     ].filter(Boolean);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saeroon/cli",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Saeroon Hosting developer CLI — preview, validate, and deploy sites & templates",
   "private": false,
   "type": "module",
@@ -40,6 +40,7 @@
     "@saeroon/tsconfig": "workspace:*",
     "@types/node": "^25.0.3",
     "@types/ws": "^8.5.0",
+    "playwright": "^1.57.0",
     "tsup": "^8.3.5",
     "typescript": "~5.9.3"
   },