@birdapi/velinstyle 1.0.0 → 1.2.0

package/cli/blueprints/filter-bar.html

@@ -1,9 +1,9 @@
-<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">
+<form class="velin-flex velin-flex--wrap velin-gap-3 velin-p-4 velin-border-block-end" 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">
+  <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>
@@ -11,5 +11,5 @@
       <option value="done">Done</option>
     </select>
   </label>
-  <button type="submit" class="velin-btn velin-btn--primary velin-self-end">Apply</button>
+  <button type="submit" class="velin-btn velin-btn--primary">Apply</button>
 </form>

package/cli/blueprints/form-contact.html

@@ -1,17 +1,18 @@
 <!-- VelinStyle blueprint: contact form -->
-<form class="velin-container" style="max-width:32rem" novalidate>
-  <h2 class="velin-text-2xl" style="font-weight:var(--velin-weight-semibold);margin-block-end:var(--velin-space-6)">Contact</h2>
+<form class="velin-container" style="max-width:32rem" id="contact" novalidate>
+  <h2 class="velin-text-2xl" style="font-weight:var(--velin-weight-semibold);margin-block-end:var(--velin-space-4)">Contact</h2>
+  <velin-form-summary></velin-form-summary>
   <div class="velin-field">
     <label class="velin-label" for="bp-contact-name">Name</label>
-    <input type="text" id="bp-contact-name" class="velin-input" autocomplete="name" required>
+    <input type="text" id="bp-contact-name" name="name" class="velin-input" autocomplete="name" required>
   </div>
   <div class="velin-field">
     <label class="velin-label" for="bp-contact-email">Email</label>
-    <input type="email" id="bp-contact-email" class="velin-input" autocomplete="email" required>
+    <input type="email" id="bp-contact-email" name="email" class="velin-input" autocomplete="email" required>
   </div>
   <div class="velin-field">
     <label class="velin-label" for="bp-contact-msg">Message</label>
-    <textarea id="bp-contact-msg" class="velin-input" rows="4" required></textarea>
+    <textarea id="bp-contact-msg" name="message" class="velin-input" rows="4" required></textarea>
   </div>
   <button type="submit" class="velin-btn velin-btn--primary">Send</button>
 </form>

package/cli/blueprints/hero-section.html

@@ -1,9 +1,9 @@
 <!-- VelinStyle blueprint: hero section -->
-<section class="velin-container velin-p-8" style="text-align:center;max-width:48rem;margin-inline:auto">
+<section class="velin-container velin-py-10" style="text-align:center;max-width:48rem;margin-inline:auto">
   <h1 class="velin-text-4xl" style="font-weight:var(--velin-weight-bold);letter-spacing:-0.02em;margin-block-end:var(--velin-space-4)">Headline</h1>
   <p class="velin-text-lg" style="color:var(--velin-color-text-muted);margin-block-end:var(--velin-space-6)">Short value proposition for your product.</p>
   <div class="velin-flex velin-flex--gap-3 velin-flex--justify-center velin-flex--wrap">
-    <a class="velin-btn velin-btn--primary" href="#">Primary CTA</a>
-    <a class="velin-btn velin-btn--outline" href="#">Secondary</a>
+    <a class="velin-btn velin-btn--primary" href="#contact">Primary CTA</a>
+    <a class="velin-btn velin-btn--outline" href="#services">Secondary</a>
   </div>
 </section>

package/cli/blueprints/notification-center.html

@@ -1,6 +1,6 @@
 <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">
+  <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>

package/cli/blueprints/onboarding.html

@@ -15,7 +15,8 @@
   </section>
 </velin-stepper>
 <script type="module">
-  import '../../dist/velinstyle-components.min.js';
+  // Prefer package entry; for offline vendor installs use: import './vendor/velinstyle/velinstyle-components.min.js';
+  import '@birdapi/velinstyle/bundle';
   const stepper = document.getElementById('onboard');
   document.querySelectorAll('[data-next]').forEach((btn) => {
     btn.addEventListener('click', () => stepper?.next());

package/cli/blueprints/ops-console.html

@@ -0,0 +1,29 @@
+<!-- VelinStyle blueprint: ops console (holy-grail + table) -->
+<div class="velin-layout-holy-grail">
+  <header class="velin-p-3 velin-border-block-end" role="banner">
+    <strong>Ops console</strong>
+  </header>
+  <aside class="velin-p-4" aria-label="Console navigation">
+    <nav class="velin-flex velin-flex--col velin-gap-2">
+      <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#queue">Queue</a>
+      <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#reviews">Reviews</a>
+      <a class="velin-btn velin-btn--ghost velin-btn--sm" href="#shipped">Shipped</a>
+    </nav>
+  </aside>
+  <main id="main" class="velin-p-6" role="main">
+    <h1 class="velin-text-xl velin-font-bold velin-mbe-4">Queue</h1>
+    <div class="velin-table-wrapper">
+      <table class="velin-table">
+        <caption class="velin-sr-only">Ops queue</caption>
+        <thead>
+          <tr><th scope="col">Item</th><th scope="col">Owner</th><th scope="col">Status</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Brand refresh</td><td>Alex</td><td><span class="velin-badge velin-badge--success">Ready</span></td></tr>
+          <tr><td>Case study</td><td>Sam</td><td><span class="velin-badge">Draft</span></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+  <footer class="velin-p-3 velin-border-block-start velin-text-sm velin-text-muted" role="contentinfo">Status · live</footer>
+</div>

package/cli/blueprints/pricing-band.html

@@ -0,0 +1,37 @@
+<!-- VelinStyle blueprint: contiguous pricing band -->
+<section class="velin-container velin-py-10" id="pricing" aria-labelledby="pricing-title">
+  <header class="velin-mbe-6" style="text-align:center;max-inline-size:40rem;margin-inline:auto">
+    <h2 id="pricing-title" class="velin-text-3xl velin-font-bold velin-mbe-2">Pricing</h2>
+    <p class="velin-text-muted">Contiguous columns — highlight the recommended plan with border-primary.</p>
+  </header>
+  <div class="velin-grid velin-gap-0" style="grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));border:1px solid var(--velin-color-border);border-radius:var(--velin-radius-lg);overflow:hidden">
+    <article class="velin-p-6 velin-border-inline" style="border-inline-end:1px solid var(--velin-color-border)">
+      <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 workspace</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-border-primary" style="border-width:2px;z-index:1">
+      <span class="velin-badge velin-badge--primary">Recommended</span>
+      <h3 class="velin-text-lg velin-font-bold velin-mbs-2">Pro</h3>
+      <p class="velin-text-3xl velin-font-bold velin-mbs-2 velin-mbe-4">$29</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>
+    <article class="velin-p-6">
+      <h3 class="velin-text-lg velin-font-bold">Studio</h3>
+      <p class="velin-text-3xl velin-font-bold velin-mbs-2 velin-mbe-4">$99</p>
+      <ul class="velin-text-sm velin-mbe-4" role="list">
+        <li>SSO + seats</li>
+        <li>Dedicated success</li>
+      </ul>
+      <button type="button" class="velin-btn velin-btn--outline velin-w-full">Contact</button>
+    </article>
+  </div>
+</section>

package/cli/blueprints/process-steps.html

@@ -0,0 +1,10 @@
+<!-- VelinStyle blueprint: process steps -->
+<section class="velin-container velin-py-8" id="process">
+  <h2 class="velin-text-3xl" style="font-weight:var(--velin-weight-semibold);margin-block-end:var(--velin-space-6)">How it works</h2>
+  <ol class="velin-stack" style="padding-inline-start:1.25rem">
+    <li><strong>Discover</strong> — short intake to clarify goals and constraints.</li>
+    <li><strong>Plan</strong> — transparent next steps and timeline.</li>
+    <li><strong>Deliver</strong> — reviewed output with clear ownership.</li>
+    <li><strong>Support</strong> — follow-up when regulations or needs change.</li>
+  </ol>
+</section>

package/cli/blueprints/services-grid.html

@@ -0,0 +1,9 @@
+<!-- VelinStyle blueprint: services / Leistungen grid -->
+<section class="velin-container velin-py-8" id="services">
+  <h2 class="velin-text-3xl" style="font-weight:var(--velin-weight-semibold);margin-block-end:var(--velin-space-6)">Services</h2>
+  <div class="velin-grid velin-grid--auto-fit">
+    <article class="velin-card"><div class="velin-card__body"><h3 class="velin-card__title">Service one</h3><p class="velin-card__text">Outcome-focused description.</p><a href="#contact" class="velin-btn velin-btn--outline velin-btn--sm">Learn more</a></div></article>
+    <article class="velin-card"><div class="velin-card__body"><h3 class="velin-card__title">Service two</h3><p class="velin-card__text">Outcome-focused description.</p><a href="#contact" class="velin-btn velin-btn--outline velin-btn--sm">Learn more</a></div></article>
+    <article class="velin-card"><div class="velin-card__body"><h3 class="velin-card__title">Service three</h3><p class="velin-card__text">Outcome-focused description.</p><a href="#contact" class="velin-btn velin-btn--outline velin-btn--sm">Learn more</a></div></article>
+  </div>
+</section>

package/cli/blueprints/settings-panel.html

@@ -1,19 +1,21 @@
 <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">
+  <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 class="velin-switch">
+      <input type="checkbox" class="velin-switch__input" name="notify" />
+      <span class="velin-switch__track" aria-hidden="true"></span>
+      <span class="velin-switch__label">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';
+  // Prefer package entry; for offline vendor installs use: import './vendor/velinstyle/velinstyle-components.min.js';
+  import '@birdapi/velinstyle/bundle';
   document.getElementById('open-settings')?.addEventListener('click', () => {
     document.getElementById('settings-sheet')?.open?.();
   });

package/cli/blueprints/split-hero.html

@@ -0,0 +1,25 @@
+<!-- VelinStyle blueprint: split hero (copy + ops panel) -->
+<section class="velin-container velin-py-10" id="hero" data-velin-section="hero" aria-labelledby="split-hero-title">
+  <div class="velin-grid velin-gap-6" style="grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:center">
+    <div>
+      <p class="velin-text-sm velin-text-muted velin-mbe-2">Creative ops</p>
+      <h1 id="split-hero-title" class="velin-text-4xl velin-font-bold velin-mbe-4">Ship editorial work without chaos</h1>
+      <p class="velin-text-lg velin-text-muted velin-mbe-6">Split layout hero — primary and secondary CTAs only.</p>
+      <div class="velin-flex velin-flex--gap-3 velin-flex--wrap">
+        <a class="velin-btn velin-btn--primary" href="#contact">Book a call</a>
+        <a class="velin-btn velin-btn--outline" href="#capabilities">See capabilities</a>
+      </div>
+    </div>
+    <aside class="velin-card" aria-label="Ops snapshot">
+      <div class="velin-card__body">
+        <h2 class="velin-card__title">Live ops</h2>
+        <p class="velin-card__text velin-text-muted">Queue · reviews · publishes</p>
+        <ul class="velin-stack velin-mbs-4" role="list">
+          <li class="velin-flex velin-flex--justify-between"><span>Briefs</span><strong>12</strong></li>
+          <li class="velin-flex velin-flex--justify-between"><span>In review</span><strong>4</strong></li>
+          <li class="velin-flex velin-flex--justify-between"><span>Shipped</span><strong>38</strong></li>
+        </ul>
+      </div>
+    </aside>
+  </div>
+</section>

package/cli/blueprints/testimonials.html

@@ -0,0 +1,8 @@
+<!-- VelinStyle blueprint: testimonials -->
+<section class="velin-container velin-py-8" id="testimonials">
+  <h2 class="velin-text-3xl" style="font-weight:var(--velin-weight-semibold);margin-block-end:var(--velin-space-6)">What clients say</h2>
+  <div class="velin-grid velin-grid--auto-fit">
+    <figure class="velin-card"><div class="velin-card__body"><blockquote class="velin-card__text">“Clear advice and a process we could follow.”</blockquote><figcaption class="velin-text-sm" style="color:var(--velin-color-text-muted);margin-block-start:var(--velin-space-3)">— A. Meyer, Founder</figcaption></div></figure>
+    <figure class="velin-card"><div class="velin-card__body"><blockquote class="velin-card__text">“We finally understood our options without pressure.”</blockquote><figcaption class="velin-text-sm" style="color:var(--velin-color-text-muted);margin-block-start:var(--velin-space-3)">— S. Keller, Operator</figcaption></div></figure>
+  </div>
+</section>

package/cli/blueprints/trust-bar.html

@@ -0,0 +1,10 @@
+<!-- VelinStyle blueprint: trust bar -->
+<section class="velin-container velin-py-6" aria-label="Trusted by">
+  <p class="velin-text-sm velin-text-center" style="color:var(--velin-color-text-muted);margin-block-end:var(--velin-space-4)">Trusted by teams who value clarity</p>
+  <ul class="velin-flex velin-flex--wrap velin-flex--justify-center velin-flex--gap-6" style="list-style:none;padding:0;margin:0">
+    <li class="velin-text-sm" style="font-weight:var(--velin-weight-semibold)">Acme Audit</li>
+    <li class="velin-text-sm" style="font-weight:var(--velin-weight-semibold)">Nordic Ledger</li>
+    <li class="velin-text-sm" style="font-weight:var(--velin-weight-semibold)">Rhein Finance</li>
+    <li class="velin-text-sm" style="font-weight:var(--velin-weight-semibold)">Helix Tax</li>
+  </ul>
+</section>

package/cli/cli-manifest.json

@@ -1,17 +1,17 @@
 {
-  "version": "1.0.0",
+  "version": "1.2.0",
   "commands": [
     {
       "name": "init",
-      "summary": "Create velinstyle.config.js",
+      "summary": "Create velinstyle.config.js, optional vendor copy, and starter HTML with reveal/sprite defaults",
       "flags": [],
       "example": "velinstyle init"
     },
     {
       "name": "build",
       "summary": "Build custom CSS with selected layers from config",
-      "flags": [],
-      "example": "velinstyle build"
+      "flags": ["--output", "-o", "--minify", "--preset"],
+      "example": "velinstyle build --preset lite -o ./lite.css"
     },
     {
       "name": "themes",
@@ -34,9 +34,9 @@
     },
     {
       "name": "scan",
-      "summary": "Security, accessibility, CSS, and PII scanner",
+      "summary": "Security, accessibility, CSS, and PII scanner (directory or single file)",
       "flags": ["--format", "--severity", "--only", "--fix", "--fix-dry-run", "--fix-lang"],
-      "example": "velinstyle scan . --only pii --fix-dry-run"
+      "example": "velinstyle scan index.html"
     },
     {
       "name": "prefix",
@@ -46,17 +46,61 @@
     },
     {
       "name": "blueprint",
-      "summary": "Print HTML blueprint snippets",
-      "flags": ["--output", "-o"],
+      "summary": "Print HTML blueprint snippets; --strict fails on classes missing from CSS",
+      "flags": ["--output", "-o", "--strict"],
       "subcommands": ["list"],
-      "example": "velinstyle blueprint modal -o snippet.html"
+      "example": "velinstyle blueprint modal -o snippet.html --strict"
+    },
+    {
+      "name": "create",
+      "summary": "Scaffold a runnable project: landing | dashboard | docs | auth",
+      "flags": ["--theme", "--no-copy"],
+      "subcommands": ["landing", "dashboard", "docs", "auth"],
+      "example": "velinstyle create landing ./my-site --theme earth"
+    },
+    {
+      "name": "serve",
+      "summary": "Serve a directory over HTTP (default port 4173)",
+      "flags": ["--port"],
+      "example": "velinstyle serve . --port 4173"
+    },
+    {
+      "name": "doctor",
+      "summary": "Check dist assets, themes, config, icons, and Windows ESM import hints",
+      "flags": [],
+      "example": "velinstyle doctor"
+    },
+    {
+      "name": "check",
+      "summary": "Aggregate gate: doctor + blueprint --strict + scan + review (alias: validate)",
+      "flags": ["--json", "--sarif", "--profile"],
+      "example": "velinstyle check . --profile marketing"
     },
     {
       "name": "scaffold",
-      "summary": "Generate layout HTML from natural language prompt",
+      "summary": "Plan-first page HTML or recipe fragment from natural language",
       "flags": ["--output", "-o", "--json"],
       "subcommands": ["list-intents"],
-      "example": "velinstyle scaffold \"dashboard with sidebar\""
+      "example": "velinstyle scaffold \"Steuerberater Landingpage mit Kontakt\""
+    },
+    {
+      "name": "plan",
+      "summary": "Emit page plan JSON from a prompt (no HTML)",
+      "flags": ["--output", "-o", "--json"],
+      "example": "velinstyle plan \"SaaS landing with pricing\""
+    },
+    {
+      "name": "review",
+      "summary": "Design / a11y / SEO / performance / conversion review gate",
+      "flags": ["--json", "--prompt", "--profile"],
+      "example": "velinstyle review out.html --profile marketing"
+    },
+    {
+      "name": "wc",
+      "summary": "Inspect Web Component APIs from source",
+      "flags": [],
+      "subcommands": ["api"],
+      "example": "velinstyle wc api velin-toast"
     },
     {
       "name": "layout",
@@ -67,10 +111,10 @@
     },
     {
       "name": "perf",
-      "summary": "Performance audit for images and scripts",
+      "summary": "Performance audit for images and scripts (directory or .html file)",
       "flags": ["--json", "--write", "--dry-run"],
       "subcommands": ["audit", "suggest", "fix"],
-      "example": "velinstyle perf audit samples/"
+      "example": "velinstyle perf audit index.html"
     },
     {
       "name": "tokens",
@@ -81,17 +125,37 @@
     },
     {
       "name": "docs",
-      "summary": "Generate developer reference Markdown",
+      "summary": "Generate developer reference Markdown (alias: documentation)",
       "flags": ["--scope", "--out"],
       "subcommands": ["generate"],
       "example": "velinstyle docs generate --scope all"
     },
     {
       "name": "meta",
-      "summary": "Build Velin-Meta agent bundle (velin-agent.json, llms.txt)",
-      "flags": ["--out", "--llms-out", "--base-url", "--no-llms"],
+      "summary": "Build Velin-Meta agent bundle; page --write merges curated goals/intent",
+      "flags": ["--out", "--llms-out", "--base-url", "--no-llms", "--write"],
       "subcommands": ["page"],
-      "example": "velinstyle meta"
+      "example": "velinstyle meta page index.html --write"
+    },
+    {
+      "name": "search",
+      "summary": "Build JSON search index for VelinSearch",
+      "flags": ["--out", "--extra-html"],
+      "subcommands": ["index"],
+      "example": "velinstyle search index --out dist/search-index.json"
+    },
+    {
+      "name": "skills",
+      "summary": "Registry-first AI skill catalog and install runner",
+      "flags": ["--capability", "--status", "--priority", "--origin", "--category", "--target", "--no-deps", "--json", "--human"],
+      "subcommands": ["list", "show", "install", "run", "validate", "doctor", "packs", "bundles", "templates", "projects", "graphs"],
+      "example": "velinstyle skills show scaffold.landing --human"
+    },
+    {
+      "name": "workflow",
+      "summary": "Resolve workflow graph or project workflow steps",
+      "flags": ["--json", "--dry-run", "--step"],
+      "example": "velinstyle workflow landingpage --json"
     }
   ]
 }

package/cli/contrast-utils.js

@@ -0,0 +1,97 @@
+/**
+ * Shared WCAG contrast math for token checks and HTML scan (inline styles).
+ */
+
+const AA_NORMAL = 4.5;
+const AA_LARGE = 3;
+
+export function parseOklch(str) {
+  const m = String(str).match(/oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)/i);
+  if (!m) return null;
+  const L = m[1].includes('%') ? parseFloat(m[1]) / 100 : parseFloat(m[1]);
+  const C = parseFloat(m[2]);
+  const H = (parseFloat(m[3]) * Math.PI) / 180;
+  const a = C * Math.cos(H);
+  const b = C * Math.sin(H);
+  return oklabToXyz(L, a, b);
+}
+
+function oklabToXyz(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ ** 3;
+  const m = m_ ** 3;
+  const s = s_ ** 3;
+  return {
+    x: 1.2268798758 * l - 0.557814996 * m + 0.2813910455 * s,
+    y: -0.0405801784 * l + 1.1122568696 * m - 0.0717110581 * s,
+    z: -0.0192546317 * l - 0.2163216959 * m + 1.5169393792 * s,
+  };
+}
+
+export function parseHex(str) {
+  const m = String(str).trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (!m) return null;
+  let hex = m[1];
+  if (hex.length === 3) hex = hex.split('').map((c) => c + c).join('');
+  const r = parseInt(hex.slice(0, 2), 16) / 255;
+  const g = parseInt(hex.slice(2, 4), 16) / 255;
+  const b = parseInt(hex.slice(4, 6), 16) / 255;
+  const lin = (v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+  return { x: 0, y: 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b), z: 0, _lum: 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b) };
+}
+
+export function relLuminance(xyz) {
+  if (xyz && typeof xyz._lum === 'number') return xyz._lum;
+  const { x, y, z } = xyz;
+  const lin = (v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+  const r = lin(3.2406 * x - 1.5372 * y - 0.4986 * z);
+  const g = lin(-0.9689 * x + 1.8758 * y + 0.0415 * z);
+  const b = lin(0.0557 * x - 0.204 * y + 1.057 * z);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+export function contrastRatio(l1, l2) {
+  const [hi, lo] = l1 > l2 ? [l1, l2] : [l2, l1];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+export function parseColor(str) {
+  if (!str) return null;
+  const s = String(str).trim();
+  if (s.startsWith('#')) return parseHex(s);
+  if (/^oklch\(/i.test(s)) return parseOklch(s);
+  const rgb = s.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i);
+  if (rgb) {
+    const r = Number(rgb[1]) / 255;
+    const g = Number(rgb[2]) / 255;
+    const b = Number(rgb[3]) / 255;
+    const lin = (v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+    return { x: 0, y: 0, z: 0, _lum: 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b) };
+  }
+  return null;
+}
+
+export function styleDecl(style, prop) {
+  const re = new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`, 'i');
+  const m = String(style).match(re);
+  return m ? m[1].trim() : null;
+}
+
+/** Returns ratio or null if colors cannot be parsed. */
+export function contrastFromInlineStyle(style, { largeText = false } = {}) {
+  const fgRaw = styleDecl(style, 'color');
+  const bgRaw = styleDecl(style, 'background-color') || styleDecl(style, 'background');
+  if (!fgRaw || !bgRaw) return null;
+  // Ignore gradients / images
+  if (/gradient|url\(/i.test(bgRaw)) return null;
+  const fg = parseColor(fgRaw.split(/\s+/)[0] === 'url' ? null : fgRaw);
+  const bg = parseColor(bgRaw.split(/\s/)[0]);
+  if (!fg || !bg) return null;
+  const ratio = contrastRatio(relLuminance(fg), relLuminance(bg));
+  const min = largeText ? AA_LARGE : AA_NORMAL;
+  return { ratio, min, pass: ratio >= min, fg: fgRaw, bg: bgRaw };
+}
+
+export { AA_NORMAL, AA_LARGE };