pattern-dump 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/pd.js

@@ -1,4 +1,8 @@
 #!/usr/bin/env node
+import {
+  ConfigError,
+  validateConfig
+} from "./chunks/chunk-3WZHFYHZ.js";
 
 // packages/discovery/src/index.ts
 import { readdir } from "node:fs/promises";
@@ -28,7 +32,8 @@ function collapseComponentId(relNoExt) {
 }
 function deriveHandle(id) {
   const parts = id.split("/");
-  return `${parts[0]}-${parts[parts.length - 1]}`;
+  const unnumbered = (seg) => seg.replace(/^\d+[-_]/, "");
+  return `${unnumbered(parts[0])}-${unnumbered(parts[parts.length - 1])}`;
 }
 async function buildDiscoveryMap(roots) {
   const rootList = typeof roots === "string" ? [{ dir: roots }] : roots;
@@ -788,28 +793,21 @@ async function compileScriptFile(entryPoint) {
 import { WebSocket, WebSocketServer } from "ws";
 
 // packages/contracts/src/dev-protocol.ts
-var SCOPE_BOUNDARY = `## Scope \u2014 the boundary is part of the artifact
-
-**Covers** \u2014 machine-detectable, static, single-render (no browser layout):
-- **HTML content-model** (html-validate) \u2014 nesting/permitted-content violations.
-- **Structural a11y** (axe, alwaysOn tier) \u2014 labels, names, ARIA, roles, image-alt.
-- **Schema** \u2014 required/shape violations against \`component.schema.json\`.
-- **Render outcome** \u2014 blank / error / ok (metadata, never itself a defect).
-
-**Deliberately NOT covered \u2014 named boundaries, not misses:**
-- **Rendered-contrast (axe needsRendering tier)** \u2014 contrast, aria-hidden-focus, duplicate-id-aria.
-  These require real browser layout/paint; the static jsdom sweep cannot produce them. The
-  per-component panel shows them (live iframe); this aggregate does not. Fewer rule types here is a
-  scope boundary, not a gap.
-- **Structural/graph findings** \u2014 dead subtrees, a shared-base "component", flattened variant families.
-  Those are the style graph's lens, not this one.
-- **PD reporting gaps** \u2014 PD under-claiming (e.g. missing provenance) is not a subject defect.
-- **Interactive / behavioural** \u2014 focus traps, keyboard flow, escape handling. Single static render only.
-- **Data-masked** \u2014 a component that renders empty for want of data won't throw the violations it would
-  when populated; findings are annotated with render outcome wherever it is blank.
-
-A component with zero findings is **not "clean" \u2014 it is "clean of static machine-detectable defects."**
-That is the honest claim; never "clean".`;
+var AUDIT_SCOPE = {
+  covered: [
+    { name: "HTML content model", detail: "invalid nesting and content that isn't permitted where it appears (html-validate)." },
+    { name: "Structural accessibility", detail: "labels, accessible names, ARIA attributes, roles and image alternatives (the axe-core rules that don't need layout)." },
+    { name: "Schema", detail: "missing required fields and values of the wrong type, checked against each component's `<name>.schema.json`." },
+    { name: "Render outcome", detail: "whether each component rendered, rendered empty or failed. It is reported with the component, not counted as a defect." }
+  ],
+  notCovered: [
+    { name: "Checks that need a rendered page", detail: "colour contrast, focusable content hidden with aria-hidden, and duplicate ids referenced by ARIA. They need real browser layout; the Console's Diagnostics tab runs them for the component on screen." },
+    { name: "Interaction", detail: "focus traps, keyboard flow and Escape handling. The audit looks at a single static render." },
+    { name: "Structure", detail: "unused components, shared bases and near-duplicate copies. The Relationships tab and `pd export` cover those." },
+    { name: "Components that need data", detail: "a component that renders empty without data can't show the problems it would have with data. Its findings carry the render outcome." }
+  ],
+  note: "No findings means no static, machine-detectable defects, not that a component is fully accessible or correct."
+};
 function buildAuditRollup(graph, opts = {}) {
   const total = graph.components.length;
   const affected = new Set(graph.occurrences.map((o) => o.component));
@@ -851,7 +849,7 @@ function buildAuditRollup(graph, opts = {}) {
     renderOutcomes: { ok: outcomes["ok"] ?? 0, blank: outcomes["blank"] ?? 0, error: outcomes["error"] ?? 0 },
     rulesByBlast,
     perComponent,
-    scope: SCOPE_BOUNDARY
+    scope: AUDIT_SCOPE
   };
 }
 function previewUrl(id, variant, theme) {
@@ -991,7 +989,7 @@ function createHotReloader(port2 = Number(process.env["PD_WS_PORT"] ?? 4001)) {
 // packages/dev-server/src/index.ts
 import { createServer } from "node:http";
 import { stat as stat5 } from "node:fs/promises";
-import { join as join19 } from "node:path";
+import { join as join20 } from "node:path";
 import { fileURLToPath as fileURLToPath5 } from "node:url";
 
 // packages/dev-server/src/composition.ts
@@ -1182,7 +1180,7 @@ async function loadGlobalData(dataDirs) {
 
 // packages/dev-server/src/surfacing.ts
 import { mkdir, readFile as readFile5, writeFile } from "node:fs/promises";
-import { join as join6 } from "node:path";
+import { join as join7, relative as relative3 } from "node:path";
 
 // packages/dev-server/src/flattening.ts
 import { parse as parseHtml } from "node-html-parser";
@@ -1199,6 +1197,9 @@ function toSkelNode(el) {
   }
   return { tag: el.tagName ? el.tagName.toLowerCase() : "", attrs, children };
 }
+function skeletonSize(nodes) {
+  return nodes.reduce((n, node) => n + 1 + node.attrs.length + skeletonSize(node.children), 0);
+}
 function toPreorder(nodes, depth, out) {
   for (const n of nodes) {
     out.push(`${depth}<${n.tag}${n.attrs.length ? " " + n.attrs.join(",") : ""}>`);
@@ -1270,6 +1271,7 @@ var DEFAULTS = {
   prefilterCutoff: 0.6,
   shingleK: 2,
   minClusterSize: 2,
+  minSkeletonSize: 3,
   rootMatch: "exact"
   // full root-class match — emphasis families (hoo-button vs -primary) stay distinct
 };
@@ -1308,6 +1310,7 @@ function detectFlattening(inputs, opts = {}) {
   for (const { id } of sorted) {
     const s = skel.get(id);
     if (!s.root) continue;
+    if (skeletonSize(s.tree) < o.minSkeletonSize) continue;
     const key = rootKey(s.root, o.rootMatch);
     (buckets.get(key) ?? buckets.set(key, []).get(key)).push(id);
   }
@@ -1423,6 +1426,259 @@ function pdScratchDir(root) {
   return join5(tmpdir(), "pattern-dump", key);
 }
 
+// packages/dev-server/src/style-index.ts
+import { dirname as dirname2, join as join6, relative as relative2, resolve as resolve4 } from "node:path";
+import { existsSync } from "node:fs";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+import postcss3 from "postcss";
+import { SourceMapConsumer } from "source-map";
+import * as sass2 from "sass";
+
+// packages/dev-server/src/timing.ts
+var verboseTiming = !!process.env["PD_VERBOSE_TIMING"];
+
+// packages/dev-server/src/style-index.ts
+function cssNodeText(node) {
+  const text = node.toString();
+  return node.type === "atrule" && !node.nodes ? `${text};` : text;
+}
+function joinCssChunks(chunks) {
+  const charset = [];
+  const imports = [];
+  const rest = [];
+  for (const chunk of chunks) {
+    if (/^@charset\b/i.test(chunk)) charset.push(chunk);
+    else if (/^@import\b/i.test(chunk)) imports.push(chunk);
+    else rest.push(chunk);
+  }
+  return [...charset.slice(0, 1), ...imports, ...rest].join("\n");
+}
+var stripOrderPrefixes = (path) => path.split("/").map((seg) => seg.replace(/^\d+[-_]/, "")).join("/");
+var strippedIdCache = /* @__PURE__ */ new WeakMap();
+function strippedIds(componentIds) {
+  let map = strippedIdCache.get(componentIds);
+  if (!map) {
+    map = /* @__PURE__ */ new Map();
+    for (const id of componentIds) {
+      const key = stripOrderPrefixes(id);
+      map.set(key, map.has(key) ? null : id);
+    }
+    strippedIdCache.set(componentIds, map);
+  }
+  return map;
+}
+function resolveScssToComponent(absPath, stylesDir, componentIds) {
+  const rel = relative2(stylesDir, absPath);
+  let normalized = rel.replace(/\.scss$/, "").split("/").map((seg) => seg.replace(/^_/, "")).join("/");
+  if (normalized.endsWith("/index")) normalized = normalized.slice(0, -6);
+  const id = collapseComponentId(normalized);
+  if (componentIds.has(id)) return id;
+  return strippedIds(componentIds).get(collapseComponentId(stripOrderPrefixes(normalized))) ?? null;
+}
+function resolveSharedModulePath(absPath, stylesDir, keepBarrel = false) {
+  const rel = relative2(stylesDir, absPath);
+  if (rel.startsWith("..")) return null;
+  const parts = rel.replace(/\.scss$/, "").split("/");
+  const normalized = parts.map(
+    (seg, i) => i === parts.length - 1 ? seg.replace(/^_/, "") : seg
+  );
+  if (!keepBarrel && normalized[normalized.length - 1] === "index") return null;
+  return normalized.join("/");
+}
+function normalizeBaseEntry(entry) {
+  const parts = entry.replace(/\\/g, "/").replace(/\.scss$/, "").split("/").filter((seg) => seg !== "" && seg !== ".");
+  if (parts.length > 0) parts[parts.length - 1] = parts[parts.length - 1].replace(/^_/, "");
+  return parts.join("/");
+}
+function documentBaseMatcher(stylesDir, base2) {
+  const entries = (base2 ?? []).map(normalizeBaseEntry);
+  if (entries.length === 0) return () => false;
+  return (absPath) => {
+    const rel = relative2(stylesDir, absPath);
+    if (rel.startsWith("..")) return false;
+    const parts = rel.replace(/\\/g, "/").replace(/\.scss$/, "").split("/");
+    parts[parts.length - 1] = parts[parts.length - 1].replace(/^_/, "");
+    const file = parts.join("/");
+    return entries.some((e) => e === "" || file === e || file.startsWith(`${e}/`));
+  };
+}
+function missingDocumentBase(stylesDir, base2) {
+  return (base2 ?? []).filter((entry) => {
+    const e = normalizeBaseEntry(entry);
+    if (e === "") return false;
+    const dir = dirname2(join6(stylesDir, e));
+    const name = e.split("/").pop();
+    return ![join6(stylesDir, e), join6(dir, `${name}.scss`), join6(dir, `_${name}.scss`)].some(existsSync);
+  });
+}
+function extractClassesFromCompiled(consumer, root, entryFile, stylesDir, componentIds) {
+  const classMap = /* @__PURE__ */ new Map();
+  const baseModules = /* @__PURE__ */ new Map();
+  root.walkRules((rule) => {
+    const classMatches = rule.selector.match(/\.([\w-]+)/g);
+    if (!classMatches) return;
+    const pos = rule.source?.start;
+    if (!pos) return;
+    const original = consumer.originalPositionFor({ line: pos.line, column: pos.column - 1 });
+    if (!original.source) return;
+    const originPath = original.source.startsWith("file://") ? fileURLToPath2(original.source) : resolve4(dirname2(entryFile), original.source);
+    const resolved = resolveScssToComponent(originPath, stylesDir, componentIds);
+    const owner = resolved ?? "__base__";
+    const modulePath = resolved === null ? resolveSharedModulePath(originPath, stylesDir, true) : null;
+    for (const cls of classMatches) {
+      const name = cls.slice(1);
+      if (!classMap.has(name)) classMap.set(name, owner);
+      if (modulePath && classMap.get(name) === "__base__" && !baseModules.has(name)) {
+        baseModules.set(name, modulePath);
+      }
+    }
+  });
+  return { classMap, baseModules };
+}
+async function attributeClassesFromFile(entryFile, stylesDir, componentIds) {
+  try {
+    const compiled = sass2.compile(entryFile, { sourceMap: true });
+    if (!compiled.sourceMap) return null;
+    const consumer = new SourceMapConsumer(compiled.sourceMap);
+    const root = postcss3.parse(compiled.css);
+    const { classMap } = extractClassesFromCompiled(consumer, root, entryFile, stylesDir, componentIds);
+    return classMap;
+  } catch {
+    return null;
+  }
+}
+async function patchClassOwnerIndex(entryFile, changedCompId, stylesDir, componentIds, index) {
+  for (const [cls, owner] of index) {
+    if (owner === changedCompId) index.delete(cls);
+  }
+  const fresh = await attributeClassesFromFile(entryFile, stylesDir, componentIds);
+  if (!fresh) return false;
+  for (const [name, owner] of fresh) {
+    if (owner === changedCompId && !index.has(name)) index.set(name, owner);
+  }
+  return true;
+}
+async function buildAllStyleData(roots, componentIds, entryOverride) {
+  if (verboseTiming) console.time("[dev-server:timing] full classOwnerIndex build");
+  const styleUsesModules = /* @__PURE__ */ new Map();
+  const classIndex = /* @__PURE__ */ new Map();
+  const baseProvenance = /* @__PURE__ */ new Map();
+  const componentCssBuckets = /* @__PURE__ */ new Map();
+  const baseCssByRoot = [];
+  const outsideRules = /* @__PURE__ */ new Map();
+  for (const id of componentIds) styleUsesModules.set(id, []);
+  const rootList = typeof roots === "string" ? [{ dir: roots, ...entryOverride ? { entries: entryOverride } : {} }] : roots;
+  for (const styleRoot of rootList) {
+    const stylesDir = styleRoot.dir;
+    const inBase = documentBaseMatcher(stylesDir, styleRoot.base);
+    const reportOutside = (styleRoot.base?.length ?? 0) > 0;
+    const baseCssBucket = /* @__PURE__ */ new Set();
+    baseCssByRoot.push([]);
+    let entryFiles = [];
+    if (styleRoot.entries && styleRoot.entries.length > 0) {
+      entryFiles = [...styleRoot.entries];
+    } else {
+      try {
+        entryFiles = await collectScssFiles(stylesDir);
+      } catch {
+        entryFiles = [];
+      }
+    }
+    entryFiles.sort();
+    for (const entryFile of entryFiles) {
+      let originPathFor2 = function(node) {
+        const pos = node.source?.start;
+        if (!pos) return null;
+        const original = consumer.originalPositionFor({
+          line: pos.line,
+          column: pos.column - 1
+        });
+        if (!original.source) return null;
+        return original.source.startsWith("file://") ? fileURLToPath2(original.source) : resolve4(dirname2(entryFile), original.source);
+      };
+      var originPathFor = originPathFor2;
+      const compOwner = resolveScssToComponent(entryFile, stylesDir, componentIds);
+      let compiled;
+      try {
+        compiled = sass2.compile(entryFile, { sourceMap: true });
+      } catch {
+        continue;
+      }
+      if (compOwner) {
+        const deps = compiled.loadedUrls.filter((u) => u.protocol === "file:").map((u) => fileURLToPath2(u)).filter((p) => resolve4(p) !== resolve4(entryFile));
+        for (const dep of deps) {
+          const depComp = resolveScssToComponent(dep, stylesDir, componentIds);
+          if (depComp !== null && depComp !== compOwner) {
+            const rawRel = relative2(stylesDir, dep).replace(/\.scss$/, "");
+            const modPath = rawRel.endsWith("/_index") ? rawRel.slice(0, -7) : rawRel;
+            if (modPath) {
+              const mArr = styleUsesModules.get(compOwner) ?? [];
+              if (!mArr.includes(modPath)) {
+                mArr.push(modPath);
+                styleUsesModules.set(compOwner, mArr);
+              }
+            }
+          } else if (depComp === null) {
+            const modPath = resolveSharedModulePath(dep, stylesDir);
+            if (modPath) {
+              const mArr = styleUsesModules.get(compOwner) ?? [];
+              if (!mArr.includes(modPath)) {
+                mArr.push(modPath);
+                styleUsesModules.set(compOwner, mArr);
+              }
+            }
+          }
+        }
+      }
+      const rawMap = compiled.sourceMap;
+      if (!rawMap) continue;
+      const consumer = new SourceMapConsumer(rawMap);
+      const root = postcss3.parse(compiled.css);
+      root.each((node) => {
+        const originPath = originPathFor2(node);
+        if (originPath === null) return;
+        const nodeText = cssNodeText(node);
+        const owner = inBase(originPath) ? "__base__" : resolveScssToComponent(originPath, stylesDir, componentIds) ?? "__base__";
+        if (owner === "__base__") {
+          baseCssBucket.add(nodeText);
+          if (reportOutside && !inBase(originPath)) {
+            const seen = outsideRules.get(originPath) ?? /* @__PURE__ */ new Set();
+            seen.add(nodeText);
+            outsideRules.set(originPath, seen);
+          }
+        } else {
+          const bucket = componentCssBuckets.get(owner) ?? /* @__PURE__ */ new Set();
+          bucket.add(nodeText);
+          componentCssBuckets.set(owner, bucket);
+        }
+      });
+      const { classMap: perFileClasses, baseModules: perFileBaseModules } = extractClassesFromCompiled(consumer, root, entryFile, stylesDir, componentIds);
+      for (const [name, owner] of perFileClasses) {
+        if (!classIndex.has(name)) classIndex.set(name, owner);
+      }
+      for (const [name, mod] of perFileBaseModules) {
+        if (!baseProvenance.has(name)) baseProvenance.set(name, mod);
+      }
+    }
+    baseCssByRoot[baseCssByRoot.length - 1] = [...baseCssBucket];
+  }
+  for (const [k, v] of styleUsesModules) styleUsesModules.set(k, [...new Set(v)].sort());
+  const componentCssMap = /* @__PURE__ */ new Map();
+  for (const [id, bucket] of componentCssBuckets) {
+    componentCssMap.set(id, joinCssChunks(bucket));
+  }
+  if (verboseTiming) console.timeEnd("[dev-server:timing] full classOwnerIndex build");
+  return {
+    scssModuleGraph: { styleUsesModules },
+    classOwnerIndex: classIndex,
+    baseProvenance,
+    componentCssMap,
+    // Packages' base rules first (later roots), the project's last — its own base wins the cascade.
+    baseCss: joinCssChunks([...baseCssByRoot].reverse().flat()),
+    baseOutsideList: new Map([...outsideRules].map(([path, rules]) => [path, rules.size]))
+  };
+}
+
 // packages/dev-server/src/surfacing.ts
 async function surfaceCollisions(collisions, cwd, hotreloader) {
   const messages = collisions.map((col) => ({ type: "collision", handle: col.handle, incumbentPath: col.incumbentPath, quarantinedPath: col.quarantinedPath }));
@@ -1431,6 +1687,7 @@ async function surfaceCollisions(collisions, cwd, hotreloader) {
     hotreloader.push(messages[i]);
     console.warn(`[dev-server] HANDLE_COLLISION: "${col.handle}" \u2014 incumbent: ${col.incumbentPath} \u2014 quarantined: ${col.quarantinedPath}`);
   }
+  if (collisions.length > 0) console.warn(`[dev-server] collisions listed in ${join7(pdScratchDir(cwd), "CONFLICTS.generated.md")}`);
   const md = collisions.length === 0 ? "# Conflicts\n\nNo handle collisions detected.\n" : [
     "# Conflicts",
     "",
@@ -1446,7 +1703,7 @@ async function surfaceCollisions(collisions, cwd, hotreloader) {
   try {
     const dir = pdScratchDir(cwd);
     await mkdir(dir, { recursive: true });
-    await writeFile(join6(dir, "CONFLICTS.generated.md"), md, "utf-8");
+    await writeFile(join7(dir, "CONFLICTS.generated.md"), md, "utf-8");
   } catch (e) {
     console.warn("[dev-server] Could not write CONFLICTS.generated.md to scratch dir:", e);
   }
@@ -1467,21 +1724,33 @@ async function surfaceFlattening(discoveryMap, registry, cwd) {
   const md = renderFlatteningReport(clusters);
   if (clusters.length) {
     const members = clusters.reduce((n, c3) => n + c3.members.length, 0);
-    console.warn(`[dev-server] FLATTENED: ${clusters.length} cluster(s) across ${members} components \u2014 see FLATTENED.generated.md`);
+    console.warn(`[dev-server] FLATTENED: ${clusters.length} cluster(s) across ${members} components \u2014 see ${join7(pdScratchDir(cwd), "FLATTENED.generated.md")}`);
   }
   try {
     const dir = pdScratchDir(cwd);
     await mkdir(dir, { recursive: true });
-    await writeFile(join6(dir, "FLATTENED.generated.md"), md, "utf-8");
+    await writeFile(join7(dir, "FLATTENED.generated.md"), md, "utf-8");
   } catch (e) {
     console.warn("[dev-server] Could not write FLATTENED.generated.md to scratch dir:", e);
   }
 }
+function surfaceDocumentBase(roots, outsideList, cwd) {
+  for (const root of roots) {
+    for (const entry of missingDocumentBase(root.dir, root.base)) {
+      console.warn(`[dev-server] documentBase "${entry}" matches no stylesheet in ${relative3(cwd, root.dir) || "."}${root.source ? ` (${root.source})` : ""}`);
+    }
+  }
+  if (outsideList.size === 0) return;
+  const files = [...outsideList].sort((a, b) => b[1] - a[1]);
+  const rules = files.reduce((n, [, count]) => n + count, 0);
+  const examples = files.slice(0, 3).map(([path]) => relative3(cwd, path)).join(", ");
+  console.log(`[dev-server] base layer: ${rules} rule(s) from ${files.length} file(s) that no component owns and documentBase does not list, e.g. ${examples}`);
+}
 
 // packages/dev-server/src/diagnostics.ts
 import { createHash as createHash2 } from "node:crypto";
 import { readFile as readFile6, writeFile as writeFile2, mkdir as mkdir2 } from "node:fs/promises";
-import { join as join7 } from "node:path";
+import { join as join8 } from "node:path";
 
 // packages/a11y/src/producer.ts
 import { createRequire } from "node:module";
@@ -1635,7 +1904,7 @@ function assembleGraph(audits) {
 }
 var GRAPH_ARTIFACT_VERSION = 1;
 function graphArtifactPath(root) {
-  return join7(pdScratchDir(root), "diagnostics-graph.json");
+  return join8(pdScratchDir(root), "diagnostics-graph.json");
 }
 async function readDiagnosticsArtifact(root) {
   try {
@@ -1691,15 +1960,15 @@ async function persistSlices(root, slices, discoveryMap, globalData) {
 }
 
 // packages/dev-server/src/server-config.ts
-import { basename as basename2, join as join8, resolve as resolve4 } from "node:path";
+import { basename as basename2, join as join9, resolve as resolve5 } from "node:path";
 var DEFAULT_SWATCH_SLOTS = ["--bodyBackground", "--themePrimary", "--accent"];
 function resolveServerConfig(config, cwd, opts = {}, packages = []) {
   const port2 = opts.port ?? Number(process.env["PD_PORT"] ?? 4e3);
   const wsPort = opts.wsPort ?? Number(process.env["PD_WS_PORT"] ?? port2 + 1);
-  const patternsDir = resolve4(cwd, config.patternsDir);
-  const stylesDir = resolve4(cwd, config.styles.dir);
-  const stylesEntries = config.styles.entry ? (Array.isArray(config.styles.entry) ? config.styles.entry : [config.styles.entry]).map((e) => resolve4(stylesDir, e)) : void 0;
-  const inPackage = (p, rel) => join8(p.dir, rel);
+  const patternsDir = resolve5(cwd, config.patternsDir);
+  const stylesDir = resolve5(cwd, config.styles.dir);
+  const stylesEntries = config.styles.entry ? (Array.isArray(config.styles.entry) ? config.styles.entry : [config.styles.entry]).map((e) => resolve5(stylesDir, e)) : void 0;
+  const inPackage = (p, rel) => join9(p.dir, rel);
   const asList = (v) => v === void 0 ? [] : Array.isArray(v) ? v : [v];
   const patternRoots = [
     { dir: patternsDir, ...config.exclude?.length ? { exclude: config.exclude } : {} },
@@ -1710,22 +1979,22 @@ function resolveServerConfig(config, cwd, opts = {}, packages = []) {
     }))
   ];
   const styleRoots = [
-    { dir: stylesDir, entries: stylesEntries },
+    { dir: stylesDir, entries: stylesEntries, base: config.documentBase },
     ...packages.filter((p) => p.manifest.styles).map((p) => {
       const dir = inPackage(p, p.manifest.styles.dir);
-      const entries = asList(p.manifest.styles.entry).map((e) => resolve4(dir, e));
-      return { dir, entries: entries.length ? entries : void 0, source: p.name };
+      const entries = asList(p.manifest.styles.entry).map((e) => resolve5(dir, e));
+      return { dir, entries: entries.length ? entries : void 0, source: p.name, base: p.manifest.styles.documentBase };
     })
   ];
   const themePackages = packages.filter((p) => p.manifest.themes);
   const themeDirs = [
-    ...config.themes ? [resolve4(cwd, config.themes.dir)] : [],
+    ...config.themes ? [resolve5(cwd, config.themes.dir)] : [],
     ...themePackages.map((p) => inPackage(p, p.manifest.themes.dir))
   ];
   const switches = [config.themes?.switch, ...themePackages.map((p) => p.manifest.themes.switch)];
   const themeSwitch = switches.includes("stylesheet") ? "stylesheet" : "attribute";
   const assetRoots = [
-    ...asList(config.assets?.dir).map((d) => resolve4(cwd, d)),
+    ...asList(config.assets?.dir).map((d) => resolve5(cwd, d)),
     ...packages.flatMap((p) => (p.manifest.assets ?? []).map((a) => inPackage(p, a)))
   ];
   const globalScripts = [.../* @__PURE__ */ new Set([
@@ -1733,7 +2002,7 @@ function resolveServerConfig(config, cwd, opts = {}, packages = []) {
     ...config.globalScripts ?? []
   ])];
   const scriptsDirs = [
-    ...config.scriptsDir ? [resolve4(cwd, config.scriptsDir)] : [],
+    ...config.scriptsDir ? [resolve5(cwd, config.scriptsDir)] : [],
     ...packages.filter((p) => p.manifest.scripts).map((p) => inPackage(p, p.manifest.scripts))
   ];
   const documentBaseEnabled = Array.isArray(config.documentBase) && config.documentBase.length > 0 || packages.some((p) => (p.manifest.styles?.documentBase?.length ?? 0) > 0);
@@ -1748,11 +2017,11 @@ function resolveServerConfig(config, cwd, opts = {}, packages = []) {
     styleRoots,
     dataDirs: [
       ...packages.filter((p) => p.manifest.data).map((p) => inPackage(p, p.manifest.data)),
-      ...config.dataDir ? [resolve4(cwd, config.dataDir)] : []
+      ...config.dataDir ? [resolve5(cwd, config.dataDir)] : []
     ],
     helperPaths: [
       ...packages.filter((p) => p.manifest.helpers).map((p) => inPackage(p, p.manifest.helpers)),
-      ...config.helpers ? [resolve4(cwd, config.helpers)] : []
+      ...config.helpers ? [resolve5(cwd, config.helpers)] : []
     ],
     scriptsDirs,
     patternsDir,
@@ -1777,14 +2046,14 @@ function resolveServerConfig(config, cwd, opts = {}, packages = []) {
 }
 
 // packages/dev-server/src/packages.ts
-import { existsSync, readFileSync } from "node:fs";
-import { dirname as dirname2, join as join9 } from "node:path";
+import { existsSync as existsSync2, readFileSync } from "node:fs";
+import { dirname as dirname3, join as join10 } from "node:path";
 function findPackageDir(name, root) {
   let dir = root;
   for (; ; ) {
-    const candidate = join9(dir, "node_modules", name);
-    if (existsSync(join9(candidate, "package.json"))) return candidate;
-    const parent = dirname2(dir);
+    const candidate = join10(dir, "node_modules", name);
+    if (existsSync2(join10(candidate, "package.json"))) return candidate;
+    const parent = dirname3(dir);
     if (parent === dir) return null;
     dir = parent;
   }
@@ -1799,7 +2068,7 @@ function loadPatternPackages(references, root) {
       if (!direct) return;
       throw new Error(`pattern package "${name}" is not installed \u2014 run: npm install --save-dev ${name}`);
     }
-    const pkg = JSON.parse(readFileSync(join9(dir, "package.json"), "utf8"));
+    const pkg = JSON.parse(readFileSync(join10(dir, "package.json"), "utf8"));
     if (!pkg.patternDump) {
       if (!direct) return;
       throw new Error(
@@ -1855,7 +2124,7 @@ async function runDiagnosticsAudit(config, cwd) {
 
 // packages/dev-server/src/static-build.ts
 import { cp, mkdir as mkdir3, rm, stat as stat2, writeFile as writeFile3 } from "node:fs/promises";
-import { dirname as dirname3, join as join10, relative as relative2, resolve as resolve5, sep } from "node:path";
+import { dirname as dirname4, join as join11, relative as relative4, resolve as resolve6, sep } from "node:path";
 
 // packages/dev-server/src/http-utils.ts
 import { readFile as readFile7 } from "node:fs/promises";
@@ -1901,6 +2170,12 @@ async function serveFile(res, filePath, contentType) {
     res.end("Not found");
   }
 }
+var RESERVED_PREFIXES = ["/_pd/", "/api/", PD_ROUTE_PREFIX.preview, PD_ROUTE_PREFIX.source, PD_ROUTE_PREFIX.assets];
+function servesShell(pathname, accept) {
+  if (RESERVED_PREFIXES.some((p) => pathname.startsWith(p))) return false;
+  const last = pathname.slice(pathname.lastIndexOf("/") + 1);
+  return !/\.[a-z0-9]+$/i.test(last) || (accept ?? "").includes("text/html");
+}
 function buildShellHtml(runtime) {
   return `<!DOCTYPE html>
 <html lang="en">
@@ -1927,7 +2202,7 @@ function withBasePath(text, basePath) {
 }
 var isText = (contentType) => /\b(text\/html|text\/css|application\/json)\b/.test(contentType);
 function diskPath(outDir, urlPath) {
-  return join10(outDir, ...urlPath.split("/").map((seg) => decodeURIComponent(seg)));
+  return join11(outDir, ...urlPath.split("/").map((seg) => decodeURIComponent(seg)));
 }
 async function buildStaticSite(config, root, opts) {
   const started = performance.now();
@@ -1936,13 +2211,13 @@ async function buildStaticSite(config, root, opts) {
   const log = (line) => logLine(`${line} (${((performance.now() - started) / 1e3).toFixed(1)}s)`);
   const basePath = normalizeBasePath(opts.basePath ?? config.build?.basePath);
   const includeAudit = opts.audit ?? config.build?.audit ?? true;
-  const outDir = resolve5(opts.outDir);
+  const outDir = resolve6(opts.outDir);
   const cfg = resolveServerConfig(config, root, {}, loadPatternPackages(config.packages, root));
   const inside = (child, parent) => {
-    const rel = relative2(parent, child);
+    const rel = relative4(parent, child);
     return rel === "" || !rel.startsWith("..") && !rel.startsWith(sep) && !/^[a-zA-Z]:/.test(rel);
   };
-  const project = resolve5(root);
+  const project = resolve6(root);
   if (inside(project, outDir)) throw new Error(`pd build: --out ${outDir} would contain the project itself \u2014 choose a folder inside or beside it, like ./dist`);
   for (const source of [cfg.patternsDir, cfg.stylesDir, ...cfg.themeDirs, ...cfg.assetRoots]) {
     if (inside(outDir, source) || inside(source, outDir)) {
@@ -1970,7 +2245,7 @@ async function buildStaticSite(config, root, opts) {
     }
     const type = res.headers.get("content-type") ?? "";
     const target = diskPath(outDir, file);
-    await mkdir3(dirname3(target), { recursive: true });
+    await mkdir3(dirname4(target), { recursive: true });
     if (isText(type)) {
       const body = await res.text();
       const out = withBasePath(body, basePath);
@@ -1990,7 +2265,7 @@ async function buildStaticSite(config, root, opts) {
     if (done.has(file)) return;
     done.add(file);
     const target = diskPath(outDir, file);
-    await mkdir3(dirname3(target), { recursive: true });
+    await mkdir3(dirname4(target), { recursive: true });
     const out = withBasePath(body, basePath);
     await writeFile3(target, out);
     report.bytes += Buffer.byteLength(out);
@@ -2056,8 +2331,8 @@ async function buildStaticSite(config, root, opts) {
     for (const [i, rootDir] of cfg.assetRoots.entries()) {
       const exists = await stat2(rootDir).then((s) => s.isDirectory(), () => false);
       if (!exists) continue;
-      await cp(rootDir, join10(outDir, "assets", cfg.assetRootNames[i]), { recursive: true });
-      if (cfg.assetRoots.length === 1) await cp(rootDir, join10(outDir, "assets"), { recursive: true, force: false });
+      await cp(rootDir, join11(outDir, "assets", cfg.assetRootNames[i]), { recursive: true });
+      if (cfg.assetRoots.length === 1) await cp(rootDir, join11(outDir, "assets"), { recursive: true, force: false });
     }
     const runtime = {
       mode: "static",
@@ -2069,12 +2344,12 @@ async function buildStaticSite(config, root, opts) {
     const shell = withBasePath(buildShellHtml(runtime), basePath);
     for (const route of routes) {
       const target = diskPath(outDir, staticPathFor(route));
-      await mkdir3(dirname3(target), { recursive: true });
+      await mkdir3(dirname4(target), { recursive: true });
       await writeFile3(target, shell);
       report.files++;
       report.bytes += Buffer.byteLength(shell);
     }
-    await writeFile3(join10(outDir, ".nojekyll"), "");
+    await writeFile3(join11(outDir, ".nojekyll"), "");
     report.files++;
   } finally {
     await server.close();
@@ -2093,6 +2368,7 @@ function createServerState() {
     scssGraphDirty: true,
     perComponentCss: /* @__PURE__ */ new Map(),
     baseCss: "",
+    baseCssVersion: 0,
     compositionRegistry: null,
     discoveryResult: null,
     auditSlices: null,
@@ -2102,27 +2378,46 @@ function createServerState() {
     scriptCache: /* @__PURE__ */ new Map()
   };
 }
+function applyStyleData(state, data) {
+  const firstBuild = state.classOwnerIndex === null;
+  const before = state.perComponentCss;
+  const changedComponents = [];
+  if (!firstBuild) {
+    for (const id of /* @__PURE__ */ new Set([...before.keys(), ...data.componentCssMap.keys()])) {
+      if ((before.get(id) ?? "") !== (data.componentCssMap.get(id) ?? "")) changedComponents.push(id);
+    }
+  }
+  const baseChanged = !firstBuild && state.baseCss !== data.baseCss;
+  if (baseChanged) state.baseCssVersion += 1;
+  state.scssModuleGraph = data.scssModuleGraph;
+  state.classOwnerIndex = data.classOwnerIndex;
+  state.baseProvenance = data.baseProvenance;
+  state.perComponentCss = data.componentCssMap;
+  state.baseCss = data.baseCss;
+  state.scssGraphDirty = false;
+  return { changedComponents: changedComponents.sort(), baseChanged };
+}
 
 // packages/dev-server/src/routes.ts
-import { basename as basename4, extname as extname2, join as join17 } from "node:path";
+import { basename as basename4, extname as extname2, join as join18 } from "node:path";
 import { readFile as readFile15, stat as stat4 } from "node:fs/promises";
-import { existsSync as existsSync3 } from "node:fs";
+import { existsSync as existsSync4 } from "node:fs";
 
 // packages/dev-server/src/component-tree.ts
 import { readFile as readFile10 } from "node:fs/promises";
-import { join as join13 } from "node:path";
+import { join as join14 } from "node:path";
 
 // packages/dev-server/src/layout-mode.ts
 import { readFile as readFile9 } from "node:fs/promises";
-import { join as join12 } from "node:path";
+import { join as join13 } from "node:path";
 
 // packages/dev-server/src/pattern-dirs.ts
 import { readFile as readFile8 } from "node:fs/promises";
-import { join as join11 } from "node:path";
+import { join as join12 } from "node:path";
 async function readFolderFile(dirs, rel) {
   for (const dir of typeof dirs === "string" ? [dirs] : dirs) {
     try {
-      return await readFile8(join11(dir, rel), "utf-8");
+      return await readFile8(join12(dir, rel), "utf-8");
     } catch {
     }
   }
@@ -2135,7 +2430,7 @@ async function resolveLayoutMode(componentId, patternsDir, discoveryMap) {
   const parts = componentId.split("/");
   const category = parts[0];
   let layout = FULL_CATEGORIES.has(category) ? "full" : "centered";
-  const categoryIndex = await readFolderFile(patternsDir, join12(category, "index.md"));
+  const categoryIndex = await readFolderFile(patternsDir, join13(category, "index.md"));
   if (categoryIndex !== null) {
     const m = categoryIndex.match(/^preview:\s*(centered|full)$/m);
     if (m) layout = m[1];
@@ -2287,7 +2582,7 @@ async function buildTreeNodeFromMap(nodePath, idsUnderPath, patternsDir, overvie
       if (o && "weight" in o) weight = o.weight;
     }
   }
-  const indexMd = await readFolderFile(patternsDir, join13(nodePath, "index.md"));
+  const indexMd = await readFolderFile(patternsDir, join14(nodePath, "index.md"));
   const folderOrder = orderOf(indexMd);
   const built = [];
   for (const childPath of directChildPaths(nodePath, idsUnderPath)) {
@@ -2497,197 +2792,7 @@ import postcss4 from "postcss";
 import * as sass3 from "sass";
 import { SourceMapConsumer as SourceMapConsumer2 } from "source-map";
 import { parse as parseHtml2 } from "node-html-parser";
-
-// packages/dev-server/src/style-index.ts
-import { dirname as dirname4, relative as relative3, resolve as resolve6 } from "node:path";
-import { fileURLToPath as fileURLToPath2 } from "node:url";
-import postcss3 from "postcss";
-import { SourceMapConsumer } from "source-map";
-import * as sass2 from "sass";
-
-// packages/dev-server/src/timing.ts
-var verboseTiming = !!process.env["PD_VERBOSE_TIMING"];
-
-// packages/dev-server/src/style-index.ts
-function resolveScssToComponent(absPath, stylesDir, componentIds) {
-  const rel = relative3(stylesDir, absPath);
-  let normalized = rel.replace(/\.scss$/, "").split("/").map((seg) => seg.replace(/^\d+[-_]/, "").replace(/^_/, "")).join("/");
-  if (normalized.endsWith("/index")) normalized = normalized.slice(0, -6);
-  const id = collapseComponentId(normalized);
-  return componentIds.has(id) ? id : null;
-}
-function resolveSharedModulePath(absPath, stylesDir, keepBarrel = false) {
-  const rel = relative3(stylesDir, absPath);
-  if (rel.startsWith("..")) return null;
-  const parts = rel.replace(/\.scss$/, "").split("/");
-  const normalized = parts.map(
-    (seg, i) => i === parts.length - 1 ? seg.replace(/^_/, "") : seg
-  );
-  if (!keepBarrel && normalized[normalized.length - 1] === "index") return null;
-  return normalized.join("/");
-}
-function extractClassesFromCompiled(consumer, root, entryFile, stylesDir, componentIds) {
-  const classMap = /* @__PURE__ */ new Map();
-  const baseModules = /* @__PURE__ */ new Map();
-  root.walkRules((rule) => {
-    const classMatches = rule.selector.match(/\.([\w-]+)/g);
-    if (!classMatches) return;
-    const pos = rule.source?.start;
-    if (!pos) return;
-    const original = consumer.originalPositionFor({ line: pos.line, column: pos.column - 1 });
-    if (!original.source) return;
-    const originPath = original.source.startsWith("file://") ? fileURLToPath2(original.source) : resolve6(dirname4(entryFile), original.source);
-    const resolved = resolveScssToComponent(originPath, stylesDir, componentIds);
-    const owner = resolved ?? "__base__";
-    const modulePath = resolved === null ? resolveSharedModulePath(originPath, stylesDir, true) : null;
-    for (const cls of classMatches) {
-      const name = cls.slice(1);
-      if (!classMap.has(name)) classMap.set(name, owner);
-      if (modulePath && classMap.get(name) === "__base__" && !baseModules.has(name)) {
-        baseModules.set(name, modulePath);
-      }
-    }
-  });
-  return { classMap, baseModules };
-}
-async function attributeClassesFromFile(entryFile, stylesDir, componentIds) {
-  try {
-    const compiled = sass2.compile(entryFile, { sourceMap: true });
-    if (!compiled.sourceMap) return null;
-    const consumer = new SourceMapConsumer(compiled.sourceMap);
-    const root = postcss3.parse(compiled.css);
-    const { classMap } = extractClassesFromCompiled(consumer, root, entryFile, stylesDir, componentIds);
-    return classMap;
-  } catch {
-    return null;
-  }
-}
-async function patchClassOwnerIndex(entryFile, changedCompId, stylesDir, componentIds, index) {
-  for (const [cls, owner] of index) {
-    if (owner === changedCompId) index.delete(cls);
-  }
-  const fresh = await attributeClassesFromFile(entryFile, stylesDir, componentIds);
-  if (!fresh) return false;
-  for (const [name, owner] of fresh) {
-    if (owner === changedCompId && !index.has(name)) index.set(name, owner);
-  }
-  return true;
-}
-async function buildAllStyleData(roots, componentIds, entryOverride) {
-  if (verboseTiming) console.time("[dev-server:timing] full classOwnerIndex build");
-  const styleUsesModules = /* @__PURE__ */ new Map();
-  const classIndex = /* @__PURE__ */ new Map();
-  const baseProvenance = /* @__PURE__ */ new Map();
-  const componentCssBuckets = /* @__PURE__ */ new Map();
-  const baseCssByRoot = [];
-  for (const id of componentIds) styleUsesModules.set(id, []);
-  const rootList = typeof roots === "string" ? [{ dir: roots, ...entryOverride ? { entries: entryOverride } : {} }] : roots;
-  for (const styleRoot of rootList) {
-    const stylesDir = styleRoot.dir;
-    const baseCssBucket = /* @__PURE__ */ new Set();
-    baseCssByRoot.push([]);
-    let entryFiles = [];
-    if (styleRoot.entries && styleRoot.entries.length > 0) {
-      entryFiles = [...styleRoot.entries];
-    } else {
-      try {
-        entryFiles = await collectScssFiles(stylesDir);
-      } catch {
-        entryFiles = [];
-      }
-    }
-    entryFiles.sort();
-    for (const entryFile of entryFiles) {
-      let originOwnerFor2 = function(node) {
-        const pos = node.source?.start;
-        if (!pos) return null;
-        const original = consumer.originalPositionFor({
-          line: pos.line,
-          column: pos.column - 1
-        });
-        if (!original.source) return null;
-        const originPath = original.source.startsWith("file://") ? fileURLToPath2(original.source) : resolve6(dirname4(entryFile), original.source);
-        const originComp = resolveScssToComponent(originPath, stylesDir, componentIds);
-        return originComp ?? "__base__";
-      };
-      var originOwnerFor = originOwnerFor2;
-      const compOwner = resolveScssToComponent(entryFile, stylesDir, componentIds);
-      let compiled;
-      try {
-        compiled = sass2.compile(entryFile, { sourceMap: true });
-      } catch {
-        continue;
-      }
-      if (compOwner) {
-        const deps = compiled.loadedUrls.filter((u) => u.protocol === "file:").map((u) => fileURLToPath2(u)).filter((p) => resolve6(p) !== resolve6(entryFile));
-        for (const dep of deps) {
-          const depComp = resolveScssToComponent(dep, stylesDir, componentIds);
-          if (depComp !== null && depComp !== compOwner) {
-            const rawRel = relative3(stylesDir, dep).replace(/\.scss$/, "");
-            const modPath = rawRel.endsWith("/_index") ? rawRel.slice(0, -7) : rawRel;
-            if (modPath) {
-              const mArr = styleUsesModules.get(compOwner) ?? [];
-              if (!mArr.includes(modPath)) {
-                mArr.push(modPath);
-                styleUsesModules.set(compOwner, mArr);
-              }
-            }
-          } else if (depComp === null) {
-            const modPath = resolveSharedModulePath(dep, stylesDir);
-            if (modPath) {
-              const mArr = styleUsesModules.get(compOwner) ?? [];
-              if (!mArr.includes(modPath)) {
-                mArr.push(modPath);
-                styleUsesModules.set(compOwner, mArr);
-              }
-            }
-          }
-        }
-      }
-      const rawMap = compiled.sourceMap;
-      if (!rawMap) continue;
-      const consumer = new SourceMapConsumer(rawMap);
-      const root = postcss3.parse(compiled.css);
-      root.each((node) => {
-        const owner = originOwnerFor2(node);
-        if (owner === null) return;
-        const nodeText = node.toString();
-        if (owner === "__base__") {
-          baseCssBucket.add(nodeText);
-        } else {
-          const bucket = componentCssBuckets.get(owner) ?? /* @__PURE__ */ new Set();
-          bucket.add(nodeText);
-          componentCssBuckets.set(owner, bucket);
-        }
-      });
-      const { classMap: perFileClasses, baseModules: perFileBaseModules } = extractClassesFromCompiled(consumer, root, entryFile, stylesDir, componentIds);
-      for (const [name, owner] of perFileClasses) {
-        if (!classIndex.has(name)) classIndex.set(name, owner);
-      }
-      for (const [name, mod] of perFileBaseModules) {
-        if (!baseProvenance.has(name)) baseProvenance.set(name, mod);
-      }
-    }
-    baseCssByRoot[baseCssByRoot.length - 1] = [...baseCssBucket];
-  }
-  for (const [k, v] of styleUsesModules) styleUsesModules.set(k, [...new Set(v)].sort());
-  const componentCssMap = /* @__PURE__ */ new Map();
-  for (const [id, bucket] of componentCssBuckets) {
-    componentCssMap.set(id, [...bucket].join("\n"));
-  }
-  if (verboseTiming) console.timeEnd("[dev-server:timing] full classOwnerIndex build");
-  return {
-    scssModuleGraph: { styleUsesModules },
-    classOwnerIndex: classIndex,
-    baseProvenance,
-    componentCssMap,
-    // Packages' base rules first (later roots), the project's last — its own base wins the cascade.
-    baseCss: [...baseCssByRoot].reverse().flat().join("\n")
-  };
-}
-
-// packages/dev-server/src/css-closure.ts
-async function recomputeComponentCss(entryFile, compId, stylesDir, componentIds) {
+async function recomputeComponentCss(entryFile, compId, stylesDir, componentIds, inBase = () => false) {
   try {
     const compiled = sass3.compile(entryFile, { sourceMap: true });
     const rawMap = compiled.sourceMap;
@@ -2701,10 +2806,11 @@ async function recomputeComponentCss(entryFile, compId, stylesDir, componentIds)
       const original = consumer.originalPositionFor({ line: pos.line, column: pos.column - 1 });
       if (!original.source) return;
       const originPath = original.source.startsWith("file://") ? fileURLToPath3(original.source) : resolve7(dirname5(entryFile), original.source);
+      if (inBase(originPath)) return;
       const originComp = resolveScssToComponent(originPath, stylesDir, componentIds);
-      if (originComp === compId) bucket.add(node.toString());
+      if (originComp === compId) bucket.add(cssNodeText(node));
     });
-    return [...bucket].join("\n");
+    return joinCssChunks(bucket);
   } catch {
     return null;
   }
@@ -2777,7 +2883,7 @@ function linkableClosure(closureIds, perComponentCss) {
 
 // packages/dev-server/src/requires.ts
 import { readFile as readFile13 } from "node:fs/promises";
-import { join as join14, basename as basename3 } from "node:path";
+import { join as join15, basename as basename3 } from "node:path";
 function normalizeScriptId(raw) {
   let s = raw.trim().replace(/^\[(.+)\]$/, "$1").trim();
   s = basename3(s);
@@ -2832,7 +2938,7 @@ async function loadSvgAssets(ids, assetsDir) {
   for (const id of ids) {
     for (const candidate of [`${id}.svg`, `images/${id}.svg`]) {
       try {
-        const raw = await readFile13(join14(assetsDir, candidate), "utf-8");
+        const raw = await readFile13(join15(assetsDir, candidate), "utf-8");
         contents.push(hideSvg(raw));
         break;
       } catch {
@@ -2966,13 +3072,13 @@ async function buildComponentDetail(componentId, patternsDir, renderFn, tracker,
 }
 
 // packages/dev-server/src/overview.ts
-import { join as join15 } from "node:path";
+import { join as join16 } from "node:path";
 async function buildFolderOverview(folderPath, patternsDir, renderFn, discoveryMap) {
   const category = folderPath.split("/")[0];
   let folderLayout = FULL_CATEGORIES.has(category) ? "full" : "centered";
   let doc;
   try {
-    const rawIndex = await readFolderFile(patternsDir, join15(folderPath, "index.md"));
+    const rawIndex = await readFolderFile(patternsDir, join16(folderPath, "index.md"));
     if (rawIndex === null) throw new Error("no index.md");
     const m = rawIndex.match(/^preview:\s*(centered|full)$/m);
     if (m) folderLayout = m[1];
@@ -3010,13 +3116,13 @@ async function collectPublicLeaves(folderPath, patternsDir, discoveryMap) {
 
 // packages/dev-server/src/preview-document.ts
 import { stat as stat3 } from "node:fs/promises";
-import { join as join16 } from "node:path";
+import { join as join17 } from "node:path";
 async function buildScriptVersions(ids, dirs) {
   const map = /* @__PURE__ */ new Map();
   await Promise.all(ids.map(async (id) => {
     for (const dir of Array.isArray(dirs) ? dirs : [dirs]) {
       try {
-        const { mtimeMs } = await stat3(join16(dir, `${id}.ts`));
+        const { mtimeMs } = await stat3(join17(dir, `${id}.ts`));
         map.set(id, mtimeMs);
         return;
       } catch {
@@ -3025,25 +3131,59 @@ async function buildScriptVersions(ids, dirs) {
   }));
   return map;
 }
-function buildPreviewDocument(html, closureIds, layout, themeNames, defaultTheme, requireScripts, svgContents, assetsCss, componentId, baseHref, scriptVersions, linkBase = false, themeSwitch = "attribute") {
-  const bodyAttr = defaultTheme ? ` data-theme="${escapeAttr(defaultTheme)}"` : "";
-  const layoutClass = layout === "full" ? "layout-full" : "layout-centered";
-  const widthPost = layout === "centered" ? `window.parent.postMessage({type:'pd-width',width:(function(){var m=document.querySelector('main')||document.body,cs=getComputedStyle(document.body);return Math.ceil(m.scrollWidth+(parseFloat(cs.marginLeft)||0)+(parseFloat(cs.marginRight)||0));}())},'*');` : "";
-  const heightMeasure = `document.documentElement.scrollHeight`;
-  const resizeScript = layout === "centered" || layout === "full" ? `<script>(function(){var _t;new ResizeObserver(function(){clearTimeout(_t);_t=setTimeout(function(){window.parent.postMessage({type:'pd-height',height:${heightMeasure}},'*');${widthPost}},50);}).observe(document.body);})();</script>` : "";
+var CONTENT_WIDTH_SCRIPT = `
+function pdContentWidth(){
+  function px(v){ return parseFloat(v) || 0; }
+  function need(el){
+    var right = 0, cr = el.getBoundingClientRect().right, es = getComputedStyle(el);
+    var contentRight = cr - px(es.paddingRight) - px(es.borderRightWidth);
+    for (var c = el.firstChild; c; c = c.nextSibling) {
+      if (c.nodeType === 3) {
+        if (!/\\S/.test(c.data)) continue;
+        var rg = document.createRange(); rg.selectNodeContents(c);
+        var rs = rg.getClientRects();
+        for (var i = 0; i < rs.length; i++) right = Math.max(right, rs[i].right);
+        continue;
+      }
+      if (c.nodeType !== 1) continue;
+      var tag = c.tagName.toUpperCase();
+      if (tag === 'SCRIPT' || tag === 'STYLE' || tag === 'TEMPLATE' || tag === 'NOSCRIPT') continue;
+      var cs = getComputedStyle(c);
+      if (cs.display === 'none') continue;
+      var r = c.getBoundingClientRect();
+      var box = /^(IMG|SVG|VIDEO|CANVAS|IFRAME|INPUT|SELECT|TEXTAREA|OBJECT|EMBED)$/.test(tag);
+      if (cs.display === 'contents' || (!box && cs.display === 'inline') || (r.width === 0 && r.height === 0)) {
+        right = Math.max(right, need(c));
+      } else if (!box && !/grid|table/.test(cs.display) && r.right + px(cs.marginRight) >= contentRight - 0.5) {
+        var inner = Math.max(need(c), r.left + px(cs.borderLeftWidth) + px(cs.paddingLeft));
+        right = Math.max(right, inner + px(cs.paddingRight) + px(cs.borderRightWidth) + px(cs.marginRight));
+      } else {
+        right = Math.max(right, r.right + px(cs.marginRight));
+      }
+    }
+    return right;
+  }
+  var b = document.body, bs = getComputedStyle(b);
+  return Math.ceil(need(b) + px(bs.paddingRight) + px(bs.borderRightWidth) + px(bs.marginRight));
+}
+`;
+function buildPreviewDocument(html, closureIds, layout, themeNames, defaultTheme, requireScripts, svgContents, assetsCss, componentId, baseHref, scriptVersions, linkBase = false, themeSwitch = "attribute", baseCssVersion = 0) {
+  const componentAttr = componentId ? ` data-component-id="${escapeAttr(componentId)}"` : "";
+  const bodyAttr = `${defaultTheme ? ` data-theme="${escapeAttr(defaultTheme)}"` : ""}${componentAttr}`;
+  const widthPost = layout === "centered" ? `window.parent.postMessage({type:'pd-width',width:pdContentWidth(),at:window.innerWidth,scroll:document.documentElement.scrollWidth},'*');` : "";
+  const resizeScript = layout === "centered" || layout === "full" ? `<script>(function(){${layout === "centered" ? CONTENT_WIDTH_SCRIPT : ""}var _t;new ResizeObserver(function(){clearTimeout(_t);_t=setTimeout(function(){window.parent.postMessage({type:'pd-height',height:document.documentElement.scrollHeight},'*');${widthPost}},50);}).observe(document.body);})();</script>` : "";
   const baseTag = baseHref ? `<base href="${escapeAttr(baseHref)}">` : "";
-  const baseLink = linkBase ? `<link rel="stylesheet" href="${PD_ROUTES.baseCss}">` : "";
-  const assetCssLinks = (assetsCss ?? []).map((p) => `<link rel="stylesheet" href="/assets/${p}">`).join("\n");
-  const themeLinks = themeSwitch === "stylesheet" ? defaultTheme ? `<link rel="stylesheet" href="${themeCssUrl(defaultTheme)}" data-pd-theme="${escapeAttr(defaultTheme)}">` : "" : themeNames.map((n) => `<link rel="stylesheet" href="${themeCssUrl(n)}">`).join("\n");
-  const closureLinks = closureIds.map((id) => `<link rel="stylesheet" href="${componentCssUrl(id)}" data-pd-comp="${escapeAttr(id)}">`).join("\n");
+  const baseHrefV = baseCssVersion > 0 ? `${PD_ROUTES.baseCss}?v=${baseCssVersion}` : PD_ROUTES.baseCss;
+  const baseLink = linkBase ? `<link rel="stylesheet" href="${escapeAttr(baseHrefV)}">` : "";
+  const assetCssLinks = (assetsCss ?? []).map((p) => `<link rel="stylesheet" href="${escapeAttr(p.includes("://") ? p : `/assets/${p}`)}">`).join("\n");
+  const themeLinks = themeSwitch === "stylesheet" ? defaultTheme ? `<link rel="stylesheet" href="${escapeAttr(themeCssUrl(defaultTheme))}" data-pd-theme="${escapeAttr(defaultTheme)}">` : "" : themeNames.map((n) => `<link rel="stylesheet" href="${escapeAttr(themeCssUrl(n))}">`).join("\n");
+  const closureLinks = closureIds.map((id) => `<link rel="stylesheet" href="${escapeAttr(componentCssUrl(id))}" data-pd-comp="${escapeAttr(id)}">`).join("\n");
   const symbolSets = (svgContents ?? []).join("\n");
   const scriptTags = (requireScripts ?? []).map((src) => {
-    if (src.includes("://")) return `<script type="module" src="${src}"></script>`;
+    if (src.includes("://")) return `<script type="module" src="${escapeAttr(src)}"></script>`;
     const v = scriptVersions?.get(src);
-    return `<script type="module" src="${scriptUrl(src, v ?? void 0)}"></script>`;
+    return `<script type="module" src="${escapeAttr(scriptUrl(src, v ?? void 0))}"></script>`;
   }).join("\n");
-  const componentAttr = componentId ? ` data-component-id="${escapeAttr(componentId)}"` : "";
-  const layoutStyle = layout === "full" ? ' style="width:100%;max-width:none"' : ' style="max-width:max-content;margin-inline:auto"';
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -3056,23 +3196,28 @@ ${closureLinks}
 </head>
 <body${bodyAttr}>
 ${symbolSets}
-<main class="${layoutClass}"${layoutStyle}${componentAttr}>${html}</main>
+${html}
 ${resizeScript}
 ${scriptTags}
 </body>
 </html>`;
 }
-function normalizeAssetRefs(html, rootNames) {
-  if (rootNames.length === 0) return html;
-  const alt = rootNames.map((n) => n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
-  return html.replace(new RegExp(`(?:\\.\\.?/)+(${alt})/`, "g"), "/assets/$1/");
+function normalizeAssetRefs(text, rootNames) {
+  if (rootNames.length === 0) return text;
+  const alt = (names) => names.map((n) => n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+  let out = text.replace(new RegExp(`(?:\\.\\.?/)+(${alt(rootNames)})/`, "g"), "/assets/$1/");
+  const absNames = rootNames.filter((n) => n !== "assets");
+  if (absNames.length > 0) {
+    out = out.replace(new RegExp(`(^|["'(=,\\s])/(${alt(absNames)})/`, "g"), "$1/assets/$2/");
+  }
+  return out;
 }
 
 // packages/dev-server/src/assets.ts
-import { existsSync as existsSync2 } from "node:fs";
+import { existsSync as existsSync3 } from "node:fs";
 import { createRequire as createRequire2 } from "node:module";
 import { fileURLToPath as fileURLToPath4 } from "node:url";
-function resolveDevUiDist(moduleUrl, exists = existsSync2) {
+function resolveDevUiDist(moduleUrl, exists = existsSync3) {
   const packaged = fileURLToPath4(new URL("./dev-ui/", moduleUrl));
   if (exists(`${packaged}main.js`)) return packaged;
   return fileURLToPath4(new URL("../../../apps/dev-ui/dist/", moduleUrl));
@@ -3108,10 +3253,10 @@ async function handleRequest(req, res, ctx) {
     const url = new URL(req.url ?? "/", "http://x");
     const pathname = url.pathname;
     if (pathname === PD_ROUTES.mainJs) {
-      return await serveFile(res, join17(devUiDist2, "main.js"), "application/javascript");
+      return await serveFile(res, join18(devUiDist2, "main.js"), "application/javascript");
     }
     if (pathname === PD_ROUTES.mainCss) {
-      return await serveFile(res, join17(devUiDist2, "main.css"), "text/css");
+      return await serveFile(res, join18(devUiDist2, "main.css"), "text/css");
     }
     if (pathname === PD_ROUTES.axeCore) {
       return await serveFile(res, resolveAxeCore(import.meta.url), "application/javascript");
@@ -3128,14 +3273,14 @@ async function handleRequest(req, res, ctx) {
     }
     if (pathname === PD_ROUTES.baseCss) {
       res.writeHead(200, { "Content-Type": "text/css" });
-      res.end(state.baseCss);
+      res.end(normalizeAssetRefs(state.baseCss, assetRootNames));
       return;
     }
     if (pathname.startsWith(PD_ROUTE_PREFIX.componentCss) && pathname.endsWith(".css")) {
       const componentId = pathname.slice(PD_ROUTE_PREFIX.componentCss.length, -".css".length);
       const css = state.perComponentCss.get(componentId) ?? "";
       res.writeHead(200, { "Content-Type": "text/css" });
-      res.end(css);
+      res.end(normalizeAssetRefs(css, assetRootNames));
       return;
     }
     if (pathname.startsWith(PD_ROUTE_PREFIX.themeCss) && pathname.endsWith(".css")) {
@@ -3149,7 +3294,7 @@ async function handleRequest(req, res, ctx) {
       );
       if (state.themeCss.has(themeName)) {
         res.writeHead(200, { "Content-Type": "text/css" });
-        res.end(state.themeCss.get(themeName));
+        res.end(normalizeAssetRefs(state.themeCss.get(themeName), assetRootNames));
       } else {
         res.writeHead(404, { "Content-Type": "text/plain" });
         res.end("Theme not found");
@@ -3165,7 +3310,7 @@ async function handleRequest(req, res, ctx) {
       const scriptId = normalizeScriptId(decodeURIComponent(basename4(pathname, ".js")));
       try {
         if (!state.scriptCache.has(scriptId)) {
-          const entryPoint = scriptsDirs.map((d) => join17(d, `${scriptId}.ts`)).find((f) => existsSync3(f)) ?? join17(scriptsDirs[0], `${scriptId}.ts`);
+          const entryPoint = scriptsDirs.map((d) => join18(d, `${scriptId}.ts`)).find((f) => existsSync4(f)) ?? join18(scriptsDirs[0], `${scriptId}.ts`);
           const js = await compileScriptFile(entryPoint);
           state.scriptCache.set(scriptId, js);
         }
@@ -3181,7 +3326,7 @@ async function handleRequest(req, res, ctx) {
       const tail = decodeURIComponent(pathname.slice(PD_ROUTE_PREFIX.assets.length));
       const firstSeg = tail.split("/")[0];
       const namedIdx = assetRootNames.indexOf(firstSeg);
-      const assetPath = namedIdx >= 0 ? join17(assetRoots[namedIdx], tail.slice(firstSeg.length + 1)) : join17(assetRoots[0], tail);
+      const assetPath = namedIdx >= 0 ? join18(assetRoots[namedIdx], tail.slice(firstSeg.length + 1)) : join18(assetRoots[0], tail);
       try {
         await stat4(assetPath);
         return await serveFile(res, assetPath, mimeType(extname2(assetPath)));
@@ -3235,15 +3380,14 @@ async function handleRequest(req, res, ctx) {
       try {
         if (!state.discoveryResult) state.discoveryResult = await buildDiscoveryMap(patternRoots);
         const { handleMap } = state.discoveryResult;
+        if (!state.discoveryResult.discoveryMap.has(componentId) && !state.discoveryResult.quarantineMap.has(componentId)) {
+          json(res, 404, { error: `No component "${componentId}"` });
+          return;
+        }
         if (state.scssGraphDirty) {
           const ids = baseComponentIds(state.discoveryResult);
           const styleData = await buildAllStyleData(styleRoots, ids);
-          state.scssModuleGraph = styleData.scssModuleGraph;
-          state.classOwnerIndex = styleData.classOwnerIndex;
-          state.baseProvenance = styleData.baseProvenance;
-          state.perComponentCss = styleData.componentCssMap;
-          state.baseCss = styleData.baseCss;
-          state.scssGraphDirty = false;
+          applyStyleData(state, styleData);
         }
         if (!state.compositionRegistry) {
           state.compositionRegistry = await buildCompositionRegistry(patternDirs, handleMap, state.discoveryResult.discoveryMap);
@@ -3288,7 +3432,8 @@ async function handleRequest(req, res, ctx) {
           void 0,
           scriptVersions,
           documentBaseEnabled,
-          themeSwitch
+          themeSwitch,
+          state.baseCssVersion
         );
         json(res, 200, { ...detail, document: previewDoc, diagnostics });
       } catch (e) {
@@ -3369,7 +3514,8 @@ async function handleRequest(req, res, ctx) {
           void 0,
           scriptVersions,
           documentBaseEnabled,
-          themeSwitch
+          themeSwitch,
+          state.baseCssVersion
         );
         res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
         res.end(doc);
@@ -3411,6 +3557,11 @@ async function handleRequest(req, res, ctx) {
       }
       return;
     }
+    if (!servesShell(pathname, req.headers.accept)) {
+      res.writeHead(404, { "Content-Type": "text/plain" });
+      res.end(`Not found: ${pathname}`);
+      return;
+    }
     res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
     res.end(buildShellHtml({ mode: "live", wsPort }));
   } catch (e) {
@@ -3443,13 +3594,14 @@ function describeBindError(e, port2, role, ports) {
 }
 
 // packages/dev-server/src/watch.ts
-import { basename as basename5, extname as extname3, relative as relative4, resolve as resolve8 } from "node:path";
+import { basename as basename5, extname as extname3, relative as relative5, resolve as resolve8 } from "node:path";
 import chokidar from "chokidar";
 function startWatching(ctx) {
   const { cfg, state, render, tracker, hotreloader } = ctx;
-  const { patternsDir, stylesDir, patternRoots, patternDirs, swatchSlots, cwd } = cfg;
+  const { patternsDir, stylesDir, styleRoots, patternRoots, patternDirs, swatchSlots, cwd } = cfg;
   const themesDir = cfg.config.themes ? cfg.themesDir : null;
   const scriptsDir = cfg.config.scriptsDir ? cfg.scriptsDirs[0] ?? null : null;
+  const inProjectBase = documentBaseMatcher(stylesDir, cfg.config.documentBase);
   const watchDirs = [patternsDir, stylesDir, ...themesDir ? [themesDir] : [], ...scriptsDir ? [scriptsDir] : []];
   const watcher = chokidar.watch(watchDirs, { ignoreInitial: true, persistent: true });
   async function handleComponentScss(filePath) {
@@ -3474,11 +3626,15 @@ function startWatching(ctx) {
     const allIds = baseComponentIds(state.discoveryResult);
     const timestamp = Date.now();
     const effectiveFiles = recompiledFiles.length > 0 ? recompiledFiles : [resolve8(filePath)];
+    if (inProjectBase(resolve8(filePath)) || effectiveFiles.some((f) => inProjectBase(resolve8(f)) || !resolveScssToComponent(resolve8(f), stylesDir, allIds))) {
+      await restyleAll(allIds, timestamp, effectiveFiles, compileErrors.length > 0);
+      return;
+    }
     const pending = [];
     for (const recompiledFile of effectiveFiles) {
       const compId = resolveScssToComponent(resolve8(recompiledFile), stylesDir, allIds);
       if (compId) {
-        const newCss = await recomputeComponentCss(recompiledFile, compId, stylesDir, allIds);
+        const newCss = await recomputeComponentCss(recompiledFile, compId, stylesDir, allIds, inProjectBase);
         if (newCss !== null) {
           state.perComponentCss.set(compId, newCss);
           pending.push({
@@ -3505,22 +3661,43 @@ function startWatching(ctx) {
       }
       if (verboseTiming) console.timeEnd("[dev-server:timing] classOwnerIndex patch");
     }
-    let orderedHrefs;
-    if (state.lastComponentId && state.discoveryResult && state.compositionRegistry) {
-      const staticClosure = await computeCssClosure(
-        state.lastComponentId,
-        state.compositionRegistry,
-        patternDirs,
-        state.classOwnerIndex ?? /* @__PURE__ */ new Map(),
-        state.discoveryResult.discoveryMap
-      );
-      const renderedHtml = await render({ component: state.lastComponentId }).then((r) => r.html, () => "");
-      const closureIds = withRenderedClassOwners(staticClosure, renderedHtml, state.classOwnerIndex ?? /* @__PURE__ */ new Map());
-      orderedHrefs = linkableClosure(closureIds, state.perComponentCss).map((id) => componentCssUrl(id, timestamp));
-    }
+    const orderedHrefs = await closureHrefs(timestamp);
     for (const m of pending) hotreloader.push({ ...m, orderedHrefs });
     console.log(`[dev-server] CSS updated (recompiled: ${effectiveFiles.map((f) => basename5(f)).join(", ")})`);
   }
+  async function restyleAll(allIds, timestamp, files, hadCompileErrors) {
+    const names = files.map((f) => basename5(f)).join(", ");
+    if (hadCompileErrors) {
+      console.warn(`[dev-server] CSS not updated \u2014 compile errors (recompiled: ${names})`);
+      return;
+    }
+    const changes = applyStyleData(state, await buildAllStyleData(styleRoots, allIds));
+    const orderedHrefs = await closureHrefs(timestamp);
+    for (const componentId of changes.changedComponents) {
+      hotreloader.push({ type: "css-link-swap", componentId, href: componentCssUrl(componentId, timestamp), orderedHrefs });
+    }
+    if (changes.baseChanged && state.lastComponentId) {
+      hotreloader.push({ type: "content-swap", componentId: state.lastComponentId });
+    }
+    const what = [
+      `${changes.changedComponents.length} component(s)`,
+      ...changes.baseChanged ? ["base layer"] : []
+    ].join(" + ");
+    console.log(`[dev-server] CSS updated: ${what} (recompiled: ${names})`);
+  }
+  async function closureHrefs(timestamp) {
+    if (!state.lastComponentId || !state.discoveryResult || !state.compositionRegistry) return void 0;
+    const staticClosure = await computeCssClosure(
+      state.lastComponentId,
+      state.compositionRegistry,
+      patternDirs,
+      state.classOwnerIndex ?? /* @__PURE__ */ new Map(),
+      state.discoveryResult.discoveryMap
+    );
+    const renderedHtml = await render({ component: state.lastComponentId }).then((r) => r.html, () => "");
+    const closureIds = withRenderedClassOwners(staticClosure, renderedHtml, state.classOwnerIndex ?? /* @__PURE__ */ new Map());
+    return linkableClosure(closureIds, state.perComponentCss).map((id) => componentCssUrl(id, timestamp));
+  }
   async function handleMarkdown(filePath, event) {
     const abs = resolve8(filePath);
     const ownerIn = (dr) => {
@@ -3529,7 +3706,7 @@ function startWatching(ctx) {
       }
       return void 0;
     };
-    const rel = relative4(patternsDir, filePath);
+    const rel = relative5(patternsDir, filePath);
     if (event === "change") state.discoveryResult ??= await buildDiscoveryMap(patternRoots);
     let owner = ownerIn(state.discoveryResult);
     if (event === "change") {
@@ -3611,21 +3788,21 @@ function startWatching(ctx) {
     if (ext === ".scss" && !(themesDir && filePath.startsWith(themesDir))) {
       await handleComponentScss(filePath);
     } else if (ext === ".hbs" && filePath.startsWith(patternsDir)) {
-      await rebuildAndSignalTree(`Pattern added: ${relative4(patternsDir, filePath)}`);
+      await rebuildAndSignalTree(`Pattern added: ${relative5(patternsDir, filePath)}`);
     } else if (ext === ".md" && filePath.startsWith(patternsDir)) {
       await handleMarkdown(filePath, "add");
     }
   });
   watcher.on("unlink", async (filePath) => {
     if (extname3(filePath) === ".hbs" && filePath.startsWith(patternsDir)) {
-      await rebuildAndSignalTree(`Pattern removed: ${relative4(patternsDir, filePath)}`);
+      await rebuildAndSignalTree(`Pattern removed: ${relative5(patternsDir, filePath)}`);
     } else if (extname3(filePath) === ".md" && filePath.startsWith(patternsDir)) {
       await handleMarkdown(filePath, "unlink");
     }
   });
   watcher.on("unlinkDir", async (dirPath) => {
     if (dirPath.startsWith(patternsDir) && dirPath !== patternsDir) {
-      await rebuildAndSignalTree(`Pattern dir removed: ${relative4(patternsDir, dirPath)}`);
+      await rebuildAndSignalTree(`Pattern dir removed: ${relative5(patternsDir, dirPath)}`);
     }
   });
   return watcher;
@@ -3633,7 +3810,7 @@ function startWatching(ctx) {
 
 // packages/dev-server/src/export-io.ts
 import { readFile as readFile16, writeFile as writeFile4, mkdir as mkdir4 } from "node:fs/promises";
-import { dirname as dirname6, join as join18, relative as relative5, resolve as resolve9 } from "node:path";
+import { dirname as dirname6, join as join19, relative as relative6, resolve as resolve9 } from "node:path";
 
 // packages/dev-server/src/export.ts
 var escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -3783,7 +3960,7 @@ async function planExport(config, cwd) {
       const hbs = await readFile16(entry.hbsPath, "utf-8");
       inputs.push({ id, hbs });
       hbsById.set(id, hbs);
-      relPathById.set(id, relative5(patternsDir, entry.hbsPath).replace(/\.hbs$/, ""));
+      relPathById.set(id, relative6(patternsDir, entry.hbsPath).replace(/\.hbs$/, ""));
       if (entry.jsonPath) {
         try {
           dataJsonById.set(id, await readFile16(entry.jsonPath, "utf-8"));
@@ -3826,20 +4003,20 @@ async function writeExport(families, sink) {
   const files = [];
   for (const family of families) {
     const baseRel = `${family.baseId}.hbs`;
-    const basePath = join18(sink, baseRel);
+    const basePath = join19(sink, baseRel);
     await mkdir4(dirname6(basePath), { recursive: true });
     await writeFile4(basePath, family.baseHbs, "utf-8");
     files.push(baseRel);
     if (family.baseData) {
       const dataRel = `${family.baseId}.json`;
-      await writeFile4(join18(sink, dataRel), JSON.stringify(family.baseData, null, 2) + "\n", "utf-8");
+      await writeFile4(join19(sink, dataRel), JSON.stringify(family.baseData, null, 2) + "\n", "utf-8");
       files.push(dataRel);
     }
     for (const v of family.variants) {
       if (v.token === "") continue;
       const overlayRel = `${family.baseId}~${v.token}.json`;
       const overlay = { modifier: v.modifier, ...v.data ?? {} };
-      await writeFile4(join18(sink, overlayRel), JSON.stringify(overlay, null, 2) + "\n", "utf-8");
+      await writeFile4(join19(sink, overlayRel), JSON.stringify(overlay, null, 2) + "\n", "utf-8");
       files.push(overlayRel);
     }
   }
@@ -3870,8 +4047,8 @@ async function writeThreadedIncluders(threaded, patternsDir, sink) {
     const res = rewriteIncludes(src, map);
     if (res.rewrites === 0) continue;
     rewrites += res.rewrites;
-    const rel = relative5(patternsDir, hbsPath);
-    const outPath = join18(sink, rel);
+    const rel = relative6(patternsDir, hbsPath);
+    const outPath = join19(sink, rel);
     await mkdir4(dirname6(outPath), { recursive: true });
     await writeFile4(outPath, res.hbs, "utf-8");
     files.push(rel);
@@ -3881,6 +4058,36 @@ async function writeThreadedIncluders(threaded, patternsDir, sink) {
 }
 
 // packages/dev-server/src/audit-format.ts
+function scopeMarkdown(scope) {
+  const item = (i) => `- **${i.name}:** ${i.detail}`;
+  return [
+    "## Scope",
+    "",
+    "Covered: static checks on a single render, without browser layout.",
+    "",
+    ...scope.covered.map(item),
+    "",
+    "Not covered:",
+    "",
+    ...scope.notCovered.map(item),
+    "",
+    scope.note
+  ];
+}
+function scopeText(scope) {
+  const item = (i) => `  - ${i.name}: ${i.detail}`;
+  return [
+    "Scope",
+    "",
+    "Covered: static checks on a single render, without browser layout.",
+    ...scope.covered.map(item),
+    "",
+    "Not covered:",
+    ...scope.notCovered.map(item),
+    "",
+    scope.note
+  ];
+}
 function renderAuditMarkdown(r) {
   const lines = [];
   lines.push(`# Diagnostics audit${r.subjectSha ? ` \u2014 ${r.subjectSha}` : ""}`);
@@ -3907,7 +4114,7 @@ function renderAuditMarkdown(r) {
     }
     lines.push("");
   }
-  lines.push(SCOPE_BOUNDARY);
+  lines.push(...scopeMarkdown(r.scope));
   lines.push("");
   return lines.join("\n");
 }
@@ -3935,7 +4142,7 @@ function renderAuditText(r) {
     }
   }
   lines.push("");
-  lines.push(r.scope);
+  lines.push(...scopeText(r.scope));
   lines.push("");
   return lines.join("\n");
 }
@@ -4000,7 +4207,7 @@ async function startDevServer(config, cwd, opts = {}) {
   if (cfg.themeDirs.length) {
     for (const { name, dir } of await discoverThemeFiles(cfg.themeDirs)) {
       try {
-        const css = await compileSassFile(join19(dir, `${name}.theme.scss`));
+        const css = await compileSassFile(join20(dir, `${name}.theme.scss`));
         state.themeCss.set(name, css);
         const slots = config.themes && dir === cfg.themeDirs[0] ? swatchSlots : cfg.packageSwatchSlots;
         state.themeTokens.set(name, await extractThemeTokens(name, css, slots, dir));
@@ -4022,12 +4229,8 @@ async function startDevServer(config, cwd, opts = {}) {
     await surfaceFlattening(dr.discoveryMap, state.compositionRegistry, cwd);
     const allComponentIds = baseComponentIds(dr);
     const styleData = await buildAllStyleData(styleRoots, allComponentIds);
-    state.scssModuleGraph = styleData.scssModuleGraph;
-    state.classOwnerIndex = styleData.classOwnerIndex;
-    state.baseProvenance = styleData.baseProvenance;
-    state.perComponentCss = styleData.componentCssMap;
-    state.baseCss = styleData.baseCss;
-    state.scssGraphDirty = false;
+    applyStyleData(state, styleData);
+    surfaceDocumentBase(styleRoots, styleData.baseOutsideList, cwd);
   }
   const boot = {
     startedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -4068,9 +4271,9 @@ async function startDevServer(config, cwd, opts = {}) {
 
 // packages/core/src/index.ts
 import { build as esbuild } from "esbuild";
-import { existsSync as existsSync4 } from "node:fs";
+import { existsSync as existsSync5 } from "node:fs";
 import { readFile as readFile17, writeFile as writeFile5, unlink, mkdir as mkdir5 } from "node:fs/promises";
-import { join as join20, dirname as dirname7, resolve as resolve10, relative as relative6, isAbsolute } from "node:path";
+import { join as join21, dirname as dirname7, resolve as resolve10, relative as relative7, isAbsolute } from "node:path";
 import { tmpdir as tmpdir2 } from "node:os";
 import { createHash as createHash3 } from "node:crypto";
 import { pathToFileURL as pathToFileURL2 } from "node:url";
@@ -4098,7 +4301,7 @@ async function runAudit(root, configPath, format = "md") {
   const { graph, reaudited, reused, artifactPath } = await runDiagnosticsAudit(config, root);
   const report = formatAudit(graph, format);
   const ext = format === "json" ? "json" : format === "text" ? "txt" : "md";
-  const reportPath = join20(dirname7(artifactPath), `diagnostics-report.${ext}`);
+  const reportPath = join21(dirname7(artifactPath), `diagnostics-report.${ext}`);
   await writeFile5(reportPath, report, "utf-8");
   console.log(report);
   const affected = new Set(graph.occurrences.map((o) => o.component)).size;
@@ -4110,10 +4313,10 @@ async function runAudit(root, configPath, format = "md") {
 }
 function defaultExportDir(root) {
   const key = createHash3("sha1").update(resolve10(root)).digest("hex").slice(0, 16);
-  return join20(tmpdir2(), "pattern-dump", key, "export");
+  return join21(tmpdir2(), "pattern-dump", key, "export");
 }
 function assertOutsideRoot(outDir, root) {
-  const rel = relative6(resolve10(root), resolve10(outDir));
+  const rel = relative7(resolve10(root), resolve10(outDir));
   const inside = rel === "" || !rel.startsWith("..") && !isAbsolute(rel);
   if (inside) {
     throw new Error(
@@ -4184,23 +4387,24 @@ async function runExport(root, configPath, outDir) {
 }
 async function loadConfig(root, configPath) {
   if (configPath) {
-    if (!existsSync4(configPath)) {
-      throw new Error(`--config file not found: ${configPath}`);
+    if (!existsSync5(configPath)) {
+      throw new ConfigError(`--config file not found: ${configPath}`);
     }
-    return configPath.endsWith(".json") ? JSON.parse(await readFile17(configPath, "utf-8")) : loadTsConfig(configPath);
+    return validateConfig(await readConfigFile(configPath), configPath);
   }
-  const tsPath = join20(root, "pattern-dump.config.ts");
-  const jsonPath = join20(root, "pattern-dump.config.json");
-  if (existsSync4(tsPath)) return loadTsConfig(tsPath);
-  if (existsSync4(jsonPath)) {
-    return JSON.parse(await readFile17(jsonPath, "utf-8"));
+  for (const name of ["pattern-dump.config.ts", "pattern-dump.config.json"]) {
+    const path = join21(root, name);
+    if (existsSync5(path)) return validateConfig(await readConfigFile(path), name);
   }
-  throw new Error(
+  throw new ConfigError(
     `No pattern-dump.config.ts or pattern-dump.config.json found in ${root} (and no --config given)`
   );
 }
+async function readConfigFile(path) {
+  return path.endsWith(".json") ? JSON.parse(await readFile17(path, "utf-8")) : loadTsConfig(path);
+}
 async function loadTsConfig(tsPath) {
-  const tmp = join20(tmpdir2(), `pd-config-${Date.now()}.mjs`);
+  const tmp = join21(tmpdir2(), `pd-config-${Date.now()}.mjs`);
   try {
     await esbuild({
       entryPoints: [tsPath],
@@ -4405,14 +4609,14 @@ var USAGE = `Usage: pd <command> [options]
   help [command]   Show this help`;
 
 // packages/cli/src/init/run.ts
-import { existsSync as existsSync5 } from "node:fs";
+import { existsSync as existsSync6 } from "node:fs";
 import { readFile as readFile19 } from "node:fs/promises";
-import { basename as basename6, dirname as dirname9, join as join22, relative as relative8, resolve as resolve12 } from "node:path";
+import { basename as basename6, dirname as dirname9, join as join23, relative as relative9, resolve as resolve12 } from "node:path";
 
 // packages/cli/package.json
 var package_default = {
   name: "@pattern-dump/cli",
-  version: "0.1.0-alpha.0",
+  version: "0.1.0-alpha.2",
   private: true,
   description: "The pd command and the published pattern-dump package.",
   type: "module",
@@ -4448,14 +4652,14 @@ var PD_VERSION = package_default.version;
 
 // packages/cli/src/init/files.ts
 import { mkdir as mkdir6, readdir as readdir5, readFile as readFile18, writeFile as writeFile6 } from "node:fs/promises";
-import { dirname as dirname8, join as join21, relative as relative7, sep as sep2 } from "node:path";
+import { dirname as dirname8, join as join22, relative as relative8, sep as sep2 } from "node:path";
 async function readTemplateDir(dir) {
   const out = [];
   async function walk(current) {
     for (const entry of await readdir5(current, { withFileTypes: true })) {
-      const full = join21(current, entry.name);
+      const full = join22(current, entry.name);
       if (entry.isDirectory()) await walk(full);
-      else out.push({ path: relative7(dir, full).split(sep2).join("/"), content: await readFile18(full, "utf8") });
+      else out.push({ path: relative8(dir, full).split(sep2).join("/"), content: await readFile18(full, "utf8") });
     }
   }
   await walk(dir);
@@ -4463,20 +4667,20 @@ async function readTemplateDir(dir) {
 }
 async function readTemplates(templatesDir) {
   const [base2, examples] = await Promise.all([
-    readTemplateDir(join21(templatesDir, "base")),
-    readTemplateDir(join21(templatesDir, "examples"))
+    readTemplateDir(join22(templatesDir, "base")),
+    readTemplateDir(join22(templatesDir, "examples"))
   ]);
   return { base: base2, examples };
 }
 async function applyPlan(target, plan) {
   await mkdir6(target, { recursive: true });
   for (const file of plan.writes) {
-    const abs = join21(target, file.path);
+    const abs = join22(target, file.path);
     await mkdir6(dirname8(abs), { recursive: true });
     await writeFile6(abs, file.content, { flag: "wx" });
   }
-  await writeFile6(join21(target, "package.json"), plan.packageJson.content);
-  for (const dir of ["assets", "src/patterns"]) await mkdir6(join21(target, dir), { recursive: true });
+  await writeFile6(join22(target, "package.json"), plan.packageJson.content);
+  for (const dir of ["assets", "src/patterns"]) await mkdir6(join22(target, dir), { recursive: true });
 }
 
 // packages/cli/src/init/plan.ts
@@ -4555,12 +4759,12 @@ function mergePackageJson(current, answers, packageName) {
 function dependencySpec(pdSource, cwd) {
   if (pdSource === void 0) return `^${PD_VERSION}`;
   const asPath = resolve12(cwd, pdSource);
-  if (existsSync5(asPath)) return `file:${asPath}`;
+  if (existsSync6(asPath)) return `file:${asPath}`;
   return pdSource.startsWith(`${PD_PACKAGE_NAME}@`) ? pdSource.slice(PD_PACKAGE_NAME.length + 1) : pdSource;
 }
 async function insideGitRepo(target, io) {
   let dir = target;
-  while (!existsSync5(dir) && dirname9(dir) !== dir) dir = dirname9(dir);
+  while (!existsSync6(dir) && dirname9(dir) !== dir) dir = dirname9(dir);
   return await io.run("git", ["rev-parse", "--is-inside-work-tree"], dir) === 0;
 }
 async function runInit(cmd, io) {
@@ -4583,9 +4787,9 @@ async function runInit(cmd, io) {
   } else {
     dependency = dependencySpec(void 0, io.cwd);
   }
-  const pkgPath = join22(target, "package.json");
+  const pkgPath = join23(target, "package.json");
   let packageJson = null;
-  if (existsSync5(pkgPath)) {
+  if (existsSync6(pkgPath)) {
     try {
       packageJson = JSON.parse(await readFile19(pkgPath, "utf8"));
     } catch (e) {
@@ -4603,14 +4807,14 @@ async function runInit(cmd, io) {
   const install = cmd.install ?? (prompt ? await io.confirm("Run npm install", true) : true);
   const answers = { name, brand, examples, dependency };
   const templates = await readTemplates(io.templatesDir);
-  const result = planInit(templates, answers, { packageJson, exists: (p) => existsSync5(join22(target, p)) }, PD_PACKAGE_NAME);
+  const result = planInit(templates, answers, { packageJson, exists: (p) => existsSync6(join23(target, p)) }, PD_PACKAGE_NAME);
   if (!result.ok) {
     io.log(`\u2717 ${result.reason}`);
     return 1;
   }
   const { plan } = result;
   await applyPlan(target, plan);
-  const where = relative8(io.cwd, target) || ".";
+  const where = relative9(io.cwd, target) || ".";
   io.log(`\u2713 ${plan.writes.length} files written to ${where}`);
   io.log(`\u2713 package.json ${plan.packageJson.created ? "created" : "updated"} \u2014 ${PD_PACKAGE_NAME} ${answers.dependency}`);
   for (const note of plan.packageJson.notes) io.log(`  \xB7 ${note}`);
@@ -4643,8 +4847,8 @@ async function runInit(cmd, io) {
 }
 
 // packages/cli/src/init/local-build.ts
-import { existsSync as existsSync6, statSync } from "node:fs";
-import { join as join23 } from "node:path";
+import { existsSync as existsSync7, statSync } from "node:fs";
+import { join as join24 } from "node:path";
 import { fileURLToPath as fileURLToPath6 } from "node:url";
 var BUILT = [
   "packages/cli/dist/index.js",
@@ -4662,15 +4866,18 @@ var mtime = (path) => {
 };
 function detectLocalBuild(moduleUrl, packageName, version) {
   const repo = fileURLToPath6(new URL("../../../", moduleUrl)).replace(/[\\/]$/, "");
-  if (!existsSync6(join23(repo, "packages/cli/src/distribution.ts"))) return null;
-  const tarball = join23(repo, ".pd-pack", `${packageName}-${version}.tgz`);
-  if (!existsSync6(tarball)) return { repo, tarball: null, stale: false };
-  const newestBuild = Math.max(...BUILT.map((p) => mtime(join23(repo, p))));
+  if (!existsSync7(join24(repo, "packages/cli/src/distribution.ts"))) return null;
+  const tarball = join24(repo, ".pd-pack", `${packageName}-${version}.tgz`);
+  if (!existsSync7(tarball)) return { repo, tarball: null, stale: false };
+  const newestBuild = Math.max(...BUILT.map((p) => mtime(join24(repo, p))));
   return { repo, tarball, stale: newestBuild > mtime(tarball) };
 }
 
 // packages/cli/src/index.ts
 var command = parseCommand(process.argv.slice(2), process.cwd());
+function describeError(e) {
+  return e instanceof Error && e.name === "ConfigError" ? e.message : e;
+}
 switch (command.kind) {
   case "init": {
     const rl = process.stdin.isTTY ? createInterface({ input: process.stdin, output: process.stdout }) : null;
@@ -4713,14 +4920,14 @@ switch (command.kind) {
       if (typeof e === "object" && e !== null && e.code === "EADDRINUSE" && e instanceof Error) {
         console.error(`[pd] ${e.message}`);
       } else {
-        console.error("[pd] Error:", e);
+        console.error("[pd] Error:", describeError(e));
       }
       process.exit(1);
     });
     break;
   case "audit":
     runAudit(command.root, command.configPath, command.format).then(() => process.stdout.write("", () => process.exit(0))).catch((e) => {
-      console.error("[pd] Error:", e);
+      console.error("[pd] Error:", describeError(e));
       process.exit(1);
     });
     break;
@@ -4739,7 +4946,7 @@ switch (command.kind) {
     runExport(command.root, command.configPath, command.out).then(() => {
       process.exitCode = 0;
     }).catch((e) => {
-      console.error("[pd] Error:", e);
+      console.error("[pd] Error:", describeError(e));
       process.exitCode = 1;
     });
     break;