meno-core 1.1.3 → 1.1.4

package/lib/server/deMirror.test.ts

@@ -0,0 +1,61 @@
+import { describe, test, expect } from 'bun:test';
+import { planDeMirror, renderDeMirrorMarkdown, type ComponentClassUsage } from './deMirror';
+
+const CSS = `
+.team-card { border: 1px solid #ccc; }
+.team-card .title { font-weight: bold; }
+.case-card { padding: 8px; }
+.container { max-width: 1200px; }
+.orphan { color: red; }
+.wrap-x p { margin: 0; }
+@media screen and (max-width: 767px) { .team-card { padding: 4px; } }
+`;
+
+const COMPONENTS: ComponentClassUsage[] = [
+  { name: 'TeamCard', classes: ['team-card', 'title', 'container'] },
+  { name: 'CaseCard', classes: ['case-card', 'container'] },
+  { name: 'WrapComp', classes: ['wrap-x'] },
+];
+
+const plan = planDeMirror({ css: CSS, components: COMPONENTS });
+const slice = (name: string) => plan.components.find((c) => c.name === name);
+
+describe('planDeMirror', () => {
+  test('counts every class rule and stays lossless (round-trip)', () => {
+    expect(plan.source.classRules).toBe(7);
+    expect(plan.source.componentCount).toBe(3);
+    expect(plan.roundTrip).toBe(true);
+    // Every rule assigned exactly once.
+    expect(plan.moved.rules + plan.global.sharedRules + plan.global.deadRules).toBe(7);
+  });
+
+  test('moves single-owner rules onto their component', () => {
+    expect(slice('TeamCard')?.ruleCount).toBe(3); // .team-card, .team-card .title, @media .team-card
+    expect(slice('CaseCard')?.ruleCount).toBe(1);
+    expect(slice('WrapComp')?.ruleCount).toBe(1); // class-less subject falls back to scope class
+    expect(plan.moved.components).toBe(3);
+  });
+
+  test('keeps shared + dead rules global', () => {
+    expect(plan.global.sharedRules).toBe(1); // .container (both TeamCard + CaseCard)
+    expect(plan.global.deadRules).toBe(1); // .orphan (no component)
+    expect(plan.warnings.sharedSelectors).toContain('.container');
+    expect(plan.warnings.deadSelectors).toContain('.orphan');
+  });
+
+  test('assembles de-minified slice text with base rules + @media groups', () => {
+    const css = slice('TeamCard')?.css ?? '';
+    expect(css).toContain('.team-card {');
+    expect(css).toContain('border: 1px solid #ccc;');
+    expect(css).toContain('.team-card .title {');
+    expect(css).toContain('@media screen and (max-width:767px) {');
+    expect(slice('TeamCard')?.breakpoints).toEqual(['', 'screen and (max-width:767px)']);
+  });
+
+  test('markdown renderer summarizes the plan', () => {
+    const md = renderDeMirrorMarkdown(plan);
+    expect(md).toContain('# De-mirror plan');
+    expect(md).toContain('round-trip ✅ lossless');
+    expect(md).toContain('TeamCard');
+  });
+});

package/lib/server/deMirror.ts

@@ -0,0 +1,317 @@
+/**
+ * De-mirror planner — move each component's CSS slice off the global Webflow monolith onto the
+ * component that owns it. This is the step AFTER componentization: the pages are already carved into
+ * components, but every component still leans on the one big `_mirror` stylesheet. De-mirror
+ * **relocates** the rules (it does NOT convert them to utilities — class names are preserved), so a
+ * component ends up owning the exact CSS its DOM uses.
+ *
+ * Ownership is a component-usage graph: a class rule whose subject classes live in **exactly one**
+ * component moves onto that component; a rule used by two or more components (or framework classes
+ * like `.w-*` / auto-wrappers shared everywhere) stays in the reduced global sheet. Every rule lands
+ * in exactly one place — that's the round-trip invariant this planner verifies.
+ *
+ * Pure (css-tree only) and read-only: it computes the plan + the de-minified slice text + the reduced
+ * global, and reports whether the split is lossless. Writing the files is a separate apply step.
+ */
+
+import * as csstree from 'css-tree';
+
+/** A component and the class tokens its DOM uses (from `collectClassesFromPageData`). */
+export interface ComponentClassUsage {
+  name: string;
+  classes: string[];
+}
+
+export interface DeMirrorOptions {
+  /** Max rules to include verbatim in each component's slice text. Default: unlimited (0). */
+  sliceRuleLimit?: number;
+  /** Max sample selectors to report for the shared/dead warning lists. Default 40. */
+  warningSampleLimit?: number;
+}
+
+export interface ComponentSlice {
+  name: string;
+  /** Class rules that move onto this component. */
+  ruleCount: number;
+  declarations: number;
+  approxBytes: number;
+  /** Distinct `@media` conditions the slice spans. */
+  breakpoints: string[];
+  /** The de-minified CSS to co-locate on the component (base rules first, then each @media group). */
+  css: string;
+}
+
+export interface DeMirrorPlan {
+  source: {
+    /** Total class rules in the sheet (element-only/base and at-rule bodies are not counted). */
+    classRules: number;
+    classRuleBytes: number;
+    componentCount: number;
+  };
+  /** Components that receive a slice, largest first. */
+  components: ComponentSlice[];
+  /** What stays in the global sheet after de-mirror. */
+  global: {
+    /** Class rules kept global because ≥2 components use them (shared framework/design-system). */
+    sharedRules: number;
+    /** Class rules kept global because NO component uses them (dead in the current pages). */
+    deadRules: number;
+    approxBytes: number;
+  };
+  moved: {
+    /** Rules relocated onto a component. */
+    rules: number;
+    approxBytes: number;
+    /** How many distinct components received a slice. */
+    components: number;
+  };
+  warnings: {
+    /** Sample selectors kept global because two+ components share them (can't co-locate). */
+    sharedSelectors: string[];
+    /** Sample selectors defined but matched by no component (dead). */
+    deadSelectors: string[];
+  };
+  /** True when every class rule was assigned to exactly one place (component slice OR global). */
+  roundTrip: boolean;
+}
+
+interface CapturedRule {
+  /** Full selector list text (comma-joined), as authored. */
+  selector: string;
+  /** `@media` prelude, or null for a base rule. */
+  media: string | null;
+  /** Class tokens appearing in the subject (rightmost) compound of any selector. */
+  subjectClasses: string[];
+  /** All class tokens anywhere in the selector list. */
+  allClasses: string[];
+  declarations: number;
+  bytes: number;
+  /** De-minified `selector {\n  prop: value;\n}` text. */
+  text: string;
+}
+
+const CLASS_TOKEN_RE = /\.(-?[_a-zA-Z][\w-]*)/g;
+const FUNCTIONAL_PSEUDO_RE = /:(not|is|where|has|matches)\([^()]*\)/gi;
+
+function classTokens(selector: string): string[] {
+  const out: string[] = [];
+  let m: RegExpExecArray | null;
+  CLASS_TOKEN_RE.lastIndex = 0;
+  // biome-ignore lint/suspicious/noAssignInExpressions: standard regex-exec loop
+  while ((m = CLASS_TOKEN_RE.exec(selector)) !== null) {
+    if (m[1]) out.push(m[1]);
+  }
+  return out;
+}
+
+/** Subject (rightmost compound) class tokens of a single selector. */
+function subjectClassesOf(selector: string): string[] {
+  const cleaned = selector.replace(FUNCTIONAL_PSEUDO_RE, ' ');
+  const segments = cleaned.split(/\s*[>+~]\s*|\s+/).filter((s) => s.trim().length > 0);
+  const subject = segments[segments.length - 1] ?? cleaned;
+  return classTokens(subject);
+}
+
+/** De-minified declaration block text for a rule, one declaration per indented line. */
+function declBlock(block: csstree.CssNode | null | undefined): { text: string; count: number } {
+  const lines: string[] = [];
+  if (block && block.type === 'Block') {
+    block.children.forEach((child) => {
+      if (child.type !== 'Declaration') return;
+      // `generate` minifies to `prop:value`; re-space after the property colon (the first one —
+      // values may contain their own colons, e.g. `url(https:…)`).
+      const g = csstree.generate(child);
+      const i = g.indexOf(':');
+      lines.push(`  ${i > 0 ? `${g.slice(0, i)}: ${g.slice(i + 1)}` : g};`);
+    });
+  }
+  return { text: lines.join('\n'), count: lines.length };
+}
+
+/** Parse a stylesheet and capture every CLASS-bearing rule (threading @media context). */
+function captureClassRules(css: string): CapturedRule[] {
+  const ast = csstree.parse(css, { parseValue: false, parseCustomProperty: false });
+  const out: CapturedRule[] = [];
+
+  const visit = (container: csstree.CssNode, media: string | null, skip: boolean): void => {
+    const children =
+      'children' in container ? (container as { children: csstree.List<csstree.CssNode> }).children : null;
+    if (!children) return;
+
+    children.forEach((node) => {
+      if (node.type === 'Atrule') {
+        const name = node.name.toLowerCase();
+        if (name === 'media') {
+          const prelude = node.prelude ? csstree.generate(node.prelude) : '';
+          if (node.block) visit(node.block, prelude, false);
+        } else if (name === 'supports') {
+          if (node.block) visit(node.block, media, false);
+        } else if (node.block) {
+          visit(node.block, media, true); // @keyframes/@font-face — skip inner rules
+        }
+        return;
+      }
+      if (node.type !== 'Rule' || skip) return;
+      if (node.prelude?.type !== 'SelectorList') return;
+
+      const selectors: string[] = [];
+      const subject = new Set<string>();
+      const all = new Set<string>();
+      node.prelude.children.forEach((sel) => {
+        const text = csstree.generate(sel);
+        const cls = classTokens(text);
+        if (cls.length === 0) return; // element-only selector — skip (belongs to base/global)
+        selectors.push(text);
+        for (const c of cls) all.add(c);
+        for (const c of subjectClassesOf(text)) subject.add(c);
+      });
+      if (selectors.length === 0) return;
+
+      const { text: decls, count } = declBlock(node.block);
+      out.push({
+        selector: selectors.join(', '),
+        media,
+        subjectClasses: [...subject],
+        allClasses: [...all],
+        declarations: count,
+        bytes: csstree.generate(node).length,
+        text: `${selectors.join(',\n')} {\n${decls}\n}`,
+      });
+    });
+  };
+
+  visit(ast, null, false);
+  return out;
+}
+
+/** Assemble a component's moved rules into de-minified CSS: base rules first, then each @media group. */
+function assembleSlice(rules: CapturedRule[]): string {
+  const base = rules.filter((r) => r.media === null);
+  const byMedia = new Map<string, CapturedRule[]>();
+  for (const r of rules) {
+    if (r.media === null) continue;
+    const list = byMedia.get(r.media) ?? [];
+    list.push(r);
+    byMedia.set(r.media, list);
+  }
+  const parts: string[] = [];
+  for (const r of base) parts.push(r.text);
+  for (const [media, list] of byMedia) {
+    const inner = list.map((r) => r.text.replace(/^/gm, '  ')).join('\n');
+    parts.push(`@media ${media} {\n${inner}\n}`);
+  }
+  return parts.join('\n\n');
+}
+
+/**
+ * Plan the de-mirror: assign each class rule to the single component that owns it, or keep it global.
+ */
+export function planDeMirror(input: {
+  css: string;
+  components: ComponentClassUsage[];
+  options?: DeMirrorOptions;
+}): DeMirrorPlan {
+  const { css, components, options = {} } = input;
+  const warningSampleLimit = options.warningSampleLimit ?? 40;
+
+  const compClasses = components.map((c) => ({ name: c.name, set: new Set(c.classes) }));
+  const rules = captureClassRules(css);
+
+  // Assign each rule: owners = components whose class-set covers the rule's subject (or, if the
+  // subject is class-less, its full) class set for at least one of its selectors.
+  const perComponent = new Map<string, CapturedRule[]>();
+  const sharedSelectors: string[] = [];
+  const deadSelectors: string[] = [];
+  let movedRules = 0;
+  let movedBytes = 0;
+  let sharedRules = 0;
+  let deadRules = 0;
+  let sharedBytes = 0;
+  let deadBytes = 0;
+  let totalBytes = 0;
+
+  for (const rule of rules) {
+    totalBytes += rule.bytes;
+    const need = rule.subjectClasses.length > 0 ? rule.subjectClasses : rule.allClasses;
+    const owners: string[] = [];
+    for (const c of compClasses) {
+      if (need.every((cls) => c.set.has(cls))) owners.push(c.name);
+    }
+
+    if (owners.length === 1) {
+      const name = owners[0] as string;
+      const list = perComponent.get(name) ?? [];
+      list.push(rule);
+      perComponent.set(name, list);
+      movedRules += 1;
+      movedBytes += rule.bytes;
+    } else if (owners.length === 0) {
+      deadRules += 1;
+      deadBytes += rule.bytes;
+      if (deadSelectors.length < warningSampleLimit) deadSelectors.push(rule.selector);
+    } else {
+      sharedRules += 1;
+      sharedBytes += rule.bytes;
+      if (sharedSelectors.length < warningSampleLimit) sharedSelectors.push(rule.selector);
+    }
+  }
+
+  const componentsOut: ComponentSlice[] = [];
+  for (const [name, list] of perComponent) {
+    const breakpoints = [...new Set(list.map((r) => r.media ?? ''))].sort();
+    componentsOut.push({
+      name,
+      ruleCount: list.length,
+      declarations: list.reduce((n, r) => n + r.declarations, 0),
+      approxBytes: list.reduce((n, r) => n + r.bytes, 0),
+      breakpoints,
+      css: assembleSlice(list),
+    });
+  }
+  componentsOut.sort((a, b) => b.approxBytes - a.approxBytes || a.name.localeCompare(b.name));
+
+  // Round-trip: every captured rule landed in exactly one bucket.
+  const roundTrip = movedRules + sharedRules + deadRules === rules.length;
+
+  return {
+    source: { classRules: rules.length, classRuleBytes: totalBytes, componentCount: components.length },
+    components: componentsOut,
+    global: { sharedRules, deadRules, approxBytes: sharedBytes + deadBytes },
+    moved: { rules: movedRules, approxBytes: movedBytes, components: componentsOut.length },
+    warnings: { sharedSelectors, deadSelectors },
+    roundTrip,
+  };
+}
+
+/** Render a compact human-readable summary of a de-mirror plan (for `?format=md`). */
+export function renderDeMirrorMarkdown(plan: DeMirrorPlan): string {
+  const kb = (n: number) => `${(n / 1024).toFixed(1)} KB`;
+  const lines: string[] = [];
+  lines.push('# De-mirror plan');
+  lines.push('');
+  lines.push(
+    `${plan.source.classRules} class rules (${kb(plan.source.classRuleBytes)}) across ${plan.source.componentCount} components · ` +
+      `round-trip ${plan.roundTrip ? '✅ lossless' : '❌ FAILED'}`,
+  );
+  lines.push('');
+  lines.push(
+    `**Moves onto components:** ${plan.moved.rules} rules → ${plan.moved.components} components (${kb(plan.moved.approxBytes)})`,
+  );
+  lines.push(
+    `**Stays global:** ${plan.global.sharedRules} shared + ${plan.global.deadRules} dead = ${kb(plan.global.approxBytes)}`,
+  );
+  lines.push('');
+  lines.push('## Slices (largest first)');
+  lines.push('');
+  lines.push('| component | rules | declarations | ~size | breakpoints |');
+  lines.push('| --- | --- | --- | --- | --- |');
+  for (const c of plan.components.slice(0, 40)) {
+    lines.push(`| ${c.name} | ${c.ruleCount} | ${c.declarations} | ${kb(c.approxBytes)} | ${c.breakpoints.length} |`);
+  }
+  if (plan.components.length > 40) lines.push(`| … +${plan.components.length - 40} more | | | | |`);
+  lines.push('');
+  lines.push(
+    `_Shared (kept global): ${plan.warnings.sharedSelectors.slice(0, 6).join(', ') || 'none'}${plan.warnings.sharedSelectors.length > 6 ? ' …' : ''}_`,
+  );
+  return lines.join('\n');
+}

package/lib/server/fileWatcher.test.ts

@@ -218,6 +218,29 @@ describe('FileWatcher astro CMS template pages', () => {
     expect(pageChanges.length).toBeGreaterThanOrEqual(1);
     expect(cmsTemplateChanges).toBe(0);
   });
+
+  // A folder-index page (`blog/index.astro`) routes at `/blog`, so its watcher event must
+  // collapse to `/blog` — NOT `/blog/index`, which would re-cache a ghost picker entry.
+  test('collapses a folder-index page change to its route (/blog, not /blog/index)', async () => {
+    const pageChanges: string[] = [];
+    const watcher = new FileWatcher({
+      onPageChange: async (p) => {
+        pageChanges.push(p);
+      },
+    });
+
+    watcher.watchAstroPages(pagesDir);
+    await settle(50);
+
+    mkdirSync(join(pagesDir, 'blog'), { recursive: true });
+    await settle(100);
+    writeFileSync(join(pagesDir, 'blog', 'index.astro'), '---\nconst meta = {};\n---\n');
+    await waitFor(() => pageChanges.length >= 1);
+
+    watcher.stopAll();
+    expect(pageChanges).toContain('/blog');
+    expect(pageChanges).not.toContain('/blog/index');
+  });
 });
 
 describe('FileWatcher project.config.json', () => {

package/lib/server/fileWatcher.ts

@@ -7,6 +7,7 @@ import { watch, existsSync, statSync, readdirSync } from 'node:fs';
 import { basename, dirname, join, relative } from 'node:path';
 import type { FSWatcher } from 'node:fs';
 import { mapPageNameToPath } from './jsonLoader';
+import { collapseFolderIndex } from '../shared/utils/fileUtils';
 import { projectPaths, getProjectRoot } from './projectContext';
 
 /**
@@ -371,7 +372,11 @@ export class FileWatcher {
             if (this.callbacks.onCMSTemplateChange) await this.callbacks.onCMSTemplateChange();
             return;
           }
-          const pagePath = mapPageNameToPath(filename.replace(/\.astro$/, ''));
+          // Collapse a folder-index file (`blog/index.astro`) to its route `/blog`, matching
+          // AstroPageProvider — otherwise a save re-caches the page under `/blog/index`,
+          // resurrecting the ghost picker entry the provider maps to `/blog`.
+          const pageName = collapseFolderIndex(filename.replace(/\.astro$/, ''));
+          const pagePath = mapPageNameToPath(pageName);
           if (this.callbacks.onPageChange) await this.callbacks.onPageChange(pagePath);
         }),
       (w) => {

package/lib/server/index.ts

@@ -28,6 +28,20 @@ export { ColorService, colorService } from './services/ColorService';
 export { VariableService, variableService } from './services/VariableService';
 export { EnumService, enumService } from './services/EnumService';
 
+// CSS audit + de-mirror rule extraction (monolithic-stylesheet → per-component migration).
+export {
+  auditStylesheet,
+  extractRules,
+  collectClassesFromPageData,
+  sectionPrefix,
+  renderAuditMarkdown,
+  type CssAuditReport,
+  type CssAuditOptions,
+  type ClassInfo,
+  type PageClassUsage,
+  type ExtractedRule,
+} from './cssAudit';
+
 // Providers
 // FileSystemPageProvider was retired with the bespoke JSON renderer (the editor is
 // meno-astro-only; AstroPageProvider is the live page provider). FileSystemCMSProvider
@@ -119,3 +133,8 @@ export {
 
 // Runtime abstraction
 export * from './runtime';
+
+// Webflow Designer Extension template wrapper (injects the `webflow` global).
+// Sole survivor of the retired core/lib/server/webflow/ tree; reused by the
+// Webflow→Meno import extension's serve.ts + routes.
+export { wrapInWebflowTemplate } from './webflow/templateWrapper';

package/lib/server/routes/api/core-routes.ts

@@ -19,6 +19,8 @@ import * as colorsRoutes from './colors';
 import * as variablesRoutes from './variables';
 import * as enumsRoutes from './enums';
 import * as cmsRoutes from './cms';
+import { handleCssAuditRoute } from './cssAudit';
+import { handleDeMirrorRoute } from './deMirror';
 import { handleFunctionsRoute, handleFunctionsPreflight } from './functions';
 
 /** Context for core API routes */
@@ -152,6 +154,22 @@ export async function handleCoreApiRoutes(
     return await handleRouteError(() => enumsRoutes.handleEnumsRoute(), 'Failed to fetch enums');
   }
 
+  // CSS audit API route (read-only) — ownership map for a monolithic mirror stylesheet
+  if (url.pathname === '/api/css-audit' && req.method === 'GET') {
+    return await handleRouteError(
+      () => Promise.resolve(handleCssAuditRoute(url, pageService)),
+      'Failed to generate CSS audit',
+    );
+  }
+
+  // De-mirror API route (read-only dry-run) — plan moving each component's CSS slice onto it
+  if (url.pathname === '/api/de-mirror' && req.method === 'GET') {
+    return await handleRouteError(
+      () => Promise.resolve(handleDeMirrorRoute(url, pageService, componentService)),
+      'Failed to generate de-mirror plan',
+    );
+  }
+
   // Usage API route (for license limit checks)
   if (url.pathname === '/api/usage' && req.method === 'GET') {
     return await handleRouteError(() => {

package/lib/server/routes/api/cssAudit.test.ts

@@ -0,0 +1,101 @@
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { join } from 'node:path';
+import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { setProjectRoot, getProjectRoot } from '../../projectContext';
+import type { PageService } from '../../services/pageService';
+import { handleCssAuditRoute } from './cssAudit';
+
+const TEST_DIR = join('/tmp', `cssAuditRoute-test-${process.pid}`);
+
+const MIRROR_CSS = `
+body { margin: 0; }
+.w-button { display: inline-block; }
+.container { max-width: 1200px; margin: 0 auto; }
+.team-card { border: 1px solid #ccc; }
+.team-grid { display: grid; }
+.team-avatar { border-radius: 50%; }
+.case-card { padding: 8px; }
+@media screen and (max-width: 767px) { .team-card { padding: 4px; } }
+`;
+
+/** Minimal PageService stub exposing only the two methods the route calls. */
+function fakePageService(pages: Record<string, unknown>): PageService {
+  return {
+    getAllPagePaths: () => Object.keys(pages),
+    getPageData: (path: string) => (pages[path] as never) ?? null,
+  } as unknown as PageService;
+}
+
+const PAGES = {
+  '/a': { root: { tag: 'div', attributes: { class: 'container team-card team-grid' } } },
+  '/b': { root: { tag: 'div', attributes: { class: 'container case-card team-avatar' } } },
+};
+
+describe('CSS Audit API Route', () => {
+  let originalRoot: string;
+
+  beforeEach(() => {
+    originalRoot = getProjectRoot();
+    mkdirSync(join(TEST_DIR, 'public', '_mirror', 'css'), { recursive: true });
+    writeFileSync(join(TEST_DIR, 'public', '_mirror', 'css', 'site.webflow.abc.css'), MIRROR_CSS);
+    setProjectRoot(TEST_DIR);
+  });
+
+  afterEach(() => {
+    setProjectRoot(originalRoot);
+    rmSync(TEST_DIR, { recursive: true, force: true });
+  });
+
+  test('auto-detects the mirror stylesheet and returns a report', async () => {
+    const res = handleCssAuditRoute(new URL('http://x/api/css-audit'), fakePageService(PAGES));
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as Record<string, any>;
+
+    expect(body.cssFiles).toEqual(['public/_mirror/css/site.webflow.abc.css']);
+    expect(body.source.pageCount).toBe(2);
+    expect(body.breakpoints).toContain('screen and (max-width:767px)');
+
+    // .w-button → vendor, .container (both pages) → shared, .team-card → section.
+    const team = body.classes.find((c: any) => c.name === 'team-card');
+    expect(team.proposedBucket).toBe('team');
+    expect(team.breakpoints).toContain('screen and (max-width:767px)');
+    expect(body.buckets.vendor.classes).toBeGreaterThanOrEqual(1);
+  });
+
+  test('format=md returns markdown', async () => {
+    const res = handleCssAuditRoute(new URL('http://x/api/css-audit?format=md'), fakePageService(PAGES));
+    expect(res.headers.get('Content-Type')).toContain('text/markdown');
+    const text = await res.text();
+    expect(text).toContain('# CSS audit');
+    expect(text).toContain('Proposed buckets');
+  });
+
+  test('css= override audits a specific file', async () => {
+    const res = handleCssAuditRoute(
+      new URL('http://x/api/css-audit?css=public/_mirror/css/site.webflow.abc.css'),
+      fakePageService(PAGES),
+    );
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as Record<string, any>;
+    expect(body.cssFiles).toEqual(['public/_mirror/css/site.webflow.abc.css']);
+  });
+
+  test('css= outside the project root is rejected', async () => {
+    const res = handleCssAuditRoute(new URL('http://x/api/css-audit?css=../../../etc/hosts'), fakePageService(PAGES));
+    expect(res.status).toBe(404);
+  });
+
+  test('404 when no mirror stylesheet exists', async () => {
+    const emptyDir = join('/tmp', `cssAuditRoute-empty-${process.pid}`);
+    mkdirSync(emptyDir, { recursive: true });
+    setProjectRoot(emptyDir);
+    try {
+      const res = handleCssAuditRoute(new URL('http://x/api/css-audit'), fakePageService(PAGES));
+      expect(res.status).toBe(404);
+      const body = (await res.json()) as Record<string, any>;
+      expect(body.error).toContain('No mirror stylesheet');
+    } finally {
+      rmSync(emptyDir, { recursive: true, force: true });
+    }
+  });
+});