@su-record/vibe 3.2.64 → 4.0.1

package/hooks/scripts/clone-spec.js

@@ -1,262 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * clone-spec.js — sections.json → per-section build-contract spec (*.spec.md)
- *
- * Usage:
- *   node clone-spec.js <sections.json> --out=<dir> [--section=Name] [--feature=name]
- *
- * Why this exists (clone Phase 3, Step 0 — the spec gate):
- *   No section is built without a completed spec. The spec is the contract AND the
- *   audit trail: it forces extraction rigor (interaction model, states, assets, text,
- *   computed CSS) into a single reviewable file before any component code is written.
- *   Generated deterministically from sections.json — Claude fills the TODOs, never guesses.
- *
- * Output (in <dir>):
- *   <Section>.spec.md   — one contract per detected section
- */
-
-import fs from 'fs';
-import path from 'path';
-
-// ─── CLI ────────────────────────────────────────────────────────────
-function parseArgs(argv) {
-  const [, , sectionsPath, ...rest] = argv;
-  const opts = {};
-  for (const a of rest) {
-    if (a.startsWith('--out=')) opts.out = a.slice(6);
-    else if (a.startsWith('--section=')) opts.section = a.slice(10);
-    else if (a.startsWith('--feature=')) opts.feature = a.slice(10);
-    else if (a.startsWith('--behaviors=')) opts.behaviors = a.slice(12);
-    else if (a === '--real-content') opts.realContent = true;
-  }
-  return { sectionsPath, opts };
-}
-
-const { sectionsPath, opts } = parseArgs(process.argv);
-
-// ─── Helpers ────────────────────────────────────────────────────────
-function safeName(name) {
-  return (name || 'Section').replace(/[^a-zA-Z0-9_-]/g, '-');
-}
-
-function collectText(section, limit = 25) {
-  const texts = [];
-  const seen = new Set();
-  const visit = (n) => {
-    if (n.text) {
-      const t = n.text.length > 120 ? n.text.slice(0, 120) + '…' : n.text;
-      if (!seen.has(t)) { seen.add(t); texts.push(t); }
-    }
-    for (const c of (n.children || [])) visit(c);
-  };
-  for (const c of (section.children || [])) visit(c);
-  return texts.slice(0, limit);
-}
-
-function cssBlock(css) {
-  const entries = Object.entries(css || {}).filter(([k]) => k !== '--vars');
-  if (!entries.length) return '(none captured)';
-  return entries.map(([k, v]) => `${k}: ${v};`).join('\n');
-}
-
-function interactionBlock(it) {
-  if (!it) return '- **Heuristic guess:** `unknown`\n';
-  const signals = (it.signals || []).length
-    ? it.signals.map((s) => `  - ${s}`).join('\n')
-    : '  - (no interaction signals detected — likely static)';
-  return [
-    `- **Heuristic guess:** \`${it.model}\` (confidence: ${it.confidence})`,
-    `- **Signals detected:**`,
-    signals,
-    `- **Confirmed model:** TODO — verify on the live site, then record the final model.`,
-    `- **Trigger & transition:** TODO — exact trigger (click/scroll/hover/time), duration, easing.`,
-  ].join('\n');
-}
-
-function statesBlock(states) {
-  if (!states || !states.length) {
-    return '- None harvested. TODO: confirm there are truly no hover/focus/active/open states.';
-  }
-  return states.map((sr) => {
-    const decls = Object.entries(sr.css || {}).map(([k, v]) => `    - ${k}: ${v}`).join('\n');
-    const media = sr.media ? ` _(under \`@media ${sr.media}\`)_` : '';
-    return `- \`${sr.selector}\`${media}\n${decls}`;
-  }).join('\n');
-}
-
-function componentsBlock(components) {
-  if (!components || !components.length) return '- None detected.';
-  return components.map((c) => {
-    const cls = c.exemplarClasses ? `.${String(c.exemplarClasses).split(/\s+/).slice(0, 3).join('.')}` : '';
-    return `- \`<${c.exemplarTag}>${cls}\` ×${c.count} → TODO: reuse existing component or create new?`;
-  }).join('\n');
-}
-
-// True if any node in the section subtree matches a behavior's tag (+ optional class).
-function sectionHasNode(section, tag, cls) {
-  const hit = (n) => {
-    if (n.tag === tag && (!cls || (n.classes || '').split(/\s+/).includes(cls))) return true;
-    return (n.children || []).some(hit);
-  };
-  return (section.children || []).some(hit);
-}
-
-function diffLines(changed) {
-  return Object.entries(changed)
-    .map(([k, v]) => `    - ${k}: \`${v.from}\` → \`${v.to}\``).join('\n');
-}
-
-function behaviorsBlock(section, behaviors) {
-  if (!behaviors) return null;
-  const inSection = (list) => (list || []).filter((b) => sectionHasNode(section, b.tag, b.cls));
-  const scroll = inSection(behaviors.scroll);
-  const hover = inSection(behaviors.hover);
-  const inview = inSection(behaviors.inview);
-  const timed = inSection(behaviors.timeDriven);
-  // Tab groups aren't tag-keyed; attach to any section that contains a [role=tab]-ish node.
-  const tabs = (behaviors.interactive || []).filter(() =>
-    sectionHasNode(section, 'button') || sectionHasNode(section, 'li') || sectionHasNode(section, 'a'),
-  );
-  const lib = behaviors.scrollLib;
-  if (!scroll.length && !tabs.length && !hover.length && !inview.length && !timed.length && !lib) return null;
-
-  const lines = [];
-  for (const b of scroll) {
-    lines.push(`- **Scroll-triggered** on \`${b.label}\` (past ~${b.triggerScrollY}px scroll):\n${diffLines(b.changed)}`);
-  }
-  for (const t of tabs) {
-    const labels = (t.tabLabels || []).map((l) => `"${l}"`).join(', ') || '(unlabeled)';
-    const swap = t.contentSwapsOnClick
-      ? '**content SWAPS on click** → extract every tab\'s content/assets, build click-driven'
-      : 'no content swap detected (styling-only tabs)';
-    lines.push(`- **Tab group** ×${t.count} [${labels}]: ${swap}`);
-  }
-  for (const b of hover) {
-    const tr = b.transition && b.transition !== 'all 0s ease 0s' ? ` (transition: \`${b.transition}\`)` : '';
-    lines.push(`- **Hover** on \`${b.label}\`${tr}:\n${diffLines(b.changed)}`);
-  }
-  for (const b of inview) {
-    lines.push(`- **In-view entrance** on \`${b.label}\` (enters at ~${b.triggerY}px):\n${diffLines(b.changed)}`);
-  }
-  for (const b of timed) {
-    lines.push(`- **Time-driven** \`${b.label}\` — ${b.mutations} mutations/3s [${(b.kinds || []).join(', ')}] → carousel/auto-cycle candidate`);
-  }
-  if (lib) {
-    lines.push(`- **Smooth-scroll library (page-level):** ${lib.name} (evidence: \`${lib.evidence}\`) → wire in globals, not per-section`);
-  }
-  return lines.join('\n');
-}
-
-function assetsBlock(images) {
-  const bg = (images && images.bg) || [];
-  const content = (images && images.content) || [];
-  const lines = [];
-  lines.push(bg.length ? `- **background:** ${bg.map((u) => `\`${u}\``).join(', ')}` : '- **background:** none');
-  lines.push(content.length ? `- **content (<img>):** ${content.map((u) => `\`${u}\``).join(', ')}` : '- **content (<img>):** none');
-  return lines.join('\n');
-}
-
-// ─── Spec rendering ─────────────────────────────────────────────────
-function renderSpec(section, meta, behaviors) {
-  const box = section.box || {};
-  const texts = collectText(section);
-  const textBlock = texts.length
-    ? texts.map((t) => `- "${t}"`).join('\n')
-    : '- (no direct text — likely visual/asset-only section)';
-  const behavior = behaviorsBlock(section, behaviors);
-  const behaviorSection = behavior
-    ? `\n## Dynamic behaviors — observed by ACTIVE capture (not guesses)\n_Captured by driving the live page (scroll/click). These override the static heuristic above._\n${behavior}\n`
-    : '';
-  return `# ${section.name} — Clone Spec (${meta.bp})
-
-> Auto-generated skeleton from sections.json by clone-spec.js. **This is a build contract.**
-> Complete every \`TODO\` before dispatching the build. No section ships without a completed spec.
-
-- **Feature:** ${meta.feature}
-- **Breakpoint:** ${meta.bp} (${meta.viewport ? `${meta.viewport.width}×${meta.viewport.height}` : '?'})
-- **Source URL:** ${meta.url || '?'}
-- **Node ref:** \`${section.nodeRef}\` · **Root box:** ${Math.round(box.w || 0)}×${Math.round(box.h || 0)} @ (${Math.round(box.x || 0)}, ${Math.round(box.y || 0)})
-
-## Interaction model — ⚠ confirm before building
-${interactionBlock(section.interaction)}
-${behaviorSection}
-## States to reproduce
-_Harvested non-default state rules (hover/focus/active/checked/tab/aria/data-state). Implement each._
-${statesBlock(section.states)}
-
-## Layout — root computed CSS (use as-is, no guessing)
-\`\`\`css
-${cssBlock(section.css)}
-\`\`\`
-
-## Assets (local paths only — never hotlink)
-${assetsBlock(section.images)}
-
-## Text content ${meta.realContent
-    ? '(verbatim — user confirmed rights to reuse this copy)'
-    : '(replace copyrighted copy with placeholders)'}
-${textBlock}
-
-## Component candidates
-${componentsBlock(section.components)}
-
-## Build checklist
-- [ ] HTML semantics + final tags chosen
-- [ ] SCSS started from the clone-to-scss.js draft — value edits only with evidence cited from computed.json/states.json/behaviors.json (no eyeballing); clone-validate.js is the judge
-- [ ] Every state above implemented
-- [ ] Interaction model confirmed on live site & wired
-- [ ] All assets local (public/images/${meta.feature}/) — no hotlinks
-- [ ] clone-validate.js PASS
-- [ ] Pixel diff ≤ 0.05 (Phase 5)
-`;
-}
-
-// ─── Main ───────────────────────────────────────────────────────────
-function main() {
-  const data = JSON.parse(fs.readFileSync(sectionsPath, 'utf8'));
-  const meta = {
-    feature: opts.feature || (data.meta && data.meta.feature) || 'feature',
-    url: data.meta && data.meta.url,
-    viewport: data.meta && data.meta.viewport,
-    bp: opts.section ? (data.meta && data.meta.bp) : (data.meta && data.meta.bp) || '?',
-    realContent: !!opts.realContent,
-  };
-  // behaviors.json (active interaction sweep) lives next to the source computed.json.
-  const behaviorsPath = opts.behaviors || path.join(path.dirname(sectionsPath), 'behaviors.json');
-  let behaviors = null;
-  if (fs.existsSync(behaviorsPath)) {
-    try { behaviors = JSON.parse(fs.readFileSync(behaviorsPath, 'utf8')); } catch { behaviors = null; }
-  }
-
-  let sections = data.sections || [];
-  if (opts.section) sections = sections.filter((s) => s.name === opts.section);
-  if (!sections.length) {
-    console.error(`[clone-spec] no sections${opts.section ? ` matching "${opts.section}"` : ''} in ${sectionsPath}`);
-    process.exit(1);
-  }
-
-  fs.mkdirSync(opts.out, { recursive: true });
-  for (const section of sections) {
-    const file = path.join(opts.out, `${safeName(section.name)}.spec.md`);
-    fs.writeFileSync(file, renderSpec(section, meta, behaviors));
-    console.log(`[clone-spec] wrote ${file}`);
-  }
-  console.log(`[clone-spec] done → ${sections.length} spec(s) in ${opts.out}`);
-}
-
-const isMain = process.argv[1] && process.argv[1].replace(/\\/g, '/').endsWith('clone-spec.js');
-if (isMain) {
-  if (!sectionsPath || !opts.out) {
-    console.error('Usage: node clone-spec.js <sections.json> --out=<dir> [--section=Name] [--feature=name] [--behaviors=path] [--real-content]');
-    process.exit(1);
-  }
-  try { main(); }
-  catch (e) {
-    console.error(`[clone-spec] FAIL: ${e.message}`);
-    if (process.env.DEBUG) console.error(e.stack);
-    process.exit(1);
-  }
-}
-
-export { sectionHasNode, behaviorsBlock };

package/hooks/scripts/clone-to-scss.js

@@ -1,275 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * clone-to-scss.js — sections.json → SCSS partials + class plan
- *
- * Usage:
- *   node clone-to-scss.js <sections.json> --out=<styles-dir> [--feature=<name>] [--asset-root=<public-prefix>]
- *
- * Output:
- *   <styles-dir>/
- *     index.scss           (master orchestrator)
- *     _tokens.scss         (CSS variables from tokens)
- *     _base.scss           (@font-face + body defaults from stylesheets.json hints)
- *     _shared.scss         (placeholder for cross-section utilities)
- *     sections/_<name>.scss (per-section partial)
- *   <styles-dir>/class-plan.json  (node.id → BEM class name; HTML scaffolder applies these)
- *
- * Rules:
- *   - CSS values copied verbatim from sections.json — no eyeballing
- *   - Token-referenced values stay as var(--xxx)
- *   - Selectors are class-based, BEM-flavored: .{feature}__{section}__{role}
- *   - One class per node; nested rules use SCSS &__ syntax
- */
-
-import fs from 'fs';
-import path from 'path';
-
-// ─── CLI ────────────────────────────────────────────────────────────
-function parseArgs(argv) {
-  const [, , inputPath, ...rest] = argv;
-  const opts = {};
-  for (const a of rest) {
-    if (a.startsWith('--out=')) opts.out = a.slice(6);
-    else if (a.startsWith('--feature=')) opts.feature = a.slice(10);
-    else if (a.startsWith('--asset-root=')) opts.assetRoot = a.slice(13);
-  }
-  return { inputPath, opts };
-}
-
-const { inputPath, opts } = parseArgs(process.argv);
-if (!inputPath || !opts.out) {
-  console.error('Usage: node clone-to-scss.js <sections.json> --out=<styles-dir> [--feature=<name>] [--asset-root=<public-prefix>]');
-  process.exit(1);
-}
-
-// ─── Helpers ────────────────────────────────────────────────────────
-function kebab(s) {
-  return String(s)
-    .replace(/([a-z])([A-Z])/g, '$1-$2')
-    .replace(/[^a-zA-Z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-    .toLowerCase() || 'x';
-}
-
-function shorten(id) {
-  // node id like "0.1.2.3" → "n-0-1-2-3"
-  return 'n-' + id.replace(/[^0-9]/g, '-').replace(/^-+|-+$/g, '').slice(0, 20);
-}
-
-// Detect a semantic role for a node based on tag/class/text/attrs
-function semanticRole(node) {
-  const cls = (node.classes || '').toLowerCase();
-  const tag = node.tag;
-  if (tag === 'h1' || /\bheadline\b|\bhero-title\b/.test(cls)) return 'title';
-  if (/^h[2-6]$/.test(tag)) return `heading-${tag.slice(1)}`;
-  if (tag === 'p' || /\bsubtitle\b|\bdescription\b/.test(cls)) return 'body';
-  if (tag === 'a' && (/\bbutton\b|\bbtn\b|\bcta\b/.test(cls) || (node.attrs && /button/.test(node.attrs.role || '')))) return 'button';
-  if (tag === 'button') return 'button';
-  if (tag === 'img' || (node.css && node.css['background-image'] && node.css['background-image'] !== 'none')) return 'media';
-  if (tag === 'ul' || tag === 'ol') return 'list';
-  if (tag === 'li') return 'item';
-  if (tag === 'nav' || /\bnav\b/.test(cls)) return 'nav';
-  if (tag === 'form') return 'form';
-  if (tag === 'input' || tag === 'textarea' || tag === 'select') return 'field';
-  if (tag === 'header') return 'header';
-  if (tag === 'footer') return 'footer';
-  if (tag === 'section' || tag === 'article') return 'content';
-  if (tag === 'div' && node.children && node.children.length > 1) return 'group';
-  return 'el';
-}
-
-// ─── Class plan: assign one BEM class per visible node ──────────────
-function buildClassPlan(sections, feature) {
-  const plan = {}; // id → class name
-  const usedNames = new Map(); // base name → count for disambiguation
-  const sectionUsedRoles = new Map();
-
-  const assign = (sectionName, node, parentRole) => {
-    if (!node || node.pseudo) return;
-    const sectionKey = kebab(sectionName);
-    let role = semanticRole(node);
-    if (parentRole === 'list' && role !== 'item') role = 'item';
-    // disambiguate within section by role
-    const k = `${sectionKey}::${role}`;
-    const idx = (sectionUsedRoles.get(k) || 0) + 1;
-    sectionUsedRoles.set(k, idx);
-    const suffix = idx === 1 ? role : `${role}-${idx}`;
-    const cls = `${feature}__${sectionKey}__${suffix}`;
-    plan[node.id] = cls;
-    for (const child of (node.children || [])) assign(sectionName, child, role);
-  };
-
-  for (const sec of sections) {
-    // Root section class
-    const sectionKey = kebab(sec.name);
-    plan[sec.nodeRef] = `${feature}__${sectionKey}`;
-    for (const child of (sec.children || [])) assign(sec.name, child, 'section');
-  }
-
-  return plan;
-}
-
-// ─── CSS emission ───────────────────────────────────────────────────
-const SKIP_DEFAULT_VALUES = {
-  'pointer-events': 'auto',
-  'visibility': 'visible',
-  'opacity': '1',
-  'transform': 'none',
-  'background-repeat': 'repeat',
-  'background-attachment': 'scroll',
-  'background-blend-mode': 'normal',
-  'mix-blend-mode': 'normal',
-  'filter': 'none',
-  'backdrop-filter': 'none',
-  'overflow': 'visible',
-  'overflow-x': 'visible',
-  'overflow-y': 'visible',
-};
-
-function emitDeclarations(css, indent) {
-  const out = [];
-  for (const [prop, val] of Object.entries(css)) {
-    if (!val || prop.startsWith('--')) continue;
-    if (SKIP_DEFAULT_VALUES[prop] === val) continue;
-    out.push(`${indent}${prop}: ${val};`);
-  }
-  return out.join('\n');
-}
-
-function emitNodeRule(node, plan, indent) {
-  const cls = plan[node.id];
-  if (!cls) return '';
-  const lines = [];
-  lines.push(`${indent}.${cls} {`);
-  const decl = emitDeclarations(node.css || {}, indent + '  ');
-  if (decl) lines.push(decl);
-  // pseudo-elements
-  for (const child of (node.children || [])) {
-    if (child.pseudo) {
-      const kind = child.tag.replace('::', '');
-      lines.push('');
-      lines.push(`${indent}  &::${kind} {`);
-      lines.push(emitDeclarations(child.css || {}, indent + '    '));
-      lines.push(`${indent}  }`);
-    }
-  }
-  lines.push(`${indent}}`);
-
-  // Non-pseudo children — emit at same level (BEM flat)
-  const childRules = (node.children || [])
-    .filter((c) => !c.pseudo)
-    .map((c) => emitNodeRule(c, plan, indent))
-    .filter(Boolean);
-
-  return [lines.join('\n'), ...childRules].join('\n\n');
-}
-
-// ─── File emission ──────────────────────────────────────────────────
-function emitTokens(tokens) {
-  const lines = [':root {'];
-  for (const c of tokens.colors) lines.push(`  --${c.name}: ${c.value};`);
-  for (const t of tokens.typography) {
-    lines.push(`  --${t.name}-family: ${t.family};`);
-    lines.push(`  --${t.name}-size: ${t.size};`);
-    lines.push(`  --${t.name}-weight: ${t.weight};`);
-    if (t.lineHeight && t.lineHeight !== 'normal') lines.push(`  --${t.name}-line-height: ${t.lineHeight};`);
-    if (t.letterSpacing && t.letterSpacing !== 'normal') lines.push(`  --${t.name}-letter-spacing: ${t.letterSpacing};`);
-  }
-  for (const s of tokens.spacing) lines.push(`  --${s.name}: ${s.value};`);
-  for (const r of tokens.radius) lines.push(`  --${r.name}: ${r.value};`);
-  for (const s of tokens.shadow) lines.push(`  --${s.name}: ${s.value};`);
-  lines.push('}');
-  return lines.join('\n') + '\n';
-}
-
-function emitBase(feature, stylesheets) {
-  const lines = [];
-  lines.push('// Auto-generated by clone-to-scss.js — do not edit by hand.');
-  lines.push('');
-  if (stylesheets && stylesheets.fontFaces) {
-    for (const ff of stylesheets.fontFaces) {
-      lines.push('@font-face {');
-      lines.push(`  font-family: '${ff.family}';`);
-      if (ff.weight) lines.push(`  font-weight: ${ff.weight};`);
-      if (ff.style) lines.push(`  font-style: ${ff.style};`);
-      if (ff.display) lines.push(`  font-display: ${ff.display};`);
-      const srcs = ff.sources.map((s) => s.format
-        ? `url('${s.url}') format('${s.format}')`
-        : `url('${s.url}')`).join(',\n       ');
-      lines.push(`  src: ${srcs};`);
-      lines.push('}');
-      lines.push('');
-    }
-  }
-  return lines.join('\n');
-}
-
-function emitSection(section, plan) {
-  const lines = [];
-  lines.push(`// Section: ${section.name}`);
-  lines.push('');
-  // root + descendants
-  lines.push(emitNodeRule({ ...section, id: section.nodeRef, children: section.children }, plan, ''));
-  return lines.join('\n') + '\n';
-}
-
-function emitIndex(feature, sections) {
-  const lines = [];
-  lines.push(`// ${feature} — auto-generated by clone-to-scss.js`);
-  lines.push('');
-  lines.push(`@use './tokens';`);
-  lines.push(`@use './base';`);
-  lines.push(`@use './shared';`);
-  for (const sec of sections) {
-    lines.push(`@use './sections/${kebab(sec.name)}';`);
-  }
-  return lines.join('\n') + '\n';
-}
-
-// ─── Main ───────────────────────────────────────────────────────────
-function main() {
-  const data = JSON.parse(fs.readFileSync(inputPath, 'utf8'));
-  const feature = opts.feature || data.meta?.feature || 'clone';
-  const featureClass = kebab(feature);
-
-  // Read sibling stylesheets.json if present (from clone-extract.js output)
-  const sectionsDir = path.dirname(inputPath);
-  const stylesheetsPath = path.join(sectionsDir, 'stylesheets.json');
-  let stylesheets = null;
-  if (fs.existsSync(stylesheetsPath)) {
-    stylesheets = JSON.parse(fs.readFileSync(stylesheetsPath, 'utf8'));
-  }
-
-  const outDir = opts.out;
-  fs.mkdirSync(outDir, { recursive: true });
-  fs.mkdirSync(path.join(outDir, 'sections'), { recursive: true });
-
-  const plan = buildClassPlan(data.sections, featureClass);
-
-  // Write files
-  fs.writeFileSync(path.join(outDir, '_tokens.scss'), emitTokens(data.tokens));
-  fs.writeFileSync(path.join(outDir, '_base.scss'), emitBase(featureClass, stylesheets));
-  fs.writeFileSync(
-    path.join(outDir, '_shared.scss'),
-    `// Cross-section utilities — extend as needed.\n`,
-  );
-
-  for (const sec of data.sections) {
-    const fname = `_${kebab(sec.name)}.scss`;
-    fs.writeFileSync(path.join(outDir, 'sections', fname), emitSection(sec, plan));
-  }
-
-  fs.writeFileSync(path.join(outDir, 'index.scss'), emitIndex(featureClass, data.sections));
-  fs.writeFileSync(path.join(outDir, 'class-plan.json'), JSON.stringify(plan, null, 2));
-
-  console.log(`[clone-to-scss] done → ${outDir}`);
-  console.log(`  sections: ${data.sections.length}, classes: ${Object.keys(plan).length}`);
-}
-
-try { main(); }
-catch (e) {
-  console.error(`[clone-to-scss] FAIL: ${e.message}`);
-  if (process.env.DEBUG) console.error(e.stack);
-  process.exit(1);
-}