@birdapi/velinstyle 0.6.1 → 0.8.0

package/README.md

@@ -8,15 +8,14 @@
 <br>
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-2563eb?style=flat-square)](LICENSE)
-[![Release](https://img.shields.io/badge/Release-v0.6.1-2563eb?style=flat-square)](CHANGELOG.md)
+[![Release](https://img.shields.io/badge/Release-v0.8.0-2563eb?style=flat-square)](CHANGELOG.md)
 [![WCAG AA](https://img.shields.io/badge/WCAG-AA-16a34a?style=flat-square)](docs/a11y.html)
 [![CSS min](https://img.shields.io/badge/CSS_min-~46KB-15803d?style=flat-square)]()
 [![JS min](https://img.shields.io/badge/JS_min-~66KB-15803d?style=flat-square)]()
-[![npm](https://img.shields.io/badge/npm-publish_pending-64748b?style=flat-square)](https://www.npmjs.com/package/@birdapi/velinstyle)
+[![npm version](https://img.shields.io/npm/v/@birdapi/velinstyle?style=flat-square)](https://www.npmjs.com/package/@birdapi/velinstyle)
+[![GitHub Pages](https://img.shields.io/badge/docs-GitHub_Pages-2563eb?style=flat-square)](https://skylitedesign.github.io/velinstyle/)
 
-<!-- After npm publish: https://img.shields.io/npm/v/velinstyle?style=flat-square -->
-
-[Website](https://velinstyle.info) · [Docs](docs/index.html) · [Samples](samples/) · [Playground](tools/playground/index.html) · [Theme Builder](tools/theme-builder/index.html) · [Issues](https://github.com/SkyliteDesign/velinstyle/issues)
+[Documentation](https://skylitedesign.github.io/velinstyle/) · [npm](https://www.npmjs.com/package/@birdapi/velinstyle) · [Samples](samples/) · [Playground](tools/playground/index.html) · [Theme Builder](tools/theme-builder/index.html) · [Issues](https://github.com/SkyliteDesign/velinstyle/issues)
 
 **English** · **[Deutsch](README.de.md)**
 
@@ -74,8 +73,8 @@ Teams ship UI under pressure. **Accessibility** and **consistent theming** are o
 <tr><td align="center">🎨</td><td><strong>OKLCH + 13 theme presets</strong></td><td>Perceptually uniform colors; dark mode via token swap</td></tr>
 <tr><td align="center">📦</td><td><strong>~46 KB CSS + ~66 KB JS (min)</strong></td><td>Lean defaults vs. heavier all-in-one stacks</td></tr>
 <tr><td align="center">📐</td><td><strong>Container Queries + utilities</strong></td><td>Components adapt to <em>their</em> container, not only the viewport</td></tr>
-<tr><td align="center">🧩</td><td><strong>25 CSS modules · 21 Web Components</strong></td><td>Modals, tabs, drawers, toasts, icons—documented APIs in <a href="docs/css-components.html">CSS</a> &amp; <a href="docs/components.html">WC docs</a></td></tr>
-<tr><td align="center">🛠️</td><td><strong>Optional CLI</strong></td><td><code>init</code>, <code>build</code>, <code>icons</code>, <code>scan</code>, <code>prefix</code>, <code>blueprint</code>, <code>tokens build</code></td></tr>
+<tr><td align="center">🧩</td><td><strong>25 CSS modules · 29 Web Components</strong></td><td>Modals, tabs, drawers, toasts, icons—documented APIs in <a href="docs/css-components.html">CSS</a> &amp; <a href="docs/components.html">WC docs</a></td></tr>
+<tr><td align="center">🛠️</td><td><strong>Optional CLI</strong></td><td><code>init</code>, <code>build</code>, <code>icons</code>, <code>scan</code>, <code>prefix</code>, <code>blueprint</code>, <code>scaffold</code>, <code>layout</code>, <code>tokens build</code></td></tr>
 <tr><td align="center">🌍</td><td><strong>RTL-ready</strong></td><td>Logical properties and layout-minded defaults · <a href="samples/rtl.html">RTL sample</a></td></tr>
 </tbody>
 </table>
@@ -114,16 +113,16 @@ npm install @birdapi/velinstyle
 ### <span>②</span> Link CSS + components (ES modules)
 
 ```html
-<link rel="stylesheet" href="node_modules/velinstyle/dist/velinstyle.min.css">
-<script type="module" src="node_modules/velinstyle/dist/velinstyle-components.min.js"></script>
+<link rel="stylesheet" href="node_modules/@birdapi/velinstyle/dist/velinstyle.min.css">
+<script type="module" src="node_modules/@birdapi/velinstyle/dist/velinstyle-components.min.js"></script>
 ```
 
 <details>
 <summary><strong>CDN alternative</strong> (skip npm install)</summary>
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/velinstyle@latest/dist/velinstyle.min.css">
-<script type="module" src="https://unpkg.com/velinstyle@latest/dist/velinstyle-components.min.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/@birdapi/velinstyle@latest/dist/velinstyle.min.css">
+<script type="module" src="https://unpkg.com/@birdapi/velinstyle@latest/dist/velinstyle-components.min.js"></script>
 ```
 
 </details>
@@ -226,7 +225,29 @@ All commands: `npx velinstyle <command>` · `npx velinstyle --help`
 </details>
 
 <details>
-<summary><strong>blueprint</strong> — 14 HTML snippets</summary>
+<summary><strong>scaffold</strong> — prompt → HTML (0.8.0)</summary>
+
+- **`npx velinstyle scaffold list-intents`**
+- **`npx velinstyle scaffold "Navbar with search" -o nav.html`**
+- **`npx velinstyle scaffold "…" --json`** — for agents/CI
+
+See [docs/guides/prompt-scaffolding.html](docs/guides/prompt-scaffolding.html).
+
+</details>
+
+<details>
+<summary><strong>layout</strong> — responsive audit (0.8.0)</summary>
+
+- **`npx velinstyle layout audit [path]`**
+- **`npx velinstyle layout suggest [path]`**
+- **`npx velinstyle layout fix [path] --write`**
+
+See [docs/guides/responsive-layout.html](docs/guides/responsive-layout.html).
+
+</details>
+
+<details>
+<summary><strong>blueprint</strong> — 22 HTML snippets</summary>
 
 - **`npx velinstyle blueprint list`**
 - **`npx velinstyle blueprint &lt;name&gt; -o snippet.html`**

package/cli/blueprint.js

@@ -18,6 +18,14 @@ const BLUEPRINTS = {
   'search-field': 'search-field.html',
   'sidebar-layout': 'sidebar-layout.html',
   'table-responsive': 'table-responsive.html',
+  'bottom-nav-mobile': 'bottom-nav-mobile.html',
+  'empty-state': 'empty-state.html',
+  'cookie-consent': 'cookie-consent.html',
+  'filter-bar': 'filter-bar.html',
+  'notification-center': 'notification-center.html',
+  'settings-panel': 'settings-panel.html',
+  onboarding: 'onboarding.html',
+  'pricing-table': 'pricing-table.html',
 };
 
 export function listBlueprints() {

package/cli/blueprints/bottom-nav-mobile.html

@@ -0,0 +1,17 @@
+<nav class="velin-pb-safe" aria-label="Primary">
+  <velin-bottom-nav current="home">
+    <a href="#home" data-nav="home" current>Home</a>
+    <a href="#search" data-nav="search">Search</a>
+    <a href="#profile" data-nav="profile">Profile</a>
+  </velin-bottom-nav>
+</nav>
+<script type="module">
+  import '../../dist/velinstyle-components.min.js';
+  const nav = document.querySelector('velin-bottom-nav');
+  nav?.querySelectorAll('a').forEach((link) => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      nav.setAttribute('current', link.dataset.nav || '');
+    });
+  });
+</script>

package/cli/blueprints/cookie-consent.html

@@ -0,0 +1,9 @@
+<aside class="velin-p-4 velin-border velin-rounded-lg velin-pb-safe" role="region" aria-label="Cookie consent">
+  <div class="velin-user-content">
+    <p class="velin-mbe-3">We use essential cookies only. No third-party trackers in this demo.</p>
+  </div>
+  <div class="velin-flex velin-gap-3">
+    <button type="button" class="velin-btn velin-btn--primary">Accept</button>
+    <button type="button" class="velin-btn velin-btn--outline">Decline</button>
+  </div>
+</aside>

package/cli/blueprints/empty-state.html

@@ -0,0 +1,5 @@
+<section class="velin-p-8 velin-text-center" aria-labelledby="empty-title">
+  <h2 id="empty-title" class="velin-text-xl velin-font-bold velin-mbe-2">No items yet</h2>
+  <p class="velin-text-muted velin-mbe-4">Create your first entry to see it listed here.</p>
+  <button type="button" class="velin-btn velin-btn--primary">Create item</button>
+</section>

package/cli/blueprints/filter-bar.html

@@ -0,0 +1,15 @@
+<form class="velin-flex velin-flex-wrap velin-gap-3 velin-p-4 velin-border-b" role="search" aria-label="Filter list">
+  <label class="velin-flex velin-flex-col velin-gap-1">
+    <span class="velin-text-sm">Query</span>
+    <input type="search" class="velin-input" name="q" placeholder="Search…" />
+  </label>
+  <label class="velin-flex velin-flex-col velin-gap-1">
+    <span class="velin-text-sm">Status</span>
+    <select class="velin-select" name="status">
+      <option value="">All</option>
+      <option value="open">Open</option>
+      <option value="done">Done</option>
+    </select>
+  </label>
+  <button type="submit" class="velin-btn velin-btn--primary velin-self-end">Apply</button>
+</form>

package/cli/blueprints/notification-center.html

@@ -0,0 +1,13 @@
+<section class="velin-p-4" aria-labelledby="notif-title">
+  <h2 id="notif-title" class="velin-text-lg velin-font-bold velin-mbe-4">Notifications</h2>
+  <ul class="velin-flex velin-flex-col velin-gap-3" role="list">
+    <li class="velin-p-3 velin-border velin-rounded-lg">
+      <p class="velin-font-medium">Backup complete</p>
+      <p class="velin-text-sm velin-text-muted">2 minutes ago</p>
+    </li>
+    <li class="velin-p-3 velin-border velin-rounded-lg">
+      <p class="velin-font-medium">New comment</p>
+      <p class="velin-text-sm velin-text-muted">1 hour ago</p>
+    </li>
+  </ul>
+</section>

package/cli/blueprints/onboarding.html

@@ -0,0 +1,23 @@
+<velin-stepper-wc id="onboard" labels="Welcome,Profile,Done" active="0">
+  <section class="velin-p-6">
+    <h2 class="velin-text-xl velin-mbe-2">Welcome</h2>
+    <p class="velin-mbe-4">Set up your workspace in a few steps.</p>
+    <button type="button" class="velin-btn velin-btn--primary" data-next>Continue</button>
+  </section>
+  <section class="velin-p-6">
+    <h2 class="velin-text-xl velin-mbe-2">Profile</h2>
+    <input type="text" class="velin-input velin-mbe-4" placeholder="Your name" aria-label="Name" />
+    <button type="button" class="velin-btn velin-btn--primary" data-next>Continue</button>
+  </section>
+  <section class="velin-p-6">
+    <h2 class="velin-text-xl velin-mbe-2">Done</h2>
+    <p>You are ready to go.</p>
+  </section>
+</velin-stepper-wc>
+<script type="module">
+  import '../../dist/velinstyle-components.min.js';
+  const stepper = document.getElementById('onboard');
+  document.querySelectorAll('[data-next]').forEach((btn) => {
+    btn.addEventListener('click', () => stepper?.next());
+  });
+</script>

package/cli/blueprints/pricing-table.html

@@ -0,0 +1,20 @@
+<div class="velin-grid velin-gap-4" style="grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));">
+  <article class="velin-p-6 velin-border velin-rounded-lg velin-text-center">
+    <h3 class="velin-text-lg velin-font-bold">Starter</h3>
+    <p class="velin-text-3xl velin-font-bold velin-mbs-2 velin-mbe-4">$0</p>
+    <ul class="velin-text-sm velin-mbe-4" role="list">
+      <li>1 project</li>
+      <li>Community support</li>
+    </ul>
+    <button type="button" class="velin-btn velin-btn--outline velin-w-full">Choose</button>
+  </article>
+  <article class="velin-p-6 velin-border velin-rounded-lg velin-text-center velin-border-primary">
+    <h3 class="velin-text-lg velin-font-bold">Pro</h3>
+    <p class="velin-text-3xl velin-font-bold velin-mbs-2 velin-mbe-4">$12</p>
+    <ul class="velin-text-sm velin-mbe-4" role="list">
+      <li>Unlimited projects</li>
+      <li>Priority support</li>
+    </ul>
+    <button type="button" class="velin-btn velin-btn--primary velin-w-full">Choose</button>
+  </article>
+</div>

package/cli/blueprints/settings-panel.html

@@ -0,0 +1,20 @@
+<velin-sheet id="settings-sheet" title="Settings">
+  <form class="velin-flex velin-flex-col velin-gap-4 velin-p-4">
+    <label class="velin-flex velin-flex-col velin-gap-1">
+      <span>Display name</span>
+      <input type="text" class="velin-input" name="name" autocomplete="name" />
+    </label>
+    <label class="velin-flex velin-items-center velin-gap-2">
+      <input type="checkbox" class="velin-checkbox" name="notify" />
+      <span>Email notifications</span>
+    </label>
+    <button type="submit" class="velin-btn velin-btn--primary">Save</button>
+  </form>
+</velin-sheet>
+<button type="button" class="velin-btn velin-btn--outline" id="open-settings">Open settings</button>
+<script type="module">
+  import '../../dist/velinstyle-components.min.js';
+  document.getElementById('open-settings')?.addEventListener('click', () => {
+    document.getElementById('settings-sheet')?.open?.();
+  });
+</script>

package/cli/index.js

@@ -11,7 +11,7 @@ const PKG_ROOT = join(__dirname, '..');
 const args = process.argv.slice(2);
 const command = args[0];
 
-const LAYERS = ['tokens', 'reset', 'base', 'a11y', 'layout', 'components', 'utilities', 'helpers'];
+const LAYERS = ['tokens', 'reset', 'base', 'a11y', 'layout', 'components', 'utilities', 'security', 'helpers'];
 
 const LAYER_FILES = {
   tokens: [
@@ -24,8 +24,9 @@ const LAYER_FILES = {
   a11y: [
     'a11y/sr-only.css', 'a11y/skip-link.css', 'a11y/reduced-motion.css',
     'a11y/forced-colors.css', 'a11y/skeleton.css', 'a11y/preferences.css',
-    'a11y/security.css',
+    'a11y/focus-not-obscured.css', 'a11y/target-size.css', 'a11y/high-contrast-aaa.css',
   ],
+  security: ['a11y/security.css'],
   layout: [
     'layout/breakpoints.css', 'layout/container.css', 'layout/grid.css',
     'layout/flex.css', 'layout/patterns.css',
@@ -48,6 +49,7 @@ const LAYER_FILES = {
     'utilities/scroll.css', 'utilities/color-mix.css', 'utilities/scroll-animation.css',
     'utilities/view-transition.css', 'utilities/scope.css', 'utilities/anchor.css',
     'utilities/filter.css', 'utilities/container-style.css', 'utilities/state.css',
+    'utilities/safe-area.css',
   ],
   helpers: ['helpers/helpers.css'],
 };
@@ -78,7 +80,7 @@ function hasFlag(flag, alias) {
 
 function help() {
   console.log(`
-  ${C.bold('VelinStyle CLI')} v0.6.1
+  ${C.bold('VelinStyle CLI')} v0.8.0
 
   ${C.bold('Usage:')}
     velinstyle init                 Create velinstyle.config.js
@@ -89,6 +91,8 @@ function help() {
     velinstyle scan [path]          Security & accessibility scanner
     velinstyle prefix [path]        Add missing velin- prefix (dry-run; use --write)
     velinstyle blueprint [name]     Print HTML blueprint (run: velinstyle blueprint list)
+    velinstyle scaffold "<prompt>"  Generate layout HTML from a text description
+    velinstyle layout <sub>         Responsive layout audit and fixes
     velinstyle tokens build         Generate CSS variables from tokens.json
 
   ${C.bold('Icons subcommands:')}
@@ -106,6 +110,16 @@ function help() {
     velinstyle blueprint list       Print all blueprint ids
     velinstyle blueprint <name> [--output, -o <file>]
 
+  ${C.bold('Scaffold (0.8.0):')}
+    velinstyle scaffold "<prompt>"  Compose blueprints from natural language
+    velinstyle scaffold list-intents  Show supported intent keywords
+    velinstyle scaffold "<prompt>" -o out.html [--json]
+
+  ${C.bold('Layout (0.8.0):')}
+    velinstyle layout audit [path]    Report flex/grid/responsive issues
+    velinstyle layout suggest [path]  Audit with fix suggestions
+    velinstyle layout fix [path]      Apply safe fixes (--dry-run default, --write)
+
   ${C.bold('Tokens:')}
     velinstyle tokens build [--input <path>] [--output, -o <file>]
 
@@ -496,6 +510,104 @@ async function prefixCmd() {
   }
 }
 
+async function scaffoldCmd() {
+  const sub = args[1];
+  const { scaffoldFromPrompt, listIntents } = await import('./scaffold.js');
+  if (sub === 'list-intents') {
+    console.log(`\n  ${C.bold('Scaffold intents:')}\n`);
+    for (const i of listIntents()) {
+      console.log(`    ${C.cyan(i.id)} — ${i.blueprints.join(' + ')}`);
+      console.log(C.dim(`      keywords: ${i.keywords.slice(0, 5).join(', ')}…`));
+    }
+    console.log('');
+    return;
+  }
+  const promptParts = [];
+  let i = 1;
+  while (i < args.length) {
+    const a = args[i];
+    if (a.startsWith('-')) break;
+    if (a !== 'scaffold') promptParts.push(a);
+    i += 1;
+  }
+  const prompt = promptParts.join(' ').trim() || sub;
+  if (!prompt || prompt === 'list-intents') {
+    console.log('Usage: velinstyle scaffold "<description>" [-o file.html] [--json]');
+    return;
+  }
+  const r = scaffoldFromPrompt(prompt);
+  if (!r.ok) {
+    console.log(C.red(r.error));
+    process.exit(1);
+  }
+  const out = getArg('--output', '-o');
+  const asJson = hasFlag('--json');
+  if (asJson) {
+    console.log(JSON.stringify(r, null, 2));
+  } else if (out) {
+    writeFileSync(resolve(out), r.html, 'utf-8');
+    console.log(C.green(`Wrote ${resolve(out)} (intent: ${r.intent}, ${r.confidence})`));
+    if (r.responsiveHints?.length) {
+      console.log(C.yellow(`  ${r.responsiveHints.length} layout hint(s) — run: velinstyle layout suggest ${out}`));
+    }
+  } else {
+    console.log(r.html);
+  }
+}
+
+async function layoutCmd() {
+  const sub = args[1] || 'audit';
+  const rawTarget = args[2] && !args[2].startsWith('-') ? args[2] : '.';
+  const targetPath = resolve(rawTarget);
+  const asJson = hasFlag('--json');
+  const write = hasFlag('--write');
+  const dryRun = hasFlag('--dry-run') || !write;
+
+  const { auditPath, suggestFromIssues, formatTextReport, fixPath } = await import('./layout-audit.js');
+
+  if (sub === 'fix') {
+    const result = fixPath(targetPath, { write, dryRun });
+    if (!result.ok) {
+      console.log(C.red(result.error || 'Fix failed'));
+      process.exit(1);
+    }
+    if (asJson) {
+      console.log(JSON.stringify(result, null, 2));
+      return;
+    }
+    if (result.changes.length === 0) {
+      console.log(C.green('No safe fixes to apply.'));
+      return;
+    }
+    for (const c of result.changes) {
+      console.log(`${dryRun ? '[dry-run] ' : ''}${c.file}`);
+      c.changes.forEach((ch) => console.log(C.dim(`  - ${ch}`)));
+    }
+    return;
+  }
+
+  const { issues, files } = auditPath(targetPath);
+  const outIssues = sub === 'suggest' ? suggestFromIssues(issues) : issues;
+
+  if (asJson) {
+    console.log(JSON.stringify({ files, issues: outIssues }, null, 2));
+    return;
+  }
+
+  console.log(formatTextReport(outIssues, files));
+  if (sub === 'suggest' && issues.length) {
+    console.log(C.bold('Suggested fixes:'));
+    for (const i of outIssues) {
+      console.log(`  [${i.id}] ${i.fix}`);
+      if (i.responsive?.mobile) {
+        console.log(C.dim(`    mobile: ${i.responsive.mobile}`));
+      }
+    }
+    console.log('');
+  }
+  process.exit(issues.some((x) => x.severity === 'error') ? 1 : 0);
+}
+
 async function scanCmd() {
   const targetPath = args[1] && !args[1].startsWith('-') ? resolve(args[1]) : resolve('.');
   const format = getArg('--format') || 'text';
@@ -507,6 +619,7 @@ async function scanCmd() {
     fixLang = 'de';
   }
   const severity = getArg('--severity') || 'warning';
+  const only = getArg('--only');
 
   const { scan } = await import('./scanner.js');
   const exitCode = scan(targetPath, {
@@ -515,6 +628,7 @@ async function scanCmd() {
     fixDryRun,
     fixLang: fixLang || undefined,
     format,
+    only,
   });
   process.exit(exitCode);
 }
@@ -531,6 +645,8 @@ switch (command) {
   case 'tokens': await tokensCmd(); break;
   case 'scan': scanCmd(); break;
   case 'prefix': await prefixCmd(); break;
+  case 'scaffold': await scaffoldCmd(); break;
+  case 'layout': await layoutCmd(); break;
   case '--help': case '-h': help(); break;
   default: help(); break;
 }