@birdapi/velinstyle 1.2.1 → 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/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;

package/components/velin-modal.js

@@ -1,10 +1,20 @@
 import { trapFocus, saveFocus, restoreFocus, getFocusableElements, setBackgroundInert, clearBackgroundInert } from './focus-manager.js';
-import { escapeHTML } from './sanitize.js';
 
 const styles = `
   :host {
     display: contents;
   }
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
   .overlay {
     position: fixed;
     inset: 0;
@@ -87,7 +97,7 @@ const styles = `
 
 class VelinModal extends HTMLElement {
   static get observedAttributes() {
-    return ['open'];
+    return ['open', 'title'];
   }
 
   constructor() {
@@ -95,20 +105,20 @@ class VelinModal extends HTMLElement {
     this.attachShadow({ mode: 'open', delegatesFocus: true });
     this._previouslyFocused = null;
     this._onKeydown = this._onKeydown.bind(this);
+    this._onTitleSlot = this._onTitleSlot.bind(this);
   }
 
   connectedCallback() {
-    const title = (this.getAttribute('title') || '').trim();
-    const safeTitle = escapeHTML(title);
-    const dialogLabel = title
-      ? 'aria-labelledby="velin-modal-title"'
-      : `aria-label="${escapeHTML(this.getAttribute('aria-label') || 'Dialog')}"`;
+    if (this.shadowRoot.querySelector('.dialog')) return;
     this.shadowRoot.innerHTML = `
       <style>${styles}</style>
       <div class="overlay" part="overlay">
-        <div class="dialog" role="dialog" aria-modal="true" ${dialogLabel} part="dialog">
+        <div class="dialog" role="dialog" aria-modal="true" part="dialog">
           <div class="header" part="header">
-            <h2 class="title" id="velin-modal-title"${title ? '' : ' class="velin-sr-only"'}>${safeTitle || 'Dialog'}</h2>
+            <h2 class="title" id="velin-modal-title" 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>
@@ -121,16 +131,16 @@ class VelinModal extends HTMLElement {
     this.shadowRoot.querySelector('.overlay').addEventListener('click', (e) => {
       if (e.target === e.currentTarget) this.close();
     });
+    this.shadowRoot.querySelector('slot[name="title"]').addEventListener('slotchange', this._onTitleSlot);
+    this._syncTitle();
   }
 
-  attributeChangedCallback(name, oldVal, newVal) {
+  attributeChangedCallback(name) {
     if (name === 'open') {
-      if (newVal !== null) {
-        this._open();
-      } else {
-        this._close();
-      }
+      if (this.hasAttribute('open')) this._open();
+      else this._close();
     }
+    if (name === 'title') this._syncTitle();
   }
 
   open() {
@@ -142,6 +152,57 @@ class VelinModal extends HTMLElement {
     this.dispatchEvent(new CustomEvent('velin-close', { bubbles: true }));
   }
 
+  _syncTitle() {
+    const fallback = this.shadowRoot?.querySelector('.title-fallback');
+    const heading = this.shadowRoot?.querySelector('.title');
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    if (!fallback || !heading || !dialog) return;
+
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      heading.classList.remove('sr-only');
+      return;
+    }
+
+    fallback.hidden = false;
+    const title = (this.getAttribute('title') || '').trim();
+    fallback.textContent = title || 'Dialog';
+    heading.classList.toggle('sr-only', !title);
+    if (title) {
+      dialog.setAttribute('aria-labelledby', 'velin-modal-title');
+      dialog.removeAttribute('aria-label');
+    } else {
+      dialog.removeAttribute('aria-labelledby');
+      dialog.setAttribute('aria-label', this.getAttribute('aria-label') || 'Dialog');
+    }
+  }
+
+  _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 slot = this.shadowRoot?.querySelector('slot[name="title"]');
+    const dialog = this.shadowRoot?.querySelector('[role="dialog"]');
+    const heading = this.shadowRoot?.querySelector('.title');
+    const fallback = this.shadowRoot?.querySelector('.title-fallback');
+    if (!slot || !dialog || !heading || !fallback) return;
+    if (this._hasTitleSlot()) {
+      fallback.hidden = true;
+      heading.classList.remove('sr-only');
+      dialog.removeAttribute('aria-labelledby');
+      const label = slot.assignedNodes({ flatten: true }).map((n) => n.textContent || '').join(' ').trim();
+      if (label) dialog.setAttribute('aria-label', label);
+    } else {
+      this._syncTitle();
+    }
+  }
+
   _open() {
     this._previouslyFocused = saveFocus();
     setBackgroundInert(this);