@birdapi/velinstyle 1.2.1 → 1.3.0

package/cli/production/trim-fonts.js

@@ -0,0 +1,23 @@
+/**
+ * Font utility trim — keep only used velin-font-* / weight utilities in text.css slice.
+ * (Full tokens/typography.css stays in alwaysCss; this filters utility text layer extras.)
+ */
+import { filterCssByUsedClasses } from './trim-css.js';
+
+export function filterFontUtilities(cssText, usedClasses) {
+  const used = usedClasses instanceof Set ? usedClasses : new Set(usedClasses);
+  // Always keep base text utilities that are structural if any font class used
+  const keep = new Set(used);
+  if ([...used].some((c) => c.startsWith('velin-font-') || c.startsWith('velin-text-'))) {
+    keep.add('velin-font-sans');
+    keep.add('velin-font-normal');
+  }
+  return filterCssByUsedClasses(cssText, keep, { keepAllWithoutVelinClass: false });
+}
+
+export function summarizeFontUsage(extracted) {
+  const classes = [...(extracted.fontWeights || extracted.classes || [])]
+    .filter((c) => String(c).startsWith('velin-font-') || String(c).startsWith('velin-text-'))
+    .sort();
+  return { classes, count: classes.length };
+}

package/cli/production/trim-icons.js

@@ -0,0 +1,38 @@
+/**
+ * Icon sprite trim — subset of icons/svg → production sprite.
+ */
+import { existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { join, basename } from 'path';
+
+export function buildIconSpriteSubset({ pkgRoot, outDir, iconNames }) {
+  const svgDir = join(pkgRoot, 'icons', 'svg');
+  const names = new Set([...(iconNames || [])].map((n) => String(n).toLowerCase()));
+  const available = existsSync(svgDir)
+    ? readdirSync(svgDir).filter((f) => f.endsWith('.svg')).map((f) => basename(f, '.svg'))
+    : [];
+
+  const selected = available.filter((id) => names.has(id.toLowerCase()));
+  // If icons were requested but none match, still emit empty sprite shell when WC icon used
+  const includeAllIfEmptyScan = names.size === 0;
+  const ids = includeAllIfEmptyScan ? [] : selected;
+  const skipped = available.filter((id) => !ids.includes(id));
+
+  const symbols = ids.map((id) => {
+    let content = readFileSync(join(svgDir, `${id}.svg`), 'utf-8');
+    content = content.replace(/<svg[^>]*>/, '').replace(/<\/svg>/, '').trim();
+    return `  <symbol id="${id}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">\n    ${content}\n  </symbol>`;
+  });
+
+  const sprite = `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">\n${symbols.join('\n')}\n</svg>\n`;
+  mkdirSync(outDir, { recursive: true });
+  const outFile = join(outDir, 'velin-icons.svg');
+  writeFileSync(outFile, sprite, 'utf-8');
+
+  return {
+    outFile,
+    included: ids,
+    skipped,
+    availableCount: available.length,
+    bytes: Buffer.byteLength(sprite, 'utf-8'),
+  };
+}

package/cli/production/trim-js.js

@@ -0,0 +1,48 @@
+/**
+ * Emit a slim runtime stub that registers only detected Web Components.
+ */
+export function buildProductionJs({ tags = [], features = {} } = {}) {
+  const unique = [...new Set(tags.map((t) => String(t).toLowerCase()))].sort();
+  const list = JSON.stringify(unique, null, 2);
+  const wantAttributes = Boolean(features.attributes);
+  const wantHighlight = Boolean(features.highlight);
+  const wantMotion = Boolean(features.motion);
+
+  return `/* VelinStyle Production Runtime — generated */
+/* Registers only Web Components detected in your project. */
+
+const TAGS = ${list};
+
+export async function bootProduction(options = {}) {
+  const { register, bootFromDOM } = await import('@birdapi/velinstyle/runtime');
+  if (options.root || ${wantAttributes} || ${wantHighlight} || ${wantMotion}) {
+    return bootFromDOM(options.root || (typeof document !== 'undefined' ? document : undefined), {
+      tags: TAGS,
+      attributes: options.attributes ?? ${wantAttributes},
+      highlight: options.highlight ?? ${wantHighlight},
+      haptic: options.haptic ?? false,
+    });
+  }
+  return register(TAGS);
+}
+
+export { TAGS };
+
+if (typeof document !== 'undefined' && !globalThis.__VELIN_PRODUCTION_NO_AUTOBOOT__) {
+  bootProduction().catch((err) => {
+    console.warn('[velinstyle production] boot failed:', err);
+  });
+}
+`;
+}
+
+export function detectRuntimeFeatures(extracted) {
+  const attrs = extracted.attrs || new Set();
+  const classes = extracted.classes || new Set();
+  const motion = extracted.motion || new Set();
+  return {
+    attributes: [...attrs].some((a) => a.startsWith('data-velin-') && a !== 'data-velin-theme' && a !== 'data-velin-component'),
+    highlight: [...classes].some((c) => c.includes('highlight') || c.includes('code')),
+    motion: motion.size > 0 || [...classes].some((c) => c.includes('animate')),
+  };
+}

package/cli/production/trim-motion.js

@@ -0,0 +1,22 @@
+/**
+ * Motion trim helpers — decide whether motion CSS files participate + explain removals.
+ */
+export function shouldIncludeMotion(extracted, { force = null } = {}) {
+  if (force === true) return true;
+  if (force === false) return false;
+  const motion = extracted.motion || new Set();
+  const classes = extracted.classes || new Set();
+  if (motion.size > 0) return true;
+  for (const c of classes) {
+    if (/animate|motion|transition|scroll-fade|scroll-reveal/i.test(c)) return true;
+  }
+  return false;
+}
+
+export function motionClassSet(extracted) {
+  const set = new Set(extracted.motion || []);
+  for (const c of extracted.classes || []) {
+    if (/animate|motion|scroll-/i.test(c)) set.add(c);
+  }
+  return set;
+}

package/cli/production/trim-themes.js

@@ -0,0 +1,50 @@
+/**
+ * Theme trim — copy only used theme CSS into production output.
+ */
+import { existsSync, readFileSync, copyFileSync, mkdirSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { listKnownThemeNames } from './graph.js';
+
+export function resolveUsedThemes(extracted, { configThemes = 'auto', pkgRoot, defaultThemes = ['dark'] } = {}) {
+  const known = new Set(listKnownThemeNames(pkgRoot));
+  const used = new Set();
+
+  if (Array.isArray(configThemes)) {
+    for (const t of configThemes) used.add(String(t).toLowerCase());
+  } else {
+    for (const t of extracted.themes || []) used.add(String(t).toLowerCase());
+  }
+
+  // Always allow dark / light token paths if referenced via contrast toggles
+  for (const d of defaultThemes) {
+    if (known.has(d)) used.add(d);
+  }
+
+  // If nothing detected and auto — keep no optional themes (tokens cover default)
+  const selected = [...used].filter((t) => known.has(t)).sort();
+  const skipped = [...known].filter((t) => !used.has(t)).sort();
+  return { selected, skipped, known: [...known].sort() };
+}
+
+export function writeThemes({ pkgRoot, outDir, themes, minifyPrefer = true }) {
+  const themeOut = join(outDir, 'themes');
+  mkdirSync(themeOut, { recursive: true });
+  const written = [];
+  const missing = [];
+
+  for (const name of themes) {
+    const distMin = join(pkgRoot, 'dist', 'themes', `${name}.min.css`);
+    const src = join(pkgRoot, 'src', 'themes', `${name}.css`);
+    const dest = join(themeOut, minifyPrefer && existsSync(distMin) ? `${name}.min.css` : `${name}.css`);
+    if (minifyPrefer && existsSync(distMin)) {
+      copyFileSync(distMin, dest);
+      written.push({ name, file: dest, source: 'dist' });
+    } else if (existsSync(src)) {
+      writeFileSync(dest, readFileSync(src, 'utf-8'));
+      written.push({ name, file: dest, source: 'src' });
+    } else {
+      missing.push(name);
+    }
+  }
+  return { written, missing, themeOut };
+}

package/cli/production/watch.js

@@ -0,0 +1,38 @@
+/**
+ * Watch content files and re-run production pipeline (debounced, Windows-safe).
+ */
+import { watch as fsWatch } from 'fs';
+import { resolve } from 'path';
+
+export function watchProduction(rootPath, onChange, { debounceMs = 300, ignoreNames = ['node_modules', 'dist', '.git'] } = {}) {
+  const abs = resolve(rootPath);
+  let timer = null;
+  let closed = false;
+
+  const kick = (event, filename) => {
+    if (closed) return;
+    if (filename && ignoreNames.some((n) => String(filename).includes(n))) return;
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      Promise.resolve()
+        .then(() => onChange({ event, filename }))
+        .catch((err) => console.error('[velinstyle production --watch]', err));
+    }, debounceMs);
+  };
+
+  let watcher;
+  try {
+    watcher = fsWatch(abs, { recursive: true }, kick);
+  } catch {
+    // recursive watch unsupported — watch root only
+    watcher = fsWatch(abs, kick);
+  }
+
+  return {
+    close() {
+      closed = true;
+      clearTimeout(timer);
+      try { watcher.close(); } catch { /* ignore */ }
+    },
+  };
+}

package/cli/review.js

@@ -225,6 +225,43 @@ export function reviewHtml(html, ctx = {}) {
   const errors = issues.filter((i) => i.severity === 'error').length;
   const warnings = issues.filter((i) => i.severity === 'warning').length;
 
+  // Optimization heuristics (soft) — full vendor without production output hints
+  const usesFullCss = /velinstyle\.min\.css|velinstyle\.css/i.test(text) && !/velin-production/i.test(text);
+  const usesFullIife = /velinstyle-components\.min\.js/i.test(text);
+  const unusedThemeLinks = [...text.matchAll(/themes\/([a-z0-9-]+)\.min\.css/gi)]
+    .map((m) => m[1].toLowerCase());
+  const themeAttrs = [...text.matchAll(/data-velin-theme\s*=\s*["']([^"']+)["']/gi)]
+    .flatMap((m) => m[1].toLowerCase().split(/[\s,|]+/));
+  const unusedThemes = unusedThemeLinks.filter((t) => themeAttrs.length && !themeAttrs.includes(t));
+
+  if (usesFullCss && usesFullIife) {
+    issues.push({
+      code: 'optimization.full-bundle',
+      severity: 'warning',
+      message: 'Full CSS + components IIFE without production output',
+      fix: 'Run `velinstyle build --production` and link dist/velin-production assets for publish.',
+    });
+  } else if (usesFullCss) {
+    issues.push({
+      code: 'optimization.full-css',
+      severity: 'warning',
+      message: 'Full VelinStyle CSS bundle linked',
+      fix: 'Prefer production CSS from `velinstyle production` for go-live.',
+    });
+  }
+  if (unusedThemes.length) {
+    issues.push({
+      code: 'optimization.unused-themes',
+      severity: 'warning',
+      message: `${unusedThemes.length} theme stylesheet(s) not referenced by data-velin-theme`,
+      fix: `Remove unused theme links (${unusedThemes.slice(0, 5).join(', ')}) or run production theme trim.`,
+    });
+  }
+
+  const optIssues = issues.filter((i) => i.code.startsWith('optimization'));
+  const unusedComponentHint = [...text.matchAll(/<(velin-[a-z0-9-]+)\b/gi)].length;
+  const classHits = [...text.matchAll(/\bvelin-[\w:-]+\b/g)].length;
+
   const score = (base, penalty) => Math.max(0, Math.round((base - penalty) * 10) / 10);
 
   let scores = {
@@ -234,6 +271,7 @@ export function reviewHtml(html, ctx = {}) {
     performance: score(10, issues.filter((i) => i.code.startsWith('perf')).length * 2),
     conversion: score(10, issues.filter((i) => i.code.startsWith('conversion')).length * 2),
     visual: score(9, issues.filter((i) => i.code.startsWith('design')).length * 1.2),
+    optimization: score(10, optIssues.length * 2 + (unusedThemes.length ? Math.min(3, unusedThemes.length * 0.5) : 0)),
   };
 
   if (thin) {
@@ -250,10 +288,13 @@ export function reviewHtml(html, ctx = {}) {
     if (profile === 'app') scores.seo = Math.min(scores.seo, 7);
   }
 
+  const finalErrors = issues.filter((i) => i.severity === 'error').length;
+  const finalWarnings = issues.filter((i) => i.severity === 'warning').length;
+
   const avg = Object.values(scores).reduce((a, b) => a + b, 0) / Object.values(scores).length;
   const promptScore = Math.max(0, Math.min(10, avg - (ctx.plan?.warnings?.length ? 1 : 0)));
 
-  const gate = errors > 0 ? 'fail' : warnings > 0 ? 'warn' : 'pass';
+  const gate = finalErrors > 0 ? 'fail' : finalWarnings > 0 ? 'warn' : 'pass';
 
   return {
     version: 1,
@@ -262,6 +303,12 @@ export function reviewHtml(html, ctx = {}) {
     scores,
     issues,
     gate,
+    optimization: {
+      fullBundle: Boolean(usesFullCss && usesFullIife),
+      unusedThemes: unusedThemes.length,
+      componentTags: unusedComponentHint,
+      classTokens: classHits,
+    },
   };
 }
 

package/cli/scripts/write-atelier-fixtures.mjs

@@ -0,0 +1,33 @@
+import { mkdirSync, writeFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..', '__fixtures__', 'atelier-library', 'showcases');
+const items = [
+  { id: '01-login', title: 'Fixture Login' },
+  { id: '04-pricing', title: 'Fixture Pricing' },
+  { id: '36-calendar', title: 'Fixture Calendar' },
+];
+
+for (const it of items) {
+  const d = join(root, it.id);
+  mkdirSync(d, { recursive: true });
+  writeFileSync(
+    join(d, 'index.html'),
+    `<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8"><title>${it.title}</title>
+<link rel="stylesheet" href="app.css"></head>
+<body><div id="root" data-atelier-id="${it.id}"></div>
+<script type="module" src="app.js"></script></body></html>
+`,
+  );
+  writeFileSync(
+    join(d, 'app.js'),
+    `const root = document.getElementById('root');
+root.innerHTML = '<section class="velin-section" data-fixture="${it.id}"><h1>${it.title}</h1></section>';
+`,
+  );
+  writeFileSync(join(d, 'app.css'), `[data-fixture="${it.id}"] { padding: 1rem; }\n`);
+}
+
+console.log('fixtures at', root);

package/cli/security.js

@@ -0,0 +1,190 @@
+/**
+ * Velin Security Suite — CLI surface over Security Engine.
+ * velinstyle security doctor|scan|audit|publish|ci|deps|secrets|report
+ */
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { resolve, join } from 'path';
+import {
+  runSecurityEngine,
+  toExperiencePayload,
+  toMarkdownReport,
+  gateLabel,
+  timelineRows,
+} from '../core/security/index.js';
+
+/**
+ * @param {string[]} args
+ * @param {{ C: object, getArg: Function, hasFlag: Function, emitExperience: Function }} util
+ */
+export async function securityCmd(args, util) {
+  const { getArg, hasFlag, emitExperience } = util;
+  const sub = args[0] || 'doctor';
+  const rest = args.slice(1);
+  const target = rest.find((a) => !a.startsWith('-')) || '.';
+  const root = resolve(target);
+  const asJson = hasFlag('--json');
+  const strict = hasFlag('--strict');
+  const present = (payload) => emitExperience('security', payload);
+
+  if (sub === '--help' || sub === '-h') {
+    await present({
+      message: 'Usage: velinstyle security <doctor|scan|audit|publish|ci|deps|secrets|report> [path]',
+      suggestions: [
+        { text: 'velinstyle security doctor .' },
+        { text: 'velinstyle security deps .' },
+        { text: 'velinstyle security publish' },
+        { text: 'velinstyle security report --out ./security-report' },
+      ],
+    });
+    return;
+  }
+
+  try {
+    if (!existsSync(root)) {
+      await present({ status: 'ERROR', message: `Path not found: ${root}`, exitCode: 1 });
+      return;
+    }
+
+    const mode = resolveMode(sub, hasFlag);
+    const result = await runSecurityEngine({
+      root,
+      mode,
+      includeReleaseHealth: mode === 'publish' || mode === 'audit' || hasFlag('--publish'),
+      includeDependencyHealth: true,
+      updateTimeline: sub !== 'report' || true,
+    });
+
+    if (sub === 'report') {
+      const out = getArg('--out') || getArg('--output') || getArg('-o') || join(root, '.velin', 'security', 'report');
+      mkdirSync(out, { recursive: true });
+      writeFileSync(join(out, 'security-report.json'), `${JSON.stringify(result, null, 2)}\n`);
+      writeFileSync(join(out, 'security-report.md'), toMarkdownReport(result));
+      if (asJson) {
+        console.log(JSON.stringify({ ok: result.ok, out, score: result.securityScore }, null, 2));
+        return;
+      }
+      await present({
+        subtitle: 'report',
+        message: `Wrote security report → ${out}`,
+        items: [
+          { label: 'Score', value: String(result.securityScore) },
+          { label: 'Overall', value: result.overall },
+        ],
+        ...toExperiencePayload(result),
+      });
+      setExit(result, strict);
+      return;
+    }
+
+    if (asJson) {
+      console.log(JSON.stringify(result, null, 2));
+      setExit(result, strict);
+      return;
+    }
+
+    const exp = toExperiencePayload(result);
+    const extra = [];
+    if (result.dependencyHealth) {
+      extra.push({
+        label: 'Dep Health',
+        value: `${result.dependencyHealth.score}% (${result.dependencyHealth.deprecated} deprecated, ${result.dependencyHealth.noLockfile ?? 0} no-lockfile, ${result.dependencyHealth.outdated} outdated-heuristic, ${result.dependencyHealth.critical} critical)`,
+      });
+    }
+    if (result.releaseHealth) {
+      extra.push({ label: 'Release', value: result.releaseHealth.status });
+    }
+    const tl = timelineRows(result.timeline || { entries: {} });
+    await present({
+      subtitle: sub,
+      status: result.ok ? (result.overallGate === 'warn' ? 'WARNING' : 'PASS') : 'ERROR',
+      message: exp.message,
+      items: [...(exp.items || []), ...extra],
+      table: exp.table,
+      score: exp.score,
+      notifications: exp.notifications,
+      findings: (result.findings || []).slice(0, 25).map((f) => ({
+        severity: f.severity,
+        message: `[${f.ruleId}] ${f.message}`,
+        path: f.path,
+      })),
+      suggestions: tl.length
+        ? tl.map((r) => ({ text: `${r.title}: ${r.date}` }))
+        : [{ text: 'velinstyle security report --out ./.velin/security/report' }],
+      exitCode: exitCode(result, strict),
+    });
+  } catch (err) {
+    await present({
+      status: 'ERROR',
+      message: err?.message || String(err),
+      exitCode: 1,
+    });
+  }
+}
+
+function resolveMode(sub, hasFlag) {
+  if (hasFlag('--repo')) return 'repo';
+  if (hasFlag('--consumer')) return 'consumer';
+  if (hasFlag('--ci')) return 'ci';
+  if (hasFlag('--publish')) return 'publish';
+  if (hasFlag('--deps')) return 'deps';
+  if (hasFlag('--secrets')) return 'secrets';
+  if (sub === 'doctor') return 'doctor';
+  if (sub === 'scan') return 'scan';
+  if (sub === 'audit') return 'audit';
+  if (sub === 'publish') return 'publish';
+  if (sub === 'ci') return 'ci';
+  if (sub === 'deps') return 'deps';
+  if (sub === 'secrets') return 'secrets';
+  if (sub === 'report') return 'audit';
+  return 'doctor';
+}
+
+function exitCode(result, strict) {
+  if (result.overallGate === 'fail') return 1;
+  if (strict && result.overallGate === 'warn') return 1;
+  return 0;
+}
+
+function setExit(result, strict) {
+  const code = exitCode(result, strict);
+  if (code) process.exitCode = code;
+}
+
+/**
+ * Check-pipeline step (used by `velinstyle check`).
+ * @param {string} path
+ * @param {{ quiet?: boolean, C?: object, strict?: boolean }} [opts]
+ */
+export async function securityCheckStep(path, { quiet, C, strict } = {}) {
+  try {
+    const root = resolve(path);
+    if (!existsSync(root)) return { ok: true, skipped: true };
+
+    const result = await runSecurityEngine({
+      root,
+      mode: 'doctor',
+      includeReleaseHealth: false,
+      includeDependencyHealth: true,
+      updateTimeline: true,
+    });
+
+    const fail = result.overallGate === 'fail' || (strict && result.overallGate === 'warn');
+    if (!quiet && C) {
+      const score = result.securityScore != null ? `${result.securityScore}%` : '—';
+      const gate = result.overallGate || '—';
+      const line = `  security: ${score} · ${gate} · ${result.overall || ''}`;
+      console.log(fail ? C.red(line) : result.overallGate === 'warn' ? C.yellow(line) : C.green(line));
+    }
+
+    return {
+      ok: !fail,
+      skipped: false,
+      securityScore: result.securityScore,
+      overall: result.overall,
+      overallGate: result.overallGate,
+      findings: result.findings?.length || 0,
+    };
+  } catch {
+    return { ok: true, skipped: true };
+  }
+}