@birdapi/velinstyle 1.2.2 → 1.3.0

package/cli/transparency.js

@@ -44,10 +44,10 @@ function printScores(scores, C) {
 
 /**
  * @param {string[]} args process.argv slice after "transparency"
- * @param {{ C: object, getArg: Function, hasFlag: Function }} util
+ * @param {{ C: object, getArg: Function, hasFlag: Function, emitExperience?: Function }} util
  */
 export async function transparencyCmd(args, util) {
-  const { C, getArg, hasFlag } = util;
+  const { C, getArg, hasFlag, emitExperience } = util;
   const sub = args[0] || 'doctor';
   const rest = args.slice(1);
   const target = rest.find((a) => !a.startsWith('-')) || '.';
@@ -55,32 +55,55 @@ export async function transparencyCmd(args, util) {
   const policy = loadPolicy(policyPath);
   const asJson = hasFlag('--json');
   const engine = createTransparencyEngine({ policy });
+  const present = emitExperience
+    ? async (payload) => emitExperience('transparency', payload)
+    : null;
 
-  if (sub === 'scan') {
-    return runDoctor(target, engine, { asJson, C });
-  }
-  if (sub === 'doctor') {
-    return runDoctor(target, engine, { asJson, C });
-  }
-  if (sub === 'validate') {
-    return runValidate(target, engine, { asJson, C });
-  }
-  if (sub === 'report') {
-    return runReport(target, engine, { C, getArg });
-  }
-  if (sub === 'export') {
-    return runExport(target, engine, { C, getArg });
-  }
-  if (sub === 'migrate') {
-    return runMigrate(target, engine, { C, hasFlag, getArg });
-  }
-  if (sub === 'suggest') {
-    return runMigrate(target, engine, { C, hasFlag, getArg, forceDry: true });
-  }
-  if (sub === 'apply') {
-    return runMigrate(target, engine, { C, hasFlag, getArg, forceApply: true });
+  try {
+    if (sub === 'scan') {
+      return await runDoctor(target, engine, { asJson, C, present });
+    }
+    if (sub === 'doctor') {
+      return await runDoctor(target, engine, { asJson, C, present });
+    }
+    if (sub === 'validate') {
+      return await runValidate(target, engine, { asJson, C, present });
+    }
+    if (sub === 'report') {
+      return await runReport(target, engine, { C, getArg, present });
+    }
+    if (sub === 'export') {
+      return await runExport(target, engine, { C, getArg, present });
+    }
+    if (sub === 'migrate') {
+      return await runMigrate(target, engine, { C, hasFlag, getArg, present });
+    }
+    if (sub === 'suggest') {
+      return await runMigrate(target, engine, { C, hasFlag, getArg, present, forceDry: true });
+    }
+    if (sub === 'apply') {
+      return await runMigrate(target, engine, { C, hasFlag, getArg, present, forceApply: true });
+    }
+  } catch (e) {
+    const message = /** @type {Error} */ (e).message || String(e);
+    if (present) {
+      await present({ status: 'ERROR', message, exitCode: 1 });
+      return;
+    }
+    console.log(C.red(message));
+    process.exitCode = 1;
+    return;
   }
 
+  if (present) {
+    await present({
+      status: 'ERROR',
+      message: `Unknown transparency subcommand: ${sub}`,
+      suggestions: [{ text: 'velinstyle transparency doctor|validate|report|export|migrate|scan [path]' }],
+      exitCode: 1,
+    });
+    return;
+  }
   console.log(`Unknown transparency subcommand: ${sub}
 Usage:
   velinstyle transparency doctor|validate|report|export|migrate|scan [path]
@@ -88,9 +111,13 @@ Usage:
   process.exitCode = 1;
 }
 
-async function runDoctor(target, engine, { asJson, C }) {
+async function runDoctor(target, engine, { asJson, C, present }) {
   const files = collectHtmlFiles(target);
   if (!files.length) {
+    if (present) {
+      await present({ status: 'WARNING', message: 'No HTML files found.', exitCode: 1 });
+      return;
+    }
     console.log(C.yellow('No HTML files found.'));
     process.exitCode = 1;
     return;
@@ -102,7 +129,7 @@ async function runDoctor(target, engine, { asJson, C }) {
     const report = await engine.doctor(html, { file });
     reports.push(report);
     if (!report.ok) failed += 1;
-    if (!asJson) {
+    if (!asJson && !present) {
       console.log(C.bold(`\n── ${basename(file)} ──`));
       console.log(report.ok ? C.green('PASS') : C.red('FAIL'));
       console.log(`disclosures=${report.summary.disclosures} errors=${report.summary.errors} warnings=${report.summary.warnings}`);
@@ -116,6 +143,30 @@ async function runDoctor(target, engine, { asJson, C }) {
   }
   if (asJson) {
     console.log(JSON.stringify(files.length === 1 ? reports[0] : { reports }, null, 2));
+  } else if (present) {
+    const findings = reports.flatMap((r) =>
+      (r.findings || []).slice(0, 10).map((f) => [
+        basename(r.file || '') || 'file',
+        f.severity,
+        f.code,
+        String(f.message || '').slice(0, 40),
+      ]),
+    );
+    const lastScores = reports[reports.length - 1]?.scores || {};
+    await present({
+      subtitle: 'doctor',
+      status: failed ? 'ERROR' : 'PASS',
+      message: failed ? `transparency doctor: ${failed} file(s) failed` : 'transparency doctor: ok',
+      items: [
+        { label: 'Files', value: String(files.length) },
+        { label: 'Failed', value: String(failed) },
+        ...Object.entries(lastScores).map(([k, v]) => ({ label: k, value: `${v}%` })),
+      ],
+      table: findings.length
+        ? { columns: ['File', 'Sev', 'Code', 'Message'], rows: findings.slice(0, 25) }
+        : null,
+      exitCode: failed ? 1 : undefined,
+    });
   } else {
     console.log(failed ? C.red(`\ntransparency doctor: ${failed} file(s) failed`) : C.green('\ntransparency doctor: ok'));
   }
@@ -123,7 +174,7 @@ async function runDoctor(target, engine, { asJson, C }) {
   return reports;
 }
 
-async function runValidate(target, engine, { asJson, C }) {
+async function runValidate(target, engine, { asJson, C, present }) {
   const files = collectHtmlFiles(target);
   const all = [];
   let failed = 0;
@@ -132,15 +183,28 @@ async function runValidate(target, engine, { asJson, C }) {
     const result = await engine.validate(html, { file });
     all.push({ file, ...result });
     if (!result.ok) failed += 1;
-    if (!asJson) {
+    if (!asJson && !present) {
       console.log(`${basename(file)}: ${result.ok ? C.green('valid') : C.red('invalid')} (${result.findings.length} findings)`);
     }
   }
-  if (asJson) console.log(JSON.stringify(all, null, 2));
+  if (asJson) {
+    console.log(JSON.stringify(all, null, 2));
+  } else if (present) {
+    await present({
+      subtitle: 'validate',
+      status: failed ? 'ERROR' : 'PASS',
+      message: failed ? `${failed} file(s) invalid` : 'All files valid',
+      table: {
+        columns: ['File', 'Status', 'Findings'],
+        rows: all.map((r) => [basename(r.file), r.ok ? 'valid' : 'invalid', String(r.findings?.length || 0)]),
+      },
+      exitCode: failed ? 1 : undefined,
+    });
+  }
   if (failed) process.exitCode = 1;
 }
 
-async function runReport(target, engine, { C, getArg }) {
+async function runReport(target, engine, { C, getArg, present }) {
   const outDir = resolve(getArg('--out') || 'transparency-report');
   mkdirSync(outDir, { recursive: true });
   const files = collectHtmlFiles(target);
@@ -155,10 +219,21 @@ async function runReport(target, engine, { C, getArg }) {
     combined.files.push({ file, scores: artifacts.json.scores, ok: artifacts.json.ok });
   }
   writeFileSync(join(outDir, 'index.json'), JSON.stringify(combined, null, 2));
-  console.log(C.green(`Wrote transparency reports to ${outDir}`));
+  if (present) {
+    await present({
+      subtitle: 'report',
+      message: `Wrote transparency reports to ${outDir}`,
+      items: [
+        { label: 'Files', value: String(files.length) },
+        { label: 'Out', value: outDir },
+      ],
+    });
+  } else {
+    console.log(C.green(`Wrote transparency reports to ${outDir}`));
+  }
 }
 
-async function runExport(target, engine, { C, getArg }) {
+async function runExport(target, engine, { C, getArg, present }) {
   const format = getArg('--format') || 'json';
   const out = getArg('--output') || getArg('-o');
   const files = collectHtmlFiles(target);
@@ -171,32 +246,56 @@ async function runExport(target, engine, { C, getArg }) {
   const body = fresh.export(format);
   if (out) {
     writeFileSync(resolve(out), body);
-    console.log(C.green(`Exported ${format} → ${out}`));
+    if (present) {
+      await present({
+        subtitle: 'export',
+        message: `Exported ${format} → ${out}`,
+        items: [{ label: 'Format', value: format }, { label: 'Out', value: out }],
+      });
+    } else {
+      console.log(C.green(`Exported ${format} → ${out}`));
+    }
   } else {
     console.log(body);
   }
 }
 
-async function runMigrate(target, engine, { C, hasFlag, getArg, forceDry, forceApply }) {
+async function runMigrate(target, engine, { C, hasFlag, getArg, present, forceDry, forceApply }) {
   const apply = forceApply || hasFlag('--apply') || hasFlag('--write');
   const dryRun = forceDry || (!apply);
   const files = collectHtmlFiles(target);
   let total = 0;
+  const rows = [];
   for (const file of files) {
     const html = readFileSync(file, 'utf-8');
     const result = await engine.migrate(html, { file, apply: apply && !dryRun, dryRun });
     total += result.suggestions.length;
-    console.log(C.bold(`\n── ${basename(file)} ──`));
-    console.log(`${result.suggestions.length} suggestion(s)${apply && !dryRun ? `, applied ${result.applied}` : ' (dry-run)'}`);
-    for (const s of result.suggestions.slice(0, 30)) {
-      console.log(C.dim(`  • ${s.id || s.field || s.kind}: ${s.reason}`));
+    if (!present) {
+      console.log(C.bold(`\n── ${basename(file)} ──`));
+      console.log(`${result.suggestions.length} suggestion(s)${apply && !dryRun ? `, applied ${result.applied}` : ' (dry-run)'}`);
+      for (const s of result.suggestions.slice(0, 30)) {
+        console.log(C.dim(`  • ${s.id || s.field || s.kind}: ${s.reason}`));
+      }
+    }
+    for (const s of result.suggestions.slice(0, 15)) {
+      rows.push([basename(file), s.id || s.field || s.kind || '—', String(s.reason || '').slice(0, 40)]);
     }
     if (apply && !dryRun && result.applied) {
       writeFileSync(file, result.html);
-      console.log(C.green(`  wrote ${file}`));
+      if (!present) console.log(C.green(`  wrote ${file}`));
     }
   }
-  if (!total) console.log(C.green('\nNo migration suggestions.'));
+  if (present) {
+    await present({
+      subtitle: apply && !dryRun ? 'apply' : 'migrate',
+      message: total
+        ? `${total} suggestion(s)${apply && !dryRun ? ' applied' : ' (dry-run)'}`
+        : 'No migration suggestions',
+      table: rows.length ? { columns: ['File', 'Id', 'Reason'], rows: rows.slice(0, 30) } : null,
+    });
+  } else if (!total) {
+    console.log(C.green('\nNo migration suggestions.'));
+  }
 }
 
 /**

package/cli/workflow.js

@@ -5,38 +5,53 @@ function hasFlag(argv, flag) {
   return argv.includes(flag);
 }
 
-export function workflowCommand(argv = []) {
-  const workflowId = argv[0];
-  if (!workflowId || workflowId === '--help' || workflowId === '-h') {
-    console.log(`Usage: velinstyle workflow <graph-id|project:id> [--json]
-
-Examples:
-  velinstyle workflow landingpage
-  velinstyle workflow project:marketing-site --json
-`);
-    process.exit(0);
-  }
+/**
+ * Resolve a workflow graph or project workflow without printing.
+ * @param {string} workflowId
+ * @returns {{ ok: true, data: object } | { ok: false, error: string, issues?: string[] }}
+ */
+export function workflowResolve(workflowId) {
   const registry = loadRegistry(getRegistryPathForMeta());
   let resolved;
   if (workflowId.startsWith('project:')) {
     const projectId = workflowId.replace('project:', '');
     const project = (registry.projects || []).find((item) => item.id === projectId);
     if (!project) {
-      console.error(`Unknown project: ${projectId}`);
-      process.exit(1);
+      return { ok: false, error: `Unknown project: ${projectId}` };
     }
     resolved = resolveWorkflowGraph(registry, project.workflowGraph);
   } else {
     resolved = resolveWorkflowGraph(registry, workflowId);
   }
   if (resolved.issues.length) {
-    for (const issue of resolved.issues) console.error(issue);
+    return { ok: false, error: 'Workflow resolve failed', issues: resolved.issues };
+  }
+  return { ok: true, data: resolved };
+}
+
+export function workflowCommand(argv = []) {
+  const workflowId = argv[0];
+  if (!workflowId || workflowId === '--help' || workflowId === '-h') {
+    console.log(`Usage: velinstyle workflow <graph-id|project:id> [--json]
+
+Examples:
+  velinstyle workflow landingpage
+  velinstyle workflow project:marketing-site --json
+`);
+    process.exit(0);
+  }
+  const resolved = workflowResolve(workflowId);
+  if (!resolved.ok) {
+    console.error(resolved.error);
+    if (resolved.issues) {
+      for (const issue of resolved.issues) console.error(issue);
+    }
     process.exit(1);
   }
   if (hasFlag(argv, '--json')) {
-    console.log(JSON.stringify(resolved, null, 2));
+    console.log(JSON.stringify(resolved.data, null, 2));
     return;
   }
-  console.log(`Workflow steps (${resolved.orderedSteps.length}):`);
-  for (const step of resolved.orderedSteps) console.log(`- ${step}`);
+  console.log(`Workflow steps (${resolved.data.orderedSteps.length}):`);
+  for (const step of resolved.data.orderedSteps) console.log(`- ${step}`);
 }

package/components/velin-theme-toggle.js

@@ -17,9 +17,18 @@ const THEMES = [
 ];
 
 const BUILTIN_THEMES = new Set(['', 'dark']);
+const DARK_THEME_SLUGS = new Set(['dark', 'midnight', 'neon']);
 
 const loadedThemeStylesheets = new Set();
 
+function applyColorScheme(target, slug) {
+  const dark = DARK_THEME_SLUGS.has(slug);
+  if (target === document.documentElement || target === document.body) {
+    target.style.colorScheme = dark ? 'dark' : 'light';
+  }
+  target.setAttribute('data-velin-color-scheme', dark ? 'dark' : 'light');
+}
+
 function ensureThemeStylesheet(slug, base) {
   if (!slug || BUILTIN_THEMES.has(slug)) return;
   if (loadedThemeStylesheets.has(slug)) return;
@@ -288,6 +297,7 @@ class VelinThemeToggle extends HTMLElement {
       this.setAttribute('theme', normalized === 'dark' ? 'dark' : normalized);
       ensureThemeStylesheet(normalized, this._themesBase);
     }
+    applyColorScheme(this._target, normalized);
     if (persist) {
       if (!normalized) localStorage.removeItem('velin-theme');
       else localStorage.setItem('velin-theme', normalized);
@@ -295,7 +305,11 @@ class VelinThemeToggle extends HTMLElement {
     this._highlightActive();
     this.dispatchEvent(new CustomEvent('velin-theme-change', {
       bubbles: true,
-      detail: { theme: normalized || 'light', dark: normalized === 'dark', slug: normalized },
+      detail: {
+        theme: normalized || 'light',
+        dark: DARK_THEME_SLUGS.has(normalized),
+        slug: normalized,
+      },
     }));
   }