diff --git a/.dockerignore b/.dockerignore
index ac58817..2c56ca0 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -8,16 +8,23 @@
 
 # Node artifacts
 node_modules
+**/node_modules
 npm-debug.log
 yarn-error.log
 
 # Build artifacts
 dist
+**/dist
+**/dist-*
+**/npm-dist
 build
 *.tgz
 cli/src/server/playground-form-generated.ts
 cli/src/server/samples/generated.ts
 .facet
+**/.facet
+.gavel
+**/.gavel
 .task
 *-cache/
 compiled*
@@ -57,6 +64,8 @@ data/
 out.*
 
 # Temporary files
+.tmp
+**/.tmp
 tmp
 temp
 *.tmp
diff --git a/.gitignore b/.gitignore
index c3b8d6c..32fa720 100644
--- a/.gitignore
+++ b/.gitignore
@@ -179,3 +179,6 @@ cli/src/server/samples/generated.ts
 .grite/
 .playwright-cli/
 cli/src/server/playground-form-generated.ts
+cli/dist-playground/
+examples/kitchen-sink/
+cli/npm-dist/
diff --git a/Dockerfile b/Dockerfile
index 73219d4..5e48fd5 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -132,16 +132,14 @@ LABEL org.opencontainers.image.title="Facet" \
       org.opencontainers.image.vendor="Flanksource" \
       org.opencontainers.image.version="${VERSION}"
 
-# Warm the pnpm store by rendering a sample that imports @flanksource/facet,
-# which also verifies the tarball above is complete (a dist-less package fails
-# this build). HTML (not PDF) so the build never launches Chromium: buildkit
-# RUN steps lack the dbus/userns environment a browser needs, while the pnpm
-# store warming only requires the vite build. FACET_PACKAGE_PATH is scoped to
-# this step because the image's own version may not be published to the
-# registry at build time.
-RUN cd /app/examples && \
-    FACET_PACKAGE_PATH=/app/facet.tgz facet html FacetReport.tsx --data simple-data.json --output /tmp/warmup.html && \
-    rm -f /tmp/warmup.html
+# Populate the immutable shared module entry from the exact-version tarball and
+# verify that the package can render. The cache rejects a tarball whose Facet
+# version differs from the CLI version.
+WORKDIR /app/examples
+RUN mkdir -p /app/.tmp
+RUN FACET_PACKAGE_PATH=/app/facet.tgz facet --skip-modules html FacetReport.tsx --data simple-data.json --output /app/.tmp/warmup.html
+RUN rm -f /app/.tmp/warmup.html
+WORKDIR /app
 
 HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
     CMD curl -f http://localhost:3010/healthz || exit 1
diff --git a/Makefile b/Makefile
index de9cfc7..8ec40d8 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: build install test serve
+.PHONY: build install lint test serve
 
 build:
 	task build
@@ -6,6 +6,8 @@ build:
 install:
 	task install
 
+lint:
+	task lint
 
 test:
 	task test
diff --git a/README.md b/README.md
index 523a7e0..cc504d6 100644
--- a/README.md
+++ b/README.md
@@ -23,10 +23,11 @@ npm install -g @flanksource/facet-cli
 # or: pnpm add -g @flanksource/facet-cli
 ```
 
-This installs the `facet` command, which runs on your Node.js (>=18). Rendering
-additionally needs `pnpm` on PATH and, for PDF output, a system Chrome/Chromium —
-run `facet doctor` to check. For a Node-free environment, use the standalone
-binary below.
+This installs the `facet` command, which runs on your Node.js (>=20.19). Rendering
+uses `pnpm` to populate the shared module cache and reconcile project-specific
+dependencies. PDF output also needs a system Chrome/Chromium. Run `facet doctor`
+to check the environment. For a Node-free environment, use the standalone binary
+below.
 
 ### Option 2: Standalone binary
 
@@ -255,7 +256,7 @@ Keep the fixture, iteration count, worker settings, and environment unchanged.
 
 ### Build Process
 
-**CLI mode** — `facet html` and `facet pdf` run the full pipeline locally:
+**CLI mode** — without a Facet server URL, `facet html` and `facet pdf` run the full pipeline locally:
 
 1. **Setup `.facet/`** — Creates an isolated build directory with symlinks to your sources
 2. **Generate configs** — Auto-generates `vite.config.ts`, `tsconfig.json`, `entry.tsx`
@@ -267,6 +268,8 @@ Keep the fixture, iteration count, worker settings, and environment unchanged.
 
 **Server mode** — `facet serve` wraps the same pipeline behind an HTTP API with a worker pool, LRU cache, optional S3 upload, and an interactive playground at `localhost:3010`.
 
+When `FACET_URL` or `--facet-url` is set, the CLI loads and validates data locally, uploads the template project to `/render`, downloads the result, and writes it to the normal local output path. The upload excludes Git metadata, dependencies, Facet caches, temporary files, and build output.
+
 
 
 ## Page Component API
@@ -401,6 +404,43 @@ dropdown to try it.
 
 ## CLI Commands
 
+### Remote rendering
+
+Set `FACET_URL` or pass the global `--facet-url` option to submit `html` and `pdf` jobs to a Facet server. The explicit flag takes precedence over the environment variable.
+
+```bash
+FACET_URL=https://facet.example.com facet pdf MyDatasheet.tsx -d data.json -o report.pdf
+facet --facet-url https://facet.example.com html MyDatasheet.tsx -o ./dist/
+```
+
+Remote mode requires `tar` locally but does not require local Chromium or pnpm. Data loaders and schema validation still run locally. The server controls sandboxing, module mode, and cache lifecycle, so `--sandbox`, `--skip-modules`, and `--clear-cache` fail when combined with a Facet URL. A server or network error stops the command without falling back to local rendering.
+
+### Shared modules
+
+`--skip-modules` is a global option and may appear before or after any subcommand:
+
+```bash
+facet --skip-modules html MyDatasheet.tsx -d data.json
+facet pdf MyDatasheet.tsx --skip-modules -o out.pdf
+facet serve --skip-modules --templates-dir ./templates
+```
+
+The first use installs a Facet-only module set pinned to the CLI version under
+`${FACET_CACHE_DIR:-~/.facet/cache}/modules/<facet-version>/<platform>-<arch>-node<abi>`.
+Later invocations link `.facet/node_modules` directly to that immutable entry, so
+they do not read consumer or nested `package.json` files, package-manager pins,
+lockfiles, overrides, `.npmrc`, or directory-based `FACET_PACKAGE_PATH` overrides.
+Templates that import additional packages must run without `--skip-modules`.
+Server requests containing `dependencies` receive HTTP 400 while the server uses
+this mode. `facet doctor --skip-modules --fix` verifies or rebuilds the exact
+shared entry selected by the current Facet and Node versions.
+
+Without `--skip-modules`, a new `.facet` install is seeded by cloning the shared
+`node_modules` directory on APFS, then reconciled against the generated project
+manifest with `pnpm install`. Facet logs and uses a fresh install when cloning is
+unavailable, including on non-macOS filesystems. `--clear-cache` clears only the
+project `.facet` scaffold; it does not remove the versioned shared module cache.
+
 ### `facet html <template>`
 
 Generate HTML from a React template.
@@ -419,6 +459,8 @@ Options:
   -v, --verbose                Enable verbose logging
 ```
 
+Facet automatically starts render-related child processes at below-normal scheduling priority so Vite, pnpm, data loaders, archive extraction, and Chromium yield resources to interactive OS workloads. It uses background task policy with niceness `+10` on macOS, niceness `+10` on Linux, and below-normal process priority on Windows.
+
 **Example:**
 ```bash
 facet html MyDatasheet.tsx -o ./dist --verbose
@@ -484,6 +526,9 @@ facet serve --api-key my-secret-key
 
 # With S3 upload
 facet serve --s3-endpoint https://s3.amazonaws.com --s3-bucket my-bucket
+
+# Reuse the immutable Facet-only modules for every request
+facet serve --skip-modules --templates-dir ./templates
 ```
 
 The playground is available at `http://localhost:3010/` with a Monaco editor, live preview, and render logs. Use the **Example** dropdown to load a starting point:
@@ -627,6 +672,13 @@ pnpm run storybook
 pnpm run build:cli
 ```
 
+To build the npm CLI package from the current checkout and replace any existing
+global `facet` command managed through npm's prefix:
+
+```bash
+task install
+```
+
 ### Publishing
 
 ```bash
diff --git a/Taskfile.yml b/Taskfile.yml
index 29aff98..00b936c 100644
--- a/Taskfile.yml
+++ b/Taskfile.yml
@@ -10,6 +10,22 @@ vars:
   # Directories
   DIST_DIR: ./dist
   PDF_OUTPUT_DIR: ../../../static/pdfs
+  CLI_NPM_PACKAGE_DIR: "{{.ROOT_DIR}}/.tmp/facet-cli"
+  CLI_VERSION:
+    sh: node -p "require('./cli/package.json').version"
+  BINARY_EXT: '{{if eq OS "windows"}}.exe{{end}}'
+  FACET_BINARY: "{{.DIST_DIR}}/facet{{.BINARY_EXT}}"
+
+  # Lab deployment
+  APP_NAME: facet
+  CHART_DIR: chart
+  LAB_CONTEXT: k3s
+  LAB_NAMESPACE: facet
+  LAB_REGISTRY: docker.c0a801af.sslip.io
+  LAB_COMMIT:
+    sh: git rev-parse --short=8 HEAD
+  LAB_VERSION:
+    sh: printf '%s-%s\n' "$(git describe --tags --always --dirty --abbrev=8)" "$(date -u +%Y%m%d%H%M%S)" | tr '/' '-'
 
   # Source patterns for watching and dependency tracking
   SRC_PATTERN: src/**/*.{tsx,ts,jsx,js,css,mdx}
@@ -29,18 +45,63 @@ tasks:
 
   build:
     sources:
-      - src/**/*.{tsx,ts,jsx,js,css,mdx}
-      - cli/src/**/*.{tsx,ts,jsx,js,css,mdx}
+      - Taskfile.yml
+      - package.json
+      - pnpm-lock.yaml
+      - openapi.yaml
+      - postcss.config.js
+      - tailwind.config.js
+      - tsconfig.json
+      - tsconfig.lib.json
+      - vite.lib.config.ts
+      - vite.playground.config.ts
+      - src/**/*
+      - cli/package.json
+      - cli/pnpm-lock.yaml
+      - cli/scripts/**/*
+      - cli/src/**/*
+      - cli/tsconfig.json
+      - cli/tsdown.config.ts
+      - cli/tsdown.sea.config.ts
     generates:
-      - dist/facet
+      - "{{.FACET_BINARY}}"
     cmds:
       - pnpm run build
 
+  build:npm-cli:
+    desc: "Build the local @flanksource/facet-cli npm package"
+    cmds:
+      - pnpm --dir cli run build:bundle
+      - node cli/scripts/pack-npm-cli.cjs "{{.CLI_VERSION}}" "{{.CLI_NPM_PACKAGE_DIR}}"
+
   install:
+    desc: "Build and globally install the local @flanksource/facet-cli package, replacing the active facet executable"
     deps:
-      - build
+      - build:npm-cli
+    cmds:
+      - npm install --global --force --install-links "{{.CLI_NPM_PACKAGE_DIR}}"
+      - ln -sf "$(npm root --global)/@flanksource/facet-cli/facet.cjs" "$(which facet)"
+
+  install:symlink:
+    desc: "Globally link the local Facet CLI and component library to this checkout"
+    deps:
+      - build:npm-cli
+    cmds:
+      - task: install:symlink:library
+      - task: install:symlink:cli
+      - ln -sf "$(npm root --global)/@flanksource/facet-cli/facet.cjs" "$(which facet)"
+
+  install:symlink:library:
+    internal: true
+    dir: "{{.ROOT_DIR}}"
     cmds:
-      - cp dist/facet /usr/local/bin
+      - npm link
+
+  install:symlink:cli:
+    internal: true
+    dir: "{{.CLI_NPM_PACKAGE_DIR}}"
+    cmds:
+      - npm link
 
   storybook:
     desc: "Run Storybook development server on port 6006"
@@ -57,6 +118,12 @@ tasks:
       - test:unit
       # - test:storybook
 
+  lint:
+    desc: "Typecheck the CLI"
+    dir: cli
+    cmds:
+      - pnpm run lint
+
   gen-version:
     desc: "Generate cli/src/version-generated.ts"
     dir: cli
@@ -85,7 +152,45 @@ tasks:
     deps:
       - build
     cmds:
-      - ./dist/facet serve --templates-dir examples
+      - "{{.FACET_BINARY}} serve --templates-dir examples"
+
+  image:lab:
+    desc: "Build and push the linux/amd64 Facet image to the lab registry"
+    cmds:
+      - >-
+        docker build
+        --platform linux/amd64
+        --build-arg VERSION={{.LAB_VERSION}}
+        --build-arg GIT_COMMIT={{.LAB_COMMIT}}
+        --tag {{.LAB_REGISTRY}}/{{.APP_NAME}}:{{.LAB_VERSION}}
+        .
+      - docker push {{.LAB_REGISTRY}}/{{.APP_NAME}}:{{.LAB_VERSION}}
+
+  deploy:lab:
+    desc: "Build, push, and deploy Facet to the lab"
+    vars:
+      DEPLOY_VERSION: "{{.LAB_VERSION}}"
+    cmds:
+      - task: image:lab
+        vars:
+          LAB_VERSION: "{{.DEPLOY_VERSION}}"
+      - >-
+        helm upgrade --install {{.APP_NAME}} {{.CHART_DIR}}
+        --kube-context {{.LAB_CONTEXT}}
+        --namespace {{.LAB_NAMESPACE}}
+        --create-namespace
+        --values {{.CHART_DIR}}/values.lab.yaml
+        --set-string image.repository={{.LAB_REGISTRY}}/{{.APP_NAME}}
+        --set-string image.tag={{.DEPLOY_VERSION}}
+        --set-string image.pullPolicy=Always
+        --rollback-on-failure
+        --wait
+        --timeout 10m
+      - >-
+        kubectl --context {{.LAB_CONTEXT}}
+        rollout status deployment/{{.APP_NAME}}
+        --namespace {{.LAB_NAMESPACE}}
+        --timeout 5m
 
   default:
     desc: "Show available tasks"
diff --git a/chart/templates/ingress.yaml b/chart/templates/ingress.yaml
new file mode 100644
index 0000000..edc0a22
--- /dev/null
+++ b/chart/templates/ingress.yaml
@@ -0,0 +1,35 @@
+{{- if .Values.ingress.enabled }}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: {{ include "facet.fullname" . }}
+  labels:
+    {{- include "facet.labels" . | nindent 4 }}
+  {{- with .Values.ingress.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  {{- with .Values.ingress.className }}
+  ingressClassName: {{ . }}
+  {{- end }}
+  {{- with .Values.ingress.tls }}
+  tls:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+  rules:
+    {{- range .Values.ingress.hosts }}
+    - host: {{ .host | quote }}
+      http:
+        paths:
+          {{- range .paths }}
+          - path: {{ .path }}
+            pathType: {{ .pathType }}
+            backend:
+              service:
+                name: {{ include "facet.fullname" $ }}
+                port:
+                  number: {{ $.Values.service.port }}
+          {{- end }}
+    {{- end }}
+{{- end }}
diff --git a/chart/values.lab.yaml b/chart/values.lab.yaml
new file mode 100644
index 0000000..70ecb2e
--- /dev/null
+++ b/chart/values.lab.yaml
@@ -0,0 +1,20 @@
+ingress:
+  enabled: true
+  className: traefik
+  annotations:
+    cert-manager.io/cluster-issuer: lab-ca
+    traefik.ingress.kubernetes.io/router.entrypoints: websecure
+  hosts:
+    - host: facet.c0a801af.sslip.io
+      paths:
+        - path: /
+          pathType: Prefix
+    - host: facet.lab
+      paths:
+        - path: /
+          pathType: Prefix
+  tls:
+    - secretName: facet-tls
+      hosts:
+        - facet.c0a801af.sslip.io
+        - facet.lab
diff --git a/chart/values.yaml b/chart/values.yaml
index 3b50ac5..37d84a6 100644
--- a/chart/values.yaml
+++ b/chart/values.yaml
@@ -12,6 +12,17 @@ service:
   type: ClusterIP
   port: 3010
 
+ingress:
+  enabled: false
+  className: ""
+  annotations: {}
+  hosts:
+    - host: facet.local
+      paths:
+        - path: /
+          pathType: Prefix
+  tls: []
+
 resources: {}
 
 nodeSelector: {}
diff --git a/cli/npm/facet-cli/README.md b/cli/npm/facet-cli/README.md
index 19f001b..ca70120 100644
--- a/cli/npm/facet-cli/README.md
+++ b/cli/npm/facet-cli/README.md
@@ -7,10 +7,18 @@ templates.
 npm install -g @flanksource/facet-cli
 ```
 
-This installs the `facet` command, which runs on your Node.js (>=18). Rendering
-additionally needs `pnpm` on PATH (to install template dependencies) and, for
-PDF output, a system Chrome/Chromium. Run `facet doctor` to check your
-environment.
+This installs the `facet` command, which runs on your Node.js (>=20.19). Facet
+uses `pnpm` to populate its shared module cache and install template-specific
+dependencies; PDF output also needs a system Chrome/Chromium. Run `facet doctor`
+to check your environment.
+
+Pass the global `--skip-modules` option before or after a subcommand to ignore all
+consumer `package.json` files and reuse the Facet-only module set pinned to this
+CLI version. The first use installs the shared set; subsequent renders do not
+reinstall or mark it stale. Templates with additional package imports must run
+without the flag.
+
+Set `FACET_URL` or pass `--facet-url <url>` to upload local template projects for remote `html` and `pdf` rendering. The server result is downloaded to the normal local output path, so local Chromium and pnpm are not required in remote mode. The explicit flag overrides `FACET_URL`.
 
 For an environment without Node.js, download a standalone binary from
 [GitHub Releases](https://github.com/flanksource/facet/releases).
diff --git a/cli/npm/facet-cli/package.json b/cli/npm/facet-cli/package.json
index 065df4b..76a9ad2 100644
--- a/cli/npm/facet-cli/package.json
+++ b/cli/npm/facet-cli/package.json
@@ -24,6 +24,6 @@
   },
   "homepage": "https://github.com/flanksource/facet#readme",
   "engines": {
-    "node": ">=18"
+    "node": ">=20.19"
   }
 }
diff --git a/cli/package.json b/cli/package.json
index 116c183..1402cce 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "gen-version": "node scripts/gen-version.cjs",
-    "gen-assets": "pnpm run gen-version && node scripts/gen-samples.cjs && pnpm --dir .. run build:playground",
+    "gen-assets": "pnpm --dir .. run build:css && pnpm run gen-version && node scripts/gen-samples.cjs && pnpm --dir .. run build:playground",
     "prebuild:lib": "pnpm run gen-assets",
     "build:lib": "tsdown",
     "prebuild:bundle": "pnpm run gen-assets",
diff --git a/cli/scripts/benchmark-render.mjs b/cli/scripts/benchmark-render.mjs
index 2df8136..5e3afd0 100644
--- a/cli/scripts/benchmark-render.mjs
+++ b/cli/scripts/benchmark-render.mjs
@@ -38,13 +38,19 @@ function run(format, cold) {
     child.on('close', (code) => {
       clearInterval(sampler);
       if (code !== 0) return reject(new Error(`${format} failed:\n${stderr || stdout}`));
-      const profileLine = stdout.split('\n').findLast((line) => line.startsWith('[FACET_PROFILE]'));
+      const profiles = `${stdout}\n${stderr}`.split('\n')
+        .map((line) => {
+          const start = line.indexOf('[FACET_PROFILE] ');
+          return start < 0 ? undefined : line.slice(start + '[FACET_PROFILE] '.length);
+        })
+        .filter(Boolean)
+        .map((payload) => JSON.parse(payload));
       resolveRun({
         format,
         mode: cold ? 'cold' : 'warm',
         durationMs: Number((performance.now() - started).toFixed(1)),
         processTreePeakRssMb: Number((peakRss / 1024 / 1024).toFixed(1)),
-        profile: profileLine ? JSON.parse(profileLine.slice('[FACET_PROFILE] '.length)) : undefined,
+        profiles,
       });
     });
   });
diff --git a/cli/scripts/build-sea.cjs b/cli/scripts/build-sea.cjs
index a2d3dd9..b4f4a7e 100644
--- a/cli/scripts/build-sea.cjs
+++ b/cli/scripts/build-sea.cjs
@@ -22,8 +22,9 @@ const seaConfig = {
   disableExperimentalSEAWarning: true,
   assets: {
     'package.json': join(repoRoot, 'package.json'),
-    'styles.css': join(repoRoot, 'src', 'styles.css'),
+    'styles.css': join(repoRoot, 'dist', 'styles.css'),
     'openapi.yaml': join(repoRoot, 'openapi.yaml'),
+    'mermaid.min.js': join(repoRoot, 'node_modules', 'mermaid', 'dist', 'mermaid.min.js'),
   },
 };
 const seaConfigPath = join(distSea, 'sea-config.json');
diff --git a/cli/scripts/pack-npm-cli.cjs b/cli/scripts/pack-npm-cli.cjs
index 1c4a412..f4b18f7 100644
--- a/cli/scripts/pack-npm-cli.cjs
+++ b/cli/scripts/pack-npm-cli.cjs
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // Assemble the publishable @flanksource/facet-cli npm package: the single-file
 // CLI bundle (run by the user's Node) plus the runtime assets it reads at render
-// time (the @flanksource/facet manifest, styles.css, openapi.yaml).
+// time (the @flanksource/facet manifest, styles.css, openapi.yaml, and Mermaid).
 'use strict';
 
 const fs = require('node:fs');
@@ -15,8 +15,9 @@ function buildPackage({ version, bundlePath, repoRoot, templateDir, outDir }) {
 
   // Runtime assets resolved by assetPath() at render time.
   fs.copyFileSync(path.join(repoRoot, 'package.json'), path.join(outDir, 'assets', 'package.json'));
-  fs.copyFileSync(path.join(repoRoot, 'src', 'styles.css'), path.join(outDir, 'assets', 'styles.css'));
+  fs.copyFileSync(path.join(repoRoot, 'dist', 'styles.css'), path.join(outDir, 'assets', 'styles.css'));
   fs.copyFileSync(path.join(repoRoot, 'openapi.yaml'), path.join(outDir, 'assets', 'openapi.yaml'));
+  fs.copyFileSync(path.join(repoRoot, 'node_modules', 'mermaid', 'dist', 'mermaid.min.js'), path.join(outDir, 'assets', 'mermaid.min.js'));
 
   fs.copyFileSync(path.join(templateDir, 'README.md'), path.join(outDir, 'README.md'));
   const pkg = JSON.parse(fs.readFileSync(path.join(templateDir, 'package.json'), 'utf8'));
diff --git a/cli/scripts/pack-npm-cli.test.ts b/cli/scripts/pack-npm-cli.test.ts
index d429487..ff01910 100644
--- a/cli/scripts/pack-npm-cli.test.ts
+++ b/cli/scripts/pack-npm-cli.test.ts
@@ -16,11 +16,13 @@ describe('buildPackage', () => {
     const repoRoot = join(root, 'repo');
     const templateDir = join(root, 'tmpl');
     const outDir = join(root, 'out');
-    mkdirSync(join(repoRoot, 'src'), { recursive: true });
+    mkdirSync(join(repoRoot, 'dist'), { recursive: true });
+    mkdirSync(join(repoRoot, 'node_modules', 'mermaid', 'dist'), { recursive: true });
     mkdirSync(templateDir, { recursive: true });
     writeFileSync(join(repoRoot, 'package.json'), JSON.stringify({ name: '@flanksource/facet', version: '1.0.0' }));
-    writeFileSync(join(repoRoot, 'src', 'styles.css'), '.x{}');
+    writeFileSync(join(repoRoot, 'dist', 'styles.css'), '.compiled{}');
     writeFileSync(join(repoRoot, 'openapi.yaml'), 'openapi: 3.0.0');
+    writeFileSync(join(repoRoot, 'node_modules', 'mermaid', 'dist', 'mermaid.min.js'), 'window.mermaid={}');
     const bundlePath = join(root, 'cli.cjs');
     writeFileSync(bundlePath, '#!/usr/bin/env node\nconsole.log(1)');
     writeFileSync(join(templateDir, 'package.json'), JSON.stringify({ name: '@flanksource/facet-cli', version: '0.0.0', bin: { facet: 'facet.cjs' } }));
@@ -30,7 +32,9 @@ describe('buildPackage', () => {
 
     expect(existsSync(join(outDir, 'facet.cjs'))).toBe(true);
     expect(existsSync(join(outDir, 'assets', 'styles.css'))).toBe(true);
+    expect(readFileSync(join(outDir, 'assets', 'styles.css'), 'utf8')).toBe('.compiled{}');
     expect(existsSync(join(outDir, 'assets', 'openapi.yaml'))).toBe(true);
+    expect(readFileSync(join(outDir, 'assets', 'mermaid.min.js'), 'utf8')).toBe('window.mermaid={}');
     expect(existsSync(join(outDir, 'README.md'))).toBe(true);
 
     const pkg = JSON.parse(readFileSync(join(outDir, 'package.json'), 'utf8'));
diff --git a/cli/scripts/task-install.test.ts b/cli/scripts/task-install.test.ts
new file mode 100644
index 0000000..31e893e
--- /dev/null
+++ b/cli/scripts/task-install.test.ts
@@ -0,0 +1,149 @@
+import {
+  chmodSync,
+  lstatSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  realpathSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs';
+import { delimiter, dirname, join, resolve } from 'node:path';
+import { execFileSync } from 'node:child_process';
+import { describe, expect, it } from 'vitest';
+import { load } from 'js-yaml';
+
+interface TaskDefinition {
+  dir?: string;
+  sources?: string[];
+  deps?: string[];
+  internal?: boolean;
+  cmds?: Array<string | { task: string }>;
+}
+
+interface Taskfile {
+  tasks: Record<string, TaskDefinition>;
+}
+
+const repoRoot = resolve(import.meta.dirname, '../..');
+const taskfile = load(readFileSync(resolve(repoRoot, 'Taskfile.yml'), 'utf8')) as Taskfile;
+
+describe('task install', () => {
+  it('installs the locally built npm package globally and replaces an existing binary', () => {
+    expect(taskfile.tasks.install.cmds).toContain(
+      'npm install --global --force --install-links "{{.CLI_NPM_PACKAGE_DIR}}"',
+    );
+    expect(taskfile.tasks.install.cmds).toContain(
+      'ln -sf "$(npm root --global)/@flanksource/facet-cli/facet.cjs" "$(which facet)"',
+    );
+    expect(taskfile.tasks.install.cmds?.join('\n')).not.toContain('/usr/local/bin');
+  });
+
+  it('links the CLI package and component library to this checkout', () => {
+    expect(taskfile.tasks['install:symlink']).toEqual(expect.objectContaining({
+      deps: ['build:npm-cli'],
+      cmds: [
+        { task: 'install:symlink:library' },
+        { task: 'install:symlink:cli' },
+        'ln -sf "$(npm root --global)/@flanksource/facet-cli/facet.cjs" "$(which facet)"',
+      ],
+    }));
+    expect(taskfile.tasks['install:symlink:library']).toEqual({
+      internal: true,
+      dir: '{{.ROOT_DIR}}',
+      cmds: ['npm link'],
+    });
+    expect(taskfile.tasks['install:symlink:cli']).toEqual({
+      internal: true,
+      dir: '{{.CLI_NPM_PACKAGE_DIR}}',
+      cmds: ['npm link'],
+    });
+  });
+
+  it('rebuilds when CLI packaging inputs change', () => {
+    expect(taskfile.tasks['build:npm-cli'].sources).toBeUndefined();
+    expect(taskfile.tasks.build.sources).toEqual(expect.arrayContaining([
+      'package.json',
+      'pnpm-lock.yaml',
+      'openapi.yaml',
+      'tailwind.config.js',
+      'vite.lib.config.ts',
+      'vite.playground.config.ts',
+      'cli/package.json',
+      'cli/pnpm-lock.yaml',
+      'cli/scripts/**/*',
+      'cli/tsdown.config.ts',
+      'cli/tsdown.sea.config.ts',
+    ]));
+  });
+
+  it('requires the same Node version as the bundled facet package', () => {
+    const rootPackage = JSON.parse(readFileSync(resolve(repoRoot, 'package.json'), 'utf8'));
+    const cliPackage = JSON.parse(readFileSync(resolve(repoRoot, 'cli/npm/facet-cli/package.json'), 'utf8'));
+
+    expect(cliPackage.engines).toEqual(rootPackage.engines);
+  });
+
+  it.each([
+    {
+      name: 'installs the packed CLI over the existing facet executable',
+      task: 'install',
+      linked: false,
+    },
+    {
+      name: 'links the CLI and component library to the checkout',
+      task: 'install:symlink',
+      linked: true,
+    },
+  ])('$name', ({ task, linked }) => {
+    const expectedVersion = JSON.parse(
+      readFileSync(resolve(repoRoot, 'cli/package.json'), 'utf8'),
+    ).version as string;
+    const tempRoot = resolve(repoRoot, '.tmp');
+    mkdirSync(tempRoot, { recursive: true });
+    const testRoot = mkdtempSync(join(tempRoot, 'task-install-'));
+    const prefix = join(testRoot, 'prefix');
+    const packageDir = join(testRoot, 'package');
+    const shadowBin = join(testRoot, 'shadow-bin');
+    const shadowBinPath = join(shadowBin, process.platform === 'win32' ? 'facet.cmd' : 'facet');
+    const binPath = process.platform === 'win32'
+      ? join(prefix, 'facet.cmd')
+      : join(prefix, 'bin', 'facet');
+    const installedPackage = process.platform === 'win32'
+      ? join(prefix, 'node_modules', '@flanksource', 'facet-cli')
+      : join(prefix, 'lib', 'node_modules', '@flanksource', 'facet-cli');
+    const installedLibrary = process.platform === 'win32'
+      ? join(prefix, 'node_modules', '@flanksource', 'facet')
+      : join(prefix, 'lib', 'node_modules', '@flanksource', 'facet');
+
+    try {
+      mkdirSync(shadowBin, { recursive: true });
+      writeFileSync(shadowBinPath, process.platform === 'win32' ? '@echo old\r\n' : '#!/bin/sh\necho old\n');
+      chmodSync(shadowBinPath, 0o755);
+      const env = {
+        ...process.env,
+        NPM_CONFIG_PREFIX: prefix,
+        PATH: [shadowBin, dirname(binPath), process.env.PATH].filter(Boolean).join(delimiter),
+      };
+
+      execFileSync('task', [task, `CLI_NPM_PACKAGE_DIR=${packageDir}`], {
+        cwd: repoRoot,
+        env,
+        stdio: 'pipe',
+      });
+
+      const versionOutput = execFileSync('facet', ['--version'], { encoding: 'utf8', env });
+      expect(versionOutput).toContain(expectedVersion);
+      expect(lstatSync(installedPackage).isSymbolicLink()).toBe(linked);
+      if (linked) {
+        expect(realpathSync(installedPackage)).toBe(realpathSync(packageDir));
+        expect(realpathSync(installedLibrary)).toBe(realpathSync(repoRoot));
+        expect(versionOutput).toContain(`symlinked to ${repoRoot}`);
+      } else {
+        expect(versionOutput).not.toContain('symlinked to');
+      }
+    } finally {
+      rmSync(testRoot, { recursive: true, force: true });
+    }
+  }, 120_000);
+});
diff --git a/cli/src/builders/facet-directory.test.ts b/cli/src/builders/facet-directory.test.ts
index cb7db2f..1f5ba2f 100644
--- a/cli/src/builders/facet-directory.test.ts
+++ b/cli/src/builders/facet-directory.test.ts
@@ -89,71 +89,26 @@ async function writeLocalFacetPackage(options: { scripts?: Record<string, string
   return root;
 }
 
-describe('FacetDirectory.needsInstall', () => {
-  it('returns true when node_modules is missing', async () => {
-    await writeFile(join(facetRoot, 'package.json'), '{}');
-    expect(newFacetDir().needsInstall()).toBe(true);
-  });
-
-  it('returns true when node_modules is empty', async () => {
-    await writeFile(join(facetRoot, 'package.json'), '{}');
-    await mkdir(join(facetRoot, 'node_modules'));
-    expect(newFacetDir().needsInstall()).toBe(true);
-  });
-
-  it('returns true when a sentinel package is missing', async () => {
-    await writeFile(join(facetRoot, 'package.json'), '{}');
-    await writeSentinels(['react', 'vite']); // missing @vitejs/plugin-react and @flanksource/facet
-    expect(newFacetDir().needsInstall()).toBe(true);
-  });
-
-  it('returns true when package.json mtime is newer than node_modules', async () => {
-    await writeSentinels();
-    await writeFile(join(facetRoot, 'package.json'), '{}');
-    const future = new Date(Date.now() + 60_000);
-    utimesSync(join(facetRoot, 'package.json'), future, future);
-    const past = new Date(Date.now() - 60_000);
-    utimesSync(join(facetRoot, 'node_modules'), past, past);
-    expect(newFacetDir().needsInstall()).toBe(true);
-  });
-
-  it('returns false when sentinels exist and node_modules is newer than package.json', async () => {
-    await writeFile(join(facetRoot, 'package.json'), '{}');
-    await writeSentinels();
-    const past = new Date(Date.now() - 60_000);
-    utimesSync(join(facetRoot, 'package.json'), past, past);
-    const future = new Date(Date.now() + 60_000);
-    utimesSync(join(facetRoot, 'node_modules'), future, future);
-    expect(newFacetDir().needsInstall()).toBe(false);
-  });
-});
-
-describe('FacetDirectory.isInstallBroken', () => {
-  it('returns true when node_modules is missing', () => {
-    expect(newFacetDir().isInstallBroken()).toBe(true);
-  });
-
-  it('returns true when node_modules is empty', async () => {
-    await mkdir(join(facetRoot, 'node_modules'));
-    expect(newFacetDir().isInstallBroken()).toBe(true);
-  });
-
-  it('returns true when react/package.json is missing', async () => {
-    await writeSentinels(['vite', '@vitejs/plugin-react', '@flanksource/facet']);
-    expect(newFacetDir().isInstallBroken()).toBe(true);
-  });
-
-  it('returns true when a sentinel symlink is dangling', async () => {
-    await writeSentinels(['react', '@vitejs/plugin-react', '@flanksource/facet']);
-    const viteDir = join(facetRoot, 'node_modules', 'vite');
-    await mkdir(viteDir, { recursive: true });
-    symlinkSync('/nonexistent-target', join(viteDir, 'package.json'));
-    expect(newFacetDir().isInstallBroken()).toBe(true);
-  });
-
-  it('returns false when all sentinels exist as real files', async () => {
-    await writeSentinels();
-    expect(newFacetDir().isInstallBroken()).toBe(false);
+describe('FacetDirectory.symlinkConsumerFiles', () => {
+  it('skips cache/tool entries, prunes stale links, and keeps .facet-fragments', async () => {
+    for (const dir of ['.pnpm-store', '.wrangler', '.tmp', 'npm-dist', '.facet-fragments', 'src']) {
+      await mkdir(join(consumerRoot, dir), { recursive: true });
+    }
+    const facetSrc = join(facetRoot, 'src');
+    await mkdir(facetSrc, { recursive: true });
+    // Stale link from a facet version that mirrored everything.
+    symlinkSync(join(consumerRoot, '.pnpm-store'), join(facetSrc, '.pnpm-store'), 'junction');
+
+    const dir = newFacetDir();
+    dir.create();
+    dir.symlinkConsumerFiles();
+
+    expect(existsSync(join(facetSrc, '.pnpm-store'))).toBe(false);
+    expect(existsSync(join(facetSrc, '.wrangler'))).toBe(false);
+    expect(existsSync(join(facetSrc, '.tmp'))).toBe(false);
+    expect(existsSync(join(facetSrc, 'npm-dist'))).toBe(false);
+    expect(lstatSync(join(facetSrc, '.facet-fragments')).isSymbolicLink()).toBe(true);
+    expect(lstatSync(join(facetSrc, 'src')).isSymbolicLink()).toBe(true);
   });
 });
 
@@ -187,23 +142,8 @@ describe('FacetDirectory.nukeInstall', () => {
   });
 });
 
-describe('FacetDirectory.isInstallBroken foreign markers', () => {
-  it('flags installs with a sibling package-lock.json as broken', async () => {
-    await writeSentinels();
-    await writeFile(join(facetRoot, 'package-lock.json'), '{}');
-    expect(newFacetDir().isInstallBroken()).toBe(true);
-  });
-
-  it('flags symlinked node_modules as broken', async () => {
-    const externalCache = await mkdtemp(join(tmpdir(), 'facet-cache-'));
-    symlinkSync(externalCache, join(facetRoot, 'node_modules'), 'junction');
-    expect(newFacetDir().isInstallBroken()).toBe(true);
-    await rm(externalCache, { recursive: true, force: true });
-  });
-});
-
 describe('FacetDirectory.generateViteConfig remark plugins', () => {
-  it('keeps remark-frontmatter + remark-gfm defaults and appends frontmatter plugins', async () => {
+  it('keeps Markdown extension defaults and appends frontmatter plugins', async () => {
     const dir = new FacetDirectory({
       consumerRoot,
       templateFile: 'doc.mdx',
@@ -214,15 +154,94 @@ describe('FacetDirectory.generateViteConfig remark plugins', () => {
     const config = await readFile(join(facetRoot, 'vite.config.ts'), 'utf-8');
     expect(config).toContain("import remarkFrontmatter from 'remark-frontmatter';");
     expect(config).toContain(`import _remarkPlugin0 from "${join(consumerRoot, 'remark-financial-table.ts')}";`);
-    expect(config).toContain('remarkPlugins: [remarkFrontmatter, remarkGfm, _remarkPlugin0]');
-    expect(config).toContain('rehypePlugins: [_rehypePlugin0]');
+    expect(config).toContain("remarkPlugins: [remarkFrontmatter, remarkGfm, [remarkAlert, { tagName: 'blockquote' }], _remarkPlugin0]");
+    expect(config).toContain(
+      "rehypePlugins: [[rehypeRaw, { passThrough: ['mdxFlowExpression', 'mdxJsxFlowElement', 'mdxJsxTextElement', 'mdxTextExpression', 'mdxjsEsm'] }], _rehypePlugin0]",
+    );
   });
 
   it('emits only the always-on defaults when no frontmatter plugins are declared', async () => {
     newFacetDir().generateViteConfig();
     const config = await readFile(join(facetRoot, 'vite.config.ts'), 'utf-8');
-    expect(config).toContain('remarkPlugins: [remarkFrontmatter, remarkGfm]');
-    expect(config).not.toContain('rehypePlugins:');
+    expect(config).toContain("remarkPlugins: [remarkFrontmatter, remarkGfm, [remarkAlert, { tagName: 'blockquote' }]]");
+      expect(config).toContain(
+        "rehypePlugins: [[rehypeRaw, { passThrough: ['mdxFlowExpression', 'mdxJsxFlowElement', 'mdxJsxTextElement', 'mdxTextExpression', 'mdxjsEsm'] }]]",
+      );
+  });
+
+  it('transforms consumer Markdown before Vite parses files outside the generated .facet directory', async () => {
+    const dir = newFacetDir();
+    dir.generateViteConfig();
+    dir.generateClientScaffold({});
+
+    for (const config of await Promise.all([
+      readFile(join(facetRoot, 'vite.config.ts'), 'utf-8'),
+      readFile(join(facetRoot, 'vite.client.config.ts'), 'utf-8'),
+    ])) {
+      expect(config).toContain("enforce: 'pre'");
+      expect(config).toContain('include: [/\\.(md|mdx)$/]');
+    }
+  });
+});
+
+describe('FacetDirectory Tailwind integration', () => {
+  it('loads Facet defaults before template-owned consumer CSS', async () => {
+    await mkdir(join(consumerRoot, 'src/styles'), { recursive: true });
+    await writeFile(join(consumerRoot, 'template.tsx'), "import './src/styles/report.css';\nexport default function Template() { return null; }\n");
+    await writeFile(join(consumerRoot, 'src/styles/report.css'), '@import "tailwindcss";\n');
+    const dir = newFacetDir();
+    dir.create();
+    dir.symlinkConsumerFiles();
+    dir.copyStylesCss();
+    dir.generateEntryWrapper();
+
+    const entry = await readFile(join(facetRoot, 'entry.tsx'), 'utf-8');
+    const facetImport = entry.indexOf("import './facet.css';");
+    const templateImport = entry.indexOf("import Template from './src/template.tsx';");
+    expect(facetImport).toBeGreaterThanOrEqual(0);
+    expect(templateImport).toBeGreaterThan(facetImport);
+
+    const facetCss = await readFile(join(facetRoot, 'facet.css'), 'utf-8');
+    expect(facetCss).toMatch(/^@import ['"]https:\/\/fonts\.googleapis\.com\//);
+    expect(facetCss).toContain('@layer facet, theme, base, components, utilities;');
+    expect(facetCss).toContain('@layer facet {');
+    expect(facetCss).not.toContain('layer(facet)');
+
+    const postProcessCss = await readFile(join(facetRoot, 'post-process.css'), 'utf-8');
+    expect(postProcessCss.indexOf("@import './facet.css';"))
+      .toBeLessThan(postProcessCss.indexOf("@import './src/src/styles/report.css';"));
+    expect(postProcessCss).not.toContain('@source');
+
+    const postProcessV4Css = await readFile(join(facetRoot, 'post-process-v4.css'), 'utf-8');
+    expect(postProcessV4Css).toContain('@import "tailwindcss/theme.css" layer(theme);');
+    expect(postProcessV4Css).toContain('@import "tailwindcss/utilities.css" layer(utilities) source(none);');
+    expect(postProcessV4Css).not.toContain('preflight.css');
+    expect(postProcessV4Css).toContain('@source "./src/template.tsx";');
+    expect(postProcessV4Css).toContain('@source "./rendered-content.html";');
+  });
+
+  it('generates Vite configs that select the installed Tailwind major', async () => {
+    const dir = newFacetDir();
+    dir.generateViteConfig();
+    dir.generateClientScaffold({});
+
+    expect(await readFile(join(facetRoot, 'vite.config.ts'), 'utf-8'))
+      .toContain("await import('@tailwindcss/vite')");
+    expect(await readFile(join(facetRoot, 'vite.client.config.ts'), 'utf-8'))
+      .toContain("await import('@tailwindcss/vite')");
+    expect(await readFile(join(facetRoot, 'postcss.config.js'), 'utf-8'))
+      .toContain("tailwindMajor === 3");
+  });
+
+  it('scans the template top-level source directory', async () => {
+    await mkdir(join(consumerRoot, 'src'), { recursive: true });
+    await writeFile(join(consumerRoot, 'src/template.tsx'), 'export default null;\n');
+    const dir = new FacetDirectory({ consumerRoot, templateFile: 'src/template.tsx', logger });
+    dir.create();
+    dir.copyStylesCss();
+
+    expect(await readFile(join(facetRoot, 'post-process-v4.css'), 'utf-8'))
+      .toContain('@source "./src/src";');
   });
 });
 
@@ -233,6 +252,43 @@ describe('FacetDirectory.generatePackageJson .npmrc', () => {
     const npmrc = await readFile(join(facetRoot, '.npmrc'), 'utf-8');
     expect(npmrc).toContain('confirm-modules-purge=false');
   });
+
+  it('uses only the pinned default manifest in skip-modules mode', async () => {
+    await writeFile(join(consumerRoot, 'package.json'), JSON.stringify({
+      name: 'consumer',
+      dependencies: { 'custom-module': '2.0.0' },
+      packageManager: 'npm@11.0.0',
+    }));
+    process.env.FACET_PACKAGE_PATH = join(consumerRoot, 'mutable-facet-checkout');
+    const directory = new FacetDirectory({
+      consumerRoot,
+      templateFile: 'template.tsx',
+      logger,
+      skipModules: true,
+    });
+
+    await directory.generatePackageJson();
+
+    const generated = JSON.parse(await readFile(join(facetRoot, 'package.json'), 'utf-8'));
+    expect(generated.name).toBe('.facet-default-modules');
+    expect(generated.dependencies['@flanksource/facet']).toBe('0.1.59');
+    expect(generated.dependencies['custom-module']).toBeUndefined();
+    expect(await readFile(join(facetRoot, '.npmrc'), 'utf-8')).not.toContain('Inherited from consumer');
+  });
+
+  it('preserves source symlink paths so skip mode resolves from shared modules', async () => {
+    const directory = new FacetDirectory({
+      consumerRoot,
+      templateFile: 'template.tsx',
+      logger,
+      skipModules: true,
+    });
+    directory.generateViteConfig();
+    directory.generateClientScaffold({});
+
+    expect(await readFile(join(facetRoot, 'vite.config.ts'), 'utf-8')).toContain('preserveSymlinks: true');
+    expect(await readFile(join(facetRoot, 'vite.client.config.ts'), 'utf-8')).toContain('preserveSymlinks: true');
+  });
 });
 
 describe('FACET_PACKAGE_PATH local directory override', () => {
@@ -245,15 +301,17 @@ describe('FACET_PACKAGE_PATH local directory override', () => {
     expect(resolveFacetPackageOverride(tarball)).toEqual({ kind: 'tarball', path: tarball });
   });
 
-  it('copies default styles from the local checkout', async () => {
+  it('imports compiled default styles from the local checkout', async () => {
     const localRoot = await writeLocalFacetPackage();
     process.env.FACET_PACKAGE_PATH = localRoot;
+    await writeFile(join(consumerRoot, 'template.tsx'), 'export default function Template() { return null; }\n');
     const facetDir = newFacetDir();
     facetDir.create();
 
     facetDir.copyStylesCss();
 
-    expect(await readFile(join(facetRoot, 'src/styles.css'), 'utf-8')).toContain('local facet styles');
+    expect(await readFile(join(facetRoot, 'facet.css'), 'utf-8'))
+      .toContain('@layer facet {\n/* built local css */');
   });
 
   it('uses local package metadata and writes a build fingerprint into .facet/package.json', async () => {
diff --git a/cli/src/builders/facet-directory.ts b/cli/src/builders/facet-directory.ts
index 9050dcd..035c4a8 100644
--- a/cli/src/builders/facet-directory.ts
+++ b/cli/src/builders/facet-directory.ts
@@ -14,22 +14,24 @@
  */
 
 import { mkdirSync, existsSync, symlinkSync, writeFileSync, readdirSync, statSync, rmSync, readlinkSync, readFileSync, lstatSync, unlinkSync, chmodSync, openSync, closeSync } from 'fs';
-import { spawnSync } from 'node:child_process';
 import { createHash } from 'crypto';
-import { join, relative, dirname, resolve, extname } from 'path';
+import { join, relative, dirname, resolve, extname, sep } from 'path';
 import { homedir } from 'os';
 import type { Logger } from '../utils/logger.js';
 import {
   generatePluginCodegen,
+  rehypePluginsArray,
   remarkPluginsArray,
   EMPTY_REMARK_CONFIG,
   type RemarkConfig,
 } from './remark-config.js';
 
 import { assetPath } from '../utils/assets.js';
+import { createDefaultModulePackageJson, defaultModuleNpmrc } from '../bundler/module-store.js';
+import { VERSION } from '../version-generated.js';
+import { LowPriorityProcessError, runLowPriority } from '../utils/subprocess-priority.js';
 
 const rootPackageJson = assetPath('package.json');
-const stylesCss = assetPath('styles.css');
 
 export interface FacetDirectoryOptions {
   /** Consumer's project root directory */
@@ -40,23 +42,40 @@ export interface FacetDirectoryOptions {
   logger: Logger;
   /** Extra remark/rehype plugins declared in the template's frontmatter. */
   remarkConfig?: RemarkConfig;
+  /** Use the immutable shared Facet module install without consumer dependencies. */
+  skipModules?: boolean;
 }
 
 /**
  * Items to skip when symlinking from consumer directory
  */
+// Dot-entries are skipped wholesale (except SYMLINKED_DOT_ITEMS): mirroring
+// cache/tool dirs (.pnpm-store, .wrangler, .tmp, stale .facet-* staging, …)
+// into .facet/src put hundreds of thousands of junk files inside the Vite
+// root, which Tailwind v4's automatic source detection walks on every build
+// (measured: 574k files, ~45s per build in a real consumer).
 const SKIP_ITEMS = new Set([
-  '.facet',
-  '.git',
   'node_modules',
   'dist',
+  'build',
+  'coverage',
+  'npm-dist',
+  'dist-sea',
+  'dist-playground',
+  'out',
   '.DS_Store',
-  '.gitignore',
-  '.env',
-  '.env.local',
   'Thumbs.db',
 ]);
 
+// Dot-entries facet itself depends on: header/footer fragment builds use
+// templatePath `.facet-fragments/…`, resolved through .facet/src.
+const SYMLINKED_DOT_ITEMS = new Set(['.facet-fragments']);
+
+function shouldSkipConsumerItem(item: string): boolean {
+  if (SYMLINKED_DOT_ITEMS.has(item)) return false;
+  return SKIP_ITEMS.has(item) || item.startsWith('.');
+}
+
 function resolveFileProtocol(version: string, pkgDir: string, _facetRoot: string): string {
   if (!version.startsWith('file:')) return version;
   // Emit an absolute path. pnpm realpath-resolves the install dir (e.g. /var → /private/var
@@ -107,6 +126,28 @@ export function resolveFacetPackageOverride(raw = process.env['FACET_PACKAGE_PAT
   return { kind: 'tarball', path: abs };
 }
 
+export function wrapFacetStylesInLayer(css: string): string {
+  const imports: string[] = [];
+  let remaining = css;
+  const leadingImport = /^((?:\s|\/\*[\s\S]*?\*\/)*@import\s+(?:"[^"]*"|'[^']*'|url\([^)]*\))[^;]*;)\s*/;
+  for (let match = remaining.match(leadingImport); match; match = remaining.match(leadingImport)) {
+    imports.push(match[1].trim());
+    remaining = remaining.slice(match[0].length);
+  }
+  if (/@import\s/.test(remaining)) {
+    throw new Error('Facet styles contain an @import after style rules; CSS imports must precede all layered rules');
+  }
+
+  return [
+    ...imports,
+    '@layer facet, theme, base, components, utilities;',
+    '@layer facet {',
+    remaining.trim(),
+    '}',
+    '',
+  ].join('\n');
+}
+
 function newestMatchingMtime(dir: string, predicate: (path: string) => boolean): number {
   if (!existsSync(dir)) return 0;
   let newest = 0;
@@ -289,17 +330,13 @@ export function serializeInjectedData(data: Record<string, unknown>): string {
 }
 
 export class FacetDirectory {
-  // Subset of build deps whose absence reliably signals a broken install:
-  // react/vite/the React Vite plugin/facet itself. Hits before pnpm hoists
-  // anything else, so a fresh-but-empty node_modules trips on the first one.
-  private static SENTINEL_DEPS = ['react', 'vite', '@vitejs/plugin-react', '@flanksource/facet'];
-
   private consumerRoot: string;
   private facetRoot: string;
   private facetSrc: string;
   private templateFile: string;
   private logger: Logger;
   private remarkConfig: RemarkConfig;
+  private skipModules: boolean;
 
   constructor(options: FacetDirectoryOptions) {
     this.consumerRoot = options.consumerRoot;
@@ -308,22 +345,24 @@ export class FacetDirectory {
     this.templateFile = options.templateFile;
     this.logger = options.logger;
     this.remarkConfig = options.remarkConfig ?? EMPTY_REMARK_CONFIG;
+    this.skipModules = options.skipModules ?? false;
   }
 
   /**
    * MDX plugin source for the generated vite configs: extra imports, the
    * remarkPlugins array (always-on defaults + frontmatter-declared plugins),
-   * and an optional rehypePlugins line. Local plugin paths resolve relative to
+   * and the rehypePlugins array. Local plugin paths resolve relative to
    * the template file's directory.
    */
-  private mdxPluginSource(): { imports: string; remarkArray: string; rehypeLine: string } {
+  private mdxPluginSource(): { imports: string; remarkArray: string; rehypeArray: string } {
     const templateDir = dirname(resolve(this.consumerRoot, this.templateFile));
     const codegen = generatePluginCodegen(this.remarkConfig, templateDir);
     const imports = codegen.imports.length ? '\n' + codegen.imports.join('\n') : '';
-    const rehypeLine = codegen.rehypeItems.length
-      ? `\n      rehypePlugins: [${codegen.rehypeItems.join(', ')}],`
-      : '';
-    return { imports, remarkArray: remarkPluginsArray(codegen.remarkItems), rehypeLine };
+    return {
+      imports,
+      remarkArray: remarkPluginsArray(codegen.remarkItems),
+      rehypeArray: rehypePluginsArray(codegen.rehypeItems),
+    };
   }
 
   /**
@@ -345,10 +384,23 @@ export class FacetDirectory {
   symlinkConsumerFiles(): void {
     this.logger.debug('Symlinking consumer files into .facet/src/');
 
+    // Drop links a previous facet version created for now-excluded items, so
+    // existing .facet/ dirs stop exposing junk trees to source scanners.
+    for (const existing of readdirSync(this.facetSrc)) {
+      if (!shouldSkipConsumerItem(existing)) continue;
+      const stalePath = join(this.facetSrc, existing);
+      try {
+        if (lstatSync(stalePath).isSymbolicLink()) {
+          rmSync(stalePath, { force: true });
+          this.logger.debug(`Removed stale symlink: ${existing}`);
+        }
+      } catch { /* concurrent cleanup */ }
+    }
+
     const items = readdirSync(this.consumerRoot);
 
     for (const item of items) {
-      if (SKIP_ITEMS.has(item)) {
+      if (shouldSkipConsumerItem(item)) {
         this.logger.debug(`Skipping ${item}`);
         continue;
       }
@@ -461,7 +513,7 @@ export class FacetDirectory {
 
     const entry = isMarkdown
       ? `import React from 'react';
-import './src/styles.css';
+import './facet.css';
 import { Page } from '@flanksource/facet';
 import { Icon } from '@iconify/react';
 import Content from './src/${templateRelPath}';
@@ -477,7 +529,7 @@ export default function Template({ data }) {
 }
 `
       : `import React from 'react';
-import './src/styles.css';
+import './facet.css';
 import Template from './src/${templateRelPath}';
 
 
@@ -496,21 +548,44 @@ export default Template;
   generateViteConfig(): void {
     this.logger.debug('Generating vite.config.ts');
 
-    const { imports, remarkArray, rehypeLine } = this.mdxPluginSource();
+    const { imports, remarkArray, rehypeArray } = this.mdxPluginSource();
     const config = `
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import mdx from '@mdx-js/rollup';
 import remarkGfm from 'remark-gfm';
 import remarkFrontmatter from 'remark-frontmatter';
-import { resolve } from 'path';${imports}
-
-export default defineConfig({
-  plugins: [
-    mdx({
-      remarkPlugins: ${remarkArray},${rehypeLine}
-      include: ['**/*.md', '**/*.mdx'],
+import { remarkAlert } from 'remark-github-blockquote-alert';
+import rehypeRaw from 'rehype-raw';
+import { resolve } from 'path';
+import { createRequire } from 'module';${imports}
+
+const facetRequire = createRequire(import.meta.url);
+const tailwindMajor = Number(facetRequire('tailwindcss/package.json').version.split('.')[0]);
+
+export default defineConfig(async () => {
+  const tailwindPlugins = tailwindMajor === 4
+    ? [(await import('@tailwindcss/vite')).default()]
+    : [];
+  const mdxPlugin = {
+    enforce: 'pre',
+    ...mdx({
+      remarkPlugins: ${remarkArray},
+      rehypePlugins: ${rehypeArray},
+      include: [/\\.(md|mdx)$/],
     }),
+  };
+  // Rolldown crosses the native->JS boundary for every module unless a hook
+  // declares a filter (the plugin's own include only filters inside JS). With
+  // zero markdown files this dispatch tax was measured at 76% of build time.
+  const viteNs = await import('vite');
+  if (viteNs.rolldownVersion && typeof mdxPlugin.transform === 'function') {
+    mdxPlugin.transform = { filter: { id: /\\.(md|mdx)$/ }, handler: mdxPlugin.transform };
+  }
+  return {
+  plugins: [
+    ...tailwindPlugins,
+    mdxPlugin,
     react({
       include: /\\.(md|mdx|js|jsx|ts|tsx)$/,
     }),
@@ -519,6 +594,7 @@ export default defineConfig({
     // Resolve symlinks to real paths so pnpm's symlinked transitive deps stay
     // reachable; dedupe keeps a single React copy across the symlinked packages.
     dedupe: ['react', 'react-dom'],
+    preserveSymlinks: ${this.skipModules},
     alias: {
       '@flanksource/facet': resolve(__dirname, 'node_modules/@flanksource/facet'),
       '@facet': resolve(__dirname, 'node_modules/@flanksource/facet'),
@@ -529,7 +605,11 @@ export default defineConfig({
     conditions: ['import', 'module', 'browser', 'default'],
   },
   ssr: {
-    noExternal: ['react-icons', '@iconify/react', '@flanksource/facet', new RegExp('^@flanksource/')],
+    // Icon libraries are dual CJS/ESM with no CSS side effects and megabyte-scale
+    // generated modules; bundling them was 92% of SSR build input. They resolve
+    // at render time from .facet/node_modules instead (output byte-identical).
+    // @flanksource/facet stays bundled: externalizing it changes rendered HTML.
+    noExternal: ['@flanksource/facet', new RegExp('^@flanksource/(?!icons)')],
     resolve: {
       conditions: ['node', 'import', 'module', 'browser', 'default'],
       externalConditions: ['node'],
@@ -554,6 +634,7 @@ export default defineConfig({
     },
     cssCodeSplit: false,
   },
+  };
 });
 `;
 
@@ -602,21 +683,39 @@ root.render(React.createElement(Template, { data }));
 `;
     writeFileSync(join(this.facetRoot, 'index.html'), indexHtml, 'utf-8');
 
-    const { imports, remarkArray, rehypeLine } = this.mdxPluginSource();
+    const { imports, remarkArray, rehypeArray } = this.mdxPluginSource();
     const config = `
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import mdx from '@mdx-js/rollup';
 import remarkGfm from 'remark-gfm';
 import remarkFrontmatter from 'remark-frontmatter';
-import { resolve } from 'path';${imports}
-
-export default defineConfig({
+import { remarkAlert } from 'remark-github-blockquote-alert';
+import rehypeRaw from 'rehype-raw';
+import { resolve } from 'path';
+import { createRequire } from 'module';${imports}
+
+const facetRequire = createRequire(import.meta.url);
+const tailwindMajor = Number(facetRequire('tailwindcss/package.json').version.split('.')[0]);
+
+export default defineConfig(async () => {
+  const tailwindPlugins = tailwindMajor === 4
+    ? [(await import('@tailwindcss/vite')).default()]
+    : [];
+  return {
   plugins: [
-    mdx({
-      remarkPlugins: ${remarkArray},${rehypeLine}
-      include: ['**/*.md', '**/*.mdx'],
-    }),
+    ...tailwindPlugins,
+    // enforce: 'pre' — in dev mode plugin-react's transform runs before
+    // array-ordered plugins, so MDX must be hoisted to the pre stage or
+    // react-babel parses raw .mdx and fails. Build mode respects array order.
+    {
+      enforce: 'pre',
+      ...mdx({
+        remarkPlugins: ${remarkArray},
+        rehypePlugins: ${rehypeArray},
+        include: [/\\.(md|mdx)$/],
+      }),
+    },
     react({
       include: /\\.(md|mdx|js|jsx|ts|tsx)$/,
     }),
@@ -626,6 +725,7 @@ export default defineConfig({
     // (e.g. d3-array → internmap) are reachable during esbuild dep optimization.
     // dedupe keeps a single React copy, which preserveSymlinks otherwise guarded.
     dedupe: ['react', 'react-dom'],
+    preserveSymlinks: ${this.skipModules},
     alias: {
       '@flanksource/facet': resolve(__dirname, 'node_modules/@flanksource/facet'),
       '@facet': resolve(__dirname, 'node_modules/@flanksource/facet'),
@@ -635,21 +735,12 @@ export default defineConfig({
     },
     conditions: ['import', 'module', 'browser', 'default'],
   },
+  };
 });
 `;
     writeFileSync(join(this.facetRoot, 'vite.client.config.ts'), config, 'utf-8');
 
-    // The dev server processes the template's `@tailwind` directives through
-    // PostCSS at request time (the SSR path instead shells out to the Tailwind
-    // CLI). Override the autoprefixer-only postcss config so Tailwind runs.
-    const postcss = `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-`;
-    writeFileSync(join(this.facetRoot, 'postcss.config.js'), postcss, 'utf-8');
+    this.generatePostCSSConfig();
     this.logger.debug('Generated live-render client scaffold');
   }
 
@@ -693,7 +784,25 @@ export default defineConfig({
   async generatePackageJson(): Promise<void> {
     this.logger.debug('Generating package.json');
 
-    const facetOverride = resolveFacetPackageOverride();
+    if (this.skipModules) {
+      const facetPackage = JSON.parse(readFileSync(rootPackageJson, 'utf-8'));
+      const packageContent = JSON.stringify(createDefaultModulePackageJson({
+        facetVersion: VERSION,
+        facetPackage,
+      }), null, 2);
+      const packagePath = join(this.facetRoot, 'package.json');
+      let existingPackage = '';
+      try { existingPackage = readFileSync(packagePath, 'utf-8'); } catch { /* first generation */ }
+      if (existingPackage !== packageContent) writeFileSync(packagePath, packageContent, 'utf-8');
+      this.removePaths(['pnpm-lock.yaml', 'package-lock.json', 'yarn.lock']);
+      const npmrcPath = join(this.facetRoot, '.npmrc');
+      writeFileSync(npmrcPath, defaultModuleNpmrc(), { encoding: 'utf-8', mode: 0o600 });
+      chmodSync(npmrcPath, 0o600);
+      this.logger.debug('Generated consumer-independent skip-modules manifest');
+      return;
+    }
+
+    const facetOverride = this.skipModules ? undefined : resolveFacetPackageOverride();
     if (facetOverride?.kind === 'directory') {
       await this.ensureLocalFacetPackageBuilt(facetOverride.path);
     }
@@ -756,6 +865,9 @@ export default defineConfig({
       '@mdx-js/rollup',
       'remark-gfm',
       'remark-frontmatter',
+      'remark-github-blockquote-alert',
+      'rehype-raw',
+      'mermaid',
       'react-icons',
       'react-xarrows',
       '@flanksource/icons',
@@ -763,6 +875,7 @@ export default defineConfig({
       'typescript',
       '@tailwindcss/typography',
       '@tailwindcss/postcss',
+      '@tailwindcss/vite',
       'tailwindcss',
       'autoprefixer',
       'postcss',
@@ -990,19 +1103,6 @@ export default defineConfig({
     }
   }
 
-  private readFacetAsset(localRelPath: string, embeddedPath: string, label: string): string {
-    const facetOverride = resolveFacetPackageOverride();
-    if (facetOverride?.kind === 'directory') {
-      const localPath = join(facetOverride.path, localRelPath);
-      if (existsSync(localPath)) {
-        this.logger.debug(`Using ${label} from FACET_PACKAGE_PATH: ${localPath}`);
-        return readFileSync(localPath, 'utf-8');
-      }
-      this.logger.debug(`FACET_PACKAGE_PATH has no ${localRelPath}, using embedded ${label}`);
-    }
-    return readFileSync(embeddedPath, 'utf-8');
-  }
-
   private async ensureLocalFacetPackageBuilt(packageRoot: string): Promise<void> {
     const isCurrent = (): boolean =>
       !needsLocalFacetComponentsBuild(packageRoot) && !needsLocalFacetCssBuild(packageRoot);
@@ -1011,17 +1111,17 @@ export default defineConfig({
       return;
     }
 
-    await this.withLocalFacetBuildLock(packageRoot, () => {
+    await this.withLocalFacetBuildLock(packageRoot, async () => {
       // Another process may have completed the build while this process waited.
       if (isCurrent()) return;
       const shouldBuildCss = needsLocalFacetCssBuild(packageRoot);
       if (needsLocalFacetComponentsBuild(packageRoot)) {
-        this.runLocalFacetBuildScript(packageRoot, 'build:components');
+        await this.runLocalFacetBuildScript(packageRoot, 'build:components');
       }
       // vite.lib.config.ts empties dist/ before building components. If CSS was
       // current before that run, it may now be missing, so re-check afterward.
       if (shouldBuildCss || needsLocalFacetCssBuild(packageRoot)) {
-        this.runLocalFacetBuildScript(packageRoot, 'build:css');
+        await this.runLocalFacetBuildScript(packageRoot, 'build:css');
       }
     });
   }
@@ -1096,26 +1196,29 @@ export default defineConfig({
     this.logger.debug('Removed stale installed @flanksource/facet local override');
   }
 
-  private runLocalFacetBuildScript(packageRoot: string, script: string): void {
+  private async runLocalFacetBuildScript(packageRoot: string, script: string): Promise<void> {
     this.logger.info(`FACET_PACKAGE_PATH local override is stale; running pnpm run ${script}`);
-    const result = spawnSync('pnpm', ['run', script], {
-      cwd: packageRoot,
-      timeout: LOCAL_BUILD_TIMEOUT_MS,
-      maxBuffer: 50 * 1024 * 1024,
-    });
-    const stdout = (result.stdout ?? Buffer.from('')).toString();
-    const stderr = (result.stderr ?? Buffer.from('')).toString();
-    if (stdout) this.logger.debug(stdout);
-    if (stderr) this.logger.debug(stderr);
-    const timedOut = (result.error as NodeJS.ErrnoException | undefined)?.code === 'ETIMEDOUT';
-    if (result.error && !timedOut) throw result.error;
-    if (timedOut || result.status !== 0) {
-      const reason = timedOut
+    try {
+      const result = await runLowPriority({
+        command: 'pnpm',
+        args: ['run', script],
+        options: { cwd: packageRoot },
+        timeoutMs: LOCAL_BUILD_TIMEOUT_MS,
+        maxBufferBytes: 50 * 1024 * 1024,
+      });
+      if (result.stdout.length > 0) this.logger.debug(result.stdout.toString());
+      if (result.stderr.length > 0) this.logger.debug(result.stderr.toString());
+    } catch (error) {
+      if (!(error instanceof LowPriorityProcessError)) throw error;
+      const stdout = error.stdout.toString();
+      const stderr = error.stderr.toString();
+      if (stdout) this.logger.debug(stdout);
+      if (stderr) this.logger.debug(stderr);
+      if (error.cause !== undefined && error.exitCode === null && !error.timedOut) throw error.cause;
+      const reason = error.timedOut
         ? `timed out after ${LOCAL_BUILD_TIMEOUT_MS / 1000}s`
-        : `failed with exit code ${result.status ?? 'unknown'}`;
-      throw new Error(
-        `pnpm run ${script} ${reason} in ${packageRoot}:\n${stdout}${stderr}`
-      );
+        : `failed with exit code ${error.exitCode ?? 'unknown'}`;
+      throw new Error(`pnpm run ${script} ${reason} in ${packageRoot}:\n${stdout}${stderr}`);
     }
   }
 
@@ -1150,63 +1253,6 @@ export default defineConfig({
     this.logger.warn('.facet/.npmrc may contain inherited auth tokens but no ancestor .gitignore excludes `.facet/`. Add `.facet/` (or `**/.facet/` for monorepos) to .gitignore to avoid committing secrets.');
   }
 
-  /**
-   * Returns true if node_modules needs to be installed. Combines mtime check
-   * with a sentinel-dep scan so partial / corrupt installs are detected.
-   */
-  needsInstall(): boolean {
-    const packagePath = join(this.facetRoot, 'package.json');
-    const nodeModulesPath = join(this.facetRoot, 'node_modules');
-    if (!existsSync(nodeModulesPath)) return true;
-    if (this.isInstallBroken()) return true;
-    try {
-      return statSync(packagePath).mtimeMs > statSync(nodeModulesPath).mtimeMs;
-    } catch {
-      return true;
-    }
-  }
-
-  /**
-   * Cheap O(sentinels) check for a partial/corrupt install: empty node_modules,
-   * missing sentinel package, or a dangling symlink count as broken.
-   */
-  isInstallBroken(): boolean {
-    const nm = join(this.facetRoot, 'node_modules');
-    if (!existsSync(nm)) return true;
-    // Foreign-manager markers: an npm/yarn lockfile next to node_modules makes
-    // pnpm refuse to write into the dir (ENOENT on importPackage). Treat as broken.
-    if (existsSync(join(this.facetRoot, 'package-lock.json'))) {
-      this.logger.warn('Foreign package-lock.json found in .facet/ — install broken');
-      return true;
-    }
-    if (existsSync(join(this.facetRoot, 'yarn.lock'))) {
-      this.logger.warn('Foreign yarn.lock found in .facet/ — install broken');
-      return true;
-    }
-    // node_modules pointing outside .facet/ (legacy facet-cache symlink) confuses
-    // pnpm's hoisted layout. Force a clean install.
-    try {
-      const st = lstatSync(nm);
-      if (st.isSymbolicLink()) {
-        this.logger.warn('Legacy .facet/node_modules symlink found — install broken');
-        return true;
-      }
-    } catch { /* fall through */ }
-    try { if (readdirSync(nm).length === 0) return true; } catch { return true; }
-    for (const dep of FacetDirectory.SENTINEL_DEPS) {
-      const depPkg = join(nm, ...dep.split('/'), 'package.json');
-      if (!existsSync(depPkg)) {
-        this.logger.warn(`Sentinel dep missing: ${dep} (${depPkg}) — install broken`);
-        return true;
-      }
-      try { statSync(depPkg); } catch {
-        this.logger.warn(`Sentinel dep dangling: ${dep} — install broken`);
-        return true;
-      }
-    }
-    return false;
-  }
-
   /** Reset .facet/ install state so the next pnpm install re-resolves clean. */
   nukeInstall(): void {
     // Include package-lock.json: a stale npm/yarn lockfile makes pnpm treat
@@ -1260,22 +1306,21 @@ export default defineConfig({
    * Generate default postcss.config.js if consumer doesn't have one
    */
   generatePostCSSConfig(): void {
-    const consumerConfig = join(this.consumerRoot, 'postcss.config.js');
-
-    // Skip if consumer has their own config (will be symlinked)
-    if (existsSync(consumerConfig)) {
-      this.logger.debug('Consumer has postcss.config.js, skipping generation');
-      return;
-    }
-
-    this.logger.debug('Generating default postcss.config.js');
+    this.logger.debug('Generating Tailwind-compatible postcss.config.js');
+    const config = `import autoprefixer from 'autoprefixer';
+import { createRequire } from 'module';
+
+const facetRequire = createRequire(import.meta.url);
+const tailwindMajor = Number(facetRequire('tailwindcss/package.json').version.split('.')[0]);
+const plugins = [autoprefixer()];
+if (tailwindMajor === 3) {
+  const tailwindcss = (await import('tailwindcss')).default;
+  plugins.unshift(tailwindcss(process.env.FACET_POST_PROCESS === '1'
+    ? './tailwind.postprocess.config.js'
+    : './tailwind.config.js'));
+}
 
-    // Generate ESM-compatible config (not CommonJS) since package.json has "type": "module"
-    const config = `export default {
-  plugins: {
-    autoprefixer: {},
-  },
-};
+export default { plugins };
 `;
 
     writeFileSync(join(this.facetRoot, 'postcss.config.js'), config, 'utf-8');
@@ -1286,24 +1331,16 @@ export default defineConfig({
    * Generate default tailwind.config.js if consumer doesn't have one
    */
   generateTailwindConfig(): void {
-    const consumerConfig = join(this.consumerRoot, 'tailwind.config.js');
-
-    // Skip if consumer has their own config (will be symlinked)
-    if (existsSync(consumerConfig)) {
-      this.logger.debug('Consumer has tailwind.config.js, skipping generation');
-      return;
-    }
-
-    this.logger.debug('Generating default tailwind.config.js');
-
-    // Generate ESM-compatible config (not CommonJS) since package.json has "type": "module"
-    // Point directly to consumer root to avoid symlink issues
-    const config = `import typography from '@tailwindcss/typography';
-console.log('Using default tailwind.config.js');
+    const consumerConfigName = ['tailwind.config.js', 'tailwind.config.cjs', 'tailwind.config.mjs', 'tailwind.config.ts']
+      .find((name) => existsSync(join(this.consumerRoot, name)));
+    const config = consumerConfigName
+      ? `import consumerConfig from './src/${consumerConfigName}';
+export default consumerConfig;
+`
+      : `import typography from '@tailwindcss/typography';
 export default {
   content: [
-    "src/**/*.{html,js,jsx,ts,tsx,md,mdx}",
-    "./node_modules/@flanksource/facet/src/**/*.{js,jsx,ts,tsx}"
+    "src/**/*.{html,js,jsx,ts,tsx,md,mdx}"
   ],
   theme: {
     extend: {
@@ -1323,8 +1360,14 @@ export default {
   plugins: [typography],
 };
 `;
-
     writeFileSync(join(this.facetRoot, 'tailwind.config.js'), config, 'utf-8');
+    const postProcessConfig = `import baseConfig from './tailwind.config.js';
+export default {
+  ...baseConfig,
+  content: [...(baseConfig.content ?? []), './rendered-content.html'],
+};
+`;
+    writeFileSync(join(this.facetRoot, 'tailwind.postprocess.config.js'), postProcessConfig, 'utf-8');
     this.logger.debug('Generated tailwind.config.js');
   }
 
@@ -1332,26 +1375,75 @@ export default {
    * Copy embedded styles.css to .facet/src/
    */
   copyStylesCss(): void {
-    const consumerStylesCss = join(this.consumerRoot, 'src/styles.css');
+    const installedStyles = join(this.facetRoot, 'node_modules/@flanksource/facet/dist/styles.css');
+    const facetOverride = this.skipModules ? undefined : resolveFacetPackageOverride();
+    const stylesPath = existsSync(installedStyles)
+      ? installedStyles
+      : facetOverride?.kind === 'directory'
+        ? join(facetOverride.path, 'dist/styles.css')
+        : assetPath('styles.css');
+    writeFileSync(
+      join(this.facetRoot, 'facet.css'),
+      wrapFacetStylesInLayer(readFileSync(stylesPath, 'utf-8')),
+      'utf-8',
+    );
 
-    // Skip if consumer has their own styles.css (will be symlinked)
-    if (existsSync(consumerStylesCss)) {
-      this.logger.debug('Consumer has src/styles.css, skipping copy');
-      return;
-    }
+    const source = readFileSync(join(this.consumerRoot, this.templateFile), 'utf-8');
+    const templateDir = dirname(join(this.consumerRoot, this.templateFile));
+    const imports = [...source.matchAll(/(?:^|\n)\s*import\s+(?:[^'"\n]+\s+from\s+)?['"]([^'"]+\.css)['"]/g)]
+      .map((match) => match[1])
+      .map((specifier) => {
+        if (!specifier.startsWith('.')) return specifier;
+        const consumerPath = relative(this.consumerRoot, resolve(templateDir, specifier)).split(sep).join('/');
+        return `./src/${consumerPath}`;
+      });
+    const postProcessLines = [
+      "@import './facet.css';",
+      ...imports.map((specifier) => `@import '${specifier}';`),
+    ];
+    const postProcess = [...postProcessLines, ''].join('\n');
+    const normalizedTemplateFile = this.templateFile.replaceAll('\\', '/').replace(/^\.\//, '');
+    const staticSource = normalizedTemplateFile.includes('/')
+      ? normalizedTemplateFile.slice(0, normalizedTemplateFile.indexOf('/'))
+      : normalizedTemplateFile;
+    const postProcessV4 = [
+      ...postProcessLines,
+      '@import "tailwindcss/theme.css" layer(theme);',
+      '@import "tailwindcss/utilities.css" layer(utilities) source(none);',
+      `@source "./src/${staticSource}";`,
+      '@source "./rendered-content.html";',
+      '',
+    ].join('\n');
+    writeFileSync(join(this.facetRoot, 'post-process.css'), postProcess, 'utf-8');
+    writeFileSync(join(this.facetRoot, 'post-process-v4.css'), postProcessV4, 'utf-8');
+    writeFileSync(join(this.facetRoot, 'post-process.entry.ts'), "import './post-process.css';\n", 'utf-8');
+    writeFileSync(join(this.facetRoot, 'post-process-v4.entry.ts'), "import './post-process-v4.css';\n", 'utf-8');
+    this.logger.debug(`Generated Facet CSS entry with ${imports.length} consumer stylesheet import(s)`);
+  }
 
-    this.logger.debug('Copying default styles.css');
 
-    try {
-      const styles = this.readFacetAsset('src/styles.css', stylesCss, 'styles.css');
-      writeFileSync(join(this.facetSrc, 'styles.css'), styles, 'utf-8');
-      this.logger.debug('Copied styles.css');
-    } catch (error) {
-      this.logger.warn(`Failed to copy styles.css: ${error}`);
+  /**
+   * Digest of the generated build configuration that shapes SSR output —
+   * folded into the build-cache key so config changes at an unchanged facet
+   * version invalidate cached bundles.
+   */
+  generatedConfigDigest(): string {
+    const hash = createHash('sha256');
+    const generated = [
+      'vite.config.ts', 'postcss.config.js', 'tailwind.config.js',
+      'tailwind.postprocess.config.js', 'post-process.css', 'post-process-v4.css',
+    ];
+    for (const name of generated) {
+      try {
+        hash.update(name);
+        hash.update('\0');
+        hash.update(readFileSync(join(this.facetRoot, name)));
+        hash.update('\0');
+      } catch { /* variant-specific file not generated */ }
     }
+    return hash.digest('hex');
   }
 
-
   /**
    * Get the path to the .facet/ directory
    */
diff --git a/cli/src/builders/remark-config.test.ts b/cli/src/builders/remark-config.test.ts
index 14ee1cf..04ef9e9 100644
--- a/cli/src/builders/remark-config.test.ts
+++ b/cli/src/builders/remark-config.test.ts
@@ -3,6 +3,7 @@ import {
   extractFrontmatter,
   remarkConfigFromFrontmatter,
   generatePluginCodegen,
+  rehypePluginsArray,
   remarkPluginsArray,
   hasPlugins,
 } from './remark-config.js';
@@ -65,8 +66,21 @@ describe('generatePluginCodegen', () => {
 
 describe('remarkPluginsArray', () => {
   it('keeps the always-on defaults first and appends user items', () => {
-    expect(remarkPluginsArray([])).toBe('[remarkFrontmatter, remarkGfm]');
-    expect(remarkPluginsArray(['_remarkPlugin0'])).toBe('[remarkFrontmatter, remarkGfm, _remarkPlugin0]');
+    expect(remarkPluginsArray([])).toBe("[remarkFrontmatter, remarkGfm, [remarkAlert, { tagName: 'blockquote' }]]");
+    expect(remarkPluginsArray(['_remarkPlugin0'])).toBe(
+      "[remarkFrontmatter, remarkGfm, [remarkAlert, { tagName: 'blockquote' }], _remarkPlugin0]",
+    );
+  });
+});
+
+describe('rehypePluginsArray', () => {
+  it('keeps raw HTML before user items', () => {
+      expect(rehypePluginsArray([])).toBe(
+        "[[rehypeRaw, { passThrough: ['mdxFlowExpression', 'mdxJsxFlowElement', 'mdxJsxTextElement', 'mdxTextExpression', 'mdxjsEsm'] }]]",
+      );
+    expect(rehypePluginsArray(['_rehypePlugin0'])).toBe(
+      "[[rehypeRaw, { passThrough: ['mdxFlowExpression', 'mdxJsxFlowElement', 'mdxJsxTextElement', 'mdxTextExpression', 'mdxjsEsm'] }], _rehypePlugin0]",
+    );
   });
 });
 
diff --git a/cli/src/builders/remark-config.ts b/cli/src/builders/remark-config.ts
index edeafc8..5d864a3 100644
--- a/cli/src/builders/remark-config.ts
+++ b/cli/src/builders/remark-config.ts
@@ -91,5 +91,18 @@ export function generatePluginCodegen(config: RemarkConfig, projectRoot: string)
 
 /** The mdx() `remarkPlugins` array source: always-on defaults plus user items. */
 export function remarkPluginsArray(userItems: string[]): string {
-  return `[remarkFrontmatter, remarkGfm${userItems.length ? ', ' + userItems.join(', ') : ''}]`;
+  return `[remarkFrontmatter, remarkGfm, [remarkAlert, { tagName: 'blockquote' }]${userItems.length ? ', ' + userItems.join(', ') : ''}]`;
+}
+
+/** The mdx() `rehypePlugins` array source: always-on defaults plus user items. */
+export function rehypePluginsArray(userItems: string[]): string {
+  const mdxNodeTypes = [
+    'mdxFlowExpression',
+    'mdxJsxFlowElement',
+    'mdxJsxTextElement',
+    'mdxTextExpression',
+    'mdxjsEsm',
+  ];
+  const passThrough = mdxNodeTypes.map((type) => `'${type}'`).join(', ');
+  return `[[rehypeRaw, { passThrough: [${passThrough}] }]${userItems.length ? ', ' + userItems.join(', ') : ''}]`;
 }
diff --git a/cli/src/bundler/build-cache.test.ts b/cli/src/bundler/build-cache.test.ts
index 244085f..c9137fa 100644
--- a/cli/src/bundler/build-cache.test.ts
+++ b/cli/src/bundler/build-cache.test.ts
@@ -1,5 +1,5 @@
-import { afterEach, describe, expect, it } from 'vitest';
-import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { existsSync, mkdtempSync, mkdirSync, rmSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { tmpdir } from 'node:os';
 import { computeTemplateBuildKey } from './build-cache.js';
@@ -22,37 +22,128 @@ afterEach(() => {
 describe('computeTemplateBuildKey', () => {
   it('is stable for unchanged sources', () => {
     const root = project();
-    expect(computeTemplateBuildKey(root, '1')).toBe(computeTemplateBuildKey(root, '1'));
+    const options = { consumerRoot: root, facetVersion: '1' };
+    expect(computeTemplateBuildKey(options)).toBe(computeTemplateBuildKey(options));
   });
 
   it('changes with source or Facet version', () => {
     const root = project();
-    const initial = computeTemplateBuildKey(root, '1');
+    const initial = computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' });
     writeFileSync(join(root, 'src', 'Template.tsx'), 'export default () => <main />');
-    expect(computeTemplateBuildKey(root, '1')).not.toBe(initial);
-    expect(computeTemplateBuildKey(root, '2')).not.toBe(computeTemplateBuildKey(root, '1'));
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' })).not.toBe(initial);
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '2' }))
+      .not.toBe(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' }));
   });
 
   it('distinguishes entry files and content-addressed fragments', () => {
     const root = project();
     writeFileSync(join(root, 'src', 'Other.tsx'), 'export default () => <aside />');
-    expect(computeTemplateBuildKey(root, '1', 'src/Template.tsx'))
-      .not.toBe(computeTemplateBuildKey(root, '1', 'src/Other.tsx'));
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', templatePath: 'src/Template.tsx' }))
+      .not.toBe(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', templatePath: 'src/Other.tsx' }));
 
     mkdirSync(join(root, '.facet-fragments'));
     writeFileSync(join(root, '.facet-fragments', 'Header-a.tsx'), 'export default () => <header>A</header>');
     writeFileSync(join(root, '.facet-fragments', 'Header-b.tsx'), 'export default () => <header>B</header>');
-    expect(computeTemplateBuildKey(root, '1', '.facet-fragments/Header-a.tsx'))
-      .not.toBe(computeTemplateBuildKey(root, '1', '.facet-fragments/Header-b.tsx'));
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', templatePath: '.facet-fragments/Header-a.tsx' }))
+      .not.toBe(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', templatePath: '.facet-fragments/Header-b.tsx' }));
   });
 
   it('ignores generated and dependency directories', () => {
     const root = project();
-    const initial = computeTemplateBuildKey(root, '1');
+    const initial = computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' });
     mkdirSync(join(root, '.facet'));
     mkdirSync(join(root, 'node_modules'));
     writeFileSync(join(root, '.facet', 'generated.ts'), 'changed');
     writeFileSync(join(root, 'node_modules', 'dependency.js'), 'changed');
-    expect(computeTemplateBuildKey(root, '1')).toBe(initial);
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' })).toBe(initial);
+  });
+
+  it('ignores dot-directories, build outputs, and tool state', () => {
+    const root = project();
+    const initial = computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' });
+    for (const dir of ['.tmp', '.gavel', '.vitest', 'npm-dist', 'dist-sea', 'dist-playground', 'out']) {
+      mkdirSync(join(root, dir));
+      writeFileSync(join(root, dir, 'artifact.json'), `{"dir":"${dir}"}`);
+    }
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' })).toBe(initial);
+  });
+
+  it('still distinguishes entry files that live inside excluded dot-directories', () => {
+    const root = project();
+    mkdirSync(join(root, '.facet-fragments'));
+    writeFileSync(join(root, '.facet-fragments', 'Header-a.tsx'), 'export default () => <header>A</header>');
+    const first = computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', templatePath: '.facet-fragments/Header-a.tsx' });
+    writeFileSync(join(root, '.facet-fragments', 'Header-a.tsx'), 'export default () => <header>changed</header>');
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', templatePath: '.facet-fragments/Header-a.tsx' }))
+      .not.toBe(first);
+  });
+
+  it('reuses the content digest from disk across process restarts', async () => {
+    const root = project();
+    mkdirSync(join(root, '.facet'));
+    const stats: import('./build-cache.js').BuildKeyStats[] = [];
+    const options = { consumerRoot: root, facetVersion: '1', onStats: (s: import('./build-cache.js').BuildKeyStats) => stats.push(s) };
+
+    const first = computeTemplateBuildKey(options);
+    expect(existsSync(join(root, '.facet', 'build-key-cache.json'))).toBe(true);
+
+    vi.resetModules();
+    const fresh = await import('./build-cache.js');
+    const second = fresh.computeTemplateBuildKey(options);
+
+    expect(second).toBe(first);
+    expect(stats[1]).toMatchObject({ contentReused: true, contentBytes: 0 });
+
+    writeFileSync(join(root, 'src', 'Template.tsx'), 'export default () => <main />');
+    vi.resetModules();
+    const third = await import('./build-cache.js');
+    expect(third.computeTemplateBuildKey(options)).not.toBe(first);
+    expect(stats[2]).toMatchObject({ contentReused: false });
+  });
+
+  it('does not create .facet in a pristine consumer root', () => {
+    const root = project();
+    computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' });
+    expect(existsSync(join(root, '.facet'))).toBe(false);
+  });
+
+  it('reports digest stats and reuses the content digest on metadata match', () => {
+    const root = project();
+    const stats: import('./build-cache.js').BuildKeyStats[] = [];
+    const options = { consumerRoot: root, facetVersion: '1', onStats: (s: import('./build-cache.js').BuildKeyStats) => stats.push(s) };
+
+    computeTemplateBuildKey(options);
+    computeTemplateBuildKey(options);
+    writeFileSync(join(root, 'src', 'Template.tsx'), 'export default () => <main />');
+    computeTemplateBuildKey(options);
+
+    expect(stats).toHaveLength(3);
+    expect(stats[0]).toMatchObject({ fileCount: 2, contentReused: false });
+    expect(stats[1]).toMatchObject({ fileCount: 2, contentReused: true });
+    expect(stats[2]).toMatchObject({ fileCount: 2, contentReused: false });
+    expect(stats[0].contentBytes).toBeGreaterThan(0);
+    expect(stats[1].contentBytes).toBe(0);
+    for (const s of stats) {
+      expect(s.walkMs).toBeGreaterThanOrEqual(0);
+      expect(s.totalMs).toBeGreaterThanOrEqual(s.walkMs);
+    }
+  });
+
+  it('changes when the generated build configuration digest changes', () => {
+    const root = project();
+    const base = computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', extraDigest: 'config-a' });
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', extraDigest: 'config-a' })).toBe(base);
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', extraDigest: 'config-b' })).not.toBe(base);
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' })).not.toBe(base);
+  });
+
+  it('separates module modes and ignores consumer package metadata in skip mode', () => {
+    const root = project();
+    const projectMode = computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1' });
+    const skipMode = computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', skipModules: true });
+    expect(skipMode).not.toBe(projectMode);
+
+    writeFileSync(join(root, 'package.json'), '{"name":"changed","dependencies":{"custom":"2.0.0"}}');
+    expect(computeTemplateBuildKey({ consumerRoot: root, facetVersion: '1', skipModules: true })).toBe(skipMode);
   });
 });
diff --git a/cli/src/bundler/build-cache.ts b/cli/src/bundler/build-cache.ts
index 1245f91..f349c91 100644
--- a/cli/src/bundler/build-cache.ts
+++ b/cli/src/bundler/build-cache.ts
@@ -1,14 +1,17 @@
-import { createHash } from 'node:crypto';
-import { readdirSync, readFileSync, statSync, rmSync } from 'node:fs';
+import { createHash, randomUUID } from 'node:crypto';
+import { existsSync, readdirSync, readFileSync, renameSync, statSync, rmSync, writeFileSync } from 'node:fs';
 import { join, relative } from 'node:path';
 
+// Dot-directories (.git, .facet, .tmp, .gavel, .vitest, …) are skipped wholesale
+// in the walk; this set only needs the non-dot build-output/tool dirs.
 const EXCLUDED_DIRS = new Set([
-  '.git', '.facet', '.facet-fragments', 'node_modules', 'dist', 'build', 'coverage', '.next', '.turbo',
+  'node_modules', 'dist', 'build', 'coverage', 'npm-dist', 'dist-sea', 'dist-playground', 'out',
 ]);
 const INCLUDED_METADATA = new Set([
   'package.json', 'pnpm-lock.yaml', 'package-lock.json', 'yarn.lock', 'bun.lock',
   'tsconfig.json', 'tailwind.config.js', 'tailwind.config.ts', 'postcss.config.js',
 ]);
+const MODULE_METADATA = new Set(['package.json', 'pnpm-lock.yaml', 'package-lock.json', 'yarn.lock', 'bun.lock']);
 const SOURCE_EXTENSIONS = new Set([
   '.js', '.jsx', '.mjs', '.cjs', '.ts', '.tsx', '.mts', '.cts', '.md', '.mdx',
   '.css', '.scss', '.sass', '.less', '.json', '.yaml', '.yml', '.svg',
@@ -26,20 +29,87 @@ interface TreeDigestCacheEntry {
 
 const treeDigestCache = new Map<string, TreeDigestCacheEntry>();
 
+// Second-level digest memo persisted under .facet/ so CLI invocations (fresh
+// processes) skip re-reading unchanged source bytes. Correctness is guarded by
+// the metadata digest, so a stale or lost file only costs a re-hash.
+const PERSISTED_DIGEST_FILE = 'build-key-cache.json';
+const PERSISTED_DIGEST_LIMIT = 64;
+
+function persistedDigestPath(consumerRoot: string): string {
+  return join(consumerRoot, '.facet', PERSISTED_DIGEST_FILE);
+}
+
+function readPersistedDigest(consumerRoot: string, entryKey: string): TreeDigestCacheEntry | undefined {
+  try {
+    const entries = JSON.parse(readFileSync(persistedDigestPath(consumerRoot), 'utf-8')).entries;
+    const entry = entries?.[entryKey];
+    return typeof entry?.metadataDigest === 'string' && typeof entry?.contentDigest === 'string'
+      ? entry
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function writePersistedDigest(consumerRoot: string, entryKey: string, entry: TreeDigestCacheEntry): void {
+  // Never create .facet/ as a side effect — this also runs against pristine
+  // template source dirs (workspace keying) that must stay untouched.
+  if (!existsSync(join(consumerRoot, '.facet'))) return;
+  const path = persistedDigestPath(consumerRoot);
+  let entries: Record<string, TreeDigestCacheEntry> = {};
+  try {
+    const existing = JSON.parse(readFileSync(path, 'utf-8')).entries;
+    if (existing && typeof existing === 'object') entries = existing;
+  } catch { /* first write or unreadable file — start fresh */ }
+  delete entries[entryKey];
+  entries[entryKey] = entry;
+  const keys = Object.keys(entries);
+  for (const stale of keys.slice(0, Math.max(0, keys.length - PERSISTED_DIGEST_LIMIT))) delete entries[stale];
+  const staging = `${path}.tmp-${process.pid}-${randomUUID()}`;
+  try {
+    writeFileSync(staging, JSON.stringify({ version: 1, entries }));
+    renameSync(staging, path);
+  } catch {
+    try { rmSync(staging, { force: true }); } catch { /* best effort */ }
+  }
+}
+
+/** Digest cost breakdown, reported via TemplateBuildKeyOptions.onStats. */
+export interface BuildKeyStats {
+  fileCount: number;
+  walkMs: number;
+  contentReused: boolean;
+  contentBytes: number;
+  totalMs: number;
+}
+
 /** Hash template sources and build metadata, intentionally excluding render data. */
-export function computeTemplateBuildKey(
-  consumerRoot: string,
-  facetVersion: string,
-  templatePath?: string,
-): string {
+export interface TemplateBuildKeyOptions {
+  consumerRoot: string;
+  facetVersion: string;
+  templatePath?: string;
+  skipModules?: boolean;
+  /**
+   * Digest of build inputs outside the consumer tree — the generated .facet/
+   * configs. Without it, a config change at an unchanged facet version (dev
+   * builds, tuning flags) silently reuses stale SSR bundles.
+   */
+  extraDigest?: string;
+  onStats?: (stats: BuildKeyStats) => void;
+}
+
+export function computeTemplateBuildKey(options: TemplateBuildKeyOptions): string {
+  const { consumerRoot, facetVersion, templatePath, skipModules = false } = options;
+  const startedAt = performance.now();
   const files: string[] = [];
   const visit = (dir: string): void => {
     for (const entry of readdirSync(dir, { withFileTypes: true })) {
       if (entry.isSymbolicLink()) continue;
       if (entry.isDirectory()) {
-        if (!EXCLUDED_DIRS.has(entry.name)) visit(join(dir, entry.name));
+        if (!entry.name.startsWith('.') && !EXCLUDED_DIRS.has(entry.name)) visit(join(dir, entry.name));
         continue;
       }
+      if (skipModules && MODULE_METADATA.has(entry.name)) continue;
       if (entry.isFile() && (INCLUDED_METADATA.has(entry.name) || SOURCE_EXTENSIONS.has(extension(entry.name)))) {
         files.push(join(dir, entry.name));
       }
@@ -62,33 +132,57 @@ export function computeTemplateBuildKey(
     metadataHash.update(`\0${stats.size}:${stats.mtimeNs}\0`);
   }
 
-  const cacheKey = `${consumerRoot}\0${templatePath ?? ''}`;
+  const moduleMode = skipModules ? 'skip' : 'project';
+  const entryKey = `${templatePath ?? ''}\0${moduleMode}`;
+  const cacheKey = `${consumerRoot}\0${entryKey}`;
   const metadataDigest = metadataHash.digest('hex');
+  const walkMs = performance.now() - startedAt;
+  let contentBytes = 0;
   let contentDigest = treeDigestCache.get(cacheKey)?.metadataDigest === metadataDigest
     ? treeDigestCache.get(cacheKey)!.contentDigest
     : undefined;
+  if (!contentDigest) {
+    const persisted = readPersistedDigest(consumerRoot, entryKey);
+    if (persisted?.metadataDigest === metadataDigest) {
+      contentDigest = persisted.contentDigest;
+      treeDigestCache.set(cacheKey, persisted);
+    }
+  }
+  const contentReused = contentDigest != null;
   if (!contentDigest) {
     const contentHash = createHash('sha256');
     if (selectedEntry) {
       try {
         contentHash.update(`entry:${templatePath}\0`);
-        contentHash.update(readFileSync(selectedEntry));
+        const entryContent = readFileSync(selectedEntry);
+        contentBytes += entryContent.length;
+        contentHash.update(entryContent);
         contentHash.update('\0');
       } catch { /* the normal source traversal will report/build missing entries */ }
     }
     for (const file of files) {
       contentHash.update(relative(consumerRoot, file));
       contentHash.update('\0');
-      contentHash.update(readFileSync(file));
+      const content = readFileSync(file);
+      contentBytes += content.length;
+      contentHash.update(content);
       contentHash.update('\0');
     }
     contentDigest = contentHash.digest('hex');
     treeDigestCache.set(cacheKey, { metadataDigest, contentDigest });
     if (treeDigestCache.size > 100) treeDigestCache.delete(treeDigestCache.keys().next().value!);
+    writePersistedDigest(consumerRoot, entryKey, { metadataDigest, contentDigest });
   }
 
+  options.onStats?.({
+    fileCount: files.length,
+    walkMs: Number(walkMs.toFixed(1)),
+    contentReused,
+    contentBytes,
+    totalMs: Number((performance.now() - startedAt).toFixed(1)),
+  });
   return createHash('sha256')
-    .update(`facet:${facetVersion}\0entry:${templatePath ?? ''}\0${contentDigest}`)
+    .update(`facet:${facetVersion}\0modules:${moduleMode}\0entry:${templatePath ?? ''}\0extra:${options.extraDigest ?? ''}\0${contentDigest}`)
     .digest('hex').slice(0, 24);
 }
 
diff --git a/cli/src/bundler/live-snapshot.ts b/cli/src/bundler/live-snapshot.ts
index 7ce66a0..7cd5aa1 100644
--- a/cli/src/bundler/live-snapshot.ts
+++ b/cli/src/bundler/live-snapshot.ts
@@ -9,6 +9,7 @@
 import type { Browser, Page } from 'puppeteer-core';
 import { launchBrowser } from '../utils/pdf-generator.js';
 import { Logger } from '../utils/logger.js';
+import { renderMermaidInPage } from '../utils/browser-readiness.js';
 
 /** Max time to wait for `data-facet-ready` before falling back to a fixed delay. */
 const READY_TIMEOUT_MS = 15_000;
@@ -24,6 +25,7 @@ async function loadLivePage(browser: Browser, url: string, logger: Logger): Prom
   page.on('pageerror', (err) => pageErrors.push(err.message));
 
   await page.goto(url, { waitUntil: 'networkidle0', timeout: 60_000 });
+  await renderMermaidInPage(page);
   await page.evaluateHandle('document.fonts.ready');
 
   const overlay = await page.evaluate(() => {
diff --git a/cli/src/bundler/module-store.test.ts b/cli/src/bundler/module-store.test.ts
new file mode 100644
index 0000000..12032c6
--- /dev/null
+++ b/cli/src/bundler/module-store.test.ts
@@ -0,0 +1,293 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  readlinkSync,
+  rmSync,
+  utimesSync,
+  writeFileSync,
+} from 'node:fs';
+import { join } from 'node:path';
+import { Logger } from '../utils/logger.js';
+import {
+  createDefaultModulePackageJson,
+  ensureGlobalModuleStore,
+  isStoreCorruptionError,
+  moduleCachePath,
+  prepareProjectModules,
+} from './module-store.js';
+
+const scratchRoot = join(process.cwd(), '.tmp');
+const roots: string[] = [];
+const facetVersion = '1.2.3';
+const sentinelVersions: Record<string, string> = {
+  react: '18.3.1',
+  vite: '6.4.3',
+  '@vitejs/plugin-react': '4.2.0',
+  '@flanksource/facet': facetVersion,
+};
+
+function scratch(): string {
+  mkdirSync(scratchRoot, { recursive: true });
+  const root = mkdtempSync(join(scratchRoot, 'module-store-'));
+  roots.push(root);
+  return root;
+}
+
+function embeddedPackage(): Record<string, unknown> {
+  return {
+    version: facetVersion,
+    packageManager: 'pnpm@9.15.9',
+    dependencies: {
+      react: '^18.3.1',
+      'react-dom': '^18.3.1',
+      '@flanksource/icons': '^1.0.53',
+      '@iconify/react': '^5.1.0',
+      'react-icons': '^5.4.0',
+      'react-xarrows': '^2.0.2',
+      'source-map-support': '^0.5.21',
+      'd3-array': '^3.2.4',
+      'd3-format': '^3.1.0',
+      'd3-interpolate': '^3.0.1',
+      'd3-scale': '^4.0.2',
+      'd3-shape': '^3.2.0',
+      'd3-time': '^3.1.0',
+      'd3-time-format': '^4.1.0',
+    },
+    devDependencies: {
+      vite: '^6.4.3',
+      '@vitejs/plugin-react': '^4.2.0',
+      '@mdx-js/rollup': '^3.0.0',
+      'remark-gfm': '^4.0.0',
+      'remark-frontmatter': '^5.0.0',
+      'remark-github-blockquote-alert': '^2.1.0',
+      'rehype-raw': '^7.0.0',
+      mermaid: '^11.16.0',
+      typescript: '^5.3.0',
+      '@tailwindcss/typography': '^0.5.19',
+      '@tailwindcss/postcss': '^4.1.17',
+      '@tailwindcss/vite': '^4.1.17',
+      tailwindcss: '^3.4.3',
+      autoprefixer: '^10.4.16',
+      postcss: '^8.5.0',
+    },
+    pnpm: { overrides: { vite: '6.4.3' } },
+  };
+}
+
+function populateSentinels(root: string): void {
+  for (const [name, version] of Object.entries(sentinelVersions)) {
+    const packageRoot = join(root, 'node_modules', ...name.split('/'));
+    mkdirSync(packageRoot, { recursive: true });
+    writeFileSync(join(packageRoot, 'package.json'), JSON.stringify({ name, version }));
+  }
+  writeFileSync(join(root, 'pnpm-lock.yaml'), 'lockfileVersion: "9.0"\n');
+}
+
+afterEach(() => {
+  for (const root of roots.splice(0)) rmSync(root, { recursive: true, force: true });
+});
+
+describe('global module store', () => {
+  it('pins Facet to the CLI version in a consumer-independent manifest', () => {
+    expect(createDefaultModulePackageJson({
+      facetVersion,
+      facetPackage: embeddedPackage(),
+    })).toEqual({
+      name: '.facet-default-modules',
+      private: true,
+      type: 'module',
+      packageManager: 'pnpm@9.15.9',
+      dependencies: expect.objectContaining({
+        '@flanksource/facet': facetVersion,
+        react: '^18.3.1',
+        vite: '^6.4.3',
+        lightningcss: '^1.30.2',
+      }),
+      pnpm: { overrides: { vite: '6.4.3' } },
+    });
+  });
+
+  it('keys the immutable install by CLI, Node runtime, and manifest identity', () => {
+    expect(moduleCachePath({
+      cacheRoot: '/cache',
+      facetVersion,
+      platform: 'darwin',
+      arch: 'arm64',
+      nodeAbi: '127',
+    })).toBe('/cache/modules/1.2.3/darwin-arm64-node127');
+    expect(moduleCachePath({
+      cacheRoot: '/cache',
+      facetVersion,
+      platform: 'darwin',
+      arch: 'arm64',
+      nodeAbi: '127',
+      identity: 'abcdef0123456789',
+    })).toBe('/cache/modules/1.2.3/darwin-arm64-node127-abcdef01');
+  });
+
+  it('lets same-version builds with different manifests coexist without reinstalling', async () => {
+    const cacheRoot = scratch();
+    let installs = 0;
+    const install = async (root: string) => {
+      installs++;
+      populateSentinels(root);
+      return '9.15.9';
+    };
+    const logger = new Logger(false);
+    const longPackage = embeddedPackage();
+    const shortPackage = embeddedPackage();
+    delete (shortPackage.devDependencies as Record<string, string>).mermaid;
+
+    const long = await ensureGlobalModuleStore({ cacheRoot, facetVersion, facetPackage: longPackage, logger, install });
+    const short = await ensureGlobalModuleStore({ cacheRoot, facetVersion, facetPackage: shortPackage, logger, install });
+    expect(short.root).not.toBe(long.root);
+    expect(installs).toBe(2);
+
+    await ensureGlobalModuleStore({ cacheRoot, facetVersion, facetPackage: longPackage, logger, install });
+    await ensureGlobalModuleStore({ cacheRoot, facetVersion, facetPackage: shortPackage, logger, install });
+    expect(installs).toBe(2);
+  });
+
+  it('prunes the oldest stores beyond FACET_MODULE_STORE_ENTRIES after an install', async () => {
+    const cacheRoot = scratch();
+    vi.stubEnv('FACET_MODULE_STORE_ENTRIES', '2');
+    try {
+      const install = async (root: string) => {
+        populateSentinels(root);
+        return '9.15.9';
+      };
+      const logger = new Logger(false);
+      const packages = ['^18.3.1', '^18.3.2', '^18.3.3'].map((reactVersion) => {
+        const facetPackage = embeddedPackage();
+        (facetPackage.dependencies as Record<string, string>).react = reactVersion;
+        return facetPackage;
+      });
+
+      const first = await ensureGlobalModuleStore({ cacheRoot, facetVersion, facetPackage: packages[0], logger, install });
+      utimesSync(first.root, new Date(Date.now() - 60_000), new Date(Date.now() - 60_000));
+      const second = await ensureGlobalModuleStore({ cacheRoot, facetVersion, facetPackage: packages[1], logger, install });
+      const third = await ensureGlobalModuleStore({ cacheRoot, facetVersion, facetPackage: packages[2], logger, install });
+
+      expect(existsSync(third.root)).toBe(true);
+      expect(existsSync(second.root)).toBe(true);
+      expect(existsSync(first.root)).toBe(false);
+    } finally {
+      vi.unstubAllEnvs();
+    }
+  });
+
+  it('recognizes the pnpm store-corruption signature', () => {
+    expect(isStoreCorruptionError(
+      'ERR_PNPM_ENOENT  [importPackage /x/node_modules/socks-proxy-agent] the source path is not an existing regular file, reflink \'/store/files/d2/8295\' -> \'/x/README.md\'',
+    )).toBe(true);
+    expect(isStoreCorruptionError('ERR_PNPM_ENOENT  no such file /x/package.json')).toBe(false);
+    expect(isStoreCorruptionError('ERR_PNPM_FETCH_404 package not found')).toBe(false);
+  });
+
+  it('installs once and reuses a verified ready entry without mtime checks', async () => {
+    const cacheRoot = scratch();
+    let installs = 0;
+    const options = {
+      cacheRoot,
+      facetVersion,
+      facetPackage: embeddedPackage(),
+      logger: new Logger(false),
+      install: async (root: string) => {
+        installs++;
+        populateSentinels(root);
+        return '9.15.9';
+      },
+    };
+
+    const first = await ensureGlobalModuleStore(options);
+    const second = await ensureGlobalModuleStore(options);
+
+    expect(second).toEqual(first);
+    expect(installs).toBe(1);
+    expect(JSON.parse(readFileSync(join(first.root, '.ready.json'), 'utf-8'))).toMatchObject({
+      facetVersion,
+      pnpmVersion: '9.15.9',
+    });
+  });
+});
+
+describe('project module preparation', () => {
+  it('clones the global install before reconciling the project manifest', async () => {
+    const root = scratch();
+    const cacheRoot = join(root, 'cache');
+    const consumerRoot = join(root, 'consumer');
+    const facetRoot = join(consumerRoot, '.facet');
+    mkdirSync(facetRoot, { recursive: true });
+    writeFileSync(join(facetRoot, 'package.json'), JSON.stringify({
+      name: '.facet-build',
+      private: true,
+      dependencies: { '@flanksource/facet': facetVersion, 'custom-module': '2.0.0' },
+    }));
+    writeFileSync(join(facetRoot, '.npmrc'), 'node-linker=hoisted\n');
+
+    const seed = await ensureGlobalModuleStore({
+      cacheRoot,
+      facetVersion,
+      facetPackage: embeddedPackage(),
+      logger: new Logger(false),
+      install: async (installRoot) => {
+        populateSentinels(installRoot);
+        return '9.15.9';
+      },
+    });
+    let clones = 0;
+    let reconciles = 0;
+
+    await prepareProjectModules({
+      consumerRoot,
+      facetRoot,
+      seed,
+      logger: new Logger(false),
+      platform: 'darwin',
+      clone: async (source, target) => {
+        clones++;
+        cpSync(source, target, { recursive: true });
+      },
+      install: async (installRoot) => {
+        reconciles++;
+        const manifest = JSON.parse(readFileSync(join(installRoot, 'package.json'), 'utf-8'));
+        expect(manifest.dependencies['custom-module']).toBe('2.0.0');
+        const customRoot = join(installRoot, 'node_modules', 'custom-module');
+        mkdirSync(customRoot, { recursive: true });
+        writeFileSync(join(customRoot, 'package.json'), '{"name":"custom-module","version":"2.0.0"}');
+        return '9.15.9';
+      },
+    });
+
+    expect(clones).toBe(1);
+    expect(reconciles).toBe(1);
+    expect(readFileSync(join(facetRoot, 'node_modules/custom-module/package.json'), 'utf-8')).toContain('2.0.0');
+  });
+
+  it('links skip mode directly to the global install without reconciling project modules', async () => {
+    const root = scratch();
+    const consumerRoot = join(root, 'consumer');
+    const facetRoot = join(consumerRoot, '.facet');
+    const seedRoot = join(root, 'seed');
+    mkdirSync(facetRoot, { recursive: true });
+    mkdirSync(join(seedRoot, 'node_modules'), { recursive: true });
+    writeFileSync(join(facetRoot, 'package.json'), '{}');
+
+    await prepareProjectModules({
+      consumerRoot,
+      facetRoot,
+      seed: { root: seedRoot, nodeModules: join(seedRoot, 'node_modules'), identity: 'seed-id' },
+      logger: new Logger(false),
+      skipModules: true,
+      install: async () => {
+        throw new Error('project install must not run in skip mode');
+      },
+    });
+
+    expect(readlinkSync(join(facetRoot, 'node_modules'))).toBe(join(seedRoot, 'node_modules'));
+  });
+});
diff --git a/cli/src/bundler/module-store.ts b/cli/src/bundler/module-store.ts
new file mode 100644
index 0000000..f8e4d44
--- /dev/null
+++ b/cli/src/bundler/module-store.ts
@@ -0,0 +1,576 @@
+import { createHash, randomUUID } from 'node:crypto';
+import type { ChildProcessWithoutNullStreams } from 'node:child_process';
+import {
+  chmodSync,
+  closeSync,
+  copyFileSync,
+  existsSync,
+  lstatSync,
+  mkdirSync,
+  openSync,
+  readdirSync,
+  readFileSync,
+  readlinkSync,
+  renameSync,
+  rmSync,
+  statSync,
+  symlinkSync,
+  unlinkSync,
+  writeFileSync,
+} from 'node:fs';
+import { homedir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import type { Logger } from '../utils/logger.js';
+import { resolvePackageManager } from '../utils/package-manager.js';
+import { spawnLowPriority } from '../utils/subprocess-priority.js';
+
+const REQUIRED_DEPENDENCIES = [
+  'react',
+  'react-dom',
+  'vite',
+  '@vitejs/plugin-react',
+  '@mdx-js/rollup',
+  'remark-gfm',
+  'remark-frontmatter',
+  'remark-github-blockquote-alert',
+  'rehype-raw',
+  'mermaid',
+  'react-icons',
+  'react-xarrows',
+  '@flanksource/icons',
+  '@iconify/react',
+  'typescript',
+  '@tailwindcss/typography',
+  '@tailwindcss/postcss',
+  '@tailwindcss/vite',
+  'tailwindcss',
+  'autoprefixer',
+  'postcss',
+  'source-map-support',
+  'd3-array',
+  'd3-format',
+  'd3-interpolate',
+  'd3-scale',
+  'd3-shape',
+  'd3-time',
+  'd3-time-format',
+] as const;
+
+const SENTINEL_DEPENDENCIES = ['react', 'vite', '@vitejs/plugin-react', '@flanksource/facet'] as const;
+const LOCK_TIMEOUT_MS = 5 * 60 * 1000;
+const READY_FILE = '.ready.json';
+const PROJECT_READY_FILE = '.modules-ready.json';
+
+export interface EmbeddedFacetPackage {
+  version?: string;
+  packageManager?: string;
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+  pnpm?: Record<string, unknown>;
+}
+
+export interface DefaultModulePackageOptions {
+  facetVersion: string;
+  facetPackage: EmbeddedFacetPackage | Record<string, unknown>;
+}
+
+export interface ModuleCachePathOptions {
+  cacheRoot?: string;
+  facetVersion: string;
+  platform?: NodeJS.Platform | string;
+  arch?: string;
+  nodeAbi?: string;
+  /**
+   * Store identity digest. When set, the path embeds its prefix so builds that
+   * share a version but differ in embedded manifest coexist instead of
+   * serially reinstalling over each other.
+   */
+  identity?: string;
+}
+
+export interface GlobalModuleStore {
+  root: string;
+  nodeModules: string;
+  identity: string;
+}
+
+type InstallModules = (root: string) => Promise<string>;
+type CloneDirectory = (source: string, target: string) => Promise<void>;
+
+export interface EnsureGlobalModuleStoreOptions extends ModuleCachePathOptions, DefaultModulePackageOptions {
+  logger: Logger;
+  install?: InstallModules;
+  facetTarball?: string;
+}
+
+export type InspectGlobalModuleStoreOptions = ModuleCachePathOptions & DefaultModulePackageOptions;
+
+export interface PrepareProjectModulesOptions {
+  consumerRoot: string;
+  facetRoot: string;
+  seed: GlobalModuleStore;
+  logger: Logger;
+  skipModules?: boolean;
+  platform?: NodeJS.Platform | string;
+  install?: InstallModules;
+  clone?: CloneDirectory;
+}
+
+interface ReadyMarker {
+  identity: string;
+  facetVersion: string;
+  platform: string;
+  arch: string;
+  nodeAbi: string;
+  pnpmVersion: string;
+}
+
+export function createDefaultModulePackageJson(options: DefaultModulePackageOptions): Record<string, unknown> {
+  const facetPackage = options.facetPackage as EmbeddedFacetPackage;
+  if (facetPackage.version !== options.facetVersion) {
+    throw new Error(
+      `Facet CLI ${options.facetVersion} cannot seed modules from @flanksource/facet ${facetPackage.version ?? 'unknown'}`,
+    );
+  }
+  if (!facetPackage.packageManager?.startsWith('pnpm@')) {
+    throw new Error('The embedded @flanksource/facet package must pin packageManager to pnpm@<version>');
+  }
+
+  const available = { ...facetPackage.dependencies, ...facetPackage.devDependencies };
+  const dependencies: Record<string, string> = { '@flanksource/facet': options.facetVersion };
+  for (const dependency of REQUIRED_DEPENDENCIES) {
+    const version = available[dependency];
+    if (version) dependencies[dependency] = version;
+  }
+  dependencies.lightningcss = '^1.30.2';
+
+  const manifest: Record<string, unknown> = {
+    name: '.facet-default-modules',
+    private: true,
+    type: 'module',
+    packageManager: facetPackage.packageManager,
+    dependencies,
+  };
+  if (facetPackage.pnpm) manifest.pnpm = facetPackage.pnpm;
+  return manifest;
+}
+
+function resolveCacheRoot(options: Pick<ModuleCachePathOptions, 'cacheRoot'>): string {
+  return options.cacheRoot ?? process.env['FACET_CACHE_DIR'] ?? join(homedir(), '.facet', 'cache');
+}
+
+export function moduleCachePath(options: ModuleCachePathOptions): string {
+  const platform = options.platform ?? process.platform;
+  const arch = options.arch ?? process.arch;
+  const nodeAbi = options.nodeAbi ?? process.versions.modules;
+  if (!nodeAbi) throw new Error('Node did not report a module ABI; cannot select the Facet module cache');
+  const identitySuffix = options.identity ? `-${options.identity.slice(0, 8)}` : '';
+  return join(resolveCacheRoot(options), 'modules', options.facetVersion, `${platform}-${arch}-node${nodeAbi}${identitySuffix}`);
+}
+
+export function defaultModuleNpmrc(): string {
+  return [
+    'node-linker=hoisted',
+    'auto-install-peers=true',
+    'strict-peer-dependencies=false',
+    'frozen-lockfile=false',
+    'prefer-frozen-lockfile=false',
+    'verify-store-integrity=false',
+    'engine-strict=false',
+    'confirm-modules-purge=false',
+    '',
+  ].join('\n');
+}
+
+export async function ensureGlobalModuleStore(
+  options: EnsureGlobalModuleStoreOptions,
+): Promise<GlobalModuleStore> {
+  const { manifest, canonicalManifest, runtime, store } = describeGlobalModuleStore(options);
+  const { root, identity } = store;
+  const staleReason = storeStaleReason(store, options.facetVersion);
+  if (!staleReason) return store;
+
+  mkdirSync(dirname(root), { recursive: true });
+  const release = await acquireLock(`${root}.lock`);
+  try {
+    if (!storeStaleReason(store, options.facetVersion)) return store;
+    removePath(root);
+    const staging = `${root}.tmp-${process.pid}-${randomUUID()}`;
+    mkdirSync(staging, { recursive: true });
+    try {
+      const installManifest = options.facetTarball
+        ? withFacetTarball(manifest, options.facetTarball)
+        : manifest;
+      writeFileSync(join(staging, 'package.json'), JSON.stringify(installManifest, null, 2));
+      writePrivateFile(join(staging, '.npmrc'), defaultModuleNpmrc());
+      options.logger.info(`Installing shared Facet modules for ${options.facetVersion} (${staleReason})...`);
+      const installStartedAt = performance.now();
+      const pnpmVersion = await (options.install ?? ((installRoot: string) => installModules(installRoot, options.logger)))(staging);
+      verifySentinels(staging, options.facetVersion);
+      writeFileSync(join(staging, 'package.json'), canonicalManifest);
+      if (options.facetTarball) removePath(join(staging, 'pnpm-lock.yaml'));
+      const marker: ReadyMarker = { identity, facetVersion: options.facetVersion, ...runtime, pnpmVersion };
+      writeFileSync(join(staging, READY_FILE), JSON.stringify(marker, null, 2));
+      renameSync(staging, root);
+      options.logger.success(`Shared Facet modules ready at ${root} in ${((performance.now() - installStartedAt) / 1000).toFixed(1)}s`);
+      pruneModuleStores(resolveCacheRoot(options), root, options.logger);
+    } catch (error) {
+      removePath(staging);
+      throw error;
+    }
+    return store;
+  } finally {
+    release();
+  }
+}
+
+export function inspectGlobalModuleStore(options: InspectGlobalModuleStoreOptions): GlobalModuleStore {
+  const { store } = describeGlobalModuleStore(options);
+  const staleReason = storeStaleReason(store, options.facetVersion);
+  if (staleReason) {
+    throw new Error(`Shared Facet modules are missing or invalid at ${store.root}: ${staleReason}`);
+  }
+  return store;
+}
+
+export async function prepareProjectModules(options: PrepareProjectModulesOptions): Promise<void> {
+  const nodeModules = join(options.facetRoot, 'node_modules');
+  if (options.skipModules) {
+    removePath(nodeModules);
+    symlinkSync(options.seed.nodeModules, nodeModules, 'junction');
+    removeManagedConsumerLink(options.consumerRoot, nodeModules);
+    writeFileSync(join(options.facetRoot, PROJECT_READY_FILE), JSON.stringify({
+      mode: 'skip',
+      seedIdentity: options.seed.identity,
+    }, null, 2));
+    options.logger.debug(`Using shared Facet modules at ${options.seed.nodeModules}`);
+    return;
+  }
+
+  const manifest = readFileSync(join(options.facetRoot, 'package.json'), 'utf-8');
+  const projectIdentity = digest(`${manifest}\0${options.seed.identity}`);
+  const staleReason = projectModulesStaleReason(options.facetRoot, projectIdentity);
+  if (!staleReason) {
+    options.logger.debug('Project modules match the generated manifest; skipping pnpm install');
+    return;
+  }
+
+  const staging = join(options.consumerRoot, `.facet-install-${process.pid}-${randomUUID()}`);
+  mkdirSync(staging, { recursive: true });
+  try {
+    await seedProjectInstall({ ...options, staging });
+    writeFileSync(join(staging, 'package.json'), manifest);
+    const npmrc = readFileSync(join(options.facetRoot, '.npmrc'), 'utf-8');
+    writePrivateFile(join(staging, '.npmrc'), npmrc);
+    options.logger.info(`Reconciling project modules with pnpm (${staleReason})...`);
+    const installStartedAt = performance.now();
+    await (options.install ?? ((installRoot: string) => installModules(installRoot, options.logger)))(staging);
+    verifySentinels(staging);
+    promoteProjectInstall(staging, options.facetRoot);
+    writeFileSync(join(options.facetRoot, PROJECT_READY_FILE), JSON.stringify({
+      mode: 'project',
+      projectIdentity,
+      seedIdentity: options.seed.identity,
+    }, null, 2));
+    options.logger.success(`Project modules reconciled in ${((performance.now() - installStartedAt) / 1000).toFixed(1)}s`);
+  } finally {
+    removePath(staging);
+  }
+}
+
+async function seedProjectInstall(
+  options: PrepareProjectModulesOptions & { staging: string },
+): Promise<void> {
+  const platform = options.platform ?? process.platform;
+  if (platform !== 'darwin') {
+    options.logger.info(`APFS module cloning is unavailable on ${platform}; using a fresh project install`);
+    return;
+  }
+  try {
+    await (options.clone ?? cloneDirectory)(options.seed.nodeModules, join(options.staging, 'node_modules'));
+    const seedLock = join(options.seed.root, 'pnpm-lock.yaml');
+    if (existsSync(seedLock)) copyFileSync(seedLock, join(options.staging, 'pnpm-lock.yaml'));
+    options.logger.debug('Cloned shared node_modules into the project install staging directory');
+  } catch (error) {
+    if (!isCloneUnavailable(error)) throw error;
+    removePath(join(options.staging, 'node_modules'));
+    removePath(join(options.staging, 'pnpm-lock.yaml'));
+    options.logger.warn(`APFS module cloning is unavailable; using a fresh project install: ${errorMessage(error)}`);
+  }
+}
+
+function promoteProjectInstall(staging: string, facetRoot: string): void {
+  const stagedModules = join(staging, 'node_modules');
+  if (!existsSync(stagedModules)) throw new Error(`pnpm completed without creating ${stagedModules}`);
+  removePath(join(facetRoot, 'node_modules'));
+  renameSync(stagedModules, join(facetRoot, 'node_modules'));
+  const stagedLock = join(staging, 'pnpm-lock.yaml');
+  if (existsSync(stagedLock)) copyFileSync(stagedLock, join(facetRoot, 'pnpm-lock.yaml'));
+}
+
+/** Why the project install must run, or undefined when the marker is valid. */
+function projectModulesStaleReason(facetRoot: string, projectIdentity: string): string | undefined {
+  let marker: { mode?: string; projectIdentity?: string };
+  try {
+    marker = JSON.parse(readFileSync(join(facetRoot, PROJECT_READY_FILE), 'utf-8'));
+  } catch (error) {
+    return `no readable ${PROJECT_READY_FILE} marker: ${errorMessage(error)}`;
+  }
+  if (marker.mode !== 'project') return `ready marker mode is ${marker.mode ?? 'unset'}, expected project`;
+  if (marker.projectIdentity !== projectIdentity) return 'generated manifest changed since the last install';
+  try {
+    verifySentinels(facetRoot);
+  } catch (error) {
+    return errorMessage(error);
+  }
+  try {
+    if (lstatSync(join(facetRoot, 'node_modules')).isSymbolicLink()) return 'node_modules is a skip-modules symlink';
+  } catch (error) {
+    return `node_modules is missing: ${errorMessage(error)}`;
+  }
+  return undefined;
+}
+
+/**
+ * Keep the newest FACET_MODULE_STORE_ENTRIES stores (default 4) across all
+ * versions, never touching the just-installed root, staging dirs, or stores
+ * another process holds a lock on. Runs only after an install, so the ordinary
+ * warm path never pays the scan.
+ */
+function pruneModuleStores(cacheRoot: string, keepRoot: string, logger: Logger): void {
+  const modulesRoot = join(cacheRoot, 'modules');
+  const maxEntries = Math.max(1, parseInt(process.env['FACET_MODULE_STORE_ENTRIES'] ?? '4', 10));
+  const stores: Array<{ path: string; mtimeMs: number }> = [];
+  let versionDirs: string[];
+  try {
+    versionDirs = readdirSync(modulesRoot, { withFileTypes: true })
+      .filter((entry) => entry.isDirectory())
+      .map((entry) => join(modulesRoot, entry.name));
+    for (const versionDir of versionDirs) {
+      for (const entry of readdirSync(versionDir, { withFileTypes: true })) {
+        if (!entry.isDirectory() || entry.name.includes('.tmp-')) continue;
+        const path = join(versionDir, entry.name);
+        if (path === keepRoot || existsSync(`${path}.lock`)) continue;
+        stores.push({ path, mtimeMs: statSync(path).mtimeMs });
+      }
+    }
+  } catch {
+    return;
+  }
+  stores.sort((a, b) => b.mtimeMs - a.mtimeMs);
+  for (const stale of stores.slice(Math.max(0, maxEntries - 1))) {
+    try {
+      rmSync(stale.path, { recursive: true, force: true });
+      logger.debug(`Pruned stale module store ${stale.path}`);
+    } catch { /* another process may be racing the same prune */ }
+  }
+  for (const versionDir of versionDirs) {
+    try {
+      if (readdirSync(versionDir).length === 0) rmSync(versionDir, { recursive: true, force: true });
+    } catch { /* best effort */ }
+  }
+}
+
+/** Why the global store must be (re)installed, or undefined when it is ready. */
+function storeStaleReason(store: GlobalModuleStore, facetVersion: string): string | undefined {
+  let marker: ReadyMarker;
+  try {
+    marker = JSON.parse(readFileSync(join(store.root, READY_FILE), 'utf-8')) as ReadyMarker;
+  } catch (error) {
+    return `no readable ${READY_FILE} marker: ${errorMessage(error)}`;
+  }
+  if (marker.facetVersion !== facetVersion) return `store holds facet ${marker.facetVersion}, expected ${facetVersion}`;
+  if (marker.identity !== store.identity) return 'store identity changed (manifest or runtime)';
+  try {
+    verifySentinels(store.root, facetVersion);
+  } catch (error) {
+    return errorMessage(error);
+  }
+  try {
+    if (lstatSync(store.nodeModules).isSymbolicLink()) return 'store node_modules is a symlink';
+  } catch (error) {
+    return `store node_modules is missing: ${errorMessage(error)}`;
+  }
+  return undefined;
+}
+
+function describeGlobalModuleStore(options: InspectGlobalModuleStoreOptions): {
+  manifest: Record<string, unknown>;
+  canonicalManifest: string;
+  runtime: Pick<ReadyMarker, 'platform' | 'arch' | 'nodeAbi'>;
+  store: GlobalModuleStore;
+} {
+  const manifest = createDefaultModulePackageJson(options);
+  const canonicalManifest = JSON.stringify(manifest, null, 2);
+  const runtime = runtimeIdentity(options);
+  const identity = digest(`${canonicalManifest}\0${runtime.platform}\0${runtime.arch}\0${runtime.nodeAbi}`);
+  const root = moduleCachePath({ ...options, identity });
+  return { manifest, canonicalManifest, runtime, store: { root, nodeModules: join(root, 'node_modules'), identity } };
+}
+
+function verifySentinels(root: string, facetVersion?: string): void {
+  for (const dependency of SENTINEL_DEPENDENCIES) {
+    const packagePath = join(root, 'node_modules', ...dependency.split('/'), 'package.json');
+    if (!existsSync(packagePath)) throw new Error(`Module install is missing required package ${dependency}`);
+    if (dependency === '@flanksource/facet' && facetVersion) {
+      const installed = JSON.parse(readFileSync(packagePath, 'utf-8'));
+      if (installed.version !== facetVersion) {
+        throw new Error(`Shared modules contain @flanksource/facet ${installed.version ?? 'unknown'}, expected ${facetVersion}`);
+      }
+    }
+  }
+}
+
+/**
+ * pnpm's ERR_PNPM_ENOENT during importPackage/reflink means the content store
+ * index references files that no longer exist — verify-store-integrity=false
+ * (which we set for speed) lets that go undetected until link time.
+ */
+export function isStoreCorruptionError(output: string): boolean {
+  return /ERR_PNPM_ENOENT/.test(output) && /(importPackage|reflink)/.test(output);
+}
+
+async function installModules(root: string, logger?: Logger): Promise<string> {
+  const manager = await resolvePackageManager(root);
+  const baseArgs = [
+    'install',
+    '--prefer-offline',
+    '--ignore-workspace',
+    '--ignore-scripts',
+    '--config.confirmModulesPurge=false',
+  ];
+  try {
+    await runProcess(manager.cmd, baseArgs, root, { ...process.env, CI: 'true' });
+  } catch (error) {
+    const output = errorMessage(error);
+    if (!isStoreCorruptionError(output)) throw error;
+    const corruptLine = output.split('\n').find((line) => line.includes('ERR_PNPM_ENOENT'))?.trim() ?? 'ERR_PNPM_ENOENT';
+    logger?.warn(`pnpm content store looks corrupted (${corruptLine}); retrying with store integrity verification`);
+    try {
+      await runProcess(manager.cmd, [...baseArgs, '--config.verifyStoreIntegrity=true'], root, { ...process.env, CI: 'true' });
+    } catch (retryError) {
+      throw new Error(
+        `pnpm install failed even with store integrity verification — the pnpm content store is corrupted. ` +
+        `Inspect it with \`corepack pnpm@${manager.version} store status\` and re-add the affected packages, ` +
+        `or remove the store directory to force a clean re-download.\n${errorMessage(retryError)}`,
+      );
+    }
+  }
+  return manager.version;
+}
+
+async function cloneDirectory(source: string, target: string): Promise<void> {
+  await runProcess('/bin/cp', ['-cR', source, target], dirname(target));
+}
+
+function runProcess(
+  command: string,
+  args: string[],
+  cwd: string,
+  env: NodeJS.ProcessEnv = process.env,
+): Promise<void> {
+  return new Promise((resolvePromise, reject) => {
+    const child = spawnLowPriority<ChildProcessWithoutNullStreams>({
+      command,
+      args,
+      options: { cwd, env, stdio: ['ignore', 'pipe', 'pipe'] },
+    });
+    const stdout: Buffer[] = [];
+    const stderr: Buffer[] = [];
+    child.stdout.on('data', (chunk: Buffer) => stdout.push(chunk));
+    child.stderr.on('data', (chunk: Buffer) => stderr.push(chunk));
+    child.on('error', reject);
+    child.on('close', (code) => {
+      if (code === 0) {
+        resolvePromise();
+        return;
+      }
+      const output = Buffer.concat([...stdout, ...stderr]).toString().trim();
+      const error = new Error(`${command} ${args.join(' ')} failed with exit ${code}: ${output}`) as NodeJS.ErrnoException;
+      reject(error);
+    });
+  });
+}
+
+async function acquireLock(path: string): Promise<() => void> {
+  const deadline = Date.now() + LOCK_TIMEOUT_MS;
+  while (true) {
+    let descriptor: number;
+    try {
+      descriptor = openSync(path, 'wx');
+      writeFileSync(descriptor, JSON.stringify({ pid: process.pid }));
+      return () => {
+        closeSync(descriptor);
+        try { unlinkSync(path); } catch { /* another process already cleaned a stale lock */ }
+      };
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error;
+      if (!lockOwnerIsAlive(path)) {
+        try { unlinkSync(path); } catch { /* another waiter won the race */ }
+        continue;
+      }
+      if (Date.now() >= deadline) throw new Error(`Timed out waiting for Facet module cache lock ${path}`);
+      await new Promise<void>((resolveWait) => setTimeout(resolveWait, 100));
+    }
+  }
+}
+
+function lockOwnerIsAlive(path: string): boolean {
+  try {
+    const pid = Number(JSON.parse(readFileSync(path, 'utf-8')).pid);
+    if (!Number.isSafeInteger(pid) || pid <= 0) return false;
+    process.kill(pid, 0);
+    return true;
+  } catch (error) {
+    return (error as NodeJS.ErrnoException).code === 'EPERM';
+  }
+}
+
+function withFacetTarball(manifest: Record<string, unknown>, tarball: string): Record<string, unknown> {
+  const dependencies = { ...(manifest.dependencies as Record<string, string>) };
+  dependencies['@flanksource/facet'] = `file:${resolve(tarball)}`;
+  return { ...manifest, dependencies };
+}
+
+function runtimeIdentity(options: ModuleCachePathOptions): Pick<ReadyMarker, 'platform' | 'arch' | 'nodeAbi'> {
+  const nodeAbi = options.nodeAbi ?? process.versions.modules;
+  if (!nodeAbi) throw new Error('Node did not report a module ABI; cannot identify the Facet module cache');
+  return { platform: options.platform ?? process.platform, arch: options.arch ?? process.arch, nodeAbi };
+}
+
+function removeManagedConsumerLink(consumerRoot: string, nodeModules: string): void {
+  const link = join(consumerRoot, 'node_modules');
+  try {
+    if (lstatSync(link).isSymbolicLink() && readlinkSync(link) === nodeModules) unlinkSync(link);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') throw error;
+  }
+}
+
+function removePath(path: string): void {
+  try {
+    if (lstatSync(path).isSymbolicLink()) unlinkSync(path);
+    else rmSync(path, { recursive: true, force: true });
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') throw error;
+  }
+}
+
+function isCloneUnavailable(error: unknown): boolean {
+  const code = (error as NodeJS.ErrnoException).code;
+  if (code && ['EXDEV', 'ENOTSUP', 'EOPNOTSUPP', 'ENOSYS'].includes(code)) return true;
+  return /operation not supported|not supported|cross-device|clonefile/i.test(errorMessage(error));
+}
+
+function writePrivateFile(path: string, content: string): void {
+  writeFileSync(path, content, { encoding: 'utf-8', mode: 0o600 });
+  chmodSync(path, 0o600);
+}
+
+function digest(content: string): string {
+  return createHash('sha256').update(content).digest('hex');
+}
+
+function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
diff --git a/cli/src/bundler/ssr-pool.ts b/cli/src/bundler/ssr-pool.ts
index ed13599..8105b08 100644
--- a/cli/src/bundler/ssr-pool.ts
+++ b/cli/src/bundler/ssr-pool.ts
@@ -1,14 +1,15 @@
-import { spawn, type ChildProcessWithoutNullStreams } from 'node:child_process';
+import type { ChildProcessWithoutNullStreams } from 'node:child_process';
 import { createInterface } from 'node:readline';
 import { AsyncLocalStorage } from 'node:async_hooks';
 import { selfExecBase } from '../utils/self-exec.js';
 import type { Logger } from '../utils/logger.js';
+import { spawnLowPriority } from '../utils/subprocess-priority.js';
 
 export interface PersistentLoaderRequest {
   facetRoot: string;
   cacheKey: string;
   data: Record<string, unknown>;
-  verbose?: boolean;
+  verbosity?: number;
 }
 
 export interface PersistentLoaderResult {
@@ -30,6 +31,11 @@ class SsrLoaderProcess {
   private exited = false;
   private idleTimer?: ReturnType<typeof setTimeout>;
   private lastUsedAt = Date.now();
+  private teeStderr = false;
+
+  enableStderrTee(): void {
+    this.teeStderr = true;
+  }
 
   constructor(
     readonly facetRoot: string,
@@ -37,13 +43,18 @@ class SsrLoaderProcess {
     private readonly onExit: () => void,
   ) {
     const [command, ...baseArgs] = selfExecBase();
-    this.child = spawn(command, [...baseArgs, `--facet-root=${facetRoot}`], {
-      cwd: facetRoot,
-      env: { ...process.env, FACET_LOADER: 'ssr-daemon' },
-      stdio: ['pipe', 'pipe', 'pipe'],
+    this.child = spawnLowPriority<ChildProcessWithoutNullStreams>({
+      command,
+      args: [...baseArgs, `--facet-root=${facetRoot}`],
+      options: {
+        cwd: facetRoot,
+        env: { ...process.env, FACET_LOADER: 'ssr-daemon' },
+        stdio: ['pipe', 'pipe', 'pipe'],
+      },
     });
     this.child.stderr.on('data', (chunk: Buffer) => {
       this.stderr = (this.stderr + chunk.toString()).slice(-64 * 1024);
+      if (this.teeStderr) process.stderr.write(chunk);
     });
     createInterface({ input: this.child.stdout }).on('line', (line) => {
       let reply: Reply;
@@ -85,14 +96,14 @@ class SsrLoaderProcess {
     return this.lastUsedAt;
   }
 
-  request(data: Record<string, unknown>, cacheKey: string, verbose = false): Promise<PersistentLoaderResult> {
+  request(payload: Record<string, unknown>): Promise<PersistentLoaderResult> {
     if (this.exited) return Promise.reject(new Error('Persistent SSR loader is not running'));
     if (this.idleTimer) clearTimeout(this.idleTimer);
     this.lastUsedAt = Date.now();
     const id = this.nextId++;
     return new Promise((resolve, reject) => {
       this.pending.set(id, { resolve, reject });
-      this.child.stdin.write(`${JSON.stringify({ id, data, cacheKey, verbose })}\n`, (error) => {
+      this.child.stdin.write(`${JSON.stringify({ id, ...payload })}\n`, (error) => {
         if (!error) return;
         this.pending.delete(id);
         reject(error);
@@ -147,6 +158,24 @@ export async function runPersistentSsrLoader(
   request: PersistentLoaderRequest,
   logger: Logger,
 ): Promise<PersistentLoaderResult> {
+  const loader = await acquireLoader(request.facetRoot, logger);
+  const verbosity = request.verbosity ?? logger.verbosity();
+  if (verbosity >= 1) loader.enableStderrTee();
+  return loader.request({ data: request.data, cacheKey: request.cacheKey, verbosity });
+}
+
+/** Build post-process CSS on the facetRoot's warm daemon Vite. */
+export async function runPersistentCssBuild(
+  request: { facetRoot: string; content: string },
+  logger: Logger,
+): Promise<string> {
+  const loader = await acquireLoader(request.facetRoot, logger);
+  const result = await loader.request({ kind: 'css', content: request.content });
+  return result.css;
+}
+
+async function acquireLoader(facetRoot: string, logger: Logger): Promise<SsrLoaderProcess> {
+  const request = { facetRoot };
   let loader = loaders.get(request.facetRoot);
   if (!loader) {
     const maxLoaders = validEnvInteger('FACET_MAX_SSR_LOADERS', 4, 1);
@@ -199,7 +228,7 @@ export async function runPersistentSsrLoader(
   } else {
     unownedLoaders.add(request.facetRoot);
   }
-  return loader.request(request.data, request.cacheKey, request.verbose);
+  return loader;
 }
 
 export async function shutdownPersistentSsrLoaders(owner?: PersistentSsrLoaderOwner): Promise<void> {
diff --git a/cli/src/bundler/vite-builder.ts b/cli/src/bundler/vite-builder.ts
index c0aaf9f..a28a338 100644
--- a/cli/src/bundler/vite-builder.ts
+++ b/cli/src/bundler/vite-builder.ts
@@ -6,20 +6,20 @@
  * in the CLI bundle. Errors point to original .tsx files with full source maps.
  */
 
-import { $ } from '../utils/shell.js';
-import { spawn } from 'node:child_process';
 import { selfExecBase } from '../utils/self-exec.js';
 import { join, resolve } from 'path';
 import { writeFileSync, readFileSync, mkdtempSync, rmSync } from 'fs';
 import { tmpdir } from 'os';
 import { Logger } from '../utils/logger.js';
-import { FacetDirectory } from '../builders/facet-directory.js';
+import { FacetDirectory, resolveFacetPackageOverride } from '../builders/facet-directory.js';
 import { readRemarkFrontmatter } from '../utils/frontmatter.js';
-import { resolvePackageManager } from '../utils/package-manager.js';
-import { RenderProfiler } from '../utils/performance.js';
+import { RenderProfiler, RenderTimings } from '../utils/performance.js';
 import { computeTemplateBuildKey, pruneBuildCache } from './build-cache.js';
 import { VERSION } from '../version-generated.js';
 import { runPersistentSsrLoader } from './ssr-pool.js';
+import { assetPath } from '../utils/assets.js';
+import { ensureGlobalModuleStore, prepareProjectModules } from './module-store.js';
+import { spawnLowPriority } from '../utils/subprocess-priority.js';
 
 export interface BuildResult {
   html: string;
@@ -36,6 +36,9 @@ export interface BuildOptions {
   logger: Logger;
   sandbox?: string | boolean;
   persistentLoader?: boolean;
+  timings?: RenderTimings;
+  timingPhase?: 'vite' | 'header-generation';
+  skipModules?: boolean;
 }
 
 interface LoaderResult {
@@ -47,53 +50,28 @@ interface LoaderResult {
  * Build template using Vite SSR mode (via external script)
  * Errors will point to original source files with full stack traces
  */
-async function pnpmInstall(facetRoot: string, logger: Logger): Promise<void> {
-  // --ignore-workspace: when the consumer is a pnpm workspace whose globs
-  //   absorb .facet/, pnpm runs across "all N workspace projects" and ignores
-  //   .facet/.npmrc. Treating .facet/ as standalone restores our config.
-  // --config.confirmModulesPurge=false + CI=true: pnpm aborts with
-  //   ERR_PNPM_ABORTED_REMOVE_MODULES_DIR_NO_TTY when it wants to purge a
-  //   foreign node_modules under a non-TTY shell (Bun's $). Both signals
-  //   override .npmrc so this works even when workspace config wins.
-  const result = await $`cd ${facetRoot} && CI=true pnpm install --ignore-workspace --ignore-scripts --config.confirmModulesPurge=false 2>&1`.quiet();
-  logger.debug(result.stdout.toString());
-}
-
-function errorOutput(err: any): string {
-  return err?.stdout?.toString?.() || err?.stderr?.toString?.() || err?.message || String(err);
-}
-
-export async function installWithRetry(facetDir: FacetDirectory, logger: Logger): Promise<void> {
+export async function prepareModules(
+  facetDir: FacetDirectory,
+  logger: Logger,
+  skipModules = false,
+): Promise<void> {
   const facetRoot = facetDir.getFacetRoot();
-  if (!facetDir.needsInstall()) {
-    logger.debug('Dependencies up to date, skipping pnpm install');
-    facetDir.linkConsumerNodeModules();
-    return;
-  }
-  // Pre-nuke when the install is detectably broken (legacy symlinked
-  // node_modules, foreign lockfile). Saves a guaranteed-to-fail first attempt
-  // and prevents pnpm's ENOENT-on-mkdir when it tries to materialize into a
-  // dangling symlink.
-  if (facetDir.isInstallBroken()) {
-    logger.info('Detected stale .facet/ install state, cleaning before install');
-    facetDir.nukeInstall();
-  }
-  const pm = await resolvePackageManager(facetRoot);
-  logger.info(`pnpm install (pnpm ${pm.version})...`);
-  const t0 = Date.now();
-  try {
-    await pnpmInstall(facetRoot, logger);
-  } catch (firstErr: any) {
-    logger.warn(`pnpm install failed; nuking .facet/ and retrying once. Reason:\n${errorOutput(firstErr)}`);
-    facetDir.nukeInstall();
-    try {
-      await pnpmInstall(facetRoot, logger);
-    } catch (secondErr: any) {
-      throw new Error(`pnpm install failed twice in ${facetRoot}:\n${errorOutput(secondErr)}`);
-    }
-  }
-  logger.info(`pnpm install completed in ${Date.now() - t0}ms`);
-  facetDir.linkConsumerNodeModules();
+  const facetPackage = JSON.parse(readFileSync(assetPath('package.json'), 'utf-8'));
+  const override = resolveFacetPackageOverride();
+  const seed = await ensureGlobalModuleStore({
+    facetVersion: VERSION,
+    facetPackage,
+    logger,
+    facetTarball: skipModules && override?.kind === 'tarball' ? override.path : undefined,
+  });
+  await prepareProjectModules({
+    consumerRoot: resolve(facetRoot, '..'),
+    facetRoot,
+    seed,
+    logger,
+    skipModules,
+  });
+  if (!skipModules) facetDir.linkConsumerNodeModules();
 }
 
 // Patterns that indicate the loader failed because a *package* (not a relative
@@ -121,12 +99,34 @@ interface LoaderArgs {
   sandbox?: string | boolean;
 }
 
-function runLoaderOnce(args: LoaderArgs): Promise<{ stderr?: Buffer | string; }> {
+// One-shot loaders orphaned by a dying parent keep burning CPU/memory for the
+// rest of their build. Reap them on parent exit and on TERM/INT.
+const liveLoaders = new Set<import('node:child_process').ChildProcess>();
+let loaderReaperInstalled = false;
+
+function installLoaderReaper(): void {
+  if (loaderReaperInstalled) return;
+  loaderReaperInstalled = true;
+  const reap = (): void => {
+    for (const child of liveLoaders) child.kill('SIGKILL');
+    liveLoaders.clear();
+  };
+  process.on('exit', reap);
+  for (const signal of ['SIGTERM', 'SIGINT'] as const) {
+    process.on(signal, () => {
+      reap();
+      process.exit(signal === 'SIGTERM' ? 143 : 130);
+    });
+  }
+}
+
+function runLoaderOnce(args: LoaderArgs, logger: Logger): Promise<{ stderr?: Buffer | string; }> {
   const loaderArgs = [
     `--facet-root=${args.facetRoot}`,
     `--data-file=${args.dataFilePath}`,
     `--output-file=${args.resultFilePath}`,
     `--cache-key=${args.cacheKey}`,
+    `--verbosity=${logger.verbosity()}`,
   ];
   const settings = typeof args.sandbox === 'string' ? args.sandbox : '/etc/facet/srt-settings.json';
   const parts = args.sandbox
@@ -135,15 +135,39 @@ function runLoaderOnce(args: LoaderArgs): Promise<{ stderr?: Buffer | string; }>
   const [cmd, ...argv] = parts;
 
   return new Promise((resolve, reject) => {
-    const child = spawn(cmd, argv, {
-      cwd: args.facetRoot,
-      env: { ...process.env, FACET_LOADER: 'ssr' },
-      stdio: ['ignore', 'ignore', 'pipe'],
+    installLoaderReaper();
+    const child = spawnLowPriority({
+      command: cmd,
+      args: argv,
+      options: {
+        cwd: args.facetRoot,
+        env: { ...process.env, FACET_LOADER: 'ssr' },
+        stdio: ['ignore', 'pipe', 'pipe'],
+      },
     });
+    liveLoaders.add(child);
+    // A slow loader with buffered-only output is indistinguishable from a hang:
+    // tee everything live (stderr also stays captured for missing-dep retry
+    // detection and error messages), and heartbeat in case Vite prints nothing.
+    const startedAt = performance.now();
+    const heartbeat = setInterval(() => {
+      logger.info(`Vite SSR build still running (${Math.round((performance.now() - startedAt) / 1000)}s)...`);
+    }, 15_000);
+    heartbeat.unref();
     const stderrChunks: Buffer[] = [];
-    child.stderr?.on('data', (c: Buffer) => stderrChunks.push(c));
-    child.on('error', reject);
+    child.stdout?.on('data', (c: Buffer) => process.stderr.write(c));
+    child.stderr?.on('data', (c: Buffer) => {
+      stderrChunks.push(c);
+      process.stderr.write(c);
+    });
+    child.on('error', (error) => {
+      clearInterval(heartbeat);
+      liveLoaders.delete(child);
+      reject(error);
+    });
     child.on('close', (code) => {
+      clearInterval(heartbeat);
+      liveLoaders.delete(child);
       const stderr = Buffer.concat(stderrChunks);
       if (code !== 0) {
         const err = new Error(`SSR loader exited with code ${code}`) as Error & { stderr: Buffer };
@@ -160,10 +184,10 @@ async function runLoaderWithRetry(
   facetDir: FacetDirectory,
   args: LoaderArgs,
   logger: Logger,
+  skipModules: boolean,
 ): Promise<LoaderResult> {
   try {
-    const r = await runLoaderOnce(args);
-    if (r.stderr != null && r.stderr.length > 0) console.error(r.stderr.toString());
+    await runLoaderOnce(args, logger);
     return JSON.parse(readFileSync(args.resultFilePath, 'utf-8'));
   } catch (firstErr: any) {
     const stderr = firstErr?.stderr?.toString?.() || '';
@@ -171,12 +195,18 @@ async function runLoaderWithRetry(
       const raw = stderr || (firstErr instanceof Error ? firstErr.message : String(firstErr));
       throw new Error(`Vite SSR build failed:\n${deduplicateOutput(raw)}`);
     }
+    if (skipModules) {
+      const raw = stderr || (firstErr instanceof Error ? firstErr.message : String(firstErr));
+      throw new Error(
+        `Vite could not resolve a module while --skip-modules is active. ` +
+        `This mode only provides Facet's default packages; rerun without --skip-modules for consumer dependencies.\n${deduplicateOutput(raw)}`,
+      );
+    }
     logger.warn('Loader failed with missing-dep signature; rebuilding .facet/ once.');
     facetDir.nukeInstall();
-    await installWithRetry(facetDir, logger);
+    await prepareModules(facetDir, logger);
     try {
-      const r = await runLoaderOnce(args);
-      if (r.stderr != null && r.stderr.length > 0) console.error(r.stderr.toString());
+      await runLoaderOnce(args, logger);
       return JSON.parse(readFileSync(args.resultFilePath, 'utf-8'));
     } catch (secondErr: any) {
       const out = secondErr?.stderr?.toString?.() || String(secondErr);
@@ -210,7 +240,7 @@ export function buildTemplate(options: BuildOptions): Promise<BuildResult> {
 async function buildTemplateUnlocked(options: BuildOptions): Promise<BuildResult> {
   const { templatePath, data, consumerRoot = process.cwd(), logger } = options;
   const profiler = new RenderProfiler('template-build', logger);
-  const buildCacheKey = computeTemplateBuildKey(consumerRoot, VERSION, templatePath);
+  const timings = options.timings ?? new RenderTimings();
 
   logger.debug(`Building template: ${templatePath}`);
 
@@ -220,24 +250,42 @@ async function buildTemplateUnlocked(options: BuildOptions): Promise<BuildResult
     templateFile: templatePath,
     logger,
     remarkConfig: readRemarkFrontmatter(resolve(consumerRoot, templatePath)),
+    skipModules: options.skipModules,
   });
 
-  facetDir.create();
-  await facetDir.generatePackageJson();
+  await profiler.measure('scaffold', async () => {
+    facetDir.create();
+    await facetDir.generatePackageJson();
+    facetDir.symlinkConsumerFiles();
+    facetDir.copyStylesCss();
+    facetDir.generateEntryWrapper();
+    facetDir.generateTsConfig();
+    facetDir.generateViteConfig();
+    facetDir.generatePostCSSConfig();
+    facetDir.generateTailwindConfig();
+  });
 
-  const facetRoot = facetDir.getFacetRoot();
+  // Keyed after scaffolding so the generated config participates: a config
+  // change at an unchanged facet version must not reuse stale SSR bundles.
+  const buildCacheKey = await profiler.measure('build-cache-key', async () => computeTemplateBuildKey({
+    consumerRoot,
+    facetVersion: VERSION,
+    templatePath,
+    skipModules: options.skipModules,
+    extraDigest: facetDir.generatedConfigDigest(),
+    onStats: (stats) => logger.debug(
+      `Build key digest: ${stats.fileCount} files walked in ${stats.walkMs}ms, `
+      + (stats.contentReused ? 'content digest reused' : `${stats.contentBytes} bytes hashed`)
+      + `, total ${stats.totalMs}ms`,
+    ),
+  }));
 
-  facetDir.symlinkConsumerFiles();
-  facetDir.copyStylesCss();
-  facetDir.generateEntryWrapper();
-  facetDir.generateTsConfig();
-  facetDir.generateViteConfig();
-  facetDir.generatePostCSSConfig();
-  facetDir.generateTailwindConfig();
+  const facetRoot = facetDir.getFacetRoot();
 
-  // Install dependencies with pnpm. pnpm's content-addressable store gives
-  // us fast reuse across renders — no facet-side cache needed.
-  await profiler.measure('dependencies', () => installWithRetry(facetDir, logger));
+  // Link the immutable shared store directly, or clone it and reconcile the
+  // generated project manifest when consumer dependencies are enabled.
+  await timings.measure('dependency-install', () =>
+    profiler.measure('dependencies', () => prepareModules(facetDir, logger, options.skipModules)));
 
   // Re-exec the CLI as an SSR loader subprocess (Vite runs from .facet/).
   logger.info('Loading template with Vite SSR...');
@@ -246,20 +294,22 @@ async function buildTemplateUnlocked(options: BuildOptions): Promise<BuildResult
   const resultFilePath = join(tmpDir, 'result.json');
   writeFileSync(dataFilePath, JSON.stringify(data));
   try {
-    const loaderResult = await profiler.measure('vite-ssr-and-react-render', async () => {
-      if (options.persistentLoader && !options.sandbox) {
-        try {
-          return await runPersistentSsrLoader({ facetRoot, cacheKey: buildCacheKey, data }, logger);
-        } catch (error) {
-          logger.warn(`Persistent SSR loader failed; falling back to one-shot loader: ${error instanceof Error ? error.message : String(error)}`);
+    const loaderResult = await timings.measure(options.timingPhase ?? 'vite', () =>
+      profiler.measure('vite-ssr-and-react-render', async () => {
+        if (options.persistentLoader && !options.sandbox) {
+          try {
+            return await runPersistentSsrLoader({ facetRoot, cacheKey: buildCacheKey, data }, logger);
+          } catch (error) {
+            logger.warn(`Persistent SSR loader failed; falling back to one-shot loader: ${error instanceof Error ? error.message : String(error)}`);
+          }
         }
-      }
-      return runLoaderWithRetry(
-        facetDir,
-        { facetRoot, dataFilePath, resultFilePath, cacheKey: buildCacheKey, sandbox: options.sandbox },
-        logger,
-      );
-    });
+        return runLoaderWithRetry(
+          facetDir,
+          { facetRoot, dataFilePath, resultFilePath, cacheKey: buildCacheKey, sandbox: options.sandbox },
+          logger,
+          options.skipModules ?? false,
+        );
+      }));
     pruneBuildCache(join(facetRoot, 'build-cache'));
     logger.debug(`Rendered HTML: ${loaderResult.html.length} bytes, CSS: ${loaderResult.css.length} bytes`);
     return {
diff --git a/cli/src/bundler/vite-server.ts b/cli/src/bundler/vite-server.ts
index 13b4108..c2cdddf 100644
--- a/cli/src/bundler/vite-server.ts
+++ b/cli/src/bundler/vite-server.ts
@@ -7,20 +7,24 @@
  * template with a live DOM — required for diagram components (react-xarrows).
  */
 
-import { spawn, type ChildProcess } from 'node:child_process';
+import type { ChildProcess } from 'node:child_process';
 import { once } from 'node:events';
 import { resolve } from 'node:path';
 import { Logger } from '../utils/logger.js';
 import { FacetDirectory } from '../builders/facet-directory.js';
-import { installWithRetry } from './vite-builder.js';
+import { prepareModules } from './vite-builder.js';
 import { selfExecBase } from '../utils/self-exec.js';
 import { readRemarkFrontmatter } from '../utils/frontmatter.js';
+import { RenderTimings } from '../utils/performance.js';
+import { spawnLowPriority } from '../utils/subprocess-priority.js';
 
 export interface ViteServerOptions {
   templatePath: string;
   data: Record<string, unknown>;
   consumerRoot?: string;
   logger: Logger;
+  timings?: RenderTimings;
+  skipModules?: boolean;
 }
 
 export interface ViteServer {
@@ -38,12 +42,14 @@ const STARTUP_TIMEOUT_MS = 60_000;
  */
 export async function startViteServer(options: ViteServerOptions): Promise<ViteServer> {
   const { templatePath, data, consumerRoot = process.cwd(), logger } = options;
+  const timings = options.timings ?? new RenderTimings();
 
   const facetDir = new FacetDirectory({
     consumerRoot,
     templateFile: templatePath,
     logger,
     remarkConfig: readRemarkFrontmatter(resolve(consumerRoot, templatePath)),
+    skipModules: options.skipModules,
   });
   facetDir.create();
   await facetDir.generatePackageJson();
@@ -54,19 +60,24 @@ export async function startViteServer(options: ViteServerOptions): Promise<ViteS
   facetDir.generateTailwindConfig();
   facetDir.generateClientScaffold(data);
 
-  await installWithRetry(facetDir, logger);
+  await timings.measure('dependency-install', () => prepareModules(facetDir, logger, options.skipModules));
 
   const facetRoot = facetDir.getFacetRoot();
 
   logger.info('Starting Vite dev server for live render...');
-  const [cmd, ...baseArgs] = selfExecBase();
-  const proc = spawn(cmd, [...baseArgs, `--facet-root=${facetRoot}`], {
-    cwd: facetRoot,
-    env: { ...process.env, FACET_LOADER: 'dev' },
-    stdio: ['ignore', 'pipe', 'inherit'],
+  const { proc, url } = await timings.measure('vite', async () => {
+    const [cmd, ...baseArgs] = selfExecBase();
+    const proc = spawnLowPriority({
+      command: cmd,
+      args: [...baseArgs, `--facet-root=${facetRoot}`],
+      options: {
+        cwd: facetRoot,
+        env: { ...process.env, FACET_LOADER: 'dev' },
+        stdio: ['ignore', 'pipe', 'inherit'],
+      },
+    });
+    return { proc, url: await readHandshake(proc) };
   });
-
-  const url = await readHandshake(proc);
   logger.debug(`Vite dev server ready at ${url}`);
 
   return {
diff --git a/cli/src/cli.ts b/cli/src/cli.ts
index d1debe1..c937005 100644
--- a/cli/src/cli.ts
+++ b/cli/src/cli.ts
@@ -6,8 +6,11 @@ import { Logger } from './utils/logger.js';
 import { preflight, PreflightError } from './commands/doctor.js';
 import { resolveOutput } from './utils/resolve-output.js';
 import { VERSION, BUILD_DATE, GIT_COMMIT } from './version-generated.js';
+import { formatVersion } from './version.js';
 import type { PDFMargins } from './utils/pdf-generator.js';
 import type { PDFEncryptionOptions, PDFSignatureOptions } from './utils/pdf-security.js';
+import type { GenerateOptions } from './types.js';
+import { renderWithServer, resolveFacetURL } from './utils/server-render.js';
 
 function numericOption(minimum: number): (value: string) => number {
   return (value: string): number => {
@@ -19,16 +22,26 @@ function numericOption(minimum: number): (value: string) => number {
   };
 }
 
+function booleanOption(value: string): boolean {
+  if (value === 'true') return true;
+  if (value === 'false') return false;
+  throw new InvalidArgumentError('Expected true or false');
+}
+
 function parseDataLoaderArgs(): string[] {
   const dashIndex = process.argv.indexOf('--');
   return dashIndex !== -1 ? process.argv.slice(dashIndex + 1) : [];
 }
 
-// External tools a render command shells out to. Every render needs `pnpm`
-// (installs `.facet/`); PDF and live rendering additionally need Chromium;
-// `.ts` data loaders need tsx.
+// Remote rendering needs `tar`; local rendering needs pnpm and may need Chromium.
+// TypeScript data loaders need tsx in either mode.
 function renderRequirements(command: 'html' | 'pdf', options: any): string[] {
-  const ids = ['pnpm'];
+  if (options.facetURL) {
+    const ids = ['tar'];
+    if (typeof options.dataLoader === 'string' && options.dataLoader.endsWith('.ts')) ids.push('tsx');
+    return ids;
+  }
+  const ids = options.skipModules ? [] : ['pnpm'];
   if (command === 'pdf' || options.live) ids.push('chromium');
   if (typeof options.dataLoader === 'string' && options.dataLoader.endsWith('.ts')) ids.push('tsx');
   return ids;
@@ -87,23 +100,29 @@ function addSharedOptions(cmd: Command): Command {
     .option('-l, --data-loader <file>', 'Path to data loader module (.ts or .js)')
     .option('-o, --output <path>', 'Output file path or directory', '.')
     .option('--output-name-field <field>', 'Data field to use for output filename', 'name')
-    .option('-v, --verbose', 'Enable verbose logging')
+    .option('-v, --verbose', 'Increase verbosity (-v Vite progress, -vv Vite debug, -vvv plugin debug + profile)', (_value, previous: number) => previous + 1, 0)
     .option('--refresh', 'Force re-fetch of remote template (bypass cache)')
     .option('--clear-cache', 'Delete .facet/ build cache and node_modules cache before generation')
     .option('--live', 'Render in a live browser (Vite dev server) instead of SSR; required for diagram components')
+    .option('--post-process-css <boolean>', 'Rebuild CSS after rendering to include data-dependent classes', booleanOption)
     .option('--sandbox [settings]', 'Enable sandbox via srt (optionally specify settings file path)');
 }
 
 const program = new Command();
 
-const versionStr = BUILD_DATE === 'dev'
-  ? `${VERSION} (dev)`
-  : `${VERSION} (${BUILD_DATE}${GIT_COMMIT ? ` ${GIT_COMMIT}` : ''})`;
+const versionStr = formatVersion({
+  version: VERSION,
+  buildDate: BUILD_DATE,
+  gitCommit: GIT_COMMIT,
+  executablePath: process.argv[1],
+});
 
 program
   .name('facet')
   .description('Build beautiful datasheets and PDFs from React templates')
   .version(versionStr)
+  .option('--skip-modules', 'Use the shared Facet-only module install and ignore package.json dependencies')
+  .option('--facet-url <url>', 'Submit HTML and PDF renders to a Facet server (or FACET_URL)')
   .hook('preAction', () => {
     console.log(chalk.gray(`facet ${versionStr}`));
   });
@@ -116,16 +135,16 @@ addSharedOptions(
     .option('--css-scope <prefix>', 'CSS scope prefix for scoped HTML generation')
     .option('-s, --schema <file>', 'Path to JSON Schema file for data validation')
     .option('--no-validate', 'Skip data validation')
-).action(async (templates: string[], options: any) => {
+).action(async (templates: string[], options: any, command: Command) => {
+  options = { ...options, ...command.optsWithGlobals() };
   const logger = new Logger(options.verbose);
   try {
-    await ensureRenderReady('html', options, logger);
+    const facetURL = resolveFacetURL(options.facetUrl);
+    await ensureRenderReady('html', { ...options, facetURL }, logger);
     for (const template of templates) {
       logger.info(`Generating HTML from template: ${template}`);
       const { outputDir, outputName } = resolveOutput(options.output);
-
-      const { generateHTML } = await import('./generators/html.js');
-      await generateHTML({
+      const generateOptions: GenerateOptions = {
         template,
         data: options.data,
         dataLoader: options.dataLoader,
@@ -139,9 +158,17 @@ addSharedOptions(
         verbose: options.verbose,
         refresh: options.refresh,
         clearCache: options.clearCache,
+        skipModules: options.skipModules,
         live: options.live,
+        postProcessCss: options.postProcessCss,
         sandbox: options.sandbox,
-      });
+      };
+      if (facetURL) {
+        await renderWithServer({ facetURL, format: 'html', options: generateOptions });
+      } else {
+        const { generateHTML } = await import('./generators/html.js');
+        await generateHTML(generateOptions);
+      }
     }
 
     logger.success('HTML generated!');
@@ -183,16 +210,16 @@ addSharedOptions(
     .option('--sign-reason <reason>', 'Signature reason text')
     .option('--sign-name <name>', 'Signer name')
     .option('--timestamp-url <url>', 'RFC 3161 Timestamp Authority URL')
-).action(async (templates: string[], options: any) => {
+).action(async (templates: string[], options: any, command: Command) => {
+  options = { ...options, ...command.optsWithGlobals() };
   const logger = new Logger(options.verbose);
   try {
-    await ensureRenderReady('pdf', options, logger);
+    const facetURL = resolveFacetURL(options.facetUrl);
+    await ensureRenderReady('pdf', { ...options, facetURL }, logger);
     for (const template of templates) {
       logger.info(`Generating PDF from template: ${template}`);
       const { outputDir, outputName } = resolveOutput(options.output);
-
-      const { generatePDF } = await import('./generators/pdf.js');
-      await generatePDF({
+      const generateOptions: GenerateOptions = {
         template,
         data: options.data,
         dataLoader: options.dataLoader,
@@ -205,7 +232,9 @@ addSharedOptions(
         verbose: options.verbose,
         refresh: options.refresh,
         clearCache: options.clearCache,
+        skipModules: options.skipModules,
         live: options.live,
+        postProcessCss: options.postProcessCss,
         debug: options.debug,
         debugTypography: options.debugTypography,
         fontSize: options.fontSize,
@@ -216,7 +245,13 @@ addSharedOptions(
         footer: options.footer,
         encryption: buildEncryption(options),
         signature: buildSignature(options),
-      });
+      };
+      if (facetURL) {
+        await renderWithServer({ facetURL, format: 'pdf', options: generateOptions });
+      } else {
+        const { generatePDF } = await import('./generators/pdf.js');
+        await generatePDF(generateOptions);
+      }
     }
 
     logger.success('PDF generated!');
@@ -285,7 +320,8 @@ program
   .option('--s3-prefix <prefix>', 'S3 key prefix')
   .option('-v, --verbose', 'Enable verbose logging')
   .option('--sandbox [settings]', 'Enable sandbox via srt (optionally specify settings file path)')
-  .action(async (options: any) => {
+  .action(async (options: any, command: Command) => {
+    options = { ...options, ...command.optsWithGlobals() };
     const logger = new Logger(options.verbose);
     try {
       const { startServer } = await import('./server/preview.js');
@@ -310,6 +346,7 @@ program
         s3Region: options.s3Region,
         s3Prefix: options.s3Prefix,
         sandbox: options.sandbox,
+        skipModules: options.skipModules,
       });
     } catch (error) {
       logger.error(`Server failed: ${error instanceof Error ? error.message : String(error)}`);
@@ -355,7 +392,8 @@ program
   .option('--json', 'Emit machine-readable JSON instead of human output')
   .option('--fix', 'Attempt safe remediations for failed checks (corepack enable, puppeteer install, .gitignore append, native-bindings nuke)')
   .option('-v, --verbose', 'Enable verbose logging')
-  .action(async (options: any) => {
+  .action(async (options: any, command: Command) => {
+    options = { ...options, ...command.optsWithGlobals() };
     const logger = new Logger(options.verbose);
     try {
       const { runDoctor } = await import('./commands/doctor.js');
@@ -364,6 +402,7 @@ program
         verbose: !!options.verbose,
         json: !!options.json,
         fix: !!options.fix,
+        skipModules: !!options.skipModules,
       });
       process.exit(exitCode);
     } catch (error) {
@@ -396,6 +435,11 @@ async function run(): Promise<void> {
     await runDevLoader();
     return;
   }
+  if (process.env.FACET_LOADER === 'css') {
+    const { runCssLoader } = await import('./loaders/css.js');
+    await runCssLoader();
+    return;
+  }
   program.parse();
 }
 
diff --git a/cli/src/commands/doctor.test.ts b/cli/src/commands/doctor.test.ts
index 83a8882..0be511b 100644
--- a/cli/src/commands/doctor.test.ts
+++ b/cli/src/commands/doctor.test.ts
@@ -43,6 +43,7 @@ describe('runDoctor JSON contract', () => {
       'facet-package-path',
       'facet-version',
       'npmrc-leakage',
+      'global-modules',
     ];
     expect(ids).toEqual(expected);
 
diff --git a/cli/src/commands/doctor.ts b/cli/src/commands/doctor.ts
index f38ec10..c6b61a2 100644
--- a/cli/src/commands/doctor.ts
+++ b/cli/src/commands/doctor.ts
@@ -16,9 +16,9 @@ import semver from 'semver';
 import { Logger } from '../utils/logger.js';
 import { resolvePackageManager } from '../utils/package-manager.js';
 import { resolveChromePath } from '../utils/pdf-generator.js';
-import { resolveTailwindBin, tailwindBinExists } from '../utils/tailwind.js';
 import { VERSION } from '../version-generated.js';
 import { assetPath } from '../utils/assets.js';
+import { ensureGlobalModuleStore, inspectGlobalModuleStore } from '../bundler/module-store.js';
 
 type CheckStatus = 'pass' | 'warn' | 'fail';
 
@@ -35,6 +35,7 @@ interface DoctorOptions {
   verbose: boolean;
   json: boolean;
   fix?: boolean;
+  skipModules?: boolean;
 }
 
 const CRITICAL_NATIVE_PACKAGES = [
@@ -125,8 +126,13 @@ export async function preflight(
 export async function runDoctor(options: DoctorOptions): Promise<number> {
   const logger = new Logger(options.verbose);
   let results = await runAllChecks(options.consumerRoot);
+  results.push(checkGlobalModuleStore(options.skipModules));
 
   if (options.fix) {
+    const globalIndex = results.findIndex(result => result.id === 'global-modules');
+    if (options.skipModules && globalIndex >= 0 && results[globalIndex].status === 'fail') {
+      results[globalIndex] = await fixGlobalModuleStore(logger, options.skipModules);
+    }
     results = await applyFixes(results, options.consumerRoot, logger);
   }
 
@@ -139,6 +145,44 @@ export async function runDoctor(options: DoctorOptions): Promise<number> {
   return results.some(r => r.status === 'fail') ? 1 : 0;
 }
 
+function embeddedFacetPackage(): Record<string, unknown> {
+  return JSON.parse(readFileSync(assetPath('package.json'), 'utf-8'));
+}
+
+function checkGlobalModuleStore(skipModules = false): CheckResult {
+  try {
+    const store = inspectGlobalModuleStore({ facetVersion: VERSION, facetPackage: embeddedFacetPackage() });
+    return {
+      id: 'global-modules',
+      name: 'Shared Facet modules',
+      status: 'pass',
+      message: `${store.root}${skipModules ? ' (active)' : ''}`,
+    };
+  } catch (error) {
+    return {
+      id: 'global-modules',
+      name: 'Shared Facet modules',
+      status: skipModules ? 'fail' : 'warn',
+      message: error instanceof Error ? error.message : String(error),
+      hint: 'Run `facet doctor --skip-modules --fix` to install the immutable module entry for this Facet and Node version.',
+    };
+  }
+}
+
+async function fixGlobalModuleStore(logger: Logger, skipModules = false): Promise<CheckResult> {
+  try {
+    await ensureGlobalModuleStore({ facetVersion: VERSION, facetPackage: embeddedFacetPackage(), logger });
+    return checkGlobalModuleStore(skipModules);
+  } catch (error) {
+    return {
+      id: 'global-modules',
+      name: 'Shared Facet modules',
+      status: 'fail',
+      message: error instanceof Error ? error.message : String(error),
+    };
+  }
+}
+
 async function applyFixes(results: CheckResult[], consumerRoot: string, logger: Logger): Promise<CheckResult[]> {
   const fixed = [...results];
   for (let i = 0; i < fixed.length; i++) {
@@ -201,6 +245,8 @@ async function tryFix(id: string, consumerRoot: string, logger: Logger): Promise
       }
       return await runCheckById('npmrc-leakage', consumerRoot);
     }
+    case 'global-modules':
+      return undefined;
     default:
       // node-version, architecture, facet-package-path, facet-version: not auto-fixable.
       logger.warn(`[fix] ${id}: manual fix required`);
@@ -561,7 +607,7 @@ async function checkTar(): Promise<CheckResult> {
     name: 'tar',
     status: 'warn',
     message: 'not on PATH',
-    hint: 'Required only for server-mode `.tar.gz` uploads (`facet serve`).',
+    hint: 'Required for remote rendering and server-mode `.tar.gz` uploads.',
   };
 }
 
@@ -581,15 +627,28 @@ async function checkTsx(): Promise<CheckResult> {
 
 function checkTailwindBin(consumerRoot: string): CheckResult {
   const facetRoot = join(consumerRoot, '.facet');
-  const bin = resolveTailwindBin(facetRoot);
-  if (tailwindBinExists(facetRoot)) {
-    return { id: 'tailwindcss', name: 'tailwindcss (.facet bin)', status: 'pass', message: bin };
+  const packagePath = join(facetRoot, 'node_modules', 'tailwindcss', 'package.json');
+  if (!existsSync(packagePath)) {
+    return {
+      id: 'tailwindcss',
+      name: 'tailwindcss (.facet package)',
+      status: 'warn',
+      message: `not present at ${packagePath}`,
+      hint: 'Run a render to populate `.facet/node_modules/`, or `cd .facet && pnpm install`.',
+    };
+  }
+  const version = JSON.parse(readFileSync(packagePath, 'utf-8')).version as string;
+  const major = Number(version.split('.')[0]);
+  if (major === 3) return { id: 'tailwindcss', name: 'tailwindcss', status: 'pass', message: version };
+  const vitePlugin = join(facetRoot, 'node_modules', '@tailwindcss', 'vite', 'package.json');
+  if (major === 4 && existsSync(vitePlugin)) {
+    return { id: 'tailwindcss', name: 'tailwindcss + @tailwindcss/vite', status: 'pass', message: version };
   }
   return {
     id: 'tailwindcss',
-    name: 'tailwindcss (.facet bin)',
-    status: 'warn',
-    message: `not present at ${bin}`,
-    hint: 'Run a render to populate `.facet/node_modules/`, or `cd .facet && pnpm install`.',
+    name: 'tailwindcss',
+    status: 'fail',
+    message: major === 4 ? `v${version} without @tailwindcss/vite` : `unsupported v${version}`,
+    hint: major === 4 ? 'Install @tailwindcss/vite at the same version as tailwindcss.' : 'Use Tailwind CSS v3 or v4.',
   };
 }
diff --git a/cli/src/generators/html.ts b/cli/src/generators/html.ts
index 9f24fb8..4fc371c 100644
--- a/cli/src/generators/html.ts
+++ b/cli/src/generators/html.ts
@@ -1,5 +1,5 @@
 import { mkdir, writeFile } from 'fs/promises';
-import { resolve, join, basename, extname, relative, dirname } from 'path';
+import { resolve, join, basename, extname, dirname } from 'path';
 import { existsSync, rmSync } from 'fs';
 import type { GenerateOptions } from '../types.js';
 import { Logger } from '../utils/logger.js';
@@ -10,58 +10,26 @@ import { startViteServer } from '../bundler/vite-server.js';
 import { snapshotHTML } from '../bundler/live-snapshot.js';
 import { combineHTMLAndCSS } from '../bundler/renderer.js';
 import { scopeHTML } from '../utils/css-scoper.js';
-import { parseRemoteRef, resolveRemoteRef } from '../utils/remote-resolver.js';
+import { resolveTemplateSource } from '../utils/template-source.js';
 import { runTailwindCached } from '../utils/tailwind.js';
-
-function findProjectRoot(templatePath: string): string | undefined {
-  const absTemplate = resolve(templatePath);
-  const gitRoot = findGitRoot(dirname(absTemplate));
-  const stopAt = gitRoot ?? process.cwd();
-  let dir = dirname(absTemplate);
-  while (dir.length >= stopAt.length) {
-    if (existsSync(join(dir, 'package.json'))) return dir;
-    const parent = dirname(dir);
-    if (parent === dir) break;
-    dir = parent;
-  }
-  return undefined;
-}
-
-function findGitRoot(from: string): string | undefined {
-  let dir = from;
-  while (true) {
-    if (existsSync(join(dir, '.git'))) return dir;
-    const parent = dirname(dir);
-    if (parent === dir) break;
-    dir = parent;
-  }
-  return undefined;
-}
+import { shouldPostProcessTemplateCSS, shouldUseLiveRendering } from '../utils/live-template.js';
+import { RenderTimings } from '../utils/performance.js';
+import { renderBrowserHTML } from '../utils/browser-html.js';
 
 export async function generateHTML(options: GenerateOptions): Promise<string> {
   const logger = new Logger(options.verbose);
+  const timings = options.timings ?? new RenderTimings();
+  const ownsTimings = options.timings == null;
 
   logger.debug('Starting HTML generation');
 
-  // Resolve remote template if needed
-  let templatePath = options.template;
-  let consumerRoot: string | undefined;
-  const remoteRef = parseRemoteRef(options.template);
-  if (remoteRef) {
-    const resolved = await resolveRemoteRef(remoteRef, { refresh: options.refresh, verbose: options.verbose });
-    consumerRoot = resolved.consumerRoot;
-    templatePath = resolved.templateFile;
-    if (resolved.resolvedSha) {
-      logger.info(`Resolved to ${resolved.resolvedSha}`);
-    }
-  } else {
-    const projectRoot = findProjectRoot(templatePath);
-    if (projectRoot) {
-      consumerRoot = projectRoot;
-      templatePath = relative(projectRoot, resolve(templatePath));
-      logger.debug(`Using project root: ${projectRoot}`);
-    }
-  }
+  const source = await resolveTemplateSource(options.template, {
+    refresh: options.refresh,
+    verbose: Boolean(options.verbose),
+  });
+  const { consumerRoot, templatePath } = source;
+  if (source.resolvedSha) logger.info(`Resolved to ${source.resolvedSha}`);
+  if (consumerRoot) logger.debug(`Using project root: ${consumerRoot}`);
 
   if (options.clearCache) {
     const root = consumerRoot || resolve(dirname(options.template));
@@ -86,9 +54,16 @@ export async function generateHTML(options: GenerateOptions): Promise<string> {
 
   // Live render path: boot a Vite dev server, render in a real browser, snapshot
   // the settled DOM. Required for DOM-measuring components (diagrams).
-  if (options.live) {
+  if (shouldUseLiveRendering(options.live, resolve(consumerRoot ?? process.cwd(), templatePath))) {
     logger.info('Live rendering template in browser...');
-    const server = await startViteServer({ templatePath, data, consumerRoot, logger });
+    const server = await startViteServer({
+      templatePath,
+      data,
+      consumerRoot,
+      logger,
+      timings,
+      skipModules: options.skipModules,
+    });
     try {
       const snapshot = await snapshotHTML(server.url, logger);
       const html = options.cssScope ? scopeHTML(snapshot, { scopeClass: options.cssScope }) : snapshot;
@@ -99,6 +74,7 @@ export async function generateHTML(options: GenerateOptions): Promise<string> {
       await writeFile(outputPath, html, 'utf-8');
       logger.success(`HTML generated: ${outputPath}`);
       logger.info(`File size: ${(Buffer.byteLength(html, 'utf-8') / 1024).toFixed(2)} KB`);
+      if (ownsTimings) timings.log(logger);
       return outputName;
     } finally {
       await server.close();
@@ -113,6 +89,8 @@ export async function generateHTML(options: GenerateOptions): Promise<string> {
     consumerRoot,
     logger,
     sandbox: options.sandbox,
+    timings,
+    skipModules: options.skipModules,
   });
 
   logger.debug(`Using output filename: ${outputName}`);
@@ -123,27 +101,28 @@ export async function generateHTML(options: GenerateOptions): Promise<string> {
     await mkdir(outputDir, { recursive: true });
 
     const htmlWithoutCSS = buildResult.html;
-    logger.info('Generating CSS with Tailwind CLI...');
-    const stylesInput = join(buildResult.facetRoot, 'src/styles.css');
-
-    let generatedCSS = buildResult.css;
-    try {
-      generatedCSS = await runTailwindCached({
-        facetRoot: buildResult.facetRoot,
-        stylesInput,
-        html: htmlWithoutCSS,
-        buildCacheKey: buildResult.buildCacheKey,
-        verbose: options.verbose,
-      });
-      logger.debug('Tailwind CSS generated or loaded from cache');
-    } catch (error) {
-      logger.warn(`Tailwind CSS generation failed: ${error instanceof Error ? error.message : String(error)}`);
-      logger.debug('Using Vite-generated CSS as fallback');
-    }
+    logger.info('Post-processing CSS with Vite...');
+
+    const postProcessCss = shouldPostProcessTemplateCSS(
+      options.postProcessCss,
+      resolve(consumerRoot ?? process.cwd(), templatePath),
+    );
+    const generatedCSS = await timings.measure('tailwind', () => runTailwindCached({
+      facetRoot: buildResult.facetRoot,
+      html: postProcessCss ? htmlWithoutCSS : '',
+      buildCacheKey: buildResult.buildCacheKey,
+      logger,
+      ssrCss: buildResult.css,
+    }));
+    logger.debug(postProcessCss
+      ? 'CSS generated from source and rendered class names'
+      : 'CSS generated from source; rendered-HTML post-processing disabled');
 
     // Combine generated CSS with the static HTML.
 
-    const combinedHTML = combineHTMLAndCSS(htmlWithoutCSS, generatedCSS);
+    const combinedHTML = await renderBrowserHTML({
+      html: combineHTMLAndCSS(htmlWithoutCSS, generatedCSS),
+    });
     const finalHTML = options.cssScope
       ? scopeHTML(combinedHTML, { scopeClass: options.cssScope })
       : combinedHTML;
@@ -159,6 +138,8 @@ export async function generateHTML(options: GenerateOptions): Promise<string> {
     const sizeKB = (Buffer.byteLength(finalHTML, 'utf-8') / 1024).toFixed(2);
     logger.info(`File size: ${sizeKB} KB`);
 
+    if (ownsTimings) timings.log(logger);
+
     return outputName;
   } finally {
     // Cleanup Vite server
diff --git a/cli/src/generators/pdf.ts b/cli/src/generators/pdf.ts
index 6c19f63..e69a594 100644
--- a/cli/src/generators/pdf.ts
+++ b/cli/src/generators/pdf.ts
@@ -7,7 +7,7 @@ import { generateHTML } from './html.js';
 import { generatePDFFromHTML } from '../utils/pdf-generator.js';
 import { applyPDFSecurity } from '../utils/pdf-security.js';
 import { buildTemplate } from '../bundler/vite-builder.js';
-import { RenderProfiler } from '../utils/performance.js';
+import { RenderProfiler, RenderTimings } from '../utils/performance.js';
 
 function extractBodyContent(html: string): string {
   const match = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
@@ -21,15 +21,26 @@ function insertBeforeBodyClose(mainHtml: string, fragment: string): string {
   return mainHtml + fragment;
 }
 
-async function buildAndExtractFragment(
-  filePath: string,
-  data: Record<string, unknown>,
-  logger: Logger,
-): Promise<string> {
+async function buildAndExtractFragment(options: {
+  filePath: string;
+  data: Record<string, unknown>;
+  logger: Logger;
+  timings: RenderTimings;
+  skipModules?: boolean;
+}): Promise<string> {
+  const { filePath, data, logger, timings } = options;
   const consumerRoot = dirname(resolve(filePath));
   const templatePath = resolve(filePath);
   const relPath = templatePath.replace(consumerRoot + '/', '');
-  const result = await buildTemplate({ templatePath: relPath, data, consumerRoot, logger });
+  const result = await buildTemplate({
+    templatePath: relPath,
+    data,
+    consumerRoot,
+    logger,
+    timings,
+    timingPhase: 'header-generation',
+    skipModules: options.skipModules,
+  });
   try {
     return extractBodyContent(result.html);
   } finally {
@@ -40,6 +51,7 @@ async function buildAndExtractFragment(
 export async function generatePDF(options: GenerateOptions): Promise<void> {
   const logger = new Logger(options.verbose);
   const profiler = new RenderProfiler('pdf', logger);
+  const timings = options.timings ?? new RenderTimings();
 
   logger.debug('Starting PDF generation');
 
@@ -48,7 +60,7 @@ export async function generatePDF(options: GenerateOptions): Promise<void> {
   const expectedOutputName = options.outputName ?? basename(options.template, extname(options.template));
   const existingHtmlPath = join(outputDir, `${expectedOutputName}.html`);
   const preserveHtml = existsSync(existingHtmlPath);
-  const outputName = await profiler.measure('html', () => generateHTML(options));
+  const outputName = await profiler.measure('html', () => generateHTML({ ...options, timings }));
 
   const htmlPath = join(outputDir, `${outputName}.html`);
   let finalHTML = await readFile(htmlPath, 'utf-8');
@@ -57,30 +69,42 @@ export async function generatePDF(options: GenerateOptions): Promise<void> {
 
   if (options.header) {
     logger.info('Building header template...');
-    const fragment = await buildAndExtractFragment(options.header, data, logger);
+    const fragment = await buildAndExtractFragment({
+      filePath: options.header,
+      data,
+      logger,
+      timings,
+      skipModules: options.skipModules,
+    });
     finalHTML = insertBeforeBodyClose(finalHTML, fragment);
   }
-
   if (options.footer) {
     logger.info('Building footer template...');
-    const fragment = await buildAndExtractFragment(options.footer, data, logger);
+    const fragment = await buildAndExtractFragment({
+      filePath: options.footer,
+      data,
+      logger,
+      timings,
+      skipModules: options.skipModules,
+    });
     finalHTML = insertBeforeBodyClose(finalHTML, fragment);
   }
 
   logger.info('Converting HTML to PDF...');
   const pdfPath = join(outputDir, `${outputName}.pdf`);
 
-  await profiler.measure('chromium-and-pdf', () => generatePDFFromHTML({
-    html: finalHTML,
-    outputPath: pdfPath,
-    logger,
-    debug: options.debug,
-    debugTypography: options.debugTypography,
-    fontSize: options.fontSize,
-    defaultPageSize: options.pageSize,
-    landscape: options.landscape,
-    margins: options.margins,
-  }));
+  await timings.measure('pdf-generation', () =>
+    profiler.measure('chromium-and-pdf', () => generatePDFFromHTML({
+      html: finalHTML,
+      outputPath: pdfPath,
+      logger,
+      debug: options.debug,
+      debugTypography: options.debugTypography,
+      fontSize: options.fontSize,
+      defaultPageSize: options.pageSize,
+      landscape: options.landscape,
+      margins: options.margins,
+    })));
 
   if (options.encryption || options.signature) {
     logger.info('Applying PDF security...');
@@ -88,6 +112,7 @@ export async function generatePDF(options: GenerateOptions): Promise<void> {
     const secured = await applyPDFSecurity(pdfBuffer, {
       encryption: options.encryption,
       signature: options.signature,
+      timings,
     });
     await fsWriteFile(pdfPath, secured);
   }
@@ -102,5 +127,6 @@ export async function generatePDF(options: GenerateOptions): Promise<void> {
   }
 
   logger.success(`PDF generated: ${pdfPath}`);
+  timings.log(logger);
   profiler.finish();
 }
diff --git a/cli/src/loaders/css.ts b/cli/src/loaders/css.ts
new file mode 100644
index 0000000..e0df47d
--- /dev/null
+++ b/cli/src/loaders/css.ts
@@ -0,0 +1,100 @@
+import { createRequire } from 'node:module';
+import { randomUUID } from 'node:crypto';
+import { existsSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { resolveTailwindMajor } from '../utils/tailwind.js';
+
+function parseArgs(): { facetRoot: string; outputFile: string; contentFile?: string } {
+  let facetRoot = '';
+  let outputFile = '';
+  let contentFile: string | undefined;
+  for (const arg of process.argv.slice(2)) {
+    if (arg.startsWith('--facet-root=')) facetRoot = arg.slice('--facet-root='.length);
+    if (arg.startsWith('--output-file=')) outputFile = arg.slice('--output-file='.length);
+    if (arg.startsWith('--content-file=')) contentFile = arg.slice('--content-file='.length);
+  }
+  if (!facetRoot) throw new Error('Missing required argument: --facet-root');
+  if (!outputFile) throw new Error('Missing required argument: --output-file');
+  return { facetRoot, outputFile, contentFile };
+}
+
+/**
+ * Run the post-process CSS build with Vite resolved from .facet/. Every scratch
+ * artifact (rendered-content file, v4 entry, outDir) is unique per build so
+ * concurrent builds inside one .facet/ never collide. Returns the built CSS.
+ */
+export async function buildPostProcessCss(
+  facetRoot: string,
+  options: { content?: string } = {},
+): Promise<string> {
+  const facetRequire = createRequire(join(facetRoot, 'package.json'));
+  const viteModule = await import(pathToFileURL(facetRequire.resolve('vite')).href);
+  const build = (viteModule.build ?? viteModule.default?.build) as typeof import('vite').build;
+  const tailwindMajor = resolveTailwindMajor(facetRoot);
+
+  const plugins = [];
+  const uid = randomUUID();
+  const outDir = join(facetRoot, `post-process-dist-${uid}`);
+  const scratch: string[] = [];
+  let entry = join(facetRoot, 'post-process.entry.ts');
+  if (tailwindMajor === 4) {
+    let pluginPath: string;
+    try {
+      pluginPath = facetRequire.resolve('@tailwindcss/vite');
+    } catch {
+      throw new Error('Tailwind CSS v4 requires @tailwindcss/vite in the consumer project or Facet build dependencies');
+    }
+    const tailwindModule = await import(pathToFileURL(pluginPath).href);
+    plugins.push(tailwindModule.default());
+    // Point the generated v4 sheet at this build's own rendered-content file so
+    // concurrent builds with different class sets don't overwrite each other.
+    const contentName = `rendered-content-${uid}.html`;
+    const cssName = `post-process-v4-${uid}.css`;
+    writeFileSync(join(facetRoot, contentName), options.content ?? '<div></div>', 'utf-8');
+    writeFileSync(
+      join(facetRoot, cssName),
+      readFileSync(join(facetRoot, 'post-process-v4.css'), 'utf-8')
+        .replace('@source "./rendered-content.html";', `@source "./${contentName}";`),
+      'utf-8',
+    );
+    entry = join(facetRoot, `post-process-v4-${uid}.entry.ts`);
+    writeFileSync(entry, `import './${cssName}';\n`, 'utf-8');
+    scratch.push(join(facetRoot, contentName), join(facetRoot, cssName), entry);
+  }
+
+  try {
+    await build({
+      configFile: false,
+      root: facetRoot,
+      logLevel: 'error',
+      plugins,
+      css: { postcss: facetRoot },
+      build: {
+        outDir,
+        emptyOutDir: true,
+        cssCodeSplit: false,
+        lib: {
+          entry,
+          formats: ['es'],
+          fileName: 'post-process',
+        },
+      },
+    });
+    const cssFile = readdirSync(outDir).find((file) => file.endsWith('.css'));
+    if (!cssFile || !existsSync(join(outDir, cssFile))) {
+      throw new Error('Vite CSS post-processing produced no stylesheet');
+    }
+    return readFileSync(join(outDir, cssFile), 'utf-8');
+  } finally {
+    rmSync(outDir, { recursive: true, force: true });
+    for (const file of scratch) rmSync(file, { force: true });
+  }
+}
+
+export async function runCssLoader(): Promise<void> {
+  const { facetRoot, outputFile, contentFile } = parseArgs();
+  const content = contentFile ? readFileSync(contentFile, 'utf-8') : undefined;
+  const css = await buildPostProcessCss(facetRoot, { content });
+  writeFileSync(outputFile, css);
+}
diff --git a/cli/src/loaders/ssr.ts b/cli/src/loaders/ssr.ts
index 263f859..b534558 100644
--- a/cli/src/loaders/ssr.ts
+++ b/cli/src/loaders/ssr.ts
@@ -16,7 +16,8 @@ interface LoaderArgs {
   facetRoot: string;
   data: Record<string, unknown>;
   outputFile: string;
-  verbose: boolean;
+  /** 0 quiet (Vite warn), 1 Vite info, 2 + vite:* debug, 3 + profile. */
+  verbosity: number;
   cacheKey?: string;
 }
 
@@ -31,7 +32,7 @@ function parseArgs(): LoaderArgs {
   let facetRoot = '';
   let data: Record<string, unknown> = {};
   let outputFile = '';
-  let verbose = false;
+  let verbosity = 0;
   let cacheKey: string | undefined;
 
   for (const arg of args) {
@@ -56,7 +57,10 @@ function parseArgs(): LoaderArgs {
     } else if (arg.startsWith('--output-file=')) {
       outputFile = arg.substring('--output-file='.length);
     } else if (arg === '--verbose') {
-      verbose = true;
+      verbosity = Math.max(verbosity, 1);
+    } else if (arg.startsWith('--verbosity=')) {
+      const parsed = Number(arg.substring('--verbosity='.length));
+      if (Number.isInteger(parsed) && parsed >= 0) verbosity = parsed;
     } else if (arg.startsWith('--cache-key=')) {
       cacheKey = arg.substring('--cache-key='.length);
     }
@@ -67,7 +71,7 @@ function parseArgs(): LoaderArgs {
     process.exit(1);
   }
 
-  return { facetRoot, data, outputFile, verbose, cacheKey };
+  return { facetRoot, data, outputFile, verbosity, cacheKey };
 }
 
 function extractCSS(distDir: string): string {
@@ -85,18 +89,26 @@ function extractCSS(distDir: string): string {
 }
 
 async function load(args: LoaderArgs): Promise<LoaderResult> {
-  const { facetRoot, data, verbose, cacheKey } = args;
+  const { facetRoot, data, verbosity, cacheKey } = args;
+  const profileEnabled = process.env.FACET_PROFILE === '1' || verbosity >= 3;
+  const startedAt = performance.now();
+  const stages: Record<string, number> = {};
+  const stageMark = (stage: string, since: number): number => {
+    const now = performance.now();
+    stages[stage] = Number((now - since).toFixed(1));
+    return now;
+  };
 
-  // Resolve Vite + React from .facet/node_modules, not the CLI's own deps. ESM
+  // Resolve React from .facet/node_modules, not the CLI's own deps. ESM
   // import() resolves via file URLs, so resolve explicitly relative to .facet — using
   // the CLI's Vite/React would produce a bundle incompatible with .facet's React.
+  // react-dom resolves to a CJS build; under Node the API lands on `.default`
+  // (Bun hoists the named exports), so fall back to it. Vite itself is imported
+  // lazily below — a bundle-cache hit never needs it.
   const facetRequire = createRequire(join(facetRoot, 'package.json'));
-  // Vite/react-dom resolve to CJS builds; under Node the API lands on `.default`
-  // (Bun hoists the named exports), so fall back to it.
-  const viteMod = await import(pathToFileURL(facetRequire.resolve('vite')).href);
-  const build = (viteMod.build ?? viteMod.default?.build) as typeof import('vite').build;
   const rdsMod = await import(pathToFileURL(facetRequire.resolve('react-dom/server')).href);
   const renderToString = rdsMod.renderToString ?? rdsMod.default?.renderToString;
+  let stageStart = stageMark('import-react', startedAt);
 
   const viteConfigPath = join(facetRoot, 'vite.config.ts');
   const cacheRoot = join(facetRoot, 'build-cache');
@@ -109,13 +121,20 @@ async function load(args: LoaderArgs): Promise<LoaderResult> {
 
   const cachedBundle = cacheKey && existsSync(outDir) && readdirSync(outDir).some((file) => file.endsWith('.cjs'));
   if (!cachedBundle) {
+    console.error(`[facet] SSR bundle cache miss for key ${cacheKey ?? '<uncached>'}; running vite build`);
+    // The debug package snapshots DEBUG at import time, so -vv must set it
+    // before Vite (and its plugins) are loaded.
+    if (verbosity >= 2 && !process.env.DEBUG) process.env.DEBUG = 'vite:*';
+    const viteMod = await import(pathToFileURL(facetRequire.resolve('vite')).href);
+    const build = (viteMod.build ?? viteMod.default?.build) as typeof import('vite').build;
+    stageStart = stageMark('import-vite', stageStart);
     const buildDir = cacheKey ? `${outDir}.tmp-${crypto.randomUUID()}` : outDir;
     if (cacheKey) mkdirSync(cacheRoot, { recursive: true });
     try {
       await build({
         configFile: viteConfigPath,
         root: facetRoot,
-        logLevel: verbose ? 'info' : 'error',
+        logLevel: verbosity >= 1 ? 'info' : 'warn',
         build: { ssr: true, outDir: buildDir, emptyOutDir: true },
       });
       if (cacheKey) {
@@ -133,6 +152,7 @@ async function load(args: LoaderArgs): Promise<LoaderResult> {
       }
       throw error;
     }
+    stageStart = stageMark('vite-build', stageStart);
   } else {
     const now = new Date();
     try { utimesSync(outDir, now, now); } catch { /* best effort */ }
@@ -155,12 +175,24 @@ async function load(args: LoaderArgs): Promise<LoaderResult> {
       throw new Error('Template must export a React component function');
     }
 
+    stageStart = stageMark('require-bundle', stageStart);
     const html = renderToString(Component({ data }));
     const css = extractCSS(outDir);
+    stageMark('react-render', stageStart);
 
     if (!keepOnSuccess) {
       try { rmSync(outDir, { recursive: true, force: true }); } catch { /* best effort */ }
     }
+    if (profileEnabled) {
+      console.error(`[FACET_PROFILE] ${JSON.stringify({
+        operation: 'ssr-loader',
+        pid: process.pid,
+        cacheKey: cacheKey ?? null,
+        bundleCache: cachedBundle ? 'hit' : 'miss',
+        totalDurationMs: Number((performance.now() - startedAt).toFixed(1)),
+        stages,
+      })}`);
+    }
     return { html, css };
   } catch (err) {
     console.error(`[facet] SSR build preserved at ${outDir} for debugging.`);
@@ -198,9 +230,11 @@ function formatBuildError(error: unknown): string {
 
 interface DaemonRequest {
   id: number;
-  data: Record<string, unknown>;
-  cacheKey: string;
-  verbose?: boolean;
+  kind?: 'render' | 'css';
+  data?: Record<string, unknown>;
+  cacheKey?: string;
+  content?: string;
+  verbosity?: number;
 }
 
 /** Persistent newline-delimited JSON loader used by server workspaces. */
@@ -211,11 +245,21 @@ export async function runSsrDaemon(): Promise<void> {
     let request: DaemonRequest | undefined;
     try {
       request = JSON.parse(line) as DaemonRequest;
+      if (request.kind === 'css') {
+        // The generated postcss.config.js reads FACET_POST_PROCESS at first
+        // import and is module-cached, so in-daemon CSS builds see the render
+        // config. Safe: with Tailwind v3 the config choice only changes inert
+        // content globs (facet.css ships pre-expanded), and v4 ignores the env.
+        const { buildPostProcessCss } = await import('./css.js');
+        const css = await buildPostProcessCss(base.facetRoot, { content: request.content });
+        process.stdout.write(`${JSON.stringify({ id: request.id, result: { html: '', css } })}\n`);
+        continue;
+      }
       const result = await load({
         ...base,
-        data: request.data,
+        data: request.data ?? {},
         cacheKey: request.cacheKey,
-        verbose: request.verbose ?? false,
+        verbosity: request.verbosity ?? 0,
       });
       process.stdout.write(`${JSON.stringify({ id: request.id, result })}\n`);
     } catch (error) {
diff --git a/cli/src/server/archive.ts b/cli/src/server/archive.ts
index 1e690d9..7337b59 100644
--- a/cli/src/server/archive.ts
+++ b/cli/src/server/archive.ts
@@ -1,10 +1,9 @@
-import { execFile } from 'node:child_process';
-import { promisify } from 'node:util';
 import { mkdtemp, writeFile, readdir, mkdir } from 'fs/promises';
 import { join } from 'path';
 import { tmpdir } from 'os';
 import { rmSync } from 'fs';
 import { RenderError } from './errors.js';
+import { LowPriorityProcessError, runLowPriority } from '../utils/subprocess-priority.js';
 
 export interface ExtractedArchive {
   tempDir: string;
@@ -14,8 +13,6 @@ export interface ExtractedArchive {
 }
 
 const ENTRY_EXTENSIONS = ['.tsx', '.jsx', '.ts', '.js'];
-const execFileAsync = promisify(execFile);
-
 export async function extractArchive(
   data: Buffer,
   entryFile?: string,
@@ -35,7 +32,7 @@ export async function extractArchive(
     }
     await writeFile(tarPath, data);
     await mkdir(extractDir, { recursive: true });
-    await execFileAsync('tar', ['xzf', tarPath, '-C', extractDir]);
+    await runLowPriority({ command: 'tar', args: ['xzf', tarPath, '-C', extractDir] });
 
     const resolved = entryFile ?? await autoDetectEntry(extractDir);
     if (!resolved) {
@@ -51,7 +48,10 @@ export async function extractArchive(
   } catch (err) {
     rmSync(tempDir, { recursive: true, force: true });
     if (err instanceof RenderError) throw err;
-    throw new RenderError('ARCHIVE_ERROR', `Failed to extract archive: ${err}`, 400);
+    const detail = err instanceof LowPriorityProcessError
+      ? err.stderr.toString().trim() || err.message
+      : String(err);
+    throw new RenderError('ARCHIVE_ERROR', `Failed to extract archive: ${detail}`, 400);
   }
 }
 
diff --git a/cli/src/server/config.test.ts b/cli/src/server/config.test.ts
index db866f0..fca3a73 100644
--- a/cli/src/server/config.test.ts
+++ b/cli/src/server/config.test.ts
@@ -18,6 +18,11 @@ afterEach(() => {
 });
 
 describe('loadConfig worker limits', () => {
+  it('propagates the global skip-modules flag without an environment fallback', () => {
+    expect(loadConfig({ skipModules: true }).skipModules).toBe(true);
+    expect(loadConfig({}).skipModules).toBe(false);
+  });
+
   it('falls back to defaults for invalid environment values', () => {
     process.env.FACET_MAX_RENDERS_PER_WORKER = 'NaN';
     process.env.FACET_MAX_QUEUE_DEPTH = '0';
diff --git a/cli/src/server/config.ts b/cli/src/server/config.ts
index 81f1a2d..86ba2d9 100644
--- a/cli/src/server/config.ts
+++ b/cli/src/server/config.ts
@@ -26,6 +26,7 @@ export interface ServerConfig {
   cacheDir?: string;
   s3?: S3Config;
   sandbox?: string | boolean;
+  skipModules: boolean;
 }
 
 export interface ServerCLIFlags {
@@ -49,6 +50,7 @@ export interface ServerCLIFlags {
   s3Region?: string;
   s3Prefix?: string;
   sandbox?: string | boolean;
+  skipModules?: boolean;
 }
 
 function workerLimit(value: string | number | undefined, fallback: number, minimum: number): number {
@@ -75,6 +77,7 @@ export function loadConfig(flags: ServerCLIFlags): ServerConfig {
     cacheDir: flags.cacheDir ?? process.env['FACET_CACHE_DIR'],
     verbose: flags.verbose ?? false,
     sandbox: flags.sandbox,
+    skipModules: flags.skipModules ?? false,
   };
 
   const s3Endpoint = flags.s3Endpoint ?? process.env['FACET_S3_ENDPOINT'];
diff --git a/cli/src/server/playground-controls-script.ts b/cli/src/server/playground-controls-script.ts
new file mode 100644
index 0000000..feb7ca4
--- /dev/null
+++ b/cli/src/server/playground-controls-script.ts
@@ -0,0 +1,261 @@
+export const PLAYGROUND_CONTROLS_SCRIPT = `
+    /* Render format menu */
+    function setFormat(fmt) {
+      currentFormat = fmt;
+      document.getElementById('renderBtn').textContent = 'Render ' + fmt.toUpperCase();
+      document.getElementById('checkHtml').innerHTML = fmt === 'html' ? '&#10003;' : '&nbsp;';
+      document.getElementById('checkPdf').innerHTML = fmt === 'pdf' ? '&#10003;' : '&nbsp;';
+      closeRenderMenu();
+      writeUrlState();
+    }
+
+    function toggleRenderMenu(e) {
+      e.stopPropagation();
+      document.getElementById('renderMenu').classList.toggle('open');
+    }
+
+    function closeRenderMenu() {
+      document.getElementById('renderMenu').classList.remove('open');
+    }
+
+    document.addEventListener('click', closeRenderMenu);
+
+    function toggleTimestamp() {
+      document.getElementById('timestampUrl').style.display =
+        document.getElementById('timestampEnabled').checked ? '' : 'none';
+      writeUrlState();
+    }
+
+    /* URL routing — toolbar state is serialized to the query string so a
+       configured playground is shareable and survives a reload. Only
+       non-default values are written, keeping shared links short. */
+    const DEFAULT_TSA = 'http://timestamp.digicert.com';
+    const MARGIN_PARAMS = { mt: 'marginTop', mb: 'marginBottom', ml: 'marginLeft', mr: 'marginRight' };
+
+    function writeUrlState() {
+      if (!routingReady) return;
+      const p = new URLSearchParams();
+      if (document.body.classList.contains('mode-fill')) p.set('mode', 'fill');
+      const example = document.getElementById('example').value;
+      if (example && example !== 'datasheet') p.set('example', example);
+      if (currentFormat === 'pdf') p.set('format', 'pdf');
+      const pageSize = document.getElementById('pageSize').value;
+      if (pageSize) p.set('pageSize', pageSize);
+      if (document.getElementById('landscape').checked) p.set('landscape', '1');
+      if (document.getElementById('debug').checked) p.set('debug', '1');
+      for (const key in MARGIN_PARAMS) {
+        const v = document.getElementById(MARGIN_PARAMS[key]).value;
+        if (v !== '' && v !== '10') p.set(key, v);
+      }
+      if (document.getElementById('timestampEnabled').checked) {
+        p.set('timestamp', '1');
+        const tsa = document.getElementById('timestampUrl').value.trim();
+        if (tsa && tsa !== DEFAULT_TSA) p.set('tsa', tsa);
+      }
+      const qs = p.toString();
+      history.replaceState(null, '', qs ? '?' + qs : location.pathname);
+    }
+
+    // Applies all toolbar state from the URL. The example dropdown is set here so
+    // the URL stays consistent immediately; its editor content is swapped in later,
+    // once the Monaco editors exist.
+    function applyUrlToolbar(p) {
+      const example = p.get('example');
+      if (example && EXAMPLES[example]) document.getElementById('example').value = example;
+      const pageSize = p.get('pageSize');
+      if (pageSize) document.getElementById('pageSize').value = pageSize;
+      document.getElementById('landscape').checked = p.get('landscape') === '1';
+      document.getElementById('debug').checked = p.get('debug') === '1';
+      for (const key in MARGIN_PARAMS) {
+        if (p.has(key)) document.getElementById(MARGIN_PARAMS[key]).value = p.get(key);
+      }
+      if (p.get('timestamp') === '1') {
+        document.getElementById('timestampEnabled').checked = true;
+        const tsa = p.get('tsa');
+        if (tsa) document.getElementById('timestampUrl').value = tsa;
+        toggleTimestamp();
+      }
+      if (p.get('format') === 'pdf') setFormat('pdf');
+      if (p.get('mode') === 'fill') setMode('fill');
+    }
+
+    // Controls without an existing inline handler need a listener to keep the URL in sync.
+    function bindUrlSync() {
+      ['pageSize', 'landscape', 'debug', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'timestampUrl']
+        .forEach(function(id) {
+          const el = document.getElementById(id);
+          const ev = (el.type === 'checkbox' || el.tagName === 'SELECT') ? 'change' : 'input';
+          el.addEventListener(ev, writeUrlState);
+        });
+    }
+
+    function initUrlRouting() {
+      applyUrlToolbar(new URLSearchParams(location.search));
+      bindUrlSync();
+      routingReady = true;
+    }
+
+    /* Log dialog */
+    function openLogs() {
+      document.getElementById('logOverlay').classList.add('open');
+    }
+
+    function closeLogs() {
+      document.getElementById('logOverlay').classList.remove('open');
+    }
+
+    function onOverlayClick(e) {
+      if (e.target === document.getElementById('logOverlay')) closeLogs();
+    }
+
+    function clearLogs() {
+      document.getElementById('logsBody').innerHTML = '';
+      const badge = document.getElementById('logsBadge');
+      badge.style.display = 'none';
+      badge.className = 'badge';
+      badge.textContent = '0';
+      document.getElementById('logStatusText').innerHTML = '';
+      const dot = document.getElementById('logsDot');
+      dot.style.display = 'none';
+      dot.className = 'dot';
+      document.querySelector('.log-dialog').classList.remove('has-errors');
+      renderHadError = false;
+    }
+
+    function formatErrorBlock(raw) {
+      const text = String(raw || '');
+      const lines = text.split('\\n');
+
+      // Try to parse structured build errors (esbuild/vite style)
+      // Patterns: "file:line:col: error: message" or "ERROR: message"
+      const locMatch = text.match(/^(?:.*?\\n)?\\s*([\\/\\w._-]+\\.\\w+):([\\d]+):([\\d]+):?\\s*(error|warning)?:?\\s*(.*)$/m);
+      const codeLines = [];
+      const otherLines = [];
+      let inCodeBlock = false;
+
+      for (const line of lines) {
+        // Lines with line numbers like "  42 |  code" or leading caret "     ^"
+        if (/^\\s*\\d+\\s*[|\\u2502]/.test(line) || /^\\s*[~^]+\\s*$/.test(line) || /^\\s*\\|\\s*\\^/.test(line)) {
+          codeLines.push(line);
+          inCodeBlock = true;
+        } else if (inCodeBlock && /^\\s*$/.test(line)) {
+          inCodeBlock = false;
+        } else {
+          otherLines.push(line);
+        }
+      }
+
+      const el = document.createElement('div');
+      el.className = 'log-error-block';
+
+      // Title
+      if (locMatch) {
+        const title = document.createElement('div');
+        title.className = 'error-title';
+        title.textContent = locMatch[5] || 'Build error';
+        el.appendChild(title);
+
+        const loc = document.createElement('div');
+        loc.className = 'error-location';
+        loc.textContent = locMatch[1] + ':' + locMatch[2] + ':' + locMatch[3];
+        el.appendChild(loc);
+      } else {
+        // Extract first meaningful line as title
+        const firstLine = otherLines.find(l => l.trim()) || 'Error';
+        const title = document.createElement('div');
+        title.className = 'error-title';
+        title.textContent = firstLine.replace(/^(error|Error):?\\s*/, '');
+        el.appendChild(title);
+      }
+
+      // Code snippet block
+      if (codeLines.length > 0) {
+        const code = document.createElement('div');
+        code.className = 'error-code';
+        code.innerHTML = codeLines.map(function(line) {
+          const escaped = escapeHtml(line);
+          if (/^\\s*[~^]+\\s*$/.test(line) || /^\\s*\\|\\s*\\^/.test(line)) {
+            return '<span class="caret-line">' + escaped + '</span>';
+          }
+          // Highlight the error line (often has no | prefix or is marked)
+          const numMatch = line.match(/^\\s*(\\d+)\\s*[|\\u2502]/);
+          if (numMatch && locMatch && numMatch[1] === locMatch[2]) {
+            return '<span class="line-error">' + escaped + '</span>';
+          }
+          return '<span class="line-normal">' + escaped + '</span>';
+        }).join('\\n');
+        el.appendChild(code);
+      }
+
+      // Remaining detail lines (skip the first if already used as title, skip empty leading/trailing)
+      const detail = otherLines
+        .filter(function(l, i) {
+          if (locMatch) return !l.match(/^\\s*([\\/\\w._-]+\\.\\w+):[\\d]+:[\\d]+/);
+          return i > 0 || !l.trim();
+        })
+        .join('\\n').trim();
+
+      if (detail) {
+        const detailEl = document.createElement('div');
+        detailEl.className = 'error-detail';
+        detailEl.textContent = detail;
+        el.appendChild(detailEl);
+      }
+
+      return el;
+    }
+
+    function addLog(stage, message, elapsed, duration) {
+      const body = document.getElementById('logsBody');
+      const badge = document.getElementById('logsBadge');
+      const dot = document.getElementById('logsDot');
+      const dialog = document.querySelector('.log-dialog');
+
+      if (stage === 'error') {
+        body.appendChild(formatErrorBlock(message));
+        dialog.classList.add('has-errors');
+        badge.className = 'badge error';
+        dot.className = 'dot error';
+        renderHadError = true;
+      } else {
+        const time = duration != null ? '+' + (duration / 1000).toFixed(1) + 's' : '';
+        const entry = document.createElement('div');
+        entry.className = 'log-entry';
+        entry.innerHTML =
+          '<span class="log-time">' + time + '</span>' +
+          '<span class="log-stage ' + stage + '">' + stage + '</span>' +
+          '<span class="log-msg">' + escapeHtml(message) + '</span>';
+        body.appendChild(entry);
+
+        if (stage === 'done') {
+          badge.className = 'badge done';
+          dot.className = 'dot';
+        } else {
+          if (!renderHadError) badge.className = 'badge';
+        }
+      }
+
+      body.scrollTop = body.scrollHeight;
+      const count = body.children.length;
+      badge.textContent = count;
+      badge.style.display = 'inline-block';
+      dot.style.display = 'block';
+    }
+
+    function showTimings(timings) {
+      if (!Array.isArray(timings)) return;
+      timings.forEach(function(timing) {
+        addLog('timing', timing.description, undefined, timing.durationMs);
+      });
+    }
+
+    function setLogStatus(text, spinner) {
+      const el = document.getElementById('logStatusText');
+      el.innerHTML = spinner ? '<span class="log-spinner"></span>' + escapeHtml(text) : escapeHtml(text);
+    }
+
+    function escapeHtml(s) {
+      return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    }
+
+`;
diff --git a/cli/src/server/playground-examples-script.ts b/cli/src/server/playground-examples-script.ts
new file mode 100644
index 0000000..0a9d9d1
--- /dev/null
+++ b/cli/src/server/playground-examples-script.ts
@@ -0,0 +1,444 @@
+export const PLAYGROUND_EXAMPLES_SCRIPT = `
+    const DEFAULT_TEMPLATE = \`import React from 'react';
+import {
+  DatasheetTemplate, Page, StatCard, MetricGrid,
+  Badge, Status, CompactTable, SpecificationTable,
+  ProgressBar, ScoreGauge,
+} from '@flanksource/facet';
+import {
+  IoCheckmarkCircle, IoWarning, IoCloseCircle,
+  IoShieldCheckmark, IoServer, IoCloudDone, IoPulse,
+  IoSpeedometer, IoTime, IoRocket, IoGitBranch,
+} from 'react-icons/io5';
+
+export default function Template({ data }: { data: any }) {
+  return (
+    <DatasheetTemplate title={data.title}>
+      <Page title={data.title} product={data.product} margins={{ top: 5, bottom: 5 }}>
+        <div className="space-y-6">
+          <div className="grid grid-cols-4 gap-3">
+            {data.stats.map((s: any, i: number) => (
+              <StatCard key={i} variant="bordered" value={s.value} label={s.label}
+                icon={{ uptime: IoCloudDone, items: IoServer, checks: IoPulse, alerts: IoShieldCheckmark }[s.icon] || IoServer}
+                color={s.color} size="sm" />
+            ))}
+          </div>
+
+          <SpecificationTable title="System Requirements" specifications={data.specs} />
+
+          <CompactTable variant="reference" title="API Reference"
+            columns={['Command', 'Description', 'Example']}
+            data={data.apiRef} />
+
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-2">Service Health</h3>
+            <div className="space-y-2">
+              {data.services.map((s: any, i: number) => (
+                <ProgressBar key={i} title={s.name} percentage={s.uptime} variant={s.uptime > 99 ? 'success' : s.uptime > 95 ? 'warning' : 'danger'} />
+              ))}
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="status" status="success" label="Healthy" icon={IoCheckmarkCircle} />
+            <Badge variant="status" status="warning" label="Degraded" icon={IoWarning} />
+            <Badge variant="status" status="error" label="Critical" icon={IoCloseCircle} />
+            <Badge variant="metric" label="Latency" value={data.latency} icon={IoSpeedometer} />
+            <Badge variant="metric" label="Deploys" value={data.deploys} icon={IoRocket} />
+          </div>
+
+          <div className="flex gap-6 items-end">
+            <ScoreGauge score={data.securityScore} label="Security" size="sm" />
+            <ScoreGauge score={data.reliabilityScore} label="Reliability" size="sm" />
+            <ScoreGauge score={data.maintainabilityScore} label="Maintainability" size="sm" />
+          </div>
+
+          <CompactTable variant="inline" title="Release Info" data={data.release} />
+        </div>
+      </Page>
+    </DatasheetTemplate>
+  );
+}\`;
+
+    const DEFAULT_DATA = JSON.stringify({
+      title: "Infrastructure Report",
+      product: "Mission Control",
+      stats: [
+        { value: "99.9%", label: "Uptime", icon: "uptime", color: "green" },
+        { value: "156", label: "Config Items", icon: "items", color: "blue" },
+        { value: "23", label: "Health Checks", icon: "checks", color: "green" },
+        { value: "3", label: "Alerts", icon: "alerts", color: "red" },
+      ],
+      specs: [
+        { category: "Kubernetes", value: "1.24+" },
+        { category: "PostgreSQL", value: "13+" },
+        { category: "Memory", value: "4GB minimum" },
+        { category: "Deployment", value: ["SaaS", "Self-hosted", "Hybrid"] },
+      ],
+      apiRef: [
+        ["search_catalog", "Find config items", "search_catalog('pods')"],
+        ["get_config", "Get item details", "get_config('nginx')"],
+        ["run_health_check", "Execute check", "run_health_check('api')"],
+      ],
+      services: [
+        { name: "API Gateway", uptime: 99.95 },
+        { name: "Auth Service", uptime: 99.8 },
+        { name: "Data Pipeline", uptime: 97.2 },
+        { name: "Search Index", uptime: 99.99 },
+      ],
+      latency: "45ms",
+      deploys: "2,847",
+      securityScore: 8.5,
+      reliabilityScore: 9.1,
+      maintainabilityScore: 7.2,
+      release: [
+        { label: "Version", value: "2.0.0" },
+        { label: "Date", value: "March 2026" },
+        { label: "License", value: "Apache 2.0" },
+      ],
+    }, null, 2);
+
+    const DEFAULT_HEADER = \`import React from 'react';
+import { Header } from '@flanksource/facet';
+import { IoShieldCheckmark } from 'react-icons/io5';
+
+export default function MyHeader() {
+  return (
+    <Header
+      variant="solid"
+      title="Infrastructure Report"
+      subtitle="Mission Control Platform"
+      logo={<IoShieldCheckmark style={{ width: '12mm', height: '12mm', color: 'white' }} />}
+    />
+  );
+}\`;
+
+    const DEFAULT_FOOTER = \`import React from 'react';
+import { Footer } from '@flanksource/facet';
+
+export default function MyFooter() {
+  return (
+    <Footer
+      variant="compact"
+      company="Acme Corp"
+      web="https://example.com"
+      email="team@example.com"
+    />
+  );
+}\`;
+
+    const DEFAULT_DEPS = JSON.stringify({
+      "@flanksource/facet": "__FACET_VERSION__",
+      "react-icons": "^5.4.0"
+    }, null, 2);
+
+    // Live diagram example. The leading "// @live" directive opts this template
+    // into the hydrate-and-bake render path: react-xarrows measures the boxes in
+    // a real browser and bakes the arrows to static SVG before the PDF pipeline runs.
+    const DIAGRAM_TEMPLATE = \`// @live
+import React from 'react';
+import {
+  DatasheetTemplate, Page,
+  Diagram, BoxNode, Arrow, NodeSection, COLORS,
+} from '@flanksource/facet';
+
+export default function Template({ data }: { data: any }) {
+  return (
+    <DatasheetTemplate title={data.title}>
+      <Page title={data.title} product={data.product} margins={{ top: 5, bottom: 5 }}>
+        <Diagram className="flex items-center justify-between gap-8 py-16 px-6">
+          {(id) => (
+            <>
+              <NodeSection label="Sources">
+                {data.sources.map((s: string, i: number) => (
+                  <BoxNode key={i} id={id('src' + i)} title={s}
+                    headerColor={COLORS.muted} borderColor={COLORS.muted} />
+                ))}
+              </NodeSection>
+
+              <BoxNode id={id('engine')} title="Facet Engine"
+                headerColor={COLORS.primary} borderColor={COLORS.primary}>
+                <div className="text-[10px] text-center text-slate-600">
+                  React &#8594; HTML &#8594; PDF
+                </div>
+              </BoxNode>
+
+              <NodeSection label="Outputs">
+                {data.outputs.map((o: string, i: number) => (
+                  <BoxNode key={i} id={id('out' + i)} title={o}
+                    headerColor={COLORS.outputBorder} borderColor={COLORS.outputBorder} />
+                ))}
+              </NodeSection>
+
+              {data.sources.map((_: string, i: number) => (
+                <Arrow key={'a' + i} from={id('src' + i)} to={id('engine')} variant="secondary" />
+              ))}
+              {data.outputs.map((_: string, i: number) => (
+                <Arrow key={'b' + i} from={id('engine')} to={id('out' + i)} />
+              ))}
+            </>
+          )}
+        </Diagram>
+      </Page>
+    </DatasheetTemplate>
+  );
+}\`;
+
+    const DIAGRAM_DATA = JSON.stringify({
+      title: "Data Flow",
+      product: "Facet Pipeline",
+      sources: ["PostgreSQL", "S3 Bucket", "Webhooks"],
+      outputs: ["PDF", "HTML", "WebComponent"],
+    }, null, 2);
+
+    // Mirror the default deps so the shared Header/Footer (which import react-icons)
+    // still build when this example is loaded. react-xarrows ships with @flanksource/facet.
+    const DIAGRAM_DEPS = JSON.stringify({
+      "@flanksource/facet": "__FACET_VERSION__",
+      "react-icons": "^5.4.0"
+    }, null, 2);
+
+    // Markdown example. A plain .md file is auto-wrapped in a printable <Page>
+    // with prose styling — no React boilerplate required.
+    const MARKDOWN_TEMPLATE = \`# Infrastructure Health Report
+
+A weekly summary rendered to PDF/HTML by Facet. Plain Markdown is wrapped in a
+printable page with prose styling automatically — no React required.
+
+## Platform Overview
+
+| Metric        | Value   | Status  |
+| ------------- | ------- | ------- |
+| Uptime        | 99.97%  | Healthy |
+| Config Items  | 1,247   | Tracked |
+| Active Alerts | 3       | Warning |
+
+## Recent Changes
+
+1. **Scaled nginx** from 2 to 4 replicas
+2. **Rotated TLS certificates** for wildcard ingress
+3. **Upgraded Helm chart** to mission-control 0.1.27
+
+## Checklist
+
+- [x] Define SLOs
+- [x] Wire up alerting
+- [ ] Quarterly access review
+
+---
+
+*Generated by Facet*
+\`;
+
+    const MARKDOWN_DATA = JSON.stringify({}, null, 2);
+
+    const MARKDOWN_DEPS = JSON.stringify({
+      "@flanksource/facet": "__FACET_VERSION__"
+    }, null, 2);
+
+    // MDX example. MDX blends Markdown prose with React components; data from the
+    // Data tab is available as props (e.g. {props.title}).
+    const MDX_TEMPLATE = \`import { StatCard, ProgressBar, Badge } from '@flanksource/facet';
+
+# {props.title}
+
+MDX blends Markdown prose with React components — import any Facet component and
+drop it inline. The heading above pulls its text from the Data tab.
+
+## Key Metrics
+
+<div className="grid grid-cols-3 gap-3 my-4">
+  <StatCard variant="bordered" value="99.9%" label="Uptime" color="green" size="sm" />
+  <StatCard variant="bordered" value="1,247" label="Config Items" color="blue" size="sm" />
+  <StatCard variant="bordered" value="3" label="Alerts" color="red" size="sm" />
+</div>
+
+## Resource Usage
+
+<div className="space-y-2 my-4">
+  <ProgressBar title="CPU" percentage={65} variant="primary" size="sm" />
+  <ProgressBar title="Memory" percentage={82} variant="warning" size="sm" />
+</div>
+
+## Status
+
+<div className="flex gap-2 my-4">
+  <Badge variant="status" status="success" label="API Gateway" size="sm" />
+  <Badge variant="status" status="warning" label="Worker Pool" size="sm" />
+</div>
+
+> Generated from an .mdx file combining prose and components.
+\`;
+
+    const MDX_DATA = JSON.stringify({
+      title: "Platform Report"
+    }, null, 2);
+
+    const MDX_DEPS = JSON.stringify({
+      "@flanksource/facet": "__FACET_VERSION__"
+    }, null, 2);
+
+    // Selectable starting points for the editor, swapped via the Example dropdown.
+    // ext drives the inline file extension sent to the server; lang sets the Monaco
+    // editor language for the template tab.
+    const EXAMPLES = {
+      datasheet: { ext: 'tsx', lang: 'typescript', template: DEFAULT_TEMPLATE, data: DEFAULT_DATA, deps: DEFAULT_DEPS },
+      diagram: { ext: 'tsx', lang: 'typescript', template: DIAGRAM_TEMPLATE, data: DIAGRAM_DATA, deps: DIAGRAM_DEPS },
+      markdown: { ext: 'md', lang: 'markdown', template: MARKDOWN_TEMPLATE, data: MARKDOWN_DATA, deps: MARKDOWN_DEPS },
+      mdx: { ext: 'mdx', lang: 'markdown', template: MDX_TEMPLATE, data: MDX_DATA, deps: MDX_DEPS },
+    };
+    let currentExt = 'tsx';
+
+    let templateEditor, dataEditor, depsEditor, headerEditor, footerEditor;
+    let currentFormat = 'html';
+    let renderHadError = false;
+    // Suppresses URL writes while we apply state read FROM the URL on load.
+    let routingReady = false;
+
+    require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs' } });
+    require(['vs/editor/editor.main'], function () {
+      monaco.editor.defineTheme('facet-dark', {
+        base: 'vs-dark', inherit: true, rules: [],
+        colors: { 'editor.background': '#1e1e1e' }
+      });
+      monaco.editor.setTheme('facet-dark');
+
+      const tsDefaults = monaco.languages.typescript.typescriptDefaults;
+      tsDefaults.setCompilerOptions({
+        target: monaco.languages.typescript.ScriptTarget.ESNext,
+        module: monaco.languages.typescript.ModuleKind.ESNext,
+        moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+        jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
+        esModuleInterop: true,
+        allowSyntheticDefaultImports: true,
+        strict: false,
+        allowNonTsExtensions: true,
+      });
+      tsDefaults.setDiagnosticsOptions({ noSemanticValidation: false, noSyntaxValidation: false });
+
+      tsDefaults.addExtraLib(
+        'declare module "react" {\\n' +
+        '  export interface CSSProperties { [key: string]: any; }\\n' +
+        '  export type ReactNode = string | number | boolean | null | undefined | ReactElement | ReactNode[];\\n' +
+        '  export interface ReactElement { type: any; props: any; key: any; }\\n' +
+        '  export type ComponentType<P = {}> = (props: P) => ReactElement | null;\\n' +
+        '  export type FC<P = {}> = ComponentType<P>;\\n' +
+        '  export function createElement(type: any, props?: any, ...children: any[]): ReactElement;\\n' +
+        '  export function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T)) => void];\\n' +
+        '  export function useEffect(effect: () => void | (() => void), deps?: any[]): void;\\n' +
+        '  export function useMemo<T>(factory: () => T, deps: any[]): T;\\n' +
+        '  export function useCallback<T extends (...args: any[]) => any>(callback: T, deps: any[]): T;\\n' +
+        '  export function useRef<T>(initial: T): { current: T };\\n' +
+        '  const React: any;\\n' +
+        '  export default React;\\n' +
+        '}\\n' +
+        'declare global {\\n' +
+        '  namespace JSX {\\n' +
+        '    interface Element extends React.ReactElement {}\\n' +
+        '    interface IntrinsicElements { [tag: string]: any; }\\n' +
+        '  }\\n' +
+        '}\\n',
+        'file:///node_modules/@types/react/index.d.ts'
+      );
+      tsDefaults.addExtraLib(
+        'declare module "react/jsx-runtime" {\\n' +
+        '  export function jsx(type: any, props: any, key?: any): any;\\n' +
+        '  export function jsxs(type: any, props: any, key?: any): any;\\n' +
+        '  export const Fragment: any;\\n' +
+        '}\\n',
+        'file:///node_modules/@types/react/jsx-runtime.d.ts'
+      );
+
+      fetch('/types').then(r => r.text()).then(dts => {
+        tsDefaults.addExtraLib(dts, 'file:///node_modules/@flanksource/facet/index.d.ts');
+      });
+
+      var templateModel = monaco.editor.createModel(
+        DEFAULT_TEMPLATE,
+        'typescript',
+        monaco.Uri.parse('file:///template.tsx')
+      );
+      templateEditor = monaco.editor.create(document.getElementById('template-editor'), {
+        model: templateModel,
+        minimap: { enabled: false },
+        fontSize: 13,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+      });
+
+      dataEditor = monaco.editor.create(document.getElementById('data-editor'), {
+        value: DEFAULT_DATA,
+        language: 'json',
+        minimap: { enabled: false },
+        fontSize: 13,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+      });
+
+      depsEditor = monaco.editor.create(document.getElementById('deps-editor'), {
+        value: DEFAULT_DEPS,
+        language: 'json',
+        minimap: { enabled: false },
+        fontSize: 13,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+      });
+
+      var headerModel = monaco.editor.createModel(
+        DEFAULT_HEADER,
+        'typescript',
+        monaco.Uri.parse('file:///header.tsx')
+      );
+      headerEditor = monaco.editor.create(document.getElementById('header-editor'), {
+        model: headerModel,
+        minimap: { enabled: false },
+        fontSize: 13,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+      });
+
+      var footerModel = monaco.editor.createModel(
+        DEFAULT_FOOTER,
+        'typescript',
+        monaco.Uri.parse('file:///footer.tsx')
+      );
+      footerEditor = monaco.editor.create(document.getElementById('footer-editor'), {
+        model: footerModel,
+        minimap: { enabled: false },
+        fontSize: 13,
+        scrollBeyondLastLine: false,
+        automaticLayout: true,
+      });
+
+      // The example dropdown was already set from the URL in initUrlRouting; now
+      // that the editors exist, swap in that example's content (datasheet is the
+      // default already loaded, so it needs no swap).
+      var initialExample = document.getElementById('example').value;
+      if (initialExample && initialExample !== 'datasheet' && EXAMPLES[initialExample]) {
+        loadExample(initialExample);
+      }
+    });
+
+    function switchTab(tab, btn) {
+      document.querySelectorAll('.editor-tabs button').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      ['template', 'header', 'footer', 'data', 'deps'].forEach(function(t) {
+        document.getElementById(t + '-editor').style.display = tab === t ? 'block' : 'none';
+      });
+      var editors = { template: templateEditor, header: headerEditor, footer: footerEditor, data: dataEditor, deps: depsEditor };
+      if (editors[tab]) editors[tab].layout();
+    }
+
+    function loadExample(name) {
+      var ex = EXAMPLES[name];
+      if (!ex || !templateEditor) return;
+      templateEditor.setValue(ex.template);
+      dataEditor.setValue(ex.data);
+      depsEditor.setValue(ex.deps);
+      currentExt = ex.ext;
+      var model = templateEditor.getModel();
+      if (model) monaco.editor.setModelLanguage(model, ex.lang);
+      writeUrlState();
+    }
+
+`;
diff --git a/cli/src/server/playground-html.test.ts b/cli/src/server/playground-html.test.ts
new file mode 100644
index 0000000..273e00f
--- /dev/null
+++ b/cli/src/server/playground-html.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { playgroundHtml } from './playground-html.js';
+
+describe('playgroundHtml', () => {
+  it('includes the editor runtime and renders server timing entries', () => {
+    const html = playgroundHtml('1.2.3');
+
+    expect({
+      hasEditor: html.includes('monaco.editor.create'),
+      hasExamples: html.includes('const EXAMPLES ='),
+      hasRender: html.includes('async function doRender()'),
+      hasTimingRenderer: html.includes('function showTimings(timings)'),
+      showsResultTimings: html.includes('showTimings(payload.timings)'),
+      injectsVersion: html.includes('"@flanksource/facet": "1.2.3"'),
+      hasUnexpandedModulePlaceholder: html.includes('${PLAYGROUND_'),
+    }).toEqual({
+      hasEditor: true,
+      hasExamples: true,
+      hasRender: true,
+      hasTimingRenderer: true,
+      showsResultTimings: true,
+      injectsVersion: true,
+      hasUnexpandedModulePlaceholder: false,
+    });
+  });
+});
diff --git a/cli/src/server/playground-html.ts b/cli/src/server/playground-html.ts
index cbb9494..78f2a60 100644
--- a/cli/src/server/playground-html.ts
+++ b/cli/src/server/playground-html.ts
@@ -1,3 +1,6 @@
+import { PLAYGROUND_CONTROLS_SCRIPT } from './playground-controls-script.js';
+import { PLAYGROUND_EXAMPLES_SCRIPT } from './playground-examples-script.js';
+
 const HTML = `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -90,6 +93,7 @@ const HTML = `<!DOCTYPE html>
     .log-stage.rendering-html { color: #818cf8; }
     .log-stage.rendering-pdf { color: #f472b6; }
     .log-stage.uploading { color: #fb923c; }
+    .log-stage.timing { color: #fbbf24; }
     .log-stage.done { color: #4ade80; }
     .log-stage.error { color: #f87171; }
     .log-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid #555; border-top-color: #2563eb; border-radius: 50%; animation: spin 0.8s linear infinite; margin-right: 4px; vertical-align: middle; }
@@ -205,700 +209,8 @@ const HTML = `<!DOCTYPE html>
 
   <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/loader.js"></script>
   <script>
-    const DEFAULT_TEMPLATE = \`import React from 'react';
-import {
-  DatasheetTemplate, Page, StatCard, MetricGrid,
-  Badge, Status, CompactTable, SpecificationTable,
-  ProgressBar, ScoreGauge,
-} from '@flanksource/facet';
-import {
-  IoCheckmarkCircle, IoWarning, IoCloseCircle,
-  IoShieldCheckmark, IoServer, IoCloudDone, IoPulse,
-  IoSpeedometer, IoTime, IoRocket, IoGitBranch,
-} from 'react-icons/io5';
-
-export default function Template({ data }: { data: any }) {
-  return (
-    <DatasheetTemplate title={data.title}>
-      <Page title={data.title} product={data.product} margins={{ top: 5, bottom: 5 }}>
-        <div className="space-y-6">
-          <div className="grid grid-cols-4 gap-3">
-            {data.stats.map((s: any, i: number) => (
-              <StatCard key={i} variant="bordered" value={s.value} label={s.label}
-                icon={{ uptime: IoCloudDone, items: IoServer, checks: IoPulse, alerts: IoShieldCheckmark }[s.icon] || IoServer}
-                color={s.color} size="sm" />
-            ))}
-          </div>
-
-          <SpecificationTable title="System Requirements" specifications={data.specs} />
-
-          <CompactTable variant="reference" title="API Reference"
-            columns={['Command', 'Description', 'Example']}
-            data={data.apiRef} />
-
-          <div>
-            <h3 className="text-sm font-semibold text-gray-700 mb-2">Service Health</h3>
-            <div className="space-y-2">
-              {data.services.map((s: any, i: number) => (
-                <ProgressBar key={i} title={s.name} percentage={s.uptime} variant={s.uptime > 99 ? 'success' : s.uptime > 95 ? 'warning' : 'danger'} />
-              ))}
-            </div>
-          </div>
-
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="status" status="success" label="Healthy" icon={IoCheckmarkCircle} />
-            <Badge variant="status" status="warning" label="Degraded" icon={IoWarning} />
-            <Badge variant="status" status="error" label="Critical" icon={IoCloseCircle} />
-            <Badge variant="metric" label="Latency" value={data.latency} icon={IoSpeedometer} />
-            <Badge variant="metric" label="Deploys" value={data.deploys} icon={IoRocket} />
-          </div>
-
-          <div className="flex gap-6 items-end">
-            <ScoreGauge score={data.securityScore} label="Security" size="sm" />
-            <ScoreGauge score={data.reliabilityScore} label="Reliability" size="sm" />
-            <ScoreGauge score={data.maintainabilityScore} label="Maintainability" size="sm" />
-          </div>
-
-          <CompactTable variant="inline" title="Release Info" data={data.release} />
-        </div>
-      </Page>
-    </DatasheetTemplate>
-  );
-}\`;
-
-    const DEFAULT_DATA = JSON.stringify({
-      title: "Infrastructure Report",
-      product: "Mission Control",
-      stats: [
-        { value: "99.9%", label: "Uptime", icon: "uptime", color: "green" },
-        { value: "156", label: "Config Items", icon: "items", color: "blue" },
-        { value: "23", label: "Health Checks", icon: "checks", color: "green" },
-        { value: "3", label: "Alerts", icon: "alerts", color: "red" },
-      ],
-      specs: [
-        { category: "Kubernetes", value: "1.24+" },
-        { category: "PostgreSQL", value: "13+" },
-        { category: "Memory", value: "4GB minimum" },
-        { category: "Deployment", value: ["SaaS", "Self-hosted", "Hybrid"] },
-      ],
-      apiRef: [
-        ["search_catalog", "Find config items", "search_catalog('pods')"],
-        ["get_config", "Get item details", "get_config('nginx')"],
-        ["run_health_check", "Execute check", "run_health_check('api')"],
-      ],
-      services: [
-        { name: "API Gateway", uptime: 99.95 },
-        { name: "Auth Service", uptime: 99.8 },
-        { name: "Data Pipeline", uptime: 97.2 },
-        { name: "Search Index", uptime: 99.99 },
-      ],
-      latency: "45ms",
-      deploys: "2,847",
-      securityScore: 8.5,
-      reliabilityScore: 9.1,
-      maintainabilityScore: 7.2,
-      release: [
-        { label: "Version", value: "2.0.0" },
-        { label: "Date", value: "March 2026" },
-        { label: "License", value: "Apache 2.0" },
-      ],
-    }, null, 2);
-
-    const DEFAULT_HEADER = \`import React from 'react';
-import { Header } from '@flanksource/facet';
-import { IoShieldCheckmark } from 'react-icons/io5';
-
-export default function MyHeader() {
-  return (
-    <Header
-      variant="solid"
-      title="Infrastructure Report"
-      subtitle="Mission Control Platform"
-      logo={<IoShieldCheckmark style={{ width: '12mm', height: '12mm', color: 'white' }} />}
-    />
-  );
-}\`;
-
-    const DEFAULT_FOOTER = \`import React from 'react';
-import { Footer } from '@flanksource/facet';
-
-export default function MyFooter() {
-  return (
-    <Footer
-      variant="compact"
-      company="Acme Corp"
-      web="https://example.com"
-      email="team@example.com"
-    />
-  );
-}\`;
-
-    const DEFAULT_DEPS = JSON.stringify({
-      "@flanksource/facet": "__FACET_VERSION__",
-      "react-icons": "^5.4.0"
-    }, null, 2);
-
-    // Live diagram example. The leading "// @live" directive opts this template
-    // into the hydrate-and-bake render path: react-xarrows measures the boxes in
-    // a real browser and bakes the arrows to static SVG before the PDF pipeline runs.
-    const DIAGRAM_TEMPLATE = \`// @live
-import React from 'react';
-import {
-  DatasheetTemplate, Page,
-  Diagram, BoxNode, Arrow, NodeSection, COLORS,
-} from '@flanksource/facet';
-
-export default function Template({ data }: { data: any }) {
-  return (
-    <DatasheetTemplate title={data.title}>
-      <Page title={data.title} product={data.product} margins={{ top: 5, bottom: 5 }}>
-        <Diagram className="flex items-center justify-between gap-8 py-16 px-6">
-          {(id) => (
-            <>
-              <NodeSection label="Sources">
-                {data.sources.map((s: string, i: number) => (
-                  <BoxNode key={i} id={id('src' + i)} title={s}
-                    headerColor={COLORS.muted} borderColor={COLORS.muted} />
-                ))}
-              </NodeSection>
-
-              <BoxNode id={id('engine')} title="Facet Engine"
-                headerColor={COLORS.primary} borderColor={COLORS.primary}>
-                <div className="text-[10px] text-center text-slate-600">
-                  React &#8594; HTML &#8594; PDF
-                </div>
-              </BoxNode>
-
-              <NodeSection label="Outputs">
-                {data.outputs.map((o: string, i: number) => (
-                  <BoxNode key={i} id={id('out' + i)} title={o}
-                    headerColor={COLORS.outputBorder} borderColor={COLORS.outputBorder} />
-                ))}
-              </NodeSection>
-
-              {data.sources.map((_: string, i: number) => (
-                <Arrow key={'a' + i} from={id('src' + i)} to={id('engine')} variant="secondary" />
-              ))}
-              {data.outputs.map((_: string, i: number) => (
-                <Arrow key={'b' + i} from={id('engine')} to={id('out' + i)} />
-              ))}
-            </>
-          )}
-        </Diagram>
-      </Page>
-    </DatasheetTemplate>
-  );
-}\`;
-
-    const DIAGRAM_DATA = JSON.stringify({
-      title: "Data Flow",
-      product: "Facet Pipeline",
-      sources: ["PostgreSQL", "S3 Bucket", "Webhooks"],
-      outputs: ["PDF", "HTML", "WebComponent"],
-    }, null, 2);
-
-    // Mirror the default deps so the shared Header/Footer (which import react-icons)
-    // still build when this example is loaded. react-xarrows ships with @flanksource/facet.
-    const DIAGRAM_DEPS = JSON.stringify({
-      "@flanksource/facet": "__FACET_VERSION__",
-      "react-icons": "^5.4.0"
-    }, null, 2);
-
-    // Markdown example. A plain .md file is auto-wrapped in a printable <Page>
-    // with prose styling — no React boilerplate required.
-    const MARKDOWN_TEMPLATE = \`# Infrastructure Health Report
-
-A weekly summary rendered to PDF/HTML by Facet. Plain Markdown is wrapped in a
-printable page with prose styling automatically — no React required.
-
-## Platform Overview
-
-| Metric        | Value   | Status  |
-| ------------- | ------- | ------- |
-| Uptime        | 99.97%  | Healthy |
-| Config Items  | 1,247   | Tracked |
-| Active Alerts | 3       | Warning |
-
-## Recent Changes
-
-1. **Scaled nginx** from 2 to 4 replicas
-2. **Rotated TLS certificates** for wildcard ingress
-3. **Upgraded Helm chart** to mission-control 0.1.27
-
-## Checklist
-
-- [x] Define SLOs
-- [x] Wire up alerting
-- [ ] Quarterly access review
-
----
-
-*Generated by Facet*
-\`;
-
-    const MARKDOWN_DATA = JSON.stringify({}, null, 2);
-
-    const MARKDOWN_DEPS = JSON.stringify({
-      "@flanksource/facet": "__FACET_VERSION__"
-    }, null, 2);
-
-    // MDX example. MDX blends Markdown prose with React components; data from the
-    // Data tab is available as props (e.g. {props.title}).
-    const MDX_TEMPLATE = \`import { StatCard, ProgressBar, Badge } from '@flanksource/facet';
-
-# {props.title}
-
-MDX blends Markdown prose with React components — import any Facet component and
-drop it inline. The heading above pulls its text from the Data tab.
-
-## Key Metrics
-
-<div className="grid grid-cols-3 gap-3 my-4">
-  <StatCard variant="bordered" value="99.9%" label="Uptime" color="green" size="sm" />
-  <StatCard variant="bordered" value="1,247" label="Config Items" color="blue" size="sm" />
-  <StatCard variant="bordered" value="3" label="Alerts" color="red" size="sm" />
-</div>
-
-## Resource Usage
-
-<div className="space-y-2 my-4">
-  <ProgressBar title="CPU" percentage={65} variant="primary" size="sm" />
-  <ProgressBar title="Memory" percentage={82} variant="warning" size="sm" />
-</div>
-
-## Status
-
-<div className="flex gap-2 my-4">
-  <Badge variant="status" status="success" label="API Gateway" size="sm" />
-  <Badge variant="status" status="warning" label="Worker Pool" size="sm" />
-</div>
-
-> Generated from an .mdx file combining prose and components.
-\`;
-
-    const MDX_DATA = JSON.stringify({
-      title: "Platform Report"
-    }, null, 2);
-
-    const MDX_DEPS = JSON.stringify({
-      "@flanksource/facet": "__FACET_VERSION__"
-    }, null, 2);
-
-    // Selectable starting points for the editor, swapped via the Example dropdown.
-    // ext drives the inline file extension sent to the server; lang sets the Monaco
-    // editor language for the template tab.
-    const EXAMPLES = {
-      datasheet: { ext: 'tsx', lang: 'typescript', template: DEFAULT_TEMPLATE, data: DEFAULT_DATA, deps: DEFAULT_DEPS },
-      diagram: { ext: 'tsx', lang: 'typescript', template: DIAGRAM_TEMPLATE, data: DIAGRAM_DATA, deps: DIAGRAM_DEPS },
-      markdown: { ext: 'md', lang: 'markdown', template: MARKDOWN_TEMPLATE, data: MARKDOWN_DATA, deps: MARKDOWN_DEPS },
-      mdx: { ext: 'mdx', lang: 'markdown', template: MDX_TEMPLATE, data: MDX_DATA, deps: MDX_DEPS },
-    };
-    let currentExt = 'tsx';
-
-    let templateEditor, dataEditor, depsEditor, headerEditor, footerEditor;
-    let currentFormat = 'html';
-    let renderHadError = false;
-    // Suppresses URL writes while we apply state read FROM the URL on load.
-    let routingReady = false;
-
-    require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs' } });
-    require(['vs/editor/editor.main'], function () {
-      monaco.editor.defineTheme('facet-dark', {
-        base: 'vs-dark', inherit: true, rules: [],
-        colors: { 'editor.background': '#1e1e1e' }
-      });
-      monaco.editor.setTheme('facet-dark');
-
-      const tsDefaults = monaco.languages.typescript.typescriptDefaults;
-      tsDefaults.setCompilerOptions({
-        target: monaco.languages.typescript.ScriptTarget.ESNext,
-        module: monaco.languages.typescript.ModuleKind.ESNext,
-        moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-        jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
-        esModuleInterop: true,
-        allowSyntheticDefaultImports: true,
-        strict: false,
-        allowNonTsExtensions: true,
-      });
-      tsDefaults.setDiagnosticsOptions({ noSemanticValidation: false, noSyntaxValidation: false });
-
-      tsDefaults.addExtraLib(
-        'declare module "react" {\\n' +
-        '  export interface CSSProperties { [key: string]: any; }\\n' +
-        '  export type ReactNode = string | number | boolean | null | undefined | ReactElement | ReactNode[];\\n' +
-        '  export interface ReactElement { type: any; props: any; key: any; }\\n' +
-        '  export type ComponentType<P = {}> = (props: P) => ReactElement | null;\\n' +
-        '  export type FC<P = {}> = ComponentType<P>;\\n' +
-        '  export function createElement(type: any, props?: any, ...children: any[]): ReactElement;\\n' +
-        '  export function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T)) => void];\\n' +
-        '  export function useEffect(effect: () => void | (() => void), deps?: any[]): void;\\n' +
-        '  export function useMemo<T>(factory: () => T, deps: any[]): T;\\n' +
-        '  export function useCallback<T extends (...args: any[]) => any>(callback: T, deps: any[]): T;\\n' +
-        '  export function useRef<T>(initial: T): { current: T };\\n' +
-        '  const React: any;\\n' +
-        '  export default React;\\n' +
-        '}\\n' +
-        'declare global {\\n' +
-        '  namespace JSX {\\n' +
-        '    interface Element extends React.ReactElement {}\\n' +
-        '    interface IntrinsicElements { [tag: string]: any; }\\n' +
-        '  }\\n' +
-        '}\\n',
-        'file:///node_modules/@types/react/index.d.ts'
-      );
-      tsDefaults.addExtraLib(
-        'declare module "react/jsx-runtime" {\\n' +
-        '  export function jsx(type: any, props: any, key?: any): any;\\n' +
-        '  export function jsxs(type: any, props: any, key?: any): any;\\n' +
-        '  export const Fragment: any;\\n' +
-        '}\\n',
-        'file:///node_modules/@types/react/jsx-runtime.d.ts'
-      );
-
-      fetch('/types').then(r => r.text()).then(dts => {
-        tsDefaults.addExtraLib(dts, 'file:///node_modules/@flanksource/facet/index.d.ts');
-      });
-
-      var templateModel = monaco.editor.createModel(
-        DEFAULT_TEMPLATE,
-        'typescript',
-        monaco.Uri.parse('file:///template.tsx')
-      );
-      templateEditor = monaco.editor.create(document.getElementById('template-editor'), {
-        model: templateModel,
-        minimap: { enabled: false },
-        fontSize: 13,
-        scrollBeyondLastLine: false,
-        automaticLayout: true,
-      });
-
-      dataEditor = monaco.editor.create(document.getElementById('data-editor'), {
-        value: DEFAULT_DATA,
-        language: 'json',
-        minimap: { enabled: false },
-        fontSize: 13,
-        scrollBeyondLastLine: false,
-        automaticLayout: true,
-      });
-
-      depsEditor = monaco.editor.create(document.getElementById('deps-editor'), {
-        value: DEFAULT_DEPS,
-        language: 'json',
-        minimap: { enabled: false },
-        fontSize: 13,
-        scrollBeyondLastLine: false,
-        automaticLayout: true,
-      });
-
-      var headerModel = monaco.editor.createModel(
-        DEFAULT_HEADER,
-        'typescript',
-        monaco.Uri.parse('file:///header.tsx')
-      );
-      headerEditor = monaco.editor.create(document.getElementById('header-editor'), {
-        model: headerModel,
-        minimap: { enabled: false },
-        fontSize: 13,
-        scrollBeyondLastLine: false,
-        automaticLayout: true,
-      });
-
-      var footerModel = monaco.editor.createModel(
-        DEFAULT_FOOTER,
-        'typescript',
-        monaco.Uri.parse('file:///footer.tsx')
-      );
-      footerEditor = monaco.editor.create(document.getElementById('footer-editor'), {
-        model: footerModel,
-        minimap: { enabled: false },
-        fontSize: 13,
-        scrollBeyondLastLine: false,
-        automaticLayout: true,
-      });
-
-      // The example dropdown was already set from the URL in initUrlRouting; now
-      // that the editors exist, swap in that example's content (datasheet is the
-      // default already loaded, so it needs no swap).
-      var initialExample = document.getElementById('example').value;
-      if (initialExample && initialExample !== 'datasheet' && EXAMPLES[initialExample]) {
-        loadExample(initialExample);
-      }
-    });
-
-    function switchTab(tab, btn) {
-      document.querySelectorAll('.editor-tabs button').forEach(b => b.classList.remove('active'));
-      btn.classList.add('active');
-      ['template', 'header', 'footer', 'data', 'deps'].forEach(function(t) {
-        document.getElementById(t + '-editor').style.display = tab === t ? 'block' : 'none';
-      });
-      var editors = { template: templateEditor, header: headerEditor, footer: footerEditor, data: dataEditor, deps: depsEditor };
-      if (editors[tab]) editors[tab].layout();
-    }
-
-    function loadExample(name) {
-      var ex = EXAMPLES[name];
-      if (!ex || !templateEditor) return;
-      templateEditor.setValue(ex.template);
-      dataEditor.setValue(ex.data);
-      depsEditor.setValue(ex.deps);
-      currentExt = ex.ext;
-      var model = templateEditor.getModel();
-      if (model) monaco.editor.setModelLanguage(model, ex.lang);
-      writeUrlState();
-    }
-
-    /* Render format menu */
-    function setFormat(fmt) {
-      currentFormat = fmt;
-      document.getElementById('renderBtn').textContent = 'Render ' + fmt.toUpperCase();
-      document.getElementById('checkHtml').innerHTML = fmt === 'html' ? '&#10003;' : '&nbsp;';
-      document.getElementById('checkPdf').innerHTML = fmt === 'pdf' ? '&#10003;' : '&nbsp;';
-      closeRenderMenu();
-      writeUrlState();
-    }
-
-    function toggleRenderMenu(e) {
-      e.stopPropagation();
-      document.getElementById('renderMenu').classList.toggle('open');
-    }
-
-    function closeRenderMenu() {
-      document.getElementById('renderMenu').classList.remove('open');
-    }
-
-    document.addEventListener('click', closeRenderMenu);
-
-    function toggleTimestamp() {
-      document.getElementById('timestampUrl').style.display =
-        document.getElementById('timestampEnabled').checked ? '' : 'none';
-      writeUrlState();
-    }
-
-    /* URL routing — toolbar state is serialized to the query string so a
-       configured playground is shareable and survives a reload. Only
-       non-default values are written, keeping shared links short. */
-    const DEFAULT_TSA = 'http://timestamp.digicert.com';
-    const MARGIN_PARAMS = { mt: 'marginTop', mb: 'marginBottom', ml: 'marginLeft', mr: 'marginRight' };
-
-    function writeUrlState() {
-      if (!routingReady) return;
-      const p = new URLSearchParams();
-      if (document.body.classList.contains('mode-fill')) p.set('mode', 'fill');
-      const example = document.getElementById('example').value;
-      if (example && example !== 'datasheet') p.set('example', example);
-      if (currentFormat === 'pdf') p.set('format', 'pdf');
-      const pageSize = document.getElementById('pageSize').value;
-      if (pageSize) p.set('pageSize', pageSize);
-      if (document.getElementById('landscape').checked) p.set('landscape', '1');
-      if (document.getElementById('debug').checked) p.set('debug', '1');
-      for (const key in MARGIN_PARAMS) {
-        const v = document.getElementById(MARGIN_PARAMS[key]).value;
-        if (v !== '' && v !== '10') p.set(key, v);
-      }
-      if (document.getElementById('timestampEnabled').checked) {
-        p.set('timestamp', '1');
-        const tsa = document.getElementById('timestampUrl').value.trim();
-        if (tsa && tsa !== DEFAULT_TSA) p.set('tsa', tsa);
-      }
-      const qs = p.toString();
-      history.replaceState(null, '', qs ? '?' + qs : location.pathname);
-    }
-
-    // Applies all toolbar state from the URL. The example dropdown is set here so
-    // the URL stays consistent immediately; its editor content is swapped in later,
-    // once the Monaco editors exist.
-    function applyUrlToolbar(p) {
-      const example = p.get('example');
-      if (example && EXAMPLES[example]) document.getElementById('example').value = example;
-      const pageSize = p.get('pageSize');
-      if (pageSize) document.getElementById('pageSize').value = pageSize;
-      document.getElementById('landscape').checked = p.get('landscape') === '1';
-      document.getElementById('debug').checked = p.get('debug') === '1';
-      for (const key in MARGIN_PARAMS) {
-        if (p.has(key)) document.getElementById(MARGIN_PARAMS[key]).value = p.get(key);
-      }
-      if (p.get('timestamp') === '1') {
-        document.getElementById('timestampEnabled').checked = true;
-        const tsa = p.get('tsa');
-        if (tsa) document.getElementById('timestampUrl').value = tsa;
-        toggleTimestamp();
-      }
-      if (p.get('format') === 'pdf') setFormat('pdf');
-      if (p.get('mode') === 'fill') setMode('fill');
-    }
-
-    // Controls without an existing inline handler need a listener to keep the URL in sync.
-    function bindUrlSync() {
-      ['pageSize', 'landscape', 'debug', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight', 'timestampUrl']
-        .forEach(function(id) {
-          const el = document.getElementById(id);
-          const ev = (el.type === 'checkbox' || el.tagName === 'SELECT') ? 'change' : 'input';
-          el.addEventListener(ev, writeUrlState);
-        });
-    }
-
-    function initUrlRouting() {
-      applyUrlToolbar(new URLSearchParams(location.search));
-      bindUrlSync();
-      routingReady = true;
-    }
-
-    /* Log dialog */
-    function openLogs() {
-      document.getElementById('logOverlay').classList.add('open');
-    }
-
-    function closeLogs() {
-      document.getElementById('logOverlay').classList.remove('open');
-    }
-
-    function onOverlayClick(e) {
-      if (e.target === document.getElementById('logOverlay')) closeLogs();
-    }
-
-    function clearLogs() {
-      document.getElementById('logsBody').innerHTML = '';
-      const badge = document.getElementById('logsBadge');
-      badge.style.display = 'none';
-      badge.className = 'badge';
-      badge.textContent = '0';
-      document.getElementById('logStatusText').innerHTML = '';
-      const dot = document.getElementById('logsDot');
-      dot.style.display = 'none';
-      dot.className = 'dot';
-      document.querySelector('.log-dialog').classList.remove('has-errors');
-      renderHadError = false;
-    }
-
-    function formatErrorBlock(raw) {
-      const text = String(raw || '');
-      const lines = text.split('\\n');
-
-      // Try to parse structured build errors (esbuild/vite style)
-      // Patterns: "file:line:col: error: message" or "ERROR: message"
-      const locMatch = text.match(/^(?:.*?\\n)?\\s*([\\/\\w._-]+\\.\\w+):([\\d]+):([\\d]+):?\\s*(error|warning)?:?\\s*(.*)$/m);
-      const codeLines = [];
-      const otherLines = [];
-      let inCodeBlock = false;
-
-      for (const line of lines) {
-        // Lines with line numbers like "  42 |  code" or leading caret "     ^"
-        if (/^\\s*\\d+\\s*[|\\u2502]/.test(line) || /^\\s*[~^]+\\s*$/.test(line) || /^\\s*\\|\\s*\\^/.test(line)) {
-          codeLines.push(line);
-          inCodeBlock = true;
-        } else if (inCodeBlock && /^\\s*$/.test(line)) {
-          inCodeBlock = false;
-        } else {
-          otherLines.push(line);
-        }
-      }
-
-      const el = document.createElement('div');
-      el.className = 'log-error-block';
-
-      // Title
-      if (locMatch) {
-        const title = document.createElement('div');
-        title.className = 'error-title';
-        title.textContent = locMatch[5] || 'Build error';
-        el.appendChild(title);
-
-        const loc = document.createElement('div');
-        loc.className = 'error-location';
-        loc.textContent = locMatch[1] + ':' + locMatch[2] + ':' + locMatch[3];
-        el.appendChild(loc);
-      } else {
-        // Extract first meaningful line as title
-        const firstLine = otherLines.find(l => l.trim()) || 'Error';
-        const title = document.createElement('div');
-        title.className = 'error-title';
-        title.textContent = firstLine.replace(/^(error|Error):?\\s*/, '');
-        el.appendChild(title);
-      }
-
-      // Code snippet block
-      if (codeLines.length > 0) {
-        const code = document.createElement('div');
-        code.className = 'error-code';
-        code.innerHTML = codeLines.map(function(line) {
-          const escaped = escapeHtml(line);
-          if (/^\\s*[~^]+\\s*$/.test(line) || /^\\s*\\|\\s*\\^/.test(line)) {
-            return '<span class="caret-line">' + escaped + '</span>';
-          }
-          // Highlight the error line (often has no | prefix or is marked)
-          const numMatch = line.match(/^\\s*(\\d+)\\s*[|\\u2502]/);
-          if (numMatch && locMatch && numMatch[1] === locMatch[2]) {
-            return '<span class="line-error">' + escaped + '</span>';
-          }
-          return '<span class="line-normal">' + escaped + '</span>';
-        }).join('\\n');
-        el.appendChild(code);
-      }
-
-      // Remaining detail lines (skip the first if already used as title, skip empty leading/trailing)
-      const detail = otherLines
-        .filter(function(l, i) {
-          if (locMatch) return !l.match(/^\\s*([\\/\\w._-]+\\.\\w+):[\\d]+:[\\d]+/);
-          return i > 0 || !l.trim();
-        })
-        .join('\\n').trim();
-
-      if (detail) {
-        const detailEl = document.createElement('div');
-        detailEl.className = 'error-detail';
-        detailEl.textContent = detail;
-        el.appendChild(detailEl);
-      }
-
-      return el;
-    }
-
-    function addLog(stage, message, elapsed, duration) {
-      const body = document.getElementById('logsBody');
-      const badge = document.getElementById('logsBadge');
-      const dot = document.getElementById('logsDot');
-      const dialog = document.querySelector('.log-dialog');
-
-      if (stage === 'error') {
-        body.appendChild(formatErrorBlock(message));
-        dialog.classList.add('has-errors');
-        badge.className = 'badge error';
-        dot.className = 'dot error';
-        renderHadError = true;
-      } else {
-        const time = duration != null ? '+' + (duration / 1000).toFixed(1) + 's' : '';
-        const entry = document.createElement('div');
-        entry.className = 'log-entry';
-        entry.innerHTML =
-          '<span class="log-time">' + time + '</span>' +
-          '<span class="log-stage ' + stage + '">' + stage + '</span>' +
-          '<span class="log-msg">' + escapeHtml(message) + '</span>';
-        body.appendChild(entry);
-
-        if (stage === 'done') {
-          badge.className = 'badge done';
-          dot.className = 'dot';
-        } else {
-          if (!renderHadError) badge.className = 'badge';
-        }
-      }
-
-      body.scrollTop = body.scrollHeight;
-      const count = body.children.length;
-      badge.textContent = count;
-      badge.style.display = 'inline-block';
-      dot.style.display = 'block';
-    }
-
-    function setLogStatus(text, spinner) {
-      const el = document.getElementById('logStatusText');
-      el.innerHTML = spinner ? '<span class="log-spinner"></span>' + escapeHtml(text) : escapeHtml(text);
-    }
-
-    function escapeHtml(s) {
-      return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-    }
-
+${PLAYGROUND_EXAMPLES_SCRIPT}
+${PLAYGROUND_CONTROLS_SCRIPT}
     async function doRender() {
       const btn = document.getElementById('renderBtn');
       const drop = document.getElementById('renderDrop');
@@ -1014,6 +326,7 @@ drop it inline. The heading above pulls its text from the Data tab.
             if (eventType === 'result') {
               gotResult = true;
               const elapsed = ((Date.now() - start) / 1000).toFixed(1);
+              showTimings(payload.timings);
               if (payload.contentType === 'text/html') {
                 preview.innerHTML = '<iframe sandbox="allow-same-origin allow-scripts"></iframe>';
                 preview.querySelector('iframe').srcdoc = payload.data;
diff --git a/cli/src/server/preview.ts b/cli/src/server/preview.ts
index e5e19ab..27c319d 100644
--- a/cli/src/server/preview.ts
+++ b/cli/src/server/preview.ts
@@ -23,6 +23,8 @@ import { RenderCache } from './render-cache.js';
 import { facetTypes } from './facet-types.js';
 import { readFileSync } from 'fs';
 import { assetPath } from '../utils/assets.js';
+import { ensureGlobalModuleStore } from '../bundler/module-store.js';
+import { resolveFacetPackageOverride } from '../builders/facet-directory.js';
 
 const facetVersion: string = JSON.parse(readFileSync(assetPath('package.json'), 'utf-8')).version;
 const openapiSpec: string = readFileSync(assetPath('openapi.yaml'), 'utf-8');
@@ -37,6 +39,17 @@ export async function createServer(config: ServerConfig): Promise<ServerHandle>
   const logger = new Logger(config.verbose);
   const ssrLoaderOwner = {};
 
+  if (config.skipModules) {
+    const facetPackage = JSON.parse(readFileSync(assetPath('package.json'), 'utf-8'));
+    const override = resolveFacetPackageOverride();
+    await ensureGlobalModuleStore({
+      facetVersion,
+      facetPackage,
+      logger,
+      facetTarball: override?.kind === 'tarball' ? override.path : undefined,
+    });
+  }
+
   const templatesDir = resolve(process.cwd(), config.templatesDir);
   logger.info(`Templates directory: ${templatesDir}`);
 
diff --git a/cli/src/server/render-pipeline.ts b/cli/src/server/render-pipeline.ts
new file mode 100644
index 0000000..9ba7b87
--- /dev/null
+++ b/cli/src/server/render-pipeline.ts
@@ -0,0 +1,364 @@
+import { createHash } from 'node:crypto';
+import { lstatSync, rmSync } from 'node:fs';
+import { mkdir, mkdtemp, readdir, rm, stat, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { basename, join, resolve } from 'node:path';
+
+import { combineHTMLAndCSS } from '../bundler/renderer.js';
+import { snapshotHTML } from '../bundler/live-snapshot.js';
+import { buildTemplate } from '../bundler/vite-builder.js';
+import { startViteServer } from '../bundler/vite-server.js';
+import { Logger } from '../utils/logger.js';
+import { shouldPostProcessTemplateCSS, shouldUseLiveRendering } from '../utils/live-template.js';
+import { RenderTimings } from '../utils/performance.js';
+import { parseRemoteRef, resolveRemoteRef } from '../utils/remote-resolver.js';
+import { runTailwindCached } from '../utils/tailwind.js';
+import type { ServerConfig } from './config.js';
+import { extractArchive } from './archive.js';
+import { RenderError } from './errors.js';
+import type { ParsedRenderRequest } from './request.js';
+import type { RenderProgress } from './render-stream.js';
+import type { S3Uploader } from './s3.js';
+import { acquireTemplateWorkspace } from './template-workspaces.js';
+import { resolveLocalTemplate, type TemplateInfo } from './templates.js';
+
+export interface ResolvedSource {
+  consumerRoot: string;
+  entryFile: string;
+  templateName: string;
+  tempDir?: string;
+  archiveCleanup?: () => void;
+}
+
+export async function resolveTemplateSource(
+  parsed: ParsedRenderRequest,
+  templates: TemplateInfo[],
+  config: ServerConfig,
+): Promise<ResolvedSource> {
+  const { source } = parsed;
+
+  if (source.kind === 'inline') {
+    const entryFile = `Template.${source.ext ?? 'tsx'}`;
+    const tempDir = await mkdtemp(join(tmpdir(), 'facet-inline-'));
+    await writeFile(join(tempDir, entryFile), source.code, 'utf-8');
+    if (parsed.dependencies) {
+      await writeFile(join(tempDir, 'package.json'), JSON.stringify({
+        name: 'facet-inline',
+        dependencies: parsed.dependencies,
+      }), 'utf-8');
+    }
+    return { consumerRoot: tempDir, entryFile, templateName: 'inline', tempDir };
+  }
+
+  if (source.kind === 'archive') {
+    const extracted = await extractArchive(source.data, source.entryFile, config.maxUploadSize);
+    return {
+      consumerRoot: extracted.consumerRoot,
+      entryFile: extracted.entryFile,
+      templateName: 'upload',
+      archiveCleanup: extracted.cleanup,
+    };
+  }
+
+  if (source.kind === 'remote') {
+    const ref = parseRemoteRef(source.template);
+    if (!ref) throw new RenderError('TEMPLATE_NOT_FOUND', `Cannot parse remote ref: ${source.template}`, 400);
+
+    const resolved = await resolveRemoteRef(ref, { verbose: config.verbose });
+    const cacheDir = config.cacheDir ? resolve(config.cacheDir) : resolve(process.cwd(), '.facet');
+    const workspace = await acquireTemplateWorkspace(resolved.consumerRoot, resolved.templateFile, cacheDir);
+    return {
+      consumerRoot: workspace.path,
+      entryFile: resolved.templateFile,
+      templateName: basename(source.template),
+      archiveCleanup: workspace.release,
+    };
+  }
+
+  const info = resolveLocalTemplate(source.name, templates);
+  if (!info) throw new RenderError('TEMPLATE_NOT_FOUND', `Template not found: ${source.name}`, 404);
+
+  const cacheDir = config.cacheDir ? resolve(config.cacheDir) : resolve(process.cwd(), '.facet');
+  const workspace = await acquireTemplateWorkspace(info.consumerRoot, info.entryFile, cacheDir);
+  return {
+    consumerRoot: workspace.path,
+    entryFile: info.entryFile,
+    templateName: info.name,
+    archiveCleanup: workspace.release,
+  };
+}
+
+export function cleanupTempDir(tempDir: string): void {
+  const nodeModules = join(tempDir, '.facet', 'node_modules');
+  try {
+    if (lstatSync(nodeModules).isSymbolicLink()) rmSync(nodeModules, { force: true });
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code !== 'ENOENT') throw error;
+  }
+  rmSync(tempDir, { recursive: true, force: true });
+}
+
+interface RenderHTMLOptions {
+  consumerRoot: string;
+  entryFile: string;
+  data: Record<string, unknown>;
+  logger: Logger;
+  timings: RenderTimings;
+  sandbox?: string | boolean;
+  persistentLoader?: boolean;
+  live?: boolean;
+  postProcessCss?: boolean;
+  skipModules?: boolean;
+}
+
+export async function renderHTML(options: RenderHTMLOptions): Promise<string> {
+  const { consumerRoot, entryFile, data, logger, timings, sandbox, persistentLoader = true } = options;
+  if (shouldUseLiveRendering(options.live, join(consumerRoot, entryFile))) {
+    const server = await startViteServer({
+      templatePath: entryFile,
+      data,
+      consumerRoot,
+      logger,
+      timings,
+      skipModules: options.skipModules,
+    });
+    try {
+      return await snapshotHTML(server.url, logger);
+    } finally {
+      await server.close();
+    }
+  }
+
+  const buildResult = await buildTemplate({
+    templatePath: entryFile,
+    data,
+    consumerRoot,
+    logger,
+    sandbox,
+    persistentLoader,
+    timings,
+    skipModules: options.skipModules,
+  });
+  try {
+    return await applyTailwind({
+      html: buildResult.html,
+      ssrCss: buildResult.css,
+      facetRoot: buildResult.facetRoot,
+      buildCacheKey: buildResult.buildCacheKey,
+      logger,
+      enabled: shouldPostProcessTemplateCSS(options.postProcessCss, join(consumerRoot, entryFile)),
+      timings,
+      persistentLoader: persistentLoader && !sandbox,
+    });
+  } finally {
+    await buildResult.cleanup();
+  }
+}
+
+interface StreamedHTMLOptions extends Omit<RenderHTMLOptions, 'sandbox'> {
+  progress: RenderProgress;
+}
+
+export async function renderHTMLStreamed(options: StreamedHTMLOptions): Promise<string> {
+  const { consumerRoot, entryFile, data, logger, timings, progress, persistentLoader = true } = options;
+  if (shouldUseLiveRendering(options.live, join(consumerRoot, entryFile))) {
+    progress.emit('building', 'Live rendering in browser...');
+    const server = await startViteServer({
+      templatePath: entryFile,
+      data,
+      consumerRoot,
+      logger,
+      timings,
+      skipModules: options.skipModules,
+    });
+    try {
+      return await snapshotHTML(server.url, logger);
+    } finally {
+      await server.close();
+    }
+  }
+
+  progress.emit('building', 'Compiling template with Vite SSR...');
+  const buildResult = await buildTemplate({
+    templatePath: entryFile,
+    data,
+    consumerRoot,
+    logger,
+    persistentLoader,
+    timings,
+    skipModules: options.skipModules,
+  });
+  try {
+    progress.emit('tailwind', 'Processing Tailwind CSS...');
+    return await applyTailwind({
+      html: buildResult.html,
+      ssrCss: buildResult.css,
+      facetRoot: buildResult.facetRoot,
+      buildCacheKey: buildResult.buildCacheKey,
+      logger,
+      enabled: shouldPostProcessTemplateCSS(options.postProcessCss, join(consumerRoot, entryFile)),
+      timings,
+      persistentLoader,
+    });
+  } finally {
+    await buildResult.cleanup();
+  }
+}
+
+async function pruneFragments(fragmentDir: string, keepPath: string): Promise<void> {
+  const configured = Number(process.env['FACET_FRAGMENT_MAX_AGE_MS'] ?? 86_400_000);
+  const maxAgeMs = Number.isFinite(configured) && configured >= 60_000 ? configured : 86_400_000;
+  const cutoff = Date.now() - maxAgeMs;
+  try {
+    const entries = await readdir(fragmentDir, { withFileTypes: true });
+    await Promise.all(entries
+      .filter((entry) => entry.isFile() && entry.name.endsWith('.tsx'))
+      .map(async (entry) => {
+        const path = join(fragmentDir, entry.name);
+        if (path === keepPath || (await stat(path)).mtimeMs >= cutoff) return;
+        await rm(path, { force: true });
+      }));
+  } catch { /* pruning is best effort under concurrent workspace activity */ }
+}
+
+async function buildFragment(options: {
+  consumerRoot: string;
+  filename: string;
+  code: string;
+  data: Record<string, unknown>;
+  logger: Logger;
+  timings: RenderTimings;
+  persistentLoader: boolean;
+  skipModules?: boolean;
+}): Promise<string> {
+  const { consumerRoot, filename, code, data, logger, timings, persistentLoader } = options;
+  const fragmentDir = join(consumerRoot, '.facet-fragments');
+  const contentKey = createHash('sha256').update(code).digest('hex').slice(0, 20);
+  const fragmentPath = join('.facet-fragments', `${filename.replace(/\.tsx$/, '')}-${contentKey}.tsx`);
+  await mkdir(fragmentDir, { recursive: true });
+  const absoluteFragmentPath = join(consumerRoot, fragmentPath);
+  await writeFile(absoluteFragmentPath, code, 'utf-8');
+  await pruneFragments(fragmentDir, absoluteFragmentPath);
+  const result = await buildTemplate({
+    templatePath: fragmentPath,
+    data,
+    consumerRoot,
+    logger,
+    persistentLoader,
+    timings,
+    timingPhase: 'header-generation',
+    skipModules: options.skipModules,
+  });
+  try {
+    return result.html;
+  } finally {
+    await result.cleanup();
+  }
+}
+
+function extractBodyContent(html: string): string {
+  const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+  return bodyMatch ? bodyMatch[1].trim() : html.replace(/<!DOCTYPE[^>]*>/i, '').trim();
+}
+
+function insertBeforeBodyClose(mainHtml: string, fragment: string): string {
+  return mainHtml.includes('</body>')
+    ? mainHtml.replace('</body>', `${fragment}</body>`)
+    : mainHtml + fragment;
+}
+
+export async function injectHeaderFooter(options: {
+  html: string;
+  parsed: ParsedRenderRequest;
+  consumerRoot: string;
+  logger: Logger;
+  timings: RenderTimings;
+  progress?: RenderProgress;
+  persistentLoader?: boolean;
+  skipModules?: boolean;
+}): Promise<string> {
+  const { parsed, consumerRoot, logger, timings, progress, persistentLoader = true } = options;
+  let { html } = options;
+  if (parsed.headerCode) {
+    progress?.emit('building', 'Building header template...');
+    const headerHtml = await buildFragment({
+      consumerRoot,
+      filename: '_Header.tsx',
+      code: parsed.headerCode,
+      data: parsed.data,
+      logger,
+      timings,
+      persistentLoader,
+      skipModules: options.skipModules,
+    });
+    html = insertBeforeBodyClose(html, extractBodyContent(headerHtml));
+  }
+  if (parsed.footerCode) {
+    progress?.emit('building', 'Building footer template...');
+    const footerHtml = await buildFragment({
+      consumerRoot,
+      filename: '_Footer.tsx',
+      code: parsed.footerCode,
+      data: parsed.data,
+      logger,
+      timings,
+      persistentLoader,
+      skipModules: options.skipModules,
+    });
+    html = insertBeforeBodyClose(html, extractBodyContent(footerHtml));
+  }
+  return html;
+}
+
+async function applyTailwind(options: {
+  html: string;
+  ssrCss: string;
+  facetRoot: string;
+  buildCacheKey: string;
+  logger: Logger;
+  enabled: boolean;
+  timings: RenderTimings;
+  persistentLoader: boolean;
+}): Promise<string> {
+  const { html, ssrCss, facetRoot, buildCacheKey, logger, enabled, timings, persistentLoader } = options;
+  const css = await timings.measure('tailwind', () => runTailwindCached({
+    facetRoot,
+    html: enabled ? html : '',
+    buildCacheKey,
+    logger,
+    ssrCss,
+    persistentLoader,
+  }));
+  logger.debug(enabled
+    ? 'CSS generated from source and rendered class names'
+    : 'CSS generated from source; rendered-HTML post-processing disabled');
+  return combineHTMLAndCSS(html, css);
+}
+
+export async function respondWithOutput(options: {
+  content: Buffer | string;
+  contentType: string;
+  extension: string;
+  templateName: string;
+  parsed: ParsedRenderRequest;
+  s3?: S3Uploader;
+  logger: Logger;
+}): Promise<Response> {
+  const { content, contentType, extension, templateName, parsed, s3, logger } = options;
+  if (parsed.output === 's3') {
+    if (!s3) throw new RenderError('INVALID_REQUEST', 'S3 not configured', 400);
+    const key = parsed.s3Key ?? s3.generateKey(templateName, extension);
+    const url = await s3.upload(key, content, contentType);
+    const presigned = await s3.presignedUrl(key);
+    logger.debug(`Uploaded to S3: ${key}`);
+    return Response.json({ url, presignedUrl: presigned, key });
+  }
+
+  const filename = parsed.filename ?? `${templateName}.${extension}`;
+  return new Response(typeof content === 'string' ? content : new Uint8Array(content), {
+    headers: {
+      'content-type': contentType,
+      'content-disposition': `inline; filename="${filename}"`,
+    },
+  });
+}
diff --git a/cli/src/server/render-stream.ts b/cli/src/server/render-stream.ts
index 9ce034d..09079be 100644
--- a/cli/src/server/render-stream.ts
+++ b/cli/src/server/render-stream.ts
@@ -4,6 +4,8 @@
  * with progress events, then the final result.
  */
 
+import type { RenderTimingEntry } from '../utils/performance.js';
+
 export type RenderStage =
   | 'parsing'
   | 'resolving'
@@ -77,11 +79,11 @@ export class RenderProgress {
     }
   }
 
-  emitResult(contentType: string, data: string, url?: string): void {
+  emitResult(contentType: string, data: string, url?: string, timings: RenderTimingEntry[] = []): void {
     if (!this.controller) return;
     try {
       this.controller.enqueue(
-        `event: result\ndata: ${JSON.stringify({ contentType, data, url })}\n\n`,
+        `event: result\ndata: ${JSON.stringify({ contentType, data, url, timings })}\n\n`,
       );
     } catch {}
   }
diff --git a/cli/src/server/request.test.ts b/cli/src/server/request.test.ts
new file mode 100644
index 0000000..1f26c74
--- /dev/null
+++ b/cli/src/server/request.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest';
+import { parseRenderRequest, validateRequestModuleMode } from './request.js';
+
+describe('parseRenderRequest postProcessCss', () => {
+  it('accepts a JSON boolean', async () => {
+    const parsed = await parseRenderRequest(new Request('http://facet.test/render', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ code: 'export default null', postProcessCss: false }),
+    }), 1024);
+
+    expect(parsed.postProcessCss).toBe(false);
+  });
+
+  it('accepts a multipart options boolean', async () => {
+    const form = new FormData();
+    form.set('archive', new File(['archive'], 'template.tar.gz'));
+    form.set('options', JSON.stringify({ postProcessCss: false }));
+
+    const parsed = await parseRenderRequest(new Request('http://facet.test/render', {
+      method: 'POST',
+      body: form,
+    }), 1024);
+
+    expect(parsed.postProcessCss).toBe(false);
+  });
+
+  it('preserves remote CLI render options from multipart requests', async () => {
+    const form = new FormData();
+    form.set('archive', new File(['archive'], 'template.tar.gz'));
+    form.set('options', JSON.stringify({
+      format: 'pdf',
+      live: true,
+      headerCode: 'export default () => <header />',
+      footerCode: 'export default () => <footer />',
+      pdfOptions: {
+        defaultPageSize: 'letter',
+        debugTypography: true,
+        fontSize: 11,
+      },
+    }));
+
+    const parsed = await parseRenderRequest(new Request('http://facet.test/render', {
+      method: 'POST',
+      body: form,
+    }), 1024);
+
+    expect(parsed).toMatchObject({
+      format: 'pdf',
+      live: true,
+      headerCode: 'export default () => <header />',
+      footerCode: 'export default () => <footer />',
+      pdfOptions: {
+        defaultPageSize: 'letter',
+        debugTypography: true,
+        fontSize: 11,
+      },
+    });
+  });
+
+  it('accepts a gzip query boolean', async () => {
+    const parsed = await parseRenderRequest(new Request(
+      'http://facet.test/render?postProcessCss=false',
+      {
+        method: 'POST',
+        headers: { 'content-type': 'application/gzip' },
+        body: new Uint8Array([1, 2, 3]),
+      },
+    ), 1024);
+
+    expect(parsed.postProcessCss).toBe(false);
+  });
+
+  it('rejects non-boolean JSON values', async () => {
+    await expect(parseRenderRequest(new Request('http://facet.test/render', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ code: 'export default null', postProcessCss: 'false' }),
+    }), 1024)).rejects.toThrow('postProcessCss must be a boolean');
+  });
+
+  it('rejects invalid gzip query values', async () => {
+    await expect(parseRenderRequest(new Request(
+      'http://facet.test/render?postProcessCss=disabled',
+      {
+        method: 'POST',
+        headers: { 'content-type': 'application/gzip' },
+        body: new Uint8Array([1]),
+      },
+    ), 1024)).rejects.toThrow('postProcessCss must be true or false');
+  });
+});
+
+describe('validateRequestModuleMode', () => {
+  it('rejects request dependencies when the server uses shared modules', async () => {
+    const parsed = await parseRenderRequest(new Request('http://facet.test/render', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        code: 'export default null',
+        dependencies: { 'custom-module': '2.0.0' },
+      }),
+    }), 1024);
+
+    expect(() => validateRequestModuleMode(parsed, true)).toThrow(
+      'dependencies are unavailable while the server runs with --skip-modules',
+    );
+    expect(() => validateRequestModuleMode(parsed, false)).not.toThrow();
+  });
+});
diff --git a/cli/src/server/request.ts b/cli/src/server/request.ts
index aa34588..3c5fcfd 100644
--- a/cli/src/server/request.ts
+++ b/cli/src/server/request.ts
@@ -22,6 +22,8 @@ export interface ParsedRenderRequest {
   footerCode?: string;
   encryption?: PDFEncryptionOptions;
   signature?: PDFSignatureOptions;
+  live?: boolean;
+  postProcessCss?: boolean;
 }
 
 export async function parseRenderRequest(
@@ -43,6 +45,16 @@ export async function parseRenderRequest(
   throw new RenderError('INVALID_REQUEST', `Unsupported content type: ${contentType}`, 400);
 }
 
+export function validateRequestModuleMode(parsed: ParsedRenderRequest, skipModules: boolean): void {
+  if (skipModules && parsed.dependencies) {
+    throw new RenderError(
+      'INVALID_REQUEST',
+      'Request dependencies are unavailable while the server runs with --skip-modules; restart without the flag to install custom modules',
+      400,
+    );
+  }
+}
+
 async function parseJsonRequest(request: Request): Promise<ParsedRenderRequest> {
   let body: Record<string, unknown>;
   try {
@@ -81,6 +93,8 @@ async function parseJsonRequest(request: Request): Promise<ParsedRenderRequest>
     footerCode: typeof body.footerCode === 'string' ? body.footerCode : undefined,
     encryption: parseEncryptionOptions(body.encryption),
     signature: parseSignatureOptions(body.signature),
+    live: parseBoolean(body.live, 'live'),
+    postProcessCss: parseBoolean(body.postProcessCss, 'postProcessCss'),
   };
 }
 
@@ -150,6 +164,10 @@ async function parseMultipartRequest(
     s3Key: options.s3Key as string | undefined,
     filename: options.filename as string | undefined,
     pdfOptions: parsePDFOptions(options.pdfOptions as Record<string, unknown> | undefined),
+    headerCode: typeof options.headerCode === 'string' ? options.headerCode : undefined,
+    footerCode: typeof options.footerCode === 'string' ? options.footerCode : undefined,
+    live: parseBoolean(options.live, 'live'),
+    postProcessCss: parseBoolean(options.postProcessCss, 'postProcessCss'),
   };
 }
 
@@ -187,9 +205,25 @@ async function parseGzipRequest(
     output,
     s3Key: url.searchParams.get('s3Key') ?? undefined,
     filename: url.searchParams.get('filename') ?? undefined,
+    postProcessCss: parseBooleanQuery(url.searchParams.get('postProcessCss'), 'postProcessCss'),
   };
 }
 
+function parseBoolean(raw: unknown, field: string): boolean | undefined {
+  if (raw === undefined) return undefined;
+  if (typeof raw !== 'boolean') {
+    throw new RenderError('INVALID_REQUEST', `${field} must be a boolean`, 400);
+  }
+  return raw;
+}
+
+function parseBooleanQuery(raw: string | null, field: string): boolean | undefined {
+  if (raw === null) return undefined;
+  if (raw === 'true') return true;
+  if (raw === 'false') return false;
+  throw new RenderError('INVALID_REQUEST', `${field} must be true or false`, 400);
+}
+
 function parseMargins(raw: unknown): PDFMargins | undefined {
   if (!raw || typeof raw !== 'object') return undefined;
   const m = raw as Record<string, unknown>;
@@ -206,6 +240,8 @@ function parsePDFOptions(raw?: Record<string, unknown>): BufferPDFOptions | unde
   return {
     landscape: raw.landscape as boolean | undefined,
     debug: raw.debug as boolean | undefined,
+    debugTypography: raw.debugTypography as boolean | undefined,
+    fontSize: raw.fontSize as number | undefined,
     defaultPageSize: raw.defaultPageSize as string | undefined,
     margins: parseMargins(raw.margins),
   };
diff --git a/cli/src/server/routes.ts b/cli/src/server/routes.ts
index dd03ec8..3962771 100644
--- a/cli/src/server/routes.ts
+++ b/cli/src/server/routes.ts
@@ -1,36 +1,37 @@
-import { mkdtemp, mkdir, readdir, rm, stat, writeFile } from 'fs/promises';
-import { createHash } from 'node:crypto';
-import { join, basename, resolve } from 'path';
-import { tmpdir } from 'os';
-import { createReadStream, rmSync, lstatSync, readFileSync } from 'fs';
+import { createReadStream } from 'node:fs';
 import { Readable } from 'node:stream';
 
-import type { ServerConfig } from './config.js';
-import type { WorkerPool } from './worker-pool.js';
-import type { TemplateInfo } from './templates.js';
-import type { S3Uploader } from './s3.js';
-import type { ParsedRenderRequest } from './request.js';
-
-import { RenderError, errorResponse } from './errors.js';
-import { parseRenderRequest } from './request.js';
-import { resolveLocalTemplate } from './templates.js';
-import { extractArchive } from './archive.js';
-import { parseRemoteRef, resolveRemoteRef } from '../utils/remote-resolver.js';
-import { buildTemplate } from '../bundler/vite-builder.js';
-import { startViteServer } from '../bundler/vite-server.js';
-import { snapshotHTML } from '../bundler/live-snapshot.js';
-import { combineHTMLAndCSS } from '../bundler/renderer.js';
 import { generatePDFBuffer } from '../utils/pdf-generator.js';
-import { applyPDFSecurity } from '../utils/pdf-security.js';
+import { hasMermaidCodeBlocks, renderBrowserHTML } from '../utils/browser-html.js';
 import { Logger } from '../utils/logger.js';
-import { runTailwindCached } from '../utils/tailwind.js';
-import { RenderProgress } from './render-stream.js';
+import { RenderTimings } from '../utils/performance.js';
+import { applyPDFSecurity } from '../utils/pdf-security.js';
+import type { ServerConfig } from './config.js';
+import { RenderError, errorResponse } from './errors.js';
+import {
+  cleanupTempDir,
+  injectHeaderFooter,
+  renderHTML,
+  renderHTMLStreamed,
+  resolveTemplateSource,
+  respondWithOutput,
+} from './render-pipeline.js';
 import { computeCacheKey, RenderCache } from './render-cache.js';
-import { acquireTemplateWorkspace } from './template-workspaces.js';
+import { RenderProgress } from './render-stream.js';
+import { parseRenderRequest, validateRequestModuleMode, type ParsedRenderRequest } from './request.js';
+import { VERSION } from '../version-generated.js';
+import type { S3Uploader } from './s3.js';
+import type { TemplateInfo } from './templates.js';
+import type { WorkerPool } from './worker-pool.js';
 
 export function handleResultsRoute(id: string, cache: RenderCache): Response {
   const cached = cache.lookup(id);
-  if (!cached) return Response.json({ error: { code: 'NOT_FOUND', message: 'Result not found or expired' } }, { status: 404 });
+  if (!cached) {
+    return Response.json(
+      { error: { code: 'NOT_FOUND', message: 'Result not found or expired' } },
+      { status: 404 },
+    );
+  }
   const ext = cached.contentType === 'application/pdf' ? 'pdf' : 'html';
   const stream = Readable.toWeb(createReadStream(cached.file)) as ReadableStream<Uint8Array>;
   return new Response(stream, {
@@ -59,11 +60,11 @@ export function handleHealthz(pool: WorkerPool): Response {
 
 export function handleTemplates(templates: TemplateInfo[]): Response {
   return Response.json(
-    templates.map((t) => ({
-      name: t.name,
-      entryFile: t.entryFile,
-      description: t.description,
-      hasSchema: !!t.schema,
+    templates.map((template) => ({
+      name: template.name,
+      entryFile: template.entryFile,
+      description: template.description,
+      hasSchema: !!template.schema,
     })),
   );
 }
@@ -77,25 +78,36 @@ export async function handleRender(
   s3?: S3Uploader,
 ): Promise<Response> {
   const logger = new Logger(config.verbose);
+  const timings = new RenderTimings();
   let parsed: ParsedRenderRequest;
   try {
     parsed = await parseRenderRequest(request, config.maxUploadSize);
-  } catch (err) {
-    return errorResponse(err);
+    validateRequestModuleMode(parsed, config.skipModules);
+  } catch (error) {
+    return errorResponse(error);
   }
 
-  const renderPromise = doRender(parsed, config, pool, templates, cache, s3, logger);
+  const renderPromise = doRender({ parsed, config, pool, templates, cache, s3, logger, timings });
   const timeoutPromise = new Promise<never>((_, reject) =>
-    setTimeout(() => reject(new RenderError('RENDER_TIMEOUT', 'Render timed out', 504)), config.renderTimeout),
+    setTimeout(
+      () => reject(new RenderError('RENDER_TIMEOUT', 'Render timed out', 504)),
+      config.renderTimeout,
+    ),
   );
 
   try {
-    return await Promise.race([renderPromise, timeoutPromise]);
-  } catch (err) {
-    return errorResponse(err);
+    return addServerTiming(await Promise.race([renderPromise, timeoutPromise]), timings);
+  } catch (error) {
+    return addServerTiming(errorResponse(error), timings);
   }
 }
 
+function addServerTiming(response: Response, timings: RenderTimings): Response {
+  const header = timings.toServerTiming();
+  if (header) response.headers.set('server-timing', header);
+  return response;
+}
+
 export function handleRenderStream(
   request: Request,
   config: ServerConfig,
@@ -105,6 +117,7 @@ export function handleRenderStream(
   s3?: S3Uploader,
 ): Response {
   const { progress, stream } = RenderProgress.create();
+  const timings = new RenderTimings();
 
   (async () => {
     const logger = new Logger(config.verbose);
@@ -112,23 +125,23 @@ export function handleRenderStream(
     try {
       progress.emit('parsing', 'Parsing request...');
       parsed = await parseRenderRequest(request, config.maxUploadSize);
-    } catch (err) {
-      const msg = err instanceof RenderError ? err.message : String(err);
-      progress.emitError(msg);
+      validateRequestModuleMode(parsed, config.skipModules);
+    } catch (error) {
+      progress.emitError(error instanceof RenderError ? error.message : String(error));
       progress.close();
       return;
     }
 
-    const cacheKey = cacheKeyForRequest(parsed);
+    const cacheKey = cacheKeyForRequest(parsed, config);
     const cached = cache.get(cacheKey);
     if (cached) {
       progress.emit('done', 'Cache hit');
       const resultUrl = `/results/${cacheKey}`;
-      if (cached.contentType === 'text/html') {
-        progress.emitResult(cached.contentType, cached.data.toString('utf-8'), resultUrl);
-      } else {
-        progress.emitResult(cached.contentType, '', resultUrl);
-      }
+      progress.emitResult(
+        cached.contentType,
+        cached.contentType === 'text/html' ? cached.data.toString('utf-8') : '',
+        resultUrl,
+      );
       progress.close();
       return;
     }
@@ -139,23 +152,32 @@ export function handleRenderStream(
     }, config.renderTimeout);
 
     try {
-      const result = await doRenderStreamed(parsed, config, pool, templates, s3, logger, progress);
+      const result = await doRenderStreamed({
+        parsed,
+        config,
+        pool,
+        templates,
+        s3,
+        logger,
+        progress,
+        timings,
+      });
       clearTimeout(timeout);
 
       if (typeof result === 'string') {
-        const buf = Buffer.from(result);
-        cache.set(cacheKey, 'text/html', buf);
-        progress.emitResult('text/html', result, `/results/${cacheKey}`);
+        cache.set(cacheKey, 'text/html', Buffer.from(result));
+        progress.emitResult('text/html', result, `/results/${cacheKey}`, timings.entries());
       } else {
-        const buf = Buffer.from(result);
-        cache.set(cacheKey, 'application/pdf', buf);
-        progress.emitResult('application/pdf', '', `/results/${cacheKey}`);
+        cache.set(cacheKey, 'application/pdf', Buffer.from(result));
+        progress.emitResult('application/pdf', '', `/results/${cacheKey}`, timings.entries());
       }
       progress.emit('done', 'Render complete');
-    } catch (err) {
+    } catch (error) {
       clearTimeout(timeout);
-      const msg = err instanceof RenderError ? err.message : err instanceof Error ? err.message : String(err);
-      progress.emitError(msg);
+      const message = error instanceof RenderError
+        ? error.message
+        : error instanceof Error ? error.message : String(error);
+      progress.emitError(message);
     } finally {
       progress.close();
     }
@@ -171,8 +193,10 @@ export function handleRenderStream(
   });
 }
 
-function cacheKeyForRequest(parsed: ParsedRenderRequest): string {
+function cacheKeyForRequest(parsed: ParsedRenderRequest, config: ServerConfig): string {
   return computeCacheKey({
+    facetVersion: VERSION,
+    moduleMode: config.skipModules ? 'skip' : 'project',
     source: parsed.source,
     data: parsed.data,
     dependencies: parsed.dependencies,
@@ -182,19 +206,43 @@ function cacheKeyForRequest(parsed: ParsedRenderRequest): string {
     pdfOptions: parsed.pdfOptions,
     encryption: parsed.encryption,
     signature: parsed.signature,
+    live: parsed.live,
+    postProcessCss: parsed.postProcessCss,
   });
 }
 
-async function doRender(
-  parsed: ParsedRenderRequest,
-  config: ServerConfig,
-  pool: WorkerPool,
-  templates: TemplateInfo[],
-  cache: RenderCache,
-  s3: S3Uploader | undefined,
-  logger: Logger,
-): Promise<Response> {
-  const cacheKey = cacheKeyForRequest(parsed);
+interface RenderOptions {
+  parsed: ParsedRenderRequest;
+  config: ServerConfig;
+  pool: WorkerPool;
+  templates: TemplateInfo[];
+  s3?: S3Uploader;
+  logger: Logger;
+  timings: RenderTimings;
+}
+
+interface DirectRenderOptions extends RenderOptions {
+  cache: RenderCache;
+}
+
+async function materializeBrowserHTML(html: string, pool: WorkerPool): Promise<string> {
+  if (!hasMermaidCodeBlocks(html)) return html;
+
+  const worker = await pool.acquire();
+  let healthy = true;
+  try {
+    return await renderBrowserHTML({ html, browser: worker.browser });
+  } catch (error) {
+    healthy = worker.browser.connected;
+    throw error;
+  } finally {
+    await pool.release(worker, healthy);
+  }
+}
+
+async function doRender(options: DirectRenderOptions): Promise<Response> {
+  const { parsed, config, pool, templates, cache, s3, logger, timings } = options;
+  const cacheKey = cacheKeyForRequest(parsed, config);
   const cached = cache.lookup(cacheKey);
   if (cached) {
     if (cached.contentType === 'application/pdf') {
@@ -205,42 +253,77 @@ async function doRender(
       headers: {
         'content-type': cached.contentType,
         'content-length': String(cached.size),
-        'content-disposition': `inline; filename="render.html"`,
+        'content-disposition': 'inline; filename="render.html"',
       },
     });
   }
 
   let tempDir: string | undefined;
   let archiveCleanup: (() => void) | undefined;
-
   try {
     const resolved = await resolveTemplateSource(parsed, templates, config);
     tempDir = resolved.tempDir;
     archiveCleanup = resolved.archiveCleanup;
 
-    let html = await renderHTML(resolved.consumerRoot, resolved.entryFile, parsed.data, logger, config.sandbox, config.persistentSsr);
-    const templateName = resolved.templateName;
-
-    html = await injectHeaderFooter(html, parsed, resolved.consumerRoot, logger, undefined, config.persistentSsr);
+    let html = await renderHTML({
+      consumerRoot: resolved.consumerRoot,
+      entryFile: resolved.entryFile,
+      data: parsed.data,
+      logger,
+      sandbox: config.sandbox,
+      persistentLoader: config.persistentSsr,
+      timings,
+      live: parsed.live,
+      postProcessCss: parsed.postProcessCss,
+      skipModules: config.skipModules,
+    });
+    html = await injectHeaderFooter({
+      html,
+      parsed,
+      consumerRoot: resolved.consumerRoot,
+      logger,
+      persistentLoader: config.persistentSsr,
+      timings,
+      skipModules: config.skipModules,
+    });
 
     if (parsed.format === 'html') {
+      html = await materializeBrowserHTML(html, pool);
       cache.set(cacheKey, 'text/html', Buffer.from(html));
-      return respondWithOutput(html, 'text/html', 'html', templateName, parsed, s3, logger);
+      return respondWithOutput({
+        content: html,
+        contentType: 'text/html',
+        extension: 'html',
+        templateName: resolved.templateName,
+        parsed,
+        s3,
+        logger,
+      });
     }
 
     const worker = await pool.acquire();
     let workerHealthy = true;
     try {
-      let pdfBuffer = await generatePDFBuffer(worker.browser, html, parsed.pdfOptions);
+      let pdfBuffer = await timings.measure('pdf-generation', () =>
+        generatePDFBuffer(worker.browser, html, parsed.pdfOptions));
       if (parsed.encryption || parsed.signature) {
         pdfBuffer = await applyPDFSecurity(Buffer.from(pdfBuffer), {
           encryption: parsed.encryption,
           signature: parsed.signature,
+          timings,
         }, logger);
       }
       cache.set(cacheKey, 'application/pdf', Buffer.from(pdfBuffer));
       if (parsed.output === 's3') {
-        return respondWithOutput(pdfBuffer, 'application/pdf', 'pdf', templateName, parsed, s3, logger);
+        return respondWithOutput({
+          content: pdfBuffer,
+          contentType: 'application/pdf',
+          extension: 'pdf',
+          templateName: resolved.templateName,
+          parsed,
+          s3,
+          logger,
+        });
       }
       return Response.json({ url: `/results/${cacheKey}` });
     } catch (error) {
@@ -255,18 +338,14 @@ async function doRender(
   }
 }
 
-async function doRenderStreamed(
-  parsed: ParsedRenderRequest,
-  config: ServerConfig,
-  pool: WorkerPool,
-  templates: TemplateInfo[],
-  s3: S3Uploader | undefined,
-  logger: Logger,
-  progress: RenderProgress,
-): Promise<string | Buffer> {
+interface StreamRenderOptions extends RenderOptions {
+  progress: RenderProgress;
+}
+
+async function doRenderStreamed(options: StreamRenderOptions): Promise<string | Buffer> {
+  const { parsed, config, pool, templates, s3, logger, progress, timings } = options;
   let tempDir: string | undefined;
   let archiveCleanup: (() => void) | undefined;
-
   try {
     progress.emit('resolving', `Resolving template (${parsed.source.kind})...`);
     const resolved = await resolveTemplateSource(parsed, templates, config);
@@ -274,11 +353,30 @@ async function doRenderStreamed(
     archiveCleanup = resolved.archiveCleanup;
 
     progress.emit('building', 'Building template with Vite SSR...');
-    let html = await renderHTMLStreamed(resolved.consumerRoot, resolved.entryFile, parsed.data, logger, progress, config.persistentSsr);
-
-    html = await injectHeaderFooter(html, parsed, resolved.consumerRoot, logger, progress, config.persistentSsr);
-
+    let html = await renderHTMLStreamed({
+      consumerRoot: resolved.consumerRoot,
+      entryFile: resolved.entryFile,
+      data: parsed.data,
+      logger,
+      progress,
+      persistentLoader: config.persistentSsr,
+      timings,
+      live: parsed.live,
+      postProcessCss: parsed.postProcessCss,
+      skipModules: config.skipModules,
+    });
+    html = await injectHeaderFooter({
+      html,
+      parsed,
+      consumerRoot: resolved.consumerRoot,
+      logger,
+      progress,
+      persistentLoader: config.persistentSsr,
+      timings,
+      skipModules: config.skipModules,
+    });
     if (parsed.format === 'html') {
+      html = await materializeBrowserHTML(html, pool);
       progress.emit('done', 'HTML render complete');
       return html;
     }
@@ -288,20 +386,17 @@ async function doRenderStreamed(
     let workerHealthy = true;
     try {
       progress.emit('rendering-pdf', 'Generating PDF with Puppeteer...');
-      let pdfBuffer = await generatePDFBuffer(worker.browser, html, parsed.pdfOptions);
-
+      let pdfBuffer = await timings.measure('pdf-generation', () =>
+        generatePDFBuffer(worker.browser, html, parsed.pdfOptions));
       if (parsed.encryption || parsed.signature) {
         progress.emit('securing', 'Applying PDF security...');
         pdfBuffer = await applyPDFSecurity(Buffer.from(pdfBuffer), {
           encryption: parsed.encryption,
           signature: parsed.signature,
+          timings,
         }, logger);
       }
-
-      if (parsed.output === 's3' && s3) {
-        progress.emit('uploading', 'Uploading to S3...');
-      }
-
+      if (parsed.output === 's3' && s3) progress.emit('uploading', 'Uploading to S3...');
       return pdfBuffer;
     } catch (error) {
       workerHealthy = worker.browser.connected;
@@ -314,299 +409,3 @@ async function doRenderStreamed(
     if (tempDir) cleanupTempDir(tempDir);
   }
 }
-
-interface ResolvedSource {
-  consumerRoot: string;
-  entryFile: string;
-  templateName: string;
-  tempDir?: string;
-  archiveCleanup?: () => void;
-}
-
-async function resolveTemplateSource(
-  parsed: ParsedRenderRequest,
-  templates: TemplateInfo[],
-  config: ServerConfig,
-): Promise<ResolvedSource> {
-  const { source } = parsed;
-
-  if (source.kind === 'inline') {
-    const entryFile = `Template.${source.ext ?? 'tsx'}`;
-    const tempDir = await mkdtemp(join(tmpdir(), 'facet-inline-'));
-    await writeFile(join(tempDir, entryFile), source.code, 'utf-8');
-    if (parsed.dependencies) {
-      await writeFile(join(tempDir, 'package.json'), JSON.stringify({
-        name: 'facet-inline',
-        dependencies: parsed.dependencies,
-      }), 'utf-8');
-    }
-    return {
-      consumerRoot: tempDir,
-      entryFile,
-      templateName: 'inline',
-      tempDir,
-    };
-  }
-
-  if (source.kind === 'archive') {
-    const extracted = await extractArchive(source.data, source.entryFile, config.maxUploadSize);
-    return {
-      consumerRoot: extracted.consumerRoot,
-      entryFile: extracted.entryFile,
-      templateName: 'upload',
-      archiveCleanup: extracted.cleanup,
-    };
-  }
-
-  if (source.kind === 'remote') {
-    const ref = parseRemoteRef(source.template);
-    if (!ref) throw new RenderError('TEMPLATE_NOT_FOUND', `Cannot parse remote ref: ${source.template}`, 400);
-
-    const resolved = await resolveRemoteRef(ref, { verbose: config.verbose });
-    const cacheDir = config.cacheDir ? resolve(config.cacheDir) : resolve(process.cwd(), '.facet');
-    const workspace = await acquireTemplateWorkspace(resolved.consumerRoot, resolved.templateFile, cacheDir);
-    return {
-      consumerRoot: workspace.path,
-      entryFile: resolved.templateFile,
-      templateName: basename(source.template),
-      archiveCleanup: workspace.release,
-    };
-  }
-
-  // local
-  const info = resolveLocalTemplate(source.name, templates);
-  if (!info) {
-    throw new RenderError('TEMPLATE_NOT_FOUND', `Template not found: ${source.name}`, 404);
-  }
-
-  const cacheDir = config.cacheDir ? resolve(config.cacheDir) : resolve(process.cwd(), '.facet');
-  const workspace = await acquireTemplateWorkspace(info.consumerRoot, info.entryFile, cacheDir);
-  return {
-    consumerRoot: workspace.path,
-    entryFile: info.entryFile,
-    templateName: info.name,
-    archiveCleanup: workspace.release,
-  };
-}
-
-/**
- * Safely remove a temp render directory without following symlinks
- * into the cached node_modules. Unlinks .facet/node_modules first
- * if it's a symlink, then removes the rest of the tree.
- */
-function cleanupTempDir(tempDir: string): void {
-  const nmPath = join(tempDir, '.facet', 'node_modules');
-  try {
-    if (lstatSync(nmPath).isSymbolicLink()) {
-      rmSync(nmPath, { force: true });
-    }
-  } catch {}
-  rmSync(tempDir, { recursive: true, force: true });
-}
-
-function isLiveTemplate(templatePath: string): boolean {
-  const source = readFileSync(templatePath, 'utf-8').slice(0, 4096);
-  const firstLine = source.split(/\r?\n/).find((line) => line.trim() !== '');
-  return /^\s*\/\/\s*@live\b/.test(firstLine ?? '');
-}
-
-async function renderHTML(
-  consumerRoot: string,
-  entryFile: string,
-  data: Record<string, unknown>,
-  logger: Logger,
-  sandbox?: string | boolean,
-  persistentLoader = true,
-): Promise<string> {
-  const live = isLiveTemplate(join(consumerRoot, entryFile));
-  if (live) {
-    const server = await startViteServer({ templatePath: entryFile, data, consumerRoot, logger });
-    try {
-      return await snapshotHTML(server.url, logger);
-    } finally {
-      await server.close();
-    }
-  }
-
-  const buildResult = await buildTemplate({
-    templatePath: entryFile,
-    data,
-    consumerRoot,
-    logger,
-    sandbox,
-    persistentLoader,
-  });
-
-  try {
-    return await applyTailwind(buildResult.html, buildResult.css, buildResult.facetRoot, buildResult.buildCacheKey, logger);
-  } finally {
-    await buildResult.cleanup();
-  }
-}
-
-async function renderHTMLStreamed(
-  consumerRoot: string,
-  entryFile: string,
-  data: Record<string, unknown>,
-  logger: Logger,
-  progress: RenderProgress,
-  persistentLoader = true,
-): Promise<string> {
-  const live = isLiveTemplate(join(consumerRoot, entryFile));
-  if (live) {
-    progress.emit('building', 'Live template (// @live) — rendering in browser...');
-    const server = await startViteServer({ templatePath: entryFile, data, consumerRoot, logger });
-    try {
-      return await snapshotHTML(server.url, logger);
-    } finally {
-      await server.close();
-    }
-  }
-
-  progress.emit('building', 'Compiling template with Vite SSR...');
-  const buildResult = await buildTemplate({
-    templatePath: entryFile,
-    data,
-    consumerRoot,
-    logger,
-    persistentLoader,
-  });
-
-  try {
-    progress.emit('tailwind', 'Processing Tailwind CSS...');
-    return await applyTailwind(buildResult.html, buildResult.css, buildResult.facetRoot, buildResult.buildCacheKey, logger);
-  } finally {
-    await buildResult.cleanup();
-  }
-}
-
-async function pruneFragments(fragmentDir: string, keepPath: string): Promise<void> {
-  const configured = Number(process.env['FACET_FRAGMENT_MAX_AGE_MS'] ?? 86_400_000);
-  const maxAgeMs = Number.isFinite(configured) && configured >= 60_000 ? configured : 86_400_000;
-  const cutoff = Date.now() - maxAgeMs;
-  try {
-    const entries = await readdir(fragmentDir, { withFileTypes: true });
-    await Promise.all(entries
-      .filter((entry) => entry.isFile() && entry.name.endsWith('.tsx'))
-      .map(async (entry) => {
-        const path = join(fragmentDir, entry.name);
-        if (path === keepPath || (await stat(path)).mtimeMs >= cutoff) return;
-        await rm(path, { force: true });
-      }));
-  } catch { /* pruning is best effort under concurrent workspace activity */ }
-}
-
-async function buildFragment(
-  consumerRoot: string,
-  filename: string,
-  code: string,
-  data: Record<string, unknown>,
-  logger: Logger,
-  persistentLoader = true,
-): Promise<string> {
-  const fragmentDir = join(consumerRoot, '.facet-fragments');
-  const contentKey = createHash('sha256').update(code).digest('hex').slice(0, 20);
-  const fragmentPath = join('.facet-fragments', `${filename.replace(/\.tsx$/, '')}-${contentKey}.tsx`);
-  await mkdir(fragmentDir, { recursive: true });
-  const absoluteFragmentPath = join(consumerRoot, fragmentPath);
-  await writeFile(absoluteFragmentPath, code, 'utf-8');
-  await pruneFragments(fragmentDir, absoluteFragmentPath);
-  const result = await buildTemplate({
-    templatePath: fragmentPath,
-    data,
-    consumerRoot,
-    logger,
-    persistentLoader,
-  });
-  try {
-    return result.html;
-  } finally {
-    await result.cleanup();
-  }
-}
-
-function extractBodyContent(html: string): string {
-  const bodyMatch = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
-  return bodyMatch ? bodyMatch[1].trim() : html.replace(/<!DOCTYPE[^>]*>/i, '').trim();
-}
-
-function insertBeforeBodyClose(mainHtml: string, fragment: string): string {
-  if (mainHtml.includes('</body>')) {
-    return mainHtml.replace('</body>', `${fragment}</body>`);
-  }
-  return mainHtml + fragment;
-}
-
-async function injectHeaderFooter(
-  html: string,
-  parsed: ParsedRenderRequest,
-  consumerRoot: string,
-  logger: Logger,
-  progress?: RenderProgress,
-  persistentLoader = true,
-): Promise<string> {
-  if (!parsed.headerCode && !parsed.footerCode) return html;
-
-  if (parsed.headerCode) {
-    progress?.emit('building', 'Building header template...');
-    const headerHtml = await buildFragment(consumerRoot, '_Header.tsx', parsed.headerCode, parsed.data, logger, persistentLoader);
-    html = insertBeforeBodyClose(html, extractBodyContent(headerHtml));
-  }
-
-  if (parsed.footerCode) {
-    progress?.emit('building', 'Building footer template...');
-    const footerHtml = await buildFragment(consumerRoot, '_Footer.tsx', parsed.footerCode, parsed.data, logger, persistentLoader);
-    html = insertBeforeBodyClose(html, extractBodyContent(footerHtml));
-  }
-
-  return html;
-}
-
-async function applyTailwind(
-  html: string,
-  css: string,
-  facetRoot: string,
-  buildCacheKey: string,
-  logger: Logger,
-): Promise<string> {
-  try {
-    css = await runTailwindCached({
-      facetRoot,
-      stylesInput: join(facetRoot, 'src/styles.css'),
-      html,
-      buildCacheKey,
-    });
-  } catch {
-    logger.debug('Tailwind CSS failed, using Vite CSS fallback');
-  }
-  return combineHTMLAndCSS(html, css);
-}
-
-async function respondWithOutput(
-  content: Buffer | string,
-  contentType: string,
-  extension: string,
-  templateName: string,
-  parsed: ParsedRenderRequest,
-  s3: S3Uploader | undefined,
-  logger: Logger,
-): Promise<Response> {
-  if (parsed.output === 's3') {
-    if (!s3) throw new RenderError('INVALID_REQUEST', 'S3 not configured', 400);
-
-    const key = parsed.s3Key ?? s3.generateKey(templateName, extension);
-    const url = await s3.upload(key, content, contentType);
-    const presigned = await s3.presignedUrl(key);
-    logger.debug(`Uploaded to S3: ${key}`);
-
-    return Response.json({ url, presignedUrl: presigned, key });
-  }
-
-  const filename = parsed.filename ?? `${templateName}.${extension}`;
-  return new Response(typeof content === 'string' ? content : new Uint8Array(content), {
-    headers: {
-      'content-type': contentType,
-      'content-disposition': `inline; filename="${filename}"`,
-    },
-  });
-}
diff --git a/cli/src/server/template-workspaces.ts b/cli/src/server/template-workspaces.ts
index 818c48a..7933236 100644
--- a/cli/src/server/template-workspaces.ts
+++ b/cli/src/server/template-workspaces.ts
@@ -14,7 +14,7 @@ const creationLocks = new Map<string, Promise<void>>();
 const references = new Map<string, number>();
 
 function workspaceKey(sourceDir: string, entryFile: string): string {
-  const sourceKey = computeTemplateBuildKey(sourceDir, VERSION);
+  const sourceKey = computeTemplateBuildKey({ consumerRoot: sourceDir, facetVersion: VERSION });
   return createHash('sha256')
     .update(sourceKey).update('\0').update(entryFile)
     .digest('hex').slice(0, 24);
diff --git a/cli/src/types.ts b/cli/src/types.ts
index afa6e97..e8ced32 100644
--- a/cli/src/types.ts
+++ b/cli/src/types.ts
@@ -25,14 +25,19 @@ export interface GenerateOptions {
   schema?: string;
   srcDir?: string;
   validate: boolean;
-  verbose: boolean;
+  /** Verbosity: false/0 quiet, 1 (-v) Vite progress, 2 (-vv) Vite debug, 3 (-vvv) plugin debug + profile. */
+  verbose: boolean | number;
   refresh?: boolean;
   clearCache?: boolean;
+  /** Use the shared Facet-only module install and ignore consumer package metadata. */
+  skipModules?: boolean;
   /**
    * Render in a live browser (Vite dev server + Puppeteer) instead of SSR.
    * Required for templates using DOM-measuring components (diagrams/react-xarrows).
    */
   live?: boolean;
+  /** Rebuild CSS after rendering so data-dependent class names are included. */
+  postProcessCss?: boolean;
   /** Run the SSR loader inside a sandbox-runtime jail (path to settings, or true for the default). */
   sandbox?: string | boolean;
   debug?: boolean;
@@ -45,6 +50,7 @@ export interface GenerateOptions {
   fontSize?: number;
   encryption?: import('./utils/pdf-security.js').PDFEncryptionOptions;
   signature?: import('./utils/pdf-security.js').PDFSignatureOptions;
+  timings?: import('./utils/performance.js').RenderTimings;
 }
 
 export interface LoadedData {
diff --git a/cli/src/utils/assets.test.ts b/cli/src/utils/assets.test.ts
index 6ee90c8..55ab7fd 100644
--- a/cli/src/utils/assets.test.ts
+++ b/cli/src/utils/assets.test.ts
@@ -11,8 +11,8 @@ describe('assetPath', () => {
     expect(JSON.parse(readFileSync(p, 'utf-8')).name).toBe('@flanksource/facet');
   });
 
-  it('resolves styles.css and openapi.yaml to existing files', () => {
-    for (const name of ['styles.css', 'openapi.yaml'] as const) {
+  it('resolves runtime assets to existing files', () => {
+    for (const name of ['styles.css', 'openapi.yaml', 'mermaid.min.js'] as const) {
       expect(existsSync(assetPath(name))).toBe(true);
     }
   });
diff --git a/cli/src/utils/assets.ts b/cli/src/utils/assets.ts
index e0927ba..8651934 100644
--- a/cli/src/utils/assets.ts
+++ b/cli/src/utils/assets.ts
@@ -1,6 +1,6 @@
 /**
  * Resolve bundled runtime assets (the repo-root package.json, openapi.yaml,
- * styles.css, and the two vite loaders) by name, returning an absolute path.
+ * styles.css, and Mermaid browser bundle) by name, returning an absolute path.
  *
  * Replaces Bun's `import x from './f' with { type: 'file' }`, which is not a
  * Node feature. Works in the source tree (run via tsx) and in the built package
@@ -36,7 +36,7 @@ function seaAssetPath(name: string): string | undefined {
 
 // Candidate locations relative to this module, first existing wins:
 //   - source layout: this module sits at cli/src/utils/, so repo-root files are
-//     three levels up and the loaders two levels up (cli/).
+//     three levels up.
 //   - built layout: the bundle sits at cli/dist/, with assets copied to
 //     cli/dist/assets/ — so `assets/<name>` resolves beside the bundle.
 // Paths are explicit (not a fuzzy multi-base walk) so package.json always
@@ -48,7 +48,8 @@ function seaAssetPath(name: string): string | undefined {
 const ASSET_CANDIDATES = {
   'package.json': ['assets/package.json', '../../../package.json'],
   'openapi.yaml': ['assets/openapi.yaml', '../../../openapi.yaml'],
-  'styles.css': ['assets/styles.css', '../../../src/styles.css'],
+  'styles.css': ['assets/styles.css', '../../../dist/styles.css'],
+  'mermaid.min.js': ['assets/mermaid.min.js', '../../../node_modules/mermaid/dist/mermaid.min.js'],
 } satisfies Record<string, string[]>;
 
 export type AssetName = keyof typeof ASSET_CANDIDATES;
diff --git a/cli/src/utils/browser-html.test.ts b/cli/src/utils/browser-html.test.ts
new file mode 100644
index 0000000..5924ba3
--- /dev/null
+++ b/cli/src/utils/browser-html.test.ts
@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest';
+import { hasMermaidCodeBlocks } from './browser-html.js';
+
+describe('hasMermaidCodeBlocks', () => {
+  it('detects Mermaid language classes regardless of class order', () => {
+    expect(hasMermaidCodeBlocks('<pre><code class="foo language-mermaid bar">graph LR</code></pre>')).toBe(true);
+    expect(hasMermaidCodeBlocks('<pre><code class="language-yaml">key: value</code></pre>')).toBe(false);
+  });
+});
diff --git a/cli/src/utils/browser-html.ts b/cli/src/utils/browser-html.ts
new file mode 100644
index 0000000..249e628
--- /dev/null
+++ b/cli/src/utils/browser-html.ts
@@ -0,0 +1,27 @@
+import type { Browser } from 'puppeteer-core';
+import { launchBrowser } from './pdf-generator.js';
+import { renderMermaidInPage } from './browser-readiness.js';
+
+export function hasMermaidCodeBlocks(html: string): boolean {
+  return /<code\b[^>]*\bclass=["'][^"']*\blanguage-mermaid\b/.test(html);
+}
+
+/** Materialize browser-backed Markdown extensions into self-contained HTML. */
+export async function renderBrowserHTML(options: { html: string; browser?: Browser }): Promise<string> {
+  const { html } = options;
+  if (!hasMermaidCodeBlocks(html)) return html;
+
+  const browser = options.browser ?? await launchBrowser();
+  try {
+    const page = await browser.newPage();
+    try {
+      await page.setContent(html, { waitUntil: 'domcontentloaded', timeout: 30_000 });
+      await renderMermaidInPage(page);
+      return await page.content();
+    } finally {
+      await page.close();
+    }
+  } finally {
+    if (!options.browser) await browser.close();
+  }
+}
diff --git a/cli/src/utils/browser-readiness.ts b/cli/src/utils/browser-readiness.ts
index 8fb466a..463b013 100644
--- a/cli/src/utils/browser-readiness.ts
+++ b/cli/src/utils/browser-readiness.ts
@@ -1,10 +1,44 @@
 import type { Page } from 'puppeteer-core';
+import { assetPath } from './assets.js';
 
 export interface PageReadinessOptions {
   timeoutMs?: number;
   waitForFacet?: boolean;
 }
 
+interface MermaidRuntime {
+  initialize(config: Record<string, unknown>): void;
+  run(options: { querySelector: string }): Promise<void>;
+}
+
+/** Replace Mermaid code fences with SVG using the Chromium page already rendering the document. */
+export async function renderMermaidInPage(page: Page): Promise<boolean> {
+  const count = await page.evaluate(() => {
+    const blocks = document.querySelectorAll('pre > code.language-mermaid');
+    blocks.forEach((code) => {
+      const container = document.createElement('div');
+      container.className = 'mermaid';
+      container.textContent = code.textContent;
+      code.parentElement?.replaceWith(container);
+    });
+    return blocks.length;
+  });
+  if (count === 0) return false;
+
+  const script = await page.addScriptTag({ path: assetPath('mermaid.min.js') });
+  try {
+    await page.evaluate(async () => {
+      const runtime = (window as typeof window & { mermaid?: MermaidRuntime }).mermaid;
+      if (!runtime) throw new Error('Mermaid runtime did not initialize');
+      runtime.initialize({ startOnLoad: false, securityLevel: 'strict', theme: 'neutral' });
+      await runtime.run({ querySelector: '.mermaid' });
+    });
+  } finally {
+    await script.evaluate((element) => element.remove());
+  }
+  return true;
+}
+
 /**
  * Wait for resources which can change print layout after DOMContentLoaded.
  * Templates may expose `window.__FACET_READY__` as a Promise for asynchronous
@@ -68,5 +102,6 @@ export async function setPreparedContent(
 ): Promise<void> {
   const timeoutMs = options.timeoutMs ?? 30_000;
   await page.setContent(html, { waitUntil: 'domcontentloaded', timeout: timeoutMs });
+  await renderMermaidInPage(page);
   await waitForPageReady(page, options);
 }
diff --git a/cli/src/utils/live-template.test.ts b/cli/src/utils/live-template.test.ts
new file mode 100644
index 0000000..aad648f
--- /dev/null
+++ b/cli/src/utils/live-template.test.ts
@@ -0,0 +1,46 @@
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+import { parseTemplateDirectives, shouldPostProcessCSS, shouldUseLiveRendering } from './live-template.js';
+
+const fixture = (name: string) => fileURLToPath(new URL(`../../test/fixtures/${name}`, import.meta.url));
+
+describe('shouldUseLiveRendering', () => {
+  it('enables live rendering when requested explicitly', () => {
+    expect(shouldUseLiveRendering(true, fixture('standard-template.tsx'))).toBe(true);
+  });
+
+  it('enables live rendering when the first non-empty line is // @live', () => {
+    expect(shouldUseLiveRendering(false, fixture('live-template.tsx'))).toBe(true);
+  });
+
+  it('does not enable live rendering for a later // @live comment', () => {
+    expect(shouldUseLiveRendering(false, fixture('standard-template.tsx'))).toBe(false);
+  });
+});
+
+describe('template directives', () => {
+  it('parses a leading directive block in any order', () => {
+    expect(parseTemplateDirectives(`
+// @post-process-css=false
+// @live
+import React from 'react';
+`)).toEqual({ live: true, postProcessCss: false });
+  });
+
+  it('stops parsing directives at the first source line', () => {
+    expect(parseTemplateDirectives(`
+// @live
+import React from 'react';
+// @post-process-css=false
+`)).toEqual({ live: true });
+  });
+
+  it('lets an explicit option override the template directive', () => {
+    expect(shouldPostProcessCSS(true, `// @post-process-css=false\nexport default null;`)).toBe(true);
+    expect(shouldPostProcessCSS(false, `// @post-process-css=true\nexport default null;`)).toBe(false);
+  });
+
+  it('defaults CSS post-processing to enabled', () => {
+    expect(shouldPostProcessCSS(undefined, 'export default null;')).toBe(true);
+  });
+});
diff --git a/cli/src/utils/live-template.ts b/cli/src/utils/live-template.ts
new file mode 100644
index 0000000..7285f4b
--- /dev/null
+++ b/cli/src/utils/live-template.ts
@@ -0,0 +1,48 @@
+import { readFileSync } from 'node:fs';
+
+export interface TemplateDirectives {
+  live?: boolean;
+  postProcessCss?: boolean;
+}
+
+export function parseTemplateDirectives(source: string): TemplateDirectives {
+  const directives: TemplateDirectives = {};
+  for (const line of source.slice(0, 4096).split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    if (/^\/\/\s*@live\b/.test(trimmed)) {
+      directives.live = true;
+      continue;
+    }
+    const postProcess = trimmed.match(/^\/\/\s*@post-process-css=(true|false)\s*$/);
+    if (postProcess) {
+      directives.postProcessCss = postProcess[1] === 'true';
+      continue;
+    }
+    if (/^\/\/\s*@post-process-css\b/.test(trimmed)) {
+      throw new Error('Expected @post-process-css=true or @post-process-css=false');
+    }
+    break;
+  }
+  return directives;
+}
+
+export function readTemplateDirectives(templatePath: string): TemplateDirectives {
+  return parseTemplateDirectives(readFileSync(templatePath, 'utf-8'));
+}
+
+export function isLiveTemplate(templatePath: string): boolean {
+  return readTemplateDirectives(templatePath).live === true;
+}
+
+export function shouldUseLiveRendering(explicitLive: boolean | undefined, templatePath: string): boolean {
+  return explicitLive || isLiveTemplate(templatePath);
+}
+
+export function shouldPostProcessCSS(explicit: boolean | undefined, source: string): boolean {
+  return explicit ?? parseTemplateDirectives(source).postProcessCss ?? true;
+}
+
+export function shouldPostProcessTemplateCSS(explicit: boolean | undefined, templatePath: string): boolean {
+  return explicit ?? readTemplateDirectives(templatePath).postProcessCss ?? true;
+}
diff --git a/cli/src/utils/logger.test.ts b/cli/src/utils/logger.test.ts
new file mode 100644
index 0000000..31bb9cd
--- /dev/null
+++ b/cli/src/utils/logger.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { Logger } from './logger.js';
+
+describe('Logger verbosity', () => {
+  it('maps boolean construction onto levels', () => {
+    expect(new Logger().verbosity()).toBe(0);
+    expect(new Logger(false).isVerbose()).toBe(false);
+    expect(new Logger(true).verbosity()).toBe(1);
+    expect(new Logger(true).isVerbose()).toBe(true);
+  });
+
+  it('keeps counted levels and clamps negatives', () => {
+    expect(new Logger(0).isVerbose()).toBe(false);
+    expect(new Logger(3).verbosity()).toBe(3);
+    expect(new Logger(3).isVerbose()).toBe(true);
+    expect(new Logger(-2).verbosity()).toBe(0);
+  });
+});
diff --git a/cli/src/utils/logger.ts b/cli/src/utils/logger.ts
index 03af899..f64127e 100644
--- a/cli/src/utils/logger.ts
+++ b/cli/src/utils/logger.ts
@@ -1,7 +1,19 @@
 import chalk from 'chalk';
 
 export class Logger {
-  constructor(private verbose: boolean = false) { }
+  private readonly level: number;
+
+  constructor(verbose: boolean | number = false) {
+    this.level = typeof verbose === 'number' ? Math.max(0, verbose) : (verbose ? 1 : 0);
+  }
+
+  isVerbose(): boolean {
+    return this.level >= 1;
+  }
+
+  verbosity(): number {
+    return this.level;
+  }
 
   info(message: string): void {
     console.log(chalk.blue('ℹ'), message);
@@ -20,7 +32,7 @@ export class Logger {
   }
 
   debug(message: string): void {
-    if (this.verbose) {
+    if (this.level >= 1) {
       console.log(chalk.gray('[DEBUG]'), message);
     }
   }
diff --git a/cli/src/utils/pdf-generator-priority.test.ts b/cli/src/utils/pdf-generator-priority.test.ts
new file mode 100644
index 0000000..4a6b24a
--- /dev/null
+++ b/cli/src/utils/pdf-generator-priority.test.ts
@@ -0,0 +1,19 @@
+import puppeteer from 'puppeteer-core';
+import { describe, expect, it } from 'vitest';
+import { buildBrowserLaunchOptions } from './pdf-generator.js';
+
+describe('buildBrowserLaunchOptions', () => {
+  it('preserves Puppeteer defaults behind the macOS priority wrappers', () => {
+    const chromePath = '/Applications/Chromium.app/Contents/MacOS/Chromium';
+    const chromeArgs = puppeteer.defaultArgs({
+      headless: true,
+      args: ['--no-sandbox', '--disable-setuid-sandbox'],
+    });
+
+    expect(buildBrowserLaunchOptions({ chromePath, platform: 'darwin' })).toEqual({
+      executablePath: '/usr/bin/nice',
+      ignoreDefaultArgs: true,
+      args: ['-n', '10', chromePath, ...chromeArgs],
+    });
+  });
+});
diff --git a/cli/src/utils/pdf-generator.ts b/cli/src/utils/pdf-generator.ts
index 780fdf2..f52d878 100644
--- a/cli/src/utils/pdf-generator.ts
+++ b/cli/src/utils/pdf-generator.ts
@@ -12,11 +12,12 @@ import { fileURLToPath } from 'url';
 import { PDFDocument } from 'pdf-lib';
 import { injectDebugAnnotations, injectTypographyAnnotations, extractTypographyInfo, type FontCombo } from './debug-annotations.js';
 import { VERSION, BUILD_DATE, GIT_COMMIT } from '../version-generated.js';
-import puppeteer, { type Browser, type BrowserContext, type Page } from 'puppeteer-core';
+import puppeteer, { type Browser, type BrowserContext, type Page, type PuppeteerLaunchOptions } from 'puppeteer-core';
 
 type PageProvider = Browser | BrowserContext;
 import { Logger } from './logger.js';
 import { setPreparedContent } from './browser-readiness.js';
+import { applySpawnedProcessPriority, buildLowPriorityCommand } from './subprocess-priority.js';
 
 function readVersion(): string {
   try {
@@ -84,6 +85,26 @@ export function resolveChromePath(): string | undefined {
   return (SYSTEM_CHROME_PATHS[process.platform] ?? []).find(existsSync);
 }
 
+export function buildBrowserLaunchOptions(options: {
+  chromePath: string;
+  platform?: NodeJS.Platform;
+}): PuppeteerLaunchOptions {
+  const chromeArgs = puppeteer.defaultArgs({
+    headless: true,
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+  const command = buildLowPriorityCommand({
+    command: options.chromePath,
+    args: chromeArgs,
+    platform: options.platform,
+  });
+  return {
+    executablePath: command.command,
+    ignoreDefaultArgs: true,
+    args: command.args,
+  };
+}
+
 async function loadAndPrepare(browser: PageProvider, html: string, widthMm?: number): Promise<Page> {
   const page = await browser.newPage();
   if (widthMm) {
@@ -535,11 +556,16 @@ export async function generatePDFFromHTML(options: PDFOptions): Promise<void> {
 }
 
 export async function launchBrowser(): Promise<Browser> {
-  return puppeteer.launch({
-    headless: true,
-    executablePath: resolveChromePath(),
-    args: ['--no-sandbox', '--disable-setuid-sandbox'],
-  });
+  const chromePath = resolveChromePath();
+  if (!chromePath) {
+    throw new Error('Chrome/Chromium executable not found; set PUPPETEER_EXECUTABLE_PATH or CHROME_PATH');
+  }
+  const browser = await puppeteer.launch(buildBrowserLaunchOptions({ chromePath }));
+  const process = browser.process();
+  if (process?.pid !== undefined) {
+    applySpawnedProcessPriority({ pid: process.pid, kill: () => process.kill() });
+  }
+  return browser;
 }
 
 export async function generatePDFWithBrowser(
diff --git a/cli/src/utils/pdf-security-timings.test.ts b/cli/src/utils/pdf-security-timings.test.ts
new file mode 100644
index 0000000..9c5d0f4
--- /dev/null
+++ b/cli/src/utils/pdf-security-timings.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from 'vitest';
+import { Logger } from './logger.js';
+import { RenderTimings } from './performance.js';
+import { applyPDFSecurity } from './pdf-security.js';
+
+vi.mock('pdf-rfc3161', () => ({
+  timestampPdf: vi.fn(async ({ pdf }: { pdf: Uint8Array }) => ({ pdf })),
+}));
+
+vi.mock('@pdfsmaller/pdf-encrypt', () => ({
+  encryptPDF: vi.fn(async (pdf: Uint8Array) => pdf),
+}));
+
+describe('applyPDFSecurity timings', () => {
+  it('separates timestamping from other PDF post-processing', async () => {
+    const timings = new RenderTimings(() => 10);
+    const logger = new Logger();
+    vi.spyOn(logger, 'info').mockImplementation(() => undefined);
+
+    const result = await applyPDFSecurity(Buffer.from('test-pdf'), {
+      signature: { timestampUrl: 'https://tsa.example.com' },
+      encryption: { ownerPassword: 'test-owner-password' },
+      timings,
+    }, logger);
+
+    expect({ result: result.toString(), timings: timings.entries() }).toEqual({
+      result: 'test-pdf',
+      timings: [
+        { name: 'post-processing', description: 'Post-processing', durationMs: 0 },
+        { name: 'timestamping', description: 'Timestamping', durationMs: 0 },
+      ],
+    });
+  });
+});
diff --git a/cli/src/utils/pdf-security.ts b/cli/src/utils/pdf-security.ts
index 6266793..77c563a 100644
--- a/cli/src/utils/pdf-security.ts
+++ b/cli/src/utils/pdf-security.ts
@@ -10,6 +10,7 @@ import {
   ANNOTATION_FLAGS,
 } from '@signpdf/utils';
 import { Logger } from './logger.js';
+import type { RenderTimingPhase, RenderTimings } from './performance.js';
 
 export interface PDFEncryptionOptions {
   userPassword?: string;
@@ -35,6 +36,7 @@ export interface PDFSignatureOptions {
 interface PDFSecurityOptions {
   encryption?: PDFEncryptionOptions;
   signature?: PDFSignatureOptions;
+  timings?: RenderTimings;
 }
 
 class PDFRawLiteral extends PDFObject {
@@ -56,23 +58,28 @@ export async function applyPDFSecurity(
   logger: Logger = new Logger(),
 ): Promise<Buffer> {
   let result = buffer;
-  if (options.signature) {
-    const hasCert = options.signature.certPath || options.signature.selfSigned;
+  const measure = <T>(phase: RenderTimingPhase, action: () => Promise<T>): Promise<T> =>
+    options.timings ? options.timings.measure(phase, action) : action();
+  const signature = options.signature;
+  if (signature) {
+    const hasCert = signature.certPath || signature.selfSigned;
     if (hasCert) {
-      const method = options.signature.selfSigned ? 'self-signed' : 'PKCS#7';
+      const method = signature.selfSigned ? 'self-signed' : 'PKCS#7';
       const t0 = performance.now();
-      result = await signPDF(result, options.signature);
+      result = await measure('post-processing', () => signPDF(result, signature));
       logger.info(`Signed PDF (${method}) in ${(performance.now() - t0).toFixed(0)}ms`);
     }
-    if (options.signature.timestampUrl) {
+    const timestampUrl = signature.timestampUrl;
+    if (timestampUrl) {
       const t0 = performance.now();
-      result = await timestampPDF(result, options.signature.timestampUrl);
-      logger.info(`Timestamped PDF via ${options.signature.timestampUrl} in ${(performance.now() - t0).toFixed(0)}ms`);
+      result = await measure('timestamping', () => timestampPDF(result, timestampUrl));
+      logger.info(`Timestamped PDF via ${timestampUrl} in ${(performance.now() - t0).toFixed(0)}ms`);
     }
   }
-  if (options.encryption) {
+  const encryption = options.encryption;
+  if (encryption) {
     const t0 = performance.now();
-    result = await encryptPDF(result, options.encryption);
+    result = await measure('post-processing', () => encryptPDF(result, encryption));
     logger.info(`Encrypted PDF (AES-256) in ${(performance.now() - t0).toFixed(0)}ms`);
   }
   return result;
diff --git a/cli/src/utils/performance.test.ts b/cli/src/utils/performance.test.ts
new file mode 100644
index 0000000..7476552
--- /dev/null
+++ b/cli/src/utils/performance.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from 'vitest';
+import { Logger } from './logger.js';
+import { RenderTimings } from './performance.js';
+
+describe('RenderTimings', () => {
+  it('accumulates render phases and serializes them in Server-Timing order', async () => {
+    let now = 100;
+    const timings = new RenderTimings(() => now);
+
+    await timings.measure('vite', async () => { now += 8.25; });
+    await timings.measure('dependency-install', async () => { now += 12.34; });
+    await timings.measure('vite', async () => { now += 1.25; });
+    await timings.measure('tailwind', async () => { now += 3.5; });
+    await timings.measure('header-generation', async () => { now += 2; });
+    await timings.measure('pdf-generation', async () => { now += 30.1; });
+    await timings.measure('post-processing', async () => { now += 4.5; });
+    await timings.measure('timestamping', async () => { now += 6.75; });
+
+    expect(timings.entries()).toEqual([
+      { name: 'dependency-install', description: 'Dependency install', durationMs: 12.3 },
+      { name: 'vite', description: 'Vite', durationMs: 9.5 },
+      { name: 'tailwind', description: 'Tailwind CSS', durationMs: 3.5 },
+      { name: 'header-generation', description: 'Header generation', durationMs: 2 },
+      { name: 'pdf-generation', description: 'PDF generation', durationMs: 30.1 },
+      { name: 'post-processing', description: 'Post-processing', durationMs: 4.5 },
+      { name: 'timestamping', description: 'Timestamping', durationMs: 6.8 },
+    ]);
+    expect(timings.toServerTiming()).toBe(
+      'dependency-install;dur=12.3;desc="Dependency install", '
+      + 'vite;dur=9.5;desc="Vite", '
+      + 'tailwind;dur=3.5;desc="Tailwind CSS", '
+      + 'header-generation;dur=2;desc="Header generation", '
+      + 'pdf-generation;dur=30.1;desc="PDF generation", '
+      + 'post-processing;dur=4.5;desc="Post-processing", '
+      + 'timestamping;dur=6.8;desc="Timestamping"',
+    );
+  });
+
+  it('shows measured phases in CLI output', async () => {
+    let now = 0;
+    const timings = new RenderTimings(() => now);
+    const logger = new Logger();
+    const info = vi.spyOn(logger, 'info').mockImplementation(() => undefined);
+
+    await timings.measure('dependency-install', async () => { now = 12.34; });
+    await timings.measure('vite', async () => { now = 20; });
+    timings.log(logger);
+
+    expect(info).toHaveBeenCalledWith('Timings: Dependency install 12.3ms | Vite 7.7ms');
+  });
+});
diff --git a/cli/src/utils/performance.ts b/cli/src/utils/performance.ts
index fef21a8..0a71e3a 100644
--- a/cli/src/utils/performance.ts
+++ b/cli/src/utils/performance.ts
@@ -1,6 +1,59 @@
 import { performance } from 'node:perf_hooks';
 import type { Logger } from './logger.js';
 
+const RENDER_PHASES = [
+  { name: 'dependency-install', description: 'Dependency install' },
+  { name: 'vite', description: 'Vite' },
+  { name: 'tailwind', description: 'Tailwind CSS' },
+  { name: 'header-generation', description: 'Header generation' },
+  { name: 'pdf-generation', description: 'PDF generation' },
+  { name: 'post-processing', description: 'Post-processing' },
+  { name: 'timestamping', description: 'Timestamping' },
+] as const;
+
+export type RenderTimingPhase = typeof RENDER_PHASES[number]['name'];
+
+export interface RenderTimingEntry {
+  name: RenderTimingPhase;
+  description: string;
+  durationMs: number;
+}
+
+export class RenderTimings {
+  private readonly durations = new Map<RenderTimingPhase, number>();
+
+  constructor(private readonly now: () => number = performance.now.bind(performance)) {}
+
+  async measure<T>(phase: RenderTimingPhase, action: () => Promise<T>): Promise<T> {
+    const startedAt = this.now();
+    try {
+      return await action();
+    } finally {
+      this.durations.set(phase, (this.durations.get(phase) ?? 0) + this.now() - startedAt);
+    }
+  }
+
+  entries(): RenderTimingEntry[] {
+    return RENDER_PHASES.flatMap(({ name, description }) => {
+      const duration = this.durations.get(name);
+      return duration == null ? [] : [{ name, description, durationMs: Number(duration.toFixed(1)) }];
+    });
+  }
+
+  toServerTiming(): string {
+    return this.entries()
+      .map(({ name, description, durationMs }) => `${name};dur=${durationMs};desc="${description}"`)
+      .join(', ');
+  }
+
+  log(logger: Logger): void {
+    const summary = this.entries()
+      .map(({ description, durationMs }) => `${description} ${durationMs}ms`)
+      .join(' | ');
+    if (summary) logger.info(`Timings: ${summary}`);
+  }
+}
+
 interface StageMeasurement {
   stage: string;
   durationMs: number;
diff --git a/cli/src/utils/remote-resolver.ts b/cli/src/utils/remote-resolver.ts
index fadebe1..64c9b58 100644
--- a/cli/src/utils/remote-resolver.ts
+++ b/cli/src/utils/remote-resolver.ts
@@ -1,5 +1,5 @@
 import { createHash } from 'crypto';
-import { existsSync, rmSync } from 'fs';
+import { existsSync, readdirSync, rmSync, statSync } from 'fs';
 import { mkdir, writeFile, readFile, chmod, mkdtemp } from 'fs/promises';
 import { join, dirname, basename } from 'path';
 import { homedir, tmpdir } from 'os';
@@ -181,6 +181,30 @@ async function readManifest(dir: string): Promise<CacheManifest | null> {
 
 async function writeManifest(dir: string, manifest: CacheManifest): Promise<void> {
   await writeFile(join(dir, 'facet-cache.json'), JSON.stringify(manifest, null, 2), 'utf-8');
+  pruneRemoteCache(dirname(dir), dir);
+}
+
+/**
+ * Keep the newest FACET_REMOTE_CACHE_ENTRIES resolved refs (default 20).
+ * Entries are recognized by their facet-cache.json manifest, so sibling
+ * directories like modules/ are never touched. Runs only after a fetch.
+ */
+function pruneRemoteCache(baseDir: string, keepDir: string): void {
+  const maxEntries = Math.max(1, parseInt(process.env['FACET_REMOTE_CACHE_ENTRIES'] ?? '20', 10));
+  let entries: Array<{ path: string; mtimeMs: number }>;
+  try {
+    entries = readdirSync(baseDir, { withFileTypes: true })
+      .filter((entry) => entry.isDirectory())
+      .map((entry) => join(baseDir, entry.name))
+      .filter((path) => path !== keepDir && existsSync(join(path, 'facet-cache.json')))
+      .map((path) => ({ path, mtimeMs: statSync(join(path, 'facet-cache.json')).mtimeMs }));
+  } catch {
+    return;
+  }
+  entries.sort((a, b) => b.mtimeMs - a.mtimeMs);
+  for (const stale of entries.slice(Math.max(0, maxEntries - 1))) {
+    try { rmSync(stale.path, { recursive: true, force: true }); } catch { /* best effort */ }
+  }
 }
 
 // --- Git resolver ---
diff --git a/cli/src/utils/server-render.test.ts b/cli/src/utils/server-render.test.ts
new file mode 100644
index 0000000..b03ea50
--- /dev/null
+++ b/cli/src/utils/server-render.test.ts
@@ -0,0 +1,120 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { createServer, type IncomingMessage, type ServerResponse } from 'node:http';
+import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+
+import type { GenerateOptions } from '../types.js';
+import { renderWithServer, resolveFacetURL } from './server-render.js';
+
+const scratchRoot = resolve(process.cwd(), '.tmp');
+const roots: string[] = [];
+const servers: ReturnType<typeof createServer>[] = [];
+
+async function fixture(): Promise<{ root: string; options: GenerateOptions }> {
+  await mkdir(scratchRoot, { recursive: true });
+  const root = await mkdtemp(join(scratchRoot, 'server-render-'));
+  roots.push(root);
+  await writeFile(join(root, 'package.json'), JSON.stringify({ name: 'server-render-fixture' }));
+  await writeFile(join(root, 'Template.tsx'), 'export default () => <html><body>fixture</body></html>');
+  await writeFile(join(root, 'data.json'), JSON.stringify({ title: 'Remote report' }));
+  return {
+    root,
+    options: {
+      template: join(root, 'Template.tsx'),
+      data: join(root, 'data.json'),
+      outputDir: join(root, 'output'),
+      outputName: 'report',
+      outputNameField: 'name',
+      validate: true,
+      verbose: false,
+    },
+  };
+}
+
+async function body(request: IncomingMessage): Promise<Buffer> {
+  const chunks: Buffer[] = [];
+  for await (const chunk of request) chunks.push(Buffer.from(chunk));
+  return Buffer.concat(chunks);
+}
+
+async function listen(
+  handler: (request: IncomingMessage, response: ServerResponse) => void,
+): Promise<string> {
+  const server = createServer(handler);
+  servers.push(server);
+  await new Promise<void>((resolveListen) => server.listen(0, '127.0.0.1', resolveListen));
+  const address = server.address();
+  if (!address || typeof address === 'string') throw new Error('Expected TCP server address');
+  return `http://127.0.0.1:${address.port}`;
+}
+
+afterEach(async () => {
+  await Promise.all(servers.splice(0).map((server) => new Promise<void>((resolveClose) => server.close(() => resolveClose()))));
+  await Promise.all(roots.splice(0).map((root) => rm(root, { recursive: true, force: true })));
+});
+
+describe('resolveFacetURL', () => {
+  it('uses the explicit flag before FACET_URL', () => {
+    expect(resolveFacetURL('https://flag.example', 'https://env.example')).toBe('https://flag.example');
+  });
+
+  it('uses FACET_URL when the flag is absent', () => {
+    expect(resolveFacetURL(undefined, 'https://env.example')).toBe('https://env.example');
+  });
+});
+
+describe('renderWithServer', () => {
+  it('uploads the project and writes returned HTML to the requested output', async () => {
+    const received: { method?: string; contentType?: string; body?: string } = {};
+    const facetURL = await listen(async (request, response) => {
+      received.method = request.method;
+      received.contentType = request.headers['content-type'];
+      received.body = (await body(request)).toString('latin1');
+      response.writeHead(200, { 'content-type': 'text/html' });
+      response.end('<html><body>remote html</body></html>');
+    });
+    const { options } = await fixture();
+
+    await renderWithServer({ facetURL, format: 'html', options });
+
+    expect(received).toMatchObject({
+      method: 'POST',
+      contentType: expect.stringContaining('multipart/form-data'),
+      body: expect.stringContaining('"entryFile":"Template.tsx"'),
+    });
+    expect(received.body).toContain('"title":"Remote report"');
+    await expect(readFile(join(options.outputDir, 'report.html'), 'utf-8'))
+      .resolves.toBe('<html><body>remote html</body></html>');
+  });
+
+  it('downloads the PDF result URL and writes the PDF locally', async () => {
+    const pdf = Buffer.from('%PDF-remote-result');
+    const facetURL = await listen(async (request, response) => {
+      await body(request);
+      if (request.url === '/render') {
+        response.writeHead(200, { 'content-type': 'application/json' });
+        response.end(JSON.stringify({ url: '/results/render-id' }));
+        return;
+      }
+      response.writeHead(200, { 'content-type': 'application/pdf' });
+      response.end(pdf);
+    });
+    const { options } = await fixture();
+
+    await renderWithServer({ facetURL, format: 'pdf', options });
+
+    await expect(readFile(join(options.outputDir, 'report.pdf'))).resolves.toEqual(pdf);
+  });
+
+  it('surfaces the server status and error message without a local fallback', async () => {
+    const facetURL = await listen(async (request, response) => {
+      await body(request);
+      response.writeHead(422, { 'content-type': 'application/json' });
+      response.end(JSON.stringify({ error: { code: 'INVALID_REQUEST', message: 'Template rejected' } }));
+    });
+    const { options } = await fixture();
+
+    await expect(renderWithServer({ facetURL, format: 'html', options }))
+      .rejects.toThrow('Facet server returned 422: Template rejected');
+  });
+});
diff --git a/cli/src/utils/server-render.ts b/cli/src/utils/server-render.ts
new file mode 100644
index 0000000..88f9234
--- /dev/null
+++ b/cli/src/utils/server-render.ts
@@ -0,0 +1,167 @@
+import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { basename, dirname, join, relative, resolve, sep } from 'node:path';
+
+import type { GenerateOptions } from '../types.js';
+import { DataLoader } from './data-loader.js';
+import { DataValidator } from './validator.js';
+import { Logger } from './logger.js';
+import { scopeHTML } from './css-scoper.js';
+import { applyPDFSecurity } from './pdf-security.js';
+import { resolveTemplateSource } from './template-source.js';
+import { runLowPriority } from './subprocess-priority.js';
+
+const archiveExcludes = [
+  '.git', '.facet', '.gavel', '.task', '.tmp', 'node_modules',
+  'dist', 'dist-*', 'npm-dist', 'coverage', '.DS_Store',
+];
+
+export interface ServerRenderOptions {
+  facetURL: string;
+  format: 'html' | 'pdf';
+  options: GenerateOptions;
+}
+
+export function resolveFacetURL(flag?: string, environment = process.env['FACET_URL']): string | undefined {
+  const value = flag?.trim() || environment?.trim();
+  if (!value) return undefined;
+  const url = new URL(value);
+  if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+    throw new Error(`Facet URL must use http or https: ${value}`);
+  }
+  return url.toString().replace(/\/$/, '');
+}
+
+function rejectLocalOnlyOptions(options: GenerateOptions): void {
+  const unsupported = [
+    options.clearCache ? '--clear-cache' : undefined,
+    options.skipModules ? '--skip-modules' : undefined,
+    options.sandbox ? '--sandbox' : undefined,
+  ].filter((option): option is string => option != null);
+  if (unsupported.length > 0) {
+    throw new Error(`${unsupported.join(', ')} cannot be used with --facet-url; configure these on the Facet server`);
+  }
+}
+
+async function createProjectArchive(template: string, options: GenerateOptions): Promise<{
+  archive: Buffer;
+  entryFile: string;
+}> {
+  const source = await resolveTemplateSource(template, {
+    refresh: options.refresh,
+    verbose: Boolean(options.verbose),
+  });
+  const absoluteTemplate = resolve(source.consumerRoot ?? process.cwd(), source.templatePath);
+  const consumerRoot = source.consumerRoot ?? (absoluteTemplate.startsWith(`${resolve(process.cwd())}${sep}`)
+    ? resolve(process.cwd())
+    : dirname(absoluteTemplate));
+  const entryFile = relative(consumerRoot, absoluteTemplate).split(sep).join('/');
+  if (!entryFile || entryFile === '..' || entryFile.startsWith('../')) {
+    throw new Error(`Template must be inside its project root: ${template}`);
+  }
+
+  const temporaryDirectory = await mkdtemp(join(tmpdir(), 'facet-upload-'));
+  const archivePath = join(temporaryDirectory, 'project.tar.gz');
+  try {
+    await runLowPriority({
+      command: 'tar',
+      args: [
+        '-czf', archivePath,
+        ...archiveExcludes.map((pattern) => `--exclude=${pattern}`),
+        '-C', consumerRoot,
+        '.',
+      ],
+    });
+    return { archive: await readFile(archivePath), entryFile };
+  } finally {
+    await rm(temporaryDirectory, { recursive: true, force: true });
+  }
+}
+
+async function serverError(response: Response): Promise<Error> {
+  const text = await response.text();
+  let message = text || response.statusText;
+  try {
+    const parsed = JSON.parse(text) as { error?: { message?: string } };
+    message = parsed.error?.message || message;
+  } catch (error) {
+    if (!(error instanceof SyntaxError)) throw error;
+  }
+  return new Error(`Facet server returned ${response.status}: ${message}`);
+}
+
+async function checkedFetch(url: URL, init?: RequestInit): Promise<Response> {
+  let response: Response;
+  try {
+    response = await fetch(url, init);
+  } catch (error) {
+    throw new Error(`Failed to reach Facet server at ${url.origin}: ${error instanceof Error ? error.message : String(error)}`);
+  }
+  if (!response.ok) throw await serverError(response);
+  return response;
+}
+
+async function readOptionalFile(path?: string): Promise<string | undefined> {
+  return path ? readFile(resolve(path), 'utf-8') : undefined;
+}
+
+export async function renderWithServer({ facetURL, format, options }: ServerRenderOptions): Promise<void> {
+  rejectLocalOnlyOptions(options);
+  const logger = new Logger(options.verbose);
+  const dataLoader = new DataLoader(logger);
+  const { data, outputName } = await dataLoader.load(options);
+  if (options.validate && options.schema) {
+    await new DataValidator(logger).validate(data, options.schema);
+  }
+
+  const { archive, entryFile } = await createProjectArchive(options.template, options);
+  const form = new FormData();
+  form.set('archive', new Blob([new Uint8Array(archive)], { type: 'application/gzip' }), 'project.tar.gz');
+  form.set('data', JSON.stringify(data));
+  form.set('options', JSON.stringify({
+    format,
+    entryFile,
+    filename: `${outputName}.${format}`,
+    live: options.live,
+    postProcessCss: options.postProcessCss,
+    headerCode: await readOptionalFile(options.header),
+    footerCode: await readOptionalFile(options.footer),
+    pdfOptions: format === 'pdf' ? {
+      defaultPageSize: options.pageSize,
+      landscape: options.landscape,
+      margins: options.margins,
+      debug: options.debug,
+      debugTypography: options.debugTypography,
+      fontSize: options.fontSize,
+    } : undefined,
+  }));
+
+  const renderURL = new URL('/render', `${facetURL}/`);
+  logger.info(`Submitting ${basename(options.template)} to ${renderURL.origin}`);
+  const response = await checkedFetch(renderURL, { method: 'POST', body: form });
+  let output: Buffer | string;
+  if (format === 'html') {
+    const html = await response.text();
+    output = options.cssScope ? scopeHTML(html, { scopeClass: options.cssScope }) : html;
+  } else {
+    const result = await response.json() as { url?: unknown };
+    if (typeof result.url !== 'string' || !result.url) {
+      throw new Error('Facet server PDF response did not include a result URL');
+    }
+    const pdfResponse = await checkedFetch(new URL(result.url, renderURL));
+    output = Buffer.from(await pdfResponse.arrayBuffer());
+    if (options.encryption || options.signature) {
+      output = await applyPDFSecurity(output, {
+        encryption: options.encryption,
+        signature: options.signature,
+      });
+    }
+  }
+
+  const outputDirectory = resolve(process.cwd(), options.outputDir);
+  const finalOutputName = options.outputName ?? outputName;
+  const outputPath = join(outputDirectory, `${finalOutputName}.${format}`);
+  await mkdir(outputDirectory, { recursive: true });
+  await writeFile(outputPath, output);
+  logger.success(`${format.toUpperCase()} generated by Facet server: ${outputPath}`);
+}
diff --git a/cli/src/utils/shell.ts b/cli/src/utils/shell.ts
index 19daeb1..118da87 100644
--- a/cli/src/utils/shell.ts
+++ b/cli/src/utils/shell.ts
@@ -12,7 +12,8 @@
  * (`&&`, `2>&1`, `cd`, pipes). NOTE: POSIX only — Windows support requires a
  * cmd.exe path and different escaping (tracked for the Windows binary).
  */
-import { spawn } from 'node:child_process';
+import type { ChildProcessWithoutNullStreams } from 'node:child_process';
+import { spawnLowPriority } from './subprocess-priority.js';
 
 export interface ShellResult {
   stdout: Buffer;
@@ -85,8 +86,10 @@ class ShellPromise implements PromiseLike<ShellResult> {
 
   private run(): Promise<ShellResult> {
     return new Promise((resolve, reject) => {
-      const child = spawn('/bin/sh', ['-c', this.command], {
-        env: { ...process.env, ...this.extraEnv },
+      const child = spawnLowPriority<ChildProcessWithoutNullStreams>({
+        command: '/bin/sh',
+        args: ['-c', this.command],
+        options: { env: { ...process.env, ...this.extraEnv } },
       });
 
       const stdoutChunks: Buffer[] = [];
diff --git a/cli/src/utils/subprocess-priority.test.ts b/cli/src/utils/subprocess-priority.test.ts
new file mode 100644
index 0000000..eb688ae
--- /dev/null
+++ b/cli/src/utils/subprocess-priority.test.ts
@@ -0,0 +1,123 @@
+import type { ChildProcess } from 'node:child_process';
+import { getPriority } from 'node:os';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  CHILD_PROCESS_NICE,
+  applySpawnedProcessPriority,
+  buildLowPriorityCommand,
+  runLowPriority,
+  spawnLowPriority,
+} from './subprocess-priority.js';
+
+describe('buildLowPriorityCommand', () => {
+  const input = { command: '/opt/example tool', args: ['--label', 'value with spaces'] };
+
+  it('wraps macOS commands in nice without the background QoS band', () => {
+    expect(buildLowPriorityCommand({ ...input, platform: 'darwin' })).toEqual({
+      command: '/usr/bin/nice',
+      args: ['-n', '10', input.command, ...input.args],
+    });
+  });
+
+  it('leaves commands untouched when FACET_LOW_PRIORITY=0', () => {
+    vi.stubEnv('FACET_LOW_PRIORITY', '0');
+    try {
+      expect(buildLowPriorityCommand({ ...input, platform: 'darwin' })).toEqual(input);
+      expect(buildLowPriorityCommand({ ...input, platform: 'linux' })).toEqual(input);
+    } finally {
+      vi.unstubAllEnvs();
+    }
+  });
+
+  it('wraps Linux commands in nice', () => {
+    expect(buildLowPriorityCommand({ ...input, platform: 'linux' })).toEqual({
+      command: '/usr/bin/nice',
+      args: ['-n', '10', input.command, ...input.args],
+    });
+  });
+
+  it('leaves Windows command arguments intact for native priority assignment', () => {
+    expect(buildLowPriorityCommand({ ...input, platform: 'win32' })).toEqual(input);
+  });
+
+  it('rejects unsupported operating systems', () => {
+    expect(() => buildLowPriorityCommand({ ...input, platform: 'freebsd' })).toThrow(
+      'Low-priority subprocesses are unsupported on freebsd',
+    );
+  });
+});
+
+describe('applySpawnedProcessPriority', () => {
+  it('sets Windows children to below-normal priority', () => {
+    const setPriority = vi.fn();
+    applySpawnedProcessPriority({ pid: 8123, platform: 'win32', setPriority });
+    expect(setPriority).toHaveBeenCalledWith(8123, CHILD_PROCESS_NICE);
+  });
+
+  it('kills a Windows child when priority assignment fails', () => {
+    const kill = vi.fn();
+    expect(() => applySpawnedProcessPriority({
+      pid: 8123,
+      platform: 'win32',
+      kill,
+      setPriority: () => { throw new Error('access denied'); },
+    })).toThrow('Failed to lower subprocess 8123 priority: access denied');
+    expect(kill).toHaveBeenCalledOnce();
+  });
+});
+
+if (process.platform === 'darwin' || process.platform === 'linux') {
+  it('launches a child with niceness increased by ten', async () => {
+    const fixture = fileURLToPath(new URL('../../test/fixtures/report-priority.cjs', import.meta.url));
+    const child = spawnLowPriority({
+      command: process.execPath,
+      args: [fixture],
+      options: { stdio: ['ignore', 'pipe', 'pipe'] },
+    });
+    const output = await collectOutput(child);
+    expect(output).toEqual({
+      code: 0,
+      stderr: '',
+      stdout: String(Math.min(19, getPriority(0) + CHILD_PROCESS_NICE)),
+    });
+  });
+
+  it('preserves failed process output and exit status', async () => {
+    const fixture = fileURLToPath(new URL('../../test/fixtures/report-priority.cjs', import.meta.url));
+    try {
+      await runLowPriority({ command: process.execPath, args: [fixture, 'error'] });
+      throw new Error('expected subprocess failure');
+    } catch (error) {
+      expect(error).toMatchObject({
+        exitCode: 7,
+        stderr: Buffer.from('expected failure'),
+        stdout: Buffer.from('partial output'),
+      });
+    }
+  });
+
+  it('terminates processes that exceed their timeout', async () => {
+    const fixture = fileURLToPath(new URL('../../test/fixtures/report-priority.cjs', import.meta.url));
+    await expect(runLowPriority({
+      command: process.execPath,
+      args: [fixture, 'wait'],
+      timeoutMs: 20,
+    })).rejects.toMatchObject({ timedOut: true });
+  });
+}
+
+function collectOutput(child: ChildProcess): Promise<{ code: number | null; stdout: string; stderr: string }> {
+  return new Promise((resolve, reject) => {
+    const stdout: Buffer[] = [];
+    const stderr: Buffer[] = [];
+    child.stdout?.on('data', (chunk: Buffer) => stdout.push(chunk));
+    child.stderr?.on('data', (chunk: Buffer) => stderr.push(chunk));
+    child.on('error', reject);
+    child.on('close', (code) => resolve({
+      code,
+      stdout: Buffer.concat(stdout).toString(),
+      stderr: Buffer.concat(stderr).toString(),
+    }));
+  });
+}
diff --git a/cli/src/utils/subprocess-priority.ts b/cli/src/utils/subprocess-priority.ts
new file mode 100644
index 0000000..e4aaa58
--- /dev/null
+++ b/cli/src/utils/subprocess-priority.ts
@@ -0,0 +1,163 @@
+import { spawn, type ChildProcess, type ChildProcessWithoutNullStreams, type SpawnOptions } from 'node:child_process';
+import { setPriority as nodeSetPriority } from 'node:os';
+
+export const CHILD_PROCESS_NICE = 10;
+
+export interface LowPriorityCommandOptions {
+  command: string;
+  args?: string[];
+  platform?: NodeJS.Platform;
+}
+
+export interface LowPriorityCommand {
+  command: string;
+  args: string[];
+}
+
+export interface SpawnLowPriorityOptions extends LowPriorityCommandOptions {
+  options?: SpawnOptions;
+}
+
+export interface RunLowPriorityOptions extends SpawnLowPriorityOptions {
+  timeoutMs?: number;
+  maxBufferBytes?: number;
+}
+
+export interface LowPriorityProcessResult {
+  stdout: Buffer;
+  stderr: Buffer;
+}
+
+interface LowPriorityProcessErrorOptions extends LowPriorityProcessResult {
+  exitCode: number | null;
+  signal: NodeJS.Signals | null;
+  timedOut: boolean;
+  cause?: unknown;
+}
+
+export class LowPriorityProcessError extends Error {
+  readonly stdout: Buffer;
+  readonly stderr: Buffer;
+  readonly exitCode: number | null;
+  readonly signal: NodeJS.Signals | null;
+  readonly timedOut: boolean;
+
+  constructor(message: string, options: LowPriorityProcessErrorOptions) {
+    super(message, { cause: options.cause });
+    this.name = 'LowPriorityProcessError';
+    this.stdout = options.stdout;
+    this.stderr = options.stderr;
+    this.exitCode = options.exitCode;
+    this.signal = options.signal;
+    this.timedOut = options.timedOut;
+  }
+}
+
+/** Escape hatch: FACET_LOW_PRIORITY=0 disables all child deprioritization. */
+export function lowPriorityDisabled(): boolean {
+  return process.env['FACET_LOW_PRIORITY'] === '0';
+}
+
+export function buildLowPriorityCommand(options: LowPriorityCommandOptions): LowPriorityCommand {
+  const args = options.args ?? [];
+  if (lowPriorityDisabled()) return { command: options.command, args: [...args] };
+  switch (options.platform ?? process.platform) {
+    case 'darwin':
+      // nice only — taskpolicy -b puts children in the background QoS band
+      // (efficiency cores + throttled I/O), which stretched a measured 70s SSR
+      // build past 7 minutes under load. CPU-derating is the intent; keep it.
+      return {
+        command: '/usr/bin/nice',
+        args: ['-n', String(CHILD_PROCESS_NICE), options.command, ...args],
+      };
+    case 'linux':
+      return {
+        command: '/usr/bin/nice',
+        args: ['-n', String(CHILD_PROCESS_NICE), options.command, ...args],
+      };
+    case 'win32':
+      return { command: options.command, args: [...args] };
+    default:
+      throw new Error(`Low-priority subprocesses are unsupported on ${options.platform ?? process.platform}`);
+  }
+}
+
+export function applySpawnedProcessPriority(options: {
+  pid: number;
+  platform?: NodeJS.Platform;
+  kill?: () => unknown;
+  setPriority?: (pid: number, priority: number) => void;
+}): void {
+  if (lowPriorityDisabled()) return;
+  if ((options.platform ?? process.platform) !== 'win32') return;
+  try {
+    (options.setPriority ?? nodeSetPriority)(options.pid, CHILD_PROCESS_NICE);
+  } catch (error) {
+    options.kill?.();
+    throw new Error(
+      `Failed to lower subprocess ${options.pid} priority: ${error instanceof Error ? error.message : String(error)}`,
+      { cause: error },
+    );
+  }
+}
+
+export function spawnLowPriority<T extends ChildProcess = ChildProcess>(options: SpawnLowPriorityOptions): T {
+  const command = buildLowPriorityCommand(options);
+  const spawnOptions: SpawnOptions = options.options ?? {};
+  const child: ChildProcess = spawn(command.command, command.args, spawnOptions);
+  if (child.pid !== undefined) {
+    applySpawnedProcessPriority({ pid: child.pid, kill: () => child.kill() });
+  }
+  return child as T;
+}
+
+export function runLowPriority(options: RunLowPriorityOptions): Promise<LowPriorityProcessResult> {
+  return new Promise((resolve, reject) => {
+    const child = spawnLowPriority<ChildProcessWithoutNullStreams>({
+      ...options,
+      options: { ...options.options, stdio: ['ignore', 'pipe', 'pipe'] },
+    });
+    const stdout: Buffer[] = [];
+    const stderr: Buffer[] = [];
+    const maxBufferBytes = options.maxBufferBytes ?? 50 * 1024 * 1024;
+    let stdoutBytes = 0;
+    let stderrBytes = 0;
+    let timedOut = false;
+    let bufferExceeded = false;
+    let settled = false;
+
+    const capture = (chunks: Buffer[], chunk: Buffer, streamBytes: number): number => {
+      const nextBytes = streamBytes + chunk.length;
+      if (nextBytes > maxBufferBytes) {
+        bufferExceeded = true;
+        child.kill('SIGKILL');
+      } else {
+        chunks.push(chunk);
+      }
+      return nextBytes;
+    };
+    child.stdout.on('data', (chunk: Buffer) => { stdoutBytes = capture(stdout, chunk, stdoutBytes); });
+    child.stderr.on('data', (chunk: Buffer) => { stderrBytes = capture(stderr, chunk, stderrBytes); });
+
+    const timer = options.timeoutMs === undefined ? undefined : setTimeout(() => {
+      timedOut = true;
+      child.kill('SIGKILL');
+    }, options.timeoutMs);
+    const finish = (exitCode: number | null, signal: NodeJS.Signals | null, cause?: unknown): void => {
+      if (settled) return;
+      settled = true;
+      if (timer) clearTimeout(timer);
+      const output = { stdout: Buffer.concat(stdout), stderr: Buffer.concat(stderr) };
+      if (exitCode === 0 && !timedOut && !bufferExceeded && cause === undefined) {
+        resolve(output);
+        return;
+      }
+      const reason = timedOut ? 'timed out' : bufferExceeded ? 'exceeded its output limit' : `exited with code ${exitCode}`;
+      reject(new LowPriorityProcessError(`Low-priority subprocess ${options.command} ${reason}`, {
+        ...output, exitCode, signal, timedOut, cause,
+      }));
+    };
+    child.once('error', (error) => finish(null, null, error));
+    child.once('close', (exitCode, signal) => finish(exitCode, signal));
+  });
+}
diff --git a/cli/src/utils/tailwind-v4.test.ts b/cli/src/utils/tailwind-v4.test.ts
new file mode 100644
index 0000000..2f459b2
--- /dev/null
+++ b/cli/src/utils/tailwind-v4.test.ts
@@ -0,0 +1,62 @@
+import { createRequire } from 'node:module';
+import { mkdirSync, mkdtempSync, rmSync, symlinkSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { runTailwindCached } from './tailwind.js';
+
+const testRequire = createRequire(import.meta.url);
+
+function linkDependency(facetRoot: string, name: string, target: string): void {
+  const link = join(facetRoot, 'node_modules', ...name.split('/'));
+  mkdirSync(dirname(link), { recursive: true });
+  symlinkSync(target, link, 'junction');
+}
+
+describe('Tailwind v4 CSS post-processing', () => {
+  it('generates source and rendered-only utilities without Preflight', async () => {
+    const scratchRoot = resolve('.tmp');
+    mkdirSync(scratchRoot, { recursive: true });
+    const facetRoot = mkdtempSync(join(scratchRoot, 'tailwind-v4-test-'));
+    try {
+      const vitePluginEntry = testRequire.resolve('@tailwindcss/vite');
+      const vitePluginRequire = createRequire(vitePluginEntry);
+      linkDependency(facetRoot, 'vite', dirname(testRequire.resolve('vite/package.json')));
+      linkDependency(facetRoot, '@tailwindcss/vite', resolve(dirname(vitePluginEntry), '..'));
+      linkDependency(facetRoot, 'tailwindcss', dirname(vitePluginRequire.resolve('tailwindcss/package.json')));
+
+      writeFileSync(join(facetRoot, 'package.json'), JSON.stringify({ type: 'module' }));
+      writeFileSync(join(facetRoot, 'facet.css'), '');
+      mkdirSync(join(facetRoot, 'src/source'), { recursive: true });
+      writeFileSync(join(facetRoot, 'src/source/template.tsx'), '<div className="text-white" />');
+      mkdirSync(join(facetRoot, 'src/.tmp'), { recursive: true });
+      writeFileSync(join(facetRoot, 'src/.tmp/ignored.tsx'), '<div className="bg-red-500" />');
+      writeFileSync(join(facetRoot, 'post-process-v4.css'), [
+        "@import './facet.css';",
+        '@import "tailwindcss/theme.css" layer(theme);',
+        '@import "tailwindcss/utilities.css" layer(utilities) source(none);',
+        '@source "./src/source";',
+        '@source "./rendered-content.html";',
+      ].join('\n'));
+      writeFileSync(join(facetRoot, 'post-process-v4.entry.ts'), "import './post-process-v4.css';\n");
+
+      const sourceCSS = await runTailwindCached({
+        facetRoot,
+        html: '',
+        buildCacheKey: 'tailwind-v4-source',
+      });
+      const renderedCSS = await runTailwindCached({
+        facetRoot,
+        html: '<div class="bg-[#1e293b]"></div>',
+        buildCacheKey: 'tailwind-v4-rendered',
+      });
+
+      expect(sourceCSS).toContain('.text-white{color:var(--color-white)}');
+      expect(sourceCSS).not.toContain('background-color:#1e293b');
+      expect(sourceCSS).not.toContain('.bg-red-500');
+      expect(renderedCSS).toContain('background-color:#1e293b');
+      expect(renderedCSS).not.toContain('box-sizing:border-box');
+    } finally {
+      rmSync(facetRoot, { recursive: true, force: true });
+    }
+  });
+});
diff --git a/cli/src/utils/tailwind.test.ts b/cli/src/utils/tailwind.test.ts
index 1dad08b..b6a2ed9 100644
--- a/cli/src/utils/tailwind.test.ts
+++ b/cli/src/utils/tailwind.test.ts
@@ -1,14 +1,11 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { mkdtempSync, mkdirSync, writeFileSync, rmSync, chmodSync, statSync, utimesSync } from 'fs';
+import { describe, it, expect } from 'vitest';
+import { mkdtempSync, mkdirSync, writeFileSync, rmSync, statSync, utimesSync } from 'fs';
 import { tmpdir } from 'os';
 import { join } from 'path';
 import {
-  resolveTailwindBin,
-  tailwindBinExists,
-  runTailwind,
   renderedClassKey,
   runTailwindCached,
-  TailwindBinNotFoundError,
+  tailwindDirectivesPresent,
 } from './tailwind.js';
 
 describe('renderedClassKey', () => {
@@ -25,6 +22,57 @@ describe('renderedClassKey', () => {
   });
 });
 
+describe('tailwindDirectivesPresent', () => {
+  function facetRootWith(files: Record<string, string>): string {
+    const facetRoot = mkdtempSync(join(tmpdir(), 'facet-tw-directives-'));
+    for (const [name, content] of Object.entries(files)) {
+      writeFileSync(join(facetRoot, name), content);
+    }
+    return facetRoot;
+  }
+
+  it('is false for pre-expanded CSS with only relative and URL imports', () => {
+    const facetRoot = facetRootWith({
+      'post-process.css': "@import './facet.css';\n",
+      'facet.css': '@import url("https://fonts.example/css");\n.page { color: red; }\n',
+    });
+    try {
+      expect(tailwindDirectivesPresent(facetRoot)).toBe(false);
+    } finally {
+      rmSync(facetRoot, { recursive: true, force: true });
+    }
+  });
+
+  it('detects @tailwind directives through relative imports', () => {
+    const facetRoot = facetRootWith({
+      'post-process.css': "@import './facet.css';\n@import './custom.css';\n",
+      'facet.css': '.page { color: red; }\n',
+      'custom.css': '@tailwind utilities;\n',
+    });
+    try {
+      expect(tailwindDirectivesPresent(facetRoot)).toBe(true);
+    } finally {
+      rmSync(facetRoot, { recursive: true, force: true });
+    }
+  });
+
+  it('assumes directives when imports cannot be inspected', () => {
+    const packageImport = facetRootWith({
+      'post-process.css': "@import 'some-package/styles.css';\n",
+    });
+    const missingFile = facetRootWith({
+      'post-process.css': "@import './missing.css';\n",
+    });
+    try {
+      expect(tailwindDirectivesPresent(packageImport)).toBe(true);
+      expect(tailwindDirectivesPresent(missingFile)).toBe(true);
+    } finally {
+      rmSync(packageImport, { recursive: true, force: true });
+      rmSync(missingFile, { recursive: true, force: true });
+    }
+  });
+});
+
 describe('runTailwindCached', () => {
   it('refreshes a cache hit timestamp', async () => {
     const facetRoot = mkdtempSync(join(tmpdir(), 'facet-tw-cache-test-'));
@@ -39,7 +87,6 @@ describe('runTailwindCached', () => {
 
       await expect(runTailwindCached({
         facetRoot,
-        stylesInput: join(facetRoot, 'styles.css'),
         html,
         buildCacheKey: 'build',
       })).resolves.toContain('font-weight');
@@ -49,84 +96,3 @@ describe('runTailwindCached', () => {
     }
   });
 });
-
-describe('resolveTailwindBin', () => {
-  const originalPlatform = process.platform;
-
-  afterEach(() => {
-    Object.defineProperty(process, 'platform', { value: originalPlatform });
-  });
-
-  it('returns node_modules/.bin/tailwindcss on POSIX', () => {
-    Object.defineProperty(process, 'platform', { value: 'linux' });
-    expect(resolveTailwindBin('/tmp/.facet')).toBe(
-      join('/tmp/.facet', 'node_modules', '.bin', 'tailwindcss'),
-    );
-  });
-
-  it('returns node_modules/.bin/tailwindcss.cmd on Windows', () => {
-    Object.defineProperty(process, 'platform', { value: 'win32' });
-    expect(resolveTailwindBin('C:\\proj\\.facet')).toBe(
-      join('C:\\proj\\.facet', 'node_modules', '.bin', 'tailwindcss.cmd'),
-    );
-  });
-});
-
-describe('tailwindBinExists', () => {
-  let facetRoot: string;
-
-  beforeEach(() => {
-    facetRoot = mkdtempSync(join(tmpdir(), 'facet-tw-test-'));
-  });
-
-  afterEach(() => {
-    rmSync(facetRoot, { recursive: true, force: true });
-  });
-
-  it('returns false when .bin/tailwindcss is missing', () => {
-    expect(tailwindBinExists(facetRoot)).toBe(false);
-  });
-
-  it('returns true when .bin/tailwindcss exists', () => {
-    const binDir = join(facetRoot, 'node_modules', '.bin');
-    mkdirSync(binDir, { recursive: true });
-    writeFileSync(join(binDir, 'tailwindcss'), '#!/bin/sh\n');
-    chmodSync(join(binDir, 'tailwindcss'), 0o755);
-    expect(tailwindBinExists(facetRoot)).toBe(true);
-  });
-});
-
-describe('runTailwind', () => {
-  let facetRoot: string;
-
-  beforeEach(() => {
-    facetRoot = mkdtempSync(join(tmpdir(), 'facet-tw-test-'));
-  });
-
-  afterEach(() => {
-    rmSync(facetRoot, { recursive: true, force: true });
-  });
-
-  it('throws TailwindBinNotFoundError when binary is missing', async () => {
-    await expect(
-      runTailwind({
-        facetRoot,
-        stylesInput: '/tmp/in.css',
-        contentPath: '/tmp/in.html',
-        outputCssPath: '/tmp/out.css',
-      }),
-    ).rejects.toBeInstanceOf(TailwindBinNotFoundError);
-  });
-
-  it('error message includes the expected binary path', async () => {
-    const expected = resolveTailwindBin(facetRoot);
-    await expect(
-      runTailwind({
-        facetRoot,
-        stylesInput: '/tmp/in.css',
-        contentPath: '/tmp/in.html',
-        outputCssPath: '/tmp/out.css',
-      }),
-    ).rejects.toThrow(expected);
-  });
-});
diff --git a/cli/src/utils/tailwind.ts b/cli/src/utils/tailwind.ts
index 767190a..fe9781b 100644
--- a/cli/src/utils/tailwind.ts
+++ b/cli/src/utils/tailwind.ts
@@ -1,80 +1,42 @@
-/**
- * Tailwind CSS invocation.
- *
- * `tailwindcss` is installed into `.facet/node_modules/.bin/` by the facet-directory
- * builder. We invoke that binary directly instead of going through `pnpm exec`, so a
- * render does not need pnpm on PATH at runtime — only at install time.
- */
-
-import { $ } from './shell.js';
 import { createHash, randomUUID } from 'node:crypto';
-import { existsSync } from 'fs';
+import { readFileSync } from 'node:fs';
 import { mkdir, readFile, readdir, rename, rm, stat, utimes, writeFile } from 'node:fs/promises';
-import { join } from 'path';
-
-export class TailwindBinNotFoundError extends Error {
-  constructor(public readonly expectedPath: string) {
-    super(
-      `tailwindcss binary not found at ${expectedPath}. ` +
-      `Run a render to populate \`.facet/node_modules\`, or \`cd .facet && pnpm install\`.`
-    );
-    this.name = 'TailwindBinNotFoundError';
-  }
-}
-
-/**
- * Resolve the tailwindcss binary path inside a `.facet/` directory.
- * Does not check existence — call `tailwindBinExists()` for that.
- */
-export function resolveTailwindBin(facetRoot: string): string {
-  const name = process.platform === 'win32' ? 'tailwindcss.cmd' : 'tailwindcss';
-  return join(facetRoot, 'node_modules', '.bin', name);
-}
-
-export function tailwindBinExists(facetRoot: string): boolean {
-  return existsSync(resolveTailwindBin(facetRoot));
-}
-
-export interface RunTailwindOptions {
-  facetRoot: string;
-  stylesInput: string;
-  contentPath: string;
-  outputCssPath: string;
-  verbose?: boolean;
-}
-
-/**
- * Invoke the locally-installed tailwindcss CLI.
- *
- * Throws `TailwindBinNotFoundError` if the binary is missing; throws other errors
- * verbatim from the subprocess. Callers should catch and decide whether to fall
- * back (e.g. to Vite-generated CSS) or surface the failure.
- */
-export async function runTailwind(opts: RunTailwindOptions): Promise<void> {
-  const bin = resolveTailwindBin(opts.facetRoot);
-  if (!existsSync(bin)) {
-    throw new TailwindBinNotFoundError(bin);
-  }
-  const cmd = $`${bin} -i ${opts.stylesInput} --content ${opts.contentPath} -o ${opts.outputCssPath}`;
-  if (opts.verbose) {
-    const result = await cmd;
-    if (result.stdout.length) process.stdout.write(result.stdout);
-    if (result.stderr.length) process.stderr.write(result.stderr);
-  } else {
-    await cmd.quiet();
-  }
-}
+import { createRequire } from 'node:module';
+import { dirname, join, resolve } from 'node:path';
+import { runPersistentCssBuild } from '../bundler/ssr-pool.js';
+import type { Logger } from './logger.js';
+import { selfExecBase } from './self-exec.js';
+import { spawnLowPriority } from './subprocess-priority.js';
 
 export interface CachedTailwindOptions {
   facetRoot: string;
-  stylesInput: string;
   html: string;
   buildCacheKey: string;
-  verbose?: boolean;
+  logger?: Logger;
+  /**
+   * CSS the SSR bundle already emitted. With Tailwind v3 and no `@tailwind`
+   * directive anywhere in the post-process inputs (facet.css ships
+   * pre-expanded), the post-process pass is content-independent
+   * autoprefix-over-prebuilt CSS, so this is returned directly instead of
+   * running a second Vite build that recomputes the same stylesheet.
+   */
+  ssrCss?: string;
+  /** Route cache misses through the persistent SSR daemon's warm Vite. */
+  persistentLoader?: boolean;
 }
 
 const tailwindLocks = new Map<string, Promise<string>>();
 
+export function resolveTailwindMajor(facetRoot: string): number {
+  const facetRequire = createRequire(join(facetRoot, 'package.json'));
+  const version = JSON.parse(readFileSync(facetRequire.resolve('tailwindcss/package.json'), 'utf-8')).version as string;
+  const major = Number(version.split('.')[0]);
+  if (major !== 3 && major !== 4) {
+    throw new Error(`Unsupported Tailwind CSS version ${version}; expected major version 3 or 4`);
+  }
+  return major;
+}
+
 async function pruneTailwindCache(cacheDir: string): Promise<void> {
   const maxEntries = Math.max(1, parseInt(process.env['FACET_TAILWIND_CACHE_ENTRIES'] ?? '50', 10));
   let entries: Array<{ path: string; mtimeMs: number }>;
@@ -94,8 +56,7 @@ async function pruneTailwindCache(cacheDir: string): Promise<void> {
   ));
 }
 
-/** Extract the data-dependent class set without including unrelated text. */
-export function renderedClassKey(html: string): { key: string; content: string } {
+export function renderedClassKey(html: string): { key: string; content: string; classCount: number } {
   const classes = new Set<string>();
   const pattern = /\bclass=(?:"([^"]*)"|'([^']*)')/gi;
   for (const match of html.matchAll(pattern)) {
@@ -107,11 +68,80 @@ export function renderedClassKey(html: string): { key: string; content: string }
   return {
     key: createHash('sha256').update(sorted.join('\0')).digest('hex').slice(0, 16),
     content: `<div class="${sorted.join(' ')}"></div>`,
+    classCount: sorted.length,
   };
 }
 
-/** Generate Tailwind once per template and rendered class set. */
+async function runViteCssBuild(
+  facetRoot: string,
+  outputFile: string,
+  contentFile: string,
+): Promise<void> {
+  const [command, ...baseArgs] = selfExecBase();
+  const args = [...baseArgs, `--facet-root=${facetRoot}`, `--output-file=${outputFile}`, `--content-file=${contentFile}`];
+  await new Promise<void>((resolve, reject) => {
+    const child = spawnLowPriority({
+      command,
+      args,
+      options: {
+        cwd: facetRoot,
+        env: { ...process.env, FACET_LOADER: 'css', FACET_POST_PROCESS: '1' },
+        stdio: ['ignore', 'ignore', 'pipe'],
+      },
+    });
+    // Tee live so a slow build is never silent; keep capturing for the error.
+    const stderr: Buffer[] = [];
+    child.stderr?.on('data', (chunk: Buffer) => {
+      stderr.push(chunk);
+      process.stderr.write(chunk);
+    });
+    child.on('error', reject);
+    child.on('close', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`Vite CSS post-processing failed with exit code ${code}:\n${Buffer.concat(stderr).toString()}`));
+    });
+  });
+}
+
+/**
+ * True when a v3 post-process build could depend on the rendered class set:
+ * some CSS input carries a `@tailwind` directive (utilities generation scans
+ * content), or an import cannot be statically inspected. Relative imports are
+ * followed; URL imports never carry directives; anything else is assumed live.
+ */
+export function tailwindDirectivesPresent(facetRoot: string): boolean {
+  const stack = [join(facetRoot, 'post-process.css')];
+  const seen = new Set<string>();
+  try {
+    while (stack.length > 0) {
+      const file = stack.pop()!;
+      if (seen.has(file)) continue;
+      seen.add(file);
+      const css = readFileSync(file, 'utf-8');
+      if (/@tailwind\b/.test(css)) return true;
+      for (const match of css.matchAll(/@import\s+(?:url\()?['"]([^'"]+)['"]/g)) {
+        const specifier = match[1];
+        if (/^(https?:)?\/\//.test(specifier)) continue;
+        if (!specifier.startsWith('.')) return true;
+        stack.push(resolve(dirname(file), specifier));
+      }
+    }
+    return false;
+  } catch {
+    return true;
+  }
+}
+
 export async function runTailwindCached(opts: CachedTailwindOptions): Promise<string> {
+  if (
+    opts.ssrCss != null
+    && resolveTailwindMajor(opts.facetRoot) === 3
+    && !tailwindDirectivesPresent(opts.facetRoot)
+  ) {
+    opts.logger?.debug('Tailwind CSS reused from SSR build (Tailwind v3, no @tailwind directives in post-process inputs)');
+    return opts.ssrCss;
+  }
+
   const classSet = renderedClassKey(opts.html);
   const cacheDir = join(opts.facetRoot, 'tailwind-cache');
   const cachePath = join(cacheDir, `${opts.buildCacheKey}-${classSet.key}.css`);
@@ -119,40 +149,48 @@ export async function runTailwindCached(opts: CachedTailwindOptions): Promise<st
   if (existing) return existing;
 
   const operation = (async () => {
-    let cachedCss: string | undefined;
     try {
-      cachedCss = await readFile(cachePath, 'utf-8');
-    } catch { /* cache miss */ }
-    if (cachedCss !== undefined) {
+      const css = await readFile(cachePath, 'utf-8');
       const now = new Date();
-      try { await utimes(cachePath, now, now); } catch { /* cache may be concurrently pruned */ }
-      return cachedCss;
-    }
+      try { await utimes(cachePath, now, now); } catch { /* cache may be pruned concurrently */ }
+      opts.logger?.debug(`Tailwind CSS cache hit (${classSet.classCount} classes, key ${opts.buildCacheKey}-${classSet.key})`);
+      return css;
+    } catch { /* cache miss */ }
 
     await mkdir(cacheDir, { recursive: true });
-    const nonce = `${process.pid}-${randomUUID()}`;
-    const contentPath = join(cacheDir, `${nonce}.html`);
-    const outputPath = join(cacheDir, `${nonce}.css`);
+    const outputPath = join(cacheDir, `${process.pid}-${randomUUID()}.css`);
+    const buildStartedAt = performance.now();
     try {
-      await writeFile(contentPath, classSet.content, 'utf-8');
-      await runTailwind({
-        facetRoot: opts.facetRoot,
-        stylesInput: opts.stylesInput,
-        contentPath,
-        outputCssPath: outputPath,
-        verbose: opts.verbose,
-      });
-      const css = await readFile(outputPath, 'utf-8');
+      let css: string | undefined;
+      let via = 'daemon';
+      if (opts.persistentLoader && opts.logger) {
+        try {
+          css = await runPersistentCssBuild({ facetRoot: opts.facetRoot, content: classSet.content }, opts.logger);
+          await writeFile(outputPath, css, 'utf-8');
+        } catch (error) {
+          opts.logger.warn(`Persistent CSS build failed; falling back to one-shot loader: ${error instanceof Error ? error.message : String(error)}`);
+        }
+      }
+      if (css == null) {
+        via = 'subprocess';
+        const contentPath = join(opts.facetRoot, `rendered-content-${randomUUID()}.html`);
+        await writeFile(contentPath, classSet.content, 'utf-8');
+        try {
+          await runViteCssBuild(opts.facetRoot, outputPath, contentPath);
+          css = await readFile(outputPath, 'utf-8');
+        } finally {
+          await rm(contentPath, { force: true });
+        }
+      }
+      opts.logger?.info(`Tailwind CSS built in ${(performance.now() - buildStartedAt).toFixed(0)}ms (cache miss, ${via}, ${classSet.classCount} classes, key ${opts.buildCacheKey}-${classSet.key})`);
       try {
         await rename(outputPath, cachePath);
       } catch {
-        // A separate process may have populated the same content-addressed key.
         await rm(outputPath, { force: true });
       }
       await pruneTailwindCache(cacheDir);
       return css;
     } finally {
-      await rm(contentPath, { force: true });
       await rm(outputPath, { force: true });
     }
   })();
diff --git a/cli/src/utils/template-source.ts b/cli/src/utils/template-source.ts
new file mode 100644
index 0000000..190c147
--- /dev/null
+++ b/cli/src/utils/template-source.ts
@@ -0,0 +1,56 @@
+import { existsSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+
+import { parseRemoteRef, resolveRemoteRef } from './remote-resolver.js';
+
+export interface TemplateSourceLocation {
+  consumerRoot?: string;
+  templatePath: string;
+  resolvedSha?: string;
+}
+
+function findGitRoot(from: string): string | undefined {
+  let dir = from;
+  while (true) {
+    if (existsSync(join(dir, '.git'))) return dir;
+    const parent = dirname(dir);
+    if (parent === dir) return undefined;
+    dir = parent;
+  }
+}
+
+function findProjectRoot(templatePath: string): string | undefined {
+  const absoluteTemplate = resolve(templatePath);
+  const gitRoot = findGitRoot(dirname(absoluteTemplate));
+  const stopAt = gitRoot ?? process.cwd();
+  let dir = dirname(absoluteTemplate);
+  while (dir.length >= stopAt.length) {
+    if (existsSync(join(dir, 'package.json'))) return dir;
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return undefined;
+}
+
+export async function resolveTemplateSource(
+  template: string,
+  options: { refresh?: boolean; verbose?: boolean } = {},
+): Promise<TemplateSourceLocation> {
+  const remoteRef = parseRemoteRef(template);
+  if (remoteRef) {
+    const resolved = await resolveRemoteRef(remoteRef, options);
+    return {
+      consumerRoot: resolved.consumerRoot,
+      templatePath: resolved.templateFile,
+      resolvedSha: resolved.resolvedSha,
+    };
+  }
+
+  const projectRoot = findProjectRoot(template);
+  if (!projectRoot) return { templatePath: template };
+  return {
+    consumerRoot: projectRoot,
+    templatePath: relative(projectRoot, resolve(template)),
+  };
+}
diff --git a/cli/src/version.test.ts b/cli/src/version.test.ts
new file mode 100644
index 0000000..a0eeebe
--- /dev/null
+++ b/cli/src/version.test.ts
@@ -0,0 +1,51 @@
+import {
+  mkdirSync,
+  mkdtempSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync,
+} from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { formatVersion } from './version.js';
+
+const repoRoot = resolve(import.meta.dirname, '../..');
+const version = '1.2.3';
+const buildDate = '2026-07-22 18:00';
+const gitCommit = 'abcdef0-dirty';
+
+describe('formatVersion', () => {
+  it('keeps regular installed versions unchanged', () => {
+    expect(formatVersion({ version, buildDate, gitCommit })).toBe(
+      `${version} (${buildDate} ${gitCommit})`,
+    );
+  });
+
+  it('reports the linked Facet checkout', () => {
+    const tempRoot = resolve(repoRoot, '.tmp');
+    mkdirSync(tempRoot, { recursive: true });
+    const testRoot = mkdtempSync(join(tempRoot, 'version-link-'));
+    const binPath = join(testRoot, 'bin', 'facet');
+    const globalScope = join(testRoot, 'lib', 'node_modules', '@flanksource');
+    const globalCli = join(globalScope, 'facet-cli');
+    const globalLibrary = join(globalScope, 'facet');
+    const cliTarget = join(testRoot, 'checkout', '.tmp', 'facet-cli');
+    const libraryTarget = join(testRoot, 'checkout');
+
+    try {
+      mkdirSync(dirname(binPath), { recursive: true });
+      mkdirSync(globalScope, { recursive: true });
+      mkdirSync(cliTarget, { recursive: true });
+      writeFileSync(join(cliTarget, 'facet.cjs'), '');
+      symlinkSync(relative(globalScope, cliTarget), globalCli, 'dir');
+      symlinkSync(relative(globalScope, libraryTarget), globalLibrary, 'dir');
+      symlinkSync(relative(dirname(binPath), join(globalCli, 'facet.cjs')), binPath);
+
+      expect(formatVersion({ version, buildDate, gitCommit, executablePath: binPath })).toBe(
+        `${version} (${buildDate} ${gitCommit}) [symlinked to ${libraryTarget}]`,
+      );
+    } finally {
+      rmSync(testRoot, { recursive: true, force: true });
+    }
+  });
+});
diff --git a/cli/src/version.ts b/cli/src/version.ts
new file mode 100644
index 0000000..2146739
--- /dev/null
+++ b/cli/src/version.ts
@@ -0,0 +1,42 @@
+import { lstatSync, readlinkSync, realpathSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+
+export interface VersionDetails {
+  version: string;
+  buildDate: string;
+  gitCommit: string;
+  executablePath?: string;
+}
+
+function lstatIfExists(path: string): ReturnType<typeof lstatSync> | undefined {
+  try {
+    return lstatSync(path);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') return undefined;
+    throw error;
+  }
+}
+
+export function resolveSymlinkedFacetPath(executablePath: string): string | undefined {
+  if (!lstatIfExists(executablePath)?.isSymbolicLink()) return undefined;
+
+  const executableTarget = resolve(dirname(executablePath), readlinkSync(executablePath));
+  const cliPackagePath = dirname(executableTarget);
+  if (!lstatIfExists(cliPackagePath)?.isSymbolicLink()) return undefined;
+
+  const libraryPackagePath = resolve(cliPackagePath, '../facet');
+  if (lstatIfExists(libraryPackagePath)?.isSymbolicLink()) {
+    return realpathSync(libraryPackagePath);
+  }
+  return realpathSync(cliPackagePath);
+}
+
+export function formatVersion(details: VersionDetails): string {
+  const base = details.buildDate === 'dev'
+    ? `${details.version} (dev)`
+    : `${details.version} (${details.buildDate}${details.gitCommit ? ` ${details.gitCommit}` : ''})`;
+  const linkedPath = details.executablePath
+    ? resolveSymlinkedFacetPath(details.executablePath)
+    : undefined;
+  return linkedPath ? `${base} [symlinked to ${linkedPath}]` : base;
+}
diff --git a/cli/test/fixtures/live-template.tsx b/cli/test/fixtures/live-template.tsx
new file mode 100644
index 0000000..669f60e
--- /dev/null
+++ b/cli/test/fixtures/live-template.tsx
@@ -0,0 +1,5 @@
+
+// @live
+export default function LiveTemplate() {
+  return null;
+}
diff --git a/cli/test/fixtures/report-priority.cjs b/cli/test/fixtures/report-priority.cjs
new file mode 100644
index 0000000..7be844a
--- /dev/null
+++ b/cli/test/fixtures/report-priority.cjs
@@ -0,0 +1,9 @@
+if (process.argv[2] === 'error') {
+  process.stdout.write('partial output');
+  process.stderr.write('expected failure');
+  process.exitCode = 7;
+} else if (process.argv[2] === 'wait') {
+  setTimeout(() => undefined, 1_000);
+} else {
+  process.stdout.write(String(require('node:os').getPriority(0)));
+}
diff --git a/cli/test/fixtures/standard-template.tsx b/cli/test/fixtures/standard-template.tsx
new file mode 100644
index 0000000..2527536
--- /dev/null
+++ b/cli/test/fixtures/standard-template.tsx
@@ -0,0 +1,5 @@
+export default function StandardTemplate() {
+  return null;
+}
+
+// @live is only a directive when it is the first non-empty line.
diff --git a/cli/test/markdown-styles.test.ts b/cli/test/markdown-styles.test.ts
new file mode 100644
index 0000000..43b3825
--- /dev/null
+++ b/cli/test/markdown-styles.test.ts
@@ -0,0 +1,14 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, test } from 'vitest';
+
+describe('Markdown styles', () => {
+  test('emits decimal markers and indentation for ordered lists', () => {
+    const css = readFileSync(fileURLToPath(new URL('../../dist/styles.css', import.meta.url)), 'utf8');
+    const orderedListRule = [...css.matchAll(/(?:^|})\s*ol\s*\{([^}]*)\}/g)].at(-1)?.[1];
+
+    expect(orderedListRule).toMatch(
+      /margin:\s*3mm 0 4mm 8mm;[\s\S]*padding:\s*0;[\s\S]*list-style-type:\s*decimal/,
+    );
+  });
+});
diff --git a/cli/test/remote-rendering.test.ts b/cli/test/remote-rendering.test.ts
new file mode 100644
index 0000000..363d890
--- /dev/null
+++ b/cli/test/remote-rendering.test.ts
@@ -0,0 +1,101 @@
+import { execFile } from 'node:child_process';
+import { mkdir, mkdtemp, readFile, rm, writeFile } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import { promisify } from 'node:util';
+
+import { PDFDocument } from 'pdf-lib';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+
+import { createServer, type ServerHandle } from '../src/server/preview.js';
+
+const execFileAsync = promisify(execFile);
+const cliRoot = resolve(import.meta.dirname, '..');
+const repositoryRoot = resolve(cliRoot, '..');
+const scratchRoot = resolve(cliRoot, '.tmp');
+
+describe('remote CLI rendering', () => {
+  let server: ServerHandle;
+  let workspace: string;
+  let template: string;
+  let data: string;
+  let outputDirectory: string;
+
+  beforeAll(async () => {
+    process.env['FACET_PACKAGE_PATH'] = repositoryRoot;
+    process.env['FACET_LOW_PRIORITY'] = '0';
+    await mkdir(scratchRoot, { recursive: true });
+    workspace = await mkdtemp(join(scratchRoot, 'remote-rendering-'));
+    const project = join(workspace, 'project');
+    outputDirectory = join(workspace, 'output');
+    template = join(project, 'RemoteReport.tsx');
+    data = join(project, 'data.json');
+
+    await mkdir(project, { recursive: true });
+    await writeFile(join(project, 'package.json'), JSON.stringify({
+      name: 'remote-rendering-fixture',
+      private: true,
+    }));
+    await writeFile(template, `
+import React from 'react';
+
+export default function RemoteReport({ data }: { data: { title: string } }) {
+  return <html><body><h1>{data.title}</h1></body></html>;
+}
+`);
+    await writeFile(data, JSON.stringify({ title: 'Rendered by remote Facet' }));
+
+    server = await createServer({
+      port: 0,
+      templatesDir: join(cliRoot, 'examples'),
+      workers: 1,
+      renderTimeout: 180000,
+      maxUploadSize: 52428800,
+      cacheMaxSize: 104857600,
+      cacheDir: join(workspace, 'cache'),
+      verbose: false,
+    });
+  }, 30000);
+
+  afterAll(async () => {
+    await server?.stop();
+    await rm(workspace, { recursive: true, force: true });
+  }, 15000);
+
+  it('renders HTML through the server selected by FACET_URL', async () => {
+    const output = join(outputDirectory, 'remote.html');
+
+    await execFileAsync(process.execPath, [
+      '--import', 'tsx',
+      'src/cli.ts',
+      'html', template,
+      '--data', data,
+      '--output', output,
+    ], {
+      cwd: cliRoot,
+      env: { ...process.env, FACET_URL: server.url },
+      timeout: 180000,
+    });
+
+    await expect(readFile(output, 'utf-8')).resolves.toContain('Rendered by remote Facet');
+  }, 180000);
+
+  it('renders PDF through --facet-url when FACET_URL points elsewhere', async () => {
+    const output = join(outputDirectory, 'remote.pdf');
+
+    await execFileAsync(process.execPath, [
+      '--import', 'tsx',
+      'src/cli.ts',
+      '--facet-url', server.url,
+      'pdf', template,
+      '--data', data,
+      '--output', output,
+    ], {
+      cwd: cliRoot,
+      env: { ...process.env, FACET_URL: 'http://127.0.0.1:1' },
+      timeout: 180000,
+    });
+
+    const pdf = await PDFDocument.load(await readFile(output));
+    expect(pdf.getPageCount()).toBeGreaterThanOrEqual(1);
+  }, 180000);
+});
diff --git a/cli/test/render-api.test.ts b/cli/test/render-api.test.ts
index 62d2c06..5529845 100644
--- a/cli/test/render-api.test.ts
+++ b/cli/test/render-api.test.ts
@@ -85,6 +85,8 @@ describe('Render API', () => {
     }
     expect(res.status).toBe(200);
     expect(res.headers.get('content-type')).toContain('text/html');
+    expect(res.headers.get('server-timing')).toMatch(/dependency-install;dur=[\d.]+;desc="Dependency install"/);
+    expect(res.headers.get('server-timing')).toMatch(/vite;dur=[\d.]+;desc="Vite"/);
     const html = await res.text();
     expect(html.length).toBeGreaterThan(100);
     expect(html).toContain('Test Report');
@@ -107,6 +109,7 @@ describe('Render API', () => {
       }),
     });
     expect(res.status).toBe(200);
+    expect(res.headers.get('server-timing')).toMatch(/pdf-generation;dur=[\d.]+;desc="PDF generation"/);
     const json = await res.json() as { url: string };
     expect(json.url).toMatch(/^\/results\//);
 
@@ -252,6 +255,7 @@ export default function InlineTemplate({ data }: { data: any }) {
     expect(html).toContain('function applyUrlToolbar(');
     expect(html).toContain('new URLSearchParams(location.search)');
     expect(html).toContain('initUrlRouting()');
+    expect(html).toContain('showTimings(payload.timings)');
   });
 
   test('POST /render with inline code returns valid HTML', async () => {
@@ -278,10 +282,25 @@ export default function Template({ data }: { data: any }) {
     expect(html).toContain('Hello Inline');
   }, 120000);
 
-  test('POST /render with inline markdown (ext: md) returns valid HTML', async () => {
+  test('POST /render with inline markdown (ext: md) renders built-in extensions', async () => {
     const code = `# Hello Markdown
 
-Rendered from an inline **.md** file, auto-wrapped in a printable page.`;
+Rendered from an inline **.md** file, auto-wrapped in a printable page.
+
+> [!NOTE]
+> Alert content
+
+<details open>
+<summary>Deployment details</summary>
+
+Detail content
+
+</details>
+
+\`\`\`mermaid
+flowchart LR
+  Source --> Report
+\`\`\``;
     const res = await fetch(`${server.url}/render`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -294,6 +313,10 @@ Rendered from an inline **.md** file, auto-wrapped in a printable page.`;
     expect(html).toContain('Hello Markdown');
     // The markdown wrapper applies prose styling.
     expect(html).toContain('prose');
+    expect(html).toContain('markdown-alert-note');
+    expect(html).toContain('<details open="">');
+    expect(html).toContain('<summary>Deployment details</summary>');
+    expect(html).toMatch(/<svg[^>]+aria-roledescription="flowchart-v2"/);
   }, 120000);
 
   test('POST /render with inline MDX (ext: mdx) interpolates data and renders components', async () => {
@@ -360,6 +383,8 @@ export default function Template({ data }: { data: any }) {
     const [first, second] = await Promise.all([request('HEADER_A'), request('HEADER_B')]);
     expect(first.status).toBe(200);
     expect(second.status).toBe(200);
+    expect(first.headers.get('server-timing')).toMatch(/header-generation;dur=[\d.]+;desc="Header generation"/);
+    expect(second.headers.get('server-timing')).toMatch(/header-generation;dur=[\d.]+;desc="Header generation"/);
     const [firstHtml, secondHtml] = await Promise.all([first.text(), second.text()]);
     expect(firstHtml).toContain('data-test-header="HEADER_A"');
     expect(firstHtml).not.toContain('data-test-header="HEADER_B"');
@@ -388,6 +413,8 @@ export default function Template({ data }: { data: any }) {
     // Should contain the final result event
     expect(text).toContain('event: result');
     expect(text).toContain('Stream Test');
+    expect(text).toMatch(/"timings":\[.*"name":"dependency-install"/);
+    expect(text).toMatch(/"timings":\[.*"name":"vite"/);
   }, 120000);
 
   test('POST /render with unknown template returns 404', async () => {
diff --git a/examples/kitchen-sink/MarkdownReport.md b/examples/kitchen-sink/MarkdownReport.md
index b169049..ec6e243 100644
--- a/examples/kitchen-sink/MarkdownReport.md
+++ b/examples/kitchen-sink/MarkdownReport.md
@@ -1,58 +1,275 @@
-# Infrastructure Health Report
+# Markdown Elements Report
 
-A weekly summary of platform health, configuration changes, and security posture.
+This report demonstrates every core Markdown element supported by Facet, the GitHub Flavored Markdown extensions provided by `remark-gfm`, GitHub-style alerts, raw HTML detail blocks, and Mermaid diagrams.
 
-## Platform Overview
+Paragraphs are separated by a blank line. This paragraph contains a\
+hard line break created with a trailing backslash.
 
-| Metric | Value | Status |
-|--------|-------|--------|
-| Uptime | 99.97% | Healthy |
-| Config Items | 1,247 | Tracked |
-| Health Checks | 48 | Active |
-| Active Alerts | 3 | Warning |
+## Headings
 
-## Recent Changes
+# Heading level 1
 
-The following configuration changes were applied this week:
+## Heading level 2
 
-1. **Scaled nginx deployment** from 2 to 4 replicas
-2. **Updated resource limits** on api-gateway
-3. **Rotated TLS certificates** for wildcard ingress
-4. **Upgraded Helm chart** mission-control 0.1.25 to 0.1.27
+### Heading level 3
 
-## Security Summary
+#### Heading level 4
 
-> **3 critical findings** require immediate attention. See the security dashboard for details.
+##### Heading level 5
 
-### Vulnerability Breakdown
+###### Heading level 6
 
-| Severity | Count | Trend |
-|----------|-------|-------|
-| Critical | 3 | -1 from last week |
-| High | 12 | -2 from last week |
-| Medium | 21 | +1 from last week |
-| Low | 11 | No change |
+Alternative heading level 1
+===========================
 
-## System Requirements
+Alternative heading level 2
+---------------------------
+
+## Inline Formatting
+
+Plain text can include *italic text*, **bold text**, ***bold italic text***, ~~strikethrough text~~, and `inline code`.
+
+Characters can be escaped with a backslash: \*not italic\*, \# not a heading, and \[not a link\]. HTML entities are decoded: &copy;, &amp;, &lt;, and &gt;.
+
+## Links and Images
+
+Visit the [Facet repository](https://github.com/flanksource/facet "Facet on GitHub") using an inline link.
+
+Reference links keep long URLs out of prose: read the [Facet documentation][facet-docs] or revisit the [repository][facet-repo]. A shortcut reference to [Facet docs] works too.
+
+Automatic links are supported for URLs such as https://github.com/flanksource/facet and email addresses such as facet@example.com. Angle-bracket links also work: <https://flanksource.com> and <facet@example.com>.
+
+
+![Facet PDF icon](https://raw.githubusercontent.com/flanksource/facet/refs/heads/main/assets/how-it-works.svg)
+
+[facet-docs]: https://github.com/flanksource/facet#readme "Facet documentation"
+[facet-repo]: https://github.com/flanksource/facet
+[Facet docs]: https://github.com/flanksource/facet#readme
+
+## Block Quotes
+
+> A block quote can contain **formatted text**, links, and other Markdown elements.
+>
+> - Quoted list item
+> - Another quoted item
+>
+> > Block quotes can be nested.
+
+## Lists
+
+### Unordered Lists
+
+- Platform services
+  - API gateway
+  - Background workers
+- Data services
+  1. PostgreSQL
+  2. Object storage
+- Monitoring
+
+### Ordered Lists
+
+1. Inspect the current state.
+2. Apply the configuration.
+   1. Validate the input.
+   2. Render the report.
+3. Verify the output.
+
+An ordered list can begin at a number other than one:
+
+4. Fourth item
+5. Fifth item
+
+### Task Lists
+
+- [x] Collect platform metrics
+- [x] Review configuration changes
+- [ ] Resolve critical findings
+  - [x] Assign owners
+  - [ ] Confirm remediation
+
+## Code
+
+Inline code preserves commands such as `facet pdf MarkdownReport.md`.
+
+Fenced code blocks may include a language for syntax highlighting:
+
+```yaml
+report:
+  title: Infrastructure Health
+  formats:
+    - html
+    - pdf
+```
+
+Fences can also contain Markdown syntax without interpreting it:
+
+~~~markdown
+## This remains source text
+
+- It is not rendered as a list.
+~~~
+
+Indented code blocks are supported too:
+
+    facet html MarkdownReport.md
+    facet pdf MarkdownReport.md
+
+## Tables
+
+GitHub Flavored Markdown tables support left, center, and right alignment:
+
+| Service | Status | Availability |
+| :--- | :---: | ---: |
+| API gateway | Healthy | 99.99% |
+| PostgreSQL | Healthy | 99.97% |
+| Background workers | Warning | 98.50% |
+
+Table cells can contain **bold text**, `inline code`, and escaped pipes such as `read \| write`.
+
+## Thematic Breaks
+
+Content above the first thematic break.
+
+---
+
+Content between thematic breaks.
+
+***
+
+Content below the second thematic break.
+
+## Admonitions and Alerts
+
+GitHub-style alerts use block quote syntax with one of five labels. Facet renders each variant as a printable alert with its label and icon:
+
+> [!NOTE]
+> Useful context that readers should notice, even when skimming the report.
+
+> [!TIP]
+> Prefer focused checks when validating a single report template.
+
+> [!IMPORTANT]
+> Store the report source and its referenced assets together.
+
+> [!WARNING]
+> Rendering untrusted templates can execute code during server-side rendering.
+
+> [!CAUTION]
+> Never include credentials or other secrets in generated reports.
+
+## Collapsible Detail Blocks
+
+GitHub uses HTML `details` and `summary` elements for optional content. Facet preserves the native wrapper and renders the nested Markdown inside it:
+
+<details>
+<summary>Show deployment details</summary>
+
+### Deployment configuration
+
+- Region: `eu-west-1`
+- Replicas: **4**
+- Release channel: stable
 
 ```yaml
-kubernetes: "1.24+"
-postgresql: "13+"
-memory: "4GB minimum"
-storage: "20GB SSD"
 deployment:
-  - SaaS
-  - Self-hosted
-  - Hybrid
+  region: eu-west-1
+  replicas: 4
 ```
 
-## Next Steps
+</details>
+
+On interactive renderers, add the `open` attribute when details should be expanded initially:
+
+<details open>
+<summary>Expanded health-check results</summary>
+
+All **48 health checks** completed successfully.
+
+</details>
+
+## Tabbed Alternatives
+
+GFM does not define interactive tabs. GitHub-compatible documents commonly present tab-like alternatives as adjacent detail blocks; Facet preserves each alternative as a native detail block:
+
+<details open>
+<summary>Linux</summary>
+
+```bash
+facet pdf MarkdownReport.md
+```
+
+</details>
+
+<details>
+<summary>macOS</summary>
+
+```bash
+facet pdf MarkdownReport.md --output ~/Documents
+```
+
+</details>
+
+<details>
+<summary>Container</summary>
+
+```bash
+docker run --rm facet pdf MarkdownReport.md
+```
+
+</details>
+
+## Mermaid Diagrams
+
+GitHub-compatible Mermaid diagrams use a fenced code block with the `mermaid` language identifier. Facet renders these fences to inline. its existing Chromium rendering pipeline:
+
+```mermaid
+flowchart LR
+    Source[Markdown source] --> Compile[Compile with Facet]
+    Compile --> HTML[HTML report]
+    Compile --> PDF[PDF report]
+```
+
+A sequence diagram uses the same fence:
+
+```mermaid
+sequenceDiagram
+    participant User
+    participant Facet
+    participant Browser
+    User->>Facet: Render MarkdownReport.md
+    Facet->>Browser: Generate printable document
+    Browser-->>User: HTML or PDF
+```
+
+## Footnotes
+
+Footnotes keep citations and explanations out of the main flow.[^rendering] A footnote can be reused in later prose.[^rendering]
+
+Named footnotes are easier to maintain than numeric labels.[^gfm]
+
+[^rendering]: Facet compiles Markdown through the same printable page pipeline used by MDX templates.
+[^gfm]: GitHub Flavored Markdown adds autolinks, footnotes, strikethrough, tables, and task lists.
+
+## Inline HTML Source
+
+GitHub-compatible Markdown can use inline HTML for elements without dedicated Markdown syntax: press <kbd>Enter</kbd>, highlight <mark>important text</mark>, render H<sub>2</sub>O, or write x<sup>2</sup>. Facet preserves these tags in HTML and PDF output.
+
+An HTML comment is present below but does not appear in the rendered report.
+
+<!-- This comment is intentionally hidden from rendered output. -->
+
+## Combined Example
+
+> **Status:** The platform is operational.
 
-- [ ] Resolve critical security findings
-- [ ] Complete certificate rotation for staging
-- [ ] Review stale access permissions
-- [ ] Update monitoring dashboards
+1. Review the [health dashboard](https://example.com/health).
+2. Run `facet pdf MarkdownReport.md`.
+3. Confirm the following checks:
+   - [x] Headings and paragraphs render
+   - [x] Tables fit the page
+   - [ ] Findings are resolved
 
 ---
 
-*Generated by Facet — flanksource.com/facet*
+*Generated by Facet — [flanksource.com](https://flanksource.com)*
diff --git a/openapi.yaml b/openapi.yaml
index 057e5c8..7365495 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -101,6 +101,12 @@ paths:
           schema:
             type: string
           description: Entry file within archive (gzip mode only).
+        - name: postProcessCss
+          in: query
+          schema:
+            type: boolean
+            default: true
+          description: Rebuild CSS after rendering to include data-dependent classes (gzip mode only).
         - name: X-Facet-Data
           in: header
           schema:
@@ -112,6 +118,12 @@ paths:
             Rendered output. For HTML format, returns raw HTML. For PDF format,
             returns JSON with a `url` field pointing to `/results/{id}` where the
             cached PDF can be fetched. When `output: "s3"`, returns S3 upload details.
+          headers:
+            Server-Timing:
+              description: Render phase durations for completed work.
+              schema:
+                type: string
+                example: dependency-install;dur=128.4;desc="Dependency install", vite;dur=42.1;desc="Vite"
           content:
             text/html:
               schema:
@@ -140,7 +152,7 @@ paths:
 
         **Event types:**
         - `data: {...}` — progress event with `stage`, `message`, `elapsed`, `duration`
-        - `event: result` — final output with `contentType`, `data`, and `url`. For PDFs, `data` is empty and `url` points to `/results/{id}`. For HTML, `data` contains the rendered HTML.
+        - `event: result` — final output with `contentType`, `data`, `url`, and `timings`. For PDFs, `data` is empty and `url` points to `/results/{id}`. For HTML, `data` contains the rendered HTML. `timings` contains the same phase names, descriptions, and durations exposed by `/render` through `Server-Timing`.
         - `event: error` — render error with `message`
       security:
         - apiKey: []
@@ -267,13 +279,21 @@ components:
           type: object
           additionalProperties:
             type: string
-          description: "npm dependencies to install, e.g. react-icons: ^5.4.0."
+          description: "npm dependencies to install, e.g. react-icons: ^5.4.0. Rejected with HTTP 400 when the server is started with --skip-modules."
         headerCode:
           type: string
           description: Inline TSX for a header component.
         footerCode:
           type: string
           description: Inline TSX for a footer component.
+        live:
+          type: boolean
+          default: false
+          description: Force browser rendering even when the template does not declare the live directive.
+        postProcessCss:
+          type: boolean
+          default: true
+          description: Rebuild CSS after rendering to include data-dependent class names.
         pdfOptions:
           $ref: "#/components/schemas/PDFOptions"
         encryption:
@@ -295,6 +315,13 @@ components:
           type: boolean
           description: Add debug overlay lines for header/footer zones.
           default: false
+        debugTypography:
+          type: boolean
+          description: Append a font-size reference page to the PDF.
+          default: false
+        fontSize:
+          type: number
+          description: Override the base font size in points.
         margins:
           type: object
           properties:
diff --git a/package.json b/package.json
index 311f026..8b11180 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "build:css": "tailwindcss -i src/styles.css -o dist/styles.css",
     "build:playground": "vite build --config vite.playground.config.ts && node cli/scripts/gen-playground-form.cjs",
     "build:cli": "cd cli && pnpm run build",
+    "serve": "tsx cli/src/cli.ts serve --templates-dir examples",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepublishOnly": "pnpm run build:components && pnpm run build:css && cd cli && pnpm run build:lib",
@@ -88,12 +89,15 @@
     "chalk": "^5.6.2",
     "chromatic": "^16.0.0",
     "juice": "^11.0.3",
+    "mermaid": "^11.16.0",
     "ora": "^8.2.0",
     "puppeteer": "^24.26.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rehype-raw": "^7.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-github-blockquote-alert": "^2.1.0",
     "storybook": "^8.6.14",
     "tailwindcss": "^3.4.3",
     "tsx": "^4.20.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 044a043..ac88cb2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,6 +144,9 @@ importers:
       juice:
         specifier: ^11.0.3
         version: 11.1.1
+      mermaid:
+        specifier: ^11.16.0
+        version: 11.16.0
       ora:
         specifier: ^8.2.0
         version: 8.2.0
@@ -156,12 +159,18 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+      rehype-raw:
+        specifier: ^7.0.0
+        version: 7.0.0
       remark-frontmatter:
         specifier: ^5.0.0
         version: 5.0.0
       remark-gfm:
         specifier: ^4.0.0
         version: 4.0.1
+      remark-github-blockquote-alert:
+        specifier: ^2.1.0
+        version: 2.1.0
       storybook:
         specifier: ^8.6.14
         version: 8.6.18(prettier@2.8.8)
@@ -193,6 +202,9 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
   '@babel/code-frame@7.29.0':
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
@@ -301,6 +313,12 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
+  '@braintree/sanitize-url@7.1.2':
+    resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
+
+  '@chevrotain/types@11.1.2':
+    resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}
+
   '@codemirror/autocomplete@6.20.3':
     resolution: {integrity: sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==}
 
@@ -557,6 +575,9 @@ packages:
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
+  '@iconify/utils@3.1.4':
+    resolution: {integrity: sha512-b1S7B1k9ohZ+iNTi2ATxbRYG9fTrJmUT0rc46bvVnNxqNRGW7dyo/vRREwyniI5IRN2RSJHDcm+s3BjWrSAjHw==}
+
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
@@ -615,6 +636,9 @@ packages:
     peerDependencies:
       rollup: '>=2'
 
+  '@mermaid-js/parser@1.2.0':
+    resolution: {integrity: sha512-oYPyv8A4As1yH5Bx+04iQEQxXuIQDe0GKCNSRgao6z8AM9jixXIfP0vsppRLvGf+nKIOb9/LdpWA4YuJiVvESA==}
+
   '@microsoft/api-extractor-model@7.33.8':
     resolution: {integrity: sha512-aIcoQggPyer3B6Ze3usz0YWC/oBwUHfRH5ETUsr+oT2BRA6SfTJl7IKPcPZkX4UR+PohowzW4uMxsvjrn8vm+w==}
 
@@ -1219,21 +1243,69 @@ packages:
   '@types/d3-array@3.2.2':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
   '@types/d3-color@3.1.3':
     resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
 
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.7':
+    resolution: {integrity: sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==}
+
   '@types/d3-drag@3.0.7':
     resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
 
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
   '@types/d3-ease@3.0.2':
     resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
 
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
   '@types/d3-interpolate@3.0.4':
     resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
 
   '@types/d3-path@3.1.1':
     resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
 
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.4':
+    resolution: {integrity: sha512-UHYId5WTCx4L4YNel7NU00XUXXgvgpgZOvp10PuvsQENjMDXhh2RyFc0KBjO7B45ne4Ha1yVH7ii0vnzKkuzWA==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
   '@types/d3-scale@4.0.9':
     resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
 
@@ -1243,6 +1315,9 @@ packages:
   '@types/d3-shape@3.1.8':
     resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
 
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
   '@types/d3-time@3.0.4':
     resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
 
@@ -1255,6 +1330,9 @@ packages:
   '@types/d3-zoom@3.0.8':
     resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
 
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
   '@types/dagre@0.7.54':
     resolution: {integrity: sha512-QjcRY+adGbYvBFS7cwv5txhVIwX1XXIUswWl+kSQTbI6NjgZydrZkEKX/etzVd7i+bCsCb40Z/xlBY5eoFuvWQ==}
 
@@ -1276,6 +1354,9 @@ packages:
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -1329,6 +1410,9 @@ packages:
   '@ungap/structured-clone@1.3.1':
     resolution: {integrity: sha512-mUFwbeTqrVgDQxFveS+df2yfap6iuP20NAKAsBt5jDEoOTDew+zwLAOilHCeQJOVSvmgCX4ogqIrA0mnyr08yQ==}
 
+  '@upsetjs/venn.js@2.0.0':
+    resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
+
   '@vitejs/plugin-react@4.7.0':
     resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -1736,6 +1820,14 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   compare-versions@6.1.1:
     resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
 
@@ -1748,6 +1840,12 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cose-base@1.0.3:
+    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
+
+  cose-base@2.2.0:
+    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
+
   cosmiconfig@9.0.1:
     resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
     engines: {node: '>=14'}
@@ -1782,14 +1880,51 @@ packages:
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  cytoscape-cose-bilkent@4.1.0:
+    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape-fcose@2.2.0:
+    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape@3.34.0:
+    resolution: {integrity: sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg==}
+    engines: {node: '>=0.10'}
+
+  d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+
   d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
     engines: {node: '>=12'}
 
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
   d3-color@3.1.0:
     resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
     engines: {node: '>=12'}
 
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
   d3-dispatch@3.0.1:
     resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
     engines: {node: '>=12'}
@@ -1798,22 +1933,65 @@ packages:
     resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
     engines: {node: '>=12'}
 
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
   d3-ease@3.0.1:
     resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
     engines: {node: '>=12'}
 
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
   d3-format@3.1.2:
     resolution: {integrity: sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==}
     engines: {node: '>=12'}
 
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
   d3-interpolate@3.0.1:
     resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
     engines: {node: '>=12'}
 
+  d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+
   d3-path@3.1.0:
     resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
     engines: {node: '>=12'}
 
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
   d3-scale@4.0.2:
     resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
     engines: {node: '>=12'}
@@ -1822,6 +2000,9 @@ packages:
     resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
     engines: {node: '>=12'}
 
+  d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+
   d3-shape@3.2.0:
     resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
     engines: {node: '>=12'}
@@ -1848,6 +2029,13 @@ packages:
     resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
     engines: {node: '>=12'}
 
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
+  dagre-d3-es@7.0.14:
+    resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
+
   dagre@0.8.5:
     resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
 
@@ -1888,6 +2076,9 @@ packages:
     resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
     engines: {node: '>= 14'}
 
+  delaunator@5.1.0:
+    resolution: {integrity: sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==}
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -2222,6 +2413,9 @@ packages:
   graphlib@2.1.8:
     resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
 
+  hachure-fill@0.5.2:
+    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -2241,6 +2435,15 @@ packages:
     resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
     engines: {node: '>= 0.4'}
 
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-raw@9.1.0:
+    resolution: {integrity: sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==}
+
   hast-util-to-estree@3.1.3:
     resolution: {integrity: sha512-48+B/rJWAp0jamNbAAf9M7Uf//UVqAoMmgXhBdxTDJLGKY+LRnZ99qcG+Qjl5HfMpYNzS5v4EAwVEF34LeAj7w==}
 
@@ -2250,9 +2453,15 @@ packages:
   hast-util-to-jsx-runtime@2.3.6:
     resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
+  hast-util-to-parse5@8.0.1:
+    resolution: {integrity: sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==}
+
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
   he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
@@ -2286,6 +2495,9 @@ packages:
     resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
     engines: {node: '>=8'}
 
+  import-meta-resolve@4.2.0:
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
+
   indent-string@4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
@@ -2296,6 +2508,9 @@ packages:
   inline-style-parser@0.2.7:
     resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
 
+  internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+
   internmap@2.0.3:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
@@ -2461,9 +2676,22 @@ packages:
     engines: {node: '>=18.17'}
     hasBin: true
 
+  katex@0.16.47:
+    resolution: {integrity: sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==}
+    hasBin: true
+
+  khroma@2.1.0:
+    resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
+
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
+  layout-base@1.0.2:
+    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
+
+  layout-base@2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+
   lightningcss-android-arm64@1.32.0:
     resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
     engines: {node: '>= 12.0.0'}
@@ -2549,6 +2777,9 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
   lodash@4.18.1:
     resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
 
@@ -2599,6 +2830,11 @@ packages:
     engines: {node: '>= 18'}
     hasBin: true
 
+  marked@16.4.2:
+    resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -2664,6 +2900,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  mermaid@11.16.0:
+    resolution: {integrity: sha512-Zvm3kbstgdpvIJPPItlL7fppIZ3kibvc1oZIGxdvk9t6UFz6flv+Jw7FtRGKwfcI8OckmH04LqG6LlS6X4B1pA==}
+
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -2908,6 +3147,9 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
+  package-manager-detector@1.8.0:
+    resolution: {integrity: sha512-yQA4H19AmPEoMUeavPMDIe1higySl/gH/yaQrkT/s07Qp+7pp2hYz30N3z2l5BkjVkF9Ow6o0wjJamm2y7Sn0A==}
+
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
@@ -2934,6 +3176,9 @@ packages:
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
+  path-data-parser@0.1.0:
+    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -2983,6 +3228,12 @@ packages:
   pkg-types@2.3.1:
     resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
 
+  points-on-curve@0.2.0:
+    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+
+  points-on-path@0.2.1:
+    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+
   polished@4.3.1:
     resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
     engines: {node: '>=10'}
@@ -3194,6 +3445,9 @@ packages:
   regex@5.1.1:
     resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
 
+  rehype-raw@7.0.0:
+    resolution: {integrity: sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==}
+
   rehype-recma@1.0.0:
     resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
 
@@ -3203,6 +3457,10 @@ packages:
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
+  remark-github-blockquote-alert@2.1.0:
+    resolution: {integrity: sha512-J392jmIP684d7iGsENN0uguL10IGbRdc8bTUSrd/jOLzdWkwg721Fj3JPQGN8tF6fTIrE5HHOIA3nBuwuaeuPQ==}
+    engines: {node: '>=16'}
+
   remark-mdx@3.1.1:
     resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
 
@@ -3246,14 +3504,23 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
+  robust-predicates@3.0.3:
+    resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
+
   rollup@4.60.3:
     resolution: {integrity: sha512-pAQK9HalE84QSm4Po3EmWIZPd3FnjkShVkiMlz1iligWYkWQ7wHYd1PF/T7QZ5TVSD6uSTon5gBVMSM4JfBV+A==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  roughjs@4.6.6:
+    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   safe-regex-test@1.1.0:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
@@ -3409,6 +3676,9 @@ packages:
   style-to-object@1.0.14:
     resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
+  stylis@4.4.0:
+    resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
+
   sucrase@3.35.1:
     resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -3581,6 +3851,9 @@ packages:
     resolution: {integrity: sha512-jOWVmzVceKlVVdwjNSenT4PbGghU0SBIizAev8ofZVgivk/TVHXSbNL8LP6M3spZvkR9/QolkyJavGSX5Cs0UA==}
     engines: {node: '>=10'}
 
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
@@ -3699,6 +3972,9 @@ packages:
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
   web-resource-inliner@8.0.0:
     resolution: {integrity: sha512-Ezr98sqXW/+OCGoUEXuOKVR+oVFlSdn1tIySEEJdiSAw4IjrW8hQkwARSSBJTSB5Us5dnytDgL0ZDliAYBhaNA==}
     engines: {node: '>=10.0.0'}
@@ -3809,6 +4085,11 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.8.0
+      tinyexec: 1.1.2
+
   '@babel/code-frame@7.29.0':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -3944,6 +4225,10 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
+  '@braintree/sanitize-url@7.1.2': {}
+
+  '@chevrotain/types@11.1.2': {}
+
   '@codemirror/autocomplete@6.20.3':
     dependencies:
       '@codemirror/language': 6.12.4
@@ -4145,6 +4430,12 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
+  '@iconify/utils@3.1.4':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@iconify/types': 2.0.0
+      import-meta-resolve: 4.2.0
+
   '@isaacs/cliui@8.0.2':
     dependencies:
       string-width: 5.1.2
@@ -4246,6 +4537,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@mermaid-js/parser@1.2.0':
+    dependencies:
+      '@chevrotain/types': 11.1.2
+
   '@microsoft/api-extractor-model@7.33.8(@types/node@20.19.40)':
     dependencies:
       '@microsoft/tsdoc': 0.16.0
@@ -4887,20 +5182,63 @@ snapshots:
 
   '@types/d3-array@3.2.2': {}
 
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
   '@types/d3-color@3.1.3': {}
 
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.7': {}
+
   '@types/d3-drag@3.0.7':
     dependencies:
       '@types/d3-selection': 3.0.11
 
+  '@types/d3-dsv@3.0.7': {}
+
   '@types/d3-ease@3.0.2': {}
 
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
   '@types/d3-interpolate@3.0.4':
     dependencies:
       '@types/d3-color': 3.1.3
 
   '@types/d3-path@3.1.1': {}
 
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.4': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
   '@types/d3-scale@4.0.9':
     dependencies:
       '@types/d3-time': 3.0.4
@@ -4911,6 +5249,8 @@ snapshots:
     dependencies:
       '@types/d3-path': 3.1.1
 
+  '@types/d3-time-format@4.0.3': {}
+
   '@types/d3-time@3.0.4': {}
 
   '@types/d3-timer@3.0.2': {}
@@ -4924,6 +5264,39 @@ snapshots:
       '@types/d3-interpolate': 3.0.4
       '@types/d3-selection': 3.0.11
 
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.2
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.7
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.8
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
   '@types/dagre@0.7.54': {}
 
   '@types/debug@4.1.13':
@@ -4942,6 +5315,8 @@ snapshots:
 
   '@types/estree@1.0.9': {}
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -4991,6 +5366,11 @@ snapshots:
 
   '@ungap/structured-clone@1.3.1': {}
 
+  '@upsetjs/venn.js@2.0.0':
+    optionalDependencies:
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   '@vitejs/plugin-react@4.7.0(vite@6.4.3(@types/node@20.19.40)(jiti@1.21.7)(lightningcss@1.32.0)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
       '@babel/core': 7.29.6
@@ -5391,6 +5771,10 @@ snapshots:
 
   commander@4.1.1: {}
 
+  commander@7.2.0: {}
+
+  commander@8.3.0: {}
+
   compare-versions@6.1.1: {}
 
   confbox@0.1.8: {}
@@ -5399,6 +5783,14 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
+  cose-base@1.0.3:
+    dependencies:
+      layout-base: 1.0.2
+
+  cose-base@2.2.0:
+    dependencies:
+      layout-base: 2.0.1
+
   cosmiconfig@9.0.1(typescript@5.9.3):
     dependencies:
       env-paths: 2.2.1
@@ -5432,12 +5824,50 @@ snapshots:
 
   csstype@3.2.3: {}
 
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.34.0):
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.34.0
+
+  cytoscape-fcose@2.2.0(cytoscape@3.34.0):
+    dependencies:
+      cose-base: 2.2.0
+      cytoscape: 3.34.0
+
+  cytoscape@3.34.0: {}
+
+  d3-array@2.12.1:
+    dependencies:
+      internmap: 1.0.1
+
   d3-array@3.2.4:
     dependencies:
       internmap: 2.0.3
 
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
   d3-color@3.1.0: {}
 
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.1.0
+
   d3-dispatch@3.0.1: {}
 
   d3-drag@3.0.0:
@@ -5445,16 +5875,56 @@ snapshots:
       d3-dispatch: 3.0.1
       d3-selection: 3.0.0
 
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
   d3-ease@3.0.1: {}
 
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
   d3-format@3.1.2: {}
 
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
   d3-interpolate@3.0.1:
     dependencies:
       d3-color: 3.1.0
 
+  d3-path@1.0.9: {}
+
   d3-path@3.1.0: {}
 
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-sankey@0.12.3:
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
   d3-scale@4.0.2:
     dependencies:
       d3-array: 3.2.4
@@ -5465,6 +5935,10 @@ snapshots:
 
   d3-selection@3.0.0: {}
 
+  d3-shape@1.3.7:
+    dependencies:
+      d3-path: 1.0.9
+
   d3-shape@3.2.0:
     dependencies:
       d3-path: 3.1.0
@@ -5496,6 +5970,44 @@ snapshots:
       d3-selection: 3.0.0
       d3-transition: 3.0.1(d3-selection@3.0.0)
 
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.2
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
+  dagre-d3-es@7.0.14:
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.18.1
+
   dagre@0.8.5:
     dependencies:
       graphlib: 2.1.8
@@ -5531,6 +6043,10 @@ snapshots:
       escodegen: 2.1.0
       esprima: 4.0.1
 
+  delaunator@5.1.0:
+    dependencies:
+      robust-predicates: 3.0.3
+
   dequal@2.0.3: {}
 
   detect-libc@2.1.2: {}
@@ -5892,6 +6408,8 @@ snapshots:
     dependencies:
       lodash: 4.18.1
 
+  hachure-fill@0.5.2: {}
+
   has-flag@4.0.0: {}
 
   has-property-descriptors@1.0.2:
@@ -5908,6 +6426,37 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-raw@9.1.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      '@ungap/structured-clone': 1.3.1
+      hast-util-from-parse5: 8.0.3
+      hast-util-to-parse5: 8.0.1
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      parse5: 7.3.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.1.0
+      vfile: 6.0.3
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-to-estree@3.1.3:
     dependencies:
       '@types/estree': 1.0.9
@@ -5963,10 +6512,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  hast-util-to-parse5@8.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      web-namespaces: 2.0.1
+      zwitch: 2.0.4
+
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
 
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
   he@1.2.0: {}
 
   html-void-elements@3.0.0: {}
@@ -6005,12 +6572,16 @@ snapshots:
 
   import-lazy@4.0.0: {}
 
+  import-meta-resolve@4.2.0: {}
+
   indent-string@4.0.0: {}
 
   inherits@2.0.4: {}
 
   inline-style-parser@0.2.7: {}
 
+  internmap@1.0.1: {}
+
   internmap@2.0.3: {}
 
   ip-address@10.2.0: {}
@@ -6140,8 +6711,18 @@ snapshots:
       slick: 1.12.2
       web-resource-inliner: 8.0.0
 
+  katex@0.16.47:
+    dependencies:
+      commander: 8.3.0
+
+  khroma@2.1.0: {}
+
   kolorist@1.8.0: {}
 
+  layout-base@1.0.2: {}
+
+  layout-base@2.0.1: {}
+
   lightningcss-android-arm64@1.32.0:
     optional: true
 
@@ -6205,6 +6786,8 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash-es@4.18.1: {}
+
   lodash@4.18.1: {}
 
   log-symbols@6.0.0:
@@ -6244,6 +6827,8 @@ snapshots:
 
   marked@14.0.0: {}
 
+  marked@16.4.2: {}
+
   math-intrinsics@1.1.0: {}
 
   mdast-util-find-and-replace@3.0.2:
@@ -6428,6 +7013,30 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  mermaid@11.16.0:
+    dependencies:
+      '@braintree/sanitize-url': 7.1.2
+      '@iconify/utils': 3.1.4
+      '@mermaid-js/parser': 1.2.0
+      '@types/d3': 7.4.3
+      '@upsetjs/venn.js': 2.0.0
+      cytoscape: 3.34.0
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.34.0)
+      cytoscape-fcose: 2.2.0(cytoscape@3.34.0)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.14
+      dayjs: 1.11.20
+      dompurify: 3.4.12
+      es-toolkit: 1.49.0
+      katex: 0.16.47
+      khroma: 2.1.0
+      marked: 16.4.2
+      roughjs: 4.6.6
+      stylis: 4.4.0
+      ts-dedent: 2.2.0
+      uuid: 11.1.1
+
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.3.0
@@ -6856,6 +7465,8 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
+  package-manager-detector@1.8.0: {}
+
   pako@1.0.11: {}
 
   parent-module@1.0.1:
@@ -6894,6 +7505,8 @@ snapshots:
 
   path-browserify@1.0.1: {}
 
+  path-data-parser@0.1.0: {}
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -6938,6 +7551,13 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
+  points-on-curve@0.2.0: {}
+
+  points-on-path@0.2.1:
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+
   polished@4.3.1:
     dependencies:
       '@babel/runtime': 7.29.2
@@ -7208,6 +7828,12 @@ snapshots:
     dependencies:
       regex-utilities: 2.3.0
 
+  rehype-raw@7.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-raw: 9.1.0
+      vfile: 6.0.3
+
   rehype-recma@1.0.0:
     dependencies:
       '@types/estree': 1.0.9
@@ -7236,6 +7862,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark-github-blockquote-alert@2.1.0:
+    dependencies:
+      unist-util-visit: 5.1.0
+
   remark-mdx@3.1.1:
     dependencies:
       mdast-util-mdx: 3.0.0
@@ -7290,6 +7920,8 @@ snapshots:
 
   reusify@1.1.0: {}
 
+  robust-predicates@3.0.3: {}
+
   rollup@4.60.3:
     dependencies:
       '@types/estree': 1.0.8
@@ -7321,10 +7953,19 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.60.3
       fsevents: 2.3.3
 
+  roughjs@4.6.6:
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
+  rw@1.3.3: {}
+
   safe-regex-test@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -7483,6 +8124,8 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
+  stylis@4.4.0: {}
+
   sucrase@3.35.1:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -7699,6 +8342,11 @@ snapshots:
 
   valid-data-url@3.0.1: {}
 
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -7803,6 +8451,8 @@ snapshots:
 
   w3c-keyname@2.2.8: {}
 
+  web-namespaces@2.0.1: {}
+
   web-resource-inliner@8.0.0:
     dependencies:
       ansi-colors: 4.1.3
diff --git a/src/components/diagram/Arrow.tsx b/src/components/diagram/Arrow.tsx
index aae4286..6183161 100644
--- a/src/components/diagram/Arrow.tsx
+++ b/src/components/diagram/Arrow.tsx
@@ -54,7 +54,11 @@ export function variantProps(variant: ArrowVariant): VariantProps {
   }
 }
 
-export interface ArrowProps extends Omit<xarrowPropsType, keyof VariantProps> {
+export interface ArrowProps extends Omit<xarrowPropsType, keyof VariantProps | 'start' | 'end'> {
+  /** Source endpoint: a BoxNode id (from the Diagram `id()` factory). */
+  from: string;
+  /** Target endpoint: a BoxNode id (from the Diagram `id()` factory). */
+  to: string;
   /** Preset style bundle. Individual props below override the preset. */
   variant?: ArrowVariant;
   color?: string;
@@ -71,8 +75,10 @@ export interface ArrowProps extends Omit<xarrowPropsType, keyof VariantProps> {
 /**
  * A diagram arrow. Thin wrapper over react-xarrows `Xarrow` that applies a
  * named `variant` preset; any explicitly-passed prop overrides the preset.
+ * `from`/`to` map to Xarrow's required `start`/`end` — Xarrow silently anchors
+ * missing endpoints at (0,0), so the mapping must happen here.
  */
-export default function Arrow({ variant = 'primary', ...overrides }: ArrowProps) {
+export default function Arrow({ variant = 'primary', from, to, ...overrides }: ArrowProps) {
   const props = { ...variantProps(variant), ...overrides };
-  return <Xarrow {...(props as xarrowPropsType)} />;
+  return <Xarrow start={from} end={to} {...(props as Omit<xarrowPropsType, 'start' | 'end'>)} />;
 }
diff --git a/src/components/diagram/Diagram.tsx b/src/components/diagram/Diagram.tsx
index eaa0bd9..a9c1d4e 100644
--- a/src/components/diagram/Diagram.tsx
+++ b/src/components/diagram/Diagram.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useId, useRef, useState } from 'react';
+import { Xwrapper, useXarrow } from 'react-xarrows';
 import { COLORS, type DiagramColors } from './colors';
 
 /** Scoped id factory: `id('source')` → a page-unique id for an arrow endpoint. */
@@ -19,14 +20,70 @@ export interface DiagramProps {
 
 const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
 
+/** Frames the root rect must hold still before the diagram counts as settled. */
+const STABLE_FRAMES = 10;
+/** Upper bound on settling; after this many frames the diagram is captured as-is. */
+const MAX_FRAMES = 600;
+
+/**
+ * Re-draws the arrows every animation frame until the diagram's root rect has
+ * been stable for STABLE_FRAMES frames, then reports settled. react-xarrows
+ * measures rects only when triggered, so late layout shifts (webfont loads,
+ * dev-server CSS injection) would otherwise freeze arrows at stale coordinates.
+ * Must render inside <Xwrapper> for useXarrow's update context.
+ */
+function ArrowSettler({
+  rootRef,
+  onSettled,
+}: {
+  rootRef: React.RefObject<HTMLDivElement>;
+  onSettled: () => void;
+}) {
+  const updateArrows = useXarrow();
+  const updateRef = useRef(updateArrows);
+  updateRef.current = updateArrows;
+
+  useEffect(() => {
+    let raf = 0;
+    let stable = 0;
+    let frames = 0;
+    let last = '';
+    const tick = () => {
+      const el = rootRef.current;
+      if (!el) return;
+      frames += 1;
+      const r = el.getBoundingClientRect();
+      const sig = `${r.x},${r.y},${r.width},${r.height}`;
+      if (sig === last) {
+        stable += 1;
+      } else {
+        stable = 0;
+        last = sig;
+      }
+      updateRef.current();
+      if (stable >= STABLE_FRAMES || frames >= MAX_FRAMES) {
+        onSettled();
+        return;
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return null;
+}
+
 /**
  * Container for a node-and-arrow diagram.
  *
  * react-xarrows measures DOM rects, so arrows only render in a browser. Under
  * SSR the children are skipped and a placeholder is emitted; the live render
  * path (Vite dev server + Puppeteer) mounts this in a real browser, where the
- * arrows draw. Once they have, the root gets `data-facet-ready="true"` so the
- * snapshotter knows the diagram has settled before capturing.
+ * arrows draw. Once the layout has settled and the arrows have been redrawn
+ * against it, the root gets `data-facet-ready="true"` so the snapshotter knows
+ * the diagram is final before capturing.
  */
 export default function Diagram({ children, colors = COLORS, className }: DiagramProps) {
   const prefix = useId();
@@ -34,21 +91,6 @@ export default function Diagram({ children, colors = COLORS, className }: Diagra
   const rootRef = useRef<HTMLDivElement>(null);
   const [ready, setReady] = useState(false);
 
-  // Arrows are drawn by react-xarrows in a post-mount effect. Wait two animation
-  // frames after our own mount so those arrow SVGs exist in the DOM before we
-  // signal readiness to the snapshotter.
-  useEffect(() => {
-    if (!isBrowser) return;
-    let raf2 = 0;
-    const raf1 = requestAnimationFrame(() => {
-      raf2 = requestAnimationFrame(() => setReady(true));
-    });
-    return () => {
-      cancelAnimationFrame(raf1);
-      cancelAnimationFrame(raf2);
-    };
-  }, []);
-
   if (!isBrowser) {
     return <div className={className} data-facet-diagram data-facet-ready="false" />;
   }
@@ -59,9 +101,15 @@ export default function Diagram({ children, colors = COLORS, className }: Diagra
       className={className}
       data-facet-diagram
       data-facet-ready={ready ? 'true' : 'false'}
-      style={{ ['--facet-diagram-primary' as string]: colors.primary }}
+      // position:relative makes this container the offset parent for the
+      // absolutely-positioned react-xarrows SVGs, so the arrows paginate with
+      // the diagram instead of anchoring to the page body in print output.
+      style={{ position: 'relative', ['--facet-diagram-primary' as string]: colors.primary }}
     >
-      {children(id)}
+      <Xwrapper>
+        {children(id)}
+        <ArrowSettler rootRef={rootRef} onSettled={() => setReady(true)} />
+      </Xwrapper>
     </div>
   );
 }
diff --git a/src/styles.css b/src/styles.css
index 1a21976..0d03580 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -14,56 +14,56 @@
 
 /* Remove max-width from prose class */
 .prose {
-  max-width: none !important;
+  max-width: none;
 }
 
 /* Reduce prose font size and line height for PDFs */
 @media print {
   .prose {
-    font-size: 9pt !important;
-    line-height: 1.3 !important;
+    font-size: 9pt;
+    line-height: 1.3;
   }
 
   .prose p {
-    font-size: 10pt !important;
-    line-height: 1.3 !important;
-    margin-bottom: 2mm !important;
+    font-size: 10pt;
+    line-height: 1.3;
+    margin-bottom: 2mm;
   }
 
   .prose h1, .prose h2, .prose h3, .prose h4 {
-    line-height: 1.2 !important;
+    line-height: 1.2;
   }
 
   /* Override typography plugin with higher specificity */
   .prose h1 {
-    font-size: 22pt !important;
-    line-height: 26pt !important;
-    margin-bottom: 4mm !important;
-    font-weight: 700 !important;
+    font-size: 22pt;
+    line-height: 26pt;
+    margin-bottom: 4mm;
+    font-weight: 700;
   }
 
   .prose h2 {
-    font-size: 15pt !important;
-    line-height: 19pt !important;
-    margin-top: 4mm !important;
-    margin-bottom: 3mm !important;
-    font-weight: 600 !important;
+    font-size: 15pt;
+    line-height: 19pt;
+    margin-top: 4mm;
+    margin-bottom: 3mm;
+    font-weight: 600;
   }
 
   .prose h3 {
-    font-size: 12pt !important;
-    line-height: 15pt !important;
-    margin-top: 3mm !important;
-    margin-bottom: 2mm !important;
-    font-weight: 500 !important;
+    font-size: 12pt;
+    line-height: 15pt;
+    margin-top: 3mm;
+    margin-bottom: 2mm;
+    font-weight: 500;
   }
 
   .prose h4 {
-    font-size: 10pt !important;
-    line-height: 12pt !important;
-    margin-top: 2mm !important;
-    margin-bottom: 2mm !important;
-    font-weight: 600 !important;
+    font-size: 10pt;
+    line-height: 12pt;
+    margin-top: 2mm;
+    margin-bottom: 2mm;
+    font-weight: 600;
   }
 
   h1, h2, h3, h4, p {
@@ -84,66 +84,66 @@
 
   /* Reduce all typography sizes for PDFs while maintaining hierarchy */
   h1 {
-    font-size: 22pt !important;
-    line-height: 26pt !important;
-    margin-bottom: 4mm !important;
+    font-size: 22pt;
+    line-height: 26pt;
+    margin-bottom: 4mm;
     @apply text-gray-700;
   }
 
   h2 {
-    font-size: 15pt !important;
-    line-height: 19pt !important;
-    margin-top: 4mm !important;
-    margin-bottom: 3mm !important;
+    font-size: 15pt;
+    line-height: 19pt;
+    margin-top: 4mm;
+    margin-bottom: 3mm;
     @apply inline-flex;
   }
 
   h3 {
-    font-size: 12pt !important;
-    line-height: 15pt !important;
-    margin-top: 3mm !important;
-    margin-bottom: 2mm !important;
+    font-size: 12pt;
+    line-height: 15pt;
+    margin-top: 3mm;
+    margin-bottom: 2mm;
   }
 
   h4 {
-    font-size: 10pt !important;
-    line-height: 12pt !important;
-    margin-top: 2mm !important;
-    margin-bottom: 2mm !important;
+    font-size: 10pt;
+    line-height: 12pt;
+    margin-top: 2mm;
+    margin-bottom: 2mm;
   }
 
   p {
-    font-size: 9pt !important;
-    line-height: 12pt !important;
-    margin-bottom: 3mm !important;
+    font-size: 9pt;
+    line-height: 12pt;
+    margin-bottom: 3mm;
   }
 
   .text-xs {
-    font-size: 7pt !important;
+    font-size: 7pt;
   }
 
   .text-sm {
-    font-size: 9pt !important;
+    font-size: 9pt;
   }
 
   .text-md {
-    font-size: 10pt !important;
+    font-size: 10pt;
   }
 
   .text-lg {
-    font-size: 15pt !important;
+    font-size: 15pt;
   }
 
   .text-xl {
-    font-size: 18pt !important;
+    font-size: 18pt;
   }
 
   .text-2xl {
-    font-size: 24pt !important;
+    font-size: 24pt;
   }
 
   tbody td {
-    font-weight: 400 !important;
+    font-weight: 400;
   }
 }
 
@@ -218,13 +218,13 @@ body {
 
   /* Table page break handling */
   table {
-    /* margin-top: 8mm !important; */
+    /* margin-top: 8mm; */
     page-break-inside: auto;
   }
 
   /* Ensure table wrappers also respect page margins */
   .overflow-x-auto {
-    margin-top: 8mm !important;
+    margin-top: 8mm;
   }
 
   thead {
@@ -492,7 +492,7 @@ article {
 }
 
 .header-meta p {
-  margin: 0 !important;
+  margin: 0;
 }
 
 /* CTA Footer */
@@ -528,7 +528,7 @@ article {
   font-size: 18pt;
   font-weight: 600;
   color: #fff;
-  margin: 0 !important;
+  margin: 0;
 }
 
 .section-header-bar .product-name {
@@ -552,7 +552,7 @@ article {
 }
 
 .datasheet-footer p {
-  margin: 0 0 1mm !important;
+  margin: 0 0 1mm;
   font-size: 8pt;
   line-height: 10pt;
 }
@@ -680,7 +680,7 @@ article {
 }
 
 .datasheet-footer--minimal p {
-  margin: 0 !important;
+  margin: 0;
 }
 
 /* Project links - Utility Class */
@@ -1029,4 +1029,3 @@ article {
   }
 }
 
-
diff --git a/tailwind.config.js b/tailwind.config.js
index 4ca97ba..67365b2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,5 +25,14 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/typography'),
+    function orderedListStyles({ addBase }) {
+      addBase({
+        ol: {
+          margin: '3mm 0 4mm 8mm',
+          padding: '0',
+          listStyleType: 'decimal',
+        },
+      });
+    },
   ],
 };