meno-core 1.1.3 → 1.1.5

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,119 @@ 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 theme.css', () => {
+  let projectRoot: string;
+  let stylesDir: string;
+
+  beforeEach(() => {
+    projectRoot = join(tmpdir(), `meno-fw-theme-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    stylesDir = join(projectRoot, 'src', 'styles');
+    mkdirSync(join(projectRoot, 'src'), { recursive: true });
+  });
+
+  afterEach(() => {
+    try {
+      rmSync(projectRoot, { recursive: true, force: true });
+    } catch {
+      /* ignore */
+    }
+  });
+
+  // theme.css holds BOTH token halves (colors + variables), so one edit must
+  // invalidate both service caches — an external write (e.g. an AI tool adding
+  // a token) previously stayed invisible until a dev-server restart.
+  test('fires onColorsChange AND onVariablesChange when theme.css is written', async () => {
+    let colorChanges = 0;
+    let variableChanges = 0;
+    const watcher = new FileWatcher({
+      onColorsChange: async () => {
+        colorChanges++;
+      },
+      onVariablesChange: async () => {
+        variableChanges++;
+      },
+    });
+
+    mkdirSync(stylesDir, { recursive: true });
+    writeFileSync(join(stylesDir, 'theme.css'), ':root { --bg: #fff; }');
+    watcher.watchThemeCss(stylesDir);
+    await settle(50);
+
+    writeFileSync(join(stylesDir, 'theme.css'), ':root { --bg: #fff; --accent: #f00; }');
+    await waitFor(() => colorChanges >= 1 && variableChanges >= 1);
+
+    watcher.stopAll();
+    expect(colorChanges).toBeGreaterThanOrEqual(1);
+    expect(variableChanges).toBeGreaterThanOrEqual(1);
+  });
+
+  // src/styles may not exist at startup (blank project — theme.css lands later
+  // via the JSON migration or an external tool), so the watcher must defer-attach.
+  test('fires after src/styles is created post-startup', async () => {
+    let colorChanges = 0;
+    const watcher = new FileWatcher({
+      onColorsChange: async () => {
+        colorChanges++;
+      },
+    });
+
+    watcher.watchThemeCss(stylesDir);
+    await settle(50);
+    mkdirSync(stylesDir, { recursive: true });
+    await settle(100);
+    writeFileSync(join(stylesDir, 'theme.css'), ':root { --bg: #fff; }');
+    await waitFor(() => colorChanges >= 1);
+
+    watcher.stopAll();
+    expect(colorChanges).toBeGreaterThanOrEqual(1);
+  });
+
+  test('ignores writes to other files in src/styles', async () => {
+    let fired = 0;
+    const watcher = new FileWatcher({
+      onColorsChange: async () => {
+        fired++;
+      },
+      onVariablesChange: async () => {
+        fired++;
+      },
+    });
+
+    mkdirSync(stylesDir, { recursive: true });
+    watcher.watchThemeCss(stylesDir);
+    await settle(50);
+
+    writeFileSync(join(stylesDir, 'global.css'), 'body { margin: 0; }');
+    await settle(200);
+
+    watcher.stopAll();
+    expect(fired).toBe(0);
+  });
 });
 
 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';
 
 /**
@@ -151,6 +152,7 @@ export class FileWatcher {
   private templatesWatcher: FSWatcher | null = null;
   private colorsWatcher: FSWatcher | null = null;
   private variablesWatcher: FSWatcher | null = null;
+  private themeCssWatcher: FSWatcher | null = null;
   private enumsWatcher: FSWatcher | null = null;
   private cmsWatcher: FSWatcher | null = null;
   private imagesWatcher: FSWatcher | null = null;
@@ -260,6 +262,35 @@ export class FileWatcher {
     });
   }
 
+  /**
+   * Start watching `src/styles/theme.css` — the token source of truth for
+   * astro-format projects, where colors AND variables share the one file
+   * (colors.json / variables.json were migrated away, so the two watchers
+   * above never fire there). An external edit (e.g. an AI tool adding tokens)
+   * must invalidate both service caches and refresh connected clients, or the
+   * new tokens only appear after a dev-server restart. Deferred attach:
+   * `src/styles` may not exist yet (theme.css lands later via migration or an
+   * external tool). No-op in legacy JSON projects (no `src/`).
+   */
+  watchThemeCss(dirPath: string = join(getProjectRoot(), 'src', 'styles')): void {
+    attachWhenDirExists(
+      dirPath,
+      () =>
+        watch(dirPath, { recursive: false }, async (_event, filename) => {
+          if (filename !== 'theme.css') return;
+          if (this.callbacks.onColorsChange) {
+            await this.callbacks.onColorsChange();
+          }
+          if (this.callbacks.onVariablesChange) {
+            await this.callbacks.onVariablesChange();
+          }
+        }),
+      (w) => {
+        this.themeCssWatcher = w;
+      },
+    );
+  }
+
   /**
    * Start watching enums.json file
    */
@@ -371,7 +402,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) => {
@@ -420,6 +455,7 @@ export class FileWatcher {
     this.watchTemplates();
     this.watchColors();
     this.watchVariables();
+    this.watchThemeCss();
     this.watchEnums();
     this.watchCMS();
     this.watchImages();
@@ -460,6 +496,11 @@ export class FileWatcher {
       this.variablesWatcher = null;
     }
 
+    if (this.themeCssWatcher) {
+      this.themeCssWatcher.close();
+      this.themeCssWatcher = null;
+    }
+
     if (this.enumsWatcher) {
       this.enumsWatcher.close();
       this.enumsWatcher = null;

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(() => {