designlang 7.1.0 → 7.2.0

package/.github/workflows/manavarya-bot.yml

@@ -0,0 +1,17 @@
+# Managed by bot-manavarya/reviewer — edits will be overwritten.
+name: manavarya-bot review
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+
+jobs:
+  review:
+    if: ${{ github.event.pull_request.draft == false }}
+    uses: bot-manavarya/reviewer/.github/workflows/review.yml@main
+    with:
+      provider: 'gemini'
+      model: 'gemini-2.5-flash'
+    secrets:
+      bot-token: ${{ secrets.MANAVARYA_BOT_TOKEN }}
+      gemini-api-key: ${{ secrets.GEMINI_API_KEY }}

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [7.2.0] — 2026-04-19
+
+### Added
+
+- **Modern CSS surfacing (Tier 1a)** — crawler now captures pseudo-elements, variable-font axes (`font-variation-settings`), `@container` queries, and `env()` usage. Surfaced on `design.modernCss`. (#33)
+- **Wide-gamut color + CSS source attribution (Tier 1b)** — `oklch()`, `oklab()`, `color-mix()`, `light-dark()`, Display P3, and Rec2020 references are collected on `design.wideGamut`. A new `design.tokenSources` maps each extracted token to the stylesheet URL it first appeared in. (#34)
+- **Auto-interact pass (Tier 2)** — new `--deep-interact` flag (implied by `--full`) runs an interaction pass before extraction: full-page scroll in 4 steps, menu/dropdown opens, hover snapshots for the first batch of buttons/links with computed-style diffs, accordion clicks, and first-match modal trigger. Results populate `design.interactionStates` (hover deltas, menu/modal snapshots). Every step is wrapped in try/catch with per-step timeouts so interaction failures never kill the crawl.
+- **Multi-page token reconciliation (Tier 2)** — when `--depth >= 1` the extractor now emits three new artifacts alongside the merged baseline: `*-tokens-shared.json` (tokens shared across every route), `*-tokens-routes/<slug>.json` (per-route `added` and `changed` deltas), and `*-routes-report.md` (readable summary). Slugs are derived from the route path (`/` → `index`) with automatic collision handling.
+
+### Changed
+
+- `--full` now also enables `--deep-interact`.
+- `--depth <n>` description updated to mention the new reconciliation outputs.
+
 ## [7.1.0] — 2026-04-19
 
 ### Added

package/README.md

@@ -311,6 +311,26 @@ A dedicated audit pass surfaced on `design.cssHealth`:
 
 Also contributes a `cssHealth` dimension to the overall design score.
 
+### 22. Chrome Extension (NEW in v7.1)
+
+A Manifest-v3 popup lives in [`chrome-extension/`](chrome-extension/). One click on any tab opens `designlang.manavaryasingh.com` with the URL prefilled — no copy-paste, no context switch. There is also a **Copy CLI** button that puts `npx designlang <url>` in your clipboard.
+
+- **Permissions:** `activeTab` only, plus host access to the hosted extractor.
+- **Install:** toggle developer mode at `chrome://extensions`, click *Load unpacked*, pick the `chrome-extension/` folder.
+- **Firefox + Edge** work with the same MV3 manifest.
+
+### 23. Better Auth + Network Control (NEW in v7.1)
+
+Extracting from authenticated, self-signed, or non-default environments now takes one flag:
+
+- **`--cookie-file <path>`** — loads cookies from JSON array, Playwright `storageState.json`, or Netscape `cookies.txt` (browser extensions, curl exports). Merges cleanly with the existing `--cookie name=value` flag.
+- **`--insecure`** — ignore HTTPS/SSL certificate errors for self-signed dev servers, corporate staging, or MITM tools.
+- **`--user-agent <ua>`** — override the browser User-Agent string.
+
+```bash
+designlang https://staging.internal --cookie-file ./session.json --insecure
+```
+
 ## All Features
 
 | Feature | Flag / Command | Description |
@@ -325,12 +345,16 @@ Also contributes a `cssHealth` dimension to the overall design score.
 | Font files | automatic | Source detection (Google/self-hosted/CDN/system), @font-face CSS |
 | Image styles | automatic | Aspect ratios, shapes, filters, pattern classification |
 | Dark mode | `--dark` | Extracts dark color scheme + light/dark diff |
-| Auth pages | `--cookie`, `--header` | Extract from authenticated/protected pages |
-| Multi-page | `--depth <n>` | Crawl N internal pages for site-wide tokens |
+| Auth pages | `--cookie`, `--cookie-file`, `--header` | Extract from authenticated/protected pages; cookie files in JSON / Playwright storageState / Netscape formats |
+| Self-signed / dev TLS | `--insecure` | Ignore HTTPS/SSL certificate errors |
+| User-Agent override | `--user-agent <ua>` | Set a custom User-Agent string |
+| Chrome extension | `chrome-extension/` | One-click handoff from any tab, MV3, `activeTab` only |
+| Multi-page | `--depth <n>` | Crawl N internal pages; emits shared-vs-per-route token reconciliation (`*-tokens-shared.json`, `*-tokens-routes/<slug>.json`, `*-routes-report.md`) |
 | Screenshots | `--screenshots` | Capture buttons, cards, inputs, nav, hero, full page |
 | Responsive | `--responsive` | Crawl at 4 viewports, map breakpoint changes |
 | Interactions | `--interactions` | Capture hover/focus/active state transitions |
-| Everything | `--full` | Enable screenshots + responsive + interactions |
+| Auto-interact | `--deep-interact` | Scroll, open menus/modals/accordions, hover CTAs before extraction |
+| Everything | `--full` | Enable screenshots + responsive + interactions + deep-interact |
 | Apply | `designlang apply <url>` | Auto-detect framework and write tokens to your project |
 | Clone | `designlang clone <url>` | Generate a working Next.js starter with extracted design |
 | Score | `designlang score <url>` | Rate design quality with visual bar chart breakdown |
@@ -365,7 +389,8 @@ Options:
   --screenshots           Capture component screenshots
   --responsive            Capture at multiple breakpoints
   --interactions          Capture hover/focus/active states
-  --full                  Enable all captures
+  --deep-interact         Auto-interact pass (scroll, menus, modals, accordions, hover CTAs)
+  --full                  Enable all captures (implies --deep-interact)
   --cookie <cookies...>   Cookies for authenticated pages (name=value)
   --cookie-file <path>    Load cookies from JSON / storageState / Netscape cookies.txt
   --header <headers...>   Custom headers (name:value)

package/bin/design-extract.js

@@ -21,6 +21,7 @@ import { formatFlutterDart } from '../src/formatters/flutter-dart.js';
 import { formatVueTheme } from '../src/formatters/vue-theme.js';
 import { formatSvelteTheme } from '../src/formatters/svelte-theme.js';
 import { formatAgentRules } from '../src/formatters/agent-rules.js';
+import { reconcileRoutes, formatRoutesReport } from '../src/formatters/routes-reconciliation.js';
 import { loadConfig, mergeConfig } from '../src/config.js';
 import { diffDesigns, formatDiffMarkdown, formatDiffHtml } from '../src/diff.js';
 import { saveSnapshot, getHistory, formatHistoryMarkdown } from '../src/history.js';
@@ -63,7 +64,8 @@ program
   .option('--framework <type>', 'generate framework theme (react, shadcn, vue, svelte)')
   .option('--responsive', 'capture design at multiple breakpoints')
   .option('--interactions', 'capture hover/focus/active states')
-  .option('--full', 'enable all extra captures (screenshots, responsive, interactions)')
+  .option('--deep-interact', 'auto-interact pass: scroll, open menus/modals/accordions, hover CTAs (implies --interactions)')
+  .option('--full', 'enable all extra captures (screenshots, responsive, interactions, deep-interact)')
   .option('--cookie <cookies...>', 'cookies for authenticated pages (name=value)')
   .option('--cookie-file <path>', 'load cookies from JSON, Playwright storageState, or Netscape cookies.txt')
   .option('--header <headers...>', 'custom headers (name:value)')
@@ -152,6 +154,7 @@ program
         headers: Object.keys(headers).length > 0 ? headers : undefined,
         insecure: merged.insecure || false,
         userAgent: merged.userAgent,
+        deepInteract: merged.deepInteract || merged.full,
       });
 
       // Responsive capture
@@ -258,6 +261,25 @@ program
         }
       }
 
+      // Multi-route token reconciliation (Tier 2). Only when --depth >= 1 and
+      // the crawler actually returned per-route token data.
+      if (merged.depth >= 1 && Array.isArray(design.routes) && design.routes.length > 0) {
+        const reconciled = reconcileRoutes(design.routes);
+        const sharedPath = join(outDir, `${prefix}-tokens-shared.json`);
+        writeFileSync(sharedPath, JSON.stringify(reconciled.shared, null, 2), 'utf-8');
+        platformFiles.push({ path: sharedPath, label: 'Shared tokens (multi-route)' });
+        const routesDir = join(outDir, `${prefix}-tokens-routes`);
+        mkdirSync(routesDir, { recursive: true });
+        for (const [slug, entry] of Object.entries(reconciled.perRoute)) {
+          const rp = join(routesDir, `${slug}.json`);
+          writeFileSync(rp, JSON.stringify({ url: entry.url, path: entry.path, added: entry.added, changed: entry.changed }, null, 2), 'utf-8');
+          platformFiles.push({ path: rp, label: `Route tokens (${slug})` });
+        }
+        const reportPath = join(outDir, `${prefix}-routes-report.md`);
+        writeFileSync(reportPath, formatRoutesReport(reconciled), 'utf-8');
+        platformFiles.push({ path: reportPath, label: 'Routes report (markdown)' });
+      }
+
       // Agent rules (opt-in, also enabled by --full)
       if (merged.emitAgentRules || merged.full) {
         const agentFiles = formatAgentRules({ design, tokens: dtcgTokens, url });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
   "type": "module",
   "bin": {

package/src/config.js

@@ -27,7 +27,8 @@ export function mergeConfig(cliOpts, config) {
     screenshots: cliOpts.screenshots || config.screenshots || false,
     framework: cliOpts.framework || config.framework,
     responsive: cliOpts.responsive || config.responsive || false,
-    interactions: cliOpts.interactions || config.interactions || false,
+    interactions: cliOpts.interactions || cliOpts.deepInteract || config.interactions || false,
+    deepInteract: cliOpts.deepInteract || config.deepInteract || false,
     full: cliOpts.full || config.full || false,
     cookie: cliOpts.cookie || config.cookies,
     header: cliOpts.header || config.headers,

package/src/crawler.js

@@ -23,6 +23,7 @@ export async function crawlPage(url, options = {}) {
     cookies, headers, ignore,
     insecure = false,
     userAgent,
+    deepInteract = false,
   } = options;
 
   const launchArgs = [
@@ -89,8 +90,16 @@ export async function crawlPage(url, options = {}) {
     }
 
     const title = await page.title();
+
+    // Auto-interact pass (Tier 2): scroll, open menus, hover, open accordions & a first modal.
+    let interactState = null;
+    if (deepInteract) {
+      interactState = await runInteractionPass(page).catch(() => null);
+    }
+
     const lightData = await extractPageData(page, ignore);
     lightData.cssCoverage = cssCoverage;
+    if (interactState) lightData.interactState = interactState;
 
     // Component screenshots
     let componentScreenshots = {};
@@ -100,7 +109,17 @@ export async function crawlPage(url, options = {}) {
 
     // Multi-page crawl: discover internal links and extract from them
     let additionalPages = [];
+    const routes = [];
     if (depth > 0) {
+      // Seed routes with the primary page
+      try {
+        const u0 = new URL(url);
+        routes.push({
+          url,
+          path: u0.pathname || '/',
+          computedStylesSample: (lightData.computedStyles || []).slice(0, 2000),
+        });
+      } catch { /* ignore */ }
       const internalLinks = await discoverInternalLinks(page, url, depth);
       for (const link of internalLinks) {
         try {
@@ -109,6 +128,14 @@ export async function crawlPage(url, options = {}) {
           await page.evaluate(() => document.fonts.ready).catch(() => {});
           const pageData = await extractPageData(page);
           additionalPages.push({ url: link, data: pageData });
+          try {
+            const u = new URL(link);
+            routes.push({
+              url: link,
+              path: u.pathname || '/',
+              computedStylesSample: (pageData.computedStyles || []).slice(0, 2000),
+            });
+          } catch { /* ignore */ }
         } catch { /* skip failed pages */ }
       }
     }
@@ -153,6 +180,8 @@ export async function crawlPage(url, options = {}) {
       url, title,
       light: lightData,
       dark: darkData,
+      interactState,
+      routes: routes.length > 0 ? routes : undefined,
       pagesAnalyzed: 1 + additionalPages.length,
       componentScreenshots,
     };
@@ -228,6 +257,137 @@ export async function captureComponentScreenshots(page, outDir) {
   return result;
 }
 
+async function snapshotSelector(page, selector) {
+  try {
+    return await page.evaluate((sel) => {
+      const el = document.querySelector(sel);
+      if (!el) return null;
+      const cs = getComputedStyle(el);
+      return {
+        color: cs.color, backgroundColor: cs.backgroundColor,
+        borderColor: cs.borderColor, boxShadow: cs.boxShadow,
+        transform: cs.transform, opacity: cs.opacity,
+        outline: cs.outline, textDecoration: cs.textDecoration,
+      };
+    }, selector);
+  } catch { return null; }
+}
+
+async function runInteractionPass(page) {
+  const state = {
+    scrollSettled: false,
+    menusOpened: 0,
+    hoverSamples: [],
+    accordionsOpened: 0,
+    modals: [],
+  };
+
+  // 1) Full-page scroll in 4 steps to trigger lazy-load + scroll-linked animations
+  try {
+    for (let i = 1; i <= 4; i++) {
+      await page.evaluate((step) => {
+        const h = document.body.scrollHeight;
+        window.scrollTo(0, (h * step) / 4);
+      }, i).catch(() => {});
+      await page.waitForTimeout(300);
+      await page.waitForLoadState('networkidle', { timeout: 2000 }).catch(() => {});
+    }
+    await page.evaluate(() => window.scrollTo(0, 0)).catch(() => {});
+    await page.waitForTimeout(200);
+    state.scrollSettled = true;
+  } catch { /* ignore */ }
+
+  // 2) Open menus / dropdowns
+  try {
+    const triggers = await page.$$('nav [aria-haspopup], [aria-expanded="false"], .menu-toggle, .hamburger, [data-menu]');
+    for (const t of triggers.slice(0, 5)) {
+      try {
+        await t.click({ timeout: 1000, trial: false });
+        state.menusOpened++;
+      } catch { /* ignore */ }
+    }
+    await page.waitForTimeout(400);
+  } catch { /* ignore */ }
+
+  // 3) Hover up to 6 buttons + 6 links with style diffs
+  try {
+    const btnSelectors = await page.evaluate(() => {
+      const arr = [];
+      const btns = Array.from(document.querySelectorAll('button')).slice(0, 6);
+      btns.forEach((el, i) => arr.push(`button:nth-of-type(${i + 1})`));
+      return arr;
+    });
+    const linkSelectors = await page.evaluate(() => {
+      const arr = [];
+      const links = Array.from(document.querySelectorAll('a[href]')).slice(0, 6);
+      links.forEach((el, i) => arr.push(`a[href]:nth-of-type(${i + 1})`));
+      return arr;
+    });
+    const samples = [...(btnSelectors || []), ...(linkSelectors || [])].slice(0, 12);
+    for (const sel of samples) {
+      const before = await snapshotSelector(page, sel);
+      if (!before) continue;
+      try {
+        await page.hover(sel, { timeout: 500 });
+        await page.waitForTimeout(100);
+        const after = await snapshotSelector(page, sel);
+        if (after) state.hoverSamples.push({ selector: sel, before, after });
+      } catch { /* ignore */ }
+    }
+  } catch { /* ignore */ }
+
+  // 4) Accordions / details
+  try {
+    const accs = await page.$$('details, [role="tab"], [data-accordion]');
+    for (const a of accs.slice(0, 6)) {
+      try {
+        await a.click({ timeout: 800 });
+        state.accordionsOpened++;
+      } catch { /* ignore */ }
+    }
+    await page.waitForTimeout(200);
+  } catch { /* ignore */ }
+
+  // 5) First triggerable modal / dialog
+  try {
+    const candidates = await page.$$('button, a[role="button"]');
+    let triggered = false;
+    for (const c of candidates.slice(0, 30)) {
+      if (triggered) break;
+      try {
+        const txt = (await c.innerText({ timeout: 500 }).catch(() => '')) || '';
+        if (!/sign\s*in|log\s*in|menu|open|subscribe/i.test(txt)) continue;
+        await c.click({ timeout: 2000 });
+        await page.waitForTimeout(600);
+        const snapshot = await page.evaluate(() => {
+          const dlg = document.querySelector('dialog[open], [role="dialog"], [aria-modal="true"]');
+          if (!dlg) return null;
+          const cs = getComputedStyle(dlg);
+          const r = dlg.getBoundingClientRect();
+          return {
+            tag: dlg.tagName.toLowerCase(),
+            role: dlg.getAttribute('role') || '',
+            bg: cs.backgroundColor,
+            color: cs.color,
+            boxShadow: cs.boxShadow,
+            borderRadius: cs.borderRadius,
+            width: r.width,
+            height: r.height,
+          };
+        });
+        if (snapshot) {
+          state.modals.push({ trigger: txt.slice(0, 60), snapshot });
+          triggered = true;
+        }
+        await page.keyboard.press('Escape').catch(() => {});
+        await page.waitForTimeout(200);
+      } catch { /* ignore */ }
+    }
+  } catch { /* ignore */ }
+
+  return state;
+}
+
 async function extractPageData(page, ignoreSelectors) {
   const data = await page.evaluate(({ maxElements, ignoreSelectors }) => {
     // Remove ignored elements before extraction
@@ -262,6 +422,67 @@ async function extractPageData(page, ignoreSelectors) {
     }
     const elements = collectElements(document, []);
 
+    // Build a lightweight index: stylesheet URL + their top selectors.
+    // Used to attribute each element's primary source stylesheet.
+    const sheetIndex = [];
+    try {
+      for (const sheet of document.styleSheets) {
+        const entry = { url: sheet.href || '', mediaText: sheet.media ? sheet.media.mediaText : '', selectors: [] };
+        try {
+          let cap = 0;
+          for (const rule of sheet.cssRules) {
+            if (cap >= 200) break;
+            if (rule && rule.selectorText) {
+              entry.selectors.push(rule.selectorText);
+              cap++;
+            }
+          }
+        } catch { /* cross-origin */ }
+        if (entry.url || entry.selectors.length > 0) sheetIndex.push(entry);
+      }
+    } catch { /* no access */ }
+
+    function findSourceFor(el) {
+      // Try to find the first stylesheet that has a selector matching this element.
+      for (const sheet of sheetIndex) {
+        for (const sel of sheet.selectors) {
+          try {
+            // selectorText can contain multiple comma-separated selectors
+            if (el.matches(sel)) {
+              return { url: sheet.url, mediaText: sheet.mediaText };
+            }
+          } catch { /* invalid or unsupported selector */ }
+        }
+      }
+      return null;
+    }
+
+    function readPseudo(el, which) {
+      try {
+        const ps = getComputedStyle(el, which);
+        const content = ps.getPropertyValue('content');
+        if (!content || content === 'none' || content === 'normal') return null;
+        return {
+          content,
+          display: ps.display,
+          position: ps.position,
+          top: ps.top,
+          left: ps.left,
+          right: ps.right,
+          bottom: ps.bottom,
+          width: ps.width,
+          height: ps.height,
+          background: ps.background,
+          color: ps.color,
+          border: ps.border,
+          transform: ps.transform,
+          mask: ps.mask || ps.getPropertyValue('-webkit-mask') || '',
+          clipPath: ps.clipPath || ps.getPropertyValue('-webkit-clip-path') || '',
+        };
+      } catch { return null; }
+    }
+
+    let sourceAttrBudget = 500;
     for (const el of elements) {
       const cs = getComputedStyle(el);
       const tag = el.tagName.toLowerCase();
@@ -270,6 +491,17 @@ async function extractPageData(page, ignoreSelectors) {
       const rect = el.getBoundingClientRect();
       const area = rect.width * rect.height;
 
+      const before = readPseudo(el, '::before');
+      const after = readPseudo(el, '::after');
+      const pseudo = (before || after) ? { before, after } : null;
+
+      let sources = null;
+      if (sourceAttrBudget > 0) {
+        const s = findSourceFor(el);
+        if (s) sources = [s];
+        sourceAttrBudget--;
+      }
+
       results.computedStyles.push({
         tag, classList, role, area,
         color: cs.color,
@@ -307,6 +539,14 @@ async function extractPageData(page, ignoreSelectors) {
         gridTemplateColumns: cs.gridTemplateColumns,
         gridTemplateRows: cs.gridTemplateRows,
         maxWidth: cs.maxWidth,
+        fontVariationSettings: cs.fontVariationSettings || cs.getPropertyValue('font-variation-settings') || 'normal',
+        fontFeatureSettings: cs.fontFeatureSettings || cs.getPropertyValue('font-feature-settings') || 'normal',
+        textWrap: cs.textWrap || cs.getPropertyValue('text-wrap') || '',
+        textDecorationStyle: cs.textDecorationStyle || '',
+        textDecorationThickness: cs.textDecorationThickness || '',
+        textUnderlineOffset: cs.textUnderlineOffset || '',
+        pseudo,
+        sources,
       });
     }
 
@@ -366,6 +606,82 @@ async function extractPageData(page, ignoreSelectors) {
       }
     } catch { /* no access */ }
 
+    // Container queries (@container rules), env() usage, and modern colors
+    results.containerQueries = [];
+    results.envUsage = [];
+    results.modernColors = [];
+    const MODERN_COLOR_RE = /(oklch\([^)]+\)|oklab\([^)]+\)|color-mix\([^)]+\)|light-dark\([^)]+\)|color\(\s*display-p3[^)]+\)|color\(\s*rec2020[^)]+\))/gi;
+    function walkRulesForContainersAndEnv(rules) {
+      for (const rule of rules) {
+        try {
+          // Scan declarations for modern color functions
+          if (rule.style && rule.cssText) {
+            const css = rule.cssText;
+            for (const m of css.matchAll(MODERN_COLOR_RE)) {
+              const raw = m[1];
+              let type = 'other';
+              if (/^oklch/i.test(raw)) type = 'oklch';
+              else if (/^oklab/i.test(raw)) type = 'oklab';
+              else if (/^color-mix/i.test(raw)) type = 'color-mix';
+              else if (/^light-dark/i.test(raw)) type = 'light-dark';
+              else if (/display-p3/i.test(raw)) type = 'display-p3';
+              else if (/rec2020/i.test(raw)) type = 'rec2020';
+              // Try to infer property
+              let property = '';
+              for (let i = 0; i < rule.style.length; i++) {
+                const p = rule.style[i];
+                if ((rule.style.getPropertyValue(p) || '').includes(raw)) { property = p; break; }
+              }
+              results.modernColors.push({ raw, type, property, selector: rule.selectorText || '' });
+            }
+          }
+          // Container query
+          if (typeof CSSContainerRule !== 'undefined' && rule instanceof CSSContainerRule) {
+            const inner = [];
+            try {
+              for (const inr of rule.cssRules) {
+                if (inr.selectorText) inner.push(inr.selectorText);
+              }
+            } catch {}
+            results.containerQueries.push({
+              condition: rule.conditionText || rule.containerQuery || '',
+              selectorText: inner.join(', '),
+              declarationCount: inner.length,
+            });
+          } else if (rule.cssText && rule.cssText.startsWith('@container')) {
+            results.containerQueries.push({
+              condition: rule.conditionText || '',
+              selectorText: '',
+              declarationCount: 0,
+            });
+          }
+          // env() scan on declaration text
+          if (rule.style) {
+            const css = rule.cssText || '';
+            const envMatches = css.match(/env\(\s*(safe-area-inset-[a-z]+|viewport-[a-z-]+|[a-z-]+)/gi);
+            if (envMatches) {
+              for (const m of envMatches) {
+                results.envUsage.push(m.replace(/^env\(\s*/, '').trim());
+              }
+            }
+          }
+          // Recurse into grouping rules (media, supports, container)
+          if (rule.cssRules) {
+            walkRulesForContainersAndEnv(rule.cssRules);
+          }
+        } catch { /* ignore per-rule errors */ }
+      }
+    }
+    try {
+      for (const sheet of document.styleSheets) {
+        try {
+          walkRulesForContainersAndEnv(sheet.cssRules);
+        } catch { /* cross-origin — already tracked */ }
+      }
+    } catch { /* no access */ }
+    // dedupe envUsage
+    results.envUsage = [...new Set(results.envUsage)];
+
     // Component clusters (v7): per-element features for similarity-based grouping.
     function colorToChannels(str) {
       if (!str) return [0, 0, 0, 0];
@@ -551,6 +867,31 @@ function parseCrossOriginCSS(cssText, data) {
   for (const m of cssText.matchAll(/@media\s*([^{]+)\{/g)) {
     data.mediaQueries.push(m[1].trim());
   }
+  // Container queries
+  if (!data.containerQueries) data.containerQueries = [];
+  for (const m of cssText.matchAll(/@container\s*([^{]*)\{/g)) {
+    data.containerQueries.push({ condition: m[1].trim(), selectorText: '', declarationCount: 0 });
+  }
+  // env() usage
+  if (!data.envUsage) data.envUsage = [];
+  for (const m of cssText.matchAll(/env\(\s*(safe-area-inset-[a-z]+|viewport-[a-z-]+)/gi)) {
+    data.envUsage.push(m[1]);
+  }
+  data.envUsage = [...new Set(data.envUsage)];
+  // Modern colors
+  if (!data.modernColors) data.modernColors = [];
+  const modernRe = /(oklch\([^)]+\)|oklab\([^)]+\)|color-mix\([^)]+\)|light-dark\([^)]+\)|color\(\s*display-p3[^)]+\)|color\(\s*rec2020[^)]+\))/gi;
+  for (const m of cssText.matchAll(modernRe)) {
+    const raw = m[1];
+    let type = 'other';
+    if (/^oklch/i.test(raw)) type = 'oklch';
+    else if (/^oklab/i.test(raw)) type = 'oklab';
+    else if (/^color-mix/i.test(raw)) type = 'color-mix';
+    else if (/^light-dark/i.test(raw)) type = 'light-dark';
+    else if (/display-p3/i.test(raw)) type = 'display-p3';
+    else if (/rec2020/i.test(raw)) type = 'rec2020';
+    data.modernColors.push({ raw, type, property: '', selector: '' });
+  }
   // Keyframes
   for (const m of cssText.matchAll(/@keyframes\s+([\w-]+)\s*\{([\s\S]*?)\n\}/g)) {
     const steps = [];

package/src/extractors/interaction-states.js

@@ -0,0 +1,57 @@
+// Structured catalog of transition styles captured by the Tier-2 interaction
+// pass — hover deltas, modal appearance, menu styling.
+
+function diffStyles(before, after) {
+  const diff = {};
+  if (!before || !after) return diff;
+  for (const k of Object.keys(after)) {
+    if (before[k] !== after[k]) {
+      diff[k] = { from: before[k], to: after[k] };
+    }
+  }
+  return diff;
+}
+
+export function extractInteractionStates(interactState) {
+  if (!interactState || typeof interactState !== 'object') {
+    return {
+      scrollSettled: false,
+      menusOpened: 0,
+      hover: { sampled: 0, changed: 0, deltas: [] },
+      accordionsOpened: 0,
+      modals: [],
+    };
+  }
+
+  const deltas = [];
+  const samples = Array.isArray(interactState.hoverSamples) ? interactState.hoverSamples : [];
+  for (const s of samples) {
+    const d = diffStyles(s.before, s.after);
+    if (Object.keys(d).length > 0) {
+      deltas.push({ selector: s.selector, changes: d });
+    }
+  }
+
+  const modals = Array.isArray(interactState.modals) ? interactState.modals.map(m => ({
+    trigger: m.trigger || '',
+    bg: m.snapshot?.bg || '',
+    color: m.snapshot?.color || '',
+    boxShadow: m.snapshot?.boxShadow || '',
+    borderRadius: m.snapshot?.borderRadius || '',
+    width: m.snapshot?.width || 0,
+    height: m.snapshot?.height || 0,
+    role: m.snapshot?.role || '',
+  })) : [];
+
+  return {
+    scrollSettled: !!interactState.scrollSettled,
+    menusOpened: interactState.menusOpened || 0,
+    hover: {
+      sampled: samples.length,
+      changed: deltas.length,
+      deltas,
+    },
+    accordionsOpened: interactState.accordionsOpened || 0,
+    modals,
+  };
+}