diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index a09e201..7018cfa 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -32,12 +32,14 @@ jobs:
           tools: bun@v1.3.10
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Install ImageMagick
+      - name: Install system dependencies
         run: |
-          sudo apt-get update && sudo apt-get install -y imagemagick
+          sudo apt-get update && sudo apt-get install -y imagemagick poppler-utils libnss3-tools
           sudo ln -sf /usr/bin/convert /usr/local/bin/magick
           sudo sed -i 's/rights="none" pattern="PDF"/rights="read|write" pattern="PDF"/' /etc/ImageMagick-6/policy.xml 2>/dev/null || true
           magick -version || convert -version
+          pdfinfo -v 2>&1 || true
+          certutil --version 2>&1 || true
 
       - name: Install dependencies
         run: |
diff --git a/.gitignore b/.gitignore
index 579908d..0cdd7d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -160,3 +160,7 @@ src/examples/*/dist/
 cli/cli
 cmd/facet/facet-cli.tar.gz
 facet
+hack/
+*.png
+.claude/
+*.html
diff --git a/README.md b/README.md
index b748245..44dbee1 100644
--- a/README.md
+++ b/README.md
@@ -256,14 +256,57 @@ Options:
 facet pdf MyDatasheet.tsx -d data.json -o out.pdf
 ```
 
-### `facet serve <template>`
+### `facet serve`
 
-Start a preview server with live editing.
+Start an API server with a built-in playground for interactive template development.
+
+```
+facet serve [options]
+
+Options:
+  -p, --port <number>          Server port (default: 3010)
+  --templates-dir <dir>        Directory containing templates (default: ".")
+  --workers <count>            Number of browser workers (default: 2)
+  --timeout <ms>               Render timeout in milliseconds (default: 60000)
+  --api-key <key>              API key for authentication
+  --max-upload <bytes>         Max upload size in bytes (default: 52428800)
+  --cache-max-size <bytes>     Max render cache size in bytes (default: 104857600)
+  --s3-endpoint <url>          S3 endpoint URL
+  --s3-bucket <name>           S3 bucket name
+  --s3-region <region>         S3 region (default: us-east-1)
+  --s3-prefix <prefix>         S3 key prefix
+  -v, --verbose                Enable verbose logging
+```
+
+**Example:**
+```bash
+facet serve --templates-dir ./templates --port 3010
+
+# With authentication
+facet serve --api-key my-secret-key
+
+# With S3 upload
+facet serve --s3-endpoint https://s3.amazonaws.com --s3-bucket my-bucket
+```
+
+The playground is available at `http://localhost:3010/` with a Monaco editor, live preview, and render logs.
+
+See [openapi.yaml](openapi.yaml) for the full API specification.
+
+### Docker
 
 ```bash
-facet serve MyDatasheet.tsx -d data.json
+docker run -p 3000:3000 -v ./templates:/templates ghcr.io/flanksource/facet
 ```
 
+### Helm
+
+```bash
+helm install facet ./chart
+```
+
+See [chart/values.yaml](chart/values.yaml) for configuration options.
+
 ## How It Works
 
 ### Build Process
diff --git a/Taskfile.yml b/Taskfile.yml
index 80fe4ec..d8f8bb3 100644
--- a/Taskfile.yml
+++ b/Taskfile.yml
@@ -31,6 +31,8 @@ tasks:
     sources:
       - src/**/*.{tsx,ts,jsx,js,css,mdx}
       - cli/src/**/*.{tsx,ts,jsx,js,css,mdx}
+    generates:
+      - dist/facet
     cmds:
       - npm run build
 
diff --git a/cli/package-lock.json b/cli/package-lock.json
index 1e15625..0d4c73f 100644
--- a/cli/package-lock.json
+++ b/cli/package-lock.json
@@ -11,6 +11,10 @@
       "dependencies": {
         "@aws-sdk/client-s3": "^3.600.0",
         "@aws-sdk/s3-request-presigner": "^3.600.0",
+        "@pdfsmaller/pdf-encrypt": "^1.0.2",
+        "@signpdf/placeholder-plain": "^3.3.0",
+        "@signpdf/signer-p12": "^3.3.0",
+        "@signpdf/signpdf": "^3.3.0",
         "ajv": "^8.12.0",
         "bun": "^1.3.2",
         "chalk": "^4.1.2",
@@ -18,6 +22,7 @@
         "lightningcss": "^1.30.2",
         "ora": "^5.4.1",
         "pdf-lib": "^1.17.1",
+        "pdf-rfc3161": "^0.1.4",
         "puppeteer": "^22.0.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -29,9 +34,11 @@
       "devDependencies": {
         "@types/jest": "^29.5.0",
         "@types/node": "^20.11.0",
+        "@types/node-forge": "^1.3.14",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "jest": "^29.7.0",
+        "node-forge": "^1.3.3",
         "ts-jest": "^29.1.0",
         "tsdown": "^0.16.0",
         "typescript": "^5.6.3"
@@ -2250,6 +2257,18 @@
         "@tybys/wasm-util": "^0.10.1"
       }
     },
+    "node_modules/@noble/hashes": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@oven/bun-darwin-aarch64": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@oven/bun-darwin-aarch64/-/bun-darwin-aarch64-1.3.2.tgz",
@@ -2421,6 +2440,18 @@
         "pako": "^1.0.10"
       }
     },
+    "node_modules/@pdfsmaller/pdf-encrypt": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@pdfsmaller/pdf-encrypt/-/pdf-encrypt-1.0.2.tgz",
+      "integrity": "sha512-F+gEftljSsEV3Zh+6XY0Q7garrRJlVMgomqGJDC+L5RIFpHyMZ0pQX0RPoN3JXn25BGd13T/62b6W3+mrxOkTw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "pdf-lib": "^1.17.1"
+      }
+    },
     "node_modules/@puppeteer/browsers": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.3.0.tgz",
@@ -2706,6 +2737,103 @@
         "node": "^20.19.0 || >=22.12.0"
       }
     },
+    "node_modules/@signpdf/placeholder-pdfkit010": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@signpdf/placeholder-pdfkit010/-/placeholder-pdfkit010-3.3.0.tgz",
+      "integrity": "sha512-tfXvynZDT68VoQg80cSdN5TET3ZzLMQCNHQpc3RJCi67YnhRromVhyCwMyi2tCdApGo2rkI46x6e9kCPvNsaBA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://buymeacoffee.com/vbuch?utm_source=npm-funding-signpdf"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@signpdf/utils": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=12",
+        "yarn": ">=1.22.18"
+      },
+      "peerDependencies": {
+        "pdfkit": "~0.10.0"
+      }
+    },
+    "node_modules/@signpdf/placeholder-plain": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@signpdf/placeholder-plain/-/placeholder-plain-3.3.0.tgz",
+      "integrity": "sha512-n7jt1Dzo3wocI64Pb8YhB+gvHAeaxweR7oHj5Xn3CyUVsP8LmXEWwJOUdWmtTrDfAupEiQtcro/EeskLiNy1vA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://buymeacoffee.com/vbuch?utm_source=npm-funding-signpdf"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@signpdf/placeholder-pdfkit010": "^3.3.0",
+        "@signpdf/utils": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@signpdf/signer-p12": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@signpdf/signer-p12/-/signer-p12-3.3.0.tgz",
+      "integrity": "sha512-MLynYKgUBu29ojIueIDV34sIOFDFpP0s1gQORxCc0zhs1jfy0juqU2xQpjUayMbhzB4L0zS9dPwgHtok1f89Cg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://buymeacoffee.com/vbuch?utm_source=npm-funding-signpdf"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@signpdf/utils": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=12",
+        "yarn": ">=1.22.18"
+      },
+      "peerDependencies": {
+        "node-forge": "^1.3.3"
+      }
+    },
+    "node_modules/@signpdf/signpdf": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@signpdf/signpdf/-/signpdf-3.3.0.tgz",
+      "integrity": "sha512-/vy3dPTsTbLHdsKRarPQw8++UqN8GXxjEVnl4ZRl+o/zMWFqVb861RM5bxoRMGGMuPSvb1Rgt2lmVobEc0YUpw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://buymeacoffee.com/vbuch?utm_source=npm-funding-signpdf"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@signpdf/utils": "^3.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@signpdf/utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@signpdf/utils/-/utils-3.3.0.tgz",
+      "integrity": "sha512-ArOP0MIhCfdChh1oZkog81TPeSY2e5TvHQmXJ682T4+SKb6Z609uAZhqMQZ9xm+YenEf/eNMSE5KVwU+EudXug==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://buymeacoffee.com/vbuch?utm_source=npm-funding-signpdf"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "yarn": ">=1.22.18"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@@ -3465,6 +3593,15 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.3.17.tgz",
+      "integrity": "sha512-tb7Iu+oZ+zWJZ3HJqwx8oNwSDIU440hmVMDPhpACWQWnrZHK99Bxs70gT1L2dnr5Hg50ZRWEFkQCAnOVVV0z1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@tootallnate/quickjs-emscripten": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
@@ -3585,6 +3722,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/node-forge": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.14.tgz",
+      "integrity": "sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
@@ -3648,6 +3795,18 @@
         "@types/node": "*"
       }
     },
+    "node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
@@ -3745,6 +3904,36 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/asn1js": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.7.tgz",
+      "integrity": "sha512-uLvq6KJu04qoQM6gvBfKFjlh6Gl0vOKQuR5cJMDHQkmwfMOQeN3F3SHCv9SNYSL+CRoHvOGFfllDlVz03GQjvQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/ast-kit": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.1.3.tgz",
@@ -3774,6 +3963,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
@@ -4078,6 +4282,30 @@
         "node": ">=8"
       }
     },
+    "node_modules/brfs": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/brfs/-/brfs-1.6.1.tgz",
+      "integrity": "sha512-OfZpABRQQf+Xsmju8XE9bDjs+uU4vLREGolP7bDgcpsI17QREyZ4Bl+2KLxxx1kCgA0fAIhKQBaBYh+PEcCqYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "quote-stream": "^1.0.1",
+        "resolve": "^1.1.5",
+        "static-module": "^2.2.0",
+        "through2": "^2.0.0"
+      },
+      "bin": {
+        "brfs": "bin/cmd.js"
+      }
+    },
+    "node_modules/brotli": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz",
+      "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.1.2"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.27.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.27.0.tgz",
@@ -4169,11 +4397,19 @@
         "node": "*"
       }
     },
+    "node_modules/buffer-equal": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
+      "integrity": "sha512-RgSV6InVQ9ODPdLWJ5UAqBqJBOg370Nz6ZQtRzpt6nUjc8v0St97uJ4PYC6NztqIScrAXafKM3mZPMygSe1ggA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/bun": {
@@ -4209,6 +4445,15 @@
         "@oven/bun-windows-x64-baseline": "1.3.2"
       }
     },
+    "node_modules/bytestreamjs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/bytestreamjs/-/bytestreamjs-2.0.1.tgz",
+      "integrity": "sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -4219,6 +4464,53 @@
         "node": ">=8"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4472,6 +4764,57 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concat-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/concat-stream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/concat-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/concat-stream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -4479,6 +4822,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cosmiconfig": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
@@ -4560,6 +4909,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.3.0.tgz",
+      "integrity": "sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -4608,6 +4963,44 @@
         }
       }
     },
+    "node_modules/deep-equal": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
+      "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==",
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.5",
+        "es-get-iterator": "^1.1.3",
+        "get-intrinsic": "^1.2.2",
+        "is-arguments": "^1.1.1",
+        "is-array-buffer": "^3.0.2",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.1",
+        "side-channel": "^1.0.4",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -4630,6 +5023,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/defu": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
@@ -4677,6 +5104,12 @@
       "license": "BSD-3-Clause",
       "peer": true
     },
+    "node_modules/dfa": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
+      "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==",
+      "license": "MIT"
+    },
     "node_modules/diff": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.2.tgz",
@@ -4718,20 +5151,79 @@
         }
       }
     },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.248",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.248.tgz",
-      "integrity": "sha512-zsur2yunphlyAO4gIubdJEXCK6KOVvtpiuDfCIqbM9FjcnMYiyn0ICa3hWfPr0nc41zcLWobgy1iL7VvoOyA2Q==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/emittery": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
-      "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
-      "dev": true,
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
       "license": "MIT",
-      "engines": {
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/duplexer2/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/duplexer2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/duplexer2/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/duplexer2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.248",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.248.tgz",
+      "integrity": "sha512-zsur2yunphlyAO4gIubdJEXCK6KOVvtpiuDfCIqbM9FjcnMYiyn0ICa3hWfPr0nc41zcLWobgy1iL7VvoOyA2Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emittery": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
+      "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
         "node": ">=12"
       },
       "funding": {
@@ -4775,6 +5267,56 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-get-iterator": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
+      "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "is-arguments": "^1.1.1",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.7",
+        "isarray": "^2.0.5",
+        "stop-iteration-iterator": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
@@ -4981,6 +5523,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/falafel": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/falafel/-/falafel-2.2.5.tgz",
+      "integrity": "sha512-HuC1qF9iTnHDnML9YZAdCDQwT0yKl/U55K4XSUXqGAA2GLoafFgWRqdAbhWJxXaYD4pyoVxAJ8wH670jMpI9DQ==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^7.1.1",
+        "isarray": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5000,6 +5555,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "license": "MIT"
+    },
     "node_modules/fast-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
@@ -5080,6 +5641,47 @@
         "node": ">=8"
       }
     },
+    "node_modules/fontkit": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-1.9.0.tgz",
+      "integrity": "sha512-HkW/8Lrk8jl18kzQHvAw9aTHe1cqsyx5sDnxncx652+CIfhawokEPkeM3BoIC+z/Xv7a0yMr0f3pRRwhGH455g==",
+      "license": "MIT",
+      "dependencies": {
+        "@swc/helpers": "^0.3.13",
+        "brotli": "^1.3.2",
+        "clone": "^2.1.2",
+        "deep-equal": "^2.0.5",
+        "dfa": "^1.2.0",
+        "restructure": "^2.0.1",
+        "tiny-inflate": "^1.0.3",
+        "unicode-properties": "^1.3.1",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/fontkit/node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5105,7 +5707,15 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5130,6 +5740,30 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -5140,6 +5774,19 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -5201,6 +5848,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -5230,6 +5889,27 @@
         "uglify-js": "^3.1.4"
       }
     },
+    "node_modules/has": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
+      "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -5239,11 +5919,49 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -5395,6 +6113,20 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "license": "ISC"
     },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ip-address": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
@@ -5404,17 +6136,92 @@
         "node": ">= 12"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "license": "MIT"
     },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -5426,6 +6233,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -5454,6 +6277,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -5464,6 +6299,67 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -5477,6 +6373,39 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -5489,6 +6418,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -6265,6 +7228,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==",
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.31.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
@@ -6514,6 +7490,42 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linebreak": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/linebreak/-/linebreak-0.3.0.tgz",
+      "integrity": "sha512-zt8pzlM3oq4moDN8U5mP1SbZ44yKV6dXCu44Ez6iTXmxUl8/jRFWeho2SDqL5YDBv0TBKPgU/XGovZwnXAKlOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "0.0.8",
+        "brfs": "^1.3.0",
+        "unicode-trie": "^0.3.0"
+      }
+    },
+    "node_modules/linebreak/node_modules/base64-js": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-0.0.8.tgz",
+      "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/linebreak/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
+    "node_modules/linebreak/node_modules/unicode-trie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-0.3.1.tgz",
+      "integrity": "sha512-WgVuO0M2jDl7hVfbPgXv2LUrD81HM0bQj/bvLGiw6fJ4Zo8nNFnDrA0/hU2Te/wz6pjxCm5cxJwtLjo2eyV51Q==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -6634,6 +7646,33 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge-source-map": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.0.4.tgz",
+      "integrity": "sha512-PGSmS0kfnTnMJCzJ16BLLCEe6oeYCamKFFdQKshi4BmM6FUwipjVOcBFGxqtQtirtAG4iZvHlqST9CpZKqlRjA==",
+      "license": "MIT",
+      "dependencies": {
+        "source-map": "^0.5.6"
+      }
+    },
+    "node_modules/merge-source-map/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -6681,7 +7720,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6722,6 +7760,16 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/node-forge": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.3.tgz",
+      "integrity": "sha512-rLvcdSyRCyouf6jcOIPe/BgwG/d7hKjzMKOas33/pHEr6gbq18IK9zV7DiPvzsz0oBJPme6qr6H6kGZuI9/DZg==",
+      "license": "(BSD-3-Clause OR GPL-2.0)",
+      "peer": true,
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
     "node_modules/node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
@@ -6759,6 +7807,63 @@
         "node": ">=8"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -6783,6 +7888,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.6",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "word-wrap": "~1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/ora": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -6963,7 +8085,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/pathe": {
@@ -6978,6 +8099,19 @@
       "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
       "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
       "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@pdf-lib/standard-fonts": "^1.0.0",
+        "@pdf-lib/upng": "^1.0.1",
+        "pako": "^1.0.11",
+        "tslib": "^1.11.1"
+      }
+    },
+    "node_modules/pdf-lib-incremental-save": {
+      "version": "1.17.4",
+      "resolved": "https://registry.npmjs.org/pdf-lib-incremental-save/-/pdf-lib-incremental-save-1.17.4.tgz",
+      "integrity": "sha512-MUuR0iMWvX2RF72V9mQWE8xe7vlHN4kgCfjFGtn807989psNt3F3+XkLdfkUzYRV/nsWMuWur+QmRTaF4jZF7Q==",
+      "license": "MIT",
       "dependencies": {
         "@pdf-lib/standard-fonts": "^1.0.0",
         "@pdf-lib/upng": "^1.0.1",
@@ -6985,12 +8119,46 @@
         "tslib": "^1.11.1"
       }
     },
+    "node_modules/pdf-lib-incremental-save/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
+    },
     "node_modules/pdf-lib/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "license": "0BSD"
     },
+    "node_modules/pdf-rfc3161": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/pdf-rfc3161/-/pdf-rfc3161-0.1.4.tgz",
+      "integrity": "sha512-22+56ObXLyLPeNM1c/h3G85IU55k4q725S4S+tb31pi/c6CDWOJNY/FNe+hfawV6hT56qUFWqGu13DoP6NA/2A==",
+      "license": "MIT",
+      "dependencies": {
+        "asn1js": "^3.0.7",
+        "pdf-lib-incremental-save": "^1.17.4",
+        "pkijs": "^3.3.3",
+        "pvutils": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/pdfkit": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/pdfkit/-/pdfkit-0.10.0.tgz",
+      "integrity": "sha512-mRJ6iuDzpIQ4ftKp5GvijLXNVRK86xjnyIPBraYSPrUPubNqWM5/oYmc7FZKUWz3wusRTj3PLR9HJ1X5ooqfsg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "crypto-js": "^3.1.9-1",
+        "fontkit": "^1.0.0",
+        "linebreak": "^0.3.0",
+        "png-js": ">=0.1.0"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -7039,6 +8207,45 @@
         "node": ">=8"
       }
     },
+    "node_modules/pkijs": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/pkijs/-/pkijs-3.3.3.tgz",
+      "integrity": "sha512-+KD8hJtqQMYoTuL1bbGOqxb4z+nZkTAwVdNtWwe8Tc2xNbEmdJYIYoc6Qt0uF55e6YW6KuTHw1DjQ18gMhzepw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@noble/hashes": "1.4.0",
+        "asn1js": "^3.0.6",
+        "bytestreamjs": "^2.0.1",
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/png-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.0.0.tgz",
+      "integrity": "sha512-k+YsbhpA9e+EFfKjTCH3VW6aoKlyNYI6NYdTfDL4CIvFnvsuO84ttonmZE7rc+v23SLTH8XX+5w/Ak9v0xGY4g=="
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
@@ -7054,6 +8261,12 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -7174,6 +8387,24 @@
       ],
       "license": "MIT"
     },
+    "node_modules/pvtsutils": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz",
+      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/pvutils": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.5.tgz",
+      "integrity": "sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/quansync": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
@@ -7191,6 +8422,20 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quote-stream": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/quote-stream/-/quote-stream-1.0.2.tgz",
+      "integrity": "sha512-kKr2uQ2AokadPjvTyKJQad9xELbZwYzWlNfI3Uz2j/ib5u6H9lDP7fUUR//rMycd0gv4Z5P1qXMfXR8YpIxrjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-equal": "0.0.1",
+        "minimist": "^1.1.3",
+        "through2": "^2.0.0"
+      },
+      "bin": {
+        "quote-stream": "bin/cmd.js"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -7252,6 +8497,26 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -7274,7 +8539,6 @@
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
       "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.1",
@@ -7346,6 +8610,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/restructure": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-2.0.1.tgz",
+      "integrity": "sha512-e0dOpjm5DseomnXx2M5lpdZ5zoHqF1+bqdMJUohoYVVQa7cBdnk7fdmeI6byNWP/kiME72EeTiSypTCVnpLiDg==",
+      "license": "MIT"
+    },
     "node_modules/rolldown": {
       "version": "1.0.0-beta.46",
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-beta.46.tgz",
@@ -7451,6 +8721,23 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -7470,6 +8757,44 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shallow-copy": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-copy/-/shallow-copy-0.0.1.tgz",
+      "integrity": "sha512-b6i4ZpVuUxB9h5gfCxPiusKYkqTMOjEbBs4wMaFbkfia4yFv92UKZ6Df8WXcKbn08JNL/abvg3FnMAOfakDvUw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -7493,6 +8818,78 @@
         "node": ">=8"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -7595,6 +8992,151 @@
         "node": ">=10"
       }
     },
+    "node_modules/static-eval": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.1.1.tgz",
+      "integrity": "sha512-MgWpQ/ZjGieSVB3eOJVs4OA2LT/q1vx98KPCTTQPzq/aLr0YUXTsgryTXr4SLfR0ZfUUCiedM9n/ABeDIyy4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "escodegen": "^2.1.0"
+      }
+    },
+    "node_modules/static-module": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/static-module/-/static-module-2.2.5.tgz",
+      "integrity": "sha512-D8vv82E/Kpmz3TXHKG8PPsCPg+RAX6cbCOyvjM6x04qZtQ47EtJFVwRsdov3n5d6/6ynrOY9XB4JkaZwB2xoRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "concat-stream": "~1.6.0",
+        "convert-source-map": "^1.5.1",
+        "duplexer2": "~0.1.4",
+        "escodegen": "~1.9.0",
+        "falafel": "^2.1.0",
+        "has": "^1.0.1",
+        "magic-string": "^0.22.4",
+        "merge-source-map": "1.0.4",
+        "object-inspect": "~1.4.0",
+        "quote-stream": "~1.0.2",
+        "readable-stream": "~2.3.3",
+        "shallow-copy": "~0.0.1",
+        "static-eval": "^2.0.0",
+        "through2": "~2.0.3"
+      }
+    },
+    "node_modules/static-module/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/static-module/node_modules/escodegen": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.1.tgz",
+      "integrity": "sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^3.1.3",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/static-module/node_modules/esprima": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+      "integrity": "sha512-AWwVMNxwhN8+NIPQzAQZCm7RkLC4RbM3B1OobMuyp3i+w73X57KCKaVIxaRZb+DYCojq7rspo+fmuQfAboyhFg==",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/static-module/node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/static-module/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/static-module/node_modules/magic-string": {
+      "version": "0.22.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
+      "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
+      "license": "MIT",
+      "dependencies": {
+        "vlq": "^0.2.2"
+      }
+    },
+    "node_modules/static-module/node_modules/object-inspect": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.4.1.tgz",
+      "integrity": "sha512-wqdhLpfCUbEsoEwl3FXwGyv8ief1k/1aUdIPCqVnupM6e8l63BEJdiF/0swtn04/8p05tG/T0FrpTlfwvljOdw==",
+      "license": "MIT"
+    },
+    "node_modules/static-module/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/static-module/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/static-module/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/streamx": {
       "version": "2.23.0",
       "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.23.0.tgz",
@@ -7702,7 +9244,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -7794,6 +9335,58 @@
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
       "license": "MIT"
     },
+    "node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
+    "node_modules/through2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/through2/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
+    "node_modules/through2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -8064,6 +9657,18 @@
         "fsevents": "~2.3.3"
       }
     },
+    "node_modules/type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==",
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/type-detect": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
@@ -8087,6 +9692,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "license": "MIT"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -8149,6 +9760,32 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/unicode-properties": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz",
+      "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.0",
+        "unicode-trie": "^2.0.0"
+      }
+    },
+    "node_modules/unicode-trie": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz",
+      "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^0.2.5",
+        "tiny-inflate": "^1.0.0"
+      }
+    },
+    "node_modules/unicode-trie/node_modules/pako": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+      "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==",
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
@@ -8207,6 +9844,12 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/vlq": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz",
+      "integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==",
+      "license": "MIT"
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -8242,6 +9885,73 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
@@ -8342,6 +10052,15 @@
         }
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/cli/package.json b/cli/package.json
index c4cf7e1..80f014a 100644
--- a/cli/package.json
+++ b/cli/package.json
@@ -44,6 +44,10 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.600.0",
     "@aws-sdk/s3-request-presigner": "^3.600.0",
+    "@pdfsmaller/pdf-encrypt": "^1.0.2",
+    "@signpdf/placeholder-plain": "^3.3.0",
+    "@signpdf/signer-p12": "^3.3.0",
+    "@signpdf/signpdf": "^3.3.0",
     "ajv": "^8.12.0",
     "bun": "^1.3.2",
     "chalk": "^4.1.2",
@@ -51,6 +55,7 @@
     "lightningcss": "^1.30.2",
     "ora": "^5.4.1",
     "pdf-lib": "^1.17.1",
+    "pdf-rfc3161": "^0.1.4",
     "puppeteer": "^22.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -59,9 +64,11 @@
   "devDependencies": {
     "@types/jest": "^29.5.0",
     "@types/node": "^20.11.0",
+    "@types/node-forge": "^1.3.14",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "jest": "^29.7.0",
+    "node-forge": "^1.3.3",
     "ts-jest": "^29.1.0",
     "tsdown": "^0.16.0",
     "typescript": "^5.6.3"
diff --git a/cli/playground.html b/cli/playground.html
new file mode 100644
index 0000000..9697e3a
--- /dev/null
+++ b/cli/playground.html
@@ -0,0 +1,764 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Facet Playground</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, -apple-system, sans-serif; height: 100vh; display: flex; flex-direction: column; background: #1e1e1e; color: #ccc; }
+    .toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #2d2d2d; border-bottom: 1px solid #404040; flex-shrink: 0; }
+    .toolbar label { font-size: 13px; }
+    .toolbar select, .toolbar button { font-size: 13px; padding: 4px 8px; border-radius: 4px; border: 1px solid #555; background: #3c3c3c; color: #ccc; cursor: pointer; }
+    .toolbar button:hover { background: #505050; }
+    .toolbar .sep { width: 1px; height: 20px; background: #555; }
+    .toolbar .spacer { flex: 1; }
+    .toolbar .status { font-size: 12px; color: #888; }
+    .toolbar input[type="checkbox"] { margin-right: 2px; }
+    .toolbar input[type="text"] { font-size: 13px; padding: 4px 8px; border-radius: 4px; border: 1px solid #555; background: #3c3c3c; color: #ccc; width: 100px; }
+    .toolbar input[type="number"] { font-size: 13px; padding: 4px 4px; border-radius: 4px; border: 1px solid #555; background: #3c3c3c; color: #ccc; width: 42px; text-align: center; }
+    .margin-group { display: flex; align-items: center; gap: 2px; font-size: 12px; color: #888; }
+    .margin-group span { color: #666; }
+    .main { display: flex; flex: 1; min-height: 0; }
+    .editor-panel { display: flex; flex-direction: column; width: 50%; border-right: 1px solid #404040; }
+    .editor-tabs { display: flex; background: #252526; border-bottom: 1px solid #404040; flex-shrink: 0; }
+    .editor-tabs button { padding: 6px 16px; font-size: 13px; background: none; border: none; color: #888; cursor: pointer; border-bottom: 2px solid transparent; }
+    .editor-tabs button.active { color: #fff; border-bottom-color: #2563eb; }
+    #template-editor, #data-editor, #deps-editor, #header-editor, #footer-editor { flex: 1; min-height: 0; }
+    .preview-panel { flex: 1; display: flex; flex-direction: column; background: #fff; min-height: 0; }
+    .preview-panel iframe { flex: 1; border: none; width: 100%; }
+    .preview-panel .error { padding: 16px; color: #dc2626; font-family: monospace; font-size: 13px; white-space: pre-wrap; background: #fef2f2; flex: 1; overflow: auto; }
+    .preview-panel .empty { display: flex; align-items: center; justify-content: center; flex: 1; color: #888; font-size: 14px; background: #f5f5f5; }
+
+    /* Split render button */
+    .render-group { display: flex; align-items: stretch; position: relative; }
+    .render-group .render-main { background: #2563eb; color: #fff; border: 1px solid #2563eb; font-weight: 600; border-radius: 4px 0 0 4px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
+    .render-group .render-main:hover { background: #1d4ed8; }
+    .render-group .render-main:disabled { opacity: 0.6; cursor: not-allowed; }
+    .render-group .render-drop { background: #2563eb; color: #fff; border: 1px solid #1d4ed8; border-left: 1px solid rgba(255,255,255,0.2); border-radius: 0 4px 4px 0; padding: 4px 6px; cursor: pointer; font-size: 10px; display: flex; align-items: center; }
+    .render-group .render-drop:hover { background: #1d4ed8; }
+    .render-group .render-drop:disabled { opacity: 0.6; cursor: not-allowed; }
+    .render-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: #3c3c3c; border: 1px solid #555; border-radius: 6px; overflow: hidden; z-index: 100; min-width: 140px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
+    .render-menu.open { display: block; }
+    .render-menu button { display: block; width: 100%; text-align: left; padding: 8px 14px; font-size: 13px; background: none; border: none; color: #ccc; cursor: pointer; }
+    .render-menu button:hover { background: #505050; }
+    .render-menu button .check { color: #2563eb; margin-right: 6px; font-weight: bold; }
+
+    /* Logs button */
+    .logs-btn { position: relative; }
+    .logs-btn .dot { position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; display: none; }
+    .logs-btn .dot.error { background: #dc2626; }
+
+    /* Log dialog */
+    .log-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
+    .log-overlay.open { display: flex; }
+    .log-dialog { background: #1a1a2e; border: 1px solid #404040; border-radius: 10px; width: 640px; max-width: 90vw; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.6); overflow: hidden; transition: width 0.2s ease, max-height 0.2s ease; }
+    .log-dialog.has-errors { width: 820px; max-height: 85vh; }
+    .log-dialog-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #16213e; border-bottom: 1px solid #2a2a4a; flex-shrink: 0; }
+    .log-dialog-header .title { font-size: 13px; font-weight: 600; color: #8892b0; text-transform: uppercase; letter-spacing: 0.5px; }
+    .log-dialog-header .badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #2563eb; color: #fff; min-width: 18px; text-align: center; }
+    .log-dialog-header .badge.error { background: #dc2626; }
+    .log-dialog-header .badge.done { background: #16a34a; }
+    .log-dialog-header .spacer { flex: 1; }
+    .log-dialog-header .close-btn { background: none; border: none; color: #555; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
+    .log-dialog-header .close-btn:hover { color: #aaa; }
+    .log-dialog-body { flex: 1; overflow-y: auto; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 12px; padding: 4px 0; }
+    .log-dialog-footer { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #2a2a4a; background: #16213e; flex-shrink: 0; }
+    .log-dialog-footer .status-text { font-size: 12px; color: #888; flex: 1; }
+
+    .log-entry { padding: 2px 16px; display: flex; gap: 8px; line-height: 1.6; border-bottom: 1px solid rgba(255,255,255,0.03); }
+    .log-entry:hover { background: rgba(255,255,255,0.02); }
+    .log-time { color: #4a5568; min-width: 52px; flex-shrink: 0; }
+    .log-stage { min-width: 100px; flex-shrink: 0; font-weight: 500; }
+    .log-msg { color: #a0aec0; flex: 1; }
+
+    /* Error block styling */
+    .log-error-block { margin: 8px 16px; padding: 12px 14px; background: #1c1017; border: 1px solid #5c2020; border-radius: 6px; border-left: 3px solid #f87171; }
+    .log-error-block .error-title { color: #f87171; font-weight: 600; font-size: 12px; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
+    .log-error-block .error-location { color: #60a5fa; font-size: 11px; margin-bottom: 8px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
+    .log-error-block .error-code { background: #0d1117; border: 1px solid #30363d; border-radius: 4px; padding: 8px 10px; margin: 6px 0; font-size: 12px; line-height: 1.5; white-space: pre; overflow-x: auto; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
+    .log-error-block .error-code .line-num { color: #484f58; margin-right: 12px; user-select: none; }
+    .log-error-block .error-code .line-error { color: #f87171; }
+    .log-error-block .error-code .line-normal { color: #a0aec0; }
+    .log-error-block .error-code .caret-line { color: #f87171; font-weight: bold; }
+    .log-error-block .error-detail { color: #d4a0a0; font-size: 12px; white-space: pre-wrap; word-break: break-word; margin-top: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
+    .log-stage.parsing { color: #a78bfa; }
+    .log-stage.resolving { color: #60a5fa; }
+    .log-stage.installing { color: #f59e0b; }
+    .log-stage.building { color: #34d399; }
+    .log-stage.tailwind { color: #2dd4bf; }
+    .log-stage.rendering-html { color: #818cf8; }
+    .log-stage.rendering-pdf { color: #f472b6; }
+    .log-stage.uploading { color: #fb923c; }
+    .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; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+  <div class="toolbar">
+    <strong style="color:#fff;font-size:14px;">Facet Playground</strong>
+    <div class="sep"></div>
+    <label>Page Size:
+      <select id="pageSize">
+        <option value="">Default</option>
+        <option value="A4">A4</option>
+        <option value="Letter">Letter</option>
+        <option value="A3">A3</option>
+        <option value="Legal">Legal</option>
+        <option value="Tabloid">Tabloid</option>
+      </select>
+    </label>
+    <label><input type="checkbox" id="landscape"> Landscape</label>
+    <label><input type="checkbox" id="debug"> Debug</label>
+    <div class="sep"></div>
+    <div class="margin-group">
+      Margins<span>(mm):</span>
+      <input type="number" id="marginTop" placeholder="T" min="0" value="10" title="Top margin (mm)">
+      <input type="number" id="marginBottom" placeholder="B" min="0" value="10" title="Bottom margin (mm)">
+      <input type="number" id="marginLeft" placeholder="L" min="0" value="10" title="Left margin (mm)">
+      <input type="number" id="marginRight" placeholder="R" min="0" value="10" title="Right margin (mm)">
+    </div>
+    <div class="spacer"></div>
+    <button class="logs-btn" id="logsBtn" onclick="openLogs()" title="View render log">
+      Logs <span class="dot" id="logsDot"></span>
+    </button>
+    <div class="render-group">
+      <button class="render-main" id="renderBtn" onclick="doRender()">Render HTML</button>
+      <button class="render-drop" id="renderDrop" onclick="toggleRenderMenu(event)">&#9660;</button>
+      <div class="render-menu" id="renderMenu">
+        <button onclick="setFormat('html')"><span class="check" id="checkHtml">&#10003;</span>HTML</button>
+        <button onclick="setFormat('pdf')"><span class="check" id="checkPdf">&nbsp;</span>PDF</button>
+      </div>
+    </div>
+  </div>
+  <div class="main">
+    <div class="editor-panel">
+      <div class="editor-tabs">
+        <button class="active" onclick="switchTab('template', this)">Template</button>
+        <button onclick="switchTab('header', this)">Header</button>
+        <button onclick="switchTab('footer', this)">Footer</button>
+        <button onclick="switchTab('data', this)">Data</button>
+        <button onclick="switchTab('deps', this)">Deps</button>
+      </div>
+      <div id="template-editor"></div>
+      <div id="header-editor" style="display:none"></div>
+      <div id="footer-editor" style="display:none"></div>
+      <div id="data-editor" style="display:none"></div>
+      <div id="deps-editor" style="display:none"></div>
+    </div>
+    <div class="preview-panel" id="preview">
+      <div class="empty">Click "Render" to preview your template</div>
+    </div>
+  </div>
+
+  <div class="log-overlay" id="logOverlay" onclick="onOverlayClick(event)">
+    <div class="log-dialog">
+      <div class="log-dialog-header">
+        <span class="title">Render Log</span>
+        <span class="badge" id="logsBadge" style="display:none">0</span>
+        <span class="spacer"></span>
+        <button class="close-btn" onclick="closeLogs()">&times;</button>
+      </div>
+      <div class="log-dialog-body" id="logsBody"></div>
+      <div class="log-dialog-footer">
+        <span class="status-text" id="logStatusText"></span>
+      </div>
+    </div>
+  </div>
+
+  <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_DEPS = JSON.stringify({
+      "@flanksource/facet": "__FACET_VERSION__",
+      "react-icons": "^5.4.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"
+    />
+  );
+}`;
+
+    let templateEditor, dataEditor, depsEditor, headerEditor, footerEditor;
+    let currentFormat = 'html';
+    let renderHadError = 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,
+      });
+    });
+
+    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();
+    }
+
+    /* 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();
+    }
+
+    function toggleRenderMenu(e) {
+      e.stopPropagation();
+      document.getElementById('renderMenu').classList.toggle('open');
+    }
+
+    function closeRenderMenu() {
+      document.getElementById('renderMenu').classList.remove('open');
+    }
+
+    document.addEventListener('click', closeRenderMenu);
+
+    /* 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');
+
+      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) {
+        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';
+
+      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 {
+        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);
+      }
+
+      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>';
+          }
+          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);
+      }
+
+      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;');
+    }
+
+    async function doRender() {
+      const btn = document.getElementById('renderBtn');
+      const drop = document.getElementById('renderDrop');
+      const preview = document.getElementById('preview');
+
+      btn.disabled = true;
+      drop.disabled = true;
+      clearLogs();
+      openLogs();
+      setLogStatus('Rendering...', true);
+
+      const code = templateEditor.getValue();
+      const format = currentFormat;
+      const pageSize = document.getElementById('pageSize').value;
+      const landscape = document.getElementById('landscape').checked;
+      const debug = document.getElementById('debug').checked;
+
+      let data = {};
+      try {
+        data = JSON.parse(dataEditor.getValue());
+      } catch (e) {
+        preview.innerHTML = '<div class="error">Invalid JSON in data editor:\n' + e.message + '</div>';
+        btn.disabled = false;
+        drop.disabled = false;
+        setLogStatus('Failed', false);
+        addLog('error', 'Invalid JSON: ' + e.message);
+        return;
+      }
+
+      let deps = {};
+      try {
+        deps = JSON.parse(depsEditor.getValue());
+      } catch (e) {
+        setLogStatus('Failed', false);
+        addLog('error', 'Invalid JSON in dependencies editor: ' + e.message);
+        btn.disabled = false;
+        drop.disabled = false;
+        return;
+      }
+
+      const margins = {};
+      const mt = parseFloat(document.getElementById('marginTop').value);
+      const mb = parseFloat(document.getElementById('marginBottom').value);
+      const ml = parseFloat(document.getElementById('marginLeft').value);
+      const mr = parseFloat(document.getElementById('marginRight').value);
+      if (!isNaN(mt)) margins.top = mt;
+      if (!isNaN(mb)) margins.bottom = mb;
+      if (!isNaN(ml)) margins.left = ml;
+      if (!isNaN(mr)) margins.right = mr;
+
+      const body = { code, format, data, pdfOptions: {} };
+      if (pageSize) body.pdfOptions.defaultPageSize = pageSize;
+      if (landscape) body.pdfOptions.landscape = true;
+      if (debug) body.pdfOptions.debug = true;
+      if (Object.keys(margins).length) body.pdfOptions.margins = margins;
+      if (!Object.keys(body.pdfOptions).length) delete body.pdfOptions;
+      if (Object.keys(deps).length) body.dependencies = deps;
+
+      const hdr = headerEditor.getValue().trim();
+      const ftr = footerEditor.getValue().trim();
+      if (hdr) body.headerCode = hdr;
+      if (ftr) body.footerCode = ftr;
+
+      const start = Date.now();
+      try {
+        const res = await fetch('/render/stream', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+
+        if (!res.ok) {
+          const err = await res.text();
+          preview.innerHTML = '<div class="error">Render failed (' + res.status + '):\n' + err + '</div>';
+          setLogStatus('Failed', false);
+          addLog('error', 'HTTP ' + res.status + ': ' + err);
+          btn.disabled = false;
+          drop.disabled = false;
+          return;
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let gotResult = false;
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          buffer = lines.pop() || '';
+
+          let eventType = 'message';
+          for (const line of lines) {
+            if (line.startsWith('event: ')) {
+              eventType = line.slice(7).trim();
+              continue;
+            }
+            if (!line.startsWith('data: ')) {
+              if (line === '') eventType = 'message';
+              continue;
+            }
+
+            let payload;
+            try { payload = JSON.parse(line.slice(6)); } catch { continue; }
+
+            if (eventType === 'result') {
+              gotResult = true;
+              const elapsed = ((Date.now() - start) / 1000).toFixed(1);
+              if (payload.contentType === 'text/html') {
+                preview.innerHTML = '<iframe sandbox="allow-same-origin allow-scripts"></iframe>';
+                preview.querySelector('iframe').srcdoc = payload.data;
+              } else if (payload.url) {
+                preview.innerHTML = '<iframe></iframe>';
+                preview.querySelector('iframe').src = payload.url;
+              } else if (payload.data) {
+                try {
+                  const bytes = Uint8Array.from(atob(payload.data), c => c.charCodeAt(0));
+                  const blob = new Blob([bytes], { type: 'application/pdf' });
+                  preview.innerHTML = '<iframe></iframe>';
+                  preview.querySelector('iframe').src = URL.createObjectURL(blob);
+                } catch (pdfErr) {
+                  preview.innerHTML = '<div class="error">Failed to decode PDF: ' + escapeHtml(pdfErr.message) + '</div>';
+                }
+              } else {
+                preview.innerHTML = '<div class="error">Render returned empty result</div>';
+              }
+              setLogStatus('Done (' + elapsed + 's)', false);
+              addLog('done', 'Completed in ' + elapsed + 's');
+              if (!renderHadError) setTimeout(closeLogs, 600);
+            } else if (eventType === 'error') {
+              preview.innerHTML = '<div class="error">' + escapeHtml(payload.message) + '</div>';
+              setLogStatus('Failed', false);
+              addLog('error', payload.message);
+            } else if (payload.stage || payload.message) {
+              setLogStatus(payload.message, true);
+              addLog(payload.stage, payload.message, payload.elapsed, payload.duration);
+            }
+            eventType = 'message';
+          }
+        }
+
+        if (!gotResult) {
+          const elapsed = ((Date.now() - start) / 1000).toFixed(1);
+          setLogStatus('Done (' + elapsed + 's)', false);
+          if (!renderHadError) setTimeout(closeLogs, 600);
+        }
+      } catch (e) {
+        preview.innerHTML = '<div class="error">Network error:\n' + e.message + '</div>';
+        setLogStatus('Error', false);
+        addLog('error', 'Network: ' + e.message);
+      } finally {
+        btn.disabled = false;
+        drop.disabled = false;
+      }
+    }
+  </script>
+</body>
+</html>
diff --git a/cli/src/bundler/vite-builder.ts b/cli/src/bundler/vite-builder.ts
index 976eee1..5be0861 100644
--- a/cli/src/bundler/vite-builder.ts
+++ b/cli/src/bundler/vite-builder.ts
@@ -12,6 +12,7 @@ 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 { depHash, linkCachedNodeModules, promoteToCacheAfterInstall } from '../server/facet-cache.js';
 
 export interface BuildResult {
   html: string;
@@ -68,8 +69,15 @@ export async function buildTemplate(options: BuildOptions): Promise<BuildResult>
   facetDir.generatePostCSSConfig();
   facetDir.generateTailwindConfig();
 
-  // Install dependencies only when package.json changed or node_modules is missing
-  if (facetDir.needsInstall()) {
+  // Try to reuse cached node_modules based on dependency hash
+  let pkgDeps: Record<string, string> | undefined;
+  try {
+    const pkg = JSON.parse(readFileSync(join(facetRoot, 'package.json'), 'utf-8'));
+    pkgDeps = pkg.dependencies;
+  } catch {}
+  const hash = depHash(pkgDeps);
+
+  if (!linkCachedNodeModules(facetRoot, hash, logger) && facetDir.needsInstall()) {
     logger.debug('Installing dependencies...');
     try {
       const npmResult = await $`cd ${facetRoot} && npm install --ignore-scripts 2>&1`.quiet();
@@ -78,6 +86,7 @@ export async function buildTemplate(options: BuildOptions): Promise<BuildResult>
       const output = error?.stdout?.toString?.() || error?.stderr?.toString?.() || error?.message || String(error);
       throw new Error(`npm install failed in ${facetRoot}:\n${output}`);
     }
+    promoteToCacheAfterInstall(facetRoot, hash, logger);
     logger.debug('Dependencies installed');
   } else {
     logger.debug('Dependencies up to date, skipping npm install');
@@ -118,9 +127,27 @@ export async function buildTemplate(options: BuildOptions): Promise<BuildResult>
     if (stderr) logger.error(stderr);
     if (stdout) logger.debug(`stdout: ${stdout.length} bytes`);
     if (exitCode != null) logger.debug(`exit: ${exitCode}`);
-    if (!stderr) logger.error(error instanceof Error ? error.message : String(error));
-    throw new Error(`Vite SSR loader failed (see error above)`);
+    const raw = stderr || (error instanceof Error ? error.message : String(error));
+    throw new Error(`Vite SSR build failed:\n${deduplicateOutput(raw)}`);
   } finally {
     try { rmSync(tmpDir, { recursive: true, force: true }); } catch {}
   }
 }
+
+function deduplicateOutput(text: string): string {
+  // Bun shell errors sometimes contain stderr twice back-to-back.
+  // Check if the output is two identical halves and return just one.
+  const trimmed = text.trim();
+  const len = trimmed.length;
+  if (len < 40) return trimmed;
+  const mid = Math.ceil(len / 2);
+  // Try splitting at a newline near the midpoint
+  for (let i = mid - 5; i <= mid + 5 && i < len; i++) {
+    if (trimmed[i] === '\n') {
+      const first = trimmed.substring(0, i).trim();
+      const second = trimmed.substring(i + 1).trim();
+      if (first === second) return first;
+    }
+  }
+  return trimmed;
+}
diff --git a/cli/src/cli.ts b/cli/src/cli.ts
index 22384b1..f2ad98e 100644
--- a/cli/src/cli.ts
+++ b/cli/src/cli.ts
@@ -6,12 +6,47 @@ import { generateHTML } from './generators/html.js';
 import { startServer } from './server/preview.js';
 import { Logger } from './utils/logger.js';
 import { resolveOutput } from './utils/resolve-output.js';
+import type { PDFMargins } from './utils/pdf-generator.js';
+import type { PDFEncryptionOptions, PDFSignatureOptions } from './utils/pdf-security.js';
 
 function parseDataLoaderArgs(): string[] {
   const dashIndex = process.argv.indexOf('--');
   return dashIndex !== -1 ? process.argv.slice(dashIndex + 1) : [];
 }
 
+function buildMargins(options: any): PDFMargins | undefined {
+  const m: PDFMargins = {};
+  if (options.marginTop != null) m.top = options.marginTop;
+  if (options.marginBottom != null) m.bottom = options.marginBottom;
+  if (options.marginLeft != null) m.left = options.marginLeft;
+  if (options.marginRight != null) m.right = options.marginRight;
+  return Object.keys(m).length > 0 ? m : undefined;
+}
+
+function buildEncryption(options: any): PDFEncryptionOptions | undefined {
+  if (!options.ownerPassword) return undefined;
+  return {
+    ownerPassword: options.ownerPassword,
+    userPassword: options.userPassword,
+    permissions: {
+      print: options.print ?? true,
+      copy: options.copy ?? true,
+    },
+  };
+}
+
+function buildSignature(options: any): PDFSignatureOptions | undefined {
+  if (!options.signCert && !options.selfSigned && !options.timestampUrl) return undefined;
+  return {
+    certPath: options.signCert,
+    certPassword: options.signPassword ?? '',
+    selfSigned: options.selfSigned ?? false,
+    reason: options.signReason,
+    name: options.signName,
+    timestampUrl: options.timestampUrl,
+  };
+}
+
 function addSharedOptions(cmd: Command): Command {
   return cmd
     .option('-d, --data <file>', 'Path to JSON data file')
@@ -82,6 +117,23 @@ addSharedOptions(
     .option('--no-validate', 'Skip data validation')
     .option('--debug', 'Add colored debug overlay lines for header/footer zones')
     .option('--page-size <size>', 'Default page size (a4, a3, letter, legal, fhd, qhd, wqhd, 4k, 5k, 16k)', 'a4')
+    .option('--landscape', 'Use landscape orientation')
+    .option('--margin-top <mm>', 'Top margin in mm', parseFloat)
+    .option('--margin-bottom <mm>', 'Bottom margin in mm', parseFloat)
+    .option('--margin-left <mm>', 'Left margin in mm', parseFloat)
+    .option('--margin-right <mm>', 'Right margin in mm', parseFloat)
+    .option('--header <file>', 'Header template file (.tsx)')
+    .option('--footer <file>', 'Footer template file (.tsx)')
+    .option('--user-password <password>', 'PDF password required to open')
+    .option('--owner-password <password>', 'PDF owner password (controls permissions)')
+    .option('--no-print', 'Disable printing permission')
+    .option('--no-copy', 'Disable copy permission')
+    .option('--sign-cert <path>', 'Path to PKCS#12 (.p12/.pfx) certificate')
+    .option('--sign-password <password>', 'Certificate password')
+    .option('--self-signed', 'Auto-generate a self-signed certificate for signing')
+    .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) => {
   const logger = new Logger(options.verbose);
   try {
@@ -103,7 +155,12 @@ addSharedOptions(
         refresh: options.refresh,
         debug: options.debug,
         pageSize: options.pageSize,
-        sandbox: options.sandbox,
+        landscape: options.landscape,
+        margins: buildMargins(options),
+        header: options.header,
+        footer: options.footer,
+        encryption: buildEncryption(options),
+        signature: buildSignature(options),
       });
     }
 
@@ -122,12 +179,13 @@ addSharedOptions(
 program
   .command('serve')
   .description('Start API server for rendering templates')
-  .option('-p, --port <number>', 'Server port', '3000')
+  .option('-p, --port <number>', 'Server port', '3010')
   .option('--templates-dir <dir>', 'Directory containing templates', '.')
   .option('--workers <count>', 'Number of browser workers', '2')
   .option('--timeout <ms>', 'Render timeout in milliseconds', '60000')
   .option('--api-key <key>', 'API key for authentication')
   .option('--max-upload <bytes>', 'Max upload size in bytes', '52428800')
+  .option('--cache-max-size <bytes>', 'Max render cache size in bytes', '104857600')
   .option('--s3-endpoint <url>', 'S3 endpoint URL')
   .option('--s3-bucket <name>', 'S3 bucket name')
   .option('--s3-region <region>', 'S3 region', 'us-east-1')
@@ -144,6 +202,7 @@ program
         timeout: options.timeout,
         apiKey: options.apiKey,
         maxUpload: options.maxUpload,
+        cacheMaxSize: options.cacheMaxSize,
         verbose: options.verbose,
         s3Endpoint: options.s3Endpoint,
         s3Bucket: options.s3Bucket,
diff --git a/cli/src/generators/pdf.ts b/cli/src/generators/pdf.ts
index 4eda4e2..acb57b2 100644
--- a/cli/src/generators/pdf.ts
+++ b/cli/src/generators/pdf.ts
@@ -1,9 +1,39 @@
-import { readFile, unlink } from 'fs/promises';
-import { resolve, join } from 'path';
+import { readFile, writeFile as fsWriteFile, unlink } from 'fs/promises';
+import { resolve, join, dirname } from 'path';
 import type { GenerateOptions } from '../types.js';
 import { Logger } from '../utils/logger.js';
 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';
+
+function extractBodyContent(html: string): string {
+  const match = html.match(/<body[^>]*>([\s\S]*)<\/body>/i);
+  return match ? match[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 buildAndExtractFragment(
+  filePath: string,
+  data: Record<string, unknown>,
+  logger: Logger,
+): Promise<string> {
+  const consumerRoot = dirname(resolve(filePath));
+  const templatePath = resolve(filePath);
+  const relPath = templatePath.replace(consumerRoot + '/', '');
+  const result = await buildTemplate({ templatePath: relPath, data, consumerRoot, logger });
+  try {
+    return extractBodyContent(result.html);
+  } finally {
+    await result.cleanup();
+  }
+}
 
 export async function generatePDF(options: GenerateOptions): Promise<void> {
   const logger = new Logger(options.verbose);
@@ -15,7 +45,21 @@ export async function generatePDF(options: GenerateOptions): Promise<void> {
 
   const outputDir = resolve(process.cwd(), options.outputDir);
   const htmlPath = join(outputDir, `${outputName}.html`);
-  const finalHTML = await readFile(htmlPath, 'utf-8');
+  let finalHTML = await readFile(htmlPath, 'utf-8');
+
+  const data = options.data ? JSON.parse(await readFile(resolve(options.data), 'utf-8')) : {};
+
+  if (options.header) {
+    logger.info('Building header template...');
+    const fragment = await buildAndExtractFragment(options.header, data, logger);
+    finalHTML = insertBeforeBodyClose(finalHTML, fragment);
+  }
+
+  if (options.footer) {
+    logger.info('Building footer template...');
+    const fragment = await buildAndExtractFragment(options.footer, data, logger);
+    finalHTML = insertBeforeBodyClose(finalHTML, fragment);
+  }
 
   logger.info('Converting HTML to PDF...');
   const pdfPath = join(outputDir, `${outputName}.pdf`);
@@ -26,8 +70,20 @@ export async function generatePDF(options: GenerateOptions): Promise<void> {
     logger,
     debug: options.debug,
     defaultPageSize: options.pageSize,
+    landscape: options.landscape,
+    margins: options.margins,
   });
 
+  if (options.encryption || options.signature) {
+    logger.info('Applying PDF security...');
+    const pdfBuffer = await readFile(pdfPath);
+    const secured = await applyPDFSecurity(pdfBuffer, {
+      encryption: options.encryption,
+      signature: options.signature,
+    });
+    await fsWriteFile(pdfPath, secured);
+  }
+
   if (!options.debug) {
     await unlink(htmlPath).catch(() => {});
     logger.debug(`Cleaned up intermediate HTML: ${htmlPath}`);
diff --git a/cli/src/server/config.ts b/cli/src/server/config.ts
index b7bbba1..f6de4e8 100644
--- a/cli/src/server/config.ts
+++ b/cli/src/server/config.ts
@@ -16,6 +16,7 @@ export interface ServerConfig {
   apiKey?: string;
   maxUploadSize: number;
   verbose: boolean;
+  cacheMaxSize: number;
   s3?: S3Config;
   sandbox?: string | boolean;
 }
@@ -27,6 +28,7 @@ export interface ServerCLIFlags {
   timeout?: string;
   apiKey?: string;
   maxUpload?: string;
+  cacheMaxSize?: string;
   verbose?: boolean;
   s3Endpoint?: string;
   s3Bucket?: string;
@@ -37,12 +39,13 @@ export interface ServerCLIFlags {
 
 export function loadConfig(flags: ServerCLIFlags): ServerConfig {
   const config: ServerConfig = {
-    port: parseInt(flags.port ?? process.env['FACET_PORT'] ?? '3000', 10),
+    port: parseInt(flags.port ?? process.env['FACET_PORT'] ?? '3010', 10),
     templatesDir: flags.templatesDir ?? process.env['FACET_TEMPLATES_DIR'] ?? '.',
     workers: parseInt(flags.workers ?? process.env['FACET_WORKERS'] ?? '2', 10),
     renderTimeout: parseInt(flags.timeout ?? process.env['FACET_RENDER_TIMEOUT'] ?? '60000', 10),
     apiKey: flags.apiKey ?? process.env['FACET_API_KEY'],
     maxUploadSize: parseInt(flags.maxUpload ?? process.env['FACET_MAX_UPLOAD'] ?? '52428800', 10),
+    cacheMaxSize: parseInt(flags.cacheMaxSize ?? process.env['FACET_CACHE_MAX_SIZE'] ?? '104857600', 10),
     verbose: flags.verbose ?? false,
     sandbox: flags.sandbox,
   };
diff --git a/cli/src/server/facet-cache.ts b/cli/src/server/facet-cache.ts
new file mode 100644
index 0000000..f526964
--- /dev/null
+++ b/cli/src/server/facet-cache.ts
@@ -0,0 +1,110 @@
+/**
+ * Caches .facet/node_modules/ directories keyed by dependency hash.
+ *
+ * The expensive part of each render is `npm install` inside .facet/.
+ * This cache maintains warmed node_modules/ directories and symlinks
+ * them into each render's .facet/ dir, so FacetDirectory.needsInstall()
+ * returns false and npm install is skipped entirely.
+ *
+ * Template source files in .facet/src/ are symlinked before each render
+ * and cleaned up after, so the cached node_modules stays clean.
+ */
+
+import { createHash } from 'crypto';
+import { existsSync, mkdirSync, readdirSync, rmSync, statSync, symlinkSync, readlinkSync, renameSync, cpSync } from 'fs';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import { Logger } from '../utils/logger.js';
+
+const CACHE_ROOT = join(tmpdir(), 'facet-cache');
+const MAX_CACHE_ENTRIES = 10;
+
+/** Compute a short hash from the dependency map for cache keying. */
+export function depHash(deps: Record<string, string> | undefined): string {
+  const key = deps ? JSON.stringify(deps, Object.keys(deps).sort()) : '{}';
+  return createHash('sha256').update(key).digest('hex').slice(0, 16);
+}
+
+function cacheDir(hash: string): string {
+  return join(CACHE_ROOT, hash);
+}
+
+/**
+ * If a cached node_modules exists for this dep hash, symlink it into
+ * facetRoot so npm install is skipped. Returns true if cache was used.
+ */
+export function linkCachedNodeModules(facetRoot: string, hash: string, logger: Logger): boolean {
+  const cached = join(cacheDir(hash), 'node_modules');
+  if (!existsSync(cached)) return false;
+
+  const target = join(facetRoot, 'node_modules');
+  if (existsSync(target)) {
+    try {
+      if (readlinkSync(target) === cached) return true;
+      rmSync(target, { force: true });
+    } catch {
+      // Not a symlink — real dir from a prior in-place install; remove it.
+      rmSync(target, { recursive: true, force: true });
+    }
+  }
+
+  symlinkSync(cached, target, 'junction');
+  logger.debug(`Linked cached node_modules (${hash})`);
+  // Touch the cache dir so LRU eviction works
+  try { statSync(cacheDir(hash)); } catch {}
+  return true;
+}
+
+/**
+ * After a fresh npm install, move the newly-created node_modules into
+ * the cache and symlink it back so subsequent renders reuse it.
+ */
+export function promoteToCacheAfterInstall(facetRoot: string, hash: string, logger: Logger): void {
+  const nmPath = join(facetRoot, 'node_modules');
+  if (!existsSync(nmPath)) return;
+
+  // Don't promote if it's already a symlink (already cached)
+  try { readlinkSync(nmPath); return; } catch { /* real dir — promote it */ }
+
+  ensureCacheDir();
+  const dest = join(cacheDir(hash), 'node_modules');
+  mkdirSync(cacheDir(hash), { recursive: true });
+
+  // Move node_modules → cache, then symlink back
+  if (existsSync(dest)) rmSync(dest, { recursive: true, force: true });
+
+  // Use rename for atomic move (same filesystem)
+  try {
+    renameSync(nmPath, dest);
+  } catch {
+    // Cross-device: fall back to copy + delete
+    cpSync(nmPath, dest, { recursive: true });
+    rmSync(nmPath, { recursive: true, force: true });
+  }
+
+  symlinkSync(dest, nmPath, 'junction');
+  logger.debug(`Promoted node_modules to cache (${hash})`);
+  evictCache(logger);
+}
+
+function ensureCacheDir(): void {
+  mkdirSync(CACHE_ROOT, { recursive: true });
+}
+
+/** Evict oldest cache entries when the cache grows too large. */
+function evictCache(logger: Logger): void {
+  if (!existsSync(CACHE_ROOT)) return;
+
+  const entries = readdirSync(CACHE_ROOT)
+    .map(name => {
+      const full = join(CACHE_ROOT, name);
+      try { return { name, full, mtime: statSync(full).mtimeMs }; } catch { return null; }
+    })
+    .filter((e): e is { name: string; full: string; mtime: number } => e !== null)
+    .sort((a, b) => b.mtime - a.mtime);
+
+  for (const entry of entries.slice(MAX_CACHE_ENTRIES)) {
+    logger.debug(`Evicting facet cache: ${entry.name}`);
+    rmSync(entry.full, { recursive: true, force: true });
+  }
+}
diff --git a/cli/src/server/facet-types.ts b/cli/src/server/facet-types.ts
new file mode 100644
index 0000000..daf58af
--- /dev/null
+++ b/cli/src/server/facet-types.ts
@@ -0,0 +1,1782 @@
+export const facetTypes = `declare module '@flanksource/facet' {
+  import React from 'react';
+
+  export interface TaskSummary {
+      theme: string;
+      status: string;
+      description: string;
+      commits?: {
+          count: number;
+          additions?: number;
+          deletions?: number;
+      };
+      notes?: string | React.ReactNode;
+      achievements?: string[];
+  }
+
+  /**
+   * Common Types
+   * Shared type definitions used across components
+   */
+  /**
+   * User Interface
+   * Represents a user with optional avatar and contact info
+   */
+  export interface User {
+      id?: string;
+      name: string;
+      email?: string;
+      avatar?: string;
+  }
+  /**
+   * Status Color Type
+   * Standard color palette for status indicators
+   */
+  export type StatusColor = 'red' | 'green' | 'orange' | 'gray' | 'yellow';
+  /**
+   * Size Type
+   * Standard size variants for components
+   */
+  export type Size = 'xs' | 'sm' | 'md' | 'lg';
+
+  /**
+   * POC Evaluation Data Structure
+   * Defines the schema for technical POC evaluation data
+   */
+  /** Star rating type (1-5 scale) */
+  export type StarRating = 1 | 2 | 3 | 4 | 5;
+  /** KPI metric types */
+  export type KpiType = 'time' | 'percentage' | 'count' | 'custom';
+  /**
+   * KPI Metric Interface
+   * Represents a measurable key performance indicator
+   */
+  export interface KpiMetric {
+      /** Numeric value of the metric */
+      value: number | string;
+      /** Type of metric (time, percentage, count, custom) */
+      type: KpiType;
+      /** Unit of measurement (e.g., 'seconds', 'steps', '%') */
+      unit?: string;
+      /** Display value for the metric (optional, for formatting) */
+      displayValue?: string;
+  }
+  /**
+   * KPI with Target and Actual for comparison
+   * Used in completed stage to show goal vs result
+   */
+  export interface KpiComparison {
+      /** Metric description */
+      metric: string;
+      /** Target/goal value (what was planned) */
+      target: KpiMetric;
+      /** Actual achieved value */
+      actual: KpiMetric;
+      /** Percentage difference (positive = exceeded, negative = fell short) */
+      percentageOfTarget?: number;
+  }
+  /**
+   * Test Variant Interface
+   * Represents a single test execution with before/after measurements
+   */
+  export interface TestVariant {
+      /** Description of test scenario */
+      step: string;
+      /** Name or role of person who performed test */
+      tester: string;
+      /** KPI measurement before POC */
+      beforeKpi: KpiMetric;
+      /** KPI measurement after POC */
+      afterKpi: KpiMetric;
+      /** Calculated percentage improvement */
+      improvement: number;
+      /** Benefit rating (1-5 stars) */
+      rating: StarRating;
+      /** Qualitative assessment and comments */
+      comments: string;
+  }
+  /**
+   * POC Objective Interface
+   * Represents one of the four evaluation objectives
+   */
+  export interface PocObjective {
+      /** Unique identifier (e.g., 'tash', 'self-service') */
+      id: string;
+      /** Objective title */
+      title: string;
+      /** Detailed explanation of objective */
+      description: string;
+      /** Icon component name */
+      icon: string;
+      /** Category for grouping objectives */
+      category?: string;
+      /** Key KPI summary for this objective */
+      keyKpi: {
+          /** Metric description */
+          metric: string;
+          /** Before measurement */
+          before: KpiMetric;
+          /** After measurement */
+          after: KpiMetric;
+          /** Calculated percentage improvement */
+          improvement?: number;
+      };
+      /** Array of 3-5 test scenarios */
+      tests: TestVariant[];
+  }
+  export interface Customer {
+      name: string;
+      logoUrl?: string;
+  }
+  /** POC lifecycle stage */
+  export type PocStage = 'planned' | 'in-progress' | 'completed';
+  /** Rating category names for completed POCs */
+  export type RatingCategory = 'Technical Feasibility' | 'User Experience' | 'Performance & Scalability' | 'Integration Complexity' | 'Security';
+  /** Category rating with 1-5 scale */
+  export interface CategoryRating {
+      category: RatingCategory;
+      rating: StarRating;
+      notes?: string;
+  }
+  /** Planned stage information */
+  export interface PlannedInfo {
+      goals: string[];
+      successCriteria: string[];
+      scope: string;
+      timeline: {
+          duration: string;
+          milestones: string[];
+      };
+      resourcesNeeded: {
+          team: string[];
+          infrastructure: string[];
+          dataAccess: string[];
+      };
+  }
+  /** In-progress tracking information */
+  export interface InProgressInfo {
+      progressUpdates: {
+          date: string;
+          status: string;
+          blockers?: string[];
+      }[];
+      observations: string[];
+      timelineAdjustments?: string;
+  }
+  /** Completed evaluation information */
+  export interface CompletedInfo {
+      categoryRatings: CategoryRating[];
+      qualitativeAssessment: {
+          strengths: string[];
+          weaknesses: string[];
+          summary: string;
+      };
+      nextSteps: {
+          decision: 'go' | 'no-go' | 'conditional';
+          actionItems: string[];
+          recommendations: string[];
+      };
+  }
+  /**
+   * Root POC Evaluation Data Interface
+   * Contains all four objectives and metadata
+   */
+  export interface PocEvaluationData {
+      /** Evaluation title */
+      title: string;
+      /** Optional subtitle */
+      subtitle?: string;
+      /** Current date time */
+      date: string;
+      customer: Customer;
+      /** POC start date */
+      startDate: string;
+      /** POC end date */
+      endDate?: string;
+      /** Test environment description */
+      environment: string;
+      /** Exactly 4 objectives */
+      objectives: PocObjective[];
+      /** Current POC stage */
+      status: PocStage;
+      /** Planned stage information (present when status is 'planned') */
+      plannedInfo?: PlannedInfo;
+      /** In-progress tracking (present when status is 'in-progress') */
+      inProgressInfo?: InProgressInfo;
+      /** Completed evaluation (present when status is 'completed') */
+      completedInfo?: CompletedInfo;
+  }
+  /**
+   * Component Props Interface
+   */
+  export interface PocEvaluationProps {
+      /** Evaluation data (defaults to sampleEvaluationData if not provided) */
+      data?: PocEvaluationData;
+      /** Show methodology section (default: true) */
+      showMethodology?: boolean;
+      /** Show glossary section (default: true) */
+      showGlossary?: boolean;
+      /** Inline CSS string */
+      css: string;
+  }
+
+  export type AlertSeverity = 'critical' | 'high' | 'medium' | 'low';
+  export type AlertType = 'dependabot' | 'code-scanning' | 'secret-scanning';
+  export interface Alert {
+      type: AlertType;
+      severity: AlertSeverity;
+      title: string;
+      url?: string;
+      location?: string;
+      references?: Array<{
+          label: string;
+          url: string;
+      }>;
+  }
+  export interface SeverityTrend {
+      critical: number;
+      high: number;
+      medium: number;
+      low: number;
+  }
+  export interface SecurityTrend {
+      recentlyClosed: number;
+      recentlyClosedDependabot: number;
+      recentlyClosedCodeScanning: number;
+      totalClosed: number;
+      bySeverity: SeverityTrend;
+  }
+
+  export function getColorFromString(input: string): string;
+
+  /**
+   * Format duration from milliseconds to human-readable string
+   * @param value Duration in milliseconds
+   * @returns Formatted string like "2d5h30m15s" or "450ms"
+   */
+  export function formatDuration(value: number): string;
+  /**
+   * Check if a value is empty (null, undefined, empty string, or empty array)
+   */
+  export function isEmpty(value: any): boolean;
+
+  export interface AgeProps {
+      className?: string;
+      from?: Date | string;
+      to?: Date | string | null;
+      suffix?: boolean;
+  }
+  export function Age({ className, from, to, suffix }: AgeProps): JSX.Element | null;
+
+  import { Alert } from '../types/security';
+  interface AlertsTableProps {
+      alerts: Alert[];
+      className?: string;
+  }
+  /**
+   * Displays security alerts in a compact single-line format with ellipsis
+   */
+  export function AlertsTable({ alerts, className }: AlertsTableProps): JSX.Element | null;
+
+  import { User } from '../types/common';
+  export interface AvatarProps {
+      size?: 'xs' | 'sm' | 'md' | 'lg';
+      circular?: boolean;
+      inline?: boolean;
+      alt?: string;
+      user?: Partial<User>;
+      className?: string;
+      showName?: boolean;
+  }
+  export function Avatar({ user, size, alt, inline, circular, className, showName }: AvatarProps): JSX.Element;
+
+  import { User } from '../types/common';
+  export interface AvatarGroupProps {
+      users: Partial<User>[];
+      size?: 'xs' | 'sm' | 'md' | 'lg';
+      maxCount?: number;
+      className?: string;
+  }
+  export function AvatarGroup({ users, size, maxCount, className }: AvatarGroupProps): JSX.Element;
+
+  /**
+   * Badge size variant
+   */
+  export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+  /**
+   * Badge shape variant
+   */
+  export type BadgeShape = 'pill' | 'rounded' | 'square';
+  /**
+   * Badge visual variant
+   */
+  export type BadgeVariant = 'status' | 'metric' | 'custom' | 'outlined';
+  /**
+   * Semantic status types for status badges
+   */
+  export type BadgeStatus = 'success' | 'error' | 'warning' | 'info';
+  /**
+   * Props for the Badge component
+   */
+  export interface BadgeProps {
+      /**
+       * Visual variant of the badge
+       * @default 'metric'
+       */
+      variant?: BadgeVariant;
+      /**
+       * Semantic status for status variant badges
+       * Only applicable when variant='status'
+       */
+      status?: BadgeStatus;
+      /**
+       * Custom background color (hex or Tailwind class)
+       * Only applicable when variant='custom'
+       */
+      color?: string;
+      /**
+       * Custom text color (hex or Tailwind class)
+       * Only applicable when variant='custom'
+       */
+      textColor?: string;
+      /**
+       * Custom border color (hex or Tailwind class)
+       * Only applicable when variant='custom' or 'outlined'
+       */
+      borderColor?: string;
+      /**
+       * Icon component to display (left-aligned)
+       * Should be a React component that accepts className prop
+       */
+      icon?: React.ComponentType<{
+          className?: string;
+      }>;
+      /**
+       * Label text (left section)
+       */
+      label?: string;
+      /**
+       * Value text (right section)
+       */
+      value?: string;
+      /**
+       * Size of the badge
+       * @default 'md'
+       */
+      size?: BadgeSize;
+      /**
+       * Shape/border-radius of the badge
+       * @default 'pill'
+       */
+      shape?: BadgeShape;
+      /**
+       * URL for clickable badge (renders as <a> tag)
+       */
+      href?: string;
+      /**
+       * Link target attribute
+       * @default '_self'
+       */
+      target?: '_blank' | '_self' | '_parent' | '_top';
+      /**
+       * Link rel attribute (e.g., 'noopener noreferrer' for external links)
+       */
+      rel?: string;
+      /**
+       * Additional CSS classes
+       */
+      className?: string;
+  }
+  /**
+   * Badge component for displaying status indicators, metrics, and labeled values
+   *
+   * @example
+   * // Status badge
+   * <Badge variant="status" status="success" label="Build" value="passing" />
+   *
+   * @example
+   * // Metric badge with icon
+   * <Badge variant="metric" icon={StarIcon} label="Stars" value="1.2k" />
+   *
+   * @example
+   * // Custom color badge
+   * <Badge variant="custom" color="#7c3aed" textColor="#fff" label="v1.2.3" />
+   *
+   * @example
+   * // Outlined badge as link
+   * <Badge variant="outlined" status="info" label="Docs" href="/docs" target="_blank" />
+   */
+  export function Badge({ variant, status, color, textColor, borderColor, icon: Icon, label, value, size, shape, href, target, rel, className, }: BadgeProps): JSX.Element;
+
+  interface BulletItem {
+      term: string | React.ReactNode;
+      subtitle?: string;
+      description?: string;
+      color?: string;
+      icon?: string | React.ComponentType<{
+          className?: string;
+          style?: React.CSSProperties;
+      }>;
+  }
+  interface BulletGroup {
+      title: string;
+      items: BulletItem[];
+  }
+  interface BulletListProps {
+      items?: BulletItem[];
+      groups?: BulletGroup[];
+      variant?: 'default' | 'border-left' | 'gradient' | 'icon-left' | 'compact' | 'card';
+      columns?: number;
+      size?: 'xs' | 'sm' | 'md';
+      termClass?: string;
+      descriptionClass?: string;
+      className?: string;
+  }
+  /**
+   * BulletList Component (DS-17)
+   *
+   * Enforces bold lead-in phrase formatting for bullet points with multiple style variants.
+   *
+   * Supports three variants:
+   * - default: Simple list with bold term and description
+   * - border-left: Styled with left border accent (used in architecture page)
+   * - gradient: Gradient background with icons (used in component showcases)
+   *
+   * DS-17: List items SHOULD start with bold lead-in phrases followed by details
+   *
+   * @example Default usage
+   * \`\`\`tsx
+   * <BulletList
+   *   items={[
+   *     {
+   *       term: "Automatic discovery",
+   *       description: "Agentless scraping across AWS, Azure, GCP, Kubernetes"
+   *     },
+   *     {
+   *       term: "Real-time updates",
+   *       description: "5-minute freshness with event-driven change detection"
+   *     }
+   *   ]}
+   * />
+   * \`\`\`
+   *
+   * @example Default with columns
+   * \`\`\`tsx
+   * <BulletList
+   *   columns={2}
+   *   items={[
+   *     {
+   *       term: "Automatic discovery",
+   *       description: "Agentless scraping across AWS, Azure, GCP, Kubernetes"
+   *     },
+   *     {
+   *       term: "Real-time updates",
+   *       description: "5-minute freshness with event-driven change detection"
+   *     },
+   *     {
+   *       term: "Full topology",
+   *       description: "Dependencies, relationships, and change history"
+   *     },
+   *     {
+   *       term: "GitOps workflows",
+   *       description: "Declarative configuration management"
+   *     }
+   *   ]}
+   * />
+   * \`\`\`
+   *
+   * @example Border-left variant (Architecture page style)
+   * \`\`\`tsx
+   * <BulletList
+   *   variant="border-left"
+   *   columns={2}
+   *   items={[
+   *     {
+   *       term: "Playbooks",
+   *       description: "Event-driven automation engine for Day 2 operations.",
+   *       color: "blue"
+   *     },
+   *     {
+   *       term: "Unified Catalog",
+   *       description: "Graph database storing infrastructure state.",
+   *       color: "yellow"
+   *     },
+   *     {
+   *       term: "Health Checks",
+   *       description: "Synthetic monitoring with 35+ check types.",
+   *       color: "green"
+   *     }
+   *   ]}
+   * />
+   * \`\`\`
+   *
+   * @example Gradient variant with groups (Component showcase style)
+   * \`\`\`tsx
+   * <BulletList
+   *   variant="gradient"
+   *   groups={[
+   *     {
+   *       title: "Data & Processing Layer",
+   *       items: [
+   *         {
+   *           term: "Unified Catalog",
+   *           description: "Graph database correlating infrastructure state.",
+   *           color: "yellow",
+   *           icon: "◉"
+   *         },
+   *         {
+   *           term: "PostgreSQL",
+   *           description: "Time-series and graph-enabled datastore.",
+   *           color: "blue",
+   *           icon: "◉"
+   *         }
+   *       ]
+   *     },
+   *     {
+   *       title: "Automation & Operations",
+   *       items: [
+   *         {
+   *           term: "Playbooks",
+   *           description: "Event-driven automation engine.",
+   *           color: "purple",
+   *           icon: "◉"
+   *         }
+   *       ]
+   *     }
+   *   ]}
+   * />
+   * \`\`\`
+   */
+  export function BulletList({ items, groups, variant, columns, size, termClass, descriptionClass, className }: BulletListProps): JSX.Element | null;
+
+  interface CTAButton {
+      label: string;
+      url: string;
+  }
+  interface CallToActionProps {
+      primary: CTAButton;
+      secondary?: CTAButton[];
+      audience?: 'enterprise' | 'technical' | 'security';
+  }
+  /**
+   * CallToAction Component (DS-25, DS-26)
+   *
+   * Displays a clear next step with primary CTA and optional secondary actions.
+   * Provides audience-specific default CTAs.
+   *
+   * DS-25: Must include clear next steps
+   * DS-26: Match CTA to audience
+   *
+   * Default CTAs by audience:
+   * - enterprise: "Request Enterprise Trial" + "Talk to Sales"
+   * - technical: "Start Free Trial" + "View Documentation"
+   * - security: "Download Security Whitepaper" + "Schedule Demo"
+   *
+   * Usage:
+   * <CallToAction
+   *   primary={{ label: "Start Free Trial", url: "https://flanksource.com/trial" }}
+   *   secondary={[
+   *     { label: "View Documentation", url: "https://docs.flanksource.com" }
+   *   ]}
+   *   audience="technical"
+   * />
+   */
+  export function CallToAction({ primary, secondary, audience }: CallToActionProps): JSX.Element;
+
+  /**
+   * CalloutBox Props
+   */
+  export interface CalloutBoxProps {
+      /** Content to display inside the callout */
+      children: React.ReactNode;
+      /** Visual variant of the callout */
+      variant?: 'info' | 'warning' | 'success' | 'default';
+      /** Optional title for the callout */
+      title?: string;
+      /** Optional CSS class name */
+      className?: string;
+  }
+  /**
+   * CalloutBox Component
+   *
+   * Displays an emphasized callout box with different visual styles.
+   * Useful for highlighting important information, warnings, or tips.
+   *
+   * @example
+   * \`\`\`tsx
+   * <CalloutBox variant="info" title="Important Note">
+   *   This is important information that users should know.
+   * </CalloutBox>
+   * \`\`\`
+   */
+  export function CalloutBox({ children, variant, title, className, }: CalloutBoxProps): JSX.Element;
+
+  interface Feature {
+      title: string;
+      description: string;
+      icon?: React.ReactNode;
+  }
+  interface CapabilitySectionProps {
+      outcome: string;
+      features: Feature[];
+      icon?: React.ReactNode;
+  }
+  /**
+   * CapabilitySection Component (DS-5, DS-17)
+   *
+   * @deprecated Use Section component with variant="hero" and BulletList children instead:
+   * <Section variant="hero" title="Reduce MTTR by 85%">
+   *   <BulletList items={[
+   *     { term: "Link alerts to changes", description: "..." },
+   *     { term: "Trace deployment history", description: "..." }
+   *   ]} />
+   * </Section>
+   *
+   * Displays a capability section leading with customer outcome, followed by features.
+   * Enforces outcome-first structure and bold lead-in formatting.
+   *
+   * DS-5: Lead with outcomes, not features
+   * DS-17: Use bold lead-in text followed by description
+   *
+   * Usage:
+   * <CapabilitySection
+   *   outcome="Reduce MTTR by 85% Through Automated Change Correlation"
+   *   features={[
+   *     {
+   *       title: "Link alerts to changes",
+   *       description: "Automatic correlation with CloudTrail, Git, and Kubernetes events"
+   *     },
+   *     {
+   *       title: "Trace deployment history",
+   *       description: "Show what deployed each resource and how to change it"
+   *     }
+   *   ]}
+   * />
+   */
+  export function CapabilitySection({ outcome, features, icon }: CapabilitySectionProps): JSX.Element;
+
+  export type TableSize = 'xs' | 'sm' | 'base' | 'md';
+  interface CompactTableRow {
+      label: string;
+      value: string | string[];
+  }
+  interface CompactTableProps {
+      data?: CompactTableRow[] | (string | React.ReactNode)[][];
+      variant?: 'compact' | 'inline' | 'reference';
+      title?: string;
+      className?: string;
+      columns?: string[];
+      size?: TableSize;
+  }
+  export function CompactTable({ data, variant, title, className, columns, size, }: CompactTableProps): JSX.Element;
+
+  interface ComparisonTableProps {
+      pros: string[];
+      cons: string[];
+      prosTitle?: string;
+      consTitle?: string;
+  }
+  /**
+   * ComparisonTable Component
+   *
+   * Displays a two-column comparison table with pros/cons or advantages/disadvantages.
+   * Based on the design from docs/index.mdx with checkmarks and crosses.
+   */
+  export function ComparisonTable({ pros, cons, prosTitle, consTitle }: ComparisonTableProps): JSX.Element;
+
+  export interface CountBadgeProps {
+      value?: number;
+      size?: 'xs' | 'sm' | 'md';
+      title?: string;
+      className?: string;
+      colorClass?: string;
+      roundedClass?: string;
+  }
+  export const CountBadge: React.NamedExoticComponent<CountBadgeProps>;
+
+  export interface PageConfig {
+      content: React.ReactNode;
+      title?: string;
+      product?: string;
+      margins?: boolean;
+  }
+  export interface DatasheetTemplateProps {
+      pages?: PageConfig[];
+      title?: string;
+      css?: string;
+      subtitle?: string;
+      PageComponent?: React.ComponentType<any>;
+      children?: React.ReactNode;
+  }
+  export function DatasheetTemplate({ pages, title, subtitle, css, PageComponent, children, }: DatasheetTemplateProps): JSX.Element;
+
+  interface Stat {
+      value: string;
+      label: string;
+      icon?: React.ComponentType<{
+          className?: string;
+          style?: React.CSSProperties;
+      }>;
+  }
+  interface BulletPoint {
+      term: string;
+      description?: string;
+      icon?: React.ComponentType<{
+          className?: string;
+          style?: React.CSSProperties;
+      }>;
+      color?: string;
+  }
+  interface FeatureLayoutProps {
+      title: string;
+      description: string;
+      bullets: BulletPoint[];
+      span?: number;
+      stats: Stat[];
+      children: React.ReactNode;
+      direction?: 'left-right' | 'right-left';
+      className?: string;
+  }
+  /**
+   * FeatureLayout Component
+   *
+   * Displays a feature comparison with title, description, bullets with icons/checkmarks,
+   * stats with outlined icons, and a content area (e.g., AI response example).
+   *
+   * Layout: Two-column grid with flexible direction (left-right or right-left)
+   * Left content: Title, description, bullets with custom icons/colors, stats with icons
+   * Right content: Children (typically QueryResponseExample or similar)
+   *
+   * Bullet Points:
+   * - Default: Green checkmark (✓)
+   * - Custom icon: Pass icon component and optional color
+   * - Icon size: 12pt, aligned left
+   *
+   * Usage:
+   * <FeatureLayout
+   *   title="Why Mission Control MCP Outperforms..."
+   *   description="Mission Control provides..."
+   *   bullets={[
+   *     { term: "No cluster access", description: "..." },
+   *     { term: "Custom icon", description: "...", icon: IconTime, color: "#3b82f6" }
+   *   ]}
+   *   stats={[
+   *     { value: "50x", label: "Token Reduction", icon: IconDecrease },
+   *     { value: "10x", label: "Faster", icon: IconSpeed }
+   *   ]}
+   *   direction="left-right"
+   * >
+   *   <QueryResponseExample ... />
+   * </FeatureLayout>
+   */
+  export function FeatureLayout({ title, description, bullets, stats, children, direction, span, className }: FeatureLayoutProps): JSX.Element;
+
+  interface FooterProps {
+      variant?: 'default' | 'compact' | 'minimal';
+      type?: PageType;
+      height?: number;
+      company?: string;
+      copyright?: string;
+      web?: string;
+      docs?: string;
+      email?: string;
+      phone?: string;
+      github?: string;
+      linkedin?: string;
+      children?: React.ReactNode;
+  }
+  export function Footer({ variant, type, height, company, copyright, web, docs, email, phone, github, linkedin, children, }: FooterProps): JSX.Element;
+
+  export interface GaugeProps {
+      value: number;
+      units?: string;
+      minValue: number;
+      maxValue: number;
+      width?: string;
+      arcColor?: string;
+      arcBgColor?: string;
+      label?: React.ReactNode;
+      showMinMax?: boolean;
+  }
+  export const Gauge: FC<GaugeProps>;
+
+  /**
+   * GlossaryTerm Interface
+   */
+  export interface GlossaryTerm {
+      /** Term name/abbreviation */
+      term: string;
+      /** Definition of the term */
+      definition: string;
+  }
+  /**
+   * RatingScaleItem Interface
+   */
+  export interface RatingScaleItem {
+      /** Star rating value */
+      stars: number;
+      /** Meaning/description of the rating */
+      meaning: string;
+  }
+  /**
+   * LegendItem Interface
+   */
+  export interface LegendItem {
+      /** Example value to display */
+      example: string;
+      /** Description of what the example represents */
+      description: string;
+  }
+  /**
+   * GlossarySection Interface
+   */
+  export interface GlossarySection {
+      /** Section title */
+      title: string;
+      /** Section content - can be terms, ratings, or legend items */
+      content: React.ReactNode;
+  }
+  /**
+   * Glossary Props
+   */
+  export interface GlossaryProps {
+      /** Main title for the glossary section */
+      title?: string;
+      /** Array of glossary terms */
+      terms?: GlossaryTerm[];
+      /** Array of rating scale items with visual component */
+      ratingScale?: RatingScaleItem[];
+      /** Component to render star ratings */
+      StarRatingComponent?: React.ComponentType<{
+          rating: number;
+      }>;
+      /** Array of legend items (format examples) */
+      legend?: LegendItem[];
+      /** Legend section title */
+      legendTitle?: string;
+      /** Custom sections to add */
+      customSections?: GlossarySection[];
+      /** Number of columns for layout (1 or 2) */
+      columns?: 1 | 2;
+      /** Optional CSS class name */
+      className?: string;
+  }
+  /**
+   * Glossary Component
+   *
+   * Displays a glossary section with terms, rating scales, and format legends.
+   * Flexible component that can display technical terms, rating explanations,
+   * and format examples in a multi-column layout.
+   *
+   * @example
+   * \`\`\`tsx
+   * <Glossary
+   *   title="Glossary & Legend"
+   *   terms={[
+   *     { term: 'KPI', definition: 'Key Performance Indicator' },
+   *     { term: 'TASH', definition: 'Time to Ascertain Service Health' }
+   *   ]}
+   *   ratingScale={[
+   *     { stars: 5, meaning: 'Excellent performance' },
+   *     { stars: 3, meaning: 'Average performance' }
+   *   ]}
+   *   StarRatingComponent={StarRating}
+   *   legend={[
+   *     { example: '5m 30s', description: 'Time duration' },
+   *     { example: '-87%', description: 'Percentage improvement' }
+   *   ]}
+   * />
+   * \`\`\`
+   */
+  export function Glossary({ title, terms, ratingScale, StarRatingComponent, legend, legendTitle, customSections, columns, className, }: GlossaryProps): JSX.Element;
+
+  export type PageType = 'first' | 'default' | 'last';
+  interface HeaderProps {
+      variant?: 'default' | 'solid' | 'minimal';
+      logo?: React.ReactNode;
+      title?: string;
+      subtitle?: string;
+      type?: PageType;
+      height?: number;
+      children?: React.ReactNode;
+  }
+  export function Header({ variant, logo, title, subtitle, type, height, children, }: HeaderProps): JSX.Element;
+
+  /**
+   * @deprecated Use LogoGrid instead. IntegrationGrid is an alias for backward compatibility.
+   */
+
+  import { KpiComparison } from '../types/poc';
+  interface KPITargetActualProps {
+      kpi: KpiComparison;
+      className?: string;
+  }
+  export function KPITargetActual({ kpi, className }: KPITargetActualProps): JSX.Element;
+
+  /**
+   * KPI Value Interface
+   */
+  export interface KpiValue {
+      /** Numeric value */
+      value: number | string;
+      /** Display formatted value */
+      displayValue: string;
+      /** Unit of measurement */
+      unit?: string;
+  }
+  /**
+   * KpiComparison Props
+   */
+  export interface KpiComparisonProps {
+      /** Before metric value */
+      before: KpiValue;
+      /** After metric value */
+      after: KpiValue;
+      /** Percentage improvement (positive = better) */
+      improvement?: number;
+      /** Label for the metric */
+      label?: string;
+      /** Format type for visualization */
+      format?: 'time' | 'percentage' | 'count' | 'custom';
+      /** Show summary in top right */
+      showSummary?: boolean;
+      /** Show improvement arrow/indicator */
+      showImprovement?: boolean;
+  }
+  /**
+   * KpiComparison Component
+   *
+   * Displays before/after KPI comparison with visual bar chart.
+   * Useful for showing performance improvements or metric changes.
+   *
+   * @example
+   * \`\`\`tsx
+   * <KpiComparison
+   *   label="Response Time"
+   *   before={{ value: 330, displayValue: "5m 30s" }}
+   *   after={{ value: 45, displayValue: "45s" }}
+   *   improvement={86.4}
+   *   format="time"
+   *   showSummary
+   * />
+   * \`\`\`
+   */
+  export function KpiComparison({ before, after, improvement, label, showSummary, showImprovement, }: KpiComparisonProps): JSX.Element;
+
+  interface FeatureSupport {
+      enabled: boolean;
+      url?: string;
+  }
+  interface Logo {
+      name: string;
+      title?: string;
+      icon?: string | React.ComponentType<{
+          className?: string;
+          title?: string;
+      }>;
+      icons?: Array<string | React.ComponentType<{
+          className?: string;
+          title?: string;
+      }>>;
+      logo?: string;
+      logoSvg?: string;
+      url?: string;
+      urlPath?: string;
+      health?: FeatureSupport | boolean;
+      configuration?: FeatureSupport | boolean;
+      change?: FeatureSupport | boolean;
+      playbooks?: FeatureSupport | boolean;
+  }
+  interface LogoGridProps {
+      logos: Logo[];
+      viewAllUrl?: string;
+      title?: string;
+      variant?: 'default' | 'compact' | 'table';
+      baseDocsUrl?: string;
+      size?: TableSize;
+  }
+  export function LogoGrid({ logos, viewAllUrl, title, variant, baseDocsUrl, size, }: LogoGridProps): JSX.Element;
+
+  /**
+   * Metric Interface
+   * Represents a single metric value with label
+   */
+  export interface Metric {
+      /** Numeric or string value to display */
+      value: string | number;
+      /** Label/description of the metric */
+      label: string;
+      /** Optional icon component */
+      icon?: React.ComponentType<{
+          className?: string;
+      }>;
+      /** Optional color variant for value text */
+      valueColor?: 'blue' | 'green' | 'red' | 'gray' | 'yellow';
+  }
+  /**
+   * MetricGrid Props
+   */
+  export interface MetricGridProps {
+      /** Array of metrics to display */
+      metrics: Metric[];
+      /** Number of columns in grid (2-4) */
+      columns?: 2 | 3 | 4;
+      /** Optional CSS class name */
+      className?: string;
+  }
+  /**
+   * MetricGrid Component
+   *
+   * Displays a grid of metrics with consistent styling.
+   * Commonly used for dashboard-style metric displays.
+   *
+   * @example
+   * \`\`\`tsx
+   * <MetricGrid
+   *   columns={3}
+   *   metrics={[
+   *     { value: '42', label: 'Total Issues' },
+   *     { value: '98%', label: 'Coverage' },
+   *     { value: '5ms', label: 'Response Time' }
+   *   ]}
+   * />
+   * \`\`\`
+   */
+  export function MetricGrid({ metrics, columns, className }: MetricGridProps): JSX.Element;
+
+  /**
+   * KPI Value Interface
+   */
+  export interface KpiValue {
+      /** Numeric or string value */
+      value: number;
+      /** Optional unit of measurement */
+      unit?: string;
+  }
+  /**
+   * MetricHeaderProps - Base Props
+   */
+  interface MetricHeaderBaseProps {
+      /** Metric title/label */
+      title: string;
+      /** Optional subtitle/description */
+      subtitle?: string;
+      /** Optional CSS class name */
+      className?: string;
+  }
+  interface MetricHeaderGaugeProps extends MetricHeaderBaseProps {
+      variant: 'gauge';
+      score: number;
+      maxScore?: number;
+  }
+  /**
+   * MetricHeaderProps - Comparison Variant
+   */
+  interface MetricHeaderComparisonProps extends MetricHeaderBaseProps {
+      /** Variant type */
+      variant: 'comparison';
+      /** Before measurement */
+      before: KpiValue;
+      /** After measurement */
+      after: KpiValue;
+      /** Percentage improvement */
+      improvement?: number;
+      /** Show visual bars */
+      showBars?: boolean;
+      /** Optional comparison component */
+      ComparisonComponent?: React.ComponentType<{
+          before: KpiValue;
+          after: KpiValue;
+          improvement?: number;
+      }>;
+  }
+  export type MetricHeaderProps = MetricHeaderGaugeProps | MetricHeaderComparisonProps;
+  /**
+   * MetricHeader Component
+   *
+   * Displays a metric header with either a gauge (score) or comparison (before/after) variant.
+   * Used for highlighting key metrics at the top of sections.
+   *
+   * @example Gauge Variant
+   * \`\`\`tsx
+   * <MetricHeader
+   *   variant="gauge"
+   *   title="Security Score"
+   *   subtitle="OpenSSF Scorecard"
+   *   score={8.5}
+   *   size="lg"
+   *   GaugeComponent={ScoreGauge}
+   * />
+   * \`\`\`
+   *
+   * @example Comparison Variant
+   * \`\`\`tsx
+   * <MetricHeader
+   *   variant="comparison"
+   *   title="Time to Ascertain Service Health"
+   *   subtitle="Average time to gather complete service health picture"
+   *   before={{ value: 330, displayValue: "5m 30s" }}
+   *   after={{ value: 45, displayValue: "45s" }}
+   *   improvement={86.4}
+   *   showBars
+   * />
+   * \`\`\`
+   */
+  export function MetricHeader(props: MetricHeaderProps): JSX.Element | null;
+
+  interface Metric {
+      value: string;
+      label: string;
+      icon?: string | React.ComponentType<{
+          className?: string;
+          style?: React.CSSProperties;
+      }>;
+  }
+  interface MetricsCalloutProps {
+      metrics: Metric[];
+      variant?: 'primary' | 'secondary';
+  }
+  /**
+   * MetricsCallout Component (DS-14)
+   *
+   * Displays 3-5 key metrics in a visually prominent boxed layout.
+   * Metrics should use percentages, time units, or counts with proper formatting.
+   *
+   * Formatting rules (DS-14):
+   * - Percentages: Bold, 14-16pt, brand color
+   * - Time metrics: Include units (hours, minutes, days)
+   * - Large numbers: Use thousands separator (45,234)
+   *
+   * Icon support:
+   * - Unplugin icons: Pass React component directly (e.g., IconTime from '~icons/ion/time-outline')
+   * - Iconify icons: Pass string like "ion:alert-circle-outline"
+   * - Flanksource icons: Pass string like "postgres" or "kubernetes"
+   * - Emoji/text: Pass any string like "⏱️" or "✓"
+   *
+   * Usage:
+   * <MetricsCallout
+   *   metrics={[
+   *     { value: "85%", label: "Reduction in MTTR" },
+   *     { value: "70%", label: "Less Alert Noise" },
+   *     { value: "<1 Hour", label: "Time to Value", icon: IconTime }
+   *   ]}
+   * />
+   */
+  export function MetricsCallout({ metrics, variant }: MetricsCalloutProps): JSX.Element;
+
+  export type PageSize = 'a4' | 'a3' | 'letter' | 'legal' | 'fhd' | 'qhd' | 'wqhd' | '4k' | '5k' | '16k';
+  interface PageMargins {
+      top?: number;
+      right?: number;
+      bottom?: number;
+      left?: number;
+  }
+  interface PageProps {
+      children: React.ReactNode;
+      title?: string;
+      product?: string;
+      className?: string;
+      pageSize?: PageSize;
+      margins?: PageMargins;
+      watermark?: string;
+      type?: PageType;
+  }
+  export function Page({ children, title, product, className, pageSize, margins, watermark, type, }: PageProps): JSX.Element;
+
+  /**
+   * PageBreak Component
+   *
+   * Inserts a page break for PDF generation and print layouts.
+   * Uses CSS page-break-after property to ensure content after this component
+   * starts on a new page.
+   *
+   * @example
+   * \`\`\`tsx
+   * <Page>
+   *   <Content1 />
+   * </Page>
+   * <PageBreak />
+   * <Page>
+   *   <Content2 />
+   * </Page>
+   * \`\`\`
+   */
+  export function PageBreak(): JSX.Element;
+
+  /**
+   * ProgressBar Props
+   */
+  export interface ProgressBarProps {
+      /** Title/label displayed on the left */
+      title: string;
+      /** Percentage value (0-100) */
+      percentage: number;
+      /** Optional subtitle/description below title */
+      subtitle?: string;
+      /** Optional display value instead of percentage */
+      displayValue?: string;
+      /** Color variant for the progress bar */
+      variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'gray';
+      /** Size of the progress bar */
+      size?: 'sm' | 'md' | 'lg';
+      /** Show percentage value inside the bar */
+      showPercentageInBar?: boolean;
+      /** Show percentage value on the right side */
+      showPercentageLabel?: boolean;
+      /** Optional CSS class name */
+      className?: string;
+      choldren?: React.ReactNode;
+  }
+  /**
+   * ProgressBar Component
+   *
+   * Displays a horizontal progress bar with title on the left and optional percentage display.
+   * Useful for showing completion status, scores, or any percentage-based metric.
+   *
+   * @example Basic Usage
+   * \`\`\`tsx
+   * <ProgressBar
+   *   title="Task Completion"
+   *   percentage={75}
+   * />
+   * \`\`\`
+   *
+   * @example With Subtitle
+   * \`\`\`tsx
+   * <ProgressBar
+   *   title="Security Score"
+   *   subtitle="OpenSSF Scorecard"
+   *   percentage={85}
+   *   variant="success"
+   *   size="lg"
+   * />
+   * \`\`\`
+   *
+   * @example Multiple Progress Bars
+   * \`\`\`tsx
+   * <div className="space-y-3">
+   *   <ProgressBar title="CPU Usage" percentage={65} variant="info" />
+   *   <ProgressBar title="Memory Usage" percentage={82} variant="warning" />
+   *   <ProgressBar title="Disk Usage" percentage={45} variant="success" />
+   * </div>
+   * \`\`\`
+   */
+  export function ProgressBar({ title, percentage, displayValue, subtitle, variant, size, showPercentageInBar, showPercentageLabel, className, children }: ProgressBarProps): JSX.Element;
+
+  interface ProjectSummaryCardProps {
+      icon?: React.ComponentType<{
+          className?: string;
+      }>;
+      name: string;
+      description: string;
+      security: any;
+      githubUrl: string;
+      className?: string;
+  }
+  /**
+   * Compact summary card for additional projects showing key security metrics
+   */
+  export function ProjectSummaryCard({ icon: Icon, name, description, security, githubUrl, className }: ProjectSummaryCardProps): JSX.Element;
+
+  export interface MCPToolCall {
+      tool: string;
+      description: string;
+      result?: string;
+  }
+  export interface QueryResponseChatProps {
+      userQuery: string;
+      mcpTools?: MCPToolCall[];
+      aiResponse: string;
+      compact?: boolean;
+  }
+  export function QueryResponseChat({ userQuery, mcpTools, aiResponse, compact }: QueryResponseChatProps): JSX.Element;
+
+  export interface MCPToolCall {
+      tool: string;
+      description: string;
+      result?: string;
+  }
+  interface QueryResponseExampleProps {
+      userQuery: string;
+      mcpTools?: MCPToolCall[];
+      aiResponse: string;
+      variant?: 'chat' | 'terminal' | 'both';
+      compact?: boolean;
+      title?: string;
+  }
+  /**
+   * QueryResponseExample Component
+   *
+   * Wrapper component for displaying AI query/response interactions.
+   * Supports multiple visualization styles: chat bubbles, terminal, or both.
+   * Can show or hide MCP tool calls via compact mode.
+   *
+   * Usage:
+   * <QueryResponseExample
+   *   title="Example: Incident Troubleshooting"
+   *   userQuery="Why is the payment-service pod crashing?"
+   *   mcpTools={[
+   *     { tool: "search_catalog", description: "Found 3 replicas, 2 in CrashLoopBackOff" },
+   *     { tool: "query_health_checks", description: "HTTP check failing with 500 errors" },
+   *     { tool: "search_catalog_changes", description: "ConfigMap updated 18 minutes ago" }
+   *   ]}
+   *   aiResponse="The payment-service pods are crashing because the ConfigMap update changed the database connection pool size from 10 to 100, exceeding the database's max_connections limit."
+   *   variant="both"
+   *   compact={false}
+   * />
+   */
+  export function QueryResponseExample({ userQuery, mcpTools, aiResponse, variant, compact, title }: QueryResponseExampleProps): JSX.Element;
+
+  interface MCPToolCall {
+      tool: string;
+      description: string;
+      result?: string;
+  }
+  interface QueryResponseTerminalProps {
+      userQuery: string;
+      mcpTools?: MCPToolCall[];
+      aiResponse: string;
+      compact?: boolean;
+  }
+  /**
+   * QueryResponseTerminal Component
+   *
+   * Displays AI query/response interaction in Claude Code terminal style.
+   * Uses monospace font with dark background (matching Claude Code's theme).
+   * User queries prefixed with command prompt.
+   * MCP tool calls shown with execution indicators.
+   * Styled to match Claude Code's integrated terminal aesthetic.
+   *
+   * Usage:
+   * <QueryResponseTerminal
+   *   userQuery="Why is the payment-service pod crashing?"
+   *   mcpTools={[
+   *     { tool: "search_catalog", description: "Found 3 replicas, 2 in CrashLoopBackOff" },
+   *     { tool: "get_check_status", description: "HTTP check failing with 500 errors" }
+   *   ]}
+   *   aiResponse="The payment-service pods are crashing because..."
+   *   compact={false}
+   * />
+   */
+  export function QueryResponseTerminal({ userQuery, mcpTools, aiResponse, compact }: QueryResponseTerminalProps): JSX.Element;
+
+  import { CategoryRating } from '../types/poc';
+  interface RatingCategoryInputProps {
+      rating: CategoryRating;
+      className?: string;
+  }
+  export function RatingCategoryInput({ rating, className }: RatingCategoryInputProps): JSX.Element;
+
+  interface ScoreGaugeProps {
+      score: number;
+      label?: string;
+      size?: 'sm' | 'md' | 'lg';
+      className?: string;
+      showMinMax?: boolean;
+  }
+  /**
+   * Circular gauge displaying OpenSSF Scorecard score (0-10)
+   * Color-coded: 0-4 (red), 4-7 (yellow), 7-10 (green)
+   */
+  export function ScoreGauge({ score, label, size, className, showMinMax }: ScoreGaugeProps): JSX.Element;
+
+  interface SectionProps {
+      title?: string;
+      subtitle?: string;
+      icon?: React.ComponentType<{
+          className?: string;
+          style?: React.CSSProperties;
+      }>;
+      description?: string;
+      metric?: React.ReactNode;
+      variant?: 'hero' | 'card-grid' | 'two-column' | 'two-column-reverse' | 'metric-grid' | 'summary-grid' | 'dashboard';
+      size?: 'sm' | 'md' | 'lg';
+      color?: string;
+      className?: string;
+      span?: number;
+      columns?: 2 | 3 | 4;
+      layout?: '9-3' | '10-2' | '8-4' | '6-6';
+      children?: React.ReactNode;
+  }
+  /**
+   * Section Component
+   *
+   * Unified component for various section layouts in datasheets.
+   * Replaces ValueProposition and CapabilitySection with flexible variant system.
+   *
+   * Variants:
+   * - 'hero': Single-column full-width layout for headers and value propositions
+   * - 'two-column': Left content + right metric sidebar (configurable span or layout)
+   * - 'two-column-reverse': Right content + left metric sidebar
+   * - 'card-grid': Header with grid of cards below (2 columns)
+   * - 'metric-grid': Header with grid of metric cards below (2-4 columns)
+   * - 'summary-grid': Header with grid of entity/project cards below (2-3 columns)
+   * - 'dashboard': Title/subtitle left, metric right, description/children below
+   *
+   * Size variants control typography and spacing:
+   * - sm: 12pt title, 2mm gaps
+   * - md: 14pt title, 4mm gaps (default)
+   * - lg: 18pt title, 6mm gaps
+   *
+   * Layout shortcuts for two-column variants:
+   * - '9-3': 9 columns content, 3 columns metric
+   * - '10-2': 10 columns content, 2 columns metric
+   * - '8-4': 8 columns content, 4 columns metric
+   * - '6-6': 6 columns content, 6 columns metric
+   *
+   * Usage:
+   * <Section
+   *   variant="metric-grid"
+   *   columns={3}
+   *   title="Platform Metrics"
+   *   description="Current system performance"
+   * >
+   *   <StatCard value="99.9%" label="Uptime" />
+   *   <StatCard value="42" label="Services" />
+   *   <StatCard value="5ms" label="Latency" />
+   * </Section>
+   */
+  export function Section({ title, subtitle, icon: IconComponent, description, metric, variant, size, color, className, span, columns, layout, children }: SectionProps): JSX.Element;
+
+  interface SecurityCheck {
+      name: string;
+      score: number;
+      reason: string;
+      details?: string[];
+      documentation?: {
+          url: string;
+      };
+  }
+  interface SecurityChecksTableProps {
+      checks: SecurityCheck[];
+      className?: string;
+      size?: TableSize;
+  }
+  export function SecurityChecksTable({ checks, className, size, }: SecurityChecksTableProps): JSX.Element;
+
+  interface SeverityStatCardProps {
+      color: 'red' | 'orange' | 'yellow' | 'blue' | 'green' | 'gray';
+      value: number;
+      label: string;
+      trend?: {
+          added: number;
+          closed: number;
+          delta: number;
+      };
+      downIsGood?: boolean;
+      className?: string;
+  }
+  /**
+   * Severity stat card component with optional trend indicator
+   */
+  export function SeverityStatCard({ color, value, label, trend, downIsGood, className }: SeverityStatCardProps): JSX.Element;
+
+  interface CustomerLogo {
+      name: string;
+      logo: string;
+  }
+  interface Testimonial {
+      quote: string;
+      attribution: string;
+      metric?: string;
+  }
+  interface SocialProofProps {
+      logos?: CustomerLogo[];
+      testimonial?: Testimonial;
+  }
+  /**
+   * SocialProof Component (DS-24)
+   *
+   * Displays customer logos or a brief testimonial.
+   * Choose ONE format: logo bar OR testimonial, not both.
+   *
+   * DS-24: Include one of:
+   * - Customer logo bar (6-8 logos maximum)
+   * - Brief customer quote (1-2 sentences)
+   * - Case study reference with metric
+   *
+   * MUST NOT include:
+   * - Long testimonials
+   * - More than one quote
+   * - Generic quotes without specific outcomes
+   *
+   * Usage (Logos):
+   * <SocialProof
+   *   logos={[
+   *     { name: "Acme Corp", logo: "/logos/acme.svg" },
+   *     { name: "Globex", logo: "/logos/globex.svg" }
+   *   ]}
+   * />
+   *
+   * Usage (Testimonial):
+   * <SocialProof
+   *   testimonial={{
+   *     quote: "We reduced our MTTR from 4 hours to 30 minutes using Mission Control.",
+   *     attribution: "John Doe, CTO at Acme Corp",
+   *     metric: "87.5% reduction in MTTR"
+   *   }}
+   * />
+   */
+  export function SocialProof({ logos, testimonial }: SocialProofProps): JSX.Element;
+
+  interface Specification {
+      category: string;
+      value: string | string[];
+  }
+  interface SpecificationTableProps {
+      title?: string;
+      specifications: Specification[];
+      className?: string;
+      size?: TableSize;
+  }
+  export function SpecificationTable({ title, specifications, className, size }: SpecificationTableProps): JSX.Element;
+
+  type StarRating = 1 | 2 | 3 | 4 | 5;
+  interface StarRatingProps {
+      mode?: 'display' | 'interactive';
+      value: StarRating;
+      onChange?: (rating: StarRating) => void;
+      size?: 'sm' | 'md' | 'lg';
+      showLabel?: boolean;
+      className?: string;
+  }
+  export function StarRating({ mode, value, onChange, size, showLabel, className, }: StarRatingProps): JSX.Element;
+
+  interface StatCardProps {
+      value: UnitValue | string | number;
+      compareFrom?: UnitValue | string | number;
+      label: string;
+      icon?: React.ComponentType<{
+          className?: string;
+          style?: React.CSSProperties;
+      }>;
+      variant?: 'card' | 'badge' | 'hero' | 'bordered' | 'icon-heavy' | 'left-aligned' | 'metric';
+      compareVariant?: 'trendline' | 'up-down' | 'before-after' | 'before-after-progress';
+      size?: 'sm' | 'md' | 'lg';
+      valueClassName?: string;
+      iconClassName?: string;
+      iconColor?: string;
+      valueColor?: string;
+      sublabel?: React.ReactNode;
+      sublabelClassName?: string;
+      conditionalStyles?: ConditionalStyle[];
+      color?: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'gray';
+  }
+  export type ConditionalStyle = ConditionalStyleFunction | 'red-green' | 'green-red';
+  export interface ConditionalStyleFunction {
+      condition: (value: UnitValue) => boolean;
+      classes: string;
+  }
+  export type TimeUnit = 'milliseconds' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years';
+  export type DataUnit = 'bytes' | 'kilobytes' | 'megabytes' | 'gigabytes' | 'terabytes';
+  export type NumberUnit = 'none' | 'percent' | 'currency';
+  export type Unit = TimeUnit | DataUnit | NumberUnit;
+  export type UnitValue = TimeUnitValue | DataUnitValue | NumberUnitValue;
+  export class TimeUnitValue {
+      value: number;
+      unit: TimeUnit;
+      constructor(value: number, unit: TimeUnit);
+      toUnit(targetUnit: TimeUnit): TimeUnitValue;
+      seconds(): number;
+      toString(): string;
+  }
+  export class DataUnitValue {
+      value: number;
+      unit: DataUnit;
+      constructor(value: number, unit: DataUnit);
+      toUnit(targetUnit: DataUnit): DataUnitValue;
+      bytes(): number;
+      toString(): string;
+  }
+  export class NumberUnitValue {
+      value: number;
+      unit: NumberUnit;
+      constructor(value: number, unit: NumberUnit);
+      toString(): string;
+  }
+  /**
+   * StatCard Component
+   *
+   * Displays a metric with optional icon, value, label, and sublabel.
+   * Supports multiple styling variants for different use cases.
+   *
+   * Variants:
+   * - 'card': Clean unbordered card style (40mm × 40mm, outlined icon)
+   * - 'badge': Compact inline badge (light blue background)
+   * - 'hero': Large emphasis metric (36-48pt values)
+   * - 'bordered': Bordered card variant (for when borders are needed)
+   * - 'icon-heavy': Large icon with overlaid value badge
+   * - 'left-aligned': Icon on left, value and label stacked on right
+   * - 'metric': Summary metric card with colored background and border
+   *
+   * Compare Variants (when compareFrom is provided):
+   * - 'trendline': Show trend icon and delta
+   * - 'up-down': Show up/down arrows with conditional coloring
+   * - 'before-after': Show "X → Y" format
+   * - 'before-after-progress': Show before → after with progress bar
+   *
+   * Usage:
+   * <StatCard
+   *   value={150}
+   *   compareFrom={100}
+   *   compareVariant="up-down"
+   *   label="Total Credits"
+   *   icon={MyIconComponent}
+   *   variant="card"
+   *   conditionalStyles={['red-green']}
+   * />
+   */
+  export function StatCard({ value, label, icon: IconComponent, variant, size, iconColor, valueColor, sublabel, compareFrom, compareVariant, color, conditionalStyles, valueClassName, iconClassName, sublabelClassName }: StatCardProps): JSX.Element;
+
+  export interface StatusProps {
+      good?: boolean;
+      mixed?: boolean;
+      status?: string;
+      className?: string;
+      statusText?: string;
+      hideText?: boolean;
+  }
+  export function Status({ status, statusText, good, mixed, className, hideText }: StatusProps): JSX.Element | null;
+
+  export interface Step {
+      label: string;
+      description?: string;
+  }
+  interface StepsProps {
+      steps: Step[];
+      currentStep: number;
+      className?: string;
+  }
+  export function Steps({ steps, currentStep, className }: StepsProps): JSX.Element;
+
+  interface SyntaxHighlighterProps {
+      code: string;
+      language?: string;
+      title?: string;
+      showLineNumbers?: boolean;
+      className?: string;
+  }
+  /**
+   * SyntaxHighlighter component using Shiki
+   *
+   * Pre-renders syntax-highlighted code blocks during SSR build.
+   * Uses Shiki to generate static HTML with embedded styles.
+   *
+   * @param code - The code to highlight
+   * @param language - Programming language (default: 'yaml')
+   * @param title - Optional title displayed above code block
+   * @param showLineNumbers - Show line numbers (default: false)
+   * @param className - Additional CSS classes
+   */
+  export function SyntaxHighlighter({ code, language, title, showLineNumbers, className }: SyntaxHighlighterProps): JSX.Element;
+
+  import { TaskSummary } from '../types/billing';
+  interface TaskSummarySectionProps {
+      tasks: TaskSummary[];
+  }
+  export function TaskSummarySection({ tasks }: TaskSummarySectionProps): JSX.Element | null;
+
+  interface TerminalOutputProps {
+      command: string;
+      children?: React.ReactNode;
+  }
+  export function TerminalOutput({ command, children }: TerminalOutputProps): JSX.Element;
+
+  interface TwoColumnSectionProps {
+      leftContent: React.ReactNode;
+      rightContent: React.ReactNode;
+      className?: string;
+  }
+  /**
+   * TwoColumnSection Component (DS-2)
+   *
+   * Multi-column layout for content below the fold.
+   * Automatically stacks on small screens for responsive design.
+   *
+   * DS-2: Single-column layout above fold, multi-column below fold
+   *
+   * Usage:
+   * <TwoColumnSection
+   *   leftContent={<CapabilitySection ... />}
+   *   rightContent={<CapabilitySection ... />}
+   * />
+   */
+  export function TwoColumnSection({ leftContent, rightContent, className }: TwoColumnSectionProps): JSX.Element;
+
+  interface ValuePropositionProps {
+      tagline: string;
+      description: string;
+      children?: React.ReactNode;
+  }
+  /**
+   * ValueProposition Component (DS-1, DS-2)
+   *
+   * @deprecated Use Section component with variant="hero" instead:
+   * <Section variant="hero" size="lg" title="..." description="...">
+   *   <MetricsCallout metrics={[...]} />
+   * </Section>
+   *
+   * Single-column hero section displaying product tagline and core value proposition.
+   * Must appear above the fold, before any multi-column content.
+   *
+   * Usage:
+   * <ValueProposition
+   *   tagline="Single Source of Truth for Cloud & Kubernetes Infrastructure"
+   *   description="Teams reduce MTTR by 85% and increase deployment frequency 3x..."
+   * >
+   *   <MetricsCallout metrics={[...]} />
+   * </ValueProposition>
+   */
+  export function ValueProposition({ tagline, description, children }: ValuePropositionProps): JSX.Element;
+
+  interface VulnerabilityData {
+      dependabot: any[];
+      codeScanning: any[];
+      secretScanning: any[];
+      totalCount: number;
+      severity: {
+          critical: number;
+          high: number;
+          medium: number;
+          low: number;
+      };
+      trend?: {
+          recentlyAdded: number;
+          recentlyClosed: number;
+          recentlyClosedDependabot: number;
+          recentlyClosedCodeScanning: number;
+          totalClosed: number;
+          addedBySeverity: {
+              critical: number;
+              high: number;
+              medium: number;
+              low: number;
+          };
+          closedBySeverity: {
+              critical: number;
+              high: number;
+              medium: number;
+              low: number;
+          };
+          deltaBySeverity: {
+              critical: number;
+              high: number;
+              medium: number;
+              low: number;
+          };
+      };
+      error?: string;
+  }
+  interface VulnerabilityBreakdownProps {
+      data: VulnerabilityData;
+      projectName: string;
+      githubUrl: string;
+      className?: string;
+  }
+  /**
+   * Displays GitHub security alerts breakdown with severity categorization
+   */
+  export function VulnerabilityBreakdown({ data, projectName, githubUrl, className }: VulnerabilityBreakdownProps): JSX.Element;
+
+}
+`;
diff --git a/cli/src/server/playground-html.ts b/cli/src/server/playground-html.ts
new file mode 100644
index 0000000..cbf4522
--- /dev/null
+++ b/cli/src/server/playground-html.ts
@@ -0,0 +1,777 @@
+const HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Facet Playground</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, -apple-system, sans-serif; height: 100vh; display: flex; flex-direction: column; background: #1e1e1e; color: #ccc; }
+    .toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #2d2d2d; border-bottom: 1px solid #404040; flex-shrink: 0; }
+    .toolbar label { font-size: 13px; }
+    .toolbar select, .toolbar button { font-size: 13px; padding: 4px 8px; border-radius: 4px; border: 1px solid #555; background: #3c3c3c; color: #ccc; cursor: pointer; }
+    .toolbar button:hover { background: #505050; }
+    .toolbar .sep { width: 1px; height: 20px; background: #555; }
+    .toolbar .spacer { flex: 1; }
+    .toolbar .status { font-size: 12px; color: #888; }
+    .toolbar input[type="checkbox"] { margin-right: 2px; }
+    .toolbar input[type="text"] { font-size: 13px; padding: 4px 8px; border-radius: 4px; border: 1px solid #555; background: #3c3c3c; color: #ccc; width: 100px; }
+    .toolbar input[type="number"] { font-size: 13px; padding: 4px 4px; border-radius: 4px; border: 1px solid #555; background: #3c3c3c; color: #ccc; width: 42px; text-align: center; }
+    .margin-group { display: flex; align-items: center; gap: 2px; font-size: 12px; color: #888; }
+    .margin-group span { color: #666; }
+    .main { display: flex; flex: 1; min-height: 0; }
+    .editor-panel { display: flex; flex-direction: column; width: 50%; border-right: 1px solid #404040; }
+    .editor-tabs { display: flex; background: #252526; border-bottom: 1px solid #404040; flex-shrink: 0; }
+    .editor-tabs button { padding: 6px 16px; font-size: 13px; background: none; border: none; color: #888; cursor: pointer; border-bottom: 2px solid transparent; }
+    .editor-tabs button.active { color: #fff; border-bottom-color: #2563eb; }
+    #template-editor, #data-editor, #deps-editor, #header-editor, #footer-editor { flex: 1; min-height: 0; }
+    .preview-panel { flex: 1; display: flex; flex-direction: column; background: #fff; min-height: 0; }
+    .preview-panel iframe { flex: 1; border: none; width: 100%; }
+    .preview-panel .error { padding: 16px; color: #dc2626; font-family: monospace; font-size: 13px; white-space: pre-wrap; background: #fef2f2; flex: 1; overflow: auto; }
+    .preview-panel .empty { display: flex; align-items: center; justify-content: center; flex: 1; color: #888; font-size: 14px; background: #f5f5f5; }
+
+    /* Split render button */
+    .render-group { display: flex; align-items: stretch; position: relative; }
+    .render-group .render-main { background: #2563eb; color: #fff; border: 1px solid #2563eb; font-weight: 600; border-radius: 4px 0 0 4px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
+    .render-group .render-main:hover { background: #1d4ed8; }
+    .render-group .render-main:disabled { opacity: 0.6; cursor: not-allowed; }
+    .render-group .render-drop { background: #2563eb; color: #fff; border: 1px solid #1d4ed8; border-left: 1px solid rgba(255,255,255,0.2); border-radius: 0 4px 4px 0; padding: 4px 6px; cursor: pointer; font-size: 10px; display: flex; align-items: center; }
+    .render-group .render-drop:hover { background: #1d4ed8; }
+    .render-group .render-drop:disabled { opacity: 0.6; cursor: not-allowed; }
+    .render-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: #3c3c3c; border: 1px solid #555; border-radius: 6px; overflow: hidden; z-index: 100; min-width: 140px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
+    .render-menu.open { display: block; }
+    .render-menu button { display: block; width: 100%; text-align: left; padding: 8px 14px; font-size: 13px; background: none; border: none; color: #ccc; cursor: pointer; }
+    .render-menu button:hover { background: #505050; }
+    .render-menu button .check { color: #2563eb; margin-right: 6px; font-weight: bold; }
+
+    /* Logs button */
+    .logs-btn { position: relative; }
+    .logs-btn .dot { position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; display: none; }
+    .logs-btn .dot.error { background: #dc2626; }
+
+    /* Log dialog */
+    .log-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
+    .log-overlay.open { display: flex; }
+    .log-dialog { background: #1a1a2e; border: 1px solid #404040; border-radius: 10px; width: 640px; max-width: 90vw; max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.6); overflow: hidden; transition: width 0.2s ease, max-height 0.2s ease; }
+    .log-dialog.has-errors { width: 820px; max-height: 85vh; }
+    .log-dialog-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #16213e; border-bottom: 1px solid #2a2a4a; flex-shrink: 0; }
+    .log-dialog-header .title { font-size: 13px; font-weight: 600; color: #8892b0; text-transform: uppercase; letter-spacing: 0.5px; }
+    .log-dialog-header .badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #2563eb; color: #fff; min-width: 18px; text-align: center; }
+    .log-dialog-header .badge.error { background: #dc2626; }
+    .log-dialog-header .badge.done { background: #16a34a; }
+    .log-dialog-header .spacer { flex: 1; }
+    .log-dialog-header .close-btn { background: none; border: none; color: #555; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
+    .log-dialog-header .close-btn:hover { color: #aaa; }
+    .log-dialog-body { flex: 1; overflow-y: auto; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: 12px; padding: 4px 0; }
+    .log-dialog-footer { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid #2a2a4a; background: #16213e; flex-shrink: 0; }
+    .log-dialog-footer .status-text { font-size: 12px; color: #888; flex: 1; }
+
+    .log-entry { padding: 2px 16px; display: flex; gap: 8px; line-height: 1.6; border-bottom: 1px solid rgba(255,255,255,0.03); }
+    .log-entry:hover { background: rgba(255,255,255,0.02); }
+    .log-time { color: #4a5568; min-width: 52px; flex-shrink: 0; }
+    .log-stage { min-width: 100px; flex-shrink: 0; font-weight: 500; }
+    .log-msg { color: #a0aec0; flex: 1; }
+
+    /* Error block styling */
+    .log-error-block { margin: 8px 16px; padding: 12px 14px; background: #1c1017; border: 1px solid #5c2020; border-radius: 6px; border-left: 3px solid #f87171; }
+    .log-error-block .error-title { color: #f87171; font-weight: 600; font-size: 12px; margin-bottom: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
+    .log-error-block .error-location { color: #60a5fa; font-size: 11px; margin-bottom: 8px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
+    .log-error-block .error-code { background: #0d1117; border: 1px solid #30363d; border-radius: 4px; padding: 8px 10px; margin: 6px 0; font-size: 12px; line-height: 1.5; white-space: pre; overflow-x: auto; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
+    .log-error-block .error-code .line-num { color: #484f58; margin-right: 12px; user-select: none; }
+    .log-error-block .error-code .line-error { color: #f87171; }
+    .log-error-block .error-code .line-normal { color: #a0aec0; }
+    .log-error-block .error-code .caret-line { color: #f87171; font-weight: bold; }
+    .log-error-block .error-detail { color: #d4a0a0; font-size: 12px; white-space: pre-wrap; word-break: break-word; margin-top: 6px; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
+    .log-stage.parsing { color: #a78bfa; }
+    .log-stage.resolving { color: #60a5fa; }
+    .log-stage.installing { color: #f59e0b; }
+    .log-stage.building { color: #34d399; }
+    .log-stage.tailwind { color: #2dd4bf; }
+    .log-stage.rendering-html { color: #818cf8; }
+    .log-stage.rendering-pdf { color: #f472b6; }
+    .log-stage.uploading { color: #fb923c; }
+    .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; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  </style>
+</head>
+<body>
+  <div class="toolbar">
+    <strong style="color:#fff;font-size:14px;">Facet Playground</strong>
+    <div class="sep"></div>
+    <label>Page Size:
+      <select id="pageSize">
+        <option value="">Default</option>
+        <option value="A4">A4</option>
+        <option value="Letter">Letter</option>
+        <option value="A3">A3</option>
+        <option value="Legal">Legal</option>
+        <option value="Tabloid">Tabloid</option>
+      </select>
+    </label>
+    <label><input type="checkbox" id="landscape"> Landscape</label>
+    <label><input type="checkbox" id="debug"> Debug</label>
+    <div class="sep"></div>
+    <div class="margin-group">
+      Margins<span>(mm):</span>
+      <input type="number" id="marginTop" placeholder="T" min="0" value="10" title="Top margin (mm)">
+      <input type="number" id="marginBottom" placeholder="B" min="0" value="10" title="Bottom margin (mm)">
+      <input type="number" id="marginLeft" placeholder="L" min="0" value="10" title="Left margin (mm)">
+      <input type="number" id="marginRight" placeholder="R" min="0" value="10" title="Right margin (mm)">
+    </div>
+    <div class="spacer"></div>
+    <button class="logs-btn" id="logsBtn" onclick="openLogs()" title="View render log">
+      Logs <span class="dot" id="logsDot"></span>
+    </button>
+    <div class="render-group">
+      <button class="render-main" id="renderBtn" onclick="doRender()">Render HTML</button>
+      <button class="render-drop" id="renderDrop" onclick="toggleRenderMenu(event)">&#9660;</button>
+      <div class="render-menu" id="renderMenu">
+        <button onclick="setFormat('html')"><span class="check" id="checkHtml">&#10003;</span>HTML</button>
+        <button onclick="setFormat('pdf')"><span class="check" id="checkPdf">&nbsp;</span>PDF</button>
+      </div>
+    </div>
+  </div>
+  <div class="main">
+    <div class="editor-panel">
+      <div class="editor-tabs">
+        <button class="active" onclick="switchTab('template', this)">Template</button>
+        <button onclick="switchTab('header', this)">Header</button>
+        <button onclick="switchTab('footer', this)">Footer</button>
+        <button onclick="switchTab('data', this)">Data</button>
+        <button onclick="switchTab('deps', this)">Deps</button>
+      </div>
+      <div id="template-editor"></div>
+      <div id="header-editor" style="display:none"></div>
+      <div id="footer-editor" style="display:none"></div>
+      <div id="data-editor" style="display:none"></div>
+      <div id="deps-editor" style="display:none"></div>
+    </div>
+    <div class="preview-panel" id="preview">
+      <div class="empty">Click "Render" to preview your template</div>
+    </div>
+  </div>
+
+  <div class="log-overlay" id="logOverlay" onclick="onOverlayClick(event)">
+    <div class="log-dialog">
+      <div class="log-dialog-header">
+        <span class="title">Render Log</span>
+        <span class="badge" id="logsBadge" style="display:none">0</span>
+        <span class="spacer"></span>
+        <button class="close-btn" onclick="closeLogs()">&times;</button>
+      </div>
+      <div class="log-dialog-body" id="logsBody"></div>
+      <div class="log-dialog-footer">
+        <span class="status-text" id="logStatusText"></span>
+      </div>
+    </div>
+  </div>
+
+  <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);
+
+    let templateEditor, dataEditor, depsEditor, headerEditor, footerEditor;
+    let currentFormat = 'html';
+    let renderHadError = 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,
+      });
+    });
+
+    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();
+    }
+
+    /* 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();
+    }
+
+    function toggleRenderMenu(e) {
+      e.stopPropagation();
+      document.getElementById('renderMenu').classList.toggle('open');
+    }
+
+    function closeRenderMenu() {
+      document.getElementById('renderMenu').classList.remove('open');
+    }
+
+    document.addEventListener('click', closeRenderMenu);
+
+    /* 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;');
+    }
+
+    async function doRender() {
+      const btn = document.getElementById('renderBtn');
+      const drop = document.getElementById('renderDrop');
+      const preview = document.getElementById('preview');
+
+      btn.disabled = true;
+      drop.disabled = true;
+      clearLogs();
+      openLogs();
+      setLogStatus('Rendering...', true);
+
+      const code = templateEditor.getValue();
+      const format = currentFormat;
+      const pageSize = document.getElementById('pageSize').value;
+      const landscape = document.getElementById('landscape').checked;
+      const debug = document.getElementById('debug').checked;
+
+      let data = {};
+      try {
+        data = JSON.parse(dataEditor.getValue());
+      } catch (e) {
+        preview.innerHTML = '<div class="error">Invalid JSON in data editor:\\n' + e.message + '</div>';
+        btn.disabled = false;
+        drop.disabled = false;
+        setLogStatus('Failed', false);
+        addLog('error', 'Invalid JSON: ' + e.message);
+        return;
+      }
+
+      let deps = {};
+      try {
+        deps = JSON.parse(depsEditor.getValue());
+      } catch (e) {
+        setLogStatus('Failed', false);
+        addLog('error', 'Invalid JSON in dependencies editor: ' + e.message);
+        btn.disabled = false;
+        drop.disabled = false;
+        return;
+      }
+
+      const margins = {};
+      const mt = parseFloat(document.getElementById('marginTop').value);
+      const mb = parseFloat(document.getElementById('marginBottom').value);
+      const ml = parseFloat(document.getElementById('marginLeft').value);
+      const mr = parseFloat(document.getElementById('marginRight').value);
+      if (!isNaN(mt)) margins.top = mt;
+      if (!isNaN(mb)) margins.bottom = mb;
+      if (!isNaN(ml)) margins.left = ml;
+      if (!isNaN(mr)) margins.right = mr;
+
+      const body = { code, format, data, pdfOptions: {} };
+      if (pageSize) body.pdfOptions.defaultPageSize = pageSize;
+      if (landscape) body.pdfOptions.landscape = true;
+      if (debug) body.pdfOptions.debug = true;
+      if (Object.keys(margins).length) body.pdfOptions.margins = margins;
+      if (!Object.keys(body.pdfOptions).length) delete body.pdfOptions;
+      if (Object.keys(deps).length) body.dependencies = deps;
+
+      const hdr = headerEditor.getValue().trim();
+      const ftr = footerEditor.getValue().trim();
+      if (hdr) body.headerCode = hdr;
+      if (ftr) body.footerCode = ftr;
+
+      const start = Date.now();
+      try {
+        const res = await fetch('/render/stream', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+
+        if (!res.ok) {
+          const err = await res.text();
+          preview.innerHTML = '<div class="error">Render failed (' + res.status + '):\\n' + err + '</div>';
+          setLogStatus('Failed', false);
+          addLog('error', 'HTTP ' + res.status + ': ' + err);
+          btn.disabled = false;
+          drop.disabled = false;
+          return;
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let gotResult = false;
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\\n');
+          buffer = lines.pop() || '';
+
+          let eventType = 'message';
+          for (const line of lines) {
+            if (line.startsWith('event: ')) {
+              eventType = line.slice(7).trim();
+              continue;
+            }
+            if (!line.startsWith('data: ')) {
+              if (line === '') eventType = 'message';
+              continue;
+            }
+
+            let payload;
+            try { payload = JSON.parse(line.slice(6)); } catch { continue; }
+
+            if (eventType === 'result') {
+              gotResult = true;
+              const elapsed = ((Date.now() - start) / 1000).toFixed(1);
+              if (payload.contentType === 'text/html') {
+                preview.innerHTML = '<iframe sandbox="allow-same-origin allow-scripts"></iframe>';
+                preview.querySelector('iframe').srcdoc = payload.data;
+              } else if (payload.url) {
+                preview.innerHTML = '<iframe></iframe>';
+                preview.querySelector('iframe').src = payload.url;
+              } else if (payload.data) {
+                try {
+                  const bytes = Uint8Array.from(atob(payload.data), c => c.charCodeAt(0));
+                  const blob = new Blob([bytes], { type: 'application/pdf' });
+                  preview.innerHTML = '<iframe></iframe>';
+                  preview.querySelector('iframe').src = URL.createObjectURL(blob);
+                } catch (pdfErr) {
+                  preview.innerHTML = '<div class="error">Failed to decode PDF: ' + escapeHtml(pdfErr.message) + '</div>';
+                }
+              } else {
+                preview.innerHTML = '<div class="error">Render returned empty result</div>';
+              }
+              setLogStatus('Done (' + elapsed + 's)', false);
+              addLog('done', 'Completed in ' + elapsed + 's');
+              if (!renderHadError) setTimeout(closeLogs, 600);
+            } else if (eventType === 'error') {
+              preview.innerHTML = '<div class="error">' + escapeHtml(payload.message) + '</div>';
+              setLogStatus('Failed', false);
+              addLog('error', payload.message);
+            } else if (payload.stage || payload.message) {
+              setLogStatus(payload.message, true);
+              addLog(payload.stage, payload.message, payload.elapsed, payload.duration);
+            }
+            eventType = 'message';
+          }
+        }
+
+        if (!gotResult) {
+          const elapsed = ((Date.now() - start) / 1000).toFixed(1);
+          setLogStatus('Done (' + elapsed + 's)', false);
+          if (!renderHadError) setTimeout(closeLogs, 600);
+        }
+      } catch (e) {
+        preview.innerHTML = '<div class="error">Network error:\\n' + e.message + '</div>';
+        setLogStatus('Error', false);
+        addLog('error', 'Network: ' + e.message);
+      } finally {
+        btn.disabled = false;
+        drop.disabled = false;
+      }
+    }
+  </script>
+</body>
+</html>
+`;
+
+export function playgroundHtml(facetVersion: string = 'latest'): string {
+  return HTML.replaceAll('__FACET_VERSION__', facetVersion);
+}
diff --git a/cli/src/server/preview.ts b/cli/src/server/preview.ts
index d963189..1ba13f9 100644
--- a/cli/src/server/preview.ts
+++ b/cli/src/server/preview.ts
@@ -6,7 +6,16 @@ import { errorResponse } from './errors.js';
 import { WorkerPool } from './worker-pool.js';
 import { discoverTemplates, type TemplateInfo } from './templates.js';
 import { S3Uploader } from './s3.js';
-import { handleHealthz, handleTemplates, handleRender } from './routes.js';
+import { handleHealthz, handleTemplates, handleRender, handleRenderStream, handleResultsRoute } from './routes.js';
+import { playgroundHtml } from './playground-html.js';
+import { RenderCache } from './render-cache.js';
+import { facetTypes } from './facet-types.js';
+import { readFileSync } from 'fs';
+import rootPackageJson from '../../../package.json' with { type: 'file' };
+import openapiPath from '../../../openapi.yaml' with { type: 'file' };
+
+const facetVersion: string = JSON.parse(readFileSync(rootPackageJson, 'utf-8')).version;
+const openapiSpec: string = readFileSync(openapiPath, 'utf-8');
 
 export interface ServerHandle {
   port: number;
@@ -29,11 +38,28 @@ export async function createServer(config: ServerConfig): Promise<ServerHandle>
   const s3 = config.s3 ? new S3Uploader(config.s3) : undefined;
   if (s3) logger.info(`S3 upload enabled: ${config.s3!.bucket}`);
 
+  const cacheDir = resolve(process.cwd(), '.facet');
+  const cache = new RenderCache(cacheDir, config.cacheMaxSize);
+  logger.info(`Render cache: ${cacheDir}/render-cache (max ${(config.cacheMaxSize / 1048576).toFixed(0)}MB)`);
+
   const server = Bun.serve({
     port: config.port,
+    idleTimeout: 120,
     async fetch(request: Request): Promise<Response> {
       const url = new URL(request.url);
 
+      if (url.pathname === '/' && request.method === 'GET') {
+        return new Response(playgroundHtml(facetVersion), { headers: { 'content-type': 'text/html; charset=utf-8' } });
+      }
+
+      if (url.pathname === '/types' && request.method === 'GET') {
+        return new Response(facetTypes, { headers: { 'content-type': 'text/plain; charset=utf-8', 'cache-control': 'public, max-age=3600' } });
+      }
+
+      if (url.pathname === '/openapi.yaml' && request.method === 'GET') {
+        return new Response(openapiSpec, { headers: { 'content-type': 'text/yaml; charset=utf-8', 'cache-control': 'public, max-age=3600' } });
+      }
+
       if (url.pathname === '/healthz' && request.method === 'GET') {
         return handleHealthz(pool);
       }
@@ -45,8 +71,17 @@ export async function createServer(config: ServerConfig): Promise<ServerHandle>
         return handleTemplates(templates);
       }
 
+      const resultsMatch = url.pathname.match(/^\/results\/([a-f0-9]{16})$/);
+      if (resultsMatch && request.method === 'GET') {
+        return handleResultsRoute(resultsMatch[1], cache);
+      }
+
+      if (url.pathname === '/render/stream' && request.method === 'POST') {
+        return handleRenderStream(request, config, pool, templates, cache, s3);
+      }
+
       if (url.pathname === '/render' && request.method === 'POST') {
-        return handleRender(request, config, pool, templates, s3);
+        return handleRender(request, config, pool, templates, cache, s3);
       }
 
       return Response.json({ error: { code: 'NOT_FOUND', message: 'Not found' } }, { status: 404 });
diff --git a/cli/src/server/render-cache.ts b/cli/src/server/render-cache.ts
new file mode 100644
index 0000000..84b6776
--- /dev/null
+++ b/cli/src/server/render-cache.ts
@@ -0,0 +1,91 @@
+import { createHash } from 'crypto';
+import { join } from 'path';
+import { mkdirSync, readdirSync, statSync, unlinkSync, readFileSync, writeFileSync, utimesSync } from 'fs';
+
+interface CacheEntry {
+  file: string;
+  contentType: string;
+  size: number;
+  mtimeMs: number;
+}
+
+export class RenderCache {
+  private dir: string;
+  private maxBytes: number;
+
+  constructor(cacheDir: string, maxBytes: number) {
+    this.dir = join(cacheDir, 'render-cache');
+    this.maxBytes = maxBytes;
+    mkdirSync(this.dir, { recursive: true });
+  }
+
+  get(key: string): { contentType: string; data: Buffer } | undefined {
+    const meta = this.readMeta(key);
+    if (!meta) return undefined;
+    try {
+      const data = readFileSync(meta.file);
+      // Touch file to mark as recently used
+      const now = new Date();
+      utimesSync(meta.file, now, now);
+      return { contentType: meta.contentType, data };
+    } catch {
+      return undefined;
+    }
+  }
+
+  set(key: string, contentType: string, data: Buffer): void {
+    const ext = contentType === 'application/pdf' ? '.pdf' : '.html';
+    const filePath = join(this.dir, key + ext);
+    const metaPath = join(this.dir, key + '.meta');
+    writeFileSync(filePath, data);
+    writeFileSync(metaPath, contentType, 'utf-8');
+    this.evictIfNeeded();
+  }
+
+  private readMeta(key: string): { file: string; contentType: string } | undefined {
+    const metaPath = join(this.dir, key + '.meta');
+    try {
+      const contentType = readFileSync(metaPath, 'utf-8').trim();
+      const ext = contentType === 'application/pdf' ? '.pdf' : '.html';
+      const filePath = join(this.dir, key + ext);
+      statSync(filePath);
+      return { file: filePath, contentType };
+    } catch {
+      return undefined;
+    }
+  }
+
+  private evictIfNeeded(): void {
+    const entries: CacheEntry[] = [];
+    let totalSize = 0;
+
+    for (const name of readdirSync(this.dir)) {
+      if (name.endsWith('.meta')) continue;
+      const filePath = join(this.dir, name);
+      try {
+        const st = statSync(filePath);
+        entries.push({ file: filePath, contentType: '', size: st.size, mtimeMs: st.mtimeMs });
+        totalSize += st.size;
+      } catch {}
+    }
+
+    if (totalSize <= this.maxBytes) return;
+
+    // Sort oldest first (LRU)
+    entries.sort((a, b) => a.mtimeMs - b.mtimeMs);
+    for (const entry of entries) {
+      if (totalSize <= this.maxBytes) break;
+      try {
+        unlinkSync(entry.file);
+        // Also remove the .meta file
+        const base = entry.file.replace(/\.(pdf|html)$/, '');
+        try { unlinkSync(base + '.meta'); } catch {}
+      } catch {}
+      totalSize -= entry.size;
+    }
+  }
+}
+
+export function computeCacheKey(inputs: Record<string, unknown>): string {
+  return createHash('sha256').update(JSON.stringify(inputs)).digest('hex').slice(0, 16);
+}
diff --git a/cli/src/server/render-stream.ts b/cli/src/server/render-stream.ts
new file mode 100644
index 0000000..9ce034d
--- /dev/null
+++ b/cli/src/server/render-stream.ts
@@ -0,0 +1,104 @@
+/**
+ * Server-Sent Events streaming for render progress.
+ * The playground POSTs to /render/stream, which returns an SSE stream
+ * with progress events, then the final result.
+ */
+
+export type RenderStage =
+  | 'parsing'
+  | 'resolving'
+  | 'installing'
+  | 'building'
+  | 'tailwind'
+  | 'rendering-html'
+  | 'rendering-pdf'
+  | 'uploading'
+  | 'securing'
+  | 'done'
+  | 'error';
+
+export interface ProgressEvent {
+  stage: RenderStage;
+  message: string;
+  elapsed?: number;
+  duration?: number;
+}
+
+export class RenderProgress {
+  private controller: ReadableStreamDefaultController<string> | null = null;
+  private startTime = Date.now();
+  private lastEmitTime = Date.now();
+
+  static create(): { progress: RenderProgress; stream: ReadableStream<Uint8Array> } {
+    let ctrl!: ReadableStreamDefaultController<string>;
+    const textStream = new ReadableStream<string>({
+      start(controller) {
+        ctrl = controller;
+      },
+    });
+
+    const progress = new RenderProgress();
+    progress.controller = ctrl;
+
+    const encoder = new TextEncoder();
+    const byteStream = new ReadableStream<Uint8Array>({
+      async start(controller) {
+        const reader = textStream.getReader();
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            controller.enqueue(encoder.encode(value));
+          }
+          controller.close();
+        } catch {
+          controller.close();
+        }
+      },
+    });
+
+    return { progress, stream: byteStream };
+  }
+
+  emit(stage: RenderStage, message: string): void {
+    if (!this.controller) return;
+    const now = Date.now();
+    const event: ProgressEvent = {
+      stage,
+      message,
+      elapsed: now - this.startTime,
+      duration: now - this.lastEmitTime,
+    };
+    this.lastEmitTime = now;
+    try {
+      this.controller.enqueue(`data: ${JSON.stringify(event)}\n\n`);
+    } catch {
+      // stream closed
+    }
+  }
+
+  emitResult(contentType: string, data: string, url?: string): void {
+    if (!this.controller) return;
+    try {
+      this.controller.enqueue(
+        `event: result\ndata: ${JSON.stringify({ contentType, data, url })}\n\n`,
+      );
+    } catch {}
+  }
+
+  emitError(message: string): void {
+    if (!this.controller) return;
+    try {
+      this.controller.enqueue(
+        `event: error\ndata: ${JSON.stringify({ message })}\n\n`,
+      );
+    } catch {}
+  }
+
+  close(): void {
+    try {
+      this.controller?.close();
+    } catch {}
+    this.controller = null;
+  }
+}
diff --git a/cli/src/server/request.ts b/cli/src/server/request.ts
index 6a4b927..101deeb 100644
--- a/cli/src/server/request.ts
+++ b/cli/src/server/request.ts
@@ -1,11 +1,13 @@
 import { RenderError } from './errors.js';
 import { parseRemoteRef } from '../utils/remote-resolver.js';
-import type { BufferPDFOptions } from '../utils/pdf-generator.js';
+import type { BufferPDFOptions, PDFMargins } from '../utils/pdf-generator.js';
+import type { PDFEncryptionOptions, PDFSignatureOptions } from '../utils/pdf-security.js';
 
 export type TemplateSource =
   | { kind: 'local'; name: string }
   | { kind: 'remote'; template: string }
-  | { kind: 'archive'; data: Buffer; entryFile?: string };
+  | { kind: 'archive'; data: Buffer; entryFile?: string }
+  | { kind: 'inline'; code: string };
 
 export interface ParsedRenderRequest {
   source: TemplateSource;
@@ -15,6 +17,11 @@ export interface ParsedRenderRequest {
   s3Key?: string;
   filename?: string;
   pdfOptions?: BufferPDFOptions;
+  dependencies?: Record<string, string>;
+  headerCode?: string;
+  footerCode?: string;
+  encryption?: PDFEncryptionOptions;
+  signature?: PDFSignatureOptions;
 }
 
 export async function parseRenderRequest(
@@ -44,18 +51,22 @@ async function parseJsonRequest(request: Request): Promise<ParsedRenderRequest>
     throw new RenderError('INVALID_REQUEST', 'Invalid JSON body', 400);
   }
 
+  const code = body.code;
   const template = body.template;
-  if (typeof template !== 'string' || !template) {
-    throw new RenderError('INVALID_REQUEST', 'Missing required field: template', 400);
+
+  if (typeof code !== 'string' && (typeof template !== 'string' || !template)) {
+    throw new RenderError('INVALID_REQUEST', 'Missing required field: template or code', 400);
   }
 
   const data = (body.data ?? {}) as Record<string, unknown>;
   const format = (body.format as string) === 'html' ? 'html' as const : 'pdf' as const;
   const output = (body.output as string) === 's3' ? 's3' as const : 'direct' as const;
 
-  const source: TemplateSource = parseRemoteRef(template)
-    ? { kind: 'remote', template }
-    : { kind: 'local', name: template };
+  const source: TemplateSource = typeof code === 'string'
+    ? { kind: 'inline', code }
+    : parseRemoteRef(template as string)
+      ? { kind: 'remote', template: template as string }
+      : { kind: 'local', name: template as string };
 
   return {
     source,
@@ -65,9 +76,23 @@ async function parseJsonRequest(request: Request): Promise<ParsedRenderRequest>
     s3Key: body.s3Key as string | undefined,
     filename: body.filename as string | undefined,
     pdfOptions: parsePDFOptions(body.pdfOptions as Record<string, unknown> | undefined),
+    dependencies: parseDependencies(body.dependencies),
+    headerCode: typeof body.headerCode === 'string' ? body.headerCode : undefined,
+    footerCode: typeof body.footerCode === 'string' ? body.footerCode : undefined,
+    encryption: parseEncryptionOptions(body.encryption),
+    signature: parseSignatureOptions(body.signature),
   };
 }
 
+function parseDependencies(raw: unknown): Record<string, string> | undefined {
+  if (!raw || typeof raw !== 'object') return undefined;
+  const deps: Record<string, string> = {};
+  for (const [k, v] of Object.entries(raw as Record<string, unknown>)) {
+    if (typeof v === 'string') deps[k] = v;
+  }
+  return Object.keys(deps).length > 0 ? deps : undefined;
+}
+
 async function parseMultipartRequest(
   request: Request,
   maxUploadSize: number,
@@ -155,9 +180,57 @@ async function parseGzipRequest(
   };
 }
 
+function parseMargins(raw: unknown): PDFMargins | undefined {
+  if (!raw || typeof raw !== 'object') return undefined;
+  const m = raw as Record<string, unknown>;
+  const margins: PDFMargins = {};
+  if (typeof m.top === 'number') margins.top = m.top;
+  if (typeof m.bottom === 'number') margins.bottom = m.bottom;
+  if (typeof m.left === 'number') margins.left = m.left;
+  if (typeof m.right === 'number') margins.right = m.right;
+  return Object.keys(margins).length > 0 ? margins : undefined;
+}
+
 function parsePDFOptions(raw?: Record<string, unknown>): BufferPDFOptions | undefined {
   if (!raw) return undefined;
   return {
     landscape: raw.landscape as boolean | undefined,
+    debug: raw.debug as boolean | undefined,
+    defaultPageSize: raw.defaultPageSize as string | undefined,
+    margins: parseMargins(raw.margins),
+  };
+}
+
+function parseEncryptionOptions(raw: unknown): PDFEncryptionOptions | undefined {
+  if (!raw || typeof raw !== 'object') return undefined;
+  const r = raw as Record<string, unknown>;
+  if (typeof r.ownerPassword !== 'string') return undefined;
+  const perms = r.permissions as Record<string, unknown> | undefined;
+  return {
+    ownerPassword: r.ownerPassword,
+    userPassword: typeof r.userPassword === 'string' ? r.userPassword : undefined,
+    permissions: perms ? {
+      print: typeof perms.print === 'boolean' ? perms.print : undefined,
+      modify: typeof perms.modify === 'boolean' ? perms.modify : undefined,
+      copy: typeof perms.copy === 'boolean' ? perms.copy : undefined,
+      annotate: typeof perms.annotate === 'boolean' ? perms.annotate : undefined,
+    } : undefined,
+  };
+}
+
+function parseSignatureOptions(raw: unknown): PDFSignatureOptions | undefined {
+  if (!raw || typeof raw !== 'object') return undefined;
+  const r = raw as Record<string, unknown>;
+  const selfSigned = r.selfSigned === true;
+  const hasTimestamp = typeof r.timestampUrl === 'string';
+  if (!selfSigned && !hasTimestamp && (typeof r.certPath !== 'string' || typeof r.certPassword !== 'string')) return undefined;
+  return {
+    certPath: typeof r.certPath === 'string' ? r.certPath : undefined,
+    certPassword: typeof r.certPassword === 'string' ? r.certPassword : undefined,
+    selfSigned,
+    reason: typeof r.reason === 'string' ? r.reason : undefined,
+    name: typeof r.name === 'string' ? r.name : undefined,
+    location: typeof r.location === 'string' ? r.location : undefined,
+    timestampUrl: typeof r.timestampUrl === 'string' ? r.timestampUrl : undefined,
   };
 }
diff --git a/cli/src/server/routes.ts b/cli/src/server/routes.ts
index 375ff9b..924d640 100644
--- a/cli/src/server/routes.ts
+++ b/cli/src/server/routes.ts
@@ -1,7 +1,7 @@
 import { mkdtemp, cp, writeFile, readFile } from 'fs/promises';
 import { join, basename } from 'path';
 import { tmpdir } from 'os';
-import { rmSync } from 'fs';
+import { rmSync, lstatSync } from 'fs';
 import { $ } from 'bun';
 
 import type { ServerConfig } from './config.js';
@@ -18,7 +18,23 @@ import { parseRemoteRef, resolveRemoteRef } from '../utils/remote-resolver.js';
 import { buildTemplate } from '../bundler/vite-builder.js';
 import { combineHTMLAndCSS } from '../bundler/renderer.js';
 import { generatePDFBuffer } from '../utils/pdf-generator.js';
+import { applyPDFSecurity } from '../utils/pdf-security.js';
 import { Logger } from '../utils/logger.js';
+import { RenderProgress } from './render-stream.js';
+import { computeCacheKey, RenderCache } from './render-cache.js';
+
+export function handleResultsRoute(id: string, cache: RenderCache): Response {
+  const cached = cache.get(id);
+  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';
+  return new Response(cached.data, {
+    headers: {
+      'content-type': cached.contentType,
+      'content-disposition': `inline; filename="render.${ext}"`,
+      'cache-control': 'private, max-age=600',
+    },
+  });
+}
 
 export function handleHealthz(pool: WorkerPool): Response {
   return Response.json({ status: 'ok', workers: pool.stats() });
@@ -40,6 +56,7 @@ export async function handleRender(
   config: ServerConfig,
   pool: WorkerPool,
   templates: TemplateInfo[],
+  cache: RenderCache,
   s3?: S3Uploader,
 ): Promise<Response> {
   const logger = new Logger(config.verbose);
@@ -50,7 +67,7 @@ export async function handleRender(
     return errorResponse(err);
   }
 
-  const renderPromise = doRender(parsed, config, pool, templates, s3, logger);
+  const renderPromise = doRender(parsed, config, pool, templates, cache, s3, logger);
   const timeoutPromise = new Promise<never>((_, reject) =>
     setTimeout(() => reject(new RenderError('RENDER_TIMEOUT', 'Render timed out', 504)), config.renderTimeout),
   );
@@ -62,14 +79,118 @@ export async function handleRender(
   }
 }
 
+export function handleRenderStream(
+  request: Request,
+  config: ServerConfig,
+  pool: WorkerPool,
+  templates: TemplateInfo[],
+  cache: RenderCache,
+  s3?: S3Uploader,
+): Response {
+  const { progress, stream } = RenderProgress.create();
+
+  (async () => {
+    const logger = new Logger(config.verbose);
+    let parsed: ParsedRenderRequest;
+    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);
+      progress.close();
+      return;
+    }
+
+    const cacheKey = cacheKeyForRequest(parsed);
+    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.close();
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      progress.emitError('Render timed out');
+      progress.close();
+    }, config.renderTimeout);
+
+    try {
+      const result = await doRenderStreamed(parsed, config, pool, templates, s3, logger, progress);
+      clearTimeout(timeout);
+
+      if (typeof result === 'string') {
+        const buf = Buffer.from(result);
+        cache.set(cacheKey, 'text/html', buf);
+        progress.emitResult('text/html', result, `/results/${cacheKey}`);
+      } else {
+        const buf = Buffer.from(result);
+        cache.set(cacheKey, 'application/pdf', buf);
+        progress.emitResult('application/pdf', '', `/results/${cacheKey}`);
+      }
+      progress.emit('done', 'Render complete');
+    } catch (err) {
+      clearTimeout(timeout);
+      const msg = err instanceof RenderError ? err.message : err instanceof Error ? err.message : String(err);
+      progress.emitError(msg);
+    } finally {
+      progress.close();
+    }
+  })();
+
+  return new Response(stream, {
+    headers: {
+      'content-type': 'text/event-stream',
+      'cache-control': 'no-cache',
+      'connection': 'keep-alive',
+      'access-control-allow-origin': '*',
+    },
+  });
+}
+
+function cacheKeyForRequest(parsed: ParsedRenderRequest): string {
+  return computeCacheKey({
+    source: parsed.source,
+    data: parsed.data,
+    dependencies: parsed.dependencies,
+    headerCode: parsed.headerCode,
+    footerCode: parsed.footerCode,
+    format: parsed.format,
+    pdfOptions: parsed.pdfOptions,
+    encryption: parsed.encryption,
+    signature: parsed.signature,
+  });
+}
+
 async function doRender(
   parsed: ParsedRenderRequest,
   config: ServerConfig,
   pool: WorkerPool,
   templates: TemplateInfo[],
+  cache: RenderCache,
   s3: S3Uploader | undefined,
   logger: Logger,
 ): Promise<Response> {
+  const cacheKey = cacheKeyForRequest(parsed);
+  const cached = cache.get(cacheKey);
+  if (cached) {
+    if (cached.contentType === 'application/pdf') {
+      return Response.json({ url: `/results/${cacheKey}` });
+    }
+    return new Response(cached.data, {
+      headers: {
+        'content-type': cached.contentType,
+        'content-disposition': `inline; filename="render.html"`,
+      },
+    });
+  }
+
   let tempDir: string | undefined;
   let archiveCleanup: (() => void) | undefined;
 
@@ -78,23 +199,90 @@ async function doRender(
     tempDir = resolved.tempDir;
     archiveCleanup = resolved.archiveCleanup;
 
-    const html = await renderHTML(resolved.consumerRoot, resolved.entryFile, parsed.data, logger, config.sandbox);
+    let html = await renderHTML(resolved.consumerRoot, resolved.entryFile, parsed.data, logger);
+    html = await injectHeaderFooter(html, parsed, resolved.consumerRoot, logger);
     const templateName = resolved.templateName;
 
     if (parsed.format === 'html') {
+      cache.set(cacheKey, 'text/html', Buffer.from(html));
       return respondWithOutput(html, 'text/html', 'html', templateName, parsed, s3, logger);
     }
 
     const worker = await pool.acquire();
     try {
-      const pdfBuffer = await generatePDFBuffer(worker.browser, html, parsed.pdfOptions);
-      return respondWithOutput(pdfBuffer, 'application/pdf', 'pdf', templateName, parsed, s3, logger);
+      let pdfBuffer = await generatePDFBuffer(worker.browser, html, parsed.pdfOptions);
+      if (parsed.encryption || parsed.signature) {
+        pdfBuffer = await applyPDFSecurity(Buffer.from(pdfBuffer), {
+          encryption: parsed.encryption,
+          signature: parsed.signature,
+        }, logger);
+      }
+      cache.set(cacheKey, 'application/pdf', Buffer.from(pdfBuffer));
+      if (parsed.output === 's3') {
+        return respondWithOutput(pdfBuffer, 'application/pdf', 'pdf', templateName, parsed, s3, logger);
+      }
+      return Response.json({ url: `/results/${cacheKey}` });
     } finally {
       await pool.release(worker);
     }
   } finally {
     archiveCleanup?.();
-    if (tempDir) rmSync(tempDir, { recursive: true, force: true });
+    if (tempDir) cleanupTempDir(tempDir);
+  }
+}
+
+async function doRenderStreamed(
+  parsed: ParsedRenderRequest,
+  config: ServerConfig,
+  pool: WorkerPool,
+  templates: TemplateInfo[],
+  s3: S3Uploader | undefined,
+  logger: Logger,
+  progress: RenderProgress,
+): Promise<string | Buffer> {
+  let tempDir: string | undefined;
+  let archiveCleanup: (() => void) | undefined;
+
+  try {
+    progress.emit('resolving', `Resolving template (${parsed.source.kind})...`);
+    const resolved = await resolveTemplateSource(parsed, templates, config);
+    tempDir = resolved.tempDir;
+    archiveCleanup = resolved.archiveCleanup;
+
+    progress.emit('building', 'Building template with Vite SSR...');
+    let html = await renderHTMLStreamed(resolved.consumerRoot, resolved.entryFile, parsed.data, logger, progress);
+    html = await injectHeaderFooter(html, parsed, resolved.consumerRoot, logger, progress);
+
+    if (parsed.format === 'html') {
+      progress.emit('done', 'HTML render complete');
+      return html;
+    }
+
+    progress.emit('rendering-pdf', 'Acquiring browser worker...');
+    const worker = await pool.acquire();
+    try {
+      progress.emit('rendering-pdf', 'Generating PDF with Puppeteer...');
+      let pdfBuffer = await 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,
+        }, logger);
+      }
+
+      if (parsed.output === 's3' && s3) {
+        progress.emit('uploading', 'Uploading to S3...');
+      }
+
+      return pdfBuffer;
+    } finally {
+      await pool.release(worker);
+    }
+  } finally {
+    archiveCleanup?.();
+    if (tempDir) cleanupTempDir(tempDir);
   }
 }
 
@@ -113,6 +301,23 @@ async function resolveTemplateSource(
 ): Promise<ResolvedSource> {
   const { source } = parsed;
 
+  if (source.kind === 'inline') {
+    const tempDir = await mkdtemp(join(tmpdir(), 'facet-inline-'));
+    await writeFile(join(tempDir, 'Template.tsx'), 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: 'Template.tsx',
+      templateName: 'inline',
+      tempDir,
+    };
+  }
+
   if (source.kind === 'archive') {
     const extracted = await extractArchive(source.data, source.entryFile, config.maxUploadSize);
     return {
@@ -158,6 +363,21 @@ async function copyToTempDir(sourceDir: string): Promise<string> {
   return tempDir;
 }
 
+/**
+ * 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 });
+}
+
 async function renderHTML(
   consumerRoot: string,
   entryFile: string,
@@ -174,27 +394,115 @@ async function renderHTML(
   });
 
   try {
-    const facetRoot = join(consumerRoot, '.facet');
-    const tempHtmlPath = join(consumerRoot, '_render.temp.html');
-    await writeFile(tempHtmlPath, buildResult.html, 'utf-8');
-
-    const stylesInput = join(facetRoot, 'src/styles.css');
-    const outputCssPath = join(consumerRoot, '_render.css');
+    return await applyTailwind(consumerRoot, buildResult.html, buildResult.css, logger);
+  } finally {
+    await buildResult.cleanup();
+  }
+}
 
-    let css = buildResult.css;
-    try {
-      await $`cd ${facetRoot} && npx tailwindcss -i ${stylesInput} --content ${tempHtmlPath} -o ${outputCssPath}`.quiet();
-      css = await readFile(outputCssPath, 'utf-8');
-    } catch {
-      logger.debug('Tailwind CSS failed, using Vite CSS fallback');
-    }
+async function renderHTMLStreamed(
+  consumerRoot: string,
+  entryFile: string,
+  data: Record<string, unknown>,
+  logger: Logger,
+  progress: RenderProgress,
+): Promise<string> {
+  progress.emit('building', 'Compiling template with Vite SSR...');
+  const buildResult = await buildTemplate({
+    templatePath: entryFile,
+    data,
+    consumerRoot,
+    logger,
+  });
 
-    return combineHTMLAndCSS(buildResult.html, css);
+  try {
+    progress.emit('tailwind', 'Processing Tailwind CSS...');
+    return await applyTailwind(consumerRoot, buildResult.html, buildResult.css, logger);
   } finally {
     await buildResult.cleanup();
   }
 }
 
+async function buildFragment(
+  consumerRoot: string,
+  filename: string,
+  code: string,
+  data: Record<string, unknown>,
+  logger: Logger,
+): Promise<string> {
+  await writeFile(join(consumerRoot, filename), code, 'utf-8');
+  const result = await buildTemplate({
+    templatePath: filename,
+    data,
+    consumerRoot,
+    logger,
+  });
+  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,
+): 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);
+    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);
+    html = insertBeforeBodyClose(html, extractBodyContent(footerHtml));
+  }
+
+  return html;
+}
+
+async function applyTailwind(
+  consumerRoot: string,
+  html: string,
+  css: string,
+  logger: Logger,
+): Promise<string> {
+  const facetRoot = join(consumerRoot, '.facet');
+  const tempHtmlPath = join(consumerRoot, '_render.temp.html');
+  await writeFile(tempHtmlPath, html, 'utf-8');
+
+  const stylesInput = join(facetRoot, 'src/styles.css');
+  const outputCssPath = join(consumerRoot, '_render.css');
+
+  try {
+    await $`cd ${facetRoot} && npx tailwindcss -i ${stylesInput} --content ${tempHtmlPath} -o ${outputCssPath}`.quiet();
+    css = await readFile(outputCssPath, 'utf-8');
+  } catch {
+    logger.debug('Tailwind CSS failed, using Vite CSS fallback');
+  }
+
+  return combineHTMLAndCSS(html, css);
+}
+
 async function respondWithOutput(
   content: Buffer | string,
   contentType: string,
diff --git a/cli/src/types.ts b/cli/src/types.ts
index aea6071..ca317e9 100644
--- a/cli/src/types.ts
+++ b/cli/src/types.ts
@@ -29,7 +29,12 @@ export interface GenerateOptions {
   refresh?: boolean;
   debug?: boolean;
   pageSize?: string;
-  sandbox?: string | boolean;
+  landscape?: boolean;
+  margins?: { top?: number; bottom?: number; left?: number; right?: number };
+  header?: string;
+  footer?: string;
+  encryption?: import('./utils/pdf-security.js').PDFEncryptionOptions;
+  signature?: import('./utils/pdf-security.js').PDFSignatureOptions;
 }
 
 export interface LoadedData {
diff --git a/cli/src/utils/pdf-generator.ts b/cli/src/utils/pdf-generator.ts
index c6a439a..9155f5e 100644
--- a/cli/src/utils/pdf-generator.ts
+++ b/cli/src/utils/pdf-generator.ts
@@ -6,10 +6,30 @@
  * onto content pages using pdf-lib, avoiding position:fixed bleed issues.
  */
 
-import { existsSync, writeFileSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
 import { PDFDocument } from 'pdf-lib';
 import puppeteer, { type Browser, type Page } from 'puppeteer';
 import { Logger } from './logger.js';
+
+function readVersion(): string {
+  try {
+    const dir = typeof __dirname !== 'undefined' ? __dirname : dirname(fileURLToPath(import.meta.url));
+    const pkg = JSON.parse(readFileSync(join(dir, '../../package.json'), 'utf-8'));
+    return pkg.version;
+  } catch {
+    return 'unknown';
+  }
+}
+const FACET_CREATOR = `Facet v${readVersion()}`;
+
+async function stampPDFMetadata(buffer: Buffer): Promise<Buffer> {
+  const doc = await PDFDocument.load(buffer);
+  doc.setCreator(FACET_CREATOR);
+  doc.setProducer(FACET_CREATOR);
+  return Buffer.from(await doc.save());
+}
 import {
   detectPageTypes,
   buildPageGroups,
@@ -57,9 +77,8 @@ async function loadAndPrepare(browser: Browser, html: string, widthMm?: number):
   if (widthMm) {
     await page.setViewport({ width: mmToPx(widthMm), height: mmToPx(297) });
   }
-  await page.setContent(html, { waitUntil: 'networkidle0', timeout: 30000 });
+  await page.setContent(html, { waitUntil: 'domcontentloaded', timeout: 30000 });
   await page.evaluateHandle('document.fonts.ready');
-  await new Promise(r => setTimeout(r, 500));
   return page;
 }
 
@@ -119,7 +138,7 @@ async function renderLegacyElementPdf(
   const { renderElementPdf } = await import('./pdf-multipass.js');
   const page = await browser.newPage();
   try {
-    await page.setContent(html, { waitUntil: 'networkidle0', timeout: 30000 });
+    await page.setContent(html, { waitUntil: 'domcontentloaded', timeout: 30000 });
     const exists = await page.evaluate((sel: string) => !!document.querySelector(sel), selector);
     await page.close();
     if (!exists) return null;
@@ -140,6 +159,7 @@ async function renderSinglePass(
   landscape?: boolean,
   overridePageSize?: string,
   outputPath?: string,
+  overrideMargins?: PDFMargins,
 ): Promise<Buffer> {
   const pageInfo = await page.evaluate((override: string | null): { top: number; bottom: number; pageSize: string } => {
     const pxToMm = 25.4 / 96;
@@ -166,7 +186,13 @@ async function renderSinglePass(
     content: `body { max-width: ${dims.width}mm !important; }`,
   });
 
-  if (pageInfo.top === 0 && pageInfo.bottom === 0) {
+  // Apply explicit margin overrides
+  const marginTop = overrideMargins?.top ?? pageInfo.top;
+  const marginBottom = overrideMargins?.bottom ?? pageInfo.bottom;
+  const marginLeft = overrideMargins?.left ?? 0;
+  const marginRight = overrideMargins?.right ?? 0;
+
+  if (marginTop === 0 && marginBottom === 0 && marginLeft === 0 && marginRight === 0) {
     const pdf = await page.pdf({
       width: `${dims.width}mm`,
       height: `${dims.height}mm`,
@@ -188,7 +214,7 @@ async function renderSinglePass(
     return Buffer.from(pdf);
   }
 
-  log.info(`Single-pass overlay: header=${pageInfo.top}mm footer=${pageInfo.bottom}mm size=${pageInfo.pageSize}`);
+  log.info(`Single-pass overlay: header=${marginTop}mm footer=${marginBottom}mm left=${marginLeft}mm right=${marginRight}mm size=${pageInfo.pageSize}`);
 
   const debugBasePath = debug && outputPath ? outputPath.replace(/\.pdf$/, '') : undefined;
   const key = overlayKey('default', pageInfo.pageSize);
@@ -218,17 +244,19 @@ async function renderSinglePass(
     document.querySelectorAll('.datasheet-header, .datasheet-footer, [data-header-type], [data-footer-type]').forEach(el => el.remove());
   });
 
-  const topMm = `${pageInfo.top}mm`;
-  const bottomMm = `${pageInfo.bottom}mm`;
+  const topMm = `${marginTop}mm`;
+  const bottomMm = `${marginBottom}mm`;
+  const leftMm = `${marginLeft}mm`;
+  const rightMm = `${marginRight}mm`;
   await page.addStyleTag({
-    content: `@page { size: ${dims.width}mm ${dims.height}mm; margin-top: ${topMm} !important; margin-bottom: ${bottomMm} !important; margin-left: 0 !important; margin-right: 0 !important; }`,
+    content: `@page { size: ${dims.width}mm ${dims.height}mm; margin-top: ${topMm} !important; margin-bottom: ${bottomMm} !important; margin-left: ${leftMm} !important; margin-right: ${rightMm} !important; }`,
   });
 
   const pdfBytes = await page.pdf({
     width: `${dims.width}mm`,
     height: `${dims.height}mm`,
     landscape: landscape ?? false,
-    margin: { top: topMm, bottom: bottomMm, left: 0, right: 0 },
+    margin: { top: topMm, bottom: bottomMm, left: leftMm, right: rightMm },
     omitBackground: false,
     printBackground: true,
     displayHeaderFooter: false,
@@ -261,10 +289,12 @@ export interface PDFOptions {
   logger?: Logger;
   debug?: boolean;
   defaultPageSize?: string;
+  margins?: PDFMargins;
+  landscape?: boolean;
 }
 
 export async function generatePDFFromHTML(options: PDFOptions): Promise<void> {
-  const { html, outputPath, logger, debug, defaultPageSize } = options;
+  const { html, outputPath, logger, debug, defaultPageSize, margins, landscape } = options;
   const log = logger || new Logger(false);
 
   const chromePath = resolveChromePath();
@@ -278,17 +308,15 @@ export async function generatePDFFromHTML(options: PDFOptions): Promise<void> {
 
   try {
     const page = await browser.newPage();
-    if (defaultPageSize) {
-      const initDims = resolvePageSize(defaultPageSize);
-      await page.setViewport({ width: mmToPx(initDims.width), height: mmToPx(initDims.height) });
+    const dims = defaultPageSize ? resolvePageSize(defaultPageSize) : undefined;
+    if (dims) {
+      await page.setViewport({ width: mmToPx(dims.width), height: mmToPx(dims.height) });
     }
-    await page.setContent(html, { waitUntil: 'networkidle0', timeout: 30000 });
-    if (defaultPageSize) {
-      const initDims = resolvePageSize(defaultPageSize);
-      await page.addStyleTag({ content: `body { max-width: ${initDims.width}mm !important; }` });
+    await page.setContent(html, { waitUntil: 'domcontentloaded', timeout: 30000 });
+    if (dims) {
+      await page.addStyleTag({ content: `body { max-width: ${dims.width}mm !important; }` });
     }
     await page.evaluateHandle('document.fonts.ready');
-    await new Promise((resolve) => setTimeout(resolve, 500));
 
     const typeInfo = await detectPageTypes(page, defaultPageSize);
 
@@ -299,10 +327,11 @@ export async function generatePDFFromHTML(options: PDFOptions): Promise<void> {
       result = await renderMultiPass(browser, html, typeInfo, log, debug, outputPath);
     } else {
       log.info('Single-pass mode (no typed headers/footers)');
-      result = await renderSinglePass(browser, html, page, log, debug, undefined, defaultPageSize, outputPath);
+      result = await renderSinglePass(browser, html, page, log, debug, landscape, defaultPageSize, outputPath, margins);
       await page.close();
     }
 
+    result = await stampPDFMetadata(result);
     writeFileSync(outputPath, result);
     log.debug(`PDF saved to: ${outputPath}`);
   } finally {
@@ -331,17 +360,15 @@ export async function generatePDFWithBrowser(
   const page = await browser.newPage();
 
   try {
-    if (defaultPageSize) {
-      const initDims = resolvePageSize(defaultPageSize);
-      await page.setViewport({ width: mmToPx(initDims.width), height: mmToPx(initDims.height) });
+    const dims = defaultPageSize ? resolvePageSize(defaultPageSize) : undefined;
+    if (dims) {
+      await page.setViewport({ width: mmToPx(dims.width), height: mmToPx(dims.height) });
     }
-    await page.setContent(html, { waitUntil: 'networkidle0', timeout: 30000 });
-    if (defaultPageSize) {
-      const initDims = resolvePageSize(defaultPageSize);
-      await page.addStyleTag({ content: `body { max-width: ${initDims.width}mm !important; }` });
+    await page.setContent(html, { waitUntil: 'domcontentloaded', timeout: 30000 });
+    if (dims) {
+      await page.addStyleTag({ content: `body { max-width: ${dims.width}mm !important; }` });
     }
     await page.evaluateHandle('document.fonts.ready');
-    await new Promise((resolve) => setTimeout(resolve, 500));
 
     const typeInfo = await detectPageTypes(page, defaultPageSize);
 
@@ -355,6 +382,7 @@ export async function generatePDFWithBrowser(
       await page.close();
     }
 
+    result = await stampPDFMetadata(result);
     writeFileSync(outputPath, result);
     log.debug(`PDF saved to: ${outputPath}`);
   } catch (err) {
@@ -363,10 +391,18 @@ export async function generatePDFWithBrowser(
   }
 }
 
+export interface PDFMargins {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
 export interface BufferPDFOptions {
   landscape?: boolean;
   debug?: boolean;
   defaultPageSize?: string;
+  margins?: PDFMargins;
 }
 
 export async function generatePDFBuffer(
@@ -376,28 +412,26 @@ export async function generatePDFBuffer(
 ): Promise<Buffer> {
   const page = await browser.newPage();
   try {
-    if (options?.defaultPageSize) {
-      const initDims = resolvePageSize(options.defaultPageSize);
-      await page.setViewport({ width: mmToPx(initDims.width), height: mmToPx(initDims.height) });
+    const dims = options?.defaultPageSize ? resolvePageSize(options.defaultPageSize) : undefined;
+    if (dims) {
+      await page.setViewport({ width: mmToPx(dims.width), height: mmToPx(dims.height) });
     }
-    await page.setContent(html, { waitUntil: 'networkidle0', timeout: 30000 });
-    if (options?.defaultPageSize) {
-      const initDims = resolvePageSize(options.defaultPageSize);
-      await page.addStyleTag({ content: `body { max-width: ${initDims.width}mm !important; }` });
+    await page.setContent(html, { waitUntil: 'domcontentloaded', timeout: 30000 });
+    if (dims) {
+      await page.addStyleTag({ content: `body { max-width: ${dims.width}mm !important; }` });
     }
     await page.evaluateHandle('document.fonts.ready');
-    await new Promise((resolve) => setTimeout(resolve, 500));
 
     const typeInfo = await detectPageTypes(page, options?.defaultPageSize);
 
     if (typeInfo && typeInfo.definitions.size > 0) {
       await page.close();
-      return await renderMultiPass(browser, html, typeInfo, new Logger(false), options?.debug);
+      return stampPDFMetadata(await renderMultiPass(browser, html, typeInfo, new Logger(false), options?.debug));
     }
 
-    const result = await renderSinglePass(browser, html, page, new Logger(false), options?.debug, options?.landscape, options?.defaultPageSize);
+    const result = await renderSinglePass(browser, html, page, new Logger(false), options?.debug, options?.landscape, options?.defaultPageSize, undefined, options?.margins);
     await page.close();
-    return result;
+    return stampPDFMetadata(result);
   } catch (err) {
     await page.close().catch(() => {});
     throw err;
diff --git a/cli/src/utils/pdf-security.ts b/cli/src/utils/pdf-security.ts
new file mode 100644
index 0000000..5fcedd5
--- /dev/null
+++ b/cli/src/utils/pdf-security.ts
@@ -0,0 +1,214 @@
+import { readFile } from 'fs/promises';
+import {
+  PDFDocument, PDFName, PDFDict, PDFArray,
+  PDFString, PDFHexString, PDFObject,
+} from 'pdf-lib';
+import {
+  DEFAULT_SIGNATURE_LENGTH,
+  DEFAULT_BYTE_RANGE_PLACEHOLDER,
+  SIG_FLAGS,
+  ANNOTATION_FLAGS,
+} from '@signpdf/utils';
+import { Logger } from './logger.js';
+
+export interface PDFEncryptionOptions {
+  userPassword?: string;
+  ownerPassword: string;
+  permissions?: {
+    print?: boolean;
+    modify?: boolean;
+    copy?: boolean;
+    annotate?: boolean;
+  };
+}
+
+export interface PDFSignatureOptions {
+  certPath?: string;
+  certPassword?: string;
+  selfSigned?: boolean;
+  reason?: string;
+  name?: string;
+  location?: string;
+  timestampUrl?: string;
+}
+
+interface PDFSecurityOptions {
+  encryption?: PDFEncryptionOptions;
+  signature?: PDFSignatureOptions;
+}
+
+class PDFRawLiteral extends PDFObject {
+  private text: string;
+  constructor(text: string) { super(); this.text = text; }
+  toString() { return this.text; }
+  sizeInBytes() { return this.text.length; }
+  copyBytesInto(buffer: Uint8Array, offset: number) {
+    const bytes = Buffer.from(this.text);
+    for (let i = 0; i < bytes.length; i++) buffer[offset + i] = bytes[i];
+    return this.text.length;
+  }
+  clone() { return new PDFRawLiteral(this.text); }
+}
+
+export async function applyPDFSecurity(
+  buffer: Buffer,
+  options: PDFSecurityOptions,
+  logger: Logger = new Logger(),
+): Promise<Buffer> {
+  let result = buffer;
+  if (options.signature) {
+    const hasCert = options.signature.certPath || options.signature.selfSigned;
+    if (hasCert) {
+      const method = options.signature.selfSigned ? 'self-signed' : 'PKCS#7';
+      const t0 = performance.now();
+      result = await signPDF(result, options.signature);
+      logger.info(`Signed PDF (${method}) in ${(performance.now() - t0).toFixed(0)}ms`);
+    }
+    if (options.signature.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`);
+    }
+  }
+  if (options.encryption) {
+    const t0 = performance.now();
+    result = await encryptPDF(result, options.encryption);
+    logger.info(`Encrypted PDF (AES-256) in ${(performance.now() - t0).toFixed(0)}ms`);
+  }
+  return result;
+}
+
+async function encryptPDF(buffer: Buffer, options: PDFEncryptionOptions): Promise<Buffer> {
+  const { encryptPDF: encrypt } = await import('@pdfsmaller/pdf-encrypt');
+  const perms = options.permissions ?? {};
+  const encrypted = await encrypt(new Uint8Array(buffer), options.userPassword ?? '', {
+    ownerPassword: options.ownerPassword,
+    algorithm: 'AES-256',
+    allowPrinting: perms.print ?? true,
+    allowModifying: perms.modify ?? false,
+    allowCopying: perms.copy ?? false,
+    allowAnnotating: perms.annotate ?? false,
+  });
+  return Buffer.from(encrypted);
+}
+
+function generateSelfSignedP12(name: string): { buffer: Buffer; password: string } {
+  const forge = require('node-forge');
+  const keys = forge.pki.rsa.generateKeyPair(2048);
+  const cert = forge.pki.createCertificate();
+  cert.publicKey = keys.publicKey;
+  cert.serialNumber = '01';
+  cert.validity.notBefore = new Date();
+  cert.validity.notAfter = new Date();
+  cert.validity.notAfter.setFullYear(cert.validity.notAfter.getFullYear() + 1);
+  const attrs = [{ name: 'commonName', value: name || 'Facet Self-Signed' }];
+  cert.setSubject(attrs);
+  cert.setIssuer(attrs);
+  cert.sign(keys.privateKey, forge.md.sha256.create());
+  const password = '';
+  const p12Asn1 = forge.pkcs12.toPkcs12Asn1(keys.privateKey, [cert], password);
+  return { buffer: Buffer.from(forge.asn1.toDer(p12Asn1).getBytes(), 'binary'), password };
+}
+
+function addSignaturePlaceholder(doc: PDFDocument, options: PDFSignatureOptions): void {
+  const ctx = doc.context;
+  const page = doc.getPage(0);
+  const { width } = page.getSize();
+
+  const byteRangePlaceholder = `/${DEFAULT_BYTE_RANGE_PLACEHOLDER}`;
+  const byteRange = new PDFRawLiteral(
+    `[0 ${byteRangePlaceholder} ${byteRangePlaceholder} ${byteRangePlaceholder}]`,
+  );
+  const contentsPlaceholder = PDFHexString.of('0'.repeat(DEFAULT_SIGNATURE_LENGTH * 2));
+
+  const sigValueDict = ctx.obj({
+    Type: 'Sig',
+    Filter: 'Adobe.PPKLite',
+    SubFilter: 'adbe.pkcs7.detached',
+    Reason: PDFString.of(options.reason ?? 'Document signed'),
+    Name: PDFString.of(options.name ?? ''),
+    Location: PDFString.of(options.location ?? ''),
+    M: PDFString.of(new Date().toISOString()),
+  });
+  sigValueDict.set(PDFName.of('ByteRange'), byteRange);
+  sigValueDict.set(PDFName.of('Contents'), contentsPlaceholder);
+  const sigValueRef = ctx.register(sigValueDict);
+
+  // Widget annotation — bottom-left corner, 100x30
+  const widgetDict = ctx.obj({
+    Type: 'Annot',
+    Subtype: 'Widget',
+    FT: 'Sig',
+    Rect: [0, 0, Math.min(100, width), 30],
+    V: sigValueRef,
+    T: PDFString.of('Signature1'),
+    F: ANNOTATION_FLAGS.PRINT,
+    P: page.ref,
+  });
+  const widgetRef = ctx.register(widgetDict);
+
+  // Rebuild the page dict to add Annots cleanly (avoids pdf-lib raw-bytes bug)
+  const oldPageDict = page.node;
+  const newPageDict = ctx.obj({}) as PDFDict;
+  for (const [key, value] of oldPageDict.entries()) {
+    newPageDict.set(key, value);
+  }
+  const existingAnnots = oldPageDict.lookup(PDFName.of('Annots'));
+  if (existingAnnots instanceof PDFArray) {
+    existingAnnots.push(widgetRef);
+    newPageDict.set(PDFName.of('Annots'), existingAnnots);
+  } else {
+    newPageDict.set(PDFName.of('Annots'), ctx.obj([widgetRef]));
+  }
+  ctx.assign(page.ref, newPageDict);
+
+  // Rebuild catalog to avoid pdf-lib's raw-bytes serialization bug where
+  // appending a new key to a loaded dict places it after the closing ">>".
+  const oldCatalog = ctx.lookup(ctx.trailerInfo.Root) as PDFDict;
+  const newCatalog = ctx.obj({}) as PDFDict;
+  for (const [key, value] of oldCatalog.entries()) {
+    newCatalog.set(key, value);
+  }
+  newCatalog.set(PDFName.of('AcroForm'), ctx.obj({
+    SigFlags: SIG_FLAGS.SIGNATURES_EXIST | SIG_FLAGS.APPEND_ONLY,
+    Fields: [widgetRef],
+  }));
+  ctx.assign(ctx.trailerInfo.Root, newCatalog);
+}
+
+async function signPDF(buffer: Buffer, options: PDFSignatureOptions): Promise<Buffer> {
+  const { P12Signer } = await import('@signpdf/signer-p12');
+  const { SignPdf } = await import('@signpdf/signpdf');
+  const signpdf = new SignPdf();
+
+  let p12Buffer: Buffer;
+  let passphrase: string;
+
+  if (options.selfSigned) {
+    const generated = generateSelfSignedP12(options.name ?? '');
+    p12Buffer = generated.buffer;
+    passphrase = generated.password;
+  } else if (options.certPath) {
+    p12Buffer = await readFile(options.certPath);
+    passphrase = options.certPassword ?? '';
+  } else {
+    throw new Error('Either certPath or selfSigned must be provided for signing');
+  }
+
+  const signer = new P12Signer(p12Buffer, { passphrase });
+
+  const doc = await PDFDocument.load(buffer);
+  addSignaturePlaceholder(doc, options);
+  const pdfWithPlaceholder = Buffer.from(await doc.save({ useObjectStreams: false }));
+
+  return await signpdf.sign(pdfWithPlaceholder, signer);
+}
+
+async function timestampPDF(buffer: Buffer, tsaUrl: string): Promise<Buffer> {
+  const { timestampPdf } = await import('pdf-rfc3161');
+  const result = await timestampPdf({
+    pdf: new Uint8Array(buffer),
+    tsa: { url: tsaUrl },
+  });
+  return Buffer.from(result.pdf);
+}
diff --git a/cli/test/pdf-security.test.ts b/cli/test/pdf-security.test.ts
new file mode 100644
index 0000000..f81c6b6
--- /dev/null
+++ b/cli/test/pdf-security.test.ts
@@ -0,0 +1,224 @@
+import { join } from 'path';
+import { mkdtemp, writeFile, rm } from 'fs/promises';
+import { tmpdir } from 'os';
+import { execFile } from 'child_process';
+import { promisify } from 'util';
+import * as forge from 'node-forge';
+import { createServer, type ServerHandle } from '../src/server/preview.js';
+
+const exec = promisify(execFile);
+
+const EXAMPLES_DIR = join(__dirname, '../examples');
+const REPO_ROOT = join(__dirname, '../..');
+process.env['FACET_PACKAGE_PATH'] = REPO_ROOT;
+
+const SIMPLE_CODE = `
+import React from 'react';
+export default function Template({ data }: { data: any }) {
+  return <html><body><h1>{data.title || 'Test'}</h1></body></html>;
+}`;
+
+function generateTestP12(password: string): Buffer {
+  const keys = forge.pki.rsa.generateKeyPair(2048);
+  const cert = forge.pki.createCertificate();
+  cert.publicKey = keys.publicKey;
+  cert.serialNumber = '01';
+  cert.validity.notBefore = new Date();
+  cert.validity.notAfter = new Date();
+  cert.validity.notAfter.setFullYear(cert.validity.notAfter.getFullYear() + 1);
+  const attrs = [{ name: 'commonName', value: 'Test Signer' }];
+  cert.setSubject(attrs);
+  cert.setIssuer(attrs);
+  cert.sign(keys.privateKey, forge.md.sha256.create());
+  const p12Asn1 = forge.pkcs12.toPkcs12Asn1(keys.privateKey, [cert], password);
+  const p12Der = forge.asn1.toDer(p12Asn1).getBytes();
+  return Buffer.from(p12Der, 'binary');
+}
+
+async function savePdf(pdfBytes: Buffer, dir: string, name: string): Promise<string> {
+  const path = join(dir, `${name}.pdf`);
+  await writeFile(path, pdfBytes);
+  return path;
+}
+
+async function fetchPdfFromRender(serverUrl: string, body: Record<string, unknown>, dir: string, name: string): Promise<string> {
+  const res = await fetch(`${serverUrl}/render`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  expect(res.status).toBe(200);
+  const json = await res.json() as { url: string };
+  expect(json.url).toMatch(/^\/results\//);
+
+  const pdfRes = await fetch(`${serverUrl}${json.url}`);
+  expect(pdfRes.status).toBe(200);
+  expect(pdfRes.headers.get('content-type')).toContain('application/pdf');
+  return savePdf(Buffer.from(await pdfRes.arrayBuffer()), dir, name);
+}
+
+async function pdfsig(nssDir: string, pdfPath: string, opts?: { opw?: string }): Promise<string> {
+  const args = ['-nssdir', nssDir, '-nocert', pdfPath];
+  if (opts?.opw) args.splice(3, 0, '-opw', opts.opw);
+  const { stdout, stderr } = await exec('pdfsig', args).catch(e => ({
+    stdout: e.stdout ?? '',
+    stderr: e.stderr ?? '',
+  }));
+  return stdout + stderr;
+}
+
+async function pdfinfo(pdfPath: string, opts?: { opw?: string; upw?: string }): Promise<string> {
+  const args = [pdfPath];
+  if (opts?.opw) args.unshift('-opw', opts.opw);
+  if (opts?.upw) args.unshift('-upw', opts.upw);
+  const { stdout } = await exec('pdfinfo', args);
+  return stdout;
+}
+
+describe('PDF Security', () => {
+  let server: ServerHandle;
+  let certDir: string;
+  let certPath: string;
+  let tmpDir: string;
+  let nssDir: string;
+  const certPassword = 'test-pass';
+
+  beforeAll(async () => {
+    certDir = await mkdtemp(join(tmpdir(), 'facet-cert-'));
+    tmpDir = await mkdtemp(join(tmpdir(), 'facet-pdf-'));
+    nssDir = await mkdtemp(join(tmpdir(), 'facet-nss-'));
+    certPath = join(certDir, 'test-cert.p12');
+    await writeFile(certPath, generateTestP12(certPassword));
+
+    await exec('certutil', ['-N', '-d', nssDir, '--empty-password']);
+
+    server = await createServer({
+      port: 0,
+      templatesDir: EXAMPLES_DIR,
+      workers: 1,
+      renderTimeout: 60000,
+      maxUploadSize: 52428800,
+      cacheMaxSize: 104857600,
+      verbose: false,
+    });
+  }, 30000);
+
+  afterAll(async () => {
+    await server?.stop();
+    await rm(certDir, { recursive: true, force: true }).catch(() => {});
+    await rm(tmpDir, { recursive: true, force: true }).catch(() => {});
+    await rm(nssDir, { recursive: true, force: true }).catch(() => {});
+  }, 15000);
+
+  test('encryption with owner password only', async () => {
+    const path = await fetchPdfFromRender(server.url, {
+      code: SIMPLE_CODE,
+      format: 'pdf',
+      data: { title: 'Encrypted' },
+      encryption: { ownerPassword: 'admin' },
+    }, tmpDir, 'enc-owner');
+    const info = await pdfinfo(path, { opw: 'admin' });
+    expect(info).toMatch(/Encrypted:\s+yes/);
+  }, 60000);
+
+  test('encryption with user + owner password', async () => {
+    const path = await fetchPdfFromRender(server.url, {
+      code: SIMPLE_CODE,
+      format: 'pdf',
+      data: { title: 'Locked' },
+      encryption: { userPassword: 'open-me', ownerPassword: 'admin' },
+    }, tmpDir, 'enc-user');
+    const info = await pdfinfo(path, { opw: 'admin' });
+    expect(info).toMatch(/Encrypted:\s+yes/);
+
+    // pdfinfo without password should fail
+    await expect(pdfinfo(path)).rejects.toThrow();
+  }, 60000);
+
+  test('encryption with restricted permissions', async () => {
+    const path = await fetchPdfFromRender(server.url, {
+      code: SIMPLE_CODE,
+      format: 'pdf',
+      data: { title: 'Restricted' },
+      encryption: {
+        ownerPassword: 'admin',
+        permissions: { print: false, copy: false },
+      },
+    }, tmpDir, 'enc-restricted');
+    const info = await pdfinfo(path, { opw: 'admin' });
+    expect(info).toMatch(/Encrypted:\s+yes/);
+    expect(info).toMatch(/print:no/i);
+    expect(info).toMatch(/copy:no/i);
+  }, 60000);
+
+  test('digital signature', async () => {
+    const path = await fetchPdfFromRender(server.url, {
+      code: SIMPLE_CODE,
+      format: 'pdf',
+      data: { title: 'Signed' },
+      signature: { certPath, certPassword },
+    }, tmpDir, 'signed');
+    const sig = await pdfsig(nssDir, path);
+    expect(sig).toMatch(/Signature #1/);
+    expect(sig).toMatch(/Signer Certificate Common Name: Test Signer/);
+    expect(sig).toMatch(/Total document signed/i);
+  }, 60000);
+
+  const canNetwork = process.env.CI !== 'true';
+
+  (canNetwork ? test : test.skip)('timestamp-only signature', async () => {
+    const path = await fetchPdfFromRender(server.url, {
+      code: SIMPLE_CODE,
+      format: 'pdf',
+      data: { title: 'Timestamp Only' },
+      signature: { timestampUrl: 'http://timestamp.digicert.com' },
+    }, tmpDir, 'timestamp-only');
+    const sig = await pdfsig(nssDir, path);
+    expect(sig).toMatch(/Signature #1/);
+    expect(sig).toMatch(/Total document signed/i);
+  }, 90000);
+
+  (canNetwork ? test : test.skip)('signature with timestamp', async () => {
+    const path = await fetchPdfFromRender(server.url, {
+      code: SIMPLE_CODE,
+      format: 'pdf',
+      data: { title: 'Timestamped' },
+      signature: {
+        certPath,
+        certPassword,
+        timestampUrl: 'http://timestamp.digicert.com',
+      },
+    }, tmpDir, 'timestamped');
+    const sig = await pdfsig(nssDir, path);
+    expect(sig).toMatch(/Signature #1/);
+    expect(sig).toMatch(/Total document signed/i);
+  }, 90000);
+
+  test('self-signed digital signature', async () => {
+    const path = await fetchPdfFromRender(server.url, {
+      code: SIMPLE_CODE,
+      format: 'pdf',
+      data: { title: 'Self-Signed' },
+      signature: { selfSigned: true, name: 'Test User' },
+    }, tmpDir, 'self-signed');
+    const sig = await pdfsig(nssDir, path);
+    expect(sig).toMatch(/Signature #1/);
+    expect(sig).toMatch(/Signer Certificate Common Name: Test User/);
+    expect(sig).toMatch(/Total document signed/i);
+  }, 60000);
+
+  test('encryption + signature combined', async () => {
+    const path = await fetchPdfFromRender(server.url, {
+      code: SIMPLE_CODE,
+      format: 'pdf',
+      data: { title: 'Encrypted+Signed' },
+      encryption: { ownerPassword: 'admin' },
+      signature: { certPath, certPassword },
+    }, tmpDir, 'enc-signed');
+    const info = await pdfinfo(path, { opw: 'admin' });
+    expect(info).toMatch(/Encrypted:\s+yes/);
+
+    const sig = await pdfsig(nssDir, path, { opw: 'admin' });
+    expect(sig).toMatch(/Signature #1/);
+  }, 60000);
+});
diff --git a/cli/test/render-api.test.ts b/cli/test/render-api.test.ts
index c57de14..226157f 100644
--- a/cli/test/render-api.test.ts
+++ b/cli/test/render-api.test.ts
@@ -35,6 +35,7 @@ describe('Render API', () => {
       workers: 1,
       renderTimeout: 60000,
       maxUploadSize: 52428800,
+      cacheMaxSize: 104857600,
       verbose: false,
     });
   }, 30000);
@@ -100,9 +101,14 @@ describe('Render API', () => {
       }),
     });
     expect(res.status).toBe(200);
-    expect(res.headers.get('content-type')).toContain('application/pdf');
+    const json = await res.json() as { url: string };
+    expect(json.url).toMatch(/^\/results\//);
 
-    const pdfBytes = Buffer.from(await res.arrayBuffer());
+    const pdfRes = await fetch(`${server.url}${json.url}`);
+    expect(pdfRes.status).toBe(200);
+    expect(pdfRes.headers.get('content-type')).toContain('application/pdf');
+
+    const pdfBytes = Buffer.from(await pdfRes.arrayBuffer());
     expect(pdfBytes.length).toBeGreaterThan(1000);
 
     const doc = await PDFDocument.load(pdfBytes);
@@ -143,9 +149,14 @@ export default function InlineTemplate({ data }: { data: any }) {
       body: formData,
     });
     expect(res.status).toBe(200);
-    expect(res.headers.get('content-type')).toContain('application/pdf');
+    const json = await res.json() as { url: string };
+    expect(json.url).toMatch(/^\/results\//);
+
+    const pdfRes = await fetch(`${server.url}${json.url}`);
+    expect(pdfRes.status).toBe(200);
+    expect(pdfRes.headers.get('content-type')).toContain('application/pdf');
 
-    const pdfBytes = Buffer.from(await res.arrayBuffer());
+    const pdfBytes = Buffer.from(await pdfRes.arrayBuffer());
     expect(pdfBytes.length).toBeGreaterThan(1000);
 
     const doc = await PDFDocument.load(pdfBytes);
@@ -166,7 +177,10 @@ export default function InlineTemplate({ data }: { data: any }) {
       }),
     });
     expect(res.status).toBe(200);
-    const pdfBytes = Buffer.from(await res.arrayBuffer());
+    const json = await res.json() as { url: string };
+    const pdfRes = await fetch(`${server.url}${json.url}`);
+    expect(pdfRes.status).toBe(200);
+    const pdfBytes = Buffer.from(await pdfRes.arrayBuffer());
 
     const tmpDir = await mkdtemp(join(tmpdir(), 'facet-magick-'));
     const pdfPath = join(tmpDir, 'output.pdf');
@@ -204,6 +218,92 @@ export default function InlineTemplate({ data }: { data: any }) {
     expect(nonWhiteCount / totalPixels).toBeGreaterThan(0.001);
   }, 60000);
 
+  test('GET / returns playground HTML', async () => {
+    const res = await fetch(`${server.url}/`);
+    expect(res.status).toBe(200);
+    expect(res.headers.get('content-type')).toContain('text/html');
+    const html = await res.text();
+    expect(html).toContain('monaco');
+    expect(html).toContain('Facet Playground');
+  });
+
+  test('POST /render with inline code returns valid HTML', async () => {
+    const code = `
+import React from 'react';
+export default function Template({ data }: { data: any }) {
+  return (
+    <html>
+      <body>
+        <h1>{data.title || 'Inline Test'}</h1>
+      </body>
+    </html>
+  );
+}`;
+    const res = await fetch(`${server.url}/render`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code, format: 'html', data: { title: 'Hello Inline' } }),
+    });
+    if (res.status !== 200) console.error('Inline render error:', await res.text());
+    expect(res.status).toBe(200);
+    expect(res.headers.get('content-type')).toContain('text/html');
+    const html = await res.text();
+    expect(html).toContain('Hello Inline');
+  }, 120000);
+
+  test('POST /render with inline code returns valid PDF', async () => {
+    const code = `
+import React from 'react';
+export default function Template({ data }: { data: any }) {
+  return (
+    <html>
+      <body>
+        <h1>{data.title || 'PDF Inline'}</h1>
+      </body>
+    </html>
+  );
+}`;
+    const res = await fetch(`${server.url}/render`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code, format: 'pdf', data: { title: 'Inline PDF' } }),
+    });
+    expect(res.status).toBe(200);
+    const json = await res.json() as { url: string };
+    expect(json.url).toMatch(/^\/results\//);
+
+    const pdfRes = await fetch(`${server.url}${json.url}`);
+    expect(pdfRes.status).toBe(200);
+    expect(pdfRes.headers.get('content-type')).toContain('application/pdf');
+    const pdfBytes = Buffer.from(await pdfRes.arrayBuffer());
+    expect(pdfBytes.length).toBeGreaterThan(1000);
+    const doc = await PDFDocument.load(pdfBytes);
+    expect(doc.getPageCount()).toBeGreaterThanOrEqual(1);
+  }, 60000);
+
+  test('POST /render/stream returns SSE with progress and result', async () => {
+    const code = `
+import React from 'react';
+export default function Template({ data }: { data: any }) {
+  return <html><body><h1>{data.msg}</h1></body></html>;
+}`;
+    const res = await fetch(`${server.url}/render/stream`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ code, format: 'html', data: { msg: 'Stream Test' } }),
+    });
+    expect(res.status).toBe(200);
+    expect(res.headers.get('content-type')).toBe('text/event-stream');
+
+    const text = await res.text();
+    // Should contain progress events
+    expect(text).toContain('"stage"');
+    expect(text).toContain('"building"');
+    // Should contain the final result event
+    expect(text).toContain('event: result');
+    expect(text).toContain('Stream Test');
+  }, 120000);
+
   test('POST /render with unknown template returns 404', async () => {
     const res = await fetch(`${server.url}/render`, {
       method: 'POST',
diff --git a/cli/tsdown.config.ts b/cli/tsdown.config.ts
index 1b53cc8..b95ef52 100644
--- a/cli/tsdown.config.ts
+++ b/cli/tsdown.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
   clean: true,
   splitting: false,
   minify: false,
-  external: ['tsx', 'puppeteer', 'vite', 'react', 'react-dom'],
+  external: ['tsx', 'puppeteer', 'vite', 'react', 'react-dom', /\.yaml$/, /\.json$/],
   platform: 'node',
   target: 'node18',
   shims: false,
diff --git a/examples/kitchen-sink/CompactTableExample.tsx b/examples/kitchen-sink/CompactTableExample.tsx
index 19c88d1..341ce5b 100644
--- a/examples/kitchen-sink/CompactTableExample.tsx
+++ b/examples/kitchen-sink/CompactTableExample.tsx
@@ -1,23 +1,11 @@
 import { CompactTable } from '@facet';
-
-const kvData = [
-  { label: 'Kubernetes', value: '1.24+' },
-  { label: 'Memory', value: '4GB minimum' },
-  { label: 'CPU', value: '2 cores minimum' },
-  { label: 'Storage', value: '20GB SSD' },
-];
+import { compactData as kvData, referenceData } from './data';
 
 const arrayData = [
   { label: 'Cloud Providers', value: ['AWS', 'Azure', 'GCP'] },
   { label: 'Kubernetes', value: ['EKS', 'AKS', 'GKE', 'OpenShift'] },
 ];
 
-const referenceData = [
-  ['search_catalog', 'Find config items', 'Show all unhealthy pods'],
-  ['get_config', 'Get item details', 'Describe deployment nginx'],
-  ['run_health_check', 'Execute check', 'Run http-check-api'],
-];
-
 export default function CompactTableExample() {
   return (
     <div className="space-y-10 p-6">
diff --git a/examples/kitchen-sink/HeaderDefault.tsx b/examples/kitchen-sink/HeaderDefault.tsx
index 333c09b..0579f0f 100644
--- a/examples/kitchen-sink/HeaderDefault.tsx
+++ b/examples/kitchen-sink/HeaderDefault.tsx
@@ -8,13 +8,7 @@ import {
 import { IoServer, IoCloudDone, IoCheckmarkCircle } from 'react-icons/io5';
 import FlanksourceHeader from './FlanksourceHeader';
 import FlanksourceFooter from './FlanksourceFooter';
-
-const specs = [
-  { category: 'Kubernetes', value: '1.24+' },
-  { category: 'PostgreSQL', value: '13+' },
-  { category: 'Memory', value: '4GB minimum' },
-  { category: 'Deployment', value: ['SaaS', 'Self-hosted', 'Hybrid'] },
-];
+import { specifications as specs, infrastructureData, releaseData } from './data';
 
 export default function HeaderDefault() {
   return (
@@ -38,17 +32,8 @@ export default function HeaderDefault() {
 
       <Page title="Infrastructure Details" margins={{ top: 5, bottom: 5 }}>
         <div className="space-y-4">
-          <CompactTable variant="compact" title="Infrastructure" data={[
-            { label: 'Kubernetes', value: '1.24+' },
-            { label: 'Memory', value: '4GB minimum' },
-            { label: 'CPU', value: '2 cores' },
-            { label: 'Storage', value: '20GB SSD' },
-          ]} />
-          <CompactTable variant="inline" title="Release" data={[
-            { label: 'Version', value: '2.0.0' },
-            { label: 'Date', value: 'March 2026' },
-            { label: 'License', value: 'Apache 2.0' },
-          ]} />
+          <CompactTable variant="compact" title="Infrastructure" data={infrastructureData} />
+          <CompactTable variant="inline" title="Release" data={releaseData} />
         </div>
       </Page>
     </DatasheetTemplate>
diff --git a/examples/kitchen-sink/HeaderMinimal.tsx b/examples/kitchen-sink/HeaderMinimal.tsx
index 24fd06a..1339bc8 100644
--- a/examples/kitchen-sink/HeaderMinimal.tsx
+++ b/examples/kitchen-sink/HeaderMinimal.tsx
@@ -8,13 +8,7 @@ import {
 import { IoServer, IoCloudDone, IoCheckmarkCircle } from 'react-icons/io5';
 import FlanksourceHeader from './FlanksourceHeader';
 import FlanksourceFooter from './FlanksourceFooter';
-
-const specs = [
-  { category: 'Kubernetes', value: '1.24+' },
-  { category: 'PostgreSQL', value: '13+' },
-  { category: 'Memory', value: '4GB minimum' },
-  { category: 'Deployment', value: ['SaaS', 'Self-hosted', 'Hybrid'] },
-];
+import { specifications as specs, infrastructureData } from './data';
 
 export default function HeaderMinimal() {
   return (
@@ -37,12 +31,7 @@ export default function HeaderMinimal() {
 
       <Page title="Infrastructure Details" margins={{ top: 5, bottom: 5 }}>
         <div className="space-y-4">
-          <CompactTable variant="compact" title="Infrastructure" data={[
-            { label: 'Kubernetes', value: '1.24+' },
-            { label: 'Memory', value: '4GB minimum' },
-            { label: 'CPU', value: '2 cores' },
-            { label: 'Storage', value: '20GB SSD' },
-          ]} />
+          <CompactTable variant="compact" title="Infrastructure" data={infrastructureData} />
         </div>
       </Page>
     </DatasheetTemplate>
diff --git a/examples/kitchen-sink/HeaderNone.tsx b/examples/kitchen-sink/HeaderNone.tsx
index a8da2ee..d1811de 100644
--- a/examples/kitchen-sink/HeaderNone.tsx
+++ b/examples/kitchen-sink/HeaderNone.tsx
@@ -7,13 +7,7 @@ import {
 } from '@flanksource/facet';
 import { IoServer, IoCloudDone, IoCheckmarkCircle } from 'react-icons/io5';
 import FlanksourceFooter from './FlanksourceFooter';
-
-const specs = [
-  { category: 'Kubernetes', value: '1.24+' },
-  { category: 'PostgreSQL', value: '13+' },
-  { category: 'Memory', value: '4GB minimum' },
-  { category: 'Deployment', value: ['SaaS', 'Self-hosted', 'Hybrid'] },
-];
+import { specifications as specs, infrastructureData } from './data';
 
 export default function HeaderNone() {
   return (
@@ -35,12 +29,7 @@ export default function HeaderNone() {
 
       <Page title="Infrastructure Details" margins={{ top: 5, bottom: 5 }}>
         <div className="space-y-4">
-          <CompactTable variant="compact" title="Infrastructure" data={[
-            { label: 'Kubernetes', value: '1.24+' },
-            { label: 'Memory', value: '4GB minimum' },
-            { label: 'CPU', value: '2 cores' },
-            { label: 'Storage', value: '20GB SSD' },
-          ]} />
+          <CompactTable variant="compact" title="Infrastructure" data={infrastructureData} />
         </div>
       </Page>
     </DatasheetTemplate>
diff --git a/examples/kitchen-sink/HeaderSolid.tsx b/examples/kitchen-sink/HeaderSolid.tsx
index 08ceea3..7f449c5 100644
--- a/examples/kitchen-sink/HeaderSolid.tsx
+++ b/examples/kitchen-sink/HeaderSolid.tsx
@@ -8,13 +8,7 @@ import {
 import { IoServer, IoCloudDone, IoCheckmarkCircle } from 'react-icons/io5';
 import FlanksourceHeader from './FlanksourceHeader';
 import FlanksourceFooter from './FlanksourceFooter';
-
-const specs = [
-  { category: 'Kubernetes', value: '1.24+' },
-  { category: 'PostgreSQL', value: '13+' },
-  { category: 'Memory', value: '4GB minimum' },
-  { category: 'Deployment', value: ['SaaS', 'Self-hosted', 'Hybrid'] },
-];
+import { specifications as specs, infrastructureData, releaseData } from './data';
 
 export default function HeaderSolid() {
   return (
@@ -44,17 +38,8 @@ export default function HeaderSolid() {
         margins={{ top: 5, bottom: 5 }}
       >
         <div className="space-y-4">
-          <CompactTable variant="compact" title="Infrastructure" data={[
-            { label: 'Kubernetes', value: '1.24+' },
-            { label: 'Memory', value: '4GB minimum' },
-            { label: 'CPU', value: '2 cores' },
-            { label: 'Storage', value: '20GB SSD' },
-          ]} />
-          <CompactTable variant="inline" title="Release" data={[
-            { label: 'Version', value: '2.0.0' },
-            { label: 'Date', value: 'March 2026' },
-            { label: 'License', value: 'Apache 2.0' },
-          ]} />
+          <CompactTable variant="compact" title="Infrastructure" data={infrastructureData} />
+          <CompactTable variant="inline" title="Release" data={releaseData} />
         </div>
       </Page>
 
diff --git a/examples/kitchen-sink/LogoGridTableExample.tsx b/examples/kitchen-sink/LogoGridTableExample.tsx
index 4f2b73c..88cfe70 100644
--- a/examples/kitchen-sink/LogoGridTableExample.tsx
+++ b/examples/kitchen-sink/LogoGridTableExample.tsx
@@ -1,10 +1,8 @@
 import { LogoGrid } from '@facet';
+import { logos as baseLogos } from './data';
 
 const logos = [
-  { name: 'Prometheus', health: true, configuration: false, change: false, playbooks: true },
-  { name: 'Kubernetes', health: true, configuration: true, change: true, playbooks: true },
-  { name: 'Datadog', health: true, configuration: true, change: true, playbooks: true },
-  { name: 'Flux', health: false, configuration: true, change: true, playbooks: true },
+  ...baseLogos,
   { name: 'ArgoCD', health: true, configuration: true, change: false, playbooks: false },
 ];
 
diff --git a/examples/kitchen-sink/SecurityChecksTableExample.tsx b/examples/kitchen-sink/SecurityChecksTableExample.tsx
index 98d3b11..0d76a12 100644
--- a/examples/kitchen-sink/SecurityChecksTableExample.tsx
+++ b/examples/kitchen-sink/SecurityChecksTableExample.tsx
@@ -1,37 +1,12 @@
 import { SecurityChecksTable } from '@facet';
+import { securityChecks as baseChecks } from './data';
 
 const checks = [
-  {
-    name: 'Code-Review',
-    score: 10,
-    reason: 'All commits require code review',
-    details: ['Info: Branch protection enabled', 'Info: CODEOWNERS file present'],
-    documentation: { url: 'https://github.com/ossf/scorecard/blob/main/docs/checks.md#code-review' },
-  },
-  {
-    name: 'Maintained',
-    score: 10,
-    reason: 'Project is actively maintained with recent commits',
-    details: ['Info: 47 commits in last 90 days'],
-  },
-  {
-    name: 'Vulnerabilities',
-    score: 8,
-    reason: '2 vulnerabilities found',
-    details: ['Warn: 1 medium severity vulnerability in dependencies'],
-  },
-  {
-    name: 'Dependency-Update-Tool',
-    score: 0,
-    reason: 'No dependency update tool detected',
-    details: ['Warn: Consider using Dependabot or Renovate'],
-  },
-  {
-    name: 'Signed-Releases',
-    score: 5,
-    reason: 'Releases are not signed',
-    details: ['Warn: No cryptographic signatures found on releases'],
-  },
+  { ...baseChecks[0], reason: 'All commits require code review', details: ['Info: Branch protection enabled', 'Info: CODEOWNERS file present'], documentation: { url: 'https://github.com/ossf/scorecard/blob/main/docs/checks.md#code-review' } },
+  { name: 'Maintained', score: 10, reason: 'Project is actively maintained with recent commits', details: ['Info: 47 commits in last 90 days'] },
+  { ...baseChecks[1], details: ['Warn: 1 medium severity vulnerability in dependencies'] },
+  { ...baseChecks[2], reason: 'No dependency update tool detected', details: ['Warn: Consider using Dependabot or Renovate'] },
+  { ...baseChecks[3], reason: 'Releases are not signed', details: ['Warn: No cryptographic signatures found on releases'] },
 ];
 
 export default function SecurityChecksTableExample() {
diff --git a/examples/kitchen-sink/SpecificationTableExample.tsx b/examples/kitchen-sink/SpecificationTableExample.tsx
index 5c21a06..1818236 100644
--- a/examples/kitchen-sink/SpecificationTableExample.tsx
+++ b/examples/kitchen-sink/SpecificationTableExample.tsx
@@ -1,10 +1,8 @@
 import { SpecificationTable } from '@facet';
+import { specifications as baseSpecs } from './data';
 
 const specifications = [
-  { category: 'Kubernetes', value: '1.24+' },
-  { category: 'PostgreSQL', value: '13+' },
-  { category: 'Memory', value: '4GB minimum' },
-  { category: 'Deployment Models', value: ['SaaS', 'Self-hosted', 'Hybrid'] },
+  ...baseSpecs,
   { category: 'Authentication', value: ['SSO', 'SAML', 'OIDC'] },
 ];
 
diff --git a/examples/kitchen-sink/UberKitchenSink.tsx b/examples/kitchen-sink/UberKitchenSink.tsx
index e86e4f8..825c723 100644
--- a/examples/kitchen-sink/UberKitchenSink.tsx
+++ b/examples/kitchen-sink/UberKitchenSink.tsx
@@ -33,40 +33,14 @@ import {
 } from 'react-icons/io5';
 import FlanksourceHeader from './FlanksourceHeader';
 import FlanksourceFooter from './FlanksourceFooter';
-
-const compactData = [
-  { label: 'Kubernetes', value: '1.24+' },
-  { label: 'Memory', value: '4GB minimum' },
-  { label: 'CPU', value: '2 cores minimum' },
-  { label: 'Storage', value: '20GB SSD' },
-];
-
-const referenceData = [
-  ['search_catalog', 'Find config items', 'Show all unhealthy pods'],
-  ['get_config', 'Get item details', 'Describe deployment nginx'],
-  ['run_health_check', 'Execute check', 'Run http-check-api'],
-];
-
-const securityChecks = [
-  { name: 'Code-Review', score: 10, reason: 'All commits require review', details: ['Info: Branch protection enabled'] },
-  { name: 'Vulnerabilities', score: 8, reason: '2 vulnerabilities found', details: ['Warn: 1 medium severity'] },
-  { name: 'Dependency-Update-Tool', score: 0, reason: 'No tool detected', details: ['Warn: Consider Dependabot'] },
-  { name: 'Signed-Releases', score: 5, reason: 'Releases partially signed', details: [] },
-];
-
-const specifications = [
-  { category: 'Kubernetes', value: '1.24+' },
-  { category: 'PostgreSQL', value: '13+' },
-  { category: 'Memory', value: '4GB minimum' },
-  { category: 'Deployment Models', value: ['SaaS', 'Self-hosted', 'Hybrid'] },
-];
-
-const logos = [
-  { name: 'Prometheus', health: true, configuration: false, change: false, playbooks: true },
-  { name: 'Kubernetes', health: true, configuration: true, change: true, playbooks: true },
-  { name: 'Datadog', health: true, configuration: true, change: true, playbooks: true },
-  { name: 'Flux', health: false, configuration: true, change: true, playbooks: true },
-];
+import {
+  compactData,
+  referenceData,
+  securityChecks,
+  specifications,
+  logos,
+  releaseData,
+} from './data';
 
 export default function UberKitchenSink() {
   return (
@@ -83,11 +57,7 @@ export default function UberKitchenSink() {
             <StatCard variant="bordered" value="3" label="Alerts" icon={IoShieldCheckmark} color="red" size="sm" />
           </div>
           <SpecificationTable title="System Requirements" specifications={specifications} />
-          <CompactTable variant="inline" title="Release Info" data={[
-            { label: 'Version', value: '2.0.0' },
-            { label: 'Date', value: 'March 2026' },
-            { label: 'License', value: 'Apache 2.0' },
-          ]} />
+          <CompactTable variant="inline" title="Release Info" data={releaseData} />
         </div>
       </Page>
 
@@ -221,11 +191,7 @@ export default function UberKitchenSink() {
 
       <Page title="Summary" product="Mission Control" watermark="DRAFT" margins={{ top: 5, bottom: 5 }}>
         <div className="space-y-4">
-          <CompactTable variant="inline" title="Document Info" data={[
-            { label: 'Version', value: '2.0.0' },
-            { label: 'Date', value: 'March 2026' },
-            { label: 'Classification', value: 'Draft' },
-          ]} />
+          <CompactTable variant="inline" title="Document Info" data={releaseData} />
           <CompactTable variant="compact" title="Large (md)" data={compactData} size="md" />
           <SpecificationTable title="Technical Specs (base)" specifications={specifications} size="base" />
         </div>
diff --git a/examples/kitchen-sink/data.ts b/examples/kitchen-sink/data.ts
new file mode 100644
index 0000000..264967f
--- /dev/null
+++ b/examples/kitchen-sink/data.ts
@@ -0,0 +1,46 @@
+export const compactData = [
+  { label: 'Kubernetes', value: '1.24+' },
+  { label: 'Memory', value: '4GB minimum' },
+  { label: 'CPU', value: '2 cores minimum' },
+  { label: 'Storage', value: '20GB SSD' },
+];
+
+export const infrastructureData = [
+  { label: 'Kubernetes', value: '1.24+' },
+  { label: 'Memory', value: '4GB minimum' },
+  { label: 'CPU', value: '2 cores' },
+  { label: 'Storage', value: '20GB SSD' },
+];
+
+export const releaseData = [
+  { label: 'Version', value: '2.0.0' },
+  { label: 'Date', value: 'March 2026' },
+  { label: 'License', value: 'Apache 2.0' },
+];
+
+export const referenceData = [
+  ['search_catalog', 'Find config items', 'Show all unhealthy pods'],
+  ['get_config', 'Get item details', 'Describe deployment nginx'],
+  ['run_health_check', 'Execute check', 'Run http-check-api'],
+];
+
+export const specifications = [
+  { category: 'Kubernetes', value: '1.24+' },
+  { category: 'PostgreSQL', value: '13+' },
+  { category: 'Memory', value: '4GB minimum' },
+  { category: 'Deployment Models', value: ['SaaS', 'Self-hosted', 'Hybrid'] },
+];
+
+export const securityChecks = [
+  { name: 'Code-Review', score: 10, reason: 'All commits require review', details: ['Info: Branch protection enabled'] },
+  { name: 'Vulnerabilities', score: 8, reason: '2 vulnerabilities found', details: ['Warn: 1 medium severity'] },
+  { name: 'Dependency-Update-Tool', score: 0, reason: 'No tool detected', details: ['Warn: Consider Dependabot'] },
+  { name: 'Signed-Releases', score: 5, reason: 'Releases partially signed', details: [] as string[] },
+];
+
+export const logos = [
+  { name: 'Prometheus', health: true, configuration: false, change: false, playbooks: true },
+  { name: 'Kubernetes', health: true, configuration: true, change: true, playbooks: true },
+  { name: 'Datadog', health: true, configuration: true, change: true, playbooks: true },
+  { name: 'Flux', health: false, configuration: true, change: true, playbooks: true },
+];
diff --git a/openapi.yaml b/openapi.yaml
new file mode 100644
index 0000000..e22c9a4
--- /dev/null
+++ b/openapi.yaml
@@ -0,0 +1,456 @@
+openapi: 3.1.0
+info:
+  title: Facet Render API
+  description: API for rendering React templates to HTML and PDF.
+  version: 0.1.23
+  license:
+    name: Apache 2.0
+    url: https://www.apache.org/licenses/LICENSE-2.0
+
+servers:
+  - url: http://localhost:3010
+    description: Local development server
+
+security: []
+
+paths:
+  /healthz:
+    get:
+      operationId: healthz
+      summary: Health check
+      description: Returns server health and worker pool status.
+      responses:
+        "200":
+          description: Server is healthy.
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                    example: ok
+                  workers:
+                    type: object
+                    description: Worker pool statistics.
+
+  /templates:
+    get:
+      operationId: listTemplates
+      summary: List available templates
+      description: Returns templates discovered in the configured templates directory.
+      security:
+        - apiKey: []
+        - bearerAuth: []
+      responses:
+        "200":
+          description: List of templates.
+          content:
+            application/json:
+              schema:
+                type: array
+                items:
+                  $ref: "#/components/schemas/TemplateInfo"
+        "401":
+          $ref: "#/components/responses/Unauthorized"
+
+  /render:
+    post:
+      operationId: render
+      summary: Render a template
+      description: |
+        Renders a template to HTML or PDF synchronously. The response body is
+        the rendered output (HTML or PDF binary), or a JSON object with S3 URLs
+        when `output: "s3"` is used.
+
+        Supports three input modes:
+        - **JSON** with inline code or template name
+        - **Multipart** with an uploaded archive
+        - **Gzip** body with a tar.gz archive
+      security:
+        - apiKey: []
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/RenderRequest"
+          multipart/form-data:
+            schema:
+              $ref: "#/components/schemas/MultipartRenderRequest"
+          application/gzip:
+            schema:
+              type: string
+              format: binary
+      parameters:
+        - name: format
+          in: query
+          schema:
+            type: string
+            enum: [html, pdf]
+          description: Output format (gzip mode only).
+        - name: output
+          in: query
+          schema:
+            type: string
+            enum: [direct, s3]
+          description: Output destination (gzip mode only).
+        - name: entryFile
+          in: query
+          schema:
+            type: string
+          description: Entry file within archive (gzip mode only).
+        - name: X-Facet-Data
+          in: header
+          schema:
+            type: string
+          description: Base64-encoded JSON data (gzip mode only).
+      responses:
+        "200":
+          description: |
+            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.
+          content:
+            text/html:
+              schema:
+                type: string
+            application/json:
+              schema:
+                oneOf:
+                  - $ref: "#/components/schemas/PDFRenderResult"
+                  - $ref: "#/components/schemas/S3UploadResult"
+        "400":
+          $ref: "#/components/responses/BadRequest"
+        "401":
+          $ref: "#/components/responses/Unauthorized"
+        "404":
+          $ref: "#/components/responses/NotFound"
+        "504":
+          $ref: "#/components/responses/Timeout"
+
+  /render/stream:
+    post:
+      operationId: renderStream
+      summary: Render with streaming progress
+      description: |
+        Same as `/render` but returns a Server-Sent Events stream with progress
+        updates followed by the final result. Used by the playground.
+
+        **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: error` — render error with `message`
+      security:
+        - apiKey: []
+        - bearerAuth: []
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/RenderRequest"
+      responses:
+        "200":
+          description: SSE stream of progress events and final result.
+          content:
+            text/event-stream:
+              schema:
+                type: string
+        "400":
+          $ref: "#/components/responses/BadRequest"
+        "401":
+          $ref: "#/components/responses/Unauthorized"
+
+  /results/{id}:
+    get:
+      operationId: getResult
+      summary: Get cached render result
+      description: |
+        Serves a previously rendered result from the disk cache. The `id` is a
+        16-character hex cache key returned in the `url` field of streaming
+        render results.
+      security:
+        - apiKey: []
+        - bearerAuth: []
+      parameters:
+        - name: id
+          in: path
+          required: true
+          schema:
+            type: string
+            pattern: "^[a-f0-9]{16}$"
+          description: Cache key (16 hex characters).
+      responses:
+        "200":
+          description: Cached render output.
+          headers:
+            Cache-Control:
+              schema:
+                type: string
+                example: private, max-age=600
+          content:
+            text/html:
+              schema:
+                type: string
+            application/pdf:
+              schema:
+                type: string
+                format: binary
+        "401":
+          $ref: "#/components/responses/Unauthorized"
+        "404":
+          $ref: "#/components/responses/NotFound"
+
+  /types:
+    get:
+      operationId: getTypes
+      summary: TypeScript type definitions
+      description: Returns the `@flanksource/facet` TypeScript declarations for use in the Monaco editor playground.
+      responses:
+        "200":
+          description: TypeScript declaration file content.
+          content:
+            text/plain:
+              schema:
+                type: string
+
+components:
+  securitySchemes:
+    apiKey:
+      type: apiKey
+      in: header
+      name: X-API-Key
+    bearerAuth:
+      type: http
+      scheme: bearer
+
+  schemas:
+    RenderRequest:
+      type: object
+      description: JSON render request. Provide either `code` (inline) or `template` (named/remote).
+      properties:
+        code:
+          type: string
+          description: Inline TSX template code.
+        template:
+          type: string
+          description: Template name (local) or remote ref (e.g. `github.com/org/repo/path`).
+        data:
+          type: object
+          additionalProperties: true
+          description: Data passed to the template as props.
+          default: {}
+        format:
+          type: string
+          enum: [html, pdf]
+          default: pdf
+        output:
+          type: string
+          enum: [direct, s3]
+          default: direct
+        s3Key:
+          type: string
+          description: "Custom S3 key (when output is s3)."
+        filename:
+          type: string
+          description: Custom filename for Content-Disposition header.
+        dependencies:
+          type: object
+          additionalProperties:
+            type: string
+          description: "npm dependencies to install, e.g. react-icons: ^5.4.0."
+        headerCode:
+          type: string
+          description: Inline TSX for a header component.
+        footerCode:
+          type: string
+          description: Inline TSX for a footer component.
+        pdfOptions:
+          $ref: "#/components/schemas/PDFOptions"
+        encryption:
+          $ref: "#/components/schemas/PDFEncryptionOptions"
+        signature:
+          $ref: "#/components/schemas/PDFSignatureOptions"
+
+    PDFOptions:
+      type: object
+      properties:
+        defaultPageSize:
+          type: string
+          description: Page size name.
+          enum: [a4, a3, letter, legal, fhd, qhd, wqhd, 4k, 5k, 16k]
+        landscape:
+          type: boolean
+          default: false
+        debug:
+          type: boolean
+          description: Add debug overlay lines for header/footer zones.
+          default: false
+        margins:
+          type: object
+          properties:
+            top:
+              type: number
+              description: Top margin in mm.
+            bottom:
+              type: number
+              description: Bottom margin in mm.
+            left:
+              type: number
+              description: Left margin in mm.
+            right:
+              type: number
+              description: Right margin in mm.
+
+    PDFEncryptionOptions:
+      type: object
+      required: [ownerPassword]
+      properties:
+        userPassword:
+          type: string
+          description: Password required to open the PDF.
+        ownerPassword:
+          type: string
+          description: Owner password that controls permissions.
+        permissions:
+          type: object
+          properties:
+            print:
+              type: boolean
+              default: true
+            modify:
+              type: boolean
+              default: false
+            copy:
+              type: boolean
+              default: false
+            annotate:
+              type: boolean
+              default: false
+
+    PDFSignatureOptions:
+      type: object
+      properties:
+        certPath:
+          type: string
+          description: Path to PKCS#12 (.p12/.pfx) certificate file.
+        certPassword:
+          type: string
+          description: Certificate password.
+        selfSigned:
+          type: boolean
+          description: Auto-generate a self-signed certificate for signing.
+          default: false
+        reason:
+          type: string
+          description: Signature reason text.
+        name:
+          type: string
+          description: Signer name.
+        location:
+          type: string
+          description: Signing location.
+        timestampUrl:
+          type: string
+          description: RFC 3161 Timestamp Authority URL.
+
+    MultipartRenderRequest:
+      type: object
+      required: [archive]
+      properties:
+        archive:
+          type: string
+          format: binary
+          description: Archive file (tar.gz or zip) containing the template.
+        data:
+          type: string
+          description: JSON string of template data.
+        options:
+          type: string
+          description: JSON string with `format`, `output`, `entryFile`, `pdfOptions`, etc.
+
+    TemplateInfo:
+      type: object
+      properties:
+        name:
+          type: string
+        entryFile:
+          type: string
+        description:
+          type: string
+        hasSchema:
+          type: boolean
+
+    PDFRenderResult:
+      type: object
+      required: [url]
+      properties:
+        url:
+          type: string
+          description: URL path to fetch the cached PDF (e.g. `/results/{id}`).
+          example: /results/a1b2c3d4e5f67890
+
+    S3UploadResult:
+      type: object
+      properties:
+        url:
+          type: string
+          description: Public S3 URL.
+        presignedUrl:
+          type: string
+          description: Pre-signed URL with expiry.
+        key:
+          type: string
+          description: S3 object key.
+
+    ErrorResponse:
+      type: object
+      properties:
+        error:
+          type: object
+          required: [code, message]
+          properties:
+            code:
+              type: string
+              enum:
+                - TEMPLATE_NOT_FOUND
+                - VALIDATION_ERROR
+                - RENDER_TIMEOUT
+                - RENDER_FAILED
+                - S3_UPLOAD_FAILED
+                - QUEUE_FULL
+                - AUTH_REQUIRED
+                - INVALID_REQUEST
+                - ARCHIVE_ERROR
+            message:
+              type: string
+            details:
+              description: Additional error context.
+
+  responses:
+    BadRequest:
+      description: Invalid request.
+      content:
+        application/json:
+          schema:
+            $ref: "#/components/schemas/ErrorResponse"
+    Unauthorized:
+      description: Missing or invalid API key.
+      content:
+        application/json:
+          schema:
+            $ref: "#/components/schemas/ErrorResponse"
+    NotFound:
+      description: Template or resource not found.
+      content:
+        application/json:
+          schema:
+            $ref: "#/components/schemas/ErrorResponse"
+    Timeout:
+      description: Render timed out.
+      content:
+        application/json:
+          schema:
+            $ref: "#/components/schemas/ErrorResponse"
diff --git a/package.json b/package.json
index 04f0681..ab8f01d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "files": [
     "dist/",
     "cli/dist/",
+    "openapi.yaml",
     "README.md"
   ],
   "scripts": {