@promakeai/inspector-hook 1.2.8 → 1.3.1

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 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, ElementDeletedData, ElementDuplicatedData, ChangeType, ChangeHistoryEntry, InspectorChange, InspectorChangeType, InspectorChangesSavedData, InspectorLabels, InspectorTheme, ContentInputRequestData, InspectorCallbacks, UseInspectorReturn, InspectorTab, } from "@promakeai/inspector-types";
+import type { InspectorCallbacks, InspectorLabels, InspectorTheme, InspectorInitialConfig, UseInspectorReturn } from "@promakeai/inspector-types";
+export declare function useInspector(iframeRef: RefObject<HTMLIFrameElement>, callbacks?: InspectorCallbacks, labels?: InspectorLabels, theme?: InspectorTheme, initialConfig?: InspectorInitialConfig): UseInspectorReturn;
+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, InspectorTab, InspectorInitialConfig, InspectorInitializedData, } 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";

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,EAenB,MAAM,4BAA4B,CAAC;AAsHpC,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,CAqVpB;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,EAClB,YAAY,GACb,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EACV,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,sBAAsB,EAEtB,kBAAkB,EAenB,MAAM,4BAA4B,CAAC;AA0IpC,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,CAAC,iBAAiB,CAAC,EACvC,SAAS,CAAC,EAAE,kBAAkB,EAC9B,MAAM,CAAC,EAAE,eAAe,EACxB,KAAK,CAAC,EAAE,cAAc,EACtB,aAAa,CAAC,EAAE,sBAAsB,GACrC,kBAAkB,CAydpB;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,EAClB,YAAY,EACZ,sBAAsB,EACtB,wBAAwB,GACzB,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

@@ -1,6 +1,8 @@
-import { useEffect, useState, useCallback } from "react";
-export function useInspector(iframeRef, callbacks, labels, theme) {
+import { useEffect, useState, useCallback, useRef } from "react";
+export function useInspector(iframeRef, callbacks, labels, theme, initialConfig) {
     const [isInspecting, setIsInspecting] = useState(false);
+    const [isReady, setIsReady] = useState(false);
+    const initialConfigSentRef = useRef(false);
     /**
      * Send message to iframe
      */
@@ -155,6 +157,36 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
             enabled: enabled,
         });
     }, [sendMessage]);
+    /**
+     * Allow/disallow editing elements with multiple instances
+     * When false and element has multiple instances, only prompt input is shown
+     */
+    const setAllowEditForMultipleInstances = useCallback((enabled) => {
+        sendMessage({
+            type: "SET_ALLOW_EDIT_FOR_MULTIPLE_INSTANCES",
+            enabled: enabled,
+        });
+    }, [sendMessage]);
+    /**
+     * Enable/disable ControlBox dragging
+     * When false, drag handle is hidden and dragging is disabled
+     */
+    const setIsDraggable = useCallback((enabled) => {
+        sendMessage({
+            type: "SET_IS_DRAGGABLE",
+            enabled: enabled,
+        });
+    }, [sendMessage]);
+    /**
+     * Enable/disable ControlBox resizing
+     * When false, resize cursors are hidden and resizing is disabled
+     */
+    const setIsResizable = useCallback((enabled) => {
+        sendMessage({
+            type: "SET_IS_RESIZABLE",
+            enabled: enabled,
+        });
+    }, [sendMessage]);
     /**
      * Listen for messages from iframe
      */
@@ -221,6 +253,14 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
                 case "INSPECTOR_GO_TO_CODE":
                     callbacks?.onGoToCode?.(messageData.data);
                     break;
+                case "INSPECTOR_UNMOUNTED":
+                    setIsInspecting(false);
+                    callbacks?.onInspectorUnmounted?.();
+                    break;
+                case "INSPECTOR_INITIALIZED":
+                    setIsReady(true);
+                    callbacks?.onInspectorInitialized?.(messageData.data);
+                    break;
                 default:
                     // Unknown message type - ignore
                     break;
@@ -231,6 +271,78 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
             window.removeEventListener("message", handleMessage);
         };
     }, [callbacks]);
+    /**
+     * Send initial config when inspector is ready
+     * Priority: method calls > initialConfig > inspector defaults
+     */
+    useEffect(() => {
+        if (isReady && initialConfig && !initialConfigSentRef.current) {
+            initialConfigSentRef.current = true;
+            // Send behavior settings
+            if (initialConfig.inspectOnRightClick !== undefined) {
+                sendMessage({
+                    type: "SET_INSPECT_ON_RIGHT_CLICK",
+                    enabled: initialConfig.inspectOnRightClick,
+                });
+            }
+            if (initialConfig.allowEditForMultipleInstances !== undefined) {
+                sendMessage({
+                    type: "SET_ALLOW_EDIT_FOR_MULTIPLE_INSTANCES",
+                    enabled: initialConfig.allowEditForMultipleInstances,
+                });
+            }
+            if (initialConfig.isDraggable !== undefined) {
+                sendMessage({
+                    type: "SET_IS_DRAGGABLE",
+                    enabled: initialConfig.isDraggable,
+                });
+            }
+            if (initialConfig.isResizable !== undefined) {
+                sendMessage({
+                    type: "SET_IS_RESIZABLE",
+                    enabled: initialConfig.isResizable,
+                });
+            }
+            // Send visibility settings
+            if (initialConfig.showContentInput !== undefined) {
+                sendMessage({
+                    type: "SHOW_CONTENT_INPUT",
+                    show: initialConfig.showContentInput,
+                });
+            }
+            if (initialConfig.showImageInput !== undefined) {
+                sendMessage({
+                    type: "SHOW_IMAGE_INPUT",
+                    show: initialConfig.showImageInput,
+                });
+            }
+            if (initialConfig.showStyleEditor !== undefined) {
+                sendMessage({
+                    type: "SHOW_STYLE_EDITOR",
+                    show: initialConfig.showStyleEditor,
+                });
+            }
+            if (initialConfig.showActionsTab !== undefined) {
+                sendMessage({
+                    type: "SHOW_ACTIONS_TAB",
+                    show: initialConfig.showActionsTab,
+                });
+            }
+            if (initialConfig.showChildBorders !== undefined) {
+                sendMessage({
+                    type: "SET_SHOW_CHILD_BORDERS",
+                    show: initialConfig.showChildBorders,
+                });
+            }
+            if (initialConfig.badgeVisible !== undefined) {
+                sendMessage({
+                    type: "SET_BADGE_VISIBLE",
+                    visible: initialConfig.badgeVisible,
+                    badgeText: labels?.badgeText,
+                });
+            }
+        }
+    }, [isReady, initialConfig, sendMessage, labels]);
     /**
      * Cleanup: Turn off inspector on unmount
      */
@@ -263,6 +375,9 @@ export function useInspector(iframeRef, callbacks, labels, theme) {
         setActiveTab,
         setLoading,
         setInspectOnRightClick,
+        setAllowEditForMultipleInstances,
+        setIsDraggable,
+        setIsResizable,
     };
 }
 // Export utility functions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promakeai/inspector-hook",
-  "version": "1.2.8",
+  "version": "1.3.1",
   "description": "React hook for controlling inspector in parent applications",
   "author": "Promake",
   "type": "module",
@@ -45,7 +45,7 @@
     }
   },
   "devDependencies": {
-    "@promakeai/inspector-types": "1.0.2",
+    "@promakeai/inspector-types": "1.3.1",
     "vitest": "^1.0.0"
   },
   "publishConfig": {