@birdapi/velinstyle 1.2.0 → 1.2.2

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/transparency.js

@@ -0,0 +1,221 @@
+/**
+ * CLI: velinstyle transparency doctor|validate|report|export|migrate|scan
+ */
+import { existsSync, readFileSync, writeFileSync, mkdirSync, readdirSync, statSync } from 'fs';
+import { join, resolve, extname, basename } from 'path';
+import {
+  createTransparencyEngine,
+  normalizePolicy,
+} from '../core/transparency/index.js';
+
+function loadPolicy(policyPath) {
+  if (!policyPath) return normalizePolicy({});
+  const abs = resolve(policyPath);
+  if (!existsSync(abs)) throw new Error(`Policy not found: ${abs}`);
+  return normalizePolicy(JSON.parse(readFileSync(abs, 'utf-8')));
+}
+
+function collectHtmlFiles(target) {
+  const abs = resolve(target || '.');
+  if (!existsSync(abs)) throw new Error(`Path not found: ${abs}`);
+  const st = statSync(abs);
+  if (st.isFile()) return [abs];
+  const out = [];
+  const walk = (dir) => {
+    for (const name of readdirSync(dir)) {
+      if (name === 'node_modules' || name === '.git' || name === 'dist') continue;
+      const p = join(dir, name);
+      const s = statSync(p);
+      if (s.isDirectory()) walk(p);
+      else if (/\.html?$/i.test(name)) out.push(p);
+    }
+  };
+  walk(abs);
+  return out;
+}
+
+function printScores(scores, C) {
+  if (!scores) return;
+  console.log(C.bold('\nScores'));
+  for (const [k, v] of Object.entries(scores)) {
+    console.log(`  ${k.padEnd(14)} ${v}%`);
+  }
+}
+
+/**
+ * @param {string[]} args process.argv slice after "transparency"
+ * @param {{ C: object, getArg: Function, hasFlag: Function }} util
+ */
+export async function transparencyCmd(args, util) {
+  const { C, getArg, hasFlag } = util;
+  const sub = args[0] || 'doctor';
+  const rest = args.slice(1);
+  const target = rest.find((a) => !a.startsWith('-')) || '.';
+  const policyPath = getArg('--policy');
+  const policy = loadPolicy(policyPath);
+  const asJson = hasFlag('--json');
+  const engine = createTransparencyEngine({ policy });
+
+  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 });
+  }
+
+  console.log(`Unknown transparency subcommand: ${sub}
+Usage:
+  velinstyle transparency doctor|validate|report|export|migrate|scan [path]
+`);
+  process.exitCode = 1;
+}
+
+async function runDoctor(target, engine, { asJson, C }) {
+  const files = collectHtmlFiles(target);
+  if (!files.length) {
+    console.log(C.yellow('No HTML files found.'));
+    process.exitCode = 1;
+    return;
+  }
+  const reports = [];
+  let failed = 0;
+  for (const file of files) {
+    const html = readFileSync(file, 'utf-8');
+    const report = await engine.doctor(html, { file });
+    reports.push(report);
+    if (!report.ok) failed += 1;
+    if (!asJson) {
+      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}`);
+      printScores(report.scores, C);
+      for (const f of report.findings.slice(0, 40)) {
+        const color = f.severity === 'error' ? C.red : f.severity === 'warning' ? C.yellow : C.dim;
+        console.log(color(`  [${f.severity}] ${f.code}: ${f.message}`));
+      }
+      if (report.findings.length > 40) console.log(C.dim(`  … ${report.findings.length - 40} more`));
+    }
+  }
+  if (asJson) {
+    console.log(JSON.stringify(files.length === 1 ? reports[0] : { reports }, null, 2));
+  } else {
+    console.log(failed ? C.red(`\ntransparency doctor: ${failed} file(s) failed`) : C.green('\ntransparency doctor: ok'));
+  }
+  if (failed) process.exitCode = 1;
+  return reports;
+}
+
+async function runValidate(target, engine, { asJson, C }) {
+  const files = collectHtmlFiles(target);
+  const all = [];
+  let failed = 0;
+  for (const file of files) {
+    const html = readFileSync(file, 'utf-8');
+    const result = await engine.validate(html, { file });
+    all.push({ file, ...result });
+    if (!result.ok) failed += 1;
+    if (!asJson) {
+      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 (failed) process.exitCode = 1;
+}
+
+async function runReport(target, engine, { C, getArg }) {
+  const outDir = resolve(getArg('--out') || 'transparency-report');
+  mkdirSync(outDir, { recursive: true });
+  const files = collectHtmlFiles(target);
+  const combined = { schema: 'velinstyle.transparency.report.bundle', version: 1, files: [] };
+  for (const file of files) {
+    const html = readFileSync(file, 'utf-8');
+    const artifacts = await engine.report(html, { file, title: `Transparency — ${basename(file)}` });
+    const base = basename(file, extname(file));
+    writeFileSync(join(outDir, `${base}.report.json`), JSON.stringify(artifacts.json, null, 2));
+    writeFileSync(join(outDir, `${base}.report.sarif`), JSON.stringify(artifacts.sarif, null, 2));
+    writeFileSync(join(outDir, `${base}.report.html`), artifacts.html);
+    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}`));
+}
+
+async function runExport(target, engine, { C, getArg }) {
+  const format = getArg('--format') || 'json';
+  const out = getArg('--output') || getArg('-o');
+  const files = collectHtmlFiles(target);
+  const fresh = createTransparencyEngine({ policy: engine.policy });
+  for (const file of files) {
+    const html = readFileSync(file, 'utf-8');
+    const { records } = await createTransparencyEngine({ policy: engine.policy }).ingest(html, { file });
+    for (const r of records) fresh.registry.register(r);
+  }
+  const body = fresh.export(format);
+  if (out) {
+    writeFileSync(resolve(out), body);
+    console.log(C.green(`Exported ${format} → ${out}`));
+  } else {
+    console.log(body);
+  }
+}
+
+async function runMigrate(target, engine, { C, hasFlag, getArg, forceDry, forceApply }) {
+  const apply = forceApply || hasFlag('--apply') || hasFlag('--write');
+  const dryRun = forceDry || (!apply);
+  const files = collectHtmlFiles(target);
+  let total = 0;
+  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 (apply && !dryRun && result.applied) {
+      writeFileSync(file, result.html);
+      console.log(C.green(`  wrote ${file}`));
+    }
+  }
+  if (!total) console.log(C.green('\nNo migration suggestions.'));
+}
+
+/**
+ * Lightweight doctor for velinstyle check integration.
+ */
+export async function transparencyCheckStep(path, { policyPath, quiet, C } = {}) {
+  const policy = loadPolicy(policyPath);
+  const engine = createTransparencyEngine({ policy });
+  const files = collectHtmlFiles(path);
+  if (!files.length) return { ok: true, skipped: true, scores: null };
+  let failed = 0;
+  let lastScores = null;
+  for (const file of files.slice(0, 20)) {
+    const report = await engine.doctor(readFileSync(file, 'utf-8'), { file });
+    lastScores = report.scores;
+    if (!report.ok) failed += 1;
+    if (!quiet) {
+      console.log(`  ${basename(file)}: transparency ${report.scores?.transparency ?? '—'}% (${report.summary.errors} errors)`);
+    }
+  }
+  return { ok: failed === 0, failed, scores: lastScores };
+}

package/components/index.js

@@ -38,6 +38,9 @@ export { default as VelinFormSummary } from './velin-form-summary.js';
 export { default as VelinCalendar } from './velin-calendar.js';
 export { default as VelinFileDropzone } from './velin-file-dropzone.js';
 export { default as VelinSearch } from './velin-search.js';
+export { default as VelinOtpInput } from './velin-otp-input.js';
+export { default as VelinPasswordStrength, scorePassword } from './velin-password-strength.js';
+export { default as VelinEmptyState } from './velin-empty-state.js';
 export { bindDeclarativeSearch } from './velin-search.js';
 export { initReveal, initMotion, velinMotion } from './velin-reveal.js';
 export { initA11y, announce, getAnnouncer } from './a11y-entry.js';

package/components/runtime/component-loaders.js

@@ -19,6 +19,7 @@ export const COMPONENT_LOADERS = {
   'velin-drawer': () => import('../velin-drawer.js'),
   'velin-dropdown': () => import('../velin-dropdown.js'),
   'velin-email': () => import('../velin-email.js'),
+  'velin-empty-state': () => import('../velin-empty-state.js'),
   'velin-file-dropzone': () => import('../velin-file-dropzone.js'),
   'velin-form-summary': () => import('../velin-form-summary.js'),
   'velin-icon': () => import('../velin-icon.js'),
@@ -26,6 +27,8 @@ export const COMPONENT_LOADERS = {
   'velin-live-dot': () => import('../velin-live-dot.js'),
   'velin-menubar': () => import('../velin-menubar.js'),
   'velin-modal': () => import('../velin-modal.js'),
+  'velin-otp-input': () => import('../velin-otp-input.js'),
+  'velin-password-strength': () => import('../velin-password-strength.js'),
   'velin-persist': () => import('../velin-persist.js'),
   'velin-popover': () => import('../velin-popover.js'),
   'velin-progress-ring': () => import('../velin-progress-ring.js'),

package/components/velin-drawer.js

@@ -49,25 +49,28 @@ const styles = `
 `;
 
 class VelinDrawer extends HTMLElement {
-  static get observedAttributes() { return ['open']; }
+  static get observedAttributes() { return ['open', 'title']; }
 
   constructor() {
     super();
     this.attachShadow({ mode: 'open', delegatesFocus: true });
     this._prev = null;
     this._onKey = this._onKey.bind(this);
+    this._onTitleSlot = this._onTitleSlot.bind(this);
   }
 
   connectedCallback() {
-    const title = this.getAttribute('title') || '';
-    const safeTitle = escapeHTML(title);
+    if (this.shadowRoot.querySelector('.drawer')) return;
     const titleId = 'velin-drawer-title';
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="overlay" part="overlay"></div>
       <div class="drawer" role="dialog" aria-modal="true" aria-labelledby="${titleId}" part="drawer">
         <div class="header" part="header">
-          <h2 class="title" id="${titleId}">${safeTitle}</h2>
+          <h2 class="title" id="${titleId}" part="title">
+            <slot name="title"></slot>
+            <span class="title-fallback"></span>
+          </h2>
           <button class="close-btn" aria-label="Close" part="close">&#215;</button>
         </div>
         <div class="body" part="body"><slot></slot></div>
@@ -75,15 +78,51 @@ class VelinDrawer extends HTMLElement {
     `;
     this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => this.close());
     this.shadowRoot.querySelector('.overlay').addEventListener('click', () => this.close());
+    this.shadowRoot.querySelector('slot[name="title"]').addEventListener('slotchange', this._onTitleSlot);
+    this._syncTitle();
   }
 
   attributeChangedCallback(name) {
     if (name === 'open') this.hasAttribute('open') ? this._open() : this._close();
+    if (name === 'title') this._syncTitle();
   }
 
   open() { this.setAttribute('open', ''); }
   close() { this.removeAttribute('open'); this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true })); }
 
+  _syncTitle() {
+    const fallback = this.shadowRoot?.querySelector('.title-fallback');
+    if (!fallback) return;
+    fallback.textContent = this.getAttribute('title') || '';
+  }
+
+  _hasTitleSlot() {
+    const slot = this.shadowRoot?.querySelector('slot[name="title"]');
+    if (!slot) return false;
+    return slot.assignedNodes({ flatten: true }).some((n) => {
+      if (n.nodeType === Node.TEXT_NODE) return Boolean(n.textContent.trim());
+      return n.nodeType === Node.ELEMENT_NODE;
+    });
+  }
+
+  _onTitleSlot() {
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    const fallback = this.shadowRoot?.querySelector('.title-fallback');
+    if (!dialog || !fallback) return;
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      dialog.removeAttribute('aria-labelledby');
+      const slot = this.shadowRoot.querySelector('slot[name="title"]');
+      const label = slot.assignedNodes({ flatten: true }).map((n) => n.textContent || '').join(' ').trim();
+      if (label) dialog.setAttribute('aria-label', label);
+    } else {
+      fallback.hidden = false;
+      dialog.removeAttribute('aria-label');
+      dialog.setAttribute('aria-labelledby', 'velin-drawer-title');
+      this._syncTitle();
+    }
+  }
+
   _open() {
     this._prev = saveFocus();
     setBackgroundInert(this);

package/components/velin-empty-state.js

@@ -0,0 +1,83 @@
+const styles = `
+  :host {
+    display: block;
+    text-align: center;
+    padding: var(--velin-space-8, 2rem) var(--velin-space-4, 1rem);
+  }
+  .illustration {
+    display: flex;
+    justify-content: center;
+    margin-block-end: var(--velin-space-4, 1rem);
+    color: var(--velin-color-text-muted, #666);
+  }
+  .title {
+    margin: 0 0 var(--velin-space-2, 0.5rem);
+    font-size: var(--velin-text-xl, 1.25rem);
+    font-weight: var(--velin-weight-bold, 700);
+    color: var(--velin-color-text, #111);
+  }
+  .description {
+    margin: 0 0 var(--velin-space-4, 1rem);
+    color: var(--velin-color-text-muted, #666);
+    max-inline-size: 36rem;
+    margin-inline: auto;
+  }
+  .actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--velin-space-3, 0.75rem);
+    justify-content: center;
+  }
+`;
+
+class VelinEmptyState extends HTMLElement {
+  static get observedAttributes() {
+    return ['heading', 'description'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    if (this.shadowRoot.querySelector('.root')) {
+      this._syncText();
+      return;
+    }
+    const titleId = 'velin-empty-title';
+    this.shadowRoot.innerHTML = `
+      <style>${styles}</style>
+      <section class="root" part="root" role="status" aria-labelledby="${titleId}">
+        <div class="illustration" part="illustration"><slot name="illustration"></slot></div>
+        <h2 class="title" id="${titleId}" part="title">
+          <slot name="title"><span class="heading-fallback"></span></slot>
+        </h2>
+        <div class="description" part="description">
+          <slot name="description"><span class="description-fallback"></span></slot>
+        </div>
+        <div class="actions" part="actions"><slot name="actions"></slot></div>
+        <slot></slot>
+      </section>
+    `;
+    this._syncText();
+  }
+
+  attributeChangedCallback() {
+    this._syncText();
+  }
+
+  _syncText() {
+    const heading = this.shadowRoot?.querySelector('.heading-fallback');
+    const description = this.shadowRoot?.querySelector('.description-fallback');
+    if (heading) heading.textContent = this.getAttribute('heading') || 'Nothing here yet';
+    if (description) {
+      const text = this.getAttribute('description') || '';
+      description.textContent = text;
+      description.hidden = !text;
+    }
+  }
+}
+
+customElements.define('velin-empty-state', VelinEmptyState);
+export default VelinEmptyState;