@saeroon/cli 0.2.9 → 0.2.11

package/dist/index.js

@@ -2547,9 +2547,8 @@ var VALID_BLOCK_TYPES = /* @__PURE__ */ new Set([
   "main-block",
   "aside-block",
   "article-block",
-  // Specialized (5)
+  // Specialized (4)
   "site-menu",
-  "floating-action-widget",
   "sticky-cta-bar",
   "cookie-consent-bar",
   "announcement-bar"
@@ -4035,6 +4034,25 @@ var EXTRACTION_SCRIPT = `
     return 'card-thumbnail';
   }
 
+  // \u2500\u2500 0. \uD31D\uC5C5/\uC624\uBC84\uB808\uC774 DOM \uC81C\uAC70 (\uC139\uC158 \uAC10\uC9C0 \uC804) \u2500\u2500
+  document.querySelectorAll(
+    'dialog[open], [class*=popup], [class*=layerpopup], [class*=modal]:not(body), [class*=cookie], [class*=consent], [class*=overlay]:not(body), [class*=dimmed]'
+  ).forEach(el => {
+    const rect = el.getBoundingClientRect();
+    const style = window.getComputedStyle(el);
+    const pos = style.position;
+    // fixed/absolute \uC704\uCE58 + \uBDF0\uD3EC\uD2B8 \uB300\uBD80\uBD84 \uCC28\uC9C0 \u2192 \uD31D\uC5C5/\uC624\uBC84\uB808\uC774
+    if ((pos === 'fixed' || pos === 'absolute') && rect.width >= window.innerWidth * 0.5) {
+      el.remove();
+      return;
+    }
+    // leeko-layerpopup \uAC19\uC740 \uD31D\uC5C5: class\uC5D0 popup/modal/overlay \uD3EC\uD568 + \uB2EB\uAE30 \uBC84\uD2BC \uC874\uC7AC
+    if (el.querySelector('[class*=close], [aria-label*=close], button')) {
+      const isSmall = rect.width < 100 && rect.height < 100;
+      if (!isSmall) el.remove();
+    }
+  });
+
   // \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);
@@ -4107,6 +4125,39 @@ var EXTRACTION_SCRIPT = `
     return !leafTags.has(tag);
   });
 
+  // \u2500\u2500 Fallback: \uC139\uC158 3\uAC1C \uBBF8\uB9CC\uC774\uBA74 content-based \uD0D0\uC0C9 \u2500\u2500
+  if (sectionEls.length < 3) {
+    const vw = window.innerWidth;
+    const candidates = [];
+    // \uBAA8\uB4E0 \uC694\uC18C\uB97C \uC21C\uD68C\uD558\uBA70 \uC139\uC158 \uD6C4\uBCF4 \uD0D0\uC0C9
+    document.querySelectorAll('header, footer, nav, section, article, aside, div, main').forEach(el => {
+      if (leafTags.has(el.tagName.toLowerCase())) return;
+      const rect = el.getBoundingClientRect();
+      // \uC804\uCCB4 \uD3ED\uC758 80% \uC774\uC0C1 + \uB192\uC774 100px \uC774\uC0C1
+      if (rect.width < vw * 0.8 || rect.height < 100) return;
+      // \uD615\uC81C\uAC00 \uC788\uB294 \uC694\uC18C\uB9CC (\uC139\uC158 = \uAC19\uC740 \uB808\uBCA8 \uD615\uC81C\uB4E4)
+      const parent = el.parentElement;
+      if (!parent) return;
+      const siblings = Array.from(parent.children).filter(s => {
+        const sr = s.getBoundingClientRect();
+        return sr.width >= vw * 0.8 && sr.height >= 100 && !leafTags.has(s.tagName.toLowerCase());
+      });
+      if (siblings.length >= 2) {
+        candidates.push({ el, siblings, parentEl: parent, sibCount: siblings.length });
+      }
+    });
+
+    // \uAC00\uC7A5 \uB9CE\uC740 \uD615\uC81C\uB97C \uAC00\uC9C4 \uADF8\uB8F9 \uC120\uD0DD
+    if (candidates.length > 0) {
+      candidates.sort((a, b) => b.sibCount - a.sibCount);
+      const best = candidates[0];
+      // \uAE30\uC874 \uACB0\uACFC\uBCF4\uB2E4 \uB098\uC740 \uACBD\uC6B0\uB9CC \uAD50\uCCB4
+      if (best.sibCount > sectionEls.length) {
+        sectionEls = best.siblings;
+      }
+    }
+  }
+
   const sections = [];
   let maxDepth = 0;
 
@@ -4265,7 +4316,22 @@ var EXTRACTION_SCRIPT = `
     if (ff) fontFamilySet.add(ff.split(',')[0].trim().replace(/['"]/g, ''));
   });
 
-  // 2c. Spacing
+  // 2c. Spacing (B-2: \uC815\uBC00 \uCD94\uCD9C)
+  function median(arr) {
+    if (arr.length === 0) return 0;
+    const s = [...arr].sort((a, b) => a - b);
+    const mid = Math.floor(s.length / 2);
+    return s.length % 2 ? s[mid] : Math.round((s[mid - 1] + s[mid]) / 2);
+  }
+  function mode(arr) {
+    if (arr.length === 0) return 0;
+    const freq = {};
+    arr.forEach(v => { const k = Math.round(v); freq[k] = (freq[k] || 0) + 1; });
+    return Number(Object.entries(freq).sort((a, b) => b[1] - a[1])[0][0]);
+  }
+  function roundTo4(v) { return Math.round(v / 4) * 4; } // 4px \uB2E8\uC704 \uC815\uADDC\uD654
+
+  // \uC139\uC158 \uAC04 \uAC04\uACA9
   const sectionGaps = [];
   for (let i = 1; i < sections.length; i++) {
     const prev = topLevelEls[i - 1];
@@ -4274,25 +4340,107 @@ var EXTRACTION_SCRIPT = `
       const prevRect = prev.getBoundingClientRect();
       const currRect = curr.getBoundingClientRect();
       const gap = currRect.top - prevRect.bottom;
-      if (gap > 0 && gap < 500) sectionGaps.push(gap);
+      if (gap > 0 && gap < 500) sectionGaps.push(Math.round(gap));
     }
   }
 
-  const firstContent = document.querySelector('main, [class*=container], [class*=wrapper], body > div > div');
-  const contentPadding = firstContent ? parsePixel(getComputedProp(firstContent, 'padding-left')) : 16;
+  // \uC139\uC158 padding-top / padding-bottom \uC218\uC9D1
+  const sectionPaddingTops = [];
+  const sectionPaddingBottoms = [];
+  topLevelEls.forEach(el => {
+    if (!el) return;
+    const pt = parsePixel(getComputedProp(el, 'padding-top'));
+    const pb = parsePixel(getComputedProp(el, 'padding-bottom'));
+    if (pt > 0) sectionPaddingTops.push(Math.round(pt));
+    if (pb > 0) sectionPaddingBottoms.push(Math.round(pb));
+  });
 
-  // card gap \uCD94\uC815: \uCCAB \uBC88\uC9F8 grid/flex \uCEE8\uD14C\uC774\uB108\uC758 gap
-  let cardGap = 0;
-  const gridContainers = document.querySelectorAll('[style*="grid"], [class*="grid"], [style*="flex"]');
-  for (const gc of gridContainers) {
-    const gap = parsePixel(getComputedProp(gc, 'gap') || getComputedProp(gc, 'column-gap'));
-    if (gap > 0) { cardGap = gap; break; }
-  }
+  // content padding: \uB2E4\uC218 \uCEE8\uD14C\uC774\uB108\uC5D0\uC11C \uC218\uC9D1
+  const contentPaddingValues = [];
+  const contentPaddingDetails = [];
+  const containerSelectors = 'main, [class*=container], [class*=wrapper], [class*=content], [class*=inner]';
+  document.querySelectorAll(containerSelectors).forEach(el => {
+    const pl = parsePixel(getComputedProp(el, 'padding-left'));
+    const pr = parsePixel(getComputedProp(el, 'padding-right'));
+    if (pl > 0 || pr > 0) {
+      contentPaddingValues.push(pl, pr);
+      contentPaddingDetails.push({ left: Math.round(pl), right: Math.round(pr), count: 1 });
+    }
+  });
+  // \uC911\uBCF5 \uD569\uC0B0
+  const paddingMap = {};
+  contentPaddingDetails.forEach(d => {
+    const k = d.left + ',' + d.right;
+    if (paddingMap[k]) paddingMap[k].count++;
+    else paddingMap[k] = { ...d };
+  });
+  const uniquePaddings = Object.values(paddingMap).sort((a, b) => b.count - a.count);
+  const contentPadding = contentPaddingValues.length > 0 ? mode(contentPaddingValues.filter(v => v > 0)) : 16;
+
+  // card gap: \uBAA8\uB4E0 grid/flex \uCEE8\uD14C\uC774\uB108\uC5D0\uC11C \uC218\uC9D1
+  const cardGapValues = [];
+  const allLayoutContainers = document.querySelectorAll('*');
+  allLayoutContainers.forEach(el => {
+    const display = getComputedProp(el, 'display');
+    if (!display || (!display.includes('grid') && !display.includes('flex'))) return;
+    const gap = parsePixel(getComputedProp(el, 'gap'));
+    const colGap = parsePixel(getComputedProp(el, 'column-gap'));
+    const rowGap = parsePixel(getComputedProp(el, 'row-gap'));
+    const v = gap || colGap || rowGap;
+    if (v > 0 && v < 200) cardGapValues.push(Math.round(v));
+  });
+  // margin \uAE30\uBC18 \uAC04\uACA9\uB3C4 \uAC10\uC9C0 (flex/grid \uC544\uB2CC \uB9AC\uC2A4\uD2B8)
+  document.querySelectorAll('ul, ol, [class*=list], [class*=cards]').forEach(parent => {
+    const children = Array.from(parent.children);
+    for (let i = 1; i < Math.min(children.length, 5); i++) {
+      const prevRect = children[i - 1].getBoundingClientRect();
+      const currRect = children[i].getBoundingClientRect();
+      const vGap = currRect.top - prevRect.bottom;
+      const hGap = currRect.left - prevRect.right;
+      const g = Math.abs(vGap) < 2 ? hGap : vGap; // \uC218\uD3C9 \uBC30\uCE58\uBA74 hGap
+      if (g > 0 && g < 200) cardGapValues.push(Math.round(g));
+    }
+  });
+  const cardGap = cardGapValues.length > 0 ? mode(cardGapValues) : 16;
+
+  // \uC139\uC158 \uB0B4 \uD615\uC81C \uC694\uC18C \uAC04 \uC218\uC9C1 \uAC04\uACA9 (elementGap)
+  const elementGapValues = [];
+  topLevelEls.forEach(sectionEl => {
+    if (!sectionEl) return;
+    const children = Array.from(sectionEl.children);
+    for (let i = 1; i < Math.min(children.length, 8); i++) {
+      const prevRect = children[i - 1].getBoundingClientRect();
+      const currRect = children[i].getBoundingClientRect();
+      const gap = currRect.top - prevRect.bottom;
+      if (gap > 0 && gap < 200) elementGapValues.push(Math.round(gap));
+    }
+  });
+  const elementGap = elementGapValues.length > 0 ? median(elementGapValues) : 16;
+
+  // \uBE48\uB3C4 \uBD84\uD3EC (4px \uB2E8\uC704\uB85C \uC815\uADDC\uD654)
+  const spacingFrequency = {};
+  [...sectionGaps, ...sectionPaddingTops, ...sectionPaddingBottoms, ...contentPaddingValues, ...cardGapValues, ...elementGapValues]
+    .filter(v => v > 0)
+    .forEach(v => { const k = roundTo4(v); spacingFrequency[k] = (spacingFrequency[k] || 0) + 1; });
 
-  // base unit \uCD94\uC815 (\uAC00\uC7A5 \uD754\uD55C \uAC04\uACA9\uAC12\uC758 \uCD5C\uB300\uACF5\uC57D\uC218)
-  const allGaps = [...sectionGaps, contentPadding, cardGap].filter(v => v > 0);
+  // base unit: \uBE48\uB3C4 \uCD5C\uB2E4 \uAC12 \uAE30\uBC18, 4/8 \uCCB4\uACC4 \uC790\uB3D9 \uAC10\uC9C0
+  const freqEntries = Object.entries(spacingFrequency).sort((a, b) => b[1] - a[1]);
+  const topValues = freqEntries.slice(0, 6).map(e => Number(e[0]));
   function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); }
-  const baseUnit = allGaps.length > 1 ? allGaps.reduce((a, b) => gcd(a, b)) : (allGaps[0] || 8);
+  const baseUnit = topValues.length > 1 ? topValues.reduce((a, b) => gcd(a, b)) : (topValues[0] || 8);
+
+  // spacing details \uAC1D\uCCB4
+  const spacingDetails = {
+    sectionGaps,
+    sectionPadding: {
+      top: sectionPaddingTops.length > 0 ? median(sectionPaddingTops) : 0,
+      bottom: sectionPaddingBottoms.length > 0 ? median(sectionPaddingBottoms) : 0,
+    },
+    contentPaddings: uniquePaddings.slice(0, 5),
+    cardGaps: [...new Set(cardGapValues)].sort((a, b) => a - b).slice(0, 10),
+    elementGap,
+    spacingFrequency,
+  };
 
   // 2d. BorderRadius
   const radiusValues = [];
@@ -4605,10 +4753,11 @@ var EXTRACTION_SCRIPT = `
         scale: typographyScale,
       },
       spacing: {
-        sectionGap: sectionGaps.length > 0 ? Math.round(sectionGaps.reduce((a, b) => a + b, 0) / sectionGaps.length) : 80,
+        sectionGap: sectionGaps.length > 0 ? median(sectionGaps) : 80,
         contentPadding,
         cardGap: cardGap || 16,
         baseUnit: Math.max(baseUnit, 4),
+        details: spacingDetails,
       },
       borderRadius: {
         small: uniqueRadii[0] || 0,
@@ -5042,7 +5191,17 @@ async function commandAnalyze(url, options) {
     console.log(chalk15.dim(`  Accent:     ${colors.accent}`));
     console.log(chalk15.dim(`  \uD3F0\uD2B8:       ${typography.fontFamilies.join(", ") || "(\uCD94\uCD9C \uC2E4\uD328)"}`));
     console.log(chalk15.dim(`  \uC139\uC158 \uAC04\uACA9:  ${spacing.sectionGap}px`));
+    console.log(chalk15.dim(`  \uCF58\uD150\uCE20 \uD328\uB529: ${spacing.contentPadding}px`));
+    console.log(chalk15.dim(`  \uCE74\uB4DC \uAC04\uACA9:  ${spacing.cardGap}px`));
     console.log(chalk15.dim(`  \uAE30\uBCF8 \uB2E8\uC704:  ${spacing.baseUnit}px`));
+    if (spacing.details) {
+      const d = spacing.details;
+      console.log(chalk15.dim(`  \uC139\uC158 \uD328\uB529:  top ${d.sectionPadding.top}px / bottom ${d.sectionPadding.bottom}px`));
+      console.log(chalk15.dim(`  \uC694\uC18C \uAC04\uACA9:  ${d.elementGap}px`));
+      if (d.cardGaps.length > 1) {
+        console.log(chalk15.dim(`  \uCE74\uB4DC \uAC04\uACA9 \uBD84\uD3EC: [${d.cardGaps.join(", ")}]px`));
+      }
+    }
     console.log("");
     console.log(chalk15.bold("\uC778\uD130\uB799\uC158"));
     const { interactions } = analysis;
@@ -5232,6 +5391,27 @@ async function runMultiViewportCompare(options) {
   console.log("");
   const hasMagick = checkCommand("magick");
   const results = [];
+  const baselineMap = /* @__PURE__ */ new Map();
+  if (hasMagick) {
+    const blSpinner = spinner("\uAE30\uC900\uC120 \uCE21\uC815 \uC911 (\uB808\uD37C\uB7F0\uC2A4 2\uD68C \uCEA1\uCC98)...");
+    for (const vp of viewports) {
+      const blRef1 = join3(outputDir, `baseline-1-${vp.name}.png`);
+      const blRef2 = join3(outputDir, `baseline-2-${vp.name}.png`);
+      const blDiff = join3(outputDir, `baseline-diff-${vp.name}.png`);
+      try {
+        captureScreenshot2(options.ref, blRef1, vp.width, vp.height);
+        captureScreenshot2(options.ref, blRef2, vp.width, vp.height);
+        const blPct = generateDiffWithMagick(blRef1, blRef2, blDiff);
+        baselineMap.set(vp.name, blPct >= 0 ? blPct : 0);
+      } catch {
+        baselineMap.set(vp.name, 0);
+      }
+    }
+    const blValues = [...baselineMap.values()];
+    const blAvg = blValues.reduce((a, b) => a + b, 0) / blValues.length;
+    blSpinner.stop(chalk16.dim(`  \uAE30\uC900\uC120 \uB178\uC774\uC988: \uD3C9\uADE0 ${blAvg.toFixed(1)}% (${blValues.map((v, i) => `${viewports[i].name} ${v.toFixed(1)}%`).join(", ")})`));
+    console.log("");
+  }
   for (const vp of viewports) {
     const vpSpinner = spinner(`${vp.name} (${vp.width}px) \uBE44\uAD50 \uC911...`);
     const refPath = join3(outputDir, `ref-${vp.name}.png`);
@@ -5247,17 +5427,23 @@ async function runMultiViewportCompare(options) {
         generateSideBySide(refPath, previewPath, diffPath);
         diffPercentage = -1;
       }
+      const baselinePct = baselineMap.get(vp.name) ?? 0;
+      const adjustedPct = diffPercentage >= 0 ? Math.round(Math.max(0, diffPercentage - baselinePct) * 10) / 10 : -1;
       results.push({
         name: vp.name,
         width: vp.width,
         referenceScreenshot: refPath,
         previewScreenshot: previewPath,
         diffScreenshot: diffPath,
-        diffPercentage
+        diffPercentage,
+        baselineDiffPercentage: baselinePct,
+        adjustedDiffPercentage: adjustedPct
       });
-      const pctText = diffPercentage >= 0 ? `${diffPercentage.toFixed(1)}%` : "(\uACC4\uC0B0 \uBD88\uAC00)";
-      const pctColor = diffPercentage <= 10 ? chalk16.green : diffPercentage <= 25 ? chalk16.yellow : chalk16.red;
-      vpSpinner.stop(`  ${vp.name}: diff ${pctColor(pctText)}`);
+      const rawText = diffPercentage >= 0 ? `${diffPercentage.toFixed(1)}%` : "(\uACC4\uC0B0 \uBD88\uAC00)";
+      const adjText = adjustedPct >= 0 ? `${adjustedPct.toFixed(1)}%` : "";
+      const adjColor = adjustedPct <= 10 ? chalk16.green : adjustedPct <= 25 ? chalk16.yellow : chalk16.red;
+      const label = baselinePct > 0 ? `  ${vp.name}: raw ${rawText} \u2192 ${chalk16.bold("adjusted")} ${adjColor(adjText)} ${chalk16.dim(`(baseline ${baselinePct.toFixed(1)}%)`)}` : `  ${vp.name}: diff ${adjColor(rawText)}`;
+      vpSpinner.stop(label);
     } catch (error) {
       vpSpinner.stop(chalk16.red(`  ${vp.name}: \uC2E4\uD328 \u2014 ${error instanceof Error ? error.message : String(error)}`));
       results.push({
@@ -5272,27 +5458,38 @@ async function runMultiViewportCompare(options) {
   }
   const validResults = results.filter((r) => r.diffPercentage >= 0);
   const overallDiff = validResults.length > 0 ? validResults.reduce((sum, r) => sum + r.diffPercentage, 0) / validResults.length : -1;
+  const adjustedResults = results.filter((r) => (r.adjustedDiffPercentage ?? -1) >= 0);
+  const overallAdjusted = adjustedResults.length > 0 ? adjustedResults.reduce((sum, r) => sum + r.adjustedDiffPercentage, 0) / adjustedResults.length : void 0;
   const report = {
     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
     referenceUrl: options.ref,
     previewUrl: options.preview,
     viewports: results,
-    overallDiffPercentage: Math.round(overallDiff * 10) / 10
+    overallDiffPercentage: Math.round(overallDiff * 10) / 10,
+    overallAdjustedDiffPercentage: overallAdjusted != null ? Math.round(overallAdjusted * 10) / 10 : void 0
   };
   const reportPath = join3(outputDir, "comparison-report.json");
   await writeFile9(reportPath, JSON.stringify(report, null, 2), "utf-8");
   console.log("");
   console.log(chalk16.bold("\uBE44\uAD50 \uC694\uC57D"));
+  const hasBaseline = results.some((r) => (r.baselineDiffPercentage ?? 0) > 0);
   for (const r of results) {
-    const pct = r.diffPercentage >= 0 ? `${r.diffPercentage.toFixed(1)}%` : "N/A";
-    const icon = r.diffPercentage <= 10 ? chalk16.green("\u25CF") : r.diffPercentage <= 25 ? chalk16.yellow("\u25CF") : chalk16.red("\u25CF");
-    console.log(`  ${icon} ${r.name.padEnd(8)} ${pct.padStart(6)}  ${chalk16.dim(r.diffScreenshot)}`);
+    const adjPct = r.adjustedDiffPercentage ?? r.diffPercentage;
+    const displayPct = adjPct >= 0 ? `${adjPct.toFixed(1)}%` : "N/A";
+    const icon = adjPct <= 10 ? chalk16.green("\u25CF") : adjPct <= 25 ? chalk16.yellow("\u25CF") : chalk16.red("\u25CF");
+    const blNote = hasBaseline && (r.baselineDiffPercentage ?? 0) > 0 ? chalk16.dim(` (raw ${r.diffPercentage.toFixed(1)}%, baseline \u2212${r.baselineDiffPercentage.toFixed(1)}%)`) : "";
+    console.log(`  ${icon} ${r.name.padEnd(8)} ${displayPct.padStart(6)}${blNote}`);
   }
+  const judgeDiff = overallAdjusted ?? overallDiff;
   console.log("");
-  if (overallDiff >= 0) {
-    const overallColor = overallDiff <= 10 ? chalk16.green : overallDiff <= 25 ? chalk16.yellow : chalk16.red;
-    console.log(chalk16.bold(`\uC804\uCCB4 \uD3C9\uADE0 diff: ${overallColor(`${overallDiff.toFixed(1)}%`)}`));
-    if (overallDiff <= 10) {
+  if (judgeDiff >= 0) {
+    const overallColor = judgeDiff <= 10 ? chalk16.green : judgeDiff <= 25 ? chalk16.yellow : chalk16.red;
+    const label = overallAdjusted != null ? "\uC804\uCCB4 \uD3C9\uADE0 diff (adjusted)" : "\uC804\uCCB4 \uD3C9\uADE0 diff";
+    console.log(chalk16.bold(`${label}: ${overallColor(`${judgeDiff.toFixed(1)}%`)}`));
+    if (overallAdjusted != null && overallAdjusted !== overallDiff) {
+      console.log(chalk16.dim(`  (raw \uD3C9\uADE0: ${overallDiff.toFixed(1)}%, \uAE30\uC900\uC120 \uCC28\uAC10: \u2212${(overallDiff - overallAdjusted).toFixed(1)}%)`));
+    }
+    if (judgeDiff <= 10) {
       console.log(chalk16.green("  \u2192 \uBE44\uAD50 \uB8E8\uD504 \uC644\uB8CC! CEO \uCD5C\uC885 \uD655\uC778 \uC694\uCCAD \uAC00\uB2A5"));
     } else {
       console.log(chalk16.yellow("  \u2192 diff > 10%: Vision \uBE44\uAD50 \u2192 \uC2A4\uD0A4\uB9C8 \uC218\uC815 \uD544\uC694"));

package/package.json

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