@zargaryanvh/react-component-inspector 1.0.2 → 1.0.4

package/dist/index.d.ts

@@ -1,8 +1,10 @@
-export { InspectionProvider, useInspection, ComponentMetadata } from './InspectionContext';
-export { InspectionTooltip } from './InspectionTooltip';
-export { InspectionHighlight } from './InspectionHighlight';
-export { InspectionWrapper, withInspection } from './InspectionWrapper';
-export { useInspectionMetadata } from './useInspectionMetadata';
-export { setupInterceptors, setInspectionActive, shouldBlockRequest } from './inspectionInterceptors';
-export { generateComponentId, formatPropsSignature, formatMetadataForClipboard, getComponentName, getNextInstanceIndex } from './inspection';
-export { setupAutoInspection, parseInspectionMetadata } from './autoInspection';
+export { InspectionProvider, useInspection, ComponentMetadata } from './InspectionContext';
+export { InspectionTooltip } from './InspectionTooltip';
+export { InspectionHighlight } from './InspectionHighlight';
+export { InspectionOverlays } from './InspectionOverlays';
+export { InspectionWrapper, withInspection } from './InspectionWrapper';
+export { useInspectionMetadata } from './useInspectionMetadata';
+export { setupInterceptors, setInspectionActive, shouldBlockRequest } from './inspectionInterceptors';
+export { generateComponentId, formatPropsSignature, formatMetadataForClipboard, formatMarginForClipboard, formatPaddingForClipboard, formatGapForClipboard, getParentWithGap, getAncestorsWithMargin, getTooltipHowToFindInfo, getComponentName, getNextInstanceIndex } from './inspection';
+export type { CopyType } from './inspection';
+export { setupAutoInspection, parseInspectionMetadata } from './autoInspection';

package/dist/index.js

@@ -1,9 +1,10 @@
-// Main exports
-export { InspectionProvider, useInspection } from './InspectionContext';
-export { InspectionTooltip } from './InspectionTooltip';
-export { InspectionHighlight } from './InspectionHighlight';
-export { InspectionWrapper, withInspection } from './InspectionWrapper';
-export { useInspectionMetadata } from './useInspectionMetadata';
-export { setupInterceptors, setInspectionActive, shouldBlockRequest } from './inspectionInterceptors';
-export { generateComponentId, formatPropsSignature, formatMetadataForClipboard, getComponentName, getNextInstanceIndex } from './inspection';
-export { setupAutoInspection, parseInspectionMetadata } from './autoInspection';
+// Main exports
+export { InspectionProvider, useInspection } from './InspectionContext';
+export { InspectionTooltip } from './InspectionTooltip';
+export { InspectionHighlight } from './InspectionHighlight';
+export { InspectionOverlays } from './InspectionOverlays';
+export { InspectionWrapper, withInspection } from './InspectionWrapper';
+export { useInspectionMetadata } from './useInspectionMetadata';
+export { setupInterceptors, setInspectionActive, shouldBlockRequest } from './inspectionInterceptors';
+export { generateComponentId, formatPropsSignature, formatMetadataForClipboard, formatMarginForClipboard, formatPaddingForClipboard, formatGapForClipboard, getParentWithGap, getAncestorsWithMargin, getTooltipHowToFindInfo, getComponentName, getNextInstanceIndex } from './inspection';
+export { setupAutoInspection, parseInspectionMetadata } from './autoInspection';

package/dist/inspection.d.ts

@@ -1,29 +1,78 @@
-import { ComponentMetadata } from "./InspectionContext";
-/**
- * Generate a unique component ID
- */
-export declare const generateComponentId: (componentName: string, instanceIndex: number) => string;
-/**
- * Format props signature for display
- */
-export declare const formatPropsSignature: (props: Record<string, any>) => string;
-/**
- * Get component name from component type
- */
-export declare const getComponentName: (component: React.ComponentType<any> | string) => string;
-/**
- * Build usage path from component hierarchy
- */
-export declare const buildUsagePath: (hierarchy: string[]) => string;
-/**
- * Format metadata for clipboard with full element details
- */
-export declare const formatMetadataForClipboard: (metadata: ComponentMetadata, element: HTMLElement) => string;
-/**
- * Get next instance index for a component
- */
-export declare const getNextInstanceIndex: (componentName: string) => number;
-/**
- * Reset instance counts (useful for testing or remounting)
- */
-export declare const resetInstanceCounts: () => void;
+import { ComponentMetadata } from "./InspectionContext";
+/**
+ * Generate a unique component ID
+ */
+export declare const generateComponentId: (componentName: string, instanceIndex: number) => string;
+/**
+ * Format props signature for display
+ */
+export declare const formatPropsSignature: (props: Record<string, any>) => string;
+/**
+ * Get component name from component type
+ */
+export declare const getComponentName: (component: React.ComponentType<any> | string) => string;
+/**
+ * Build usage path from component hierarchy
+ */
+export declare const buildUsagePath: (hierarchy: string[]) => string;
+export type CopyType = "component" | "margin" | "padding" | "gap";
+/**
+ * Get parent element that has flex/grid layout with non-zero gap
+ */
+export declare const getParentWithGap: (element: HTMLElement) => HTMLElement | null;
+/**
+ * Get ancestors with non-zero margin (closest first, up to maxCount)
+ */
+export declare const getAncestorsWithMargin: (element: HTMLElement, maxCount?: number) => Array<{
+    element: HTMLElement;
+    mt: number;
+    mr: number;
+    mb: number;
+    ml: number;
+}>;
+/**
+ * Build DOM path from body to element (helps Cursor identify exact element)
+ */
+export declare const buildDomPath: (element: HTMLElement) => string;
+/**
+ * Build parent element description
+ */
+export declare const buildParentInfo: (element: HTMLElement) => string | null;
+/**
+ * Build role/disambiguation (outer vs inner, position in tree)
+ */
+export declare const buildRoleInTree: (element: HTMLElement, type: "margin" | "padding" | "component") => string;
+/**
+ * Format metadata for clipboard with full element details
+ */
+export declare const formatMetadataForClipboard: (metadata: ComponentMetadata, element: HTMLElement, type?: CopyType) => string;
+/**
+ * Format margin info for clipboard (alias for formatMetadataForClipboard with type="margin")
+ */
+export declare const formatMarginForClipboard: (metadata: ComponentMetadata, element: HTMLElement) => string;
+/**
+ * Format padding info for clipboard (alias for formatMetadataForClipboard with type="padding")
+ */
+export declare const formatPaddingForClipboard: (metadata: ComponentMetadata, element: HTMLElement) => string;
+/**
+ * Format gap info for clipboard (alias for formatMetadataForClipboard with type="gap")
+ */
+export declare const formatGapForClipboard: (metadata: ComponentMetadata, element: HTMLElement) => string;
+/**
+ * Get "how to find" display info for tooltip (same logic for desktop and mobile)
+ */
+export declare const getTooltipHowToFindInfo: (metadata: ComponentMetadata, element: HTMLElement, type: CopyType) => {
+    domPath: string;
+    parent: string | null;
+    roleInTree: string;
+    target: string;
+    howToFindSteps: string[];
+};
+/**
+ * Get next instance index for a component
+ */
+export declare const getNextInstanceIndex: (componentName: string) => number;
+/**
+ * Reset instance counts (useful for testing or remounting)
+ */
+export declare const resetInstanceCounts: () => void;