@birdapi/velinstyle 1.2.0 → 1.2.2

package/cli/production/run.js

@@ -0,0 +1,312 @@
+/**
+ * Production Builder orchestration.
+ */
+import {
+  existsSync, readFileSync, writeFileSync, mkdirSync, unlinkSync, statSync, readdirSync,
+} from 'fs';
+import { join, resolve, dirname } from 'path';
+import { execSync } from 'child_process';
+import { fileURLToPath, pathToFileURL } from 'url';
+import { extractProject, extractToPlain, DEFAULT_IGNORE } from './extract.js';
+import { resolveClosure, listKnownThemeNames } from './graph.js';
+import { buildProductionCss } from './trim-css.js';
+import { buildProductionJs, detectRuntimeFeatures } from './trim-js.js';
+import { resolveUsedThemes, writeThemes } from './trim-themes.js';
+import { buildIconSpriteSubset } from './trim-icons.js';
+import { shouldIncludeMotion, motionClassSet } from './trim-motion.js';
+import { buildReport } from './report.js';
+import { buildExplain } from './explain.js';
+import { watchProduction } from './watch.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export const PKG_ROOT = join(__dirname, '../..');
+
+function parseSafelist(raw) {
+  if (!raw) return [];
+  if (Array.isArray(raw)) return raw.map(String);
+  const s = String(raw);
+  if (existsSync(s) && statSync(s).isFile()) {
+    return readFileSync(s, 'utf-8')
+      .split(/\r?\n/)
+      .map((l) => l.trim())
+      .filter((l) => l && !l.startsWith('#'));
+  }
+  return s.split(/[,]+/).map((x) => x.trim()).filter(Boolean);
+}
+
+async function loadUserConfig(cwd) {
+  const configPath = resolve(cwd, 'velinstyle.config.js');
+  if (!existsSync(configPath)) return {};
+  try {
+    const mod = await import(pathToFileURL(configPath).href);
+    return mod.default || {};
+  } catch {
+    return {};
+  }
+}
+
+function lightningBundle(css, outFile, { minify = true } = {}) {
+  mkdirSync(dirname(outFile), { recursive: true });
+  const tmpPath = resolve(dirname(outFile), '.velin-production-tmp.css');
+  writeFileSync(tmpPath, css);
+  let ok = false;
+  try {
+    const binName = process.platform === 'win32' ? 'lightningcss.cmd' : 'lightningcss';
+    const localBin = join(PKG_ROOT, 'node_modules', '.bin', binName);
+    const cli = existsSync(localBin) ? `"${localBin}"` : 'npx lightningcss';
+    const minifyFlag = minify ? '--minify' : '';
+    execSync(`${cli} --bundle ${minifyFlag} "${tmpPath}" -o "${outFile}"`, {
+      stdio: 'pipe',
+      cwd: PKG_ROOT,
+      shell: true,
+    });
+    ok = true;
+  } catch {
+    writeFileSync(outFile, css);
+  } finally {
+    try { unlinkSync(tmpPath); } catch { /* ignore */ }
+  }
+  return ok;
+}
+
+function originalBytesEstimate() {
+  let n = 0;
+  const css = join(PKG_ROOT, 'dist', 'velinstyle.min.css');
+  const js = join(PKG_ROOT, 'dist', 'velinstyle-components.min.js');
+  const icons = join(PKG_ROOT, 'dist', 'velin-icons.svg');
+  for (const f of [css, js, icons]) {
+    if (existsSync(f)) n += statSync(f).size;
+  }
+  const themeDir = join(PKG_ROOT, 'dist', 'themes');
+  if (existsSync(themeDir)) {
+    for (const f of readdirSync(themeDir)) {
+      if (f.endsWith('.css')) n += statSync(join(themeDir, f)).size;
+    }
+  }
+  return n;
+}
+
+/**
+ * @param {object} opts
+ * @param {string[]} [opts.args] raw CLI args after command
+ * @param {object} [opts.helpers] { getArg, hasFlag, C }
+ */
+export async function runProduction(opts = {}) {
+  const {
+    args = [],
+    helpers = {},
+    cwd = process.cwd(),
+  } = opts;
+  const getArg = helpers.getArg || ((flag, alias) => {
+    const i = args.indexOf(flag);
+    const a = alias ? args.indexOf(alias) : -1;
+    const idx = i !== -1 ? i : a;
+    return idx !== -1 && args[idx + 1] ? args[idx + 1] : null;
+  });
+  const hasFlag = helpers.hasFlag || ((flag, alias) => args.includes(flag) || (alias && args.includes(alias)));
+  const C = helpers.C || {
+    green: (s) => s, yellow: (s) => s, cyan: (s) => s, dim: (s) => s, bold: (s) => s, red: (s) => s,
+  };
+
+  const config = await loadUserConfig(cwd);
+  const prodCfg = config.production || {};
+
+  const pathArg = args.find((a) => a && !a.startsWith('-')) || '.';
+  const targetPath = resolve(cwd, pathArg);
+  const outDir = resolve(cwd, getArg('--out', '-o') || prodCfg.out || './dist/velin-production');
+  const explain = hasFlag('--explain');
+  const doWatch = hasFlag('--watch');
+  const reportPath = getArg('--report') || null;
+  const safelist = [
+    ...parseSafelist(prodCfg.safelist),
+    ...parseSafelist(getArg('--safelist')),
+  ];
+  const noJs = hasFlag('--no-js');
+  const noIcons = hasFlag('--no-icons');
+  const noThemes = hasFlag('--no-themes');
+  const noMotion = hasFlag('--no-motion');
+  const minify = !hasFlag('--no-minify');
+
+  const once = async () => {
+    mkdirSync(outDir, { recursive: true });
+
+    const extracted = extractProject(targetPath, {
+      ignore: DEFAULT_IGNORE,
+      safelist,
+      outDir,
+      cwd,
+    });
+
+    const closure = resolveClosure(
+      { classes: extracted.classes, tags: extracted.tags },
+      {
+        safelistFiles: safelist.filter((s) => s.endsWith('.css') || s.includes('/')),
+      },
+    );
+
+    const includeMotion = shouldIncludeMotion(extracted, { force: noMotion ? false : null });
+    const motionUsed = motionClassSet(extracted);
+
+    const utilitySet = new Set(closure.utilityFiles);
+    const componentFiles = closure.cssFiles.filter((f) => !utilitySet.has(f));
+    const utilityFiles = closure.utilityFiles.filter((f) => {
+      if (!includeMotion && /animation|view-transition|scroll-animation|chart-animation/.test(f)) return false;
+      return true;
+    });
+
+    const cssResult = buildProductionCss({
+      pkgRoot: PKG_ROOT,
+      readFile: (p) => readFileSync(p, 'utf-8'),
+      exists: existsSync,
+      componentFiles,
+      utilityFiles,
+      usedClasses: extracted.classes,
+      includeMotionFiles: includeMotion,
+      motionUsed,
+    });
+
+    const cssOut = join(outDir, 'velinstyle.css');
+    const bundled = lightningBundle(cssResult.css, cssOut, { minify });
+    const cssBytes = existsSync(cssOut) ? statSync(cssOut).size : Buffer.byteLength(cssResult.css);
+
+    let jsBytes = 0;
+    let jsOut = null;
+    const features = detectRuntimeFeatures(extracted);
+    if (!noJs) {
+      jsOut = join(outDir, 'velinstyle.js');
+      const js = buildProductionJs({ tags: closure.tags, features });
+      writeFileSync(jsOut, js);
+      jsBytes = Buffer.byteLength(js);
+    }
+
+    let themeMeta = { selected: [], skipped: [], written: [] };
+    if (!noThemes) {
+      const resolved = resolveUsedThemes(extracted, {
+        configThemes: prodCfg.themes ?? 'auto',
+        pkgRoot: PKG_ROOT,
+        defaultThemes: [],
+      });
+      const written = writeThemes({
+        pkgRoot: PKG_ROOT,
+        outDir,
+        themes: resolved.selected,
+        minifyPrefer: minify,
+      });
+      themeMeta = { ...resolved, ...written };
+    } else {
+      themeMeta.skipped = listKnownThemeNames(PKG_ROOT);
+    }
+
+    let iconMeta = { included: [], skipped: [], bytes: 0, availableCount: 0 };
+    if (!noIcons) {
+      iconMeta = buildIconSpriteSubset({
+        pkgRoot: PKG_ROOT,
+        outDir,
+        iconNames: extracted.icons,
+      });
+    }
+
+    const themeBytes = (themeMeta.written || []).reduce((n, w) => {
+      try { return n + statSync(w.file).size; } catch { return n; }
+    }, 0);
+
+    const productionBytes = cssBytes + jsBytes + (iconMeta.bytes || 0) + themeBytes;
+    const original = originalBytesEstimate();
+
+    const fullCss = existsSync(join(PKG_ROOT, 'dist', 'velinstyle.min.css'))
+      ? statSync(join(PKG_ROOT, 'dist', 'velinstyle.min.css')).size : 0;
+    const fullJs = existsSync(join(PKG_ROOT, 'dist', 'velinstyle-components.min.js'))
+      ? statSync(join(PKG_ROOT, 'dist', 'velinstyle-components.min.js')).size : 0;
+    const fullIcons = existsSync(join(PKG_ROOT, 'dist', 'velin-icons.svg'))
+      ? statSync(join(PKG_ROOT, 'dist', 'velin-icons.svg')).size : 0;
+
+    let themeSaved = 0;
+    for (const name of themeMeta.skipped || []) {
+      const p = join(PKG_ROOT, 'dist', 'themes', `${name}.min.css`);
+      if (existsSync(p)) themeSaved += statSync(p).size;
+    }
+
+    const report = buildReport({
+      originalBytes: original || (fullCss + fullJs + fullIcons),
+      productionBytes,
+      breakdown: {
+        CSS: Math.max(0, fullCss - cssBytes),
+        JS: Math.max(0, fullJs - jsBytes),
+        Icons: Math.max(0, fullIcons - (iconMeta.bytes || 0)),
+        Themes: themeSaved,
+        Motion: includeMotion ? 0 : 8 * 1024,
+        Fonts: 2 * 1024,
+      },
+      themes: themeMeta.selected || [],
+      icons: iconMeta.included || [],
+      components: cssResult.included,
+      tags: closure.tags,
+      filesScanned: extracted.files.length,
+      imagesSkipped: true,
+    });
+
+    writeFileSync(join(outDir, 'production-report.json'), JSON.stringify(report, null, 2));
+    writeFileSync(join(outDir, 'production-report.txt'), report.text);
+    writeFileSync(join(outDir, 'used.json'), JSON.stringify({
+      ...extractToPlain(extracted),
+      closure: {
+        cssFiles: closure.cssFiles,
+        tags: closure.tags,
+        matchedPrefixes: closure.matchedPrefixes,
+      },
+    }, null, 2));
+
+    if (reportPath) {
+      const absReport = resolve(cwd, reportPath);
+      mkdirSync(dirname(absReport), { recursive: true });
+      if (absReport.endsWith('.md') || absReport.endsWith('.txt')) {
+        writeFileSync(absReport, report.text);
+      } else {
+        writeFileSync(absReport, JSON.stringify(report, null, 2));
+      }
+    }
+
+    let explainOut = null;
+    if (explain) {
+      explainOut = buildExplain({
+        skippedCss: cssResult.skipped,
+        skippedThemes: themeMeta.skipped || [],
+        skippedIcons: iconMeta.skipped || [],
+        skippedMotion: !includeMotion,
+        graphExplain: closure.explain,
+      });
+      writeFileSync(join(outDir, 'explain.txt'), explainOut.text);
+      console.log(`\n${explainOut.text}`);
+    }
+
+    console.log(C.green(`\nProduction build → ${outDir}`));
+    console.log(report.text);
+    console.log(C.dim(`\nCSS: ${cssOut}${bundled ? ' (lightningcss)' : ' (raw)'}`));
+    if (jsOut) console.log(C.dim(`JS:  ${jsOut} (${closure.tags.length} components)`));
+    if (!noIcons) console.log(C.dim(`Icons: ${iconMeta.included.length} / ${iconMeta.availableCount || '?'}`));
+    if (!noThemes) console.log(C.dim(`Themes: ${(themeMeta.selected || []).join(', ') || '(none)'}`));
+
+    return {
+      outDir,
+      report,
+      explain: explainOut,
+      extracted,
+      closure,
+      cssOut,
+      jsOut,
+    };
+  };
+
+  const result = await once();
+
+  if (doWatch) {
+    console.log(C.cyan(`\nWatching ${targetPath} … (Ctrl+C to stop)`));
+    watchProduction(targetPath, async () => {
+      console.log(C.dim('\n[watch] rebuild…'));
+      await once();
+    });
+    await new Promise(() => {});
+  }
+
+  return result;
+}

package/cli/production/trim-css.js

@@ -0,0 +1,177 @@
+/**
+ * Filter CSS source to rules that reference used velin-/expo- classes.
+ */
+import { join } from 'path';
+
+const CLASS_IN_SEL = /\.(?:velin|expo)-[\w:-]+/g;
+
+const ALWAYS_KEEP_RE = [
+  /:root\b/,
+  /\[data-velin-/,
+  /prefers-reduced-motion/,
+  /prefers-contrast/,
+  /forced-colors/,
+  /@font-face/,
+];
+
+function selectorNeedsClass(selector, used) {
+  const classes = selector.match(CLASS_IN_SEL);
+  if (!classes || !classes.length) return true;
+  return classes.some((c) => used.has(c.slice(1)));
+}
+
+function shouldAlwaysKeep(block) {
+  return ALWAYS_KEEP_RE.some((re) => re.test(block));
+}
+
+export function filterCssByUsedClasses(css, usedClasses, { keepAllWithoutVelinClass = true } = {}) {
+  const used = usedClasses instanceof Set ? usedClasses : new Set(usedClasses);
+  const keptKeyframes = new Set();
+  const chunks = [];
+  const parts = splitCssTopLevel(css);
+
+  for (const part of parts) {
+    const trimmed = part.trim();
+    if (!trimmed) continue;
+
+    if (trimmed.startsWith('@keyframes') || trimmed.startsWith('@-webkit-keyframes')) {
+      const name = trimmed.match(/@[-a-z]*keyframes\s+([\w-]+)/i)?.[1];
+      chunks.push({ type: 'keyframes', name, text: ensureBrace(trimmed) });
+      continue;
+    }
+
+    if (trimmed.startsWith('@media') || trimmed.startsWith('@supports') || trimmed.startsWith('@container')) {
+      const innerMatch = trimmed.match(/^(@[^{]+)\{([\s\S]*)\}$/);
+      if (!innerMatch) {
+        chunks.push({ type: 'raw', text: ensureBrace(trimmed) });
+        continue;
+      }
+      const filteredInner = filterCssByUsedClasses(innerMatch[2], used, { keepAllWithoutVelinClass });
+      if (filteredInner.trim()) {
+        const block = `${innerMatch[1].trim()} {\n${filteredInner}\n}`;
+        chunks.push({ type: 'at', text: block });
+        collectAnimationNames(filteredInner, keptKeyframes);
+      }
+      continue;
+    }
+
+    if (shouldAlwaysKeep(trimmed)) {
+      chunks.push({ type: 'rule', text: ensureBrace(trimmed) });
+      continue;
+    }
+
+    const sel = trimmed.split('{')[0] || '';
+    CLASS_IN_SEL.lastIndex = 0;
+    const hasVelin = CLASS_IN_SEL.test(sel);
+    CLASS_IN_SEL.lastIndex = 0;
+    if (!hasVelin) {
+      if (keepAllWithoutVelinClass) chunks.push({ type: 'rule', text: ensureBrace(trimmed) });
+      continue;
+    }
+    if (selectorNeedsClass(sel, used)) {
+      const text = ensureBrace(trimmed);
+      chunks.push({ type: 'rule', text });
+      collectAnimationNames(text, keptKeyframes);
+    }
+  }
+
+  const out = [];
+  for (const c of chunks) {
+    if (c.type === 'keyframes') {
+      if (c.name && keptKeyframes.has(c.name)) out.push(c.text);
+      continue;
+    }
+    out.push(c.text);
+  }
+  return out.join('\n\n') + (out.length ? '\n' : '');
+}
+
+function ensureBrace(s) {
+  return s.endsWith('}') ? s : `${s}}`;
+}
+
+function collectAnimationNames(text, into) {
+  for (const m of text.matchAll(/animation(?:-name)?\s*:\s*([^;}+]+)/gi)) {
+    for (const name of m[1].split(/[\s,]+/)) {
+      if (name && name !== 'none' && !name.startsWith('var(')) into.add(name.trim());
+    }
+  }
+}
+
+function splitCssTopLevel(css) {
+  const src = String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
+  const parts = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < src.length; i++) {
+    const ch = src[i];
+    if (ch === '{') depth++;
+    else if (ch === '}') {
+      depth--;
+      if (depth === 0) {
+        parts.push(src.slice(start, i + 1));
+        start = i + 1;
+      }
+    }
+  }
+  if (start < src.length) {
+    const tail = src.slice(start).trim();
+    if (tail) parts.push(tail);
+  }
+  return parts;
+}
+
+export function buildProductionCss({
+  pkgRoot,
+  readFile,
+  exists,
+  componentFiles = [],
+  utilityFiles = [],
+  usedClasses,
+  includeMotionFiles = true,
+  motionUsed = null,
+}) {
+  const used = usedClasses instanceof Set ? usedClasses : new Set(usedClasses);
+  let css = '/* VelinStyle Production Build */\n';
+  const included = [];
+  const skipped = [];
+  const seen = new Set();
+
+  for (const rel of componentFiles) {
+    if (seen.has(rel)) continue;
+    seen.add(rel);
+    const path = join(pkgRoot, 'src', rel);
+    if (!exists(path)) {
+      skipped.push({ file: rel, reason: 'missing' });
+      continue;
+    }
+    css += readFile(path) + '\n';
+    included.push(rel);
+  }
+
+  for (const rel of utilityFiles) {
+    if (seen.has(rel)) continue;
+    seen.add(rel);
+    const path = join(pkgRoot, 'src', rel);
+    if (!exists(path)) {
+      skipped.push({ file: rel, reason: 'missing' });
+      continue;
+    }
+    const isMotion = /animation|motion|view-transition|scroll-animation|chart-animation/.test(rel);
+    if (isMotion && !includeMotionFiles) {
+      skipped.push({ file: rel, reason: 'motion disabled' });
+      continue;
+    }
+    const raw = readFile(path);
+    const filterSet = isMotion && motionUsed ? new Set([...used, ...motionUsed]) : used;
+    const filtered = filterCssByUsedClasses(raw, filterSet);
+    if (!filtered.trim()) {
+      skipped.push({ file: rel, reason: 'no matching utilities' });
+      continue;
+    }
+    css += filtered + '\n';
+    included.push(rel);
+  }
+
+  return { css, included, skipped };
+}

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 };
+}