@supernal/interface 1.0.0

package/dist/esm/src/react/hooks/useChatWithContext.js

@@ -0,0 +1,218 @@
+/**
+ * useChatWithContext - Hook for integrating AI chat with application context
+ *
+ * Provides chat capabilities that can be plugged into any UI:
+ * - Automatic context injection (current view, available tools, app state)
+ * - Tool execution
+ * - Prompt building with context
+ * - Message handling
+ */
+import { useState, useCallback, useMemo } from 'react';
+import { ToolRegistry } from '../../background/registry/ToolRegistry.js';
+export function useChatWithContext(config = {}) {
+    const [messages, setMessages] = useState([]);
+    const [isProcessing, setIsProcessing] = useState(false);
+    // Get available tools for current container
+    const availableTools = useMemo(() => {
+        if (!config.containerId) {
+            return Array.from(ToolRegistry.getAllTools().values())
+                .filter(t => t.aiEnabled);
+        }
+        return ToolRegistry.searchScoped('', config.containerId);
+    }, [config.containerId]);
+    // Build context object
+    const getCurrentContext = useCallback(() => {
+        return {
+            containerId: config.containerId,
+            userId: config.userId,
+            appState: config.getAppState?.(),
+            metadata: {
+                timestamp: new Date().toISOString(),
+                toolCount: availableTools.length
+            }
+        };
+    }, [config.containerId, config.userId, config.getAppState, availableTools.length]);
+    // Build prompt with context
+    const buildPromptWithContext = useCallback((userMessage) => {
+        const context = getCurrentContext();
+        const toolNames = availableTools.map(t => t.name || `${t.componentName}.${t.methodName}`);
+        const systemPrompt = config.systemPrompt || `You are an AI assistant with access to application tools.
+
+Current Context:
+- Container: ${context.containerId || 'global'}
+- Available Tools: ${toolNames.join(', ')}
+${context.appState ? `- Application State: ${JSON.stringify(context.appState, null, 2)}` : ''}
+
+When the user asks you to do something:
+1. Identify the appropriate tool from available tools
+2. Extract any required parameters from the user's message
+3. Return the tool name and parameters in your response
+4. Confirm the action after execution
+
+Be concise and helpful.`;
+        return {
+            userMessage,
+            context,
+            availableTools: toolNames,
+            systemPrompt
+        };
+    }, [getCurrentContext, availableTools, config.systemPrompt]);
+    // Execute a tool
+    const executeTool = useCallback(async (toolId, args = {}) => {
+        try {
+            // Get tool metadata
+            const tool = ToolRegistry.getTool(toolId);
+            if (!tool || !tool.method) {
+                throw new Error(`Tool not found or has no method: ${toolId}`);
+            }
+            // Convert args object to parameters array based on inputSchema
+            const parameters = [];
+            if (tool.inputSchema) {
+                for (const [paramName, paramDef] of Object.entries(tool.inputSchema)) {
+                    const def = paramDef;
+                    parameters.push(args[paramName] ?? def.default);
+                }
+            }
+            // Execute the tool method
+            const result = await tool.method(...parameters);
+            config.onToolExecute?.(toolId, args, result);
+            return {
+                success: true,
+                result,
+                error: undefined
+            };
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            config.onError?.(err);
+            return {
+                success: false,
+                result: undefined,
+                error: err.message
+            };
+        }
+    }, [config]);
+    // Add a message
+    const addMessage = useCallback((content, role = 'user') => {
+        const message = {
+            id: `msg-${Date.now()}-${Math.random()}`,
+            role,
+            content,
+            timestamp: new Date(),
+            context: role === 'user' ? getCurrentContext() : undefined
+        };
+        setMessages(prev => [...prev, message]);
+        config.onMessage?.(message);
+        return message;
+    }, [getCurrentContext, config]);
+    // Send a message (user -> AI -> tool execution)
+    const sendMessage = useCallback(async (content) => {
+        if (!content.trim())
+            return;
+        // Add user message
+        addMessage(content, 'user');
+        setIsProcessing(true);
+        try {
+            // Build prompt with context
+            const _prompt = buildPromptWithContext(content);
+            // Simple fuzzy matching for demo purposes
+            // In production, this would call an LLM API
+            const lowerContent = content.toLowerCase();
+            let responseContent = "I understand. ";
+            let toolExecuted = false;
+            // Try to match and execute tools
+            for (const tool of availableTools) {
+                const toolName = tool.name || `${tool.componentName}.${tool.methodName}`;
+                const keywords = tool.examples?.join(' ').toLowerCase() || '';
+                // Simple keyword matching
+                if (keywords.includes(lowerContent) ||
+                    toolName.toLowerCase().includes(lowerContent.split(' ')[0])) {
+                    // Extract simple arguments (in production, LLM would do this)
+                    const args = extractSimpleArgs(content, tool);
+                    // Execute tool
+                    const result = await executeTool(tool.toolId || '', args);
+                    if (result.success) {
+                        responseContent += `Executed ${toolName}. `;
+                        toolExecuted = true;
+                    }
+                    else {
+                        responseContent += `Failed to execute ${toolName}: ${result.error}`;
+                    }
+                    break;
+                }
+            }
+            if (!toolExecuted) {
+                responseContent = `I couldn't find a matching tool. Available tools: ${availableTools.map(t => t.name || t.methodName).join(', ')}`;
+            }
+            // Add AI response
+            addMessage(responseContent, 'assistant');
+        }
+        catch (error) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            config.onError?.(err);
+            addMessage(`Error: ${err.message}`, 'system');
+        }
+        finally {
+            setIsProcessing(false);
+        }
+    }, [addMessage, buildPromptWithContext, availableTools, executeTool, config]);
+    // Clear messages
+    const clearMessages = useCallback(() => {
+        setMessages([]);
+    }, []);
+    // Suggest tools based on query
+    const suggestTools = useCallback((query) => {
+        if (!query.trim())
+            return availableTools;
+        const lowerQuery = query.toLowerCase();
+        return availableTools.filter(tool => {
+            const toolName = (tool.name || tool.methodName).toLowerCase();
+            const description = tool.description?.toLowerCase() || '';
+            const examples = tool.examples?.join(' ').toLowerCase() || '';
+            return toolName.includes(lowerQuery) ||
+                description.includes(lowerQuery) ||
+                examples.includes(lowerQuery);
+        });
+    }, [availableTools]);
+    return {
+        // State
+        messages,
+        isProcessing,
+        availableTools,
+        currentContext: getCurrentContext(),
+        // Actions
+        sendMessage,
+        addMessage,
+        clearMessages,
+        executeTool,
+        // Helpers
+        buildPromptWithContext,
+        suggestTools
+    };
+}
+// Simple argument extraction (in production, LLM would handle this)
+function extractSimpleArgs(query, tool) {
+    const args = {};
+    const lowerQuery = query.toLowerCase();
+    // Extract numbers
+    const numMatch = query.match(/\d+/);
+    if (numMatch && tool.inputSchema) {
+        const numParam = Object.keys(tool.inputSchema).find(key => tool.inputSchema[key].type === 'number');
+        if (numParam) {
+            args[numParam] = parseInt(numMatch[0], 10);
+        }
+    }
+    // Extract common keywords
+    if (lowerQuery.includes('dark'))
+        args.theme = 'dark';
+    if (lowerQuery.includes('light'))
+        args.theme = 'light';
+    if (lowerQuery.includes('high'))
+        args.priority = 'high';
+    if (lowerQuery.includes('medium'))
+        args.priority = 'medium';
+    if (lowerQuery.includes('low'))
+        args.priority = 'low';
+    return args;
+}
+//# sourceMappingURL=useChatWithContext.js.map

package/dist/esm/src/react/hooks/useChatWithContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatWithContext.js","sourceRoot":"","sources":["../../../../../src/react/hooks/useChatWithContext.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/react/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * React Components - Open Source Edition
+ *
+ * Basic React hooks. Architecture visualization components (ArchitectureGraph,
+ * LiveArchitectureGraph, RuntimeGraphTracker) available in enterprise edition.
+ */
+export { useToolBinding } from './useToolBinding';
+export { usePersistedState } from './usePersistedState';
+export { useNavigationHandler } from './useNavigationHandler';
+export { useChatWithContext } from './hooks/useChatWithContext';
+export type { ChatContext, ChatMessage, PromptWithContext, UseChatWithContextConfig } from './hooks/useChatWithContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/src/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,YAAY,EACV,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,wBAAwB,EACzB,MAAM,4BAA4B,CAAC"}

package/dist/esm/src/react/index.js

@@ -0,0 +1,21 @@
+/**
+ * React Components - Open Source Edition
+ *
+ * Basic React hooks. Architecture visualization components (ArchitectureGraph,
+ * LiveArchitectureGraph, RuntimeGraphTracker) available in enterprise edition.
+ */
+// Basic hooks (open source)
+export { useToolBinding } from './useToolBinding.js';
+export { usePersistedState } from './usePersistedState.js';
+export { useNavigationHandler } from './useNavigationHandler.js';
+// Chat integration hook
+export { useChatWithContext } from './hooks/useChatWithContext.js';
+// Enterprise features - available at https://supernal.ai/enterprise:
+// - ArchitectureGraph (visual component tree)
+// - LiveArchitectureGraph (real-time visualization)
+// - RuntimeGraphTracker (execution tracking)
+// - GraphLayout (layout engine)
+// - TreeValidator (validation)
+// - StatePanel (state visualization)
+// - ContainerNode, ComponentNode, ToolNode (graph nodes)
+//# sourceMappingURL=index.js.map

package/dist/esm/src/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/react/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,4BAA4B;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,wBAAwB;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAQhE,qEAAqE;AACrE,8CAA8C;AAC9C,oDAAoD;AACpD,6CAA6C;AAC7C,gCAAgC;AAChC,+BAA+B;AAC/B,qCAAqC;AACrC,yDAAyD"}

package/dist/esm/src/react/useNavigationHandler.d.ts

@@ -0,0 +1,42 @@
+/**
+ * useNavigationHandler - React Hook for Automatic Navigation Setup
+ *
+ * Single-line hook that sets up navigation for any page.
+ * Uses NavigationGraph to automatically resolve routes from container definitions.
+ *
+ * This eliminates the need for manual route maps in every page component.
+ */
+/**
+ * Set up automatic navigation handler for the current page
+ *
+ * This hook:
+ * 1. Gets routes from NavigationGraph (populated by container definitions)
+ * 2. Creates a handler that resolves page names → routes
+ * 3. Registers the handler with NavigationGraph
+ * 4. Supports dynamic routes (e.g., "blog/post-slug")
+ *
+ * @param router - Next.js router or any router with a `push` method
+ *
+ * @example
+ * ```typescript
+ * import { useRouter } from 'next/router';
+ * import { useNavigationHandler } from '@supernal-interface/core/react';
+ *
+ * export default function MyPage() {
+ *   const router = useRouter();
+ *   useNavigationHandler(router); // ← ONE LINE!
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Without a router (uses window.location as fallback)
+ * useNavigationHandler();
+ * ```
+ */
+export declare function useNavigationHandler(router?: {
+    push: (route: string) => any;
+}): void;
+//# sourceMappingURL=useNavigationHandler.d.ts.map

package/dist/esm/src/react/useNavigationHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigationHandler.d.ts","sourceRoot":"","sources":["../../../../src/react/useNavigationHandler.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,CAAC,EAAE;IAAE,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAA;CAAE,GACxC,IAAI,CAkDN"}

package/dist/esm/src/react/useNavigationHandler.js

@@ -0,0 +1,85 @@
+/**
+ * useNavigationHandler - React Hook for Automatic Navigation Setup
+ *
+ * Single-line hook that sets up navigation for any page.
+ * Uses NavigationGraph to automatically resolve routes from container definitions.
+ *
+ * This eliminates the need for manual route maps in every page component.
+ */
+import { useEffect } from 'react';
+import { NavigationGraph } from '../background/navigation/NavigationGraph.js';
+/**
+ * Set up automatic navigation handler for the current page
+ *
+ * This hook:
+ * 1. Gets routes from NavigationGraph (populated by container definitions)
+ * 2. Creates a handler that resolves page names → routes
+ * 3. Registers the handler with NavigationGraph
+ * 4. Supports dynamic routes (e.g., "blog/post-slug")
+ *
+ * @param router - Next.js router or any router with a `push` method
+ *
+ * @example
+ * ```typescript
+ * import { useRouter } from 'next/router';
+ * import { useNavigationHandler } from '@supernal-interface/core/react';
+ *
+ * export default function MyPage() {
+ *   const router = useRouter();
+ *   useNavigationHandler(router); // ← ONE LINE!
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Without a router (uses window.location as fallback)
+ * useNavigationHandler();
+ * ```
+ */
+export function useNavigationHandler(router) {
+    useEffect(() => {
+        const graph = NavigationGraph.getInstance();
+        const handler = (pageNameOrRoute) => {
+            const pageName = typeof pageNameOrRoute === 'string' ? pageNameOrRoute : pageNameOrRoute?.name || pageNameOrRoute?.path;
+            if (!pageName)
+                return;
+            console.log(`🗺️  [Navigation] Request: ${pageName}`);
+            // Use NavigationGraph to resolve route
+            let route = graph.getRouteByName(pageName);
+            if (!route) {
+                console.warn(`⚠️  [Navigation] No exact route found for: ${pageName}`);
+                // Try treating as a path (e.g., "blog/type-safe" → "/blog/type-safe")
+                if (pageName.includes('/')) {
+                    const routePath = pageName.startsWith('/') ? pageName : `/${pageName}`;
+                    console.log(`🗺️  [Navigation] Attempting dynamic path: ${routePath}`);
+                    // Navigate using provided router or fallback to window.location
+                    if (router?.push) {
+                        router.push(routePath);
+                    }
+                    else if (typeof window !== 'undefined') {
+                        window.location.href = routePath;
+                    }
+                }
+                return;
+            }
+            // Extract path from RouteInfo
+            const routePath = route.path || route.name || pageName;
+            console.log(`🗺️  [Navigation] Resolved: ${pageName} → ${routePath}`);
+            // Navigate using provided router or fallback to window.location
+            if (router?.push) {
+                router.push(routePath);
+            }
+            else if (typeof window !== 'undefined') {
+                window.location.href = routePath;
+            }
+        };
+        graph.setNavigationHandler(handler);
+        return () => {
+            // Clean up handler on unmount
+            graph.setNavigationHandler(() => { });
+        };
+    }, [router]);
+}
+//# sourceMappingURL=useNavigationHandler.js.map

package/dist/esm/src/react/useNavigationHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigationHandler.js","sourceRoot":"","sources":["../../../../src/react/useNavigationHandler.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAAyC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;QAE5C,MAAM,OAAO,GAAG,CAAC,eAA6B,EAAE,EAAE;YAChD,MAAM,QAAQ,GAAG,OAAO,eAAe,KAAK,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,EAAE,IAAI,IAAI,eAAe,EAAE,IAAI,CAAC;YACxH,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAEtB,OAAO,CAAC,GAAG,CAAC,8BAA8B,QAAQ,EAAE,CAAC,CAAC;YAEtD,uCAAuC;YACvC,IAAI,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;YAE3C,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAO,CAAC,IAAI,CAAC,8CAA8C,QAAQ,EAAE,CAAC,CAAC;gBAEvE,sEAAsE;gBACtE,IAAI,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC3B,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,EAAE,CAAC;oBACvE,OAAO,CAAC,GAAG,CAAC,8CAA8C,SAAS,EAAE,CAAC,CAAC;oBAEvE,gEAAgE;oBAChE,IAAI,MAAM,EAAE,IAAI,EAAE,CAAC;wBACjB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;oBACzB,CAAC;yBAAM,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;wBACzC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAC;oBACnC,CAAC;gBACH,CAAC;gBACD,OAAO;YACT,CAAC;YAED,8BAA8B;YAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC;YACvD,OAAO,CAAC,GAAG,CAAC,+BAA+B,QAAQ,MAAM,SAAS,EAAE,CAAC,CAAC;YAEtE,gEAAgE;YAChE,IAAI,MAAM,EAAE,IAAI,EAAE,CAAC;gBACjB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACzB,CAAC;iBAAM,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;gBACzC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,SAAS,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;QAEF,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE;YACV,8BAA8B;YAC9B,KAAK,CAAC,oBAAoB,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACvC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC"}

package/dist/esm/src/react/usePersistedState.d.ts

@@ -0,0 +1,13 @@
+/**
+ * usePersistedState - SSR-safe state persistence hook
+ *
+ * Like useState, but persists using StateManager and handles hydration properly.
+ * Uses the storage adapter pattern for pluggable persistence.
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = usePersistedState('my-count', 0);
+ * ```
+ */
+export declare function usePersistedState<T>(key: string, defaultValue: T): [T, (value: T | ((prev: T) => T)) => void];
+//# sourceMappingURL=usePersistedState.d.ts.map

package/dist/esm/src/react/usePersistedState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistedState.d.ts","sourceRoot":"","sources":["../../../../src/react/usePersistedState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAqBH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACd,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAgD5C"}

package/dist/esm/src/react/usePersistedState.js

@@ -0,0 +1,69 @@
+/**
+ * usePersistedState - SSR-safe state persistence hook
+ *
+ * Like useState, but persists using StateManager and handles hydration properly.
+ * Uses the storage adapter pattern for pluggable persistence.
+ *
+ * @example
+ * ```tsx
+ * const [count, setCount] = usePersistedState('my-count', 0);
+ * ```
+ */
+import { useState, useEffect } from 'react';
+import { StateManager } from '../storage/StateManager.js';
+import { LocalStorageAdapter } from '../storage/LocalStorageAdapter.js';
+import { StateManagers } from '../types/StateManagers.js';
+// Get or create a singleton StateManager for browser usage
+let browserStateManager = null;
+function getBrowserStateManager() {
+    if (!browserStateManager && typeof window !== 'undefined') {
+        browserStateManager = StateManager.getInstance(StateManagers.SupernalCoreV1, new LocalStorageAdapter());
+    }
+    return browserStateManager;
+}
+export function usePersistedState(key, defaultValue) {
+    // Always start with default value (matches SSR)
+    const [state, setState] = useState(defaultValue);
+    const [isHydrated, setIsHydrated] = useState(false);
+    // Hydrate from storage after mount (client-only)
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const stateManager = getBrowserStateManager();
+        (async () => {
+            try {
+                await stateManager.initialize();
+                const stored = await stateManager.get(key);
+                if (stored && 'value' in stored) {
+                    setState(stored.value);
+                }
+            }
+            catch (e) {
+                // eslint-disable-next-line no-console
+                console.warn(`[usePersistedState] Failed to load "${key}":`, e);
+            }
+            setIsHydrated(true);
+        })();
+    }, [key]);
+    // Persist to storage on changes (but only after hydration)
+    useEffect(() => {
+        if (!isHydrated || typeof window === 'undefined')
+            return;
+        const stateManager = getBrowserStateManager();
+        (async () => {
+            try {
+                await stateManager.set(key, {
+                    kind: 'ui-component',
+                    componentId: key,
+                    value: state
+                }); // Type assertion needed as we're adding custom 'value' field
+            }
+            catch (e) {
+                // eslint-disable-next-line no-console
+                console.warn(`[usePersistedState] Failed to save "${key}":`, e);
+            }
+        })();
+    }, [key, state, isHydrated]);
+    return [state, setState];
+}
+//# sourceMappingURL=usePersistedState.js.map

package/dist/esm/src/react/usePersistedState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePersistedState.js","sourceRoot":"","sources":["../../../../src/react/usePersistedState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAGvD,2DAA2D;AAC3D,IAAI,mBAAmB,GAAwB,IAAI,CAAC;AAEpD,SAAS,sBAAsB;IAC7B,IAAI,CAAC,mBAAmB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAC1D,mBAAmB,GAAG,YAAY,CAAC,WAAW,CAC5C,aAAa,CAAC,cAAc,EAC5B,IAAI,mBAAmB,EAAE,CAC1B,CAAC;IACJ,CAAC;IACD,OAAO,mBAAoB,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,GAAW,EACX,YAAe;IAEf,gDAAgD;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,YAAY,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,iDAAiD;IACjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAE1C,MAAM,YAAY,GAAG,sBAAsB,EAAE,CAAC;QAE9C,CAAC,KAAK,IAAI,EAAE;YACV,IAAI,CAAC;gBACH,MAAM,YAAY,CAAC,UAAU,EAAE,CAAC;gBAChC,MAAM,MAAM,GAAG,MAAM,YAAY,CAAC,GAAG,CAAgC,GAAG,CAAC,CAAC;gBAC1E,IAAI,MAAM,IAAI,OAAO,IAAI,MAAM,EAAE,CAAC;oBAChC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACzB,CAAC;YACH,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,uCAAuC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;YAClE,CAAC;YAED,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,2DAA2D;IAC3D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAEzD,MAAM,YAAY,GAAG,sBAAsB,EAAE,CAAC;QAE9C,CAAC,KAAK,IAAI,EAAE;YACV,IAAI,CAAC;gBACH,MAAM,YAAY,CAAC,GAAG,CAAgC,GAAG,EAAE;oBACzD,IAAI,EAAE,cAAc;oBACpB,WAAW,EAAE,GAAG;oBAChB,KAAK,EAAE,KAAK;iBACN,CAAC,CAAC,CAAE,6DAA6D;YAC3E,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,uCAAuC,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;YAClE,CAAC;QACH,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAE7B,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC"}

package/dist/esm/src/react/useToolBinding.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useToolBinding Hook
+ * Auto-wires DOM elements to @Tool decorators based on data-testid
+ *
+ * Simplified version - tools receive raw events and handle their own logic
+ */
+export declare function useToolBinding(containerRef: React.RefObject<HTMLElement>, containerTestId: string, instanceId?: string): void;
+//# sourceMappingURL=useToolBinding.d.ts.map

package/dist/esm/src/react/useToolBinding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolBinding.d.ts","sourceRoot":"","sources":["../../../../src/react/useToolBinding.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,wBAAgB,cAAc,CAC5B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAC1C,eAAe,EAAE,MAAM,EACvB,UAAU,CAAC,EAAE,MAAM,GAClB,IAAI,CA2GN"}

package/dist/esm/src/react/useToolBinding.js

@@ -0,0 +1,107 @@
+/**
+ * useToolBinding Hook
+ * Auto-wires DOM elements to @Tool decorators based on data-testid
+ *
+ * Simplified version - tools receive raw events and handle their own logic
+ */
+import { useEffect } from 'react';
+import { ToolRegistry } from '../background/registry/ToolRegistry.js';
+export function useToolBinding(containerRef, containerTestId, instanceId) {
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const storageKey = instanceId ? `${containerTestId}:${instanceId}` : containerTestId;
+        // 1. Register instance for duplicate detection
+        try {
+            ToolRegistry.registerInstance(storageKey, containerRef.current);
+        }
+        catch (error) {
+            console.error(`[useToolBinding] Instance already exists: ${storageKey}`, error);
+            return; // Don't wire up duplicate instances
+        }
+        // 2. Find all elements with data-testid within container (and the container itself)
+        const elements = [];
+        // Check if container itself has data-testid
+        if (containerRef.current.hasAttribute('data-testid')) {
+            elements.push(containerRef.current);
+        }
+        // Find children with data-testid
+        const childElements = containerRef.current.querySelectorAll('[data-testid]');
+        elements.push(...Array.from(childElements));
+        const handlers = [];
+        elements.forEach((element) => {
+            const testId = element.getAttribute('data-testid');
+            if (!testId)
+                return;
+            // 3. Find matching tool from registry
+            const tool = ToolRegistry.findToolByElementId(testId);
+            if (!tool || !tool.method) {
+                console.warn(`[useToolBinding] Tool not found or has no method for elementId: ${testId}`);
+                return;
+            }
+            // Note: instance may not be set yet (lazy initialization)
+            // We'll check for it when the event fires
+            // 4. Create handler that extracts values from events and calls tool
+            const handler = async (event) => {
+                if (!tool.method || !tool.instance) {
+                    console.warn(`[useToolBinding] Tool ${tool.name} missing method or instance`);
+                    return;
+                }
+                // Extract value from event based on element type
+                let value;
+                const target = event.target;
+                if (target instanceof HTMLInputElement) {
+                    if (target.type === 'checkbox') {
+                        value = target.checked;
+                    }
+                    else if (target.type === 'radio') {
+                        value = target.value;
+                    }
+                    else {
+                        value = target.value;
+                    }
+                }
+                else if (target instanceof HTMLSelectElement) {
+                    value = target.value;
+                }
+                else if (target instanceof HTMLTextAreaElement) {
+                    value = target.value;
+                }
+                // For buttons and other elements, no value needed (void call)
+                const options = {
+                // Storage will be added in next step
+                // For now, tools get extracted value
+                };
+                try {
+                    // Call the actual decorated method with extracted value
+                    const result = value !== undefined
+                        ? await tool.method.call(tool.instance, value, options)
+                        : await tool.method.call(tool.instance, options);
+                    console.log(`[useToolBinding] Tool ${tool.name} executed successfully`, result);
+                }
+                catch (error) {
+                    console.error(`[useToolBinding] Tool execution failed: ${tool.name}`, error);
+                }
+            };
+            // 5. Wire up with appropriate event type
+            // Use tool's actionType if specified, otherwise infer from element
+            let eventType = tool.actionType || 'click';
+            if (!tool.actionType) {
+                if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+                    eventType = 'change';
+                }
+            }
+            console.log(`[useToolBinding] Wiring ${testId} with event: ${eventType}`);
+            element.addEventListener(eventType, handler);
+            handlers.push({ element, event: eventType, handler });
+        });
+        // 6. Cleanup
+        return () => {
+            handlers.forEach(({ element, event, handler }) => {
+                element.removeEventListener(event, handler);
+            });
+            ToolRegistry.unregisterInstance(storageKey);
+        };
+    }, [containerRef, containerTestId, instanceId]);
+}
+//# sourceMappingURL=useToolBinding.js.map

package/dist/esm/src/react/useToolBinding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToolBinding.js","sourceRoot":"","sources":["../../../../src/react/useToolBinding.ts"],"names":[],"mappings":"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"}