@birdapi/velinstyle 1.1.0 → 1.2.0

package/components/velin-sheet.js

@@ -78,7 +78,6 @@ class VelinSheet extends HTMLElement {
     this._prev = saveFocus();
     setBackgroundInert(this);
     document.addEventListener('keydown', this._onKey);
-    document.body.style.overflow = 'hidden';
     requestAnimationFrame(() => {
       const f = getFocusableElements(this.shadowRoot);
       if (f.length) f[0].focus();
@@ -87,8 +86,7 @@ class VelinSheet extends HTMLElement {
 
   _close() {
     document.removeEventListener('keydown', this._onKey);
-    document.body.style.overflow = '';
-    clearBackgroundInert();
+    clearBackgroundInert(this);
     restoreFocus(this._prev);
   }
 
@@ -99,7 +97,7 @@ class VelinSheet extends HTMLElement {
 
   disconnectedCallback() {
     document.removeEventListener('keydown', this._onKey);
-    document.body.style.overflow = '';
+    clearBackgroundInert(this);
   }
 }
 

package/core/a11y/component-contracts.json

@@ -1,6 +1,6 @@
 {
   "wcagLevel": "AAA",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "components": {
     "velin-accordion": {
       "status": "pass",
@@ -77,11 +77,28 @@
     "velin-data-table": {
       "status": "pass",
       "roles": ["button"],
-      "keyboard": "Native buttons for column sort and pagination",
+      "keyboard": "Sort buttons; editable cells: Enter/F2 edit, Escape cancel; pagination",
       "liveRegion": "polite",
       "reducedMotion": true,
       "requiredAttributes": [],
-      "notes": "Enhances a light-DOM table. Sort state exposed via aria-sort; sort triggers are real buttons. Needs a caption, aria-label, or label attribute (warns otherwise). Filtered and off-page rows use hidden so they leave the a11y tree; sort, filter and page changes are announced."
+      "notes": "Enhances a light-DOM table. Optional editable attribute or data-editable cells for inline edit (velin-data-table-edit). No virtualization in v1."
+    },
+    "velin-calendar": {
+      "status": "pass",
+      "roles": ["group", "grid", "button"],
+      "keyboard": "Arrows, Home/End, PageUp/Down, Enter/Space",
+      "reducedMotion": true,
+      "requiredAttributes": [],
+      "notes": "Month calendar. value ISO date; velin-change event. Optional min/max."
+    },
+    "velin-file-dropzone": {
+      "status": "pass",
+      "roles": ["group"],
+      "keyboard": "Browse button + native file input",
+      "liveRegion": "polite",
+      "reducedMotion": true,
+      "requiredAttributes": [],
+      "notes": "Client-side dropzone. Events velin-files / velin-error. Does not upload to a server."
     },
     "velin-dialog": {
       "status": "pass",

package/core/meta/build.js

@@ -164,6 +164,35 @@ export async function buildAgentBundle(options) {
     }
   }
 
+  const readJsonSafe = (rel) => {
+    const p = join(pkgRoot, rel);
+    if (!existsSync(p)) return null;
+    try {
+      return JSON.parse(readFileSync(p, 'utf-8'));
+    } catch {
+      return null;
+    }
+  };
+
+  const knowledgeComponents = readJsonSafe('core/meta/knowledge/components.json');
+  const knowledgeTokens = readJsonSafe('core/meta/knowledge/tokens.json');
+  const pageRegistry = readJsonSafe('core/meta/pages/registry.json');
+  const sectionRegistry = readJsonSafe('core/meta/sections/registry.json');
+  const skillsRegistry = readJsonSafe('packages/velinstyle-skills/registry.json');
+  const skillsCatalog = readJsonSafe('packages/velinstyle-skills/catalog.json');
+
+  const constraintDir = join(pkgRoot, 'core', 'meta', 'design-constraints');
+  const designConstraints = [];
+  if (existsSync(constraintDir)) {
+    for (const file of readdirSync(constraintDir).filter((f) => f.endsWith('.json'))) {
+      try {
+        designConstraints.push(JSON.parse(readFileSync(join(constraintDir, file), 'utf-8')));
+      } catch {
+        /* skip bad files */
+      }
+    }
+  }
+
   const bundle = {
     schemaVersion: VELIN_AGENT_SCHEMA_VERSION,
     mime: VELIN_META_MIME,
@@ -174,7 +203,8 @@ export async function buildAgentBundle(options) {
       homepage: pkg.homepage,
       repository: pkg.repository,
       tagline:
-        'VelinStyle is the WCAG 2.2 AAA CSS framework with native JavaScript runtime and Web Components.',
+        'VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components.',
+      pipeline: 'Core Foundation → Design System → Knowledge Graph → Prompt Engine → Review Engine → AI Metadata',
     },
     packageExports: pkg.exports,
     release: {
@@ -185,6 +215,7 @@ export async function buildAgentBundle(options) {
       migration: [
         'Replace velin-tooltip-wc / velin-stepper-wc with velin-tooltip / velin-stepper.',
         'Point AI tools at velin-agent.json or docs/llms.txt for framework context.',
+        'Prefer velinstyle scaffold / plan for page generation (plan → render → review).',
       ],
     },
     components: {
@@ -195,10 +226,73 @@ export async function buildAgentBundle(options) {
       legacyAliases,
       helpers,
     },
+    knowledgeGraph: {
+      components: knowledgeComponents?.components || [],
+      componentCount: knowledgeComponents?.components?.length || 0,
+      tokens: knowledgeTokens,
+      pages: pageRegistry?.pages || [],
+      pageCount: pageRegistry?.pages?.length || 0,
+      sections: sectionRegistry?.sections || [],
+      sectionCount: sectionRegistry?.sections?.length || 0,
+      designConstraints,
+      schemas: [
+        'schemas/component-knowledge.schema.json',
+        'schemas/design-intelligence.schema.json',
+        'schemas/design-constraint.schema.json',
+        'schemas/page-template.schema.json',
+        'schemas/section.schema.json',
+        'schemas/review-report.schema.json',
+        'schemas/token-graph.schema.json',
+        'schemas/design-rule.schema.json',
+        'schemas/skill-record.schema.json',
+        'schemas/skill-registry.schema.json',
+        'schemas/skill-pack.schema.json',
+        'schemas/skill-graph.schema.json',
+        'schemas/skill-bundle.schema.json',
+        'schemas/skill-template.schema.json',
+        'schemas/skill-project.schema.json',
+      ],
+    },
+    skills: {
+      count: skillsCatalog?.totals?.skills || skillsRegistry?.skills?.length || 0,
+      categories: [...new Set((skillsRegistry?.skills || []).map((item) => item.category))].sort(),
+      capabilities: [...new Set((skillsRegistry?.skills || []).flatMap((item) => item.capabilities || []))].sort(),
+      items: (skillsRegistry?.skills || []).map((item) => ({
+        id: item.id,
+        category: item.category,
+        priority: item.priority,
+        status: item.status,
+        confidence: item.confidence,
+        capabilities: item.capabilities || [],
+      })),
+    },
+    skillPacks: skillsRegistry?.packs || [],
+    workflowGraphs: (skillsRegistry?.workflowGraphs || []).map((graph) => ({
+      id: graph.id,
+      name: graph.name,
+      entry: graph.entry,
+      nodeCount: Object.keys(graph.nodes || {}).length,
+      edgeCount: (graph.edges || []).length,
+    })),
+    bundles: skillsRegistry?.bundles || [],
+    templates: skillsRegistry?.templates || [],
+    projectSkills: skillsRegistry?.projects || [],
     attributes: { names: attributes, count: attributes.length },
     cli: { commands: cliCommands },
     tooling: {
-      categories: ['scan', 'prefix', 'scaffold', 'layout', 'perf', 'tokens', 'docs', 'search', 'meta'],
+      categories: [
+        'scan',
+        'prefix',
+        'scaffold',
+        'plan',
+        'review',
+        'layout',
+        'perf',
+        'tokens',
+        'docs',
+        'search',
+        'meta',
+      ],
       scannerRuleCount,
     },
     a11y: {
@@ -216,11 +310,17 @@ export async function buildAgentBundle(options) {
       generated: 'docs/generated/',
       guides: {
         velinMeta: 'docs/guides/velin-meta.html',
+        aiSkills: 'docs/guides/ai-skills.html',
         velinSearch: 'docs/guides/velin-search.html',
         syntaxHighlight: 'docs/guides/syntax-highlight.html',
         promptScaffolding: 'docs/guides/prompt-scaffolding.html',
         apiReference: 'docs/guides/api-reference.html',
       },
+      strategy: {
+        note: 'Maintainer strategy/ADR docs are not published (monorepo interne_docs/strategy).',
+        northStar: 'VELINSTYLE_2030.md',
+        architecture: 'ARCHITECTURE.md',
+      },
       agentFiles: {
         json: 'dist/velin-agent.json',
         llmsTxt: 'dist/llms.txt',
@@ -240,7 +340,7 @@ export async function buildAgentBundle(options) {
 export function buildLlmsTxt(bundle, baseUrl = 'https://velinstyle.info') {
   const tagline =
     bundle.framework.tagline ||
-    'VelinStyle is the WCAG 2.2 AAA CSS framework with native JavaScript runtime and Web Components.';
+    'VelinStyle is a CSS framework with WCAG 2.2 AAA-oriented defaults, native JavaScript runtime, and Web Components.';
   const lines = [
     `# VelinStyle ${bundle.framework.version}`,
     '',
@@ -251,19 +351,34 @@ export function buildLlmsTxt(bundle, baseUrl = 'https://velinstyle.info') {
     '## Framework',
     `- npm: ${bundle.framework.name}`,
     `- ${tagline}`,
+    `- Pipeline: ${bundle.framework.pipeline || 'Core → Design → Knowledge → Prompt → Review → AI Metadata'}`,
+    `- Maturity: CSS/Web Components/runtime = stable; plan/review, knowledge graph, page/section registry, agent metadata = beta/foundation (seed, expanding); Studio + Utility Engine generator = planned`,
     `- Components: ${bundle.components.count} canonical Web Components (\`velin-*\`); ${bundle.components.loaderCount ?? bundle.components.count} lazy-loader entries`,
+    `- Knowledge graph: ${bundle.knowledgeGraph?.componentCount ?? 0} component nodes, ${bundle.knowledgeGraph?.pageCount ?? 0} page types, ${bundle.knowledgeGraph?.sectionCount ?? 0} sections, ${bundle.knowledgeGraph?.designConstraints?.length ?? 0} design constraint packs`,
     `- HTML attributes: ${bundle.attributes.count} \`velin-*\` bridges`,
-    `- CLI: velinstyle (scan, scaffold, docs generate, search index, meta)`,
+    `- CLI: velinstyle (scan, scaffold, plan, review, docs generate, search index, meta)`,
+    '',
+    '## Agent briefing',
+    '- Treat plan/review/knowledge graph as beta foundation — usable, not a finished AI design system.',
+    '- Build pages with plan-first flow: analyze prompt → page registry → sections → design constraints → HTML → review.',
+    '- Prefer tokens (`--velin-color-*`, `--velin-space-*`) over raw hex.',
+    '- One H1 per page; form fields need labels + `velin-form-summary` when validating.',
+    '- Hero: max 2 CTAs; FAQ uses disclosure (`velin-accordion` / details).',
+    '- Do not invent non-`velin-*` utility classes.',
+    '- Prefer registry-backed skills/workflows (`velinstyle skills ...`, `velinstyle workflow ...`) before ad-hoc orchestration.',
     '',
     '## Conventions',
     ...bundle.conventions.map((c) => `- ${c}`),
     '',
     '## Key guides',
     `- [Velin-Meta](${baseUrl}/docs/guides/velin-meta.html)`,
+    `- [AI Skills](${baseUrl}/docs/guides/ai-skills.html)`,
     `- [VelinSearch](${baseUrl}/docs/guides/velin-search.html)`,
     `- [Syntax highlighting](${baseUrl}/docs/guides/syntax-highlight.html)`,
     `- [Prompt scaffolding](${baseUrl}/docs/guides/prompt-scaffolding.html)`,
     `- [API reference (generated)](${baseUrl}/docs/guides/api-reference.html)`,
+    `- North star: VELINSTYLE_2030.md`,
+    `- Architecture: ARCHITECTURE.md`,
     '',
     '## Generated reference',
     `- [Components index](${baseUrl}/docs/generated/components/)`,
@@ -273,9 +388,14 @@ export function buildLlmsTxt(bundle, baseUrl = 'https://velinstyle.info') {
     '',
     '## Usage for agents',
     '```',
+    'npx velinstyle plan "Steuerberater Landingpage mit Kontaktformular"',
+    'npx velinstyle scaffold "Steuerberater Landingpage mit Kontaktformular" -o out.html --json',
+    'npx velinstyle review out.html --json',
     'npx velinstyle meta',
     'npx velinstyle docs generate',
-    'npx velinstyle search index',
+    'npx velinstyle skills list --capability review',
+    'npx velinstyle skills install frontend',
+    'npx velinstyle workflow landingpage --json',
     '```',
     '',
   ];

package/core/meta/design-constraints/contact.json

@@ -0,0 +1,9 @@
+{
+  "id": "contact",
+  "target": "section:contact",
+  "rules": [
+    { "id": "contact-labels", "scope": "section", "section": "contact", "rule": "Visible labels on all fields", "severity": "error" },
+    { "id": "contact-summary", "scope": "section", "section": "contact", "rule": "Include velin-form-summary for errors", "severity": "error" },
+    { "id": "contact-submit", "scope": "section", "section": "contact", "rule": "Single primary submit button", "severity": "warning" }
+  ]
+}

package/core/meta/design-constraints/faq.json

@@ -0,0 +1,9 @@
+{
+  "id": "faq",
+  "target": "section:faq",
+  "rules": [
+    { "id": "faq-questions", "scope": "section", "section": "faq", "rule": "Entries must be clear interrogatives", "severity": "error" },
+    { "id": "faq-pattern", "scope": "section", "section": "faq", "rule": "Use accordion/disclosure, not long marketing paragraphs", "severity": "error" },
+    { "id": "faq-count", "scope": "section", "section": "faq", "rule": "Prefer 5–8 high-intent FAQs", "severity": "info" }
+  ]
+}

package/core/meta/design-constraints/hero.json

@@ -0,0 +1,13 @@
+{
+  "id": "hero",
+  "target": "section:hero",
+  "rules": [
+    { "id": "hero-headline-lines", "scope": "section", "section": "hero", "rule": "Headline max 2 lines on desktop", "severity": "error" },
+    { "id": "hero-cta-max", "scope": "section", "section": "hero", "rule": "Maximum 2 CTAs", "severity": "error" },
+    { "id": "hero-image-side", "scope": "section", "section": "hero", "rule": "Image left OR right, not competing dual heroes", "severity": "warning" },
+    { "id": "hero-padding", "scope": "section", "section": "hero", "rule": "Section padding by breakpoint", "breakpoints": { "mobile": "var(--velin-space-8)", "tablet": "var(--velin-space-10)", "desktop": "var(--velin-space-12)" }, "severity": "warning" },
+    { "id": "hero-contrast", "scope": "section", "section": "hero", "rule": "Text/surface pairs must meet contrast contract", "severity": "error" },
+    { "id": "hero-motion", "scope": "section", "section": "hero", "rule": "Animation only when motion-safe", "severity": "warning" },
+    { "id": "hero-container", "scope": "section", "section": "hero", "rule": "Content inside documented container width", "severity": "warning" }
+  ]
+}