refactor: preact v1

packages/scan/.gitignore

@@ -0,0 +1 @@
+src/core/web/assets/css/styles.css

packages/scan/package.json

@@ -200,9 +200,12 @@
     "auto.d.ts"
   ],
   "scripts": {
-    "build": "NODE_ENV=production tsup",
+    "build": "npm run build:css && NODE_ENV=production tsup",
     "build:copy": "NODE_ENV=production tsup && cat dist/auto.global.js | pbcopy",
-    "dev": "NODE_ENV=development tsup --watch",
+    "dev:css": "npx tailwindcss -i ./src/core/web/assets/css/styles.tailwind.css -o ./src/core/web/assets/css/styles.css --watch",
+    "dev:tsup": "NODE_ENV=development tsup --watch",
+    "dev": "npm-run-all --parallel dev:css dev:tsup",
+    "build:css": "npx tailwindcss -i ./src/core/web/assets/css/styles.tailwind.css -o ./src/core/web/assets/css/styles.css --minify",
     "lint": "eslint 'src/**/*.{ts,tsx}' --fix",
     "pack": "npm version patch && pnpm build && npm pack",
     "pack:bump": "bun scripts/bump-version.js && nr pack && echo $(pwd)/react-scan-$(node -p \"require('./package.json').version\").tgz | pbcopy",
@@ -238,15 +241,21 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vercel/style-guide": "^6.0.0",
+    "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
     "eslint": "^8.0.0",
     "next": "*",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8",
     "prettier": "^3.3.3",
     "publint": "^0.2.12",
     "react": "*",
     "react-dom": "*",
     "react-reconciler": "^0.29.2",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0 || ^6.0.0 || ^7.0.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^3.4.1",
     "terser": "^5.36.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",

packages/scan/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/scan/src/core/index.ts

@@ -1,3 +1,4 @@
+
 import type { Fiber } from 'react-reconciler';
 import * as React from 'react';
 import { type Signal, signal } from '@preact/signals';
@@ -8,6 +9,7 @@ import {
   isCompositeFiber,
   traverseFiber,
 } from 'bippy';
+import styles from './web/assets/css/styles.css';
 import { createInstrumentation, type Render } from './instrumentation';
 import {
   type ActiveOutline,
@@ -28,6 +30,7 @@ import type { InternalInteraction } from './monitor/types';
 import { type getSession } from './monitor/utils';
 import { addFiberToSet } from './utils';
 import { playGeigerClickSound } from './web/geiger';
+import { ICONS } from './web/assets/svgs/svgs';
 
 export interface Options {
   /**
@@ -314,29 +317,67 @@ let flushInterval: any | undefined;
 
 export const start = () => {
   if (typeof window === 'undefined') return;
+
+  const existingRoot = document.querySelector('react-scan-root');
+  if (existingRoot) {
+    return;
+  }
+
+  // Create container for shadow DOM
+  const container = document.createElement('div');
+  container.id = 'react-scan-root';
+
+  const shadow = container.attachShadow({ mode: 'open' });
+
+  const fragment = document.createDocumentFragment();
+
+  // add styles
+  const cssStyles = document.createElement('style');
+  cssStyles.textContent = styles;
+
+  // Create SVG sprite sheet node directly
+  const iconSprite = new DOMParser().parseFromString(ICONS, 'image/svg+xml').documentElement;
+  shadow.appendChild(iconSprite);
+
+
+  // add toolbar root
+  const root = document.createElement('div');
+  root.id = 'react-scan-toolbar-root';
+  root.className = 'absolute z-2147483647';
+
+  fragment.appendChild(cssStyles);
+  fragment.appendChild(root);
+
+  shadow.appendChild(fragment);
+
+  // Add container to document first (so shadow DOM is available)
+  document.documentElement.appendChild(container);
+
   const options = ReactScanInternals.options.value;
 
-  let ctx: CanvasRenderingContext2D;
-  let audioContext: any;
+  const ctx = initReactScanOverlay();
+  if (!ctx) return;
+
+  createInspectElementStateMachine(shadow);
+
+  const audioContext =
+    typeof window !== 'undefined'
+      ? new (window.AudioContext ||
+          // @ts-expect-error -- This is a fallback for Safari
+          window.webkitAudioContext)()
+      : null;
+
+  createPerfObserver();
 
   if (!Store.monitor.value) {
     const existingOverlay = document.querySelector('react-scan-overlay');
     if (existingOverlay) {
       return;
     }
-    initReactScanOverlay();
     const overlayElement = document.createElement('react-scan-overlay') as any;
 
     document.documentElement.appendChild(overlayElement);
 
-    ctx = overlayElement.getContext();
-    createInspectElementStateMachine();
-    audioContext =
-      typeof window !== 'undefined'
-        ? new (window.AudioContext ||
-            // @ts-expect-error -- This is a fallback for Safari
-            window.webkitAudioContext)()
-        : null;
     createPerfObserver();
 
     logIntro();
@@ -436,8 +477,9 @@ export const start = () => {
 
   ReactScanInternals.instrumentation = instrumentation;
 
-  if (options.showToolbar && !Store.monitor.value) {
-    createToolbar();
+
+  if (options.showToolbar) {
+    createToolbar(shadow);
   }
 };
 

packages/scan/src/core/utils.ts

@@ -1,6 +1,15 @@
 import { type Fiber } from 'react-reconciler';
+import {
+  type ClassValue,
+  clsx,
+} from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import type { Render } from './instrumentation';
 
+export const cn = (...inputs: Array<ClassValue>): string => {
+  return twMerge(clsx(inputs));
+};
+
 export const getLabelText = (renders: Array<Render>) => {
   let labelText = '';