@promakeai/inspector-hook 1.1.1 → 1.2.1

package/dist/index.d.ts

@@ -1,8 +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 type { ComponentInfo, ElementPosition, SelectedElementData, UrlChangeData, PromptSubmittedData, TextUpdatedData, ImageUpdatedData, StyleChanges, StyleUpdatedData, ErrorData, HighlightOptions, ElementInfoData, ElementDeletedData, ElementDuplicatedData, ChangeType, ChangeHistoryEntry, InspectorChange, InspectorChangeType, InspectorChangesSavedData, InspectorLabels, InspectorTheme, ContentInputRequestData, InspectorCallbacks, UseInspectorReturn, } from "@promakeai/inspector-types";
+export { updateJSXSource, deleteJSXElement, duplicateJSXElement, updateTextContent, applyChangesToJSXSource, } from "./utils/jsxUpdater.js";
+export type { UpdateJSXSourceOptions, UpdateJSXSourceResult, DeleteJSXElementOptions, DuplicateJSXElementOptions, UpdateTextContentOptions, ApplyChangesOptions, ApplyChangesResult, ChangeApplicationResult, } from "./utils/jsxUpdater.js";
 export { inspectorHookPlugin } from "./vite-plugin.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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,EAcnB,MAAM,4BAA4B,CAAC;AAsGpC,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,CAuSpB;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,kBAAkB,EAClB,qBAAqB,EACrB,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,yBAAyB,EACzB,eAAe,EACf,cAAc,EACd,uBAAuB,EACvB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,0BAA0B,EAC1B,wBAAwB,EACxB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -42,6 +42,16 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
     const stopInspecting = useCallback(() => {
         toggleInspector(false);
     }, [toggleInspector]);
+    /**
+     * Force close inspector - hard reset for emergencies
+     * Use when inspector becomes unresponsive
+     */
+    const forceCloseInspector = useCallback(() => {
+        setIsInspecting(false);
+        sendMessage({
+            type: "FORCE_CLOSE_INSPECTOR",
+        });
+    }, [sendMessage]);
     /**
      * Show or hide content input
      */
@@ -71,6 +81,15 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
             show: show,
         });
     }, [sendMessage]);
+    /**
+     * Show or hide actions tab (delete, duplicate, etc.)
+     */
+    const showActionsTab = useCallback((show) => {
+        sendMessage({
+            type: "SHOW_ACTIONS_TAB",
+            show: show,
+        });
+    }, [sendMessage]);
     /**
      * Show or hide "Built with Promake" badge
      */
@@ -160,6 +179,18 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
                 case "ELEMENT_INFO_RESPONSE":
                     callbacks?.onElementInfoReceived?.(messageData.data);
                     break;
+                case "INSPECTOR_ELEMENT_DELETED":
+                    callbacks?.onElementDeleted?.(messageData.data);
+                    break;
+                case "INSPECTOR_ELEMENT_DUPLICATED":
+                    callbacks?.onElementDuplicated?.(messageData.data);
+                    break;
+                case "INSPECTOR_CHANGES_SAVED":
+                    callbacks?.onChangesSaved?.(messageData.data);
+                    break;
+                case "INSPECTOR_GO_TO_CODE":
+                    callbacks?.onGoToCode?.(messageData.data);
+                    break;
                 default:
                     // Unknown message type - ignore
                     break;
@@ -190,9 +221,11 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
         toggleInspector,
         startInspecting,
         stopInspecting,
+        forceCloseInspector,
         showContentInput,
         showImageInput,
         showStyleEditor,
+        showActionsTab,
         setBadgeVisible,
         highlightElement,
         getElementByInspectorId,
@@ -200,6 +233,6 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
     };
 }
 // Export utility functions
-export { updateJSXSource } from "./utils/jsxUpdater.js";
+export { updateJSXSource, deleteJSXElement, duplicateJSXElement, updateTextContent, applyChangesToJSXSource, } from "./utils/jsxUpdater.js";
 // Export Vite plugin
 export { inspectorHookPlugin } from "./vite-plugin.js";

package/dist/utils/jsxUpdater.d.ts

@@ -3,6 +3,7 @@
  * Lightweight regex-based utility for updating styles and classNames in JSX/TSX source code
  * No Babel dependencies - works perfectly in browser environments!
  */
+import type { InspectorChange, InspectorChangeType } from "@promakeai/inspector-types";
 export interface UpdateJSXSourceOptions {
     sourceCode: string;
     lineNumber: number;
@@ -16,6 +17,18 @@ export interface UpdateJSXSourceResult {
     code: string;
     message?: string;
 }
+export interface DeleteJSXElementOptions {
+    sourceCode: string;
+    lineNumber: number;
+    columnNumber: number;
+    tagName: string;
+}
+export interface DuplicateJSXElementOptions {
+    sourceCode: string;
+    lineNumber: number;
+    columnNumber: number;
+    tagName: string;
+}
 /**
  * Update JSX source code with new styles and/or className
  *
@@ -36,4 +49,92 @@ export interface UpdateJSXSourceResult {
  * ```
  */
 export declare function updateJSXSource(options: UpdateJSXSourceOptions): UpdateJSXSourceResult;
+/**
+ * Delete a JSX element from source code
+ *
+ * @param options - Configuration options for deletion
+ * @returns Result object with success status, updated code, and optional message
+ */
+export declare function deleteJSXElement(options: DeleteJSXElementOptions): UpdateJSXSourceResult;
+/**
+ * Duplicate a JSX element in source code (inserts copy after the original)
+ *
+ * @param options - Configuration options for duplication
+ * @returns Result object with success status, updated code, and optional message
+ */
+export declare function duplicateJSXElement(options: DuplicateJSXElementOptions): UpdateJSXSourceResult;
+/**
+ * Options for updating text content
+ */
+export interface UpdateTextContentOptions {
+    sourceCode: string;
+    lineNumber: number;
+    columnNumber: number;
+    tagName: string;
+    newText: string;
+}
+/**
+ * Update the text content of a JSX element
+ * Only works if the element contains pure text (no JS expressions or nested elements)
+ *
+ * @param options - Configuration options for the text update
+ * @returns Result object with success status, updated code, and optional message
+ */
+export declare function updateTextContent(options: UpdateTextContentOptions): UpdateJSXSourceResult;
+/**
+ * Options for applying changes to JSX source
+ */
+export interface ApplyChangesOptions {
+    sourceCode: string;
+    changes: InspectorChange[];
+}
+/**
+ * Result of a single change application
+ */
+export interface ChangeApplicationResult {
+    changeId: string;
+    type: InspectorChangeType;
+    success: boolean;
+    message?: string;
+}
+/**
+ * Result of applying all changes
+ */
+export interface ApplyChangesResult {
+    success: boolean;
+    code: string;
+    results: ChangeApplicationResult[];
+    summary: {
+        total: number;
+        successful: number;
+        failed: number;
+        skipped: number;
+    };
+}
+/**
+ * Apply a collection of InspectorChange objects to JSX source code
+ *
+ * This function processes changes in a logical order:
+ * 1. Groups changes by element
+ * 2. For each element:
+ *    - If delete: deletes the element, skips other changes for that element
+ *    - If duplicate: applies styles/text first, then duplicates
+ *    - Merges all style changes into single update
+ *    - Applies text changes (only if pure text)
+ *
+ * @param options - Source code and changes to apply
+ * @returns Result with updated code and detailed results for each change
+ *
+ * @example
+ * ```typescript
+ * const result = applyChangesToJSXSource({
+ *   sourceCode: '<div>Hello</div>',
+ *   changes: [
+ *     { type: 'singleStyle', singleStyle: { property: 'color', currentValue: 'red' }, ... },
+ *     { type: 'text', text: { current: 'World' }, ... }
+ *   ]
+ * });
+ * ```
+ */
+export declare function applyChangesToJSXSource(options: ApplyChangesOptions): ApplyChangesResult;
 //# sourceMappingURL=jsxUpdater.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"jsxUpdater.d.ts","sourceRoot":"","sources":["../../src/utils/jsxUpdater.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,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;AA4YD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CAkFvB"}
+{"version":3,"file":"jsxUpdater.d.ts","sourceRoot":"","sources":["../../src/utils/jsxUpdater.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EAEpB,MAAM,4BAA4B,CAAC;AAEpC,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;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,0BAA0B;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;CACjB;AA4YD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CAmFvB;AAoGD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,uBAAuB,GAC/B,qBAAqB,CAqDvB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,0BAA0B,GAClC,qBAAqB,CAmDvB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAmBD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,wBAAwB,GAChC,qBAAqB,CA+FvB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,mBAAmB,GAC3B,kBAAkB,CA2MpB"}

package/dist/utils/jsxUpdater.js

@@ -347,14 +347,9 @@ export function updateJSXSource(options) {
                 message: `Could not find JSX element <${tagName}> at line ${lineNumber}, column ${columnNumber}`,
             };
         }
-        // Verify tag name matches
-        if (tagInfo.foundTagName.toLowerCase() !== tagName.toLowerCase()) {
-            return {
-                success: false,
-                code: sourceCode,
-                message: `Tag name mismatch: expected <${tagName}>, found <${tagInfo.foundTagName}>`,
-            };
-        }
+        // Check for tag name mismatch (warning only - continue anyway)
+        // This handles cases like Link component rendering as <a> in DOM
+        const tagNameMismatch = tagInfo.foundTagName.toLowerCase() !== tagName.toLowerCase();
         // Validate that the element has proper closing tag
         if (!hasProperClosingTag(sourceCode, tagInfo.start, tagInfo.end, tagInfo.foundTagName)) {
             return {
@@ -376,10 +371,14 @@ export function updateJSXSource(options) {
         const updatedCode = sourceCode.slice(0, tagInfo.start) +
             updatedTagContent +
             sourceCode.slice(tagInfo.end);
+        // Include warning in message if tag names didn't match
+        const message = tagNameMismatch
+            ? `JSX source updated successfully (note: expected <${tagName}>, found <${tagInfo.foundTagName}>)`
+            : "JSX source updated successfully";
         return {
             success: true,
             code: updatedCode,
-            message: "JSX source updated successfully",
+            message,
         };
     }
     catch (error) {
@@ -392,3 +391,506 @@ export function updateJSXSource(options) {
         };
     }
 }
+/**
+ * Find the full JSX element boundaries (from opening tag to closing tag)
+ */
+function findFullJSXElementBoundaries(sourceCode, lineNumber, columnNumber, tagName) {
+    // First find the opening tag
+    const tagInfo = findJSXTagAtPosition(sourceCode, lineNumber, columnNumber, tagName);
+    if (!tagInfo) {
+        return null;
+    }
+    // Check if self-closing
+    if (tagInfo.content.trim().endsWith("/>")) {
+        return {
+            start: tagInfo.start,
+            end: tagInfo.end,
+            content: tagInfo.content,
+            isSelfClosing: true,
+        };
+    }
+    // Find the matching closing tag
+    const afterOpening = sourceCode.slice(tagInfo.end);
+    let depth = 1;
+    let i = 0;
+    let inString = false;
+    let stringChar = "";
+    while (i < afterOpening.length && depth > 0) {
+        const char = afterOpening[i];
+        const prevChar = i > 0 ? afterOpening[i - 1] : "";
+        // Handle strings
+        if ((char === '"' || char === "'" || char === "`") && prevChar !== "\\") {
+            if (!inString) {
+                inString = true;
+                stringChar = char;
+            }
+            else if (char === stringChar) {
+                inString = false;
+                stringChar = "";
+            }
+        }
+        if (!inString && char === "<") {
+            // Check for opening or closing tag
+            const remainingCode = afterOpening.slice(i);
+            const tagMatch = remainingCode.match(/^<\/?([A-Za-z_$][A-Za-z0-9_$]*)/);
+            if (tagMatch) {
+                const isClosing = remainingCode.startsWith("</");
+                const foundTag = tagMatch[1];
+                if (isClosing && foundTag === tagInfo.foundTagName) {
+                    depth--;
+                    if (depth === 0) {
+                        // Find end of closing tag
+                        const closingEnd = remainingCode.indexOf(">");
+                        if (closingEnd !== -1) {
+                            const fullEnd = tagInfo.end + i + closingEnd + 1;
+                            return {
+                                start: tagInfo.start,
+                                end: fullEnd,
+                                content: sourceCode.slice(tagInfo.start, fullEnd),
+                                isSelfClosing: false,
+                            };
+                        }
+                    }
+                }
+                else if (!isClosing && foundTag === tagInfo.foundTagName) {
+                    // Check if self-closing
+                    const tagEndMatch = remainingCode.match(/^<[^>]+?(\/?)>/);
+                    if (tagEndMatch && !tagEndMatch[1]) {
+                        depth++;
+                    }
+                }
+            }
+        }
+        i++;
+    }
+    return null;
+}
+/**
+ * Delete a JSX element from source code
+ *
+ * @param options - Configuration options for deletion
+ * @returns Result object with success status, updated code, and optional message
+ */
+export function deleteJSXElement(options) {
+    const { sourceCode, lineNumber, columnNumber, tagName } = options;
+    try {
+        const elementBounds = findFullJSXElementBoundaries(sourceCode, lineNumber, columnNumber, tagName);
+        if (!elementBounds) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Could not find JSX element <${tagName}> at line ${lineNumber}, column ${columnNumber}`,
+            };
+        }
+        // Get content before and after the element
+        let before = sourceCode.slice(0, elementBounds.start);
+        let after = sourceCode.slice(elementBounds.end);
+        // Clean up whitespace - remove trailing whitespace from before and leading newline from after
+        // This prevents leaving empty lines
+        const trailingWhitespaceMatch = before.match(/(\s*)$/);
+        const leadingWhitespaceMatch = after.match(/^(\s*\n)?/);
+        if (trailingWhitespaceMatch && leadingWhitespaceMatch) {
+            // If there's a newline after, remove the trailing whitespace before
+            if (leadingWhitespaceMatch[0].includes("\n")) {
+                before = before.replace(/[ \t]*$/, "");
+                after = after.replace(/^[ \t]*\n/, "\n");
+            }
+        }
+        const updatedCode = before + after;
+        return {
+            success: true,
+            code: updatedCode,
+            message: `JSX element <${tagName}> deleted successfully`,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            code: sourceCode,
+            message: error instanceof Error
+                ? error.message
+                : "Unknown error occurred during JSX deletion",
+        };
+    }
+}
+/**
+ * Duplicate a JSX element in source code (inserts copy after the original)
+ *
+ * @param options - Configuration options for duplication
+ * @returns Result object with success status, updated code, and optional message
+ */
+export function duplicateJSXElement(options) {
+    const { sourceCode, lineNumber, columnNumber, tagName } = options;
+    try {
+        const elementBounds = findFullJSXElementBoundaries(sourceCode, lineNumber, columnNumber, tagName);
+        if (!elementBounds) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Could not find JSX element <${tagName}> at line ${lineNumber}, column ${columnNumber}`,
+            };
+        }
+        // Get the indentation of the original element
+        const beforeElement = sourceCode.slice(0, elementBounds.start);
+        const lastNewline = beforeElement.lastIndexOf("\n");
+        const indentation = lastNewline !== -1
+            ? beforeElement.slice(lastNewline + 1).match(/^(\s*)/)?.[1] || ""
+            : "";
+        // Create the duplicated element with proper indentation
+        const duplicatedElement = "\n" + indentation + elementBounds.content;
+        // Insert the duplicate after the original
+        const updatedCode = sourceCode.slice(0, elementBounds.end) +
+            duplicatedElement +
+            sourceCode.slice(elementBounds.end);
+        return {
+            success: true,
+            code: updatedCode,
+            message: `JSX element <${tagName}> duplicated successfully`,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            code: sourceCode,
+            message: error instanceof Error
+                ? error.message
+                : "Unknown error occurred during JSX duplication",
+        };
+    }
+}
+/**
+ * Check if element content is pure text (no JS expressions or nested elements)
+ */
+function isPureTextContent(content) {
+    // Check for JSX expressions {something}
+    if (content.includes("{") && content.includes("}")) {
+        return false;
+    }
+    // Check for nested elements <something>
+    if (/<[A-Za-z_$][A-Za-z0-9_$]*/.test(content)) {
+        return false;
+    }
+    return true;
+}
+/**
+ * Update the text content of a JSX element
+ * Only works if the element contains pure text (no JS expressions or nested elements)
+ *
+ * @param options - Configuration options for the text update
+ * @returns Result object with success status, updated code, and optional message
+ */
+export function updateTextContent(options) {
+    const { sourceCode, lineNumber, columnNumber, tagName, newText } = options;
+    try {
+        // Find the full element boundaries
+        const elementBounds = findFullJSXElementBoundaries(sourceCode, lineNumber, columnNumber, tagName);
+        if (!elementBounds) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Could not find JSX element <${tagName}> at line ${lineNumber}, column ${columnNumber}`,
+            };
+        }
+        // Self-closing elements can't have text content
+        if (elementBounds.isSelfClosing) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Element <${tagName}> is self-closing and cannot have text content`,
+            };
+        }
+        // Find the opening tag end and closing tag start
+        const tagInfo = findJSXTagAtPosition(sourceCode, lineNumber, columnNumber, tagName);
+        if (!tagInfo) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Could not find opening tag for <${tagName}>`,
+            };
+        }
+        // Use the found tag name for closing tag search (handles Link -> a mapping etc.)
+        const actualTagName = tagInfo.foundTagName;
+        // Extract content between opening and closing tag
+        const closingTagPattern = new RegExp(`</${actualTagName}\\s*>`);
+        const afterOpening = sourceCode.slice(tagInfo.end);
+        const closingMatch = closingTagPattern.exec(afterOpening);
+        if (!closingMatch) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Could not find closing tag for <${actualTagName}>`,
+            };
+        }
+        const contentStart = tagInfo.end;
+        const contentEnd = tagInfo.end + closingMatch.index;
+        const currentContent = sourceCode.slice(contentStart, contentEnd);
+        // Check if content is pure text
+        if (!isPureTextContent(currentContent)) {
+            return {
+                success: false,
+                code: sourceCode,
+                message: `Element <${actualTagName}> contains JS expressions or nested elements. Text update skipped.`,
+            };
+        }
+        // Replace the content
+        const updatedCode = sourceCode.slice(0, contentStart) +
+            newText +
+            sourceCode.slice(contentEnd);
+        return {
+            success: true,
+            code: updatedCode,
+            message: `Text content of <${actualTagName}> updated successfully`,
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            code: sourceCode,
+            message: error instanceof Error
+                ? error.message
+                : "Unknown error occurred during text update",
+        };
+    }
+}
+/**
+ * Group changes by element ID
+ */
+function groupChangesByElement(changes) {
+    const grouped = new Map();
+    for (const change of changes) {
+        const elementId = change.element.id || change.element.selector || "unknown";
+        const existing = grouped.get(elementId) || [];
+        existing.push(change);
+        grouped.set(elementId, existing);
+    }
+    return grouped;
+}
+/**
+ * Merge multiple style changes into a single styles object
+ */
+function mergeStyleChanges(changes) {
+    const mergedStyles = {};
+    for (const change of changes) {
+        if (change.type === "singleStyle" && change.singleStyle) {
+            const { property, currentValue } = change.singleStyle;
+            mergedStyles[property] = currentValue;
+        }
+        else if (change.type === "style" && change.style?.current) {
+            // Merge all current styles
+            const currentStyles = change.style.current;
+            for (const [key, value] of Object.entries(currentStyles)) {
+                if (value !== undefined && value !== "") {
+                    mergedStyles[key] = value;
+                }
+            }
+        }
+    }
+    return mergedStyles;
+}
+/**
+ * Apply a collection of InspectorChange objects to JSX source code
+ *
+ * This function processes changes in a logical order:
+ * 1. Groups changes by element
+ * 2. For each element:
+ *    - If delete: deletes the element, skips other changes for that element
+ *    - If duplicate: applies styles/text first, then duplicates
+ *    - Merges all style changes into single update
+ *    - Applies text changes (only if pure text)
+ *
+ * @param options - Source code and changes to apply
+ * @returns Result with updated code and detailed results for each change
+ *
+ * @example
+ * ```typescript
+ * const result = applyChangesToJSXSource({
+ *   sourceCode: '<div>Hello</div>',
+ *   changes: [
+ *     { type: 'singleStyle', singleStyle: { property: 'color', currentValue: 'red' }, ... },
+ *     { type: 'text', text: { current: 'World' }, ... }
+ *   ]
+ * });
+ * ```
+ */
+export function applyChangesToJSXSource(options) {
+    const { sourceCode, changes } = options;
+    const results = [];
+    let currentCode = sourceCode;
+    let successful = 0;
+    let failed = 0;
+    let skipped = 0;
+    // Group changes by element
+    const groupedChanges = groupChangesByElement(changes);
+    // Process each element's changes
+    for (const [elementId, elementChanges] of groupedChanges) {
+        // Check if there's a delete change for this element
+        const deleteChange = elementChanges.find((c) => c.type === "delete");
+        if (deleteChange) {
+            // If delete exists, delete the element and skip all other changes for this element
+            const element = deleteChange.element;
+            if (element.lineNumber && element.columnNumber !== undefined) {
+                const deleteResult = deleteJSXElement({
+                    sourceCode: currentCode,
+                    lineNumber: element.lineNumber,
+                    columnNumber: element.columnNumber,
+                    tagName: element.tagName,
+                });
+                results.push({
+                    changeId: deleteChange.id,
+                    type: "delete",
+                    success: deleteResult.success,
+                    message: deleteResult.message,
+                });
+                if (deleteResult.success) {
+                    currentCode = deleteResult.code;
+                    successful++;
+                }
+                else {
+                    failed++;
+                }
+                // Skip other changes for this element
+                for (const change of elementChanges) {
+                    if (change.id !== deleteChange.id) {
+                        results.push({
+                            changeId: change.id,
+                            type: change.type,
+                            success: false,
+                            message: "Skipped: element was deleted",
+                        });
+                        skipped++;
+                    }
+                }
+                continue;
+            }
+            else {
+                results.push({
+                    changeId: deleteChange.id,
+                    type: "delete",
+                    success: false,
+                    message: "Missing line/column number for delete operation",
+                });
+                failed++;
+            }
+        }
+        // Separate changes by type
+        const styleChanges = elementChanges.filter((c) => c.type === "singleStyle" || c.type === "style");
+        const textChanges = elementChanges.filter((c) => c.type === "text");
+        const duplicateChanges = elementChanges.filter((c) => c.type === "duplicate");
+        // Get element position from first change that has it
+        const firstChange = elementChanges[0];
+        const element = firstChange.element;
+        if (!element.lineNumber || element.columnNumber === undefined) {
+            // Can't process without position
+            for (const change of elementChanges) {
+                if (change.type !== "delete") {
+                    results.push({
+                        changeId: change.id,
+                        type: change.type,
+                        success: false,
+                        message: "Missing line/column number",
+                    });
+                    failed++;
+                }
+            }
+            continue;
+        }
+        // Apply style changes (merged)
+        if (styleChanges.length > 0) {
+            const mergedStyles = mergeStyleChanges(styleChanges);
+            if (Object.keys(mergedStyles).length > 0) {
+                const styleResult = updateJSXSource({
+                    sourceCode: currentCode,
+                    lineNumber: element.lineNumber,
+                    columnNumber: element.columnNumber,
+                    tagName: element.tagName,
+                    styles: mergedStyles,
+                });
+                // Record result for each style change
+                for (const change of styleChanges) {
+                    results.push({
+                        changeId: change.id,
+                        type: change.type,
+                        success: styleResult.success,
+                        message: styleResult.success
+                            ? "Style applied (merged with other styles)"
+                            : styleResult.message,
+                    });
+                    if (styleResult.success) {
+                        successful++;
+                    }
+                    else {
+                        failed++;
+                    }
+                }
+                if (styleResult.success) {
+                    currentCode = styleResult.code;
+                }
+            }
+        }
+        // Apply text changes
+        for (const change of textChanges) {
+            if (change.text?.current) {
+                const textResult = updateTextContent({
+                    sourceCode: currentCode,
+                    lineNumber: element.lineNumber,
+                    columnNumber: element.columnNumber,
+                    tagName: element.tagName,
+                    newText: change.text.current,
+                });
+                results.push({
+                    changeId: change.id,
+                    type: "text",
+                    success: textResult.success,
+                    message: textResult.message,
+                });
+                if (textResult.success) {
+                    currentCode = textResult.code;
+                    successful++;
+                }
+                else {
+                    // Check if it was skipped due to JS expressions
+                    if (textResult.message?.includes("JS expressions")) {
+                        skipped++;
+                    }
+                    else {
+                        failed++;
+                    }
+                }
+            }
+        }
+        // Apply duplicate changes
+        for (const change of duplicateChanges) {
+            const dupResult = duplicateJSXElement({
+                sourceCode: currentCode,
+                lineNumber: element.lineNumber,
+                columnNumber: element.columnNumber,
+                tagName: element.tagName,
+            });
+            results.push({
+                changeId: change.id,
+                type: "duplicate",
+                success: dupResult.success,
+                message: dupResult.message,
+            });
+            if (dupResult.success) {
+                currentCode = dupResult.code;
+                successful++;
+            }
+            else {
+                failed++;
+            }
+        }
+    }
+    const allSuccessful = failed === 0 && skipped === 0;
+    return {
+        success: allSuccessful,
+        code: currentCode,
+        results,
+        summary: {
+            total: changes.length,
+            successful,
+            failed,
+            skipped,
+        },
+    };
+}

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "@promakeai/inspector-hook",
-  "version": "1.1.1",
-  "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"
-  ],
-  "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",
-    "release": "bun run build && npm publish --access public"
-  },
-  "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": "1.0.2",
-    "vitest": "^1.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@promakeai/inspector-hook",
+  "version": "1.2.1",
+  "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"
+  ],
+  "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",
+    "release": "bun run build && npm publish --access public"
+  },
+  "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": "1.0.2",
+    "vitest": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}