@saeroon/cli 0.2.7 → 0.2.9

package/dist/index.js

@@ -2514,19 +2514,27 @@ var ELEMENT_TYPE_PROPS = {
       "pre",
       "code",
       "progress",
-      "meter"
+      "meter",
+      "output",
+      "label",
+      "search",
+      "time",
+      "mark",
+      "abbr"
     ]),
     coerce: () => null
   }
 };
 var VALID_BLOCK_TYPES = /* @__PURE__ */ new Set([
-  // Primitives (11)
+  // Primitives (13)
   "container",
   "text-block",
+  "rich-text-block",
   "heading-block",
   "button-block",
   "image-block",
   "video-block",
+  "audio-block",
   "embed-block",
   "icon-block",
   "input-block",
@@ -3918,9 +3926,18 @@ import { resolve as resolve13, join as join2 } from "path";
 import { mkdir as mkdir4, writeFile as writeFile8 } from "fs/promises";
 
 // src/scripts/analyze-reference.ts
-import { spawnSync } from "child_process";
+import { spawnSync, execSync } from "child_process";
 import { writeFile as writeFile7, mkdir as mkdir3 } from "fs/promises";
 import { join } from "path";
+function getNodeEnvWithGlobalModules() {
+  try {
+    const globalRoot = execSync("npm root -g", { encoding: "utf-8" }).trim();
+    const existing = process.env.NODE_PATH || "";
+    return { ...process.env, NODE_PATH: existing ? `${existing}:${globalRoot}` : globalRoot };
+  } catch {
+    return { ...process.env };
+  }
+}
 var VIEWPORTS = [
   { name: "mobile", width: 375, height: 812 },
   { name: "tablet", width: 768, height: 1024 },
@@ -4032,32 +4049,43 @@ var EXTRACTION_SCRIPT = `
     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);
-          }
+      // \uC2DC\uB9E8\uD2F1 \uD0DC\uADF8: header/footer/nav/section/article/aside\uB294 \uC139\uC158\uC73C\uB85C \uC720\uC9C0
+      const keepTags = new Set(['header', 'footer', 'nav', 'section', 'article', 'aside']);
+      // main/form\uC740 \uB798\uD37C \uC5ED\uD560\uC774 \uB9CE\uC74C \u2014 \uC790\uC2DD\uC774 \uC5EC\uB7EC \uAC1C\uBA74 \uD3BC\uCE68
+      const unwrapTags = new Set(['main', 'form']);
+
+      if (keepTags.has(tag)) {
+        result.push(el);
+        return;
+      }
+
+      const children = Array.from(el.children).filter(c => c.getBoundingClientRect().height >= 10);
+
+      if (unwrapTags.has(tag)) {
+        // main/form: \uC790\uC2DD\uC774 \uC5EC\uB7EC \uAC1C\uBA74 \uD3BC\uCE68
+        if (children.length > 1) {
+          result.push(...children);
+          expanded = true;
         } 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
+
+      // div \uB4F1 \uBE44\uC2DC\uB9E8\uD2F1 \uB798\uD37C \uBC97\uAE30\uAE30
+      if (children.length <= 1 && children.length > 0) {
         result.push(...children);
         expanded = true;
+      } else if (children.length > 1) {
+        // \uD398\uC774\uC9C0 \uB192\uC774 \uB300\uBD80\uBD84\uC744 \uCC28\uC9C0\uD558\uB294 \uB798\uD37C\uB294 \uD3BC\uCE68
+        const elHeight = el.getBoundingClientRect().height;
+        const pageHeight = document.body.scrollHeight || 1;
+        if (elHeight > pageHeight * 0.5) {
+          result.push(...children);
+          expanded = true;
+        } else {
+          result.push(el);
+        }
       } else {
         result.push(el);
       }
@@ -4110,7 +4138,18 @@ var EXTRACTION_SCRIPT = `
   });
 
   // heading hierarchy (\uC2DC\uB9E8\uD2F1 + \uB300\uD615 \uD3F0\uD2B8 pseudo-heading)
-  const headings = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+  // \uD31D\uC5C5/\uBAA8\uB2EC/dialog \uB0B4\uBD80 heading \uC81C\uC678
+  const headings = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6')).filter(h => {
+    const popup = h.closest('dialog, [class*=popup], [class*=modal], [class*=layer], [role=dialog], [style*="display: none"], [style*="display:none"]');
+    if (popup) {
+      const rect = popup.getBoundingClientRect();
+      // \uD654\uBA74 \uBC16\uC774\uAC70\uB098 display:none\uC774\uBA74 \uD31D\uC5C5 heading
+      if (rect.width === 0 || rect.height === 0) return false;
+      // \uD31D\uC5C5\uC774 \uD654\uBA74 \uAC00\uC6B4\uB370 \uB5A0 \uC788\uC73C\uBA74 (\uC804\uCCB4 \uB108\uBE44\uC758 90% \uBBF8\uB9CC) \uD31D\uC5C5 heading
+      if (rect.width < window.innerWidth * 0.9) return false;
+    }
+    return true;
+  });
   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
@@ -4341,10 +4380,40 @@ var EXTRACTION_SCRIPT = `
   const hasHoverEffects = transitionProps.size > 0;
 
   // \u2500\u2500 4. Images \u2500\u2500
+  // inline style + \uC8FC\uC694 \uCEE8\uD14C\uC774\uB108\uC758 computed background-image \uD0D0\uC0C9
   const imgEls = document.querySelectorAll('img, picture source, [style*="background-image"]');
   const images = [];
   const seenImageSrcs = new Set();
 
+  // computed background-image\uAC00 \uC788\uB294 \uCEE8\uD14C\uC774\uB108 \uC694\uC18C \uCD94\uAC00 \uD0D0\uC0C9
+  const bgCandidates = document.querySelectorAll('div, section, header, footer, main, article, aside, figure, span, a');
+  const bgCandidateArr = Array.from(bgCandidates).filter((_, i) => i % Math.max(1, Math.ceil(bgCandidates.length / 300)) === 0);
+  bgCandidateArr.forEach(el => {
+    const bg = getComputedProp(el, 'background-image');
+    if (bg && bg !== 'none') {
+      const match = bg.match(/url\\(["']?(.+?)["']?\\)/);
+      if (match && match[1] && !match[1].startsWith('data:') && !match[1].includes('.svg')) {
+        const src = match[1];
+        if (seenImageSrcs.has(src)) return;
+        seenImageSrcs.add(src);
+        const rect = el.getBoundingClientRect();
+        if (rect.width < 20 || rect.height < 20) return;
+        const parentSection = el.closest('section, header, footer, main, [class*=hero], [class*=banner]');
+        const parentRole = parentSection ? inferSectionRole(parentSection) : 'unknown';
+        images.push({
+          src: src.slice(0, 500),
+          alt: '',
+          width: Math.round(rect.width),
+          height: Math.round(rect.height),
+          aspectRatio: guessAspectRatio(Math.round(rect.width), Math.round(rect.height)),
+          role: rect.width > window.innerWidth * 0.8 && rect.height > 300 ? 'hero-bg' : 'background',
+          dominantColor: '',
+          position: parentRole,
+        });
+      }
+    }
+  });
+
   imgEls.forEach(el => {
     let src = '';
     let alt = '';
@@ -4634,6 +4703,22 @@ function captureScreenshot(url, outputPath, width, height, timeout) {
       // \uD31D\uC5C5 \uC790\uB3D9 \uB2EB\uAE30
       await page.evaluate(() => { ${POPUP_DISMISS_SCRIPT} });
       await page.waitForTimeout(500);
+      // scroll simulation \u2014 lazy-load/IntersectionObserver \uCF58\uD150\uCE20 \uD2B8\uB9AC\uAC70
+      await page.evaluate(async () => {
+        const delay = (ms) => new Promise(r => setTimeout(r, ms));
+        const scrollHeight = document.body.scrollHeight;
+        const viewportHeight = window.innerHeight;
+        const step = Math.floor(viewportHeight * 0.7);
+        for (let y = 0; y < scrollHeight; y += step) {
+          window.scrollTo(0, y);
+          await delay(300);
+        }
+        window.scrollTo(0, scrollHeight);
+        await delay(500);
+        window.scrollTo(0, 0);
+        await delay(500);
+      });
+      await page.waitForTimeout(1000);
       await page.screenshot({ path: ${JSON.stringify(outputPath)}, fullPage: true });
       await browser.close();
     })().catch(e => {
@@ -4644,7 +4729,7 @@ function captureScreenshot(url, outputPath, width, height, timeout) {
   const result = spawnSync("node", ["-e", scriptContent], {
     stdio: "pipe",
     timeout: timeout + 3e4,
-    env: { ...process.env }
+    env: getNodeEnvWithGlobalModules()
   });
   if (result.status !== 0) {
     const stderr = result.stderr?.toString() ?? "";
@@ -4686,6 +4771,22 @@ async function extractPageData(url, timeout) {
       await page.evaluate(() => { ${POPUP_DISMISS_SCRIPT} });
       await page.waitForTimeout(500);
 
+      // scroll simulation \u2014 lazy-load \uCF58\uD150\uCE20 \uD2B8\uB9AC\uAC70 (DOM \uCD94\uCD9C \uC804)
+      await page.evaluate(async () => {
+        const delay = (ms) => new Promise(r => setTimeout(r, ms));
+        const scrollHeight = document.body.scrollHeight;
+        const step = Math.floor(window.innerHeight * 0.7);
+        for (let y = 0; y < scrollHeight; y += step) {
+          window.scrollTo(0, y);
+          await delay(300);
+        }
+        window.scrollTo(0, scrollHeight);
+        await delay(500);
+        window.scrollTo(0, 0);
+        await delay(500);
+      });
+      await page.waitForTimeout(1000);
+
       const data = await page.evaluate(${JSON.stringify(EXTRACTION_SCRIPT)});
       await browser.close();
       process.stdout.write(JSON.stringify(data));
@@ -4697,7 +4798,7 @@ async function extractPageData(url, timeout) {
   const result = spawnSync("node", ["-e", scriptContent], {
     stdio: "pipe",
     timeout: timeout + 3e4,
-    env: { ...process.env }
+    env: getNodeEnvWithGlobalModules()
   });
   if (result.status !== 0) {
     const stderr = result.stderr?.toString() ?? "";
@@ -5085,6 +5186,15 @@ import chalk16 from "chalk";
 import { writeFile as writeFile9, mkdir as mkdir5 } from "fs/promises";
 import { resolve as resolve14, join as join3 } from "path";
 import { execSync as execSync2, spawnSync as spawnSync2 } from "child_process";
+function getNodeEnvWithGlobalModules2() {
+  try {
+    const globalRoot = execSync2("npm root -g", { encoding: "utf-8" }).trim();
+    const existing = process.env.NODE_PATH || "";
+    return { ...process.env, NODE_PATH: existing ? `${existing}:${globalRoot}` : globalRoot };
+  } catch {
+    return { ...process.env };
+  }
+}
 async function commandCompare(options) {
   console.log(chalk16.bold("\n\uC2DC\uAC01 \uBE44\uAD50 (Visual Diff)\n"));
   if (!options.ref || !options.preview) {
@@ -5318,25 +5428,77 @@ function checkCommand(cmd) {
   }
 }
 function captureScreenshot2(url, outputPath, width, height) {
-  const result = spawnSync2("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: 30000 });
+      await page.waitForTimeout(3000);
+      // \uD31D\uC5C5/\uBAA8\uB2EC \uC790\uB3D9 \uB2EB\uAE30
+      await page.evaluate(() => {
+        document.querySelectorAll('dialog[open]').forEach(d => d.close());
+        ['[class*=popup] [class*=close]','[class*=modal] [class*=close]',
+         '[aria-label*=close]','[aria-label*="\uB2EB\uAE30"]','[aria-label*=Close]',
+         '.popup-close','.modal-close','.btn-close'].forEach(sel => {
+          document.querySelectorAll(sel).forEach(btn => { try { btn.click(); } catch {} });
+        });
+        document.querySelectorAll('[class*=overlay],[class*=dimmed],.modal-backdrop').forEach(el => {
+          if (el.getBoundingClientRect().width >= window.innerWidth * 0.8) el.style.display = 'none';
+        });
+        document.body.style.overflow = '';
+        document.body.style.position = '';
+        document.documentElement.style.overflow = '';
+      });
+      await page.waitForTimeout(500);
+      // scroll simulation \u2014 lazy-load \uCF58\uD150\uCE20 \uD2B8\uB9AC\uAC70
+      await page.evaluate(async () => {
+        const delay = (ms) => new Promise(r => setTimeout(r, ms));
+        const step = Math.floor(window.innerHeight * 0.7);
+        for (let y = 0; y < document.body.scrollHeight; y += step) {
+          window.scrollTo(0, y);
+          await delay(300);
+        }
+        window.scrollTo(0, document.body.scrollHeight);
+        await delay(500);
+        window.scrollTo(0, 0);
+        await delay(500);
+      });
+      await page.waitForTimeout(1000);
+      await page.screenshot({ path: ${JSON.stringify(outputPath)}, fullPage: true });
+      await browser.close();
+    })().catch(e => {
+      process.stderr.write(e.message);
+      process.exit(1);
+    });
+  `;
+  const result = spawnSync2("node", ["-e", scriptContent], {
     stdio: "pipe",
-    timeout: 6e4
+    timeout: 9e4,
+    env: getNodeEnvWithGlobalModules2()
   });
   if (result.status !== 0) {
     const stderr = result.stderr?.toString() ?? "";
-    throw new Error(`\uC2A4\uD06C\uB9B0\uC0F7 \uCEA1\uCC98 \uC2E4\uD328: ${stderr || "unknown error"}`);
+    const fallback = spawnSync2("npx", [
+      "playwright",
+      "screenshot",
+      "--browser",
+      "chromium",
+      "--viewport-size",
+      `${width},${height}`,
+      "--wait-for-timeout",
+      "3000",
+      "--full-page",
+      url,
+      outputPath
+    ], { stdio: "pipe", timeout: 6e4 });
+    if (fallback.status !== 0) {
+      throw new Error(`\uC2A4\uD06C\uB9B0\uC0F7 \uCEA1\uCC98 \uC2E4\uD328: ${stderr || "unknown error"}`);
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saeroon/cli",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Saeroon Hosting developer CLI — preview, validate, and deploy sites & templates",
   "private": false,
   "type": "module",