Design tooling plugin

README.md

@@ -103,6 +103,7 @@ To ensure compatibility with Supernova agentic system:
 - For **Port and Build Output**, dev server must run on **port 3000** (set in `vite.config.ts` - do not change). Builds must output to `dist/` using `npm run build`.
 - **Static Assets** should go to `public/`. Vite handles serving and inclusion automatically. If you want to use them in prototypes, serve them from this location, and reference relative to the root of the domain.
 - **Vite Configuration** can be extended by changing `vite.config.ts`, but do not remove required plugins or change the base project path.
+- **Prototyping Tooling**: The `@supernovaio/prototyping-tooling` plugin is required and must remain in the Vite configuration. It must be placed before the React plugin in the plugins array to ensure proper metadata injection into JSX elements. This plugin enables design-time features like element selection, annotation, and live editing through iframe communication.
 
 ### Project Structure
 

package.json

@@ -15,6 +15,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@supernovaio/prototyping-tooling": "latest",
     "@eslint/js": "^9.30.1",
     "@types/node": "^22.10.5",
     "@types/react": "^18.3.17",
@@ -28,4 +29,4 @@
     "typescript-eslint": "^8.35.1",
     "vite": "^7.1.4"
   }
-}
+}

src/main.tsx

@@ -1,6 +1,7 @@
 // This is the main entry point for the application.
 // Add your top-level configuration here: providers, wrappers, analytics, etc.
 // The App component (app.tsx) is where AI-generated code will be placed.
+import "@supernovaio/prototyping-tooling/client";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";

vite.config.ts

@@ -1,11 +1,12 @@
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
 import { defineConfig } from "vite";
+import { supernovaDesignPlugin } from "@supernovaio/prototyping-tooling/build";
 
 // https://vite.dev/config/
 export default defineConfig({
   base: "./",
-  plugins: [errorMonitorPlugin(), react()],
+  plugins: [supernovaDesignPlugin(), errorMonitorPlugin(), react()],
   server: {
     port: 3000,
     allowedHosts: true,