@promakeai/inspector-hook 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+import type { InspectorCallbacks, InspectorLabels, InspectorTheme, UseInspectorReturn } from "@promakeai/inspector-types";
+export declare function useInspector(iframeRef: RefObject<HTMLIFrameElement>, callbacks?: InspectorCallbacks, labels?: InspectorLabels, theme?: InspectorTheme): UseInspectorReturn;
+export type { ComponentInfo, ElementPosition, SelectedElementData, UrlChangeData, PromptSubmittedData, TextUpdatedData, ImageUpdatedData, StyleChanges, StyleUpdatedData, ErrorData, HighlightOptions, ElementInfoData, InspectorLabels, InspectorTheme, ContentInputRequestData, InspectorCallbacks, UseInspectorReturn, } from "@promakeai/inspector-types";
+export { updateJSXSource } from "./utils/jsxUpdater.js";
+export type { UpdateJSXSourceOptions, UpdateJSXSourceResult, } from "./utils/jsxUpdater.js";
+export { inspectorHookPlugin } from "./vite-plugin.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,kBAAkB,EAUnB,MAAM,4BAA4B,CAAC;AA+EpC,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,EAC9B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,cAAc,GACrB,kBAAkB,CA6PpB;AAGD,YAAY,EACV,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,cAAc,EACd,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,205 @@
+import { useEffect, useState, useCallback } from "react";
+export function useInspector(iframeRef, callbacks, labels, theme) {
+    const [isInspecting, setIsInspecting] = useState(false);
+    /**
+     * Send message to iframe
+     */
+    const sendMessage = useCallback((message) => {
+        const iframe = iframeRef.current;
+        if (!iframe || !iframe.contentWindow) {
+            console.warn("Inspector: iframe not found or not loaded");
+            return;
+        }
+        try {
+            iframe.contentWindow.postMessage(message, "*");
+        }
+        catch (error) {
+            console.error("Inspector: Failed to send message:", error);
+        }
+    }, [iframeRef]);
+    /**
+     * Toggle inspector mode
+     */
+    const toggleInspector = useCallback((active) => {
+        const newState = active !== undefined ? active : !isInspecting;
+        setIsInspecting(newState);
+        sendMessage({
+            type: "TOGGLE_INSPECTOR",
+            active: newState,
+            labels: labels,
+            theme: theme,
+        });
+    }, [isInspecting, sendMessage, labels, theme]);
+    /**
+     * Start inspecting
+     */
+    const startInspecting = useCallback(() => {
+        toggleInspector(true);
+    }, [toggleInspector]);
+    /**
+     * Stop inspecting
+     */
+    const stopInspecting = useCallback(() => {
+        toggleInspector(false);
+    }, [toggleInspector]);
+    /**
+     * Show or hide content input
+     */
+    const showContentInput = useCallback((show, updateImmediately) => {
+        sendMessage({
+            type: "SHOW_CONTENT_INPUT",
+            show: show,
+            updateImmediately: updateImmediately,
+        });
+    }, [sendMessage]);
+    /**
+     * Show or hide image input
+     */
+    const showImageInput = useCallback((show, updateImmediately) => {
+        sendMessage({
+            type: "SHOW_IMAGE_INPUT",
+            show: show,
+            updateImmediately: updateImmediately,
+        });
+    }, [sendMessage]);
+    /**
+     * Show or hide style editor
+     */
+    const showStyleEditor = useCallback((show) => {
+        sendMessage({
+            type: "SHOW_STYLE_EDITOR",
+            show: show,
+        });
+    }, [sendMessage]);
+    /**
+     * Show or hide "Built with Promake" badge
+     */
+    const setBadgeVisible = useCallback((visible) => {
+        sendMessage({
+            type: "SET_BADGE_VISIBLE",
+            visible: visible,
+            badgeText: labels?.badgeText,
+        });
+    }, [sendMessage, labels]);
+    /**
+     * Highlight an element in the iframe
+     */
+    const highlightElement = useCallback((identifier, options) => {
+        sendMessage({
+            type: "HIGHLIGHT_ELEMENT",
+            identifier: identifier,
+            options: options,
+        });
+    }, [sendMessage]);
+    /**
+     * Request element info by inspector ID
+     */
+    const getElementByInspectorId = useCallback((inspectorId) => {
+        sendMessage({
+            type: "GET_ELEMENT_BY_ID",
+            inspectorId: inspectorId,
+        });
+    }, [sendMessage]);
+    /**
+     * Toggle child borders visibility
+     */
+    const setShowChildBorders = useCallback((show) => {
+        sendMessage({
+            type: "SET_SHOW_CHILD_BORDERS",
+            show: show,
+        });
+    }, [sendMessage]);
+    /**
+     * Listen for messages from iframe
+     */
+    useEffect(() => {
+        const handleMessage = (event) => {
+            // Parse message if it's a string (JSON stringified)
+            let messageData;
+            if (typeof event.data === "string") {
+                try {
+                    messageData = JSON.parse(event.data);
+                }
+                catch {
+                    return; // Invalid JSON, ignore
+                }
+            }
+            else {
+                messageData = event.data;
+            }
+            // Security: Only handle expected message types
+            if (!messageData || typeof messageData.type !== "string") {
+                return;
+            }
+            switch (messageData.type) {
+                case "INSPECTOR_ELEMENT_SELECTED":
+                    callbacks?.onElementSelected?.(messageData.data);
+                    break;
+                case "URL_CHANGED":
+                    callbacks?.onUrlChange?.(messageData.data);
+                    break;
+                case "INSPECTOR_PROMPT_SUBMITTED":
+                    callbacks?.onPromptSubmitted?.(messageData.data);
+                    break;
+                case "INSPECTOR_TEXT_UPDATED":
+                    callbacks?.onTextUpdated?.(messageData.data);
+                    break;
+                case "INSPECTOR_IMAGE_UPDATED":
+                    callbacks?.onImageUpdated?.(messageData.data);
+                    break;
+                case "INSPECTOR_STYLE_UPDATED":
+                    callbacks?.onStyleUpdated?.(messageData.data);
+                    break;
+                case "INSPECTOR_CLOSED":
+                    setIsInspecting(false);
+                    callbacks?.onInspectorClosed?.();
+                    break;
+                case "INSPECTOR_ERROR":
+                    callbacks?.onError?.(messageData.data);
+                    break;
+                case "ELEMENT_INFO_RESPONSE":
+                    callbacks?.onElementInfoReceived?.(messageData.data);
+                    break;
+                default:
+                    // Unknown message type - ignore
+                    break;
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, [callbacks]);
+    /**
+     * Cleanup: Turn off inspector on unmount
+     */
+    useEffect(() => {
+        return () => {
+            if (isInspecting) {
+                sendMessage({
+                    type: "TOGGLE_INSPECTOR",
+                    active: false,
+                    labels: labels,
+                    theme: theme,
+                });
+            }
+        };
+    }, [isInspecting, sendMessage]);
+    return {
+        isInspecting,
+        toggleInspector,
+        startInspecting,
+        stopInspecting,
+        showContentInput,
+        showImageInput,
+        showStyleEditor,
+        setBadgeVisible,
+        highlightElement,
+        getElementByInspectorId,
+        setShowChildBorders,
+    };
+}
+// Export utility functions
+export { updateJSXSource } from "./utils/jsxUpdater.js";
+// Export Vite plugin
+export { inspectorHookPlugin } from "./vite-plugin.js";

package/dist/server.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Server-only utilities for @promakeai/inspector-hook
+ * These functions require Node.js environment and should not be used in browser
+ */
+export { updateJSXSource } from "./utils/jsxUpdater";
+export type { UpdateJSXSourceOptions, UpdateJSXSourceResult } from "./utils/jsxUpdater";
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/server.js

@@ -0,0 +1,5 @@
+/**
+ * Server-only utilities for @promakeai/inspector-hook
+ * These functions require Node.js environment and should not be used in browser
+ */
+export { updateJSXSource } from "./utils/jsxUpdater";

package/dist/utils/jsxUpdater.d.ts

@@ -0,0 +1,38 @@
+/**
+ * JSX Source Code Updater
+ * AST-based utility for updating styles and classNames in JSX/TSX source code
+ */
+export interface UpdateJSXSourceOptions {
+    sourceCode: string;
+    lineNumber: number;
+    columnNumber: number;
+    tagName: string;
+    styles?: Record<string, string>;
+    className?: string;
+}
+export interface UpdateJSXSourceResult {
+    success: boolean;
+    code: string;
+    message?: string;
+}
+/**
+ * Update JSX source code with new styles and/or className
+ *
+ * @param options - Configuration options for the update
+ * @returns Result object with success status, updated code, and optional message
+ *
+ * @example
+ * ```typescript
+ * const result = updateJSXSource({
+ *   sourceCode: '<div className="foo">Hello</div>',
+ *   lineNumber: 1,
+ *   columnNumber: 0,
+ *   tagName: 'div',
+ *   styles: { backgroundColor: 'red !important' },
+ *   className: 'bar'
+ * });
+ * // result.code: '<div className="foo bar" style={{ backgroundColor: "red !important" }}>Hello</div>'
+ * ```
+ */
+export declare function updateJSXSource(options: UpdateJSXSourceOptions): UpdateJSXSourceResult;
+//# sourceMappingURL=jsxUpdater.d.ts.map

package/dist/utils/jsxUpdater.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsxUpdater.d.ts","sourceRoot":"","sources":["../../src/utils/jsxUpdater.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,qBAAqB,CA+DtF"}

package/dist/utils/jsxUpdater.js

@@ -0,0 +1,193 @@
+/**
+ * JSX Source Code Updater
+ * AST-based utility for updating styles and classNames in JSX/TSX source code
+ */
+import * as parser from '@babel/parser';
+import traverse from '@babel/traverse';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+/**
+ * Create AST ObjectExpression from styles object
+ */
+function createStyleObjectExpression(styles) {
+    return t.objectExpression(Object.entries(styles).map(([key, value]) => t.objectProperty(t.identifier(key), t.stringLiteral(value))));
+}
+/**
+ * Find JSX element at specific line and column position
+ */
+function findJSXElementAtPosition(ast, targetLine, targetColumn) {
+    let foundElement = null;
+    traverse(ast, {
+        JSXOpeningElement(path) {
+            const { loc } = path.node;
+            if (loc &&
+                loc.start.line === targetLine &&
+                loc.start.column === targetColumn) {
+                foundElement = path;
+                path.stop();
+            }
+        },
+    });
+    return foundElement;
+}
+/**
+ * Merge new styles with existing style prop
+ */
+function mergeStyleProp(jsxOpeningElement, newStyles) {
+    const attributes = jsxOpeningElement.node.attributes;
+    // Find existing style attribute
+    const styleAttrIndex = attributes.findIndex((attr) => t.isJSXAttribute(attr) &&
+        t.isJSXIdentifier(attr.name) &&
+        attr.name.name === 'style');
+    const newStyleObjectExpression = createStyleObjectExpression(newStyles);
+    if (styleAttrIndex !== -1) {
+        // Update existing style attribute
+        const styleAttr = attributes[styleAttrIndex];
+        if (t.isJSXExpressionContainer(styleAttr.value) &&
+            t.isObjectExpression(styleAttr.value.expression)) {
+            // Merge with existing styles
+            const existingProps = styleAttr.value.expression.properties;
+            const newProps = newStyleObjectExpression.properties;
+            // Create map of new style keys
+            const newStyleKeys = new Set(Object.keys(newStyles));
+            // Filter out existing properties that will be replaced
+            const filteredExisting = existingProps.filter((prop) => !t.isObjectProperty(prop) ||
+                !t.isIdentifier(prop.key) ||
+                !newStyleKeys.has(prop.key.name));
+            // Combine: keep non-updated existing properties + add new properties
+            styleAttr.value.expression.properties = [
+                ...filteredExisting,
+                ...newProps,
+            ];
+        }
+        else {
+            // Replace entirely if existing value is not a simple object
+            styleAttr.value = t.jsxExpressionContainer(newStyleObjectExpression);
+        }
+    }
+    else {
+        // Add new style attribute
+        const styleAttr = t.jsxAttribute(t.jsxIdentifier('style'), t.jsxExpressionContainer(newStyleObjectExpression));
+        attributes.push(styleAttr);
+    }
+}
+/**
+ * Merge new className with existing className prop
+ */
+function mergeClassNameProp(jsxOpeningElement, newClassName) {
+    const attributes = jsxOpeningElement.node.attributes;
+    // Find existing className attribute
+    const classNameAttrIndex = attributes.findIndex((attr) => t.isJSXAttribute(attr) &&
+        t.isJSXIdentifier(attr.name) &&
+        attr.name.name === 'className');
+    if (classNameAttrIndex !== -1) {
+        // Merge with existing className
+        const classNameAttr = attributes[classNameAttrIndex];
+        if (t.isStringLiteral(classNameAttr.value)) {
+            // Simple string className
+            const existingClasses = classNameAttr.value.value;
+            classNameAttr.value = t.stringLiteral(`${existingClasses} ${newClassName}`.trim());
+        }
+        else if (t.isJSXExpressionContainer(classNameAttr.value) &&
+            t.isStringLiteral(classNameAttr.value.expression)) {
+            // className={""} format
+            const existingClasses = classNameAttr.value.expression.value;
+            classNameAttr.value.expression = t.stringLiteral(`${existingClasses} ${newClassName}`.trim());
+        }
+        else if (t.isJSXExpressionContainer(classNameAttr.value) &&
+            t.isTemplateLiteral(classNameAttr.value.expression)) {
+            // Template literal className
+            const templateLiteral = classNameAttr.value.expression;
+            const lastQuasi = templateLiteral.quasis[templateLiteral.quasis.length - 1];
+            lastQuasi.value.raw += ` ${newClassName}`;
+            lastQuasi.value.cooked = lastQuasi.value.raw;
+        }
+        else {
+            // Complex expression - wrap in template literal
+            classNameAttr.value = t.jsxExpressionContainer(t.templateLiteral([
+                t.templateElement({ raw: '', cooked: '' }, false),
+                t.templateElement({ raw: ` ${newClassName}`, cooked: ` ${newClassName}` }, true),
+            ], [classNameAttr.value.expression]));
+        }
+    }
+    else {
+        // Add new className attribute
+        const classNameAttr = t.jsxAttribute(t.jsxIdentifier('className'), t.stringLiteral(newClassName));
+        attributes.push(classNameAttr);
+    }
+}
+/**
+ * Update JSX source code with new styles and/or className
+ *
+ * @param options - Configuration options for the update
+ * @returns Result object with success status, updated code, and optional message
+ *
+ * @example
+ * ```typescript
+ * const result = updateJSXSource({
+ *   sourceCode: '<div className="foo">Hello</div>',
+ *   lineNumber: 1,
+ *   columnNumber: 0,
+ *   tagName: 'div',
+ *   styles: { backgroundColor: 'red !important' },
+ *   className: 'bar'
+ * });
+ * // result.code: '<div className="foo bar" style={{ backgroundColor: "red !important" }}>Hello</div>'
+ * ```
+ */
+export function updateJSXSource(options) {
+    const { sourceCode, lineNumber, columnNumber, tagName, styles, className } = options;
+    try {
+        // Parse JSX/TSX source code
+        const ast = parser.parse(sourceCode, {
+            sourceType: 'module',
+            plugins: ['jsx', 'typescript', 'decorators-legacy'],
+        });
+        // Find the target JSX element at the specified position
+        const elementPath = findJSXElementAtPosition(ast, lineNumber, columnNumber);
+        if (!elementPath) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Could not find JSX element <${tagName}> at line ${lineNumber}, column ${columnNumber}`,
+            };
+        }
+        // Verify tag name matches (optional validation)
+        const foundTagName = t.isJSXIdentifier(elementPath.node.name)
+            ? elementPath.node.name.name
+            : '';
+        if (foundTagName.toLowerCase() !== tagName.toLowerCase()) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Tag name mismatch: expected <${tagName}>, found <${foundTagName}>`,
+            };
+        }
+        // Apply style updates if provided
+        if (styles && Object.keys(styles).length > 0) {
+            mergeStyleProp(elementPath, styles);
+        }
+        // Apply className updates if provided
+        if (className && className.trim()) {
+            mergeClassNameProp(elementPath, className.trim());
+        }
+        // Generate updated code
+        const output = generate(ast, {
+            retainLines: true,
+            compact: false,
+            concise: false,
+        });
+        return {
+            success: true,
+            code: output.code,
+            message: 'JSX source updated successfully',
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            code: sourceCode,
+            message: error instanceof Error ? error.message : 'Unknown error occurred during JSX update',
+        };
+    }
+}

package/dist/vite-plugin.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Vite plugin for @promakeai/inspector-hook
+ * Configures Babel packages for browser compatibility
+ */
+import type { Plugin } from "vite";
+export declare function inspectorHookPlugin(): Plugin;
+//# sourceMappingURL=vite-plugin.d.ts.map

package/dist/vite-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../src/vite-plugin.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,wBAAgB,mBAAmB,IAAI,MAAM,CAe5C"}

package/dist/vite-plugin.js

@@ -0,0 +1,14 @@
+export function inspectorHookPlugin() {
+    return {
+        name: "inspector-hook",
+        config() {
+            return {
+                define: {
+                    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"),
+                    "process.platform": JSON.stringify("browser"),
+                    "process.version": JSON.stringify("v18.0.0"),
+                },
+            };
+        },
+    };
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@promakeai/inspector-hook",
+  "version": "1.0.0",
+  "description": "React hook for controlling inspector in parent applications",
+  "author": "Promake",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc --build",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist",
+    "lint": "tsc --build --force --dry",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "prepublishOnly": "bun run build"
+  },
+  "keywords": [
+    "react",
+    "hook",
+    "inspector",
+    "iframe"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@promakeai/inspector-types": "workspace:*",
+    "@types/babel__traverse": "^7.20.0",
+    "@types/babel__generator": "^7.6.0",
+    "vitest": "^1.0.0"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.23.0",
+    "@babel/traverse": "^7.23.0",
+    "@babel/generator": "^7.23.0",
+    "@babel/types": "^7.23.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/promakeai/inspector.git",
+    "directory": "packages/hook"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.ts

@@ -0,0 +1,384 @@
+import { useEffect, useState, useCallback, RefObject } from "react";
+import type {
+  InspectorCallbacks,
+  InspectorLabels,
+  InspectorTheme,
+  UseInspectorReturn,
+  SelectedElementData,
+  UrlChangeData,
+  PromptSubmittedData,
+  TextUpdatedData,
+  ImageUpdatedData,
+  StyleUpdatedData,
+  ErrorData,
+  HighlightOptions,
+  ElementInfoData,
+} from "@promakeai/inspector-types";
+
+type IframeMessage =
+  | {
+      type: "TOGGLE_INSPECTOR";
+      active: boolean;
+      labels?: InspectorLabels;
+      theme?: InspectorTheme;
+    }
+  | {
+      type: "SHOW_CONTENT_INPUT";
+      show: boolean;
+      updateImmediately?: boolean;
+    }
+  | {
+      type: "SHOW_IMAGE_INPUT";
+      show: boolean;
+      updateImmediately?: boolean;
+    }
+  | {
+      type: "SHOW_STYLE_EDITOR";
+      show: boolean;
+    }
+  | {
+      type: "SET_BADGE_VISIBLE";
+      visible: boolean;
+      badgeText?: string;
+    }
+  | {
+      type: "HIGHLIGHT_ELEMENT";
+      identifier: string | SelectedElementData;
+      options?: HighlightOptions;
+    }
+  | {
+      type: "GET_ELEMENT_BY_ID";
+      inspectorId: string;
+    }
+  | {
+      type: "SET_SHOW_CHILD_BORDERS";
+      show: boolean;
+    };
+
+type InspectorMessage =
+  | {
+      type: "INSPECTOR_ELEMENT_SELECTED";
+      data: SelectedElementData;
+    }
+  | {
+      type: "URL_CHANGED";
+      data: UrlChangeData;
+    }
+  | {
+      type: "INSPECTOR_PROMPT_SUBMITTED";
+      data: PromptSubmittedData;
+    }
+  | {
+      type: "INSPECTOR_TEXT_UPDATED";
+      data: TextUpdatedData;
+    }
+  | {
+      type: "INSPECTOR_IMAGE_UPDATED";
+      data: ImageUpdatedData;
+    }
+  | {
+      type: "INSPECTOR_STYLE_UPDATED";
+      data: StyleUpdatedData;
+    }
+  | {
+      type: "INSPECTOR_CLOSED";
+    }
+  | {
+      type: "INSPECTOR_ERROR";
+      data: ErrorData;
+    }
+  | {
+      type: "ELEMENT_INFO_RESPONSE";
+      data: ElementInfoData;
+    };
+
+export function useInspector(
+  iframeRef: RefObject<HTMLIFrameElement>,
+  callbacks?: InspectorCallbacks,
+  labels?: InspectorLabels,
+  theme?: InspectorTheme
+): UseInspectorReturn {
+  const [isInspecting, setIsInspecting] = useState(false);
+
+  /**
+   * Send message to iframe
+   */
+  const sendMessage = useCallback(
+    (message: IframeMessage) => {
+      const iframe = iframeRef.current;
+      if (!iframe || !iframe.contentWindow) {
+        console.warn("Inspector: iframe not found or not loaded");
+        return;
+      }
+
+      try {
+        iframe.contentWindow.postMessage(message, "*");
+      } catch (error) {
+        console.error("Inspector: Failed to send message:", error);
+      }
+    },
+    [iframeRef]
+  );
+
+  /**
+   * Toggle inspector mode
+   */
+  const toggleInspector = useCallback(
+    (active?: boolean) => {
+      const newState = active !== undefined ? active : !isInspecting;
+      setIsInspecting(newState);
+
+      sendMessage({
+        type: "TOGGLE_INSPECTOR",
+        active: newState,
+        labels: labels,
+        theme: theme,
+      });
+    },
+    [isInspecting, sendMessage, labels, theme]
+  );
+
+  /**
+   * Start inspecting
+   */
+  const startInspecting = useCallback(() => {
+    toggleInspector(true);
+  }, [toggleInspector]);
+
+  /**
+   * Stop inspecting
+   */
+  const stopInspecting = useCallback(() => {
+    toggleInspector(false);
+  }, [toggleInspector]);
+
+  /**
+   * Show or hide content input
+   */
+  const showContentInput = useCallback(
+    (show: boolean, updateImmediately?: boolean) => {
+      sendMessage({
+        type: "SHOW_CONTENT_INPUT",
+        show: show,
+        updateImmediately: updateImmediately,
+      });
+    },
+    [sendMessage]
+  );
+
+  /**
+   * Show or hide image input
+   */
+  const showImageInput = useCallback(
+    (show: boolean, updateImmediately?: boolean) => {
+      sendMessage({
+        type: "SHOW_IMAGE_INPUT",
+        show: show,
+        updateImmediately: updateImmediately,
+      });
+    },
+    [sendMessage]
+  );
+
+  /**
+   * Show or hide style editor
+   */
+  const showStyleEditor = useCallback(
+    (show: boolean) => {
+      sendMessage({
+        type: "SHOW_STYLE_EDITOR",
+        show: show,
+      });
+    },
+    [sendMessage]
+  );
+
+  /**
+   * Show or hide "Built with Promake" badge
+   */
+  const setBadgeVisible = useCallback(
+    (visible: boolean) => {
+      sendMessage({
+        type: "SET_BADGE_VISIBLE",
+        visible: visible,
+        badgeText: labels?.badgeText,
+      });
+    },
+    [sendMessage, labels]
+  );
+
+  /**
+   * Highlight an element in the iframe
+   */
+  const highlightElement = useCallback(
+    (identifier: string | SelectedElementData, options?: HighlightOptions) => {
+      sendMessage({
+        type: "HIGHLIGHT_ELEMENT",
+        identifier: identifier,
+        options: options,
+      });
+    },
+    [sendMessage]
+  );
+
+  /**
+   * Request element info by inspector ID
+   */
+  const getElementByInspectorId = useCallback(
+    (inspectorId: string) => {
+      sendMessage({
+        type: "GET_ELEMENT_BY_ID",
+        inspectorId: inspectorId,
+      });
+    },
+    [sendMessage]
+  );
+
+  /**
+   * Toggle child borders visibility
+   */
+  const setShowChildBorders = useCallback(
+    (show: boolean) => {
+      sendMessage({
+        type: "SET_SHOW_CHILD_BORDERS",
+        show: show,
+      });
+    },
+    [sendMessage]
+  );
+
+  /**
+   * Listen for messages from iframe
+   */
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent<string | InspectorMessage>) => {
+      // Parse message if it's a string (JSON stringified)
+      let messageData: InspectorMessage;
+
+      if (typeof event.data === "string") {
+        try {
+          messageData = JSON.parse(event.data);
+        } catch {
+          return; // Invalid JSON, ignore
+        }
+      } else {
+        messageData = event.data;
+      }
+
+      // Security: Only handle expected message types
+      if (!messageData || typeof messageData.type !== "string") {
+        return;
+      }
+
+      switch (messageData.type) {
+        case "INSPECTOR_ELEMENT_SELECTED":
+          callbacks?.onElementSelected?.(messageData.data);
+          break;
+
+        case "URL_CHANGED":
+          callbacks?.onUrlChange?.(messageData.data);
+          break;
+
+        case "INSPECTOR_PROMPT_SUBMITTED":
+          callbacks?.onPromptSubmitted?.(messageData.data);
+          break;
+
+        case "INSPECTOR_TEXT_UPDATED":
+          callbacks?.onTextUpdated?.(messageData.data);
+          break;
+
+        case "INSPECTOR_IMAGE_UPDATED":
+          callbacks?.onImageUpdated?.(messageData.data);
+          break;
+
+        case "INSPECTOR_STYLE_UPDATED":
+          callbacks?.onStyleUpdated?.(messageData.data);
+          break;
+
+        case "INSPECTOR_CLOSED":
+          setIsInspecting(false);
+          callbacks?.onInspectorClosed?.();
+          break;
+
+        case "INSPECTOR_ERROR":
+          callbacks?.onError?.(messageData.data);
+          break;
+
+        case "ELEMENT_INFO_RESPONSE":
+          callbacks?.onElementInfoReceived?.(messageData.data);
+          break;
+
+        default:
+          // Unknown message type - ignore
+          break;
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [callbacks]);
+
+  /**
+   * Cleanup: Turn off inspector on unmount
+   */
+  useEffect(() => {
+    return () => {
+      if (isInspecting) {
+        sendMessage({
+          type: "TOGGLE_INSPECTOR",
+          active: false,
+          labels: labels,
+          theme: theme,
+        });
+      }
+    };
+  }, [isInspecting, sendMessage]);
+
+  return {
+    isInspecting,
+    toggleInspector,
+    startInspecting,
+    stopInspecting,
+    showContentInput,
+    showImageInput,
+    showStyleEditor,
+    setBadgeVisible,
+    highlightElement,
+    getElementByInspectorId,
+    setShowChildBorders,
+  };
+}
+
+// Re-export types for convenience
+export type {
+  ComponentInfo,
+  ElementPosition,
+  SelectedElementData,
+  UrlChangeData,
+  PromptSubmittedData,
+  TextUpdatedData,
+  ImageUpdatedData,
+  StyleChanges,
+  StyleUpdatedData,
+  ErrorData,
+  HighlightOptions,
+  ElementInfoData,
+  InspectorLabels,
+  InspectorTheme,
+  ContentInputRequestData,
+  InspectorCallbacks,
+  UseInspectorReturn,
+} from "@promakeai/inspector-types";
+
+// Export utility functions
+export { updateJSXSource } from "./utils/jsxUpdater.js";
+export type {
+  UpdateJSXSourceOptions,
+  UpdateJSXSourceResult,
+} from "./utils/jsxUpdater.js";
+
+// Export Vite plugin
+export { inspectorHookPlugin } from "./vite-plugin.js";

package/src/utils/jsxUpdater.ts

@@ -0,0 +1,274 @@
+/**
+ * JSX Source Code Updater
+ * AST-based utility for updating styles and classNames in JSX/TSX source code
+ */
+
+import * as parser from '@babel/parser';
+import traverse from '@babel/traverse';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+
+export interface UpdateJSXSourceOptions {
+  sourceCode: string;
+  lineNumber: number;
+  columnNumber: number;
+  tagName: string;
+  styles?: Record<string, string>;
+  className?: string;
+}
+
+export interface UpdateJSXSourceResult {
+  success: boolean;
+  code: string;
+  message?: string;
+}
+
+/**
+ * Create AST ObjectExpression from styles object
+ */
+function createStyleObjectExpression(styles: Record<string, string>): t.ObjectExpression {
+  return t.objectExpression(
+    Object.entries(styles).map(([key, value]) =>
+      t.objectProperty(
+        t.identifier(key),
+        t.stringLiteral(value)
+      )
+    )
+  );
+}
+
+/**
+ * Find JSX element at specific line and column position
+ */
+function findJSXElementAtPosition(
+  ast: t.File,
+  targetLine: number,
+  targetColumn: number
+): any {
+  let foundElement: any = null;
+
+  traverse(ast, {
+    JSXOpeningElement(path: any) {
+      const { loc } = path.node;
+      if (
+        loc &&
+        loc.start.line === targetLine &&
+        loc.start.column === targetColumn
+      ) {
+        foundElement = path;
+        path.stop();
+      }
+    },
+  });
+
+  return foundElement;
+}
+
+/**
+ * Merge new styles with existing style prop
+ */
+function mergeStyleProp(
+  jsxOpeningElement: any,
+  newStyles: Record<string, string>
+): void {
+  const attributes = jsxOpeningElement.node.attributes;
+
+  // Find existing style attribute
+  const styleAttrIndex = attributes.findIndex(
+    (attr: any) =>
+      t.isJSXAttribute(attr) &&
+      t.isJSXIdentifier(attr.name) &&
+      attr.name.name === 'style'
+  );
+
+  const newStyleObjectExpression = createStyleObjectExpression(newStyles);
+
+  if (styleAttrIndex !== -1) {
+    // Update existing style attribute
+    const styleAttr = attributes[styleAttrIndex];
+
+    if (
+      t.isJSXExpressionContainer(styleAttr.value) &&
+      t.isObjectExpression(styleAttr.value.expression)
+    ) {
+      // Merge with existing styles
+      const existingProps = styleAttr.value.expression.properties;
+      const newProps = newStyleObjectExpression.properties;
+
+      // Create map of new style keys
+      const newStyleKeys = new Set(Object.keys(newStyles));
+
+      // Filter out existing properties that will be replaced
+      const filteredExisting = existingProps.filter(
+        (prop: any) =>
+          !t.isObjectProperty(prop) ||
+          !t.isIdentifier(prop.key) ||
+          !newStyleKeys.has(prop.key.name)
+      );
+
+      // Combine: keep non-updated existing properties + add new properties
+      styleAttr.value.expression.properties = [
+        ...filteredExisting,
+        ...newProps,
+      ];
+    } else {
+      // Replace entirely if existing value is not a simple object
+      styleAttr.value = t.jsxExpressionContainer(newStyleObjectExpression);
+    }
+  } else {
+    // Add new style attribute
+    const styleAttr = t.jsxAttribute(
+      t.jsxIdentifier('style'),
+      t.jsxExpressionContainer(newStyleObjectExpression)
+    );
+    attributes.push(styleAttr);
+  }
+}
+
+/**
+ * Merge new className with existing className prop
+ */
+function mergeClassNameProp(
+  jsxOpeningElement: any,
+  newClassName: string
+): void {
+  const attributes = jsxOpeningElement.node.attributes;
+
+  // Find existing className attribute
+  const classNameAttrIndex = attributes.findIndex(
+    (attr: any) =>
+      t.isJSXAttribute(attr) &&
+      t.isJSXIdentifier(attr.name) &&
+      attr.name.name === 'className'
+  );
+
+  if (classNameAttrIndex !== -1) {
+    // Merge with existing className
+    const classNameAttr = attributes[classNameAttrIndex];
+
+    if (t.isStringLiteral(classNameAttr.value)) {
+      // Simple string className
+      const existingClasses = classNameAttr.value.value;
+      classNameAttr.value = t.stringLiteral(`${existingClasses} ${newClassName}`.trim());
+    } else if (
+      t.isJSXExpressionContainer(classNameAttr.value) &&
+      t.isStringLiteral(classNameAttr.value.expression)
+    ) {
+      // className={""} format
+      const existingClasses = classNameAttr.value.expression.value;
+      classNameAttr.value.expression = t.stringLiteral(`${existingClasses} ${newClassName}`.trim());
+    } else if (
+      t.isJSXExpressionContainer(classNameAttr.value) &&
+      t.isTemplateLiteral(classNameAttr.value.expression)
+    ) {
+      // Template literal className
+      const templateLiteral = classNameAttr.value.expression;
+      const lastQuasi = templateLiteral.quasis[templateLiteral.quasis.length - 1];
+      lastQuasi.value.raw += ` ${newClassName}`;
+      lastQuasi.value.cooked = lastQuasi.value.raw;
+    } else {
+      // Complex expression - wrap in template literal
+      classNameAttr.value = t.jsxExpressionContainer(
+        t.templateLiteral(
+          [
+            t.templateElement({ raw: '', cooked: '' }, false),
+            t.templateElement({ raw: ` ${newClassName}`, cooked: ` ${newClassName}` }, true),
+          ],
+          [classNameAttr.value.expression]
+        )
+      );
+    }
+  } else {
+    // Add new className attribute
+    const classNameAttr = t.jsxAttribute(
+      t.jsxIdentifier('className'),
+      t.stringLiteral(newClassName)
+    );
+    attributes.push(classNameAttr);
+  }
+}
+
+/**
+ * Update JSX source code with new styles and/or className
+ * 
+ * @param options - Configuration options for the update
+ * @returns Result object with success status, updated code, and optional message
+ * 
+ * @example
+ * ```typescript
+ * const result = updateJSXSource({
+ *   sourceCode: '<div className="foo">Hello</div>',
+ *   lineNumber: 1,
+ *   columnNumber: 0,
+ *   tagName: 'div',
+ *   styles: { backgroundColor: 'red !important' },
+ *   className: 'bar'
+ * });
+ * // result.code: '<div className="foo bar" style={{ backgroundColor: "red !important" }}>Hello</div>'
+ * ```
+ */
+export function updateJSXSource(options: UpdateJSXSourceOptions): UpdateJSXSourceResult {
+  const { sourceCode, lineNumber, columnNumber, tagName, styles, className } = options;
+
+  try {
+    // Parse JSX/TSX source code
+    const ast = parser.parse(sourceCode, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript', 'decorators-legacy'],
+    });
+
+    // Find the target JSX element at the specified position
+    const elementPath = findJSXElementAtPosition(ast, lineNumber, columnNumber);
+
+    if (!elementPath) {
+      return {
+        success: false,
+        code: sourceCode,
+        message: `Could not find JSX element <${tagName}> at line ${lineNumber}, column ${columnNumber}`,
+      };
+    }
+
+    // Verify tag name matches (optional validation)
+    const foundTagName = t.isJSXIdentifier(elementPath.node.name)
+      ? elementPath.node.name.name
+      : '';
+
+    if (foundTagName.toLowerCase() !== tagName.toLowerCase()) {
+      return {
+        success: false,
+        code: sourceCode,
+        message: `Tag name mismatch: expected <${tagName}>, found <${foundTagName}>`,
+      };
+    }
+
+    // Apply style updates if provided
+    if (styles && Object.keys(styles).length > 0) {
+      mergeStyleProp(elementPath, styles);
+    }
+
+    // Apply className updates if provided
+    if (className && className.trim()) {
+      mergeClassNameProp(elementPath, className.trim());
+    }
+
+    // Generate updated code
+    const output = generate(ast, {
+      retainLines: true,
+      compact: false,
+      concise: false,
+    });
+
+    return {
+      success: true,
+      code: output.code,
+      message: 'JSX source updated successfully',
+    };
+  } catch (error) {
+    return {
+      success: false,
+      code: sourceCode,
+      message: error instanceof Error ? error.message : 'Unknown error occurred during JSX update',
+    };
+  }
+}
+

package/src/vite-plugin.ts

@@ -0,0 +1,22 @@
+/**
+ * Vite plugin for @promakeai/inspector-hook
+ * Configures Babel packages for browser compatibility
+ */
+import type { Plugin } from "vite";
+
+export function inspectorHookPlugin(): Plugin {
+  return {
+    name: "inspector-hook",
+    config() {
+      return {
+        define: {
+          "process.env.NODE_ENV": JSON.stringify(
+            process.env.NODE_ENV || "development"
+          ),
+          "process.platform": JSON.stringify("browser"),
+          "process.version": JSON.stringify("v18.0.0"),
+        },
+      };
+    },
+  };
+}