fix: add backward compatibility exports for extension imports

- Add /src and /src/types paths to package.json exports - Extension imports from @tlsn/plugin-sdk/src/types now work correctly - Fixes 'npm run dev' in packages/extension
feat: enable tree-shaking with separate styles entry point
2026-01-14 09:37:59 -05:00 · 2026-01-14 17:15:39 +08:00 · 2026-01-14 17:07:27 +08:00 · 2026-01-14 17:01:33 +08:00 · 2026-01-14 16:55:09 +08:00 · 2026-01-14 16:51:37 +08:00
31 changed files with 2761 additions and 192 deletions
--- a/.github/workflows/demo.yml
+++ b/.github/workflows/demo.yml
@@ -86,6 +86,5 @@ jobs:
                  tags: ${{ steps.meta-verifier-webapp.outputs.tags }}
                  labels: ${{ steps.meta-verifier-webapp.outputs.labels }}
                  build-args: |
-                      VITE_VERIFIER_HOST=demo-staging.tlsnotary.org
-                      VITE_VERIFIER_PROTOCOL=https
-                      VITE_PROXY_PROTOCOL=wss
+                      VERIFIER_HOST=demo-staging.tlsnotary.org
+                      SSL=true
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -594,29 +594,34 @@ Docker-based demo environment for testing plugins:
 - `twitter.js`, `swissbank.js` - Example plugin files
 - `docker-compose.yml` - Docker services configuration
 - `nginx.conf` - Reverse proxy configuration
+- `start.sh` - Setup script with URL templating

 **Docker Services:**
 1. `verifier` - TLSNotary verifier server (port 7047)
 2. `demo-static` - nginx serving static plugin files
 3. `nginx` - Reverse proxy (port 80)

-**Environment Variables (via `.env` files or Docker build args):**
- `VITE_VERIFIER_HOST` - Verifier server host (default: `localhost:7047`)
- `VITE_VERIFIER_PROTOCOL` - Protocol: http or https (default: `http`)
- `VITE_PROXY_PROTOCOL` - WebSocket protocol: ws or wss (default: `ws`)
+**Environment Variables:**
+- `VERIFIER_HOST` - Verifier server host (default: `localhost:7047`)
+- `SSL` - Use https/wss protocols (default: `false`)

 **Usage:**
 ```bash
-# Local development with npm
-npm run demo
+# Local development
+./start.sh

-# Docker (detached mode)
-npm run docker:up
+# Production with SSL
+VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./start.sh

-# Docker with custom verifier
-VITE_VERIFIER_HOST=verifier.example.com VITE_VERIFIER_PROTOCOL=https docker compose up --build -d
+# Docker detached mode
+./start.sh -d
 ```

+The `start.sh` script:
+1. Processes plugin files, replacing `verifierUrl` and `proxyUrl` placeholders
+2. Copies processed files to `generated/` directory
+3. Starts Docker Compose services
+
 ## Important Implementation Notes

 ### Plugin API Changes
--- a/README.md
+++ b/README.md
@@ -58,7 +58,8 @@ tlsn-extension/
 │   │
 │   ├── demo/                # Demo server with Docker setup
 │   │   ├── *.js                  # Example plugin files
-│   │   └── docker-compose.yml    # Docker services configuration
+│   │   ├── docker-compose.yml    # Docker services configuration
+│   │   └── start.sh              # Setup script with configurable URLs
 │   │
 │   ├── tutorial/            # Tutorial examples
 │   │   └── *.js                  # Tutorial plugin files
@@ -115,9 +116,10 @@ Rust-based HTTP/WebSocket server for TLSNotary verification:
 #### 5. **demo** - Demo Server
 Docker-based demo environment with:
 - Pre-configured example plugins (Twitter, SwissBank)
- React + Vite frontend with environment-based configuration
 - Docker Compose setup with verifier and nginx
- Configurable verifier URLs via environment variables or `.env` files
+- Configurable verifier URLs via environment variables
+- Plugin file generator (`generate.sh`) with SSL support
+- Docker startup script (`start.sh`)

 #### 6. **tlsn-wasm-pkg** - TLSN WebAssembly Package
 Pre-built WebAssembly binaries for TLSNotary functionality in the browser.
@@ -493,21 +495,25 @@ npm run demo

 ### Environment Variables

-The demo uses `.env` files for configuration:
- `.env` - Local development defaults (`localhost:7047`, `http`)
- `.env.production` - Production settings (`verifier.tlsnotary.org`, `https`)
-
-For Docker deployments, you can override via build args:
+Configure the demo for different environments:
 ```bash
 # Local development (default)
 cd packages/demo
-npm run docker:up
+./generate.sh && ./start.sh

-# Production with custom verifier
+# Production with SSL
 cd packages/demo
-VITE_VERIFIER_HOST=verifier.example.com VITE_VERIFIER_PROTOCOL=https docker compose up --build
+VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh
+./start.sh
+
+# Docker detached mode
+./generate.sh && ./start.sh -d
 ```

+The demo uses two scripts:
+- **`generate.sh`** - Generates plugin files with configured verifier URLs (use environment variables here)
+- **`start.sh`** - Starts Docker Compose services (assumes `generated/` directory exists)
+
 ### Tutorial

 ```bash
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "tlsn-monorepo",
-  "version": "0.1.0",
+  "version": "0.1.0-alpha.13",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "tlsn-monorepo",
-      "version": "0.1.0",
+      "version": "0.1.0-alpha.13",
      "license": "MIT",
      "workspaces": [
        "packages/*"
@@ -64,7 +64,6 @@
      "version": "7.28.4",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.3",
@@ -580,7 +579,6 @@
      "version": "7.27.1",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.27.1"
      },
@@ -1323,7 +1321,6 @@
      "version": "7.27.1",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/helper-annotate-as-pure": "^7.27.1",
        "@babel/helper-module-imports": "^7.27.1",
@@ -1884,7 +1881,6 @@
    "node_modules/@codemirror/view": {
      "version": "6.38.6",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@codemirror/state": "^6.5.0",
        "crelt": "^1.0.6",
@@ -1994,7 +1990,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": "^14 || ^16 || >=18"
      },
@@ -2016,7 +2011,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": "^14 || ^16 || >=18"
      }
@@ -2093,7 +2087,6 @@
      "version": "6.1.2",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -2415,7 +2408,6 @@
      "version": "6.1.2",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -3907,6 +3899,7 @@
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
+      "peer": true,
      "dependencies": {
        "detect-libc": "^1.0.3",
        "is-glob": "^4.0.3",
@@ -3948,6 +3941,7 @@
      "os": [
        "android"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -3966,6 +3960,7 @@
      "os": [
        "darwin"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -3986,6 +3981,7 @@
      "os": [
        "darwin"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4006,6 +4002,7 @@
      "os": [
        "freebsd"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4026,6 +4023,7 @@
      "os": [
        "linux"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4046,6 +4044,7 @@
      "os": [
        "linux"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4066,6 +4065,7 @@
      "os": [
        "linux"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4086,6 +4086,7 @@
      "os": [
        "linux"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4106,6 +4107,7 @@
      "os": [
        "linux"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4126,6 +4128,7 @@
      "os": [
        "linux"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4146,6 +4149,7 @@
      "os": [
        "win32"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4166,6 +4170,7 @@
      "os": [
        "win32"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4186,6 +4191,7 @@
      "os": [
        "win32"
      ],
+      "peer": true,
      "engines": {
        "node": ">= 10.0.0"
      },
@@ -4637,7 +4643,6 @@
      "version": "8.13.0",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.3",
        "json-schema-traverse": "^1.0.0",
@@ -4859,6 +4864,10 @@
      "resolved": "packages/plugin-sdk",
      "link": true
    },
+    "node_modules/@tlsn/ts-plugin-sample": {
+      "resolved": "packages/ts-plugin-sample",
+      "link": true
+    },
    "node_modules/@tlsnotary/demo": {
      "resolved": "packages/demo",
      "link": true
@@ -5270,7 +5279,6 @@
      "version": "5.62.0",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/regexpp": "^4.4.0",
        "@typescript-eslint/scope-manager": "5.62.0",
@@ -5333,7 +5341,6 @@
      "version": "5.62.0",
      "dev": true,
      "license": "BSD-2-Clause",
-      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "5.62.0",
        "@typescript-eslint/types": "5.62.0",
@@ -5646,7 +5653,6 @@
      "version": "3.2.4",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@testing-library/dom": "^10.4.0",
        "@testing-library/user-event": "^14.6.1",
@@ -6212,7 +6218,6 @@
      "version": "8.15.0",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -6243,7 +6248,6 @@
      "version": "6.12.6",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "fast-json-stable-stringify": "^2.0.0",
@@ -7067,7 +7071,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.3",
        "caniuse-lite": "^1.0.30001741",
@@ -7825,7 +7828,6 @@
      "version": "6.1.2",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -8205,6 +8207,7 @@
      "version": "1.0.3",
      "license": "Apache-2.0",
      "optional": true,
+      "peer": true,
      "bin": {
        "detect-libc": "bin/detect-libc.js"
      },
@@ -8662,7 +8665,6 @@
      "version": "8.57.1",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.6.1",
@@ -11634,7 +11636,8 @@
    "node_modules/node-addon-api": {
      "version": "7.1.1",
      "license": "MIT",
-      "optional": true
+      "optional": true,
+      "peer": true
    },
    "node_modules/node-forge": {
      "version": "1.3.3",
@@ -12390,7 +12393,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -13151,7 +13153,6 @@
      "version": "6.1.2",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
@@ -13429,7 +13430,6 @@
      "version": "3.6.2",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "prettier": "bin/prettier.cjs"
      },
@@ -13714,7 +13714,6 @@
    "node_modules/react": {
      "version": "18.3.1",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
@@ -13725,7 +13724,6 @@
    "node_modules/react-dom": {
      "version": "18.3.1",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "loose-envify": "^1.1.0",
        "scheduler": "^0.23.2"
@@ -13783,7 +13781,6 @@
      "version": "0.14.2",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -13877,7 +13874,6 @@
    "node_modules/redux": {
      "version": "4.2.1",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.9.2"
      }
@@ -14123,7 +14119,6 @@
    "node_modules/rollup": {
      "version": "4.52.3",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/estree": "1.0.8"
      },
@@ -14267,7 +14262,6 @@
      "version": "1.93.2",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "chokidar": "^4.0.0",
        "immutable": "^5.0.2",
@@ -14346,7 +14340,6 @@
    "node_modules/schema-utils/node_modules/ajv": {
      "version": "8.17.1",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.3",
        "fast-uri": "^3.0.1",
@@ -15636,7 +15629,6 @@
    "node_modules/tinyglobby/node_modules/picomatch": {
      "version": "4.0.3",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -15794,8 +15786,7 @@
    },
    "node_modules/tslib": {
      "version": "2.8.1",
-      "license": "0BSD",
-      "peer": true
+      "license": "0BSD"
    },
    "node_modules/tsutils": {
      "version": "3.21.0",
@@ -15831,7 +15822,6 @@
      "version": "3.13.1",
      "dev": true,
      "license": "(MIT OR CC0-1.0)",
-      "peer": true,
      "engines": {
        "node": ">=14.16"
      },
@@ -15926,7 +15916,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "devOptional": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -16155,7 +16144,6 @@
      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.27.0",
        "fdir": "^6.5.0",
@@ -16291,7 +16279,6 @@
    "node_modules/vite/node_modules/picomatch": {
      "version": "4.0.3",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -16303,7 +16290,6 @@
      "version": "3.2.4",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/chai": "^5.2.2",
        "@vitest/expect": "3.2.4",
@@ -16461,7 +16447,6 @@
      "version": "5.102.0",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@types/eslint-scope": "^3.7.7",
        "@types/estree": "^1.0.8",
@@ -16509,7 +16494,6 @@
      "version": "4.10.0",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@discoveryjs/json-ext": "^0.5.0",
        "@webpack-cli/configtest": "^1.2.0",
@@ -16772,7 +16756,6 @@
      "version": "3.3.3",
      "devOptional": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=10.13.0"
      }
@@ -17343,7 +17326,6 @@
      "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vitest/expect": "4.0.16",
        "@vitest/mocker": "4.0.16",
@@ -17434,7 +17416,7 @@
      }
    },
    "packages/extension": {
-      "version": "0.1.0",
+      "version": "0.1.0.1300",
      "license": "MIT",
      "dependencies": {
        "@codemirror/lang-javascript": "^6.2.4",
@@ -17575,6 +17557,484 @@
      "name": "tlsn-wasm",
      "version": "0.1.0-alpha.13",
      "license": "MIT OR Apache-2.0"
+    },
+    "packages/ts-plugin-sample": {
+      "name": "@tlsn/ts-plugin-sample",
+      "version": "0.1.0-alpha.13",
+      "license": "MIT",
+      "dependencies": {
+        "@tlsn/plugin-sdk": "*"
+      },
+      "devDependencies": {
+        "esbuild": "^0.24.2",
+        "typescript": "^5.5.4"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
+      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/android-arm": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz",
+      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/android-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz",
+      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/android-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz",
+      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz",
+      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/darwin-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
+      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz",
+      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-arm": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz",
+      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz",
+      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-ia32": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz",
+      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-loong64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz",
+      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz",
+      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz",
+      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz",
+      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-s390x": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz",
+      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/linux-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/sunos-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz",
+      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/win32-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz",
+      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/win32-ia32": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz",
+      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/@esbuild/win32-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz",
+      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "packages/ts-plugin-sample/node_modules/esbuild": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
+      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.24.2",
+        "@esbuild/android-arm": "0.24.2",
+        "@esbuild/android-arm64": "0.24.2",
+        "@esbuild/android-x64": "0.24.2",
+        "@esbuild/darwin-arm64": "0.24.2",
+        "@esbuild/darwin-x64": "0.24.2",
+        "@esbuild/freebsd-arm64": "0.24.2",
+        "@esbuild/freebsd-x64": "0.24.2",
+        "@esbuild/linux-arm": "0.24.2",
+        "@esbuild/linux-arm64": "0.24.2",
+        "@esbuild/linux-ia32": "0.24.2",
+        "@esbuild/linux-loong64": "0.24.2",
+        "@esbuild/linux-mips64el": "0.24.2",
+        "@esbuild/linux-ppc64": "0.24.2",
+        "@esbuild/linux-riscv64": "0.24.2",
+        "@esbuild/linux-s390x": "0.24.2",
+        "@esbuild/linux-x64": "0.24.2",
+        "@esbuild/netbsd-arm64": "0.24.2",
+        "@esbuild/netbsd-x64": "0.24.2",
+        "@esbuild/openbsd-arm64": "0.24.2",
+        "@esbuild/openbsd-x64": "0.24.2",
+        "@esbuild/sunos-x64": "0.24.2",
+        "@esbuild/win32-arm64": "0.24.2",
+        "@esbuild/win32-ia32": "0.24.2",
+        "@esbuild/win32-x64": "0.24.2"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -25,8 +25,8 @@
    "build:wasm": "sh packages/tlsn-wasm/build.sh v0.1.0-alpha.13 --no-logging",
    "demo": "npm run dev --workspace=@tlsnotary/demo",
    "tutorial": "serve -l 8080 packages/tutorial",
-    "docker:up": "cd packages/demo && docker compose up --build -d",
-    "docker:down": "cd packages/demo && docker compose down"
+    "docker:up": "cd packages/demo && ./start.sh -d",
+    "docker:down": "cd packages/demo && docker-compose down"
  },
  "devDependencies": {
    "typescript": "^5.5.4",
--- a/packages/demo/Dockerfile
+++ b/packages/demo/Dockerfile
@@ -2,9 +2,8 @@
 FROM node:20-alpine AS builder

 # Accept build arguments with defaults
-ARG VITE_VERIFIER_HOST=localhost:7047
-ARG VITE_VERIFIER_PROTOCOL=http
-ARG VITE_PROXY_PROTOCOL=ws
+ARG VITE_VERIFIER_URL=http://localhost:7047
+ARG VITE_PROXY_URL=ws://localhost:7047/proxy?token=

 WORKDIR /app

@@ -16,9 +15,8 @@ RUN npm install
 COPY . .

 # Build with environment variables
-ENV VITE_VERIFIER_HOST=${VITE_VERIFIER_HOST}
-ENV VITE_VERIFIER_PROTOCOL=${VITE_VERIFIER_PROTOCOL}
-ENV VITE_PROXY_PROTOCOL=${VITE_PROXY_PROTOCOL}
+ENV VITE_VERIFIER_URL=${VITE_VERIFIER_URL}
+ENV VITE_PROXY_URL=${VITE_PROXY_URL}
 RUN npm run build

 # Runtime stage
--- a/packages/demo/README.md
+++ b/packages/demo/README.md
@@ -75,26 +75,30 @@ Run the demo with `npm run demo` from the repository root, or run it with docker

 #### Manual Docker Setup

-If you want to run Docker manually:
+If you want to run the scripts manually:

 ```bash
 cd packages/demo
-docker compose up --build
+npm run build  # Build the React app first
+./generate.sh && ./start.sh
 ```

+The demo uses two scripts:
+- **`generate.sh`** - Generates plugin files with configured verifier URLs
+- **`start.sh`** - Starts Docker Compose services
+
 #### Environment Variables

-The demo uses `.env` files for configuration:
- `.env` - Local development defaults (`localhost:7047`, `http`)
- `.env.production` - Production settings (`verifier.tlsnotary.org`, `https`)
-
-For Docker deployments, override via build args:
+Configure for different environments:
 ```bash
 # Local development (default)
-docker compose up --build
+npm run build
+./generate.sh && ./start.sh

-# Production with custom verifier
-VITE_VERIFIER_HOST=verifier.example.com VITE_VERIFIER_PROTOCOL=https docker compose up --build
+# Production with SSL
+npm run build
+VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh
+./start.sh
 ```

 You can now open the demo by opening http://localhost:8080 in your browser with the TLSNotary extension
--- a/packages/demo/docker-compose.yml
+++ b/packages/demo/docker-compose.yml
@@ -15,9 +15,8 @@ services:
    build:
      context: .
      args:
-        VITE_VERIFIER_HOST: ${VITE_VERIFIER_HOST:-localhost:7047}
-        VITE_VERIFIER_PROTOCOL: ${VITE_VERIFIER_PROTOCOL:-http}
-        VITE_PROXY_PROTOCOL: ${VITE_PROXY_PROTOCOL:-ws}
+        VERIFIER_HOST: ${VERIFIER_HOST:-localhost:7047}
+        SSL: ${SSL:-false}
    restart: unless-stopped

  nginx:
--- a/packages/demo/generate.sh
+++ b/packages/demo/generate.sh
@@ -0,0 +1,105 @@
+#!/bin/sh
+#
+# Demo Plugin File Generator
+#
+# This script generates plugin files with configurable verifier URLs.
+# Used both locally and in CI/CD pipelines.
+#
+# Environment Variables:
+#   VERIFIER_HOST - Verifier server host (default: localhost:7047)
+#   SSL           - Use https/wss if true (default: false)
+#
+# Usage:
+#   ./generate.sh                                    # Local development
+#   VERIFIER_HOST=verifier.tlsnotary.org SSL=true ./generate.sh  # Production
+
+set -e
+
+cd "$(dirname "$0")"
+
+# Configuration with defaults
+VERIFIER_HOST="${VERIFIER_HOST:-localhost:7047}"
+SSL="${SSL:-false}"
+
+# Determine protocol based on SSL setting
+if [ "$SSL" = "true" ]; then
+    HTTP_PROTOCOL="https"
+    WS_PROTOCOL="wss"
+else
+    HTTP_PROTOCOL="http"
+    WS_PROTOCOL="ws"
+fi
+
+VERIFIER_URL="${HTTP_PROTOCOL}://${VERIFIER_HOST}"
+PROXY_URL_BASE="${WS_PROTOCOL}://${VERIFIER_HOST}/proxy?token="
+
+echo "========================================"
+echo "TLSNotary Demo Plugin Generator"
+echo "========================================"
+echo "Verifier Host: $VERIFIER_HOST"
+echo "SSL Enabled:   $SSL"
+echo "Verifier URL:  $VERIFIER_URL"
+echo "Proxy URL:     ${PROXY_URL_BASE}<host>"
+echo "========================================"
+
+# Create generated directory for processed files
+mkdir -p generated
+
+# Function to process a plugin file
+process_plugin() {
+    local input_file="$1"
+    local output_file="generated/$(basename "$input_file")"
+
+    echo "Processing: $input_file -> $output_file"
+
+    # Replace verifierUrl and proxyUrl patterns
+    sed -E \
+        -e "s|verifierUrl: '[^']*'|verifierUrl: '${VERIFIER_URL}'|g" \
+        -e "s|verifierUrl: \"[^\"]*\"|verifierUrl: \"${VERIFIER_URL}\"|g" \
+        -e "s|proxyUrl: 'ws://[^/]+/proxy\?token=([^']+)'|proxyUrl: '${PROXY_URL_BASE}\1'|g" \
+        -e "s|proxyUrl: 'wss://[^/]+/proxy\?token=([^']+)'|proxyUrl: '${PROXY_URL_BASE}\1'|g" \
+        -e "s|proxyUrl: \"ws://[^/]+/proxy\?token=([^\"]+)\"|proxyUrl: \"${PROXY_URL_BASE}\1\"|g" \
+        -e "s|proxyUrl: \"wss://[^/]+/proxy\?token=([^\"]+)\"|proxyUrl: \"${PROXY_URL_BASE}\1\"|g" \
+        "$input_file" > "$output_file"
+}
+
+# Function to process index.html
+process_index_html() {
+    local input_file="$1"
+    local output_file="generated/$(basename "$input_file")"
+
+    echo "Processing: $input_file -> $output_file"
+
+    # Replace hardcoded health check URL with configured verifier URL
+    sed -E \
+        -e "s|http://localhost:7047/health|${VERIFIER_URL}/health|g" \
+        "$input_file" > "$output_file"
+}
+
+# Process index.html
+echo ""
+echo "Processing index.html..."
+process_index_html "index.html"
+
+# Copy other static files
+echo ""
+echo "Copying other static files..."
+cp favicon.ico generated/ 2>/dev/null || true
+
+# Process plugin files
+echo ""
+echo "Processing plugin files..."
+for plugin_file in *.js; do
+    if [ -f "$plugin_file" ]; then
+        process_plugin "$plugin_file"
+    fi
+done
+
+echo ""
+echo "Generated files:"
+ls -la generated/
+
+echo ""
+echo "========================================"
+echo "Generation complete!"
+echo "========================================"
--- a/packages/demo/index.html.backup
+++ b/packages/demo/index.html.backup
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>TLSNotary Plugin test page</title>
+  <style>
+    .result {
+      background: #e8f5e8;
+      border: 2px solid #28a745;
+      border-radius: 8px;
+      padding: 16px;
+      margin: 20px 0;
+      font-size: 18px;
+      display: inline-block;
+    }
+
+    .debug {
+      background: #f8f9fa;
+      border: 1px solid #dee2e6;
+      border-radius: 4px;
+      padding: 12px;
+      margin: 20px 0;
+      font-family: 'Courier New', monospace;
+      font-size: 12px;
+      white-space: pre-wrap;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .plugin-buttons {
+      margin: 20px 0;
+    }
+
+    .plugin-buttons button {
+      margin-right: 10px;
+      padding: 10px 20px;
+      font-size: 16px;
+    }
+
+    .check-item {
+      margin: 10px 0;
+      padding: 10px;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+    }
+
+    .check-item.checking {
+      background: #f0f8ff;
+      border-color: #007bff;
+    }
+
+    .check-item.success {
+      background: #f0f8f0;
+      border-color: #28a745;
+    }
+
+    .check-item.error {
+      background: #fff0f0;
+      border-color: #dc3545;
+    }
+
+    .status {
+      font-weight: bold;
+      margin-left: 10px;
+    }
+
+    .status.checking {
+      color: #007bff;
+    }
+
+    .status.success {
+      color: #28a745;
+    }
+
+    .status.error {
+      color: #dc3545;
+    }
+
+    .warning-box {
+      background: #fff3cd;
+      border: 2px solid #ffc107;
+      border-radius: 8px;
+      padding: 16px;
+      margin: 20px 0;
+    }
+
+    .warning-box h3 {
+      margin-top: 0;
+      color: #856404;
+    }
+
+    .console-section {
+      margin: 20px 0;
+      border: 1px solid #dee2e6;
+      border-radius: 8px;
+      background: #1e1e1e;
+      overflow: hidden;
+    }
+
+    .console-header {
+      background: #2d2d2d;
+      color: #fff;
+      padding: 10px 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #3d3d3d;
+    }
+
+    .console-title {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .console-output {
+      max-height: 300px;
+      overflow-y: auto;
+      padding: 10px;
+      font-family: 'Courier New', monospace;
+      font-size: 12px;
+      color: #d4d4d4;
+    }
+
+    .console-entry {
+      margin: 4px 0;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .console-entry.info {
+      color: #4fc3f7;
+    }
+
+    .console-entry.success {
+      color: #4caf50;
+    }
+
+    .console-entry.error {
+      color: #f44336;
+    }
+
+    .console-entry.warning {
+      color: #ff9800;
+    }
+
+    .console-timestamp {
+      color: #888;
+      margin-right: 8px;
+    }
+
+    .console-message {
+      color: inherit;
+    }
+
+    .btn-console {
+      background: #007bff;
+      color: white;
+      border: none;
+      padding: 5px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .btn-console:hover {
+      background: #0056b3;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>TLSNotary Plugin Demo</h1>
+  <p>
+    This page demonstrates TLSNotary plugins. Choose a plugin to test below.
+  </p>
+
+  <!-- Browser compatibility warning -->
+  <div id="browser-warning" class="warning-box" style="display: none;">
+    <h3>⚠️ Browser Compatibility</h3>
+    <p><strong>Unsupported Browser Detected</strong></p>
+    <p>TLSNotary extension requires a Chrome-based browser (Chrome, Edge, Brave, etc.).</p>
+    <p>Please switch to a supported browser to continue.</p>
+  </div>
+
+  <!-- System checks -->
+  <div>
+    <strong>System Checks:</strong>
+    <div id="check-browser" class="check-item checking">
+      🌐 Browser: <span class="status checking">Checking...</span>
+    </div>
+    <div id="check-extension" class="check-item checking">
+      🔌 Extension: <span class="status checking">Checking...</span>
+    </div>
+    <div id="check-verifier" class="check-item checking">
+      ✅ Verifier: <span class="status checking">Checking...</span>
+      <div id="verifier-instructions" style="display: none; margin-top: 10px; font-size: 14px;">
+        <p>Start the verifier server:</p>
+        <code>cd packages/verifier; cargo run --release</code>
+        <button onclick="checkVerifier()" style="margin-left: 10px; padding: 5px 10px;">Check Again</button>
+      </div>
+    </div>
+  </div>
+
+  <div style="margin-top: 20px;">
+    <strong>Steps:</strong>
+    <ol>
+      <li>Click one of the plugin "Run" buttons below.</li>
+      <li>The plugin will open a new browser window with the target website.</li>
+      <li>Log in to the website if you are not already logged in.</li>
+      <li>A TLSNotary overlay will appear in the bottom right corner.</li>
+      <li>Click the <strong>Prove</strong> button in the overlay to start the proving process.</li>
+      <li>After successful proving, you can close the browser window and the results will appear on this page.</li>
+    </ol>
+  </div>
+  <div class="plugin-buttons" id="buttonContainer"></div>
+
+  <!-- Console Section -->
+  <div class="console-section">
+    <div class="console-header">
+      <div class="console-title">Console Output</div>
+      <div style="display: flex; gap: 10px;">
+        <button class="btn-console" onclick="openExtensionLogs()" style="background: #6c757d;">View Extension
+          Logs</button>
+        <button class="btn-console" onclick="clearConsole()">Clear</button>
+      </div>
+    </div>
+    <div class="console-output" id="consoleOutput">
+      <div class="console-entry info">
+        <span class="console-timestamp">[INFO]</span>
+        <span class="console-message">💡 TLSNotary proving logs will appear here in real-time. You can also view them in
+          the extension console by clicking "View Extension Logs" above.</span>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    console.log('Testing TLSNotary plugins...');
+
+    let allChecksPass = false;
+
+    // Console functionality
+    function addConsoleEntry(message, type = 'info') {
+      const consoleOutput = document.getElementById('consoleOutput');
+      const timestamp = new Date().toLocaleTimeString();
+
+      const entry = document.createElement('div');
+      entry.className = `console-entry ${type}`;
+
+      const timestampSpan = document.createElement('span');
+      timestampSpan.className = 'console-timestamp';
+      timestampSpan.textContent = `[${timestamp}]`;
+
+      const messageSpan = document.createElement('span');
+      messageSpan.className = 'console-message';
+      messageSpan.textContent = message;
+
+      entry.appendChild(timestampSpan);
+      entry.appendChild(messageSpan);
+      consoleOutput.appendChild(entry);
+
+      // Auto-scroll to bottom
+      consoleOutput.scrollTop = consoleOutput.scrollHeight;
+    }
+
+    function clearConsole() {
+      const consoleOutput = document.getElementById('consoleOutput');
+      consoleOutput.innerHTML = '';
+      addConsoleEntry('Console cleared', 'info');
+      // Re-add the tip
+      const tipEntry = document.createElement('div');
+      tipEntry.className = 'console-entry info';
+      tipEntry.innerHTML = '<span class="console-timestamp">[INFO]</span><span class="console-message">💡 TLSNotary proving logs will appear here in real-time.</span>';
+      consoleOutput.insertBefore(tipEntry, consoleOutput.firstChild);
+    }
+
+    function openExtensionLogs() {
+      // Open extensions page
+      window.open('chrome://extensions/', '_blank');
+      addConsoleEntry('Opening chrome://extensions/ - Find TLSNotary extension → click "service worker" → find "offscreen.html" → click "inspect"', 'info');
+    }
+
+    // Listen for logs from offscreen document
+    window.addEventListener('message', (event) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (event.data?.type === 'TLSN_OFFSCREEN_LOG') {
+        addConsoleEntry(event.data.message, event.data.level);
+      }
+    });
+
+    // Initialize console with welcome message
+    window.addEventListener('load', () => {
+      addConsoleEntry('TLSNotary Plugin Demo initialized', 'success');
+    });
+
+    // Check browser compatibility
+    function checkBrowserCompatibility() {
+      const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+      const isEdge = /Edg/.test(navigator.userAgent);
+      const isBrave = navigator.brave && typeof navigator.brave.isBrave === 'function';
+      const isChromium = /Chromium/.test(navigator.userAgent);
+
+      const isChromeBasedBrowser = isChrome || isEdge || isBrave || isChromium;
+
+      const checkDiv = document.getElementById('check-browser');
+      const warningDiv = document.getElementById('browser-warning');
+      const statusSpan = checkDiv.querySelector('.status');
+
+      if (isChromeBasedBrowser) {
+        checkDiv.className = 'check-item success';
+        statusSpan.className = 'status success';
+        statusSpan.textContent = '✅ Chrome-based browser detected';
+        return true;
+      } else {
+        checkDiv.className = 'check-item error';
+        statusSpan.className = 'status error';
+        statusSpan.textContent = '❌ Unsupported browser';
+        warningDiv.style.display = 'block';
+        return false;
+      }
+    }
+
+    // Check extension
+    async function checkExtension() {
+      const checkDiv = document.getElementById('check-extension');
+      const statusSpan = checkDiv.querySelector('.status');
+
+      // Wait a bit for tlsn to load if page just loaded
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      if (typeof window.tlsn !== 'undefined') {
+        checkDiv.className = 'check-item success';
+        statusSpan.className = 'status success';
+        statusSpan.textContent = '✅ Extension installed';
+        return true;
+      } else {
+        checkDiv.className = 'check-item error';
+        statusSpan.className = 'status error';
+        statusSpan.innerHTML = '❌ Extension not found - <a href="chrome://extensions/" target="_blank">Install extension</a>';
+        return false;
+      }
+    }
+
+    // Check verifier server
+    async function checkVerifier() {
+      const checkDiv = document.getElementById('check-verifier');
+      const statusSpan = checkDiv.querySelector('.status');
+      const instructions = document.getElementById('verifier-instructions');
+
+      statusSpan.textContent = 'Checking...';
+      statusSpan.className = 'status checking';
+      checkDiv.className = 'check-item checking';
+
+      try {
+        const response = await fetch('http://localhost:7047/health');
+        if (response.ok && await response.text() === 'ok') {
+          checkDiv.className = 'check-item success';
+          statusSpan.className = 'status success';
+          statusSpan.textContent = '✅ Verifier running';
+          instructions.style.display = 'none';
+          return true;
+        } else {
+          throw new Error('Unexpected response');
+        }
+      } catch (error) {
+        checkDiv.className = 'check-item error';
+        statusSpan.className = 'status error';
+        statusSpan.textContent = '❌ Verifier not running';
+        instructions.style.display = 'block';
+        return false;
+      }
+    }
+
+    // Run all checks
+    async function runAllChecks() {
+      const browserOk = checkBrowserCompatibility();
+      if (!browserOk) {
+        allChecksPass = false;
+        return;
+      }
+
+      const extensionOk = await checkExtension();
+      const verifierOk = await checkVerifier();
+
+      allChecksPass = extensionOk && verifierOk;
+
+      updateButtonState();
+    }
+
+    // Update button state based on checks
+    function updateButtonState() {
+      const container = document.getElementById('buttonContainer');
+      const buttons = container.querySelectorAll('button');
+
+      buttons.forEach(button => {
+        button.disabled = !allChecksPass;
+        if (!allChecksPass) {
+          button.title = 'Please complete all system checks first';
+        } else {
+          button.title = '';
+        }
+      });
+    }
+
+    const plugins = {
+      twitter: {
+        name: 'Twitter profile Plugin',
+        file: 'twitter.js',
+        parseResult: (json) => {
+          return json.results[json.results.length - 1].value;
+        }
+      },
+      swissbank: {
+        name: 'Swiss Bank Plugin',
+        file: 'swissbank.js',
+        parseResult: (json) => {
+          return json.results[json.results.length - 1].value;
+        }
+      },
+      spotify: {
+        name: 'Spotify Plugin',
+        file: 'spotify.js',
+        parseResult: (json) => {
+          return json.results[json.results.length - 1].value;
+        }
+      }
+    };
+
+    async function runPlugin(pluginKey) {
+      const plugin = plugins[pluginKey];
+      const button = document.getElementById(`${pluginKey}Button`);
+
+      try {
+        addConsoleEntry(`🎬 Starting ${plugin.name} plugin...`, 'info');
+        console.log(`Running ${plugin.name} plugin...`);
+        button.disabled = true;
+        button.textContent = 'Running...';
+
+        const startTime = performance.now();
+        const pluginCode = await fetch(plugin.file).then(r => r.text());
+
+        addConsoleEntry('🔧 Executing plugin code...', 'info');
+        const result = await window.tlsn.execCode(pluginCode);
+        const executionTime = (performance.now() - startTime).toFixed(2);
+
+        const json = JSON.parse(result);
+
+        // Create result div
+        const resultDiv = document.createElement('div');
+        resultDiv.className = 'result';
+        resultDiv.innerHTML = plugin.parseResult(json);
+        document.body.appendChild(resultDiv);
+
+        // Create header
+        const header = document.createElement('h3');
+        header.textContent = `${plugin.name} Results:`;
+        document.body.appendChild(header);
+
+        // Create debug div
+        const debugDiv = document.createElement('div');
+        debugDiv.className = 'debug';
+        debugDiv.textContent = JSON.stringify(json.results, null, 2);
+        document.body.appendChild(debugDiv);
+
+        addConsoleEntry(`✅ ${plugin.name} completed successfully in ${executionTime}ms`, 'success');
+
+        // Remove the button after successful execution
+        button.remove();
+      } catch (err) {
+        console.error(err);
+
+        // Create error div
+        const errorDiv = document.createElement('pre');
+        errorDiv.style.color = 'red';
+        errorDiv.textContent = err.message;
+        document.body.appendChild(errorDiv);
+
+        button.textContent = `Run ${plugin.name}`;
+        button.disabled = false;
+      }
+    }
+
+    window.addEventListener('tlsn_loaded', () => {
+      console.log('TLSNotary client loaded, showing plugin buttons...');
+      const container = document.getElementById('buttonContainer');
+
+      Object.entries(plugins).forEach(([key, plugin]) => {
+        const button = document.createElement('button');
+        button.id = `${key}Button`;
+        button.textContent = `Run ${plugin.name}`;
+        button.onclick = () => runPlugin(key);
+        container.appendChild(button);
+      });
+
+      // Update button states after creating them
+      updateButtonState();
+    });
+
+    // Run checks on page load
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        runAllChecks();
+      }, 500);
+    });
+  </script>
+</body>
+
+</html>
--- a/packages/demo/src/utils.ts
+++ b/packages/demo/src/utils.ts
@@ -1,5 +1,3 @@
-import { config } from './config';
-
 export function checkBrowserCompatibility(): boolean {
    const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    const isEdge = /Edg/.test(navigator.userAgent);
@@ -17,7 +15,7 @@ export async function checkExtension(): Promise<boolean> {

 export async function checkVerifier(): Promise<boolean> {
    try {
-        const response = await fetch(`${config.verifierUrl}/health`);
+        const response = await fetch('http://localhost:7047/health');
        if (response.ok && (await response.text()) === 'ok') {
            return true;
        }
--- a/packages/demo/start.sh
+++ b/packages/demo/start.sh
@@ -3,20 +3,24 @@
 # Demo Server Startup Script
 #
 # This script starts the verifier server and demo file server via Docker.
+# Note: Run generate.sh first to create plugin files in the generated/ directory.
 #
 # Usage:
-#   ./start.sh                                       # Start services
+#   ./generate.sh && ./start.sh                      # Generate and start
+#   ./start.sh                                       # Start only (assumes generated/ exists)
 #   ./start.sh -d                                    # Start in detached mode
-#
-# Environment Variables:
-#   VITE_VERIFIER_HOST      - Verifier host (default: localhost:7047)
-#   VITE_VERIFIER_PROTOCOL  - Protocol: http or https (default: http)
-#   VITE_PROXY_PROTOCOL     - WebSocket protocol: ws or wss (default: ws)

 set -e

 cd "$(dirname "$0")"

+# Check if generated directory exists
+if [ ! -d "generated" ]; then
+    echo "ERROR: generated/ directory not found!"
+    echo "Please run ./generate.sh first to create plugin files."
+    exit 1
+fi
+
 echo "========================================"
 echo "TLSNotary Demo Server"
 echo "========================================"
--- a/packages/plugin-sdk/package.json
+++ b/packages/plugin-sdk/package.json
@@ -5,6 +5,24 @@
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": {
+      "import": "./dist/styles.js",
+      "types": "./dist/styles.d.ts"
+    },
+    "./src": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./src/types": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
  "scripts": {
    "build": "vite build",
    "test": "vitest",
--- a/packages/plugin-sdk/src/globals.d.ts
+++ b/packages/plugin-sdk/src/globals.d.ts
@@ -2,9 +2,7 @@
 * Global type declarations for TLSNotary plugin runtime environment
 *
 * These functions are injected at runtime by the plugin sandbox.
- * Import this file in your plugin to get TypeScript support:
- *
- *   /// <reference types="@tlsn/plugin-sdk/globals" />
+ * They are automatically available as globals in TypeScript plugins.
 */

 import type {
@@ -15,83 +13,123 @@ import type {
  DomJson,
 } from './types';

+/**
+ * Create a div DOM element
+ */
+export type DivFunction = {
+  (options?: DomOptions, children?: DomJson[]): DomJson;
+  (children: DomJson[]): DomJson;
+};
+
+/**
+ * Create a button DOM element
+ */
+export type ButtonFunction = {
+  (options?: DomOptions, children?: DomJson[]): DomJson;
+  (children: DomJson[]): DomJson;
+};
+
+/**
+ * Open a new browser window
+ */
+export type OpenWindowFunction = (
+  url: string,
+  options?: {
+    width?: number;
+    height?: number;
+    showOverlay?: boolean;
+  }
+) => Promise<{
+  windowId: number;
+  uuid: string;
+  tabId: number;
+}>;
+
+/**
+ * React-like effect hook that runs when dependencies change
+ */
+export type UseEffectFunction = (callback: () => void, deps: any[]) => void;
+
+/**
+ * Subscribe to intercepted HTTP headers with filtering
+ */
+export type UseHeadersFunction = (
+  filter: (headers: InterceptedRequestHeader[]) => InterceptedRequestHeader[]
+) => InterceptedRequestHeader[];
+
+/**
+ * Subscribe to intercepted HTTP requests with filtering
+ */
+export type UseRequestsFunction = (
+  filter: (requests: InterceptedRequest[]) => InterceptedRequest[]
+) => InterceptedRequest[];
+
+/**
+ * Get state value (does not trigger re-render)
+ */
+export type UseStateFunction = <T>(key: string, defaultValue: T) => T;
+
+/**
+ * Set state value (triggers UI re-render)
+ */
+export type SetStateFunction = <T>(key: string, value: T) => void;
+
+/**
+ * Generate TLS proof using the unified prove() API
+ */
+export type ProveFunction = (
+  requestOptions: {
+    url: string;
+    method: string;
+    headers: Record<string, string | undefined>;
+    body?: string;
+  },
+  proverOptions: {
+    verifierUrl: string;
+    proxyUrl: string;
+    maxRecvData?: number;
+    maxSentData?: number;
+    handlers: Handler[];
+  }
+) => Promise<any>;
+
+/**
+ * Complete plugin execution and return result
+ */
+export type DoneFunction = (result?: any) => void;
+
+/**
+ * Complete Plugin API surface available in the QuickJS sandbox
+ */
+export interface PluginAPI {
+  div: DivFunction;
+  button: ButtonFunction;
+  openWindow: OpenWindowFunction;
+  useEffect: UseEffectFunction;
+  useHeaders: UseHeadersFunction;
+  useRequests: UseRequestsFunction;
+  useState: UseStateFunction;
+  setState: SetStateFunction;
+  prove: ProveFunction;
+  done: DoneFunction;
+}
+
+/**
+ * Global declarations for plugin environment
+ *
+ * These are automatically available in TypeScript plugins without imports.
+ */
 declare global {
-  /**
-   * Create a div element
-   */
-  function div(options?: DomOptions, children?: (DomJson | string)[]): DomJson;
-  function div(children?: (DomJson | string)[]): DomJson;
-
-  /**
-   * Create a button element
-   */
-  function button(options?: DomOptions, children?: (DomJson | string)[]): DomJson;
-  function button(children?: (DomJson | string)[]): DomJson;
-
-  /**
-   * Get or initialize state value (React-like useState)
-   */
-  function useState<T>(key: string, initialValue: T): T;
-
-  /**
-   * Update state value
-   */
-  function setState<T>(key: string, value: T): void;
-
-  /**
-   * Run side effect when dependencies change (React-like useEffect)
-   */
-  function useEffect(effect: () => void, deps: any[]): void;
-
-  /**
-   * Subscribe to intercepted HTTP headers
-   */
-  function useHeaders(
-    filter: (headers: InterceptedRequestHeader[]) => InterceptedRequestHeader[],
-  ): [InterceptedRequestHeader | undefined];
-
-  /**
-   * Subscribe to intercepted HTTP requests
-   */
-  function useRequests(
-    filter: (requests: InterceptedRequest[]) => InterceptedRequest[],
-  ): [InterceptedRequest | undefined];
-
-  /**
-   * Open a new browser window for user interaction
-   */
-  function openWindow(
-    url: string,
-    options?: {
-      width?: number;
-      height?: number;
-      showOverlay?: boolean;
-    },
-  ): Promise<void>;
-
-  /**
-   * Generate a TLS proof for an HTTP request
-   */
-  function prove(
-    requestOptions: {
-      url: string;
-      method: string;
-      headers: Record<string, string>;
-      body?: string;
-    },
-    proverOptions: {
-      verifierUrl: string;
-      proxyUrl: string;
-      maxRecvData?: number;
-      maxSentData?: number;
-      handlers: Handler[];
-    },
-  ): Promise<any>;
-
-  /**
-   * Complete plugin execution and return result
-   */
-  function done(result?: any): void;
+  const div: DivFunction;
+  const button: ButtonFunction;
+  const openWindow: OpenWindowFunction;
+  const useEffect: UseEffectFunction;
+  const useHeaders: UseHeadersFunction;
+  const useRequests: UseRequestsFunction;
+  const useState: UseStateFunction;
+  const setState: SetStateFunction;
+  const prove: ProveFunction;
+  const done: DoneFunction;
 }

 export {};
--- a/packages/plugin-sdk/src/index.ts
+++ b/packages/plugin-sdk/src/index.ts
@@ -796,7 +796,40 @@ export async function extractConfig(code: string): Promise<PluginConfig | null>
 }

 // Export types
-export type { PluginConfig, RequestPermission };
+export type {
+  PluginConfig,
+  RequestPermission,
+  Handler,
+  StartLineHandler,
+  HeadersHandler,
+  BodyHandler,
+  AllHandler,
+  HandlerType,
+  HandlerPart,
+  HandlerAction,
+  InterceptedRequest,
+  InterceptedRequestHeader,
+  DomJson,
+  DomOptions,
+  OpenWindowResponse,
+  WindowMessage,
+  ExecutionContext,
+} from './types';
+
+// Export Plugin API types
+export type {
+  PluginAPI,
+  DivFunction,
+  ButtonFunction,
+  OpenWindowFunction,
+  UseEffectFunction,
+  UseHeadersFunction,
+  UseRequestsFunction,
+  UseStateFunction,
+  SetStateFunction,
+  ProveFunction,
+  DoneFunction,
+} from './globals';

 // Re-export LogLevel for consumers
 export { LogLevel } from '@tlsn/common';
--- a/packages/plugin-sdk/src/styles.ts
+++ b/packages/plugin-sdk/src/styles.ts
@@ -0,0 +1,361 @@
+/**
+ * Tailwind-like style utilities for plugin UI components
+ */
+
+// =============================================================================
+// DESIGN TOKENS
+// =============================================================================
+
+/**
+ * Color palette with Tailwind-like naming
+ * Non-opinionated color scales from 100-900
+ */
+const colorTokens = {
+  // Neutral
+  'white': '#ffffff',
+  'black': '#000000',
+  'transparent': 'transparent',
+
+  // Gray scale
+  'gray-50': '#f9fafb',
+  'gray-100': '#f3f4f6',
+  'gray-200': '#e5e7eb',
+  'gray-300': '#d1d5db',
+  'gray-400': '#9ca3af',
+  'gray-500': '#6b7280',
+  'gray-600': '#4b5563',
+  'gray-700': '#374151',
+  'gray-800': '#1f2937',
+  'gray-900': '#111827',
+
+  // Blue
+  'blue-100': '#dbeafe',
+  'blue-200': '#bfdbfe',
+  'blue-300': '#93c5fd',
+  'blue-400': '#60a5fa',
+  'blue-500': '#3b82f6',
+  'blue-600': '#2563eb',
+  'blue-700': '#1d4ed8',
+  'blue-800': '#1e40af',
+  'blue-900': '#1e3a8a',
+
+  // Purple
+  'purple-100': '#f3e8ff',
+  'purple-200': '#e9d5ff',
+  'purple-300': '#d8b4fe',
+  'purple-400': '#c084fc',
+  'purple-500': '#a855f7',
+  'purple-600': '#9333ea',
+  'purple-700': '#7e22ce',
+  'purple-800': '#6b21a8',
+  'purple-900': '#581c87',
+
+  // Red
+  'red-100': '#fee2e2',
+  'red-200': '#fecaca',
+  'red-300': '#fca5a5',
+  'red-400': '#f87171',
+  'red-500': '#ef4444',
+  'red-600': '#dc2626',
+  'red-700': '#b91c1c',
+  'red-800': '#991b1b',
+  'red-900': '#7f1d1d',
+
+  // Yellow
+  'yellow-100': '#fef3c7',
+  'yellow-200': '#fde68a',
+  'yellow-300': '#fcd34d',
+  'yellow-400': '#fbbf24',
+  'yellow-500': '#f59e0b',
+  'yellow-600': '#d97706',
+  'yellow-700': '#b45309',
+  'yellow-800': '#92400e',
+  'yellow-900': '#78350f',
+
+  // Orange
+  'orange-100': '#ffedd5',
+  'orange-200': '#fed7aa',
+  'orange-300': '#fdba74',
+  'orange-400': '#fb923c',
+  'orange-500': '#f97316',
+  'orange-600': '#ea580c',
+  'orange-700': '#c2410c',
+  'orange-800': '#9a3412',
+  'orange-900': '#7c2d12',
+
+  // Green
+  'green-100': '#d1fae5',
+  'green-200': '#a7f3d0',
+  'green-300': '#6ee7b7',
+  'green-400': '#34d399',
+  'green-500': '#10b981',
+  'green-600': '#059669',
+  'green-700': '#047857',
+  'green-800': '#065f46',
+  'green-900': '#064e3b',
+} as const;
+
+/**
+ * Spacing scale
+ */
+const spacingTokens = {
+  '0': '0',
+  '1': '4px',
+  '2': '8px',
+  '3': '12px',
+  '4': '16px',
+  '5': '20px',
+  '6': '24px',
+  '8': '32px',
+  '10': '40px',
+  '12': '48px',
+
+  // Named aliases
+  'xs': '8px',
+  'sm': '12px',
+  'md': '16px',
+  'lg': '20px',
+  'xl': '24px',
+} as const;
+
+/**
+ * Font sizes
+ */
+const fontSizeTokens = {
+  'xs': '12px',
+  'sm': '14px',
+  'md': '15px',
+  'base': '16px',
+  'lg': '18px',
+  'xl': '20px',
+  '2xl': '24px',
+} as const;
+
+/**
+ * Font weights
+ */
+const fontWeightTokens = {
+  'normal': '400',
+  'medium': '500',
+  'semibold': '600',
+  'bold': '700',
+} as const;
+
+/**
+ * Border radius
+ */
+const borderRadiusTokens = {
+  'none': '0',
+  'sm': '6px',
+  'md': '8px',
+  'lg': '12px',
+  'full': '9999px',
+  'circle': '50%',
+} as const;
+
+/**
+ * Box shadows
+ */
+const shadowTokens = {
+  'sm': '0 2px 4px rgba(0,0,0,0.1)',
+  'md': '0 -2px 10px rgba(0,0,0,0.1)',
+  'lg': '0 4px 8px rgba(0,0,0,0.3)',
+  'xl': '0 10px 25px rgba(0,0,0,0.2)',
+} as const;
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+type StyleObject = Record<string, string>;
+type StyleHelper = StyleObject | false | null | undefined;
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+/**
+ * Resolve a color token to its CSS value
+ */
+function resolveColor(token: string): string {
+  return colorTokens[token as keyof typeof colorTokens] || token;
+}
+
+/**
+ * Resolve a spacing token to its CSS value
+ */
+function resolveSpacing(token: string): string {
+  return spacingTokens[token as keyof typeof spacingTokens] || token;
+}
+
+/**
+ * Resolve a font size token to its CSS value
+ */
+function resolveFontSize(token: string): string {
+  return fontSizeTokens[token as keyof typeof fontSizeTokens] || token;
+}
+
+/**
+ * Resolve a font weight token to its CSS value
+ */
+function resolveFontWeight(token: string): string {
+  return fontWeightTokens[token as keyof typeof fontWeightTokens] || token;
+}
+
+/**
+ * Resolve a border radius token to its CSS value
+ */
+function resolveBorderRadius(token: string): string {
+  return borderRadiusTokens[token as keyof typeof borderRadiusTokens] || token;
+}
+
+/**
+ * Resolve a shadow token to its CSS value
+ */
+function resolveShadow(token: string): string {
+  return shadowTokens[token as keyof typeof shadowTokens] || token;
+}
+
+// =============================================================================
+// STYLE HELPER FUNCTIONS
+// =============================================================================
+
+// Color helpers
+export const color = (value: string): StyleObject => ({ color: resolveColor(value) });
+export const bgColor = (value: string): StyleObject => ({ backgroundColor: resolveColor(value) });
+export const borderColor = (value: string): StyleObject => ({ borderColor: resolveColor(value) });
+export const bg = bgColor; // Alias
+
+// Spacing helpers - Padding
+export const padding = (value: string): StyleObject => ({ padding: resolveSpacing(value) });
+export const paddingX = (value: string): StyleObject => {
+  const val = resolveSpacing(value);
+  return { paddingLeft: val, paddingRight: val };
+};
+export const paddingY = (value: string): StyleObject => {
+  const val = resolveSpacing(value);
+  return { paddingTop: val, paddingBottom: val };
+};
+export const paddingTop = (value: string): StyleObject => ({ paddingTop: resolveSpacing(value) });
+export const paddingBottom = (value: string): StyleObject => ({ paddingBottom: resolveSpacing(value) });
+export const paddingLeft = (value: string): StyleObject => ({ paddingLeft: resolveSpacing(value) });
+export const paddingRight = (value: string): StyleObject => ({ paddingRight: resolveSpacing(value) });
+
+// Aliases
+export const p = padding;
+export const px = paddingX;
+export const py = paddingY;
+export const pt = paddingTop;
+export const pb = paddingBottom;
+export const pl = paddingLeft;
+export const pr = paddingRight;
+
+// Spacing helpers - Margin
+export const margin = (value: string): StyleObject => ({ margin: resolveSpacing(value) });
+export const marginX = (value: string): StyleObject => {
+  const val = resolveSpacing(value);
+  return { marginLeft: val, marginRight: val };
+};
+export const marginY = (value: string): StyleObject => {
+  const val = resolveSpacing(value);
+  return { marginTop: val, marginBottom: val };
+};
+export const marginTop = (value: string): StyleObject => ({ marginTop: resolveSpacing(value) });
+export const marginBottom = (value: string): StyleObject => ({ marginBottom: resolveSpacing(value) });
+export const marginLeft = (value: string): StyleObject => ({ marginLeft: resolveSpacing(value) });
+export const marginRight = (value: string): StyleObject => ({ marginRight: resolveSpacing(value) });
+
+// Aliases
+export const m = margin;
+export const mx = marginX;
+export const my = marginY;
+export const mt = marginTop;
+export const mb = marginBottom;
+export const ml = marginLeft;
+export const mr = marginRight;
+
+// Typography helpers
+export const fontSize = (value: string): StyleObject => ({ fontSize: resolveFontSize(value) });
+export const fontWeight = (value: string): StyleObject => ({ fontWeight: resolveFontWeight(value) });
+export const textAlign = (value: string): StyleObject => ({ textAlign: value });
+export const fontFamily = (value: string): StyleObject => ({ fontFamily: value });
+
+// Layout helpers
+export const display = (value: string): StyleObject => ({ display: value });
+export const position = (value: string): StyleObject => ({ position: value });
+export const width = (value: string): StyleObject => ({ width: value });
+export const height = (value: string): StyleObject => ({ height: value });
+export const minWidth = (value: string): StyleObject => ({ minWidth: value });
+export const minHeight = (value: string): StyleObject => ({ minHeight: value });
+export const maxWidth = (value: string): StyleObject => ({ maxWidth: value });
+export const maxHeight = (value: string): StyleObject => ({ maxHeight: value });
+
+// Flexbox helpers
+export const flex = (value: string = '1'): StyleObject => ({ flex: value });
+export const flexDirection = (value: string): StyleObject => ({ flexDirection: value });
+export const alignItems = (value: string): StyleObject => ({ alignItems: value });
+export const justifyContent = (value: string): StyleObject => ({ justifyContent: value });
+export const flexWrap = (value: string): StyleObject => ({ flexWrap: value });
+
+// Positioning helpers
+export const top = (value: string): StyleObject => ({ top: resolveSpacing(value) });
+export const bottom = (value: string): StyleObject => ({ bottom: resolveSpacing(value) });
+export const left = (value: string): StyleObject => ({ left: resolveSpacing(value) });
+export const right = (value: string): StyleObject => ({ right: resolveSpacing(value) });
+
+// Border helpers
+export const border = (value: string): StyleObject => ({ border: value });
+export const borderRadius = (value: string): StyleObject => ({ borderRadius: resolveBorderRadius(value) });
+export const borderWidth = (value: string): StyleObject => ({ borderWidth: value });
+
+// Visual helpers
+export const boxShadow = (value: string): StyleObject => ({ boxShadow: resolveShadow(value) });
+export const opacity = (value: string): StyleObject => ({ opacity: value });
+export const overflow = (value: string): StyleObject => ({ overflow: value });
+export const zIndex = (value: string): StyleObject => ({ zIndex: value });
+
+// Interaction helpers
+export const cursor = (value: string): StyleObject => ({ cursor: value });
+export const pointerEvents = (value: string): StyleObject => ({ pointerEvents: value });
+
+// Transition/Animation helpers
+export const transition = (value: string = 'all 0.2s ease'): StyleObject => ({ transition: value });
+
+// Background helpers
+export const background = (value: string): StyleObject => ({ background: value });
+
+// =============================================================================
+// MAIN INLINE STYLE FUNCTION
+// =============================================================================
+
+/**
+ * Combine multiple style helpers into a single style object
+ * Automatically filters out falsey values for conditional styling
+ *
+ * @example
+ * inlineStyle(
+ *   textAlign('center'),
+ *   color('gray-500'),
+ *   padding('sm'),
+ *   bgColor('yellow-100'),
+ *   isPending && display('none'),
+ *   { borderRadius: '12px' }
+ * )
+ */
+export function inlineStyle(...styles: StyleHelper[]): StyleObject {
+  return styles.reduce<StyleObject>((acc, style) => {
+    if (style) {
+      Object.assign(acc, style);
+    }
+    return acc;
+  }, {});
+}
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+/**
+ * Common font family
+ */
+export const defaultFontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
--- a/packages/plugin-sdk/vite.config.ts
+++ b/packages/plugin-sdk/vite.config.ts
@@ -15,26 +15,16 @@ export default defineConfig({
  build: {
    target: 'es2020',
    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      name: 'TLSNPluginSDK',
-      formats: ['es', 'cjs', 'umd'],
-      fileName: (format) => {
-        if (format === 'es') return 'index.js';
-        if (format === 'cjs') return 'index.cjs';
-        if (format === 'umd') return 'index.umd.js';
-        return `index.${format}.js`;
+      entry: {
+        index: path.resolve(__dirname, 'src/index.ts'),
+        styles: path.resolve(__dirname, 'src/styles.ts'),
      },
+      formats: ['es'],
    },
    rollupOptions: {
      // Externalize QuickJS and Node.js dependencies
-      external: ['@sebastianwessel/quickjs', '@jitl/quickjs-ng-wasmfile-release-sync', /^node:.*/],
+      external: ['@sebastianwessel/quickjs', '@jitl/quickjs-ng-wasmfile-release-sync', /^node:.*/, '@tlsn/common'],
      output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {
-          '@sebastianwessel/quickjs': 'QuickJS',
-          '@jitl/quickjs-ng-wasmfile-release-sync': 'QuickJSVariant',
-        },
        exports: 'named',
      },
    },
--- a/packages/ts-plugin-sample/.gitignore
+++ b/packages/ts-plugin-sample/.gitignore
@@ -0,0 +1,19 @@
+# Build output
+build/
+*.js
+*.js.map
+*.d.ts
+
+# Dependencies
+node_modules/
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
--- a/packages/ts-plugin-sample/README.md
+++ b/packages/ts-plugin-sample/README.md
@@ -0,0 +1,312 @@
+# TypeScript Plugin Sample
+
+A TypeScript implementation of the X Profile Prover plugin demonstrating how to write type-safe TLSN plugins.
+
+## Overview
+
+This package shows how to:
+- Write TLSN plugins in TypeScript with full type safety
+- Import types from `@tlsn/plugin-sdk`
+- Compile TypeScript plugins to JavaScript for execution
+- Use all plugin API features (prove, openWindow, UI rendering, hooks)
+
+## Quick Start
+
+### Installation
+
+```bash
+cd packages/ts-plugin-sample
+npm install
+```
+
+### Build
+
+```bash
+npm run build
+```
+
+This bundles `src/index.ts` and `src/config.ts` into a single `build/index.js` file with clean `export default` statement.
+
+### Development Mode
+
+```bash
+npm run dev
+```
+
+Watches for changes and rebuilds automatically.
+
+### Type Checking
+
+```bash
+npm run typecheck
+```
+
+Runs TypeScript type checking without emitting files.
+
+## Project Structure
+
+```
+ts-plugin-sample/
+├── package.json          # Dependencies and build scripts
+├── tsconfig.json         # TypeScript compiler configuration
+├── build-wrapper.cjs     # Custom build script for clean exports
+├── src/
+│   ├── index.ts         # TypeScript plugin implementation
+│   └── config.ts        # Plugin configuration
+├── build/
+│   ├── index.js         # Bundled plugin with export default
+│   └── index.js.map     # Source map for debugging
+└── README.md
+```
+
+## TypeScript Features
+
+### Type Imports
+
+Import types from the plugin SDK for compile-time checking:
+
+```typescript
+import type {
+  PluginConfig,
+  RequestPermission,
+  Handler,
+  HandlerType,
+  HandlerPart,
+  HandlerAction,
+  InterceptedRequestHeader,
+  DomJson,
+} from '@tlsn/plugin-sdk';
+```
+
+### Plugin Config Type Safety
+
+```typescript
+const config: PluginConfig = {
+  name: 'X Profile Prover',
+  description: 'This plugin will prove your X.com profile.',
+  version: '0.1.0',
+  author: 'TLSN Team',
+  requests: [
+    {
+      method: 'GET',
+      host: 'api.x.com',
+      pathname: '/1.1/account/settings.json',
+      verifierUrl: 'https://verifier.tlsnotary.org',
+    } satisfies RequestPermission,
+  ],
+  urls: ['https://x.com/*'],
+};
+```
+
+### Plugin API Globals
+
+The plugin execution environment (QuickJS sandbox) provides these globals:
+
+```typescript
+// Declare types for globals injected by the sandbox
+declare function div(options?: DomOptions, children?: DomJson[]): DomJson;
+declare function button(options?: DomOptions, children?: DomJson[]): DomJson;
+declare function openWindow(url: string, options?: {...}): Promise<{...}>;
+declare function useEffect(callback: () => void, deps: any[]): void;
+declare function useHeaders(filter: (headers: InterceptedRequestHeader[]) => InterceptedRequestHeader[]): InterceptedRequestHeader[];
+declare function useState<T>(key: string, defaultValue: T): T;
+declare function setState<T>(key: string, value: T): void;
+declare function prove(requestOptions: {...}, proverOptions: {...}): Promise<any>;
+declare function done(result?: any): void;
+```
+
+### Type-Safe Handlers
+
+```typescript
+const handlers: Handler[] = [
+  {
+    type: 'SENT' as HandlerType,
+    part: 'START_LINE' as HandlerPart,
+    action: 'REVEAL' as HandlerAction,
+  },
+  {
+    type: 'RECV' as HandlerType,
+    part: 'BODY' as HandlerPart,
+    action: 'REVEAL' as HandlerAction,
+    params: {
+      type: 'json',
+      path: 'screen_name',
+    },
+  },
+];
+```
+
+## Key Differences from JavaScript
+
+### 1. Type Annotations
+
+```typescript
+// JavaScript
+function onClick() {
+  const isRequestPending = useState('isRequestPending', false);
+  // ...
+}
+
+// TypeScript
+async function onClick(): Promise<void> {
+  const isRequestPending = useState<boolean>('isRequestPending', false);
+  // ...
+}
+```
+
+### 2. Interface Compliance
+
+TypeScript ensures your config matches the `PluginConfig` interface:
+
+```typescript
+const config: PluginConfig = {
+  name: 'X Profile Prover',           // ✓ Required
+  description: 'Proves X profile',    // ✓ Required
+  version: '0.1.0',                    // ✓ Optional
+  requests: [...],                     // ✓ Optional
+  urls: [...],                         // ✓ Optional
+  // TypeScript will error if required fields are missing!
+};
+```
+
+### 3. Compile-Time Errors
+
+```typescript
+// This will error at compile time:
+const handler: Handler = {
+  type: 'INVALID',  // ❌ Type '"INVALID"' is not assignable to type 'HandlerType'
+  part: 'BODY',
+  action: 'REVEAL',
+};
+
+// This will pass:
+const handler: Handler = {
+  type: 'RECV',     // ✓ Valid HandlerType
+  part: 'BODY',
+  action: 'REVEAL',
+};
+```
+
+## Build Configuration
+
+### Build Tool: esbuild + Custom Wrapper
+
+The plugin uses **esbuild** with a custom build wrapper:
+- **Single file output:** All code bundled into `build/index.js` (7.2KB, 257 lines)
+- **ES Module format:** Standard `export default` statement
+- **No external imports:** All dependencies bundled inline
+- **Inlined enums:** Handler enums included directly (no SDK imports)
+- **Source maps:** Generated for debugging (`build/index.js.map`)
+- **Fast builds:** ~10ms typical build time
+
+The build wrapper (`build-wrapper.cjs`) transforms the esbuild output to use a clean `export default` statement matching the JavaScript plugin format.
+
+### TypeScript Config (`tsconfig.json`)
+
+TypeScript is used for type checking only (`npm run typecheck`):
+- **Target:** ES2020 (modern browser features)
+- **Strict:** Full type checking enabled
+- **Global types:** Includes SDK globals for plugin API functions
+
+## Loading in Extension
+
+After building, the compiled `build/index.js` can be loaded in the TLSN extension:
+
+1. Build the plugin: `npm run build`
+2. The output is `build/index.js` with clean ES module export:
+   ```javascript
+   export default {
+     main,
+     onClick,
+     expandUI,
+     minimizeUI,
+     config,
+   };
+   ```
+3. Load and execute in the extension:
+   ```javascript
+   const pluginCode = fs.readFileSync('build/index.js', 'utf8');
+   const plugin = await sandbox.eval(pluginCode);
+   // plugin = { main, onClick, expandUI, minimizeUI, config }
+   ```
+4. The plugin executes with full type safety verified at compile time
+
+**Output Characteristics:**
+- ✅ Single file with `export default` statement
+- ✅ No external imports (all dependencies bundled)
+- ✅ Inlined enums (no SDK runtime dependency)
+- ✅ ES Module format
+- ✅ Matches JavaScript plugin structure
+
+## Comparison with JavaScript Plugin
+
+See `packages/demo/generated/twitter.js` for the equivalent JavaScript implementation.
+
+**Advantages of TypeScript:**
+- Compile-time type checking
+- IDE autocomplete and IntelliSense
+- Catches errors before runtime
+- Better documentation via types
+- Refactoring safety
+
+**Trade-offs:**
+- Requires build step
+- Slightly more verbose (type annotations)
+- Need to maintain type declarations
+
+## Development Tips
+
+### 1. Use Type Inference
+
+TypeScript can infer many types:
+
+```typescript
+// Explicit (verbose)
+const header: InterceptedRequestHeader | undefined = useHeaders(...)[0];
+
+// Inferred (cleaner)
+const [header] = useHeaders(...);  // Type inferred from useHeaders return type
+```
+
+### 2. Use `satisfies` for Config
+
+```typescript
+// Good: Type-checked but allows literal types
+requests: [
+  {
+    method: 'GET',
+    host: 'api.x.com',
+    // ...
+  } satisfies RequestPermission,
+]
+
+// Also good: Full type annotation
+const request: RequestPermission = {
+  method: 'GET',
+  // ...
+};
+```
+
+### 3. Enable Strict Mode
+
+Keep `"strict": true` in `tsconfig.json` for maximum type safety.
+
+### 4. Check Build Errors
+
+```bash
+npm run build
+
+# Check for type errors without building
+npx tsc --noEmit
+```
+
+## Resources
+
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
+- [Plugin SDK Types](../plugin-sdk/src/types.ts)
+- [JavaScript Plugin Example](../demo/generated/twitter.js)
+- [TLSN Extension Docs](../../CLAUDE.md)
+
+## License
+
+MIT
--- a/packages/ts-plugin-sample/build-wrapper.cjs
+++ b/packages/ts-plugin-sample/build-wrapper.cjs
@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+/**
+ * Build wrapper to create clean export default statement
+ */
+const fs = require('fs');
+const { execSync } = require('child_process');
+
+// Run esbuild
+console.log('Building with esbuild...');
+execSync('esbuild src/index.ts --bundle --format=esm --outfile=build/index.js --sourcemap --external:@sebastianwessel/quickjs --external:@jitl/quickjs-ng-wasmfile-release-sync --external:uuid --external:fast-deep-equal', {
+  stdio: 'inherit'
+});
+
+// Read the generated code
+let code = fs.readFileSync('build/index.js', 'utf8');
+
+// Write back
+fs.writeFileSync('build/index.js', code);
+
+console.log('✓ Build complete: build/index.js');
--- a/packages/ts-plugin-sample/package.json
+++ b/packages/ts-plugin-sample/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@tlsn/ts-plugin-sample",
+  "version": "0.1.0-alpha.13",
+  "description": "TypeScript plugin sample for TLSN extension",
+  "type": "module",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "node build-wrapper.cjs",
+    "clean": "rm -rf build",
+    "dev": "esbuild src/index.ts --bundle --format=esm --outfile=build/index.js --sourcemap --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "tlsn",
+    "plugin",
+    "typescript",
+    "example"
+  ],
+  "author": "TLSN Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tlsnotary/tlsn-extension.git",
+    "directory": "packages/ts-plugin-sample"
+  },
+  "dependencies": {
+    "@tlsn/plugin-sdk": "*"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.2",
+    "typescript": "^5.5.4"
+  }
+}
--- a/packages/ts-plugin-sample/src/components/FloatingButton.ts
+++ b/packages/ts-plugin-sample/src/components/FloatingButton.ts
@@ -0,0 +1,58 @@
+/**
+ * FloatingButton Component
+ *
+ * Minimized floating action button
+ */
+
+import type { DomJson } from '@tlsn/plugin-sdk';
+import {
+  inlineStyle,
+  position,
+  bottom,
+  right,
+  width,
+  height,
+  borderRadius,
+  bgColor,
+  boxShadow,
+  zIndex,
+  display,
+  alignItems,
+  justifyContent,
+  cursor,
+  fontSize,
+  color,
+  transition,
+} from '@tlsn/plugin-sdk/styles';
+
+export interface FloatingButtonProps {
+  onClick: string;
+  icon?: string;
+}
+
+export function FloatingButton({ onClick, icon = '🔐' }: FloatingButtonProps): DomJson {
+  return div(
+    {
+      style: inlineStyle(
+        position('fixed'),
+        bottom('lg'),
+        right('lg'),
+        width('60px'),
+        height('60px'),
+        borderRadius('circle'),
+        bgColor('#4CAF50'),
+        boxShadow('lg'),
+        zIndex('999999'),
+        display('flex'),
+        alignItems('center'),
+        justifyContent('center'),
+        cursor('pointer'),
+        fontSize('2xl'),
+        color('white'),
+        transition()
+      ),
+      onclick: onClick,
+    },
+    [icon]
+  );
+}
--- a/packages/ts-plugin-sample/src/components/LoginPrompt.ts
+++ b/packages/ts-plugin-sample/src/components/LoginPrompt.ts
@@ -0,0 +1,32 @@
+/**
+ * LoginPrompt Component
+ *
+ * Displays a message prompting the user to login
+ */
+
+import type { DomJson } from '@tlsn/plugin-sdk';
+import {
+  inlineStyle,
+  textAlign,
+  color,
+  padding,
+  bgColor,
+  borderRadius,
+  border,
+} from '@tlsn/plugin-sdk/styles';
+
+export function LoginPrompt(): DomJson {
+  return div(
+    {
+      style: inlineStyle(
+        textAlign('center'),
+        color('gray-600'),
+        padding('sm'),
+        bgColor('yellow-100'),
+        borderRadius('sm'),
+        border('1px solid #ffeaa7')
+      ),
+    },
+    ['Please login to x.com to continue']
+  );
+}
--- a/packages/ts-plugin-sample/src/components/OverlayHeader.ts
+++ b/packages/ts-plugin-sample/src/components/OverlayHeader.ts
@@ -0,0 +1,75 @@
+/**
+ * OverlayHeader Component
+ *
+ * Header bar with title and minimize button
+ */
+
+import type { DomJson } from '@tlsn/plugin-sdk';
+import {
+  inlineStyle,
+  background,
+  paddingY,
+  paddingX,
+  display,
+  justifyContent,
+  alignItems,
+  color,
+  fontWeight,
+  fontSize,
+  border,
+  cursor,
+  padding,
+  width,
+  height,
+} from '@tlsn/plugin-sdk/styles';
+
+export interface OverlayHeaderProps {
+  title: string;
+  onMinimize: string;
+}
+
+export function OverlayHeader({ title, onMinimize }: OverlayHeaderProps): DomJson {
+  return div(
+    {
+      style: inlineStyle(
+        background('linear-gradient(135deg, #667eea 0%, #764ba2 100%)'),
+        paddingY('sm'),
+        paddingX('md'),
+        display('flex'),
+        justifyContent('space-between'),
+        alignItems('center'),
+        color('white')
+      ),
+    },
+    [
+      div(
+        {
+          style: inlineStyle(
+            fontWeight('semibold'),
+            fontSize('lg')
+          ),
+        },
+        [title]
+      ),
+      button(
+        {
+          style: inlineStyle(
+            background('transparent'),
+            border('none'),
+            color('white'),
+            fontSize('xl'),
+            cursor('pointer'),
+            padding('0'),
+            width('24px'),
+            height('24px'),
+            display('flex'),
+            alignItems('center'),
+            justifyContent('center')
+          ),
+          onclick: onMinimize,
+        },
+        ['−']
+      ),
+    ]
+  );
+}
--- a/packages/ts-plugin-sample/src/components/PluginOverlay.ts
+++ b/packages/ts-plugin-sample/src/components/PluginOverlay.ts
@@ -0,0 +1,85 @@
+/**
+ * PluginOverlay Component
+ *
+ * Main plugin UI overlay container
+ */
+
+import type { DomJson } from '@tlsn/plugin-sdk';
+import {
+  inlineStyle,
+  position,
+  bottom,
+  right,
+  width,
+  borderRadius,
+  bgColor,
+  boxShadow,
+  zIndex,
+  fontSize,
+  fontFamily,
+  overflow,
+  padding,
+  defaultFontFamily,
+} from '@tlsn/plugin-sdk/styles';
+import { OverlayHeader } from './OverlayHeader';
+import { StatusIndicator } from './StatusIndicator';
+import { ProveButton } from './ProveButton';
+import { LoginPrompt } from './LoginPrompt';
+
+export interface PluginOverlayProps {
+  title: string;
+  isConnected: boolean;
+  isPending: boolean;
+  onMinimize: string;
+  onProve: string;
+}
+
+export function PluginOverlay({
+  title,
+  isConnected,
+  isPending,
+  onMinimize,
+  onProve,
+}: PluginOverlayProps): DomJson {
+  return div(
+    {
+      style: inlineStyle(
+        position('fixed'),
+        bottom('0'),
+        right('xs'),
+        width('280px'),
+        borderRadius('md'),
+        { borderRadius: '8px 8px 0 0' }, // Custom override for specific corner rounding
+        bgColor('white'),
+        boxShadow('md'),
+        zIndex('999999'),
+        fontSize('sm'),
+        fontFamily(defaultFontFamily),
+        overflow('hidden')
+      ),
+    },
+    [
+      // Header
+      OverlayHeader({ title, onMinimize }),
+
+      // Content area
+      div(
+        {
+          style: inlineStyle(
+            padding('lg'),
+            bgColor('gray-100')
+          ),
+        },
+        [
+          // Status indicator
+          StatusIndicator({ isConnected }),
+
+          // Conditional content: button or login prompt
+          isConnected
+            ? ProveButton({ onClick: onProve, isPending })
+            : LoginPrompt(),
+        ]
+      ),
+    ]
+  );
+}
--- a/packages/ts-plugin-sample/src/components/ProveButton.ts
+++ b/packages/ts-plugin-sample/src/components/ProveButton.ts
@@ -0,0 +1,49 @@
+/**
+ * ProveButton Component
+ *
+ * Button for initiating proof generation
+ */
+
+import type { DomJson } from '@tlsn/plugin-sdk';
+import {
+  inlineStyle,
+  width,
+  padding,
+  background,
+  color,
+  border,
+  borderRadius,
+  fontSize,
+  fontWeight,
+  cursor,
+  transition,
+  opacity,
+} from '@tlsn/plugin-sdk/styles';
+
+export interface ProveButtonProps {
+  onClick: string;
+  isPending: boolean;
+}
+
+export function ProveButton({ onClick, isPending }: ProveButtonProps): DomJson {
+  return button(
+    {
+      style: inlineStyle(
+        width('100%'),
+        padding('sm'),
+        background('linear-gradient(135deg, #667eea 0%, #764ba2 100%)'),
+        color('white'),
+        border('none'),
+        borderRadius('sm'),
+        fontSize('md'),
+        fontWeight('semibold'),
+        cursor('pointer'),
+        transition(),
+        isPending && opacity('0.6'),
+        isPending && cursor('not-allowed')
+      ),
+      onclick: onClick,
+    },
+    [isPending ? 'Generating Proof...' : 'Prove']
+  );
+}
--- a/packages/ts-plugin-sample/src/components/StatusIndicator.ts
+++ b/packages/ts-plugin-sample/src/components/StatusIndicator.ts
@@ -0,0 +1,61 @@
+/**
+ * StatusIndicator Component
+ *
+ * Shows connection status with visual indicator
+ */
+
+import type { DomJson } from '@tlsn/plugin-sdk';
+import {
+  inlineStyle,
+  display,
+  alignItems,
+  marginBottom,
+  width,
+  height,
+  borderRadius,
+  bgColor,
+  marginRight,
+  fontSize,
+  color,
+} from '@tlsn/plugin-sdk/styles';
+
+export interface StatusIndicatorProps {
+  isConnected: boolean;
+}
+
+export function StatusIndicator({ isConnected }: StatusIndicatorProps): DomJson {
+  return div(
+    {
+      style: inlineStyle(
+        display('flex'),
+        alignItems('center'),
+        marginBottom('md')
+      ),
+    },
+    [
+      // Status dot
+      div(
+        {
+          style: inlineStyle(
+            width('8px'),
+            height('8px'),
+            borderRadius('circle'),
+            bgColor(isConnected ? '#48bb78' : '#cbd5e0'),
+            marginRight('2')
+          ),
+        },
+        []
+      ),
+      // Status text
+      div(
+        {
+          style: inlineStyle(
+            fontSize('sm'),
+            color('gray-700')
+          ),
+        },
+        [isConnected ? 'Connected' : 'Waiting for connection...']
+      ),
+    ]
+  );
+}
--- a/packages/ts-plugin-sample/src/components/index.ts
+++ b/packages/ts-plugin-sample/src/components/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Component exports
+ *
+ * Centralized export point for all UI components
+ */
+
+export { FloatingButton } from './FloatingButton';
+export type { FloatingButtonProps } from './FloatingButton';
+
+export { PluginOverlay } from './PluginOverlay';
+export type { PluginOverlayProps } from './PluginOverlay';
+
+export { OverlayHeader } from './OverlayHeader';
+export type { OverlayHeaderProps } from './OverlayHeader';
+
+export { StatusIndicator } from './StatusIndicator';
+export type { StatusIndicatorProps } from './StatusIndicator';
+
+export { ProveButton } from './ProveButton';
+export type { ProveButtonProps } from './ProveButton';
+
+export { LoginPrompt } from './LoginPrompt';
--- a/packages/ts-plugin-sample/src/config.ts
+++ b/packages/ts-plugin-sample/src/config.ts
@@ -0,0 +1,24 @@
+/**
+ * Plugin Configuration
+ *
+ * Defines metadata and permissions for the X Profile Prover plugin.
+ */
+
+// Type imports only (stripped at compile time)
+import type { PluginConfig, RequestPermission } from '@tlsn/plugin-sdk';
+
+export const config: PluginConfig = {
+  name: 'X Profile Prover',
+  description: 'This plugin will prove your X.com profile.',
+  version: '0.1.0',
+  author: 'TLSN Team',
+  requests: [
+    {
+      method: 'GET',
+      host: 'api.x.com',
+      pathname: '/1.1/account/settings.json',
+      verifierUrl: 'http://localhost:7047',
+    } satisfies RequestPermission,
+  ],
+  urls: ['https://x.com/*'],
+};
--- a/packages/ts-plugin-sample/src/index.ts
+++ b/packages/ts-plugin-sample/src/index.ts
@@ -0,0 +1,211 @@
+/**
+ * X Profile Prover - TypeScript Plugin Sample
+ *
+ * This is a TypeScript implementation of the X.com profile prover plugin.
+ * It demonstrates how to write type-safe TLSN plugins using TypeScript.
+ */
+
+// =============================================================================
+// IMPORTS
+// =============================================================================
+/**
+ * Import types from the plugin SDK (type-only, stripped at compile time).
+ *
+ * The plugin API functions (div, button, openWindow, etc.) are declared globally
+ * via the SDK type declarations.
+ */
+import type { Handler, DomJson } from '@tlsn/plugin-sdk';
+import { config } from './config';
+import { FloatingButton, PluginOverlay } from './components';
+
+// =============================================================================
+// HANDLER ENUMS (Inlined for standalone execution)
+// =============================================================================
+/**
+ * These enum values are inlined instead of imported to create a standalone
+ * JavaScript file with no external dependencies.
+ */
+enum HandlerType {
+  SENT = 'SENT',
+  RECV = 'RECV',
+}
+
+enum HandlerPart {
+  START_LINE = 'START_LINE',
+  PROTOCOL = 'PROTOCOL',
+  METHOD = 'METHOD',
+  REQUEST_TARGET = 'REQUEST_TARGET',
+  STATUS_CODE = 'STATUS_CODE',
+  HEADERS = 'HEADERS',
+  BODY = 'BODY',
+  ALL = 'ALL',
+}
+
+enum HandlerAction {
+  REVEAL = 'REVEAL',
+  PEDERSEN = 'PEDERSEN',
+}
+
+// =============================================================================
+// PROOF GENERATION CALLBACK
+// =============================================================================
+/**
+ * This function is triggered when the user clicks the "Prove" button.
+ * It extracts authentication headers from intercepted requests and generates
+ * a TLSNotary proof using the unified prove() API.
+ */
+async function onClick(): Promise<void> {
+  const isRequestPending = useState<boolean>('isRequestPending', false);
+
+  if (isRequestPending) return;
+
+  setState('isRequestPending', true);
+
+  // Step 1: Get the intercepted header from the X.com API request
+  const [header] = useHeaders((headers) => {
+    return headers.filter((header) =>
+      header.url.includes('https://api.x.com/1.1/account/settings.json')
+    );
+  });
+
+  if (!header) {
+    setState('isRequestPending', false);
+    return;
+  }
+
+  // Step 2: Extract authentication headers from the intercepted request
+  const headers: Record<string, string | undefined> = {
+    cookie: header.requestHeaders.find((h) => h.name === 'Cookie')?.value,
+    'x-csrf-token': header.requestHeaders.find((h) => h.name === 'x-csrf-token')?.value,
+    'x-client-transaction-id': header.requestHeaders.find(
+      (h) => h.name === 'x-client-transaction-id'
+    )?.value,
+    Host: 'api.x.com',
+    authorization: header.requestHeaders.find((h) => h.name === 'authorization')?.value,
+    'Accept-Encoding': 'identity',
+    Connection: 'close',
+  };
+
+  // Step 3: Generate TLS proof using the unified prove() API
+  const resp = await prove(
+    // Request options
+    {
+      url: 'https://api.x.com/1.1/account/settings.json',
+      method: 'GET',
+      headers: headers,
+    },
+    // Prover options
+    {
+      verifierUrl: 'http://localhost:7047',
+      proxyUrl: 'ws://localhost:7047/proxy?token=api.x.com',
+      maxRecvData: 4000,
+      maxSentData: 2000,
+      handlers: [
+        // Reveal the request start line
+        {
+          type: HandlerType.SENT,
+          part: HandlerPart.START_LINE,
+          action: HandlerAction.REVEAL,
+        } satisfies Handler,
+        // Reveal the response start line
+        {
+          type: HandlerType.RECV,
+          part: HandlerPart.START_LINE,
+          action: HandlerAction.REVEAL,
+        } satisfies Handler,
+        // Reveal the 'date' header from the response
+        {
+          type: HandlerType.RECV,
+          part: HandlerPart.HEADERS,
+          action: HandlerAction.REVEAL,
+          params: {
+            key: 'date',
+          },
+        } satisfies Handler,
+        // Reveal the 'screen_name' field from the JSON response body
+        {
+          type: HandlerType.RECV,
+          part: HandlerPart.BODY,
+          action: HandlerAction.REVEAL,
+          params: {
+            type: 'json' as const,
+            path: 'screen_name',
+          },
+        } satisfies Handler,
+      ],
+    }
+  );
+
+  // Step 4: Complete plugin execution and return the proof result
+  done(JSON.stringify(resp));
+}
+
+/**
+ * Expand the minimized UI to show full plugin interface
+ */
+function expandUI(): void {
+  setState('isMinimized', false);
+}
+
+/**
+ * Minimize the UI to a floating action button
+ */
+function minimizeUI(): void {
+  setState('isMinimized', true);
+}
+
+// =============================================================================
+// MAIN UI FUNCTION
+// =============================================================================
+/**
+ * The main() function is called reactively whenever plugin state changes.
+ * It returns a DOM structure that is rendered as the plugin UI.
+ */
+function main(): DomJson {
+  // Subscribe to intercepted headers for the X.com API endpoint
+  const [header] = useHeaders((headers) =>
+    headers.filter((header) => header.url.includes('https://api.x.com/1.1/account/settings.json'))
+  );
+
+  const isMinimized = useState<boolean>('isMinimized', false);
+  const isRequestPending = useState<boolean>('isRequestPending', false);
+
+  // Run once on plugin load: Open X.com in a new window
+  useEffect(() => {
+    openWindow('https://x.com');
+  }, []);
+
+  // If minimized, show floating action button
+  if (isMinimized) {
+    return FloatingButton({ onClick: 'expandUI' });
+  }
+
+  // Render the plugin UI overlay
+  return PluginOverlay({
+    title: 'X Profile Prover',
+    isConnected: !!header,
+    isPending: isRequestPending,
+    onMinimize: 'minimizeUI',
+    onProve: 'onClick',
+  });
+}
+
+// =============================================================================
+// PLUGIN EXPORTS
+// =============================================================================
+/**
+ * All plugins must export an object with these properties:
+ * - main: The reactive UI rendering function
+ * - onClick: Click handler callback for buttons
+ * - config: Plugin metadata
+ *
+ * Additional exported functions (expandUI, minimizeUI) are also available
+ * as click handlers referenced by the 'onclick' property in DOM elements.
+ */
+export default {
+  main,
+  onClick,
+  expandUI,
+  minimizeUI,
+  config,
+};
--- a/packages/ts-plugin-sample/tsconfig.json
+++ b/packages/ts-plugin-sample/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    /* Language and Environment */
+    "target": "ES2020",
+    "lib": ["ES2020"],
+
+    /* Modules */
+    "module": "ES2020",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+
+    /* Emit */
+    "outDir": "./build",
+    "sourceMap": true,
+    "removeComments": false,
+
+    /* Interop Constraints */
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Type Checking */
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Completeness */
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*",
+    "../plugin-sdk/src/globals.d.ts"
+  ],
+  "exclude": ["node_modules", "build"]
+}
Author	SHA1	Message	Date
tsukino	2bfc197316	fix: add backward compatibility exports for extension imports - Add /src and /src/types paths to package.json exports - Extension imports from @tlsn/plugin-sdk/src/types now work correctly - Fixes 'npm run dev' in packages/extension	2026-01-14 17:15:39 +08:00
tsukino	78cec7651b	feat: enable tree-shaking with separate styles entry point - Add package.json exports field with @tlsn/plugin-sdk/styles entry point - Configure Vite to build separate bundles for index and styles - Remove styling exports from main SDK index (now only in /styles) - Update all components to import from @tlsn/plugin-sdk/styles - Update ts-plugin-sample tsconfig to use bundler module resolution - Eliminate QuickJS imports from plugin build output Benefits: - Plugin bundle size reduced from 17.4kb to 12.7kb (-27%) - SDK main bundle reduced from 51.74kb to 41.10kb (-21%) - Styles bundle is only 7.71kb - Proper tree-shaking prevents importing unused Host/QuickJS code	2026-01-14 17:07:27 +08:00
tsukino	40bf2cec82	feat: add comprehensive non-opinionated color palette - Add full color scales (100-900) for gray, blue, purple, red, yellow, orange, green - Add white and black as base colors - Remove opinionated 'primary' color scheme - Update OverlayHeader to use literal gradient instead of primary token - Remove legacy 'colors' export from plugin-sdk - Color system is now completely non-opinionated and Tailwind-compatible	2026-01-14 17:01:33 +08:00
tsukino	d6d80cf277	feat: move styling system to plugin-sdk package - Move styles.ts from ts-plugin-sample to plugin-sdk for reusability - Export all styling utilities from plugin-sdk package - Update all components to import styling functions from @tlsn/plugin-sdk - Add external dependencies to esbuild config to avoid bundling SDK runtime - Styling functions are now available to all plugins via the SDK	2026-01-14 16:55:09 +08:00
tsukino	449d2843ea	feat: implement Tailwind-like styling system with composable helpers - Add inlineStyle() function that merges multiple style helpers and filters falsey values - Create comprehensive style helper functions (color, padding, margin, display, etc.) - Add design token system with semantic color, spacing, and typography tokens - Support conditional styling with falsey value filtering (e.g., isPending && opacity('0.6')) - Update all components to use new composable styling API - Replace object-based styles with function-based helpers for better readability	2026-01-14 16:51:37 +08:00
tsukino	8d93ff679e	refactor: organize ts-plugin-sample UI into reusable components - Create centralized design system in src/styles.ts with colors, spacing, typography - Extract UI into component files: FloatingButton, PluginOverlay, OverlayHeader, StatusIndicator, ProveButton, LoginPrompt - Simplify main plugin file by composing components instead of inline DOM construction - Add TypeScript interfaces for component props - Improve code maintainability and readability	2026-01-14 16:39:04 +08:00
tsukino	2c1fc6daad	chore: simplify build-wrapper by removing unnecessary transformation esbuild already outputs the desired export format	2026-01-14 16:26:28 +08:00
tsukino	1cdf314e8d	feat: add TypeScript plugin support with sample implementation - Export plugin API types from SDK (DivFunction, ButtonFunction, etc.) - Enhanced globals.d.ts with all plugin API function types - Created ts-plugin-sample package with TypeScript implementation - Build outputs single file with clean export default statement - Inlined handler enums for standalone execution - No external imports in build output	2026-01-14 16:24:25 +08:00