@su-record/vibe 2.9.38 → 2.10.0

package/hooks/scripts/clone-refine.js

@@ -0,0 +1,510 @@
+#!/usr/bin/env node
+
+/**
+ * clone-refine.js — computed.json → sections.json
+ *
+ * Usage:
+ *   node clone-refine.js <rendered.html> <computed.json> --out=<sections.json> --bp=mo|pc
+ *     [--stylesheets=<stylesheets.json>] [--asset-map=<asset-map.json>]
+ *
+ * Refinement steps:
+ *   1. Tree reconstruction (flat node list → tree)
+ *   2. Section detection (semantic landmarks + visual heuristics)
+ *   3. Repeated pattern detection → component candidates (structural hash, ≥3 siblings)
+ *   4. Design token extraction with bucketing (colors / typography / spacing / radius / shadow)
+ *   5. Token-aware CSS values (e.g. color "#0070f3" → "var(--color-blue-500)")
+ *
+ * Output schema: see SKILL.md.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+// ─── CLI ────────────────────────────────────────────────────────────
+function parseArgs(argv) {
+  const [, , htmlPath, computedPath, ...rest] = argv;
+  const opts = {};
+  for (const a of rest) {
+    if (a.startsWith('--out=')) opts.out = a.slice(6);
+    else if (a.startsWith('--bp=')) opts.bp = a.slice(5);
+    else if (a.startsWith('--stylesheets=')) opts.stylesheets = a.slice(14);
+    else if (a.startsWith('--asset-map=')) opts.assetMap = a.slice(12);
+  }
+  return { htmlPath, computedPath, opts };
+}
+
+const { htmlPath, computedPath, opts } = parseArgs(process.argv);
+if (!htmlPath || !computedPath || !opts.out) {
+  console.error('Usage: node clone-refine.js <rendered.html> <computed.json> --out=<sections.json> --bp=mo|pc');
+  process.exit(1);
+}
+
+// ─── Tree reconstruction ────────────────────────────────────────────
+function buildTree(nodes) {
+  const byId = new Map();
+  for (const n of nodes) byId.set(n.id, { ...n, children: [] });
+  const roots = [];
+  for (const n of byId.values()) {
+    if (n.parent && byId.has(n.parent)) byId.get(n.parent).children.push(n);
+    else roots.push(n);
+  }
+  return { roots, byId };
+}
+
+// ─── CSS value parsers ──────────────────────────────────────────────
+function parsePx(val) {
+  if (typeof val !== 'string') return null;
+  const m = /^(-?\d+(?:\.\d+)?)px$/.exec(val.trim());
+  return m ? Number(m[1]) : null;
+}
+
+function parseColor(val) {
+  if (typeof val !== 'string') return null;
+  const v = val.trim().toLowerCase();
+  if (!v || v === 'transparent' || v === 'currentcolor' || v === 'inherit') return null;
+  // rgb(a) / hsl(a)
+  let m = /^rgba?\(([^)]+)\)$/.exec(v);
+  if (m) {
+    const parts = m[1].split(/[,/\s]+/).filter(Boolean).map(Number);
+    if (parts.length >= 3 && parts.every((x) => !isNaN(x))) {
+      const [r, g, b, a] = parts;
+      if (a !== undefined && a < 1) return `rgba(${r}, ${g}, ${b}, ${a})`;
+      const hex = '#' + [r, g, b].map((x) => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, '0')).join('');
+      return hex;
+    }
+  }
+  m = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(v);
+  if (m) {
+    let h = m[1];
+    if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+    if (h.length === 4) h = h.split('').map((c) => c + c).join('');
+    return '#' + h;
+  }
+  return v;
+}
+
+// Snap spacing values to the closest grid step (4px → 8px → 16px)
+function snapSpacing(px) {
+  if (px === null || px === undefined) return null;
+  if (px === 0) return 0;
+  const abs = Math.abs(px);
+  if (abs < 8) return Math.round(px); // sub-grid keep
+  if (abs < 32) return Math.round(px / 4) * 4;
+  if (abs < 96) return Math.round(px / 8) * 8;
+  return Math.round(px / 16) * 16;
+}
+
+// ─── Token extraction ───────────────────────────────────────────────
+function extractTokens(nodes) {
+  const colorFreq = new Map();
+  const typoFreq = new Map();
+  const spacingFreq = new Map();
+  const radiusFreq = new Map();
+  const shadowFreq = new Map();
+
+  const addColor = (val) => {
+    const c = parseColor(val);
+    if (c) colorFreq.set(c, (colorFreq.get(c) || 0) + 1);
+  };
+  const addSpacing = (px) => {
+    if (px === null || px === undefined) return;
+    const snapped = snapSpacing(px);
+    if (snapped === null) return;
+    spacingFreq.set(snapped, (spacingFreq.get(snapped) || 0) + 1);
+  };
+
+  for (const n of nodes) {
+    if (!n.css) continue;
+    addColor(n.css['color']);
+    addColor(n.css['background-color']);
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      addColor(n.css[`border-${side}-color`]);
+    }
+    // gradient stops
+    const bg = n.css['background-image'];
+    if (bg && /gradient/i.test(bg)) {
+      const re = /(?:#[0-9a-f]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\))/gi;
+      let m;
+      while ((m = re.exec(bg)) !== null) addColor(m[0]);
+    }
+
+    // typography
+    const ff = n.css['font-family'];
+    const fs = n.css['font-size'];
+    const fw = n.css['font-weight'];
+    const lh = n.css['line-height'];
+    const ls = n.css['letter-spacing'];
+    if (ff && fs) {
+      const key = JSON.stringify({ ff, fs, fw: fw || '400', lh: lh || 'normal', ls: ls || 'normal' });
+      typoFreq.set(key, (typoFreq.get(key) || 0) + 1);
+    }
+
+    // spacing
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      addSpacing(parsePx(n.css[`margin-${side}`]));
+      addSpacing(parsePx(n.css[`padding-${side}`]));
+    }
+    addSpacing(parsePx(n.css['gap']));
+    addSpacing(parsePx(n.css['row-gap']));
+    addSpacing(parsePx(n.css['column-gap']));
+
+    // radius
+    for (const corner of ['top-left', 'top-right', 'bottom-left', 'bottom-right']) {
+      const r = parsePx(n.css[`border-${corner}-radius`]);
+      if (r !== null && r > 0) radiusFreq.set(r, (radiusFreq.get(r) || 0) + 1);
+    }
+
+    // shadow
+    const sh = n.css['box-shadow'];
+    if (sh && sh !== 'none') shadowFreq.set(sh, (shadowFreq.get(sh) || 0) + 1);
+  }
+
+  const sortedTop = (m, limit) => Array.from(m.entries())
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, limit)
+    .map(([k, count]) => ({ value: k, count }));
+
+  // Name tokens
+  const colors = sortedTop(colorFreq, 20).map((t, i) => ({
+    name: nameColor(t.value, i),
+    value: t.value,
+    count: t.count,
+  }));
+
+  const typography = sortedTop(typoFreq, 12).map((t, i) => {
+    const parsed = JSON.parse(t.value);
+    return {
+      name: `text-${i + 1}`,
+      family: parsed.ff,
+      size: parsed.fs,
+      weight: parsed.fw,
+      lineHeight: parsed.lh,
+      letterSpacing: parsed.ls,
+      count: t.count,
+    };
+  });
+
+  const spacing = sortedTop(spacingFreq, 16).map((t) => ({
+    name: `space-${t.value}`,
+    value: `${t.value}px`,
+    count: t.count,
+  }));
+
+  const radius = sortedTop(radiusFreq, 8).map((t) => ({
+    name: `radius-${t.value}`,
+    value: `${t.value}px`,
+    count: t.count,
+  }));
+
+  const shadow = sortedTop(shadowFreq, 6).map((t, i) => ({
+    name: `shadow-${i + 1}`,
+    value: t.value,
+    count: t.count,
+  }));
+
+  return { colors, typography, spacing, radius, shadow };
+}
+
+function nameColor(hex, idx) {
+  // Heuristic naming: hex → semantic label by brightness/saturation
+  if (hex === '#ffffff' || hex === '#fff') return 'color-white';
+  if (hex === '#000000' || hex === '#000') return 'color-black';
+  if (hex.startsWith('rgba')) return `color-overlay-${idx + 1}`;
+  // Compute HSL roughly for naming
+  const m = /^#([0-9a-f]{6})$/.exec(hex);
+  if (m) {
+    const r = parseInt(m[1].slice(0, 2), 16) / 255;
+    const g = parseInt(m[1].slice(2, 4), 16) / 255;
+    const b = parseInt(m[1].slice(4, 6), 16) / 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    const d = max - min;
+    if (d < 0.06) return `color-gray-${Math.round(l * 100)}`;
+    let h = 0;
+    if (max === r) h = ((g - b) / d) % 6;
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h = Math.round(h * 60);
+    if (h < 0) h += 360;
+    const hue =
+      h < 15 ? 'red' :
+      h < 45 ? 'orange' :
+      h < 70 ? 'yellow' :
+      h < 165 ? 'green' :
+      h < 200 ? 'teal' :
+      h < 250 ? 'blue' :
+      h < 290 ? 'purple' :
+      h < 330 ? 'pink' : 'red';
+    return `color-${hue}-${Math.round(l * 100)}`;
+  }
+  return `color-${idx + 1}`;
+}
+
+// ─── Section detection ──────────────────────────────────────────────
+const SEMANTIC_SECTION_TAGS = new Set(['header', 'nav', 'main', 'section', 'article', 'aside', 'footer']);
+
+function findSections(roots) {
+  // 1. Find <body>
+  const html = roots.find((r) => r.tag === 'html');
+  if (!html) return [];
+  const body = html.children.find((c) => c.tag === 'body');
+  if (!body) return [];
+
+  // 2. Collect candidate landmarks from body subtree (BFS, prefer top-level)
+  const sections = [];
+  const seenIds = new Set();
+
+  const tryAdd = (node, label) => {
+    if (seenIds.has(node.id)) return;
+    if (!node.box || node.box.h < 40) return;
+    seenIds.add(node.id);
+    sections.push({ node, label });
+  };
+
+  // First pass: explicit semantic tags within body
+  const queue = [...body.children];
+  while (queue.length) {
+    const n = queue.shift();
+    if (SEMANTIC_SECTION_TAGS.has(n.tag)) {
+      tryAdd(n, sectionLabelFor(n));
+      // Don't descend — keep section as atomic unit
+    } else {
+      queue.push(...n.children);
+    }
+  }
+
+  // Second pass: if no semantic sections found, fall back to top-level body children with significant height
+  if (sections.length === 0) {
+    for (const child of body.children) {
+      if (child.box && child.box.h >= 100) tryAdd(child, sectionLabelFor(child));
+    }
+  }
+
+  // Sort by visual order (y position)
+  sections.sort((a, b) => a.node.box.y - b.node.box.y);
+
+  // Disambiguate labels (Hero → Hero, Hero-2 if duplicate)
+  const labelCounts = new Map();
+  for (const s of sections) {
+    const base = s.label;
+    const count = (labelCounts.get(base) || 0) + 1;
+    labelCounts.set(base, count);
+    s.label = count > 1 ? `${base}-${count}` : base;
+  }
+
+  return sections;
+}
+
+function sectionLabelFor(node) {
+  // Prefer explicit class/id hints
+  const cls = (node.classes || '').toLowerCase();
+  const hints = [
+    ['hero', 'Hero'],
+    ['banner', 'Banner'],
+    ['header', 'Header'],
+    ['nav', 'Nav'],
+    ['footer', 'Footer'],
+    ['feature', 'Features'],
+    ['testimonial', 'Testimonials'],
+    ['pricing', 'Pricing'],
+    ['cta', 'CTA'],
+    ['faq', 'FAQ'],
+    ['gallery', 'Gallery'],
+    ['contact', 'Contact'],
+  ];
+  for (const [pat, name] of hints) if (cls.includes(pat) || (node.attrs && (node.attrs.role || '').includes(pat))) return name;
+  // Fall back to semantic tag
+  const tagLabels = { header: 'Header', footer: 'Footer', nav: 'Nav', main: 'Main', article: 'Article', aside: 'Aside' };
+  if (tagLabels[node.tag]) return tagLabels[node.tag];
+  return 'Section';
+}
+
+// ─── Component pattern detection ────────────────────────────────────
+// Structural hash: tag + class signature + first-level child tag list + leaf count tier
+function structuralHash(node, depth = 0) {
+  if (depth > 3) return '';
+  const classSig = (node.classes || '').split(/\s+/).filter(Boolean).sort().slice(0, 4).join('.');
+  const childTags = (node.children || []).map((c) => c.tag).slice(0, 8).join(',');
+  const childCount = (node.children || []).length;
+  const sizeBucket = node.box ? `${Math.round(node.box.w / 40)}x${Math.round(node.box.h / 40)}` : '?';
+  return `${node.tag}|${classSig}|${childTags}|${childCount}|${sizeBucket}`;
+}
+
+function detectComponents(sectionRoot) {
+  // Group siblings at each depth by structural hash
+  const candidates = [];
+  const walk = (parent) => {
+    if (!parent.children || parent.children.length < 3) {
+      for (const c of (parent.children || [])) walk(c);
+      return;
+    }
+    const groups = new Map();
+    for (const child of parent.children) {
+      const hash = structuralHash(child);
+      if (!groups.has(hash)) groups.set(hash, []);
+      groups.get(hash).push(child);
+    }
+    for (const [hash, members] of groups) {
+      if (members.length >= 3) {
+        candidates.push({
+          hash,
+          count: members.length,
+          parentId: parent.id,
+          memberIds: members.map((m) => m.id),
+          exemplarTag: members[0].tag,
+          exemplarClasses: members[0].classes,
+          exemplarBox: members[0].box,
+        });
+      }
+    }
+    for (const c of parent.children) walk(c);
+  };
+  walk(sectionRoot);
+  return candidates;
+}
+
+// ─── BG image classification ────────────────────────────────────────
+function classifyImages(node) {
+  const out = { bg: [], content: [] };
+  const walk = (n) => {
+    if (n.css) {
+      const bg = n.css['background-image'];
+      if (bg && bg !== 'none' && /url\(/.test(bg)) {
+        const re = /url\(['"]?([^'")]+)['"]?\)/g;
+        let m;
+        while ((m = re.exec(bg)) !== null) out.bg.push(m[1]);
+      }
+    }
+    if (n.tag === 'img') {
+      const src = (n.attrs && (n.attrs.currentSrc || n.attrs.src));
+      if (src) out.content.push(src);
+    }
+    for (const c of (n.children || [])) walk(c);
+  };
+  walk(node);
+  return out;
+}
+
+// ─── Trim children to essential layout/text/image nodes ─────────────
+function trimSubtree(node) {
+  if (!node) return null;
+  const trimmed = {
+    id: node.id,
+    tag: node.tag,
+    classes: node.classes || '',
+    pseudo: node.pseudo || false,
+    isSvg: node.isSvg || false,
+    box: node.box,
+    css: node.css || {},
+  };
+  if (node.attrs) {
+    const a = node.attrs;
+    const keep = {};
+    for (const k of ['src', 'currentSrc', 'href', 'alt', 'title', 'role', 'ariaLabel', 'type', 'name', 'placeholder']) {
+      if (a[k]) keep[k] = a[k];
+    }
+    if (Object.keys(keep).length) trimmed.attrs = keep;
+  }
+  if (node.text) trimmed.text = node.text;
+  if (node.svgMarkup) trimmed.svgMarkup = node.svgMarkup;
+  if (node.children && node.children.length) {
+    trimmed.children = node.children.map(trimSubtree);
+  }
+  return trimmed;
+}
+
+// ─── Token application: replace literal values with token refs ──────
+function applyTokens(nodes, tokens) {
+  const colorByValue = new Map(tokens.colors.map((t) => [t.value, t.name]));
+  const spacingByValue = new Map(tokens.spacing.map((t) => [t.value, t.name]));
+  const radiusByValue = new Map(tokens.radius.map((t) => [t.value, t.name]));
+  const shadowByValue = new Map(tokens.shadow.map((t) => [t.value, t.name]));
+
+  const sub = (val, map) => {
+    if (!val) return val;
+    const normalized = parseColor(val) || val;
+    if (map.has(normalized)) return `var(--${map.get(normalized)})`;
+    if (map.has(val)) return `var(--${map.get(val)})`;
+    return val;
+  };
+
+  const walkAndApply = (n) => {
+    if (n.css) {
+      for (const prop of Object.keys(n.css)) {
+        if (prop === 'color' || prop === 'background-color' || prop.endsWith('-color')) {
+          n.css[prop] = sub(n.css[prop], colorByValue);
+        } else if (prop.startsWith('margin-') || prop.startsWith('padding-') || prop === 'gap' || prop === 'row-gap' || prop === 'column-gap') {
+          const px = parsePx(n.css[prop]);
+          if (px !== null) {
+            const snapped = snapSpacing(px);
+            const key = `${snapped}px`;
+            if (spacingByValue.has(key)) n.css[prop] = `var(--${spacingByValue.get(key)})`;
+          }
+        } else if (prop.endsWith('-radius')) {
+          if (radiusByValue.has(n.css[prop])) n.css[prop] = `var(--${radiusByValue.get(n.css[prop])})`;
+        } else if (prop === 'box-shadow') {
+          if (shadowByValue.has(n.css[prop])) n.css[prop] = `var(--${shadowByValue.get(n.css[prop])})`;
+        }
+      }
+    }
+    for (const c of (n.children || [])) walkAndApply(c);
+  };
+  for (const n of nodes) walkAndApply(n);
+}
+
+// ─── Main ───────────────────────────────────────────────────────────
+function main() {
+  const computed = JSON.parse(fs.readFileSync(computedPath, 'utf8'));
+  const { roots, byId } = buildTree(computed.nodes);
+
+  // Token extraction first (across whole document)
+  const tokens = extractTokens(computed.nodes);
+
+  // Section detection
+  const sectionEntries = findSections(roots);
+  console.log(`[clone-refine] detected ${sectionEntries.length} sections, ${tokens.colors.length} colors, ${tokens.typography.length} typo, ${tokens.spacing.length} spacings`);
+
+  // Build refined sections
+  const sections = sectionEntries.map(({ node, label }) => {
+    const subtree = trimSubtree(node);
+    const components = detectComponents(node);
+    const images = classifyImages(node);
+    return {
+      name: label,
+      nodeRef: node.id,
+      tag: node.tag,
+      classes: node.classes,
+      box: node.box,
+      css: node.css || {},
+      components,
+      images,
+      children: (subtree.children || []),
+    };
+  });
+
+  // Apply token substitution last (so original values are preserved through detection)
+  applyTokens(sections, tokens);
+
+  const out = {
+    meta: {
+      feature: path.basename(path.dirname(opts.out)) || 'feature',
+      url: computed.meta.url,
+      viewport: computed.meta.viewport,
+      bp: opts.bp || computed.meta.bp,
+      generatedAt: new Date().toISOString(),
+    },
+    tokens,
+    sections,
+  };
+
+  fs.mkdirSync(path.dirname(opts.out), { recursive: true });
+  fs.writeFileSync(opts.out, JSON.stringify(out, null, 2));
+  console.log(`[clone-refine] done → ${opts.out}`);
+}
+
+try { main(); }
+catch (e) {
+  console.error(`[clone-refine] FAIL: ${e.message}`);
+  if (process.env.DEBUG) console.error(e.stack);
+  process.exit(1);
+}