feat: split decorator architecture and add universal entry points

.changeset/universal-split.md

@@ -0,0 +1,17 @@
+---
+"@github-ui/storybook-addon-performance-panel": minor
+---
+
+Add framework-agnostic support via new universal entry points and split decorator architecture.
+
+New entry points:
+- `./universal` — non-React public API (universal decorator + core)
+- `./react` — React-specific API with Profiler support
+
+New files:
+- `core/preview-core.ts` — shared `PerformanceMonitorCore` class
+- `decorators/universal.ts` — framework-agnostic decorator
+- `decorators/react.tsx` — React.Profiler bridge decorator
+- `preset-universal.ts` / `preview-universal.ts` — Storybook preset for non-React frameworks
+
+The React decorator stack is now `[withPerformanceMonitor, withReactProfiler]`, where the universal layer handles browser-level metrics and the React layer adds Profiler integration.

.github/workflows/docs.yml

@@ -27,11 +27,13 @@ jobs:
         env:
           BASE_PATH: ${{ github.event_name != 'pull_request' && '/storybook-addon-performance-panel/' || '' }}
       - run: npm run build-storybook -w @github-ui/examples-react
+      - run: npm run build-storybook -w @github-ui/examples-html
       - name: Merge into single site
         run: |
           mkdir -p _site/examples
           cp -r packages/website/dist/client/* _site/
           cp -r packages/examples-react/storybook-static _site/examples/react
+          cp -r packages/examples-html/storybook-static _site/examples/universal
       - uses: actions/upload-artifact@v6
         with:
           name: site

CONTRIBUTING.md

@@ -17,6 +17,7 @@ This is an npm workspaces monorepo with multiple packages:
 |-----------|---------|-------------|
 | `packages/storybook-addon-performance-panel` | `@github-ui/storybook-addon-performance-panel` | The addon — collectors, panel UI, and types |
 | `packages/examples-react` | `@github-ui/examples-react` | React docs storybook (`@storybook/react-vite`) |
+| `packages/examples-html` | `@github-ui/examples-html` | HTML docs storybook (`@storybook/html-vite`) |
 | `packages/storybook-config` | `@github-ui/storybook-config` | Shared storybook config (theming, features, Vite helpers) |
 
 ### Useful commands
@@ -31,12 +32,15 @@ This is an npm workspaces monorepo with multiple packages:
 | `npm run dev` | Build + start both storybooks with [portless](https://github.com/nicolo-ribaudo/portless) |
 | `npm run docs` | Build the addon and start the React docs storybook |
 | `npm run docs:build` | Build the addon and the React docs for production |
+| `npm run docs:html` | Build the addon and start the HTML docs storybook |
+| `npm run docs:html:build` | Build the HTML docs for production |
 
 #### Portless dev URLs
 
 When using `npm run dev`, each storybook is served at a stable `.localhost` URL via [portless](https://github.com/nicolo-ribaudo/portless):
 
 - **React docs:** `http://examples-react.localhost:1355`
+- **HTML docs:** `http://examples-html.localhost:1355`
 
 ## Prerequisites for running and testing code
 

README.md

@@ -29,6 +29,31 @@ export default definePreview({
 })
 ```
 
+### Non-React projects (HTML, Vue, Svelte, Web Components, etc.)
+
+Use the `./universal` subpath — no React dependency:
+
+```ts
+// .storybook/main.ts
+const config = {
+  addons: [
+    '@github-ui/storybook-addon-performance-panel/universal',
+  ],
+}
+```
+
+```ts
+// .storybook/preview.ts
+import addonPerformancePanel from '@github-ui/storybook-addon-performance-panel/universal'
+import {definePreview} from '@storybook/html-vite' // or vue-vite, svelte-vite, etc.
+
+export default definePreview({
+  addons: [addonPerformancePanel()],
+})
+```
+
+The universal entry collects all browser-level metrics (frame timing, CLS, INP, etc.) but omits React Profiler metrics. The React Performance section is automatically hidden in the panel.
+
 The performance panel appears as a "⚡ Performance" tab at the bottom of Storybook.
 
 ## Project Structure
@@ -39,6 +64,7 @@ This is an npm workspaces monorepo:
 |---------|-------------|
 | [packages/storybook-addon-performance-panel](./packages/storybook-addon-performance-panel) | The addon — collectors, panel UI, and types |
 | [packages/examples-react](./packages/examples-react) | React docs storybook (`@storybook/react-vite`) |
+| [packages/examples-html](./packages/examples-html) | HTML docs storybook (`@storybook/html-vite`) |
 | [packages/storybook-config](./packages/storybook-config) | Shared storybook config (theming, features, Vite helpers) |
 | [packages/website](./packages/website) | Documentation site (TanStack Start + MDX) |
 
@@ -60,10 +86,12 @@ npm run build        # Build the addon
 npm test             # Run tests
 npm run lint         # Lint
 npm run tsc          # Type check
-npm run dev          # Build + start storybook and site with portless
+npm run dev          # Build + start storybooks and site with portless
                      # → http://examples-react.localhost:1355 (React)
+                     # → http://examples-html.localhost:1355 (HTML)
                      # → http://site.localhost:1355 (Docs site)
 npm run docs         # Start just the React docs storybook
+npm run docs:html    # Start just the HTML docs storybook
 ```
 
 ## Contributing