@eyeglass/inspector 0.1.6 → 0.1.7

package/README.md

@@ -27,15 +27,19 @@ The inspector auto-initializes when imported and only runs in development mode.
 - **Multi-select** up to 5 elements
 - **Framework detection** - React, Vue, Svelte component names and file paths
 - **Semantic capture** - accessibility tree, computed styles, geometry
+- **DOM neighborhood** - captures parent layout context (flex/grid) and children
 - **Real-time feedback** - see Claude's progress in the browser
 - **One-click undo** - revert changes from the hub
+- **Keyboard shortcuts** - toggle inspector with `Cmd/Ctrl + Shift + E`
 
 ## How It Works
 
 1. Hover over elements to highlight them
 2. Click to select and open the request panel
 3. Type what you want to change
-4. Submit - Claude receives full context and makes the change
+4. Submit - your AI agent receives full context and makes the change
 5. HMR updates your browser automatically
 
+**Supported agents:** Claude Code, GitHub Copilot CLI, OpenAI Codex CLI
+
 See the [main repo](https://github.com/donutboyband/eyeglass) for full documentation.

package/dist/constants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Constants for Eyeglass Inspector
+ */
+export declare const BRIDGE_URL = "http://localhost:3300";
+export declare const STORAGE_KEY = "eyeglass_session";
+export declare const HISTORY_KEY = "eyeglass_history";
+export declare const ENABLED_KEY = "eyeglass_enabled";
+export declare const AUTOCOMMIT_KEY = "eyeglass_autocommit";
+export declare const THEME_KEY = "eyeglass_theme";
+export declare const SESSION_TTL = 10000;
+export declare const MAX_SELECTION = 5;
+export declare const WORKING_PHRASES: string[];
+export declare const EYE_CURSOR = "url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xIDEyczQtOCAxMS04IDExIDggMTEgOC00IDgtMTEgOC0xMS04LTExLTh6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIgZmlsbD0iIzYzNjZmMSIvPjwvc3ZnPg==\") 8 8, crosshair";

package/dist/handlers/drag.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Drag handlers for Eyeglass Inspector panel
+ */
+export interface DragState {
+    isDragging: boolean;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
+    panel: HTMLDivElement | null;
+}
+export interface DragCallbacks {
+    setDragging: (isDragging: boolean) => void;
+    setDragOffset: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    setCustomPanelPosition: (position: {
+        x: number;
+        y: number;
+    }) => void;
+}
+/**
+ * Creates panel drag handler functions
+ */
+export declare function createDragHandlers(getState: () => DragState, callbacks: DragCallbacks): {
+    handlePanelDragStart: (e: MouseEvent) => void;
+    handlePanelDrag: (e: MouseEvent) => void;
+    handlePanelDragEnd: () => void;
+};

package/dist/handlers/events.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Event handlers for Eyeglass Inspector
+ */
+export interface MouseMoveHandlerState {
+    frozen: boolean;
+    multiSelectMode: boolean;
+    inspectorEnabled: boolean;
+    throttleTimeout: number | null;
+}
+export interface MouseMoveHandlerCallbacks {
+    setThrottleTimeout: (timeout: number | null) => void;
+    hideHighlight: () => void;
+    showHighlight: (element: Element) => void;
+    setCurrentElement: (element: Element | null) => void;
+}
+/**
+ * Creates a mouse move handler function
+ */
+export declare function createMouseMoveHandler(host: HTMLElement, shadow: ShadowRoot, getState: () => MouseMoveHandlerState, callbacks: MouseMoveHandlerCallbacks): (e: MouseEvent) => void;
+export interface ClickHandlerState {
+    inspectorEnabled: boolean;
+    currentElement: Element | null;
+    frozen: boolean;
+    multiSelectMode: boolean;
+}
+export interface ClickHandlerCallbacks {
+    toggleInSelection: (element: Element) => void;
+    freeze: () => void;
+}
+/**
+ * Creates a click handler function
+ */
+export declare function createClickHandler(host: HTMLElement, getState: () => ClickHandlerState, callbacks: ClickHandlerCallbacks): (e: MouseEvent) => void;
+export interface KeyDownHandlerState {
+    frozen: boolean;
+}
+export interface KeyDownHandlerCallbacks {
+    unfreeze: () => void;
+    toggleInspectorEnabled: () => void;
+}
+/**
+ * Creates a keydown handler function
+ *
+ * Keyboard shortcuts:
+ * - Escape: Close panel / unfreeze
+ * - Ctrl/Cmd + Shift + E: Toggle inspector enabled
+ */
+export declare function createKeyDownHandler(getState: () => KeyDownHandlerState, callbacks: KeyDownHandlerCallbacks): (e: KeyboardEvent) => void;
+export interface ScrollHandlerState {
+    frozen: boolean;
+    currentElement: Element | null;
+    highlight: HTMLDivElement | null;
+    multiSelectMode: boolean;
+    selectedElements: Element[];
+    scrollTimeout: number | null;
+}
+export interface ScrollHandlerCallbacks {
+    showHighlight: (element: Element) => void;
+    updateMultiSelectHighlightPositions: () => void;
+    disableHighlightTransitions: () => void;
+    enableHighlightTransitions: () => void;
+    setScrollTimeout: (timeout: number | null) => void;
+}
+/**
+ * Creates a scroll handler function
+ */
+export declare function createScrollHandler(getState: () => ScrollHandlerState, callbacks: ScrollHandlerCallbacks): () => void;