@supernal/interface-nextjs 0.1.1

package/dist/index.mjs

@@ -0,0 +1,892 @@
+"use client";
+
+// src/contexts/ChatInputContext.tsx
+import { createContext, useContext, useCallback, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var ChatInputContext = createContext(null);
+function useChatInput() {
+  const context = useContext(ChatInputContext);
+  if (!context) {
+    throw new Error("useChatInput must be used within a ChatInputProvider");
+  }
+  return context;
+}
+function ChatInputProvider({ children }) {
+  const inputCallbackRef = useRef(null);
+  const registerInput = useCallback((callback) => {
+    inputCallbackRef.current = callback;
+  }, []);
+  const insertText = useCallback((text, submit = false) => {
+    if (inputCallbackRef.current) {
+      inputCallbackRef.current(text, submit);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(ChatInputContext.Provider, { value: { insertText, registerInput }, children });
+}
+
+// src/contexts/ChatProvider.tsx
+import { createContext as createContext2, useContext as useContext2, useState, useCallback as useCallback2, useEffect } from "react";
+
+// src/lib/ChatAIInterface.ts
+import {
+  AIInterface
+} from "@supernal/interface";
+
+// src/lib/ToolManager.ts
+import { setDefaultToolReporter, setGlobalToolReporter } from "@supernal/interface/browser";
+var ToolManagerClass = class {
+  constructor() {
+    this.listeners = [];
+    this.lastReport = null;
+    setGlobalToolReporter({
+      reportExecution: (result) => {
+        this.reportExecution({
+          toolName: result.toolName,
+          elementId: result.elementId,
+          actionType: result.actionType,
+          success: result.success,
+          message: result.message,
+          data: result.data
+        });
+      }
+    });
+    setDefaultToolReporter((result) => {
+      this.reportExecution({
+        toolName: "Tool",
+        success: result.success,
+        message: result.message || (result.error ? result.error.message : "Tool executed"),
+        data: result.data,
+        error: result.error
+      });
+    });
+  }
+  /**
+   * Subscribe to tool execution results
+   */
+  subscribe(listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+  /**
+   * Tools call this to report execution results (auto-called by HOCs)
+   */
+  reportExecution(result) {
+    const fullResult = {
+      ...result,
+      timestamp: result.timestamp || (/* @__PURE__ */ new Date()).toISOString()
+    };
+    this.lastReport = fullResult;
+    this.listeners.forEach((listener) => {
+      try {
+        listener(fullResult);
+      } catch {
+      }
+    });
+  }
+  /**
+   * Get the last reported tool execution (for AIInterface)
+   */
+  getLastReport() {
+    return this.lastReport;
+  }
+  /**
+   * Clear the last report
+   */
+  clearLastReport() {
+    this.lastReport = null;
+  }
+  /**
+   * Helper to create a success result (for custom messages)
+   */
+  success(toolName, message, data) {
+    return {
+      toolName,
+      success: true,
+      message,
+      data,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }
+  /**
+   * Helper to create a failure result (for custom messages)
+   */
+  failure(toolName, message, data) {
+    return {
+      toolName,
+      success: false,
+      message,
+      data,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }
+};
+var ToolManager = new ToolManagerClass();
+
+// src/lib/ChatAIInterface.ts
+var DemoAIInterface = class extends AIInterface {
+  constructor() {
+    super();
+    this.toolExecutionListeners = [];
+    ToolManager.subscribe((result) => {
+      this.notifyToolExecutionListeners(result);
+    });
+  }
+  /**
+   * Subscribe to tool execution results (for chat UI)
+   */
+  onToolExecution(callback) {
+    this.toolExecutionListeners.push(callback);
+    return () => {
+      this.toolExecutionListeners = this.toolExecutionListeners.filter((cb) => cb !== callback);
+    };
+  }
+  /**
+   * Notify all listeners about tool execution
+   */
+  notifyToolExecutionListeners(result) {
+    this.toolExecutionListeners.forEach((listener) => {
+      try {
+        listener(result);
+      } catch (error) {
+        console.error("Error in tool execution listener:", error);
+      }
+    });
+  }
+  /**
+   * Find and execute command - backward compatible wrapper
+   *
+   * Convenience method that combines findToolsForCommand and executeCommand
+   */
+  async findAndExecuteCommand(query, _currentContainer) {
+    const response = await this.processQuery(query);
+    return {
+      success: response.success,
+      message: response.message,
+      tool: response.executedTool
+    };
+  }
+};
+
+// src/contexts/ChatProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChatContext = createContext2(null);
+function useChatContext() {
+  const context = useContext2(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within ChatProvider");
+  }
+  return context;
+}
+var STORAGE_KEY = "supernal-chat-messages";
+var MAX_MESSAGES = 100;
+function getInitialMessages() {
+  return [
+    {
+      id: "1",
+      text: "\u{1F44B} Welcome to @supernal-interface Demo!",
+      type: "system",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    },
+    {
+      id: "2",
+      text: "This is NOT real AI - it's a demo showing how AI would interact with @Tool decorated methods.",
+      type: "system",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    },
+    {
+      id: "3",
+      text: '\u{1F3AE} Try these commands:\n\u2022 "open menu" or "close menu"\n\u2022 "toggle notifications"\n\u2022 "set priority high"',
+      type: "system",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    },
+    {
+      id: "4",
+      text: '\u{1F5FA}\uFE0F  Navigate pages:\n\u2022 "architecture" or "dashboard"\n\u2022 "demo" or "home"\n\u2022 "docs" or "examples"',
+      type: "system",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    },
+    {
+      id: "5",
+      text: "\u{1F4AC} Your chat history persists across pages and refreshes!",
+      type: "system",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    },
+    {
+      id: "6",
+      text: "\u{1F4BE} Advanced Demo: Uses StateManager with localStorage - your widget state persists too!",
+      type: "system",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    }
+  ];
+}
+function ChatProvider({
+  children,
+  mode = "fuzzy",
+  apiKey,
+  onToolExecute
+}) {
+  const [messages, setMessages] = useState([]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const saved = localStorage.getItem(STORAGE_KEY);
+      if (saved) {
+        const loaded = JSON.parse(saved).map((m) => ({
+          ...m,
+          timestamp: new Date(m.timestamp).toISOString()
+        }));
+        setMessages(loaded);
+      } else {
+        setMessages(getInitialMessages());
+      }
+    } catch (error) {
+      console.error("Failed to load messages:", error);
+      setMessages(getInitialMessages());
+    }
+  }, []);
+  const [isLoading, setIsLoading] = useState(false);
+  const [aiInterface] = useState(() => new DemoAIInterface());
+  useEffect(() => {
+    if (onToolExecute) {
+      return aiInterface.onToolExecution((result) => {
+        onToolExecute(result.toolName, result);
+      });
+    }
+  }, [aiInterface, onToolExecute]);
+  useEffect(() => {
+    try {
+      const toSave = messages.slice(-MAX_MESSAGES);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
+    } catch (error) {
+      console.error("Failed to save messages:", error);
+    }
+  }, [messages]);
+  const sendMessage = useCallback2(async (text) => {
+    const userMessage = {
+      id: Date.now().toString(),
+      text,
+      type: "user",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    setIsLoading(true);
+    try {
+      const result = await aiInterface.findAndExecuteCommand(text);
+      const aiMessage = {
+        id: (Date.now() + 1).toString(),
+        text: result.message,
+        type: result.success ? "ai" : "system",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, aiMessage]);
+    } catch (error) {
+      const errorMessage = {
+        id: (Date.now() + 1).toString(),
+        text: `Error: ${error instanceof Error ? error.message : "Unknown error"}`,
+        type: "system",
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      setMessages((prev) => [...prev, errorMessage]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [aiInterface]);
+  const clearMessages = useCallback2(() => {
+    setMessages([]);
+    localStorage.removeItem(STORAGE_KEY);
+  }, []);
+  return /* @__PURE__ */ jsx2(ChatContext.Provider, { value: { messages, sendMessage, clearMessages, isLoading }, children });
+}
+
+// src/components/ChatBubble.tsx
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ChatNames = {
+  bubble: "chat-bubble",
+  input: "chat-input",
+  sendButton: "chat-send-button",
+  clearButton: "chat-clear-button",
+  messages: "chat-messages"
+};
+var CHAT_EXPANDED_KEY = "supernal-chat-expanded";
+var ChatBubble = ({
+  theme = "auto",
+  position = "bottom-right",
+  welcomeMessage
+}) => {
+  const { messages, sendMessage, clearMessages } = useChatContext();
+  const [isExpanded, setIsExpanded] = useState2(false);
+  const [inputValue, setInputValue] = useState2("");
+  const [lastReadMessageCount, setLastReadMessageCount] = useState2(0);
+  const [showWelcome, setShowWelcome] = useState2(true);
+  const [isClient, setIsClient] = useState2(false);
+  const messagesEndRef = useRef2(null);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    setIsClient(true);
+    if (messages.length > 0) {
+      setShowWelcome(false);
+    }
+  }, [messages.length]);
+  useEffect2(() => {
+    try {
+      const stored = localStorage.getItem(CHAT_EXPANDED_KEY);
+      if (stored !== null) {
+        setIsExpanded(JSON.parse(stored));
+      }
+    } catch {
+    }
+  }, []);
+  const { registerInput } = useChatInput();
+  useEffect2(() => {
+    registerInput((text, submit = false) => {
+      setInputValue(text);
+      if (!isExpanded) {
+        setIsExpanded(true);
+      }
+      setTimeout(() => {
+        inputRef.current?.focus();
+        if (submit) {
+          sendMessage(text);
+          setInputValue("");
+        }
+      }, 100);
+    });
+  }, [registerInput, sendMessage, isExpanded]);
+  const unreadCount = Math.max(0, messages.length - lastReadMessageCount);
+  const hasUnread = unreadCount > 0 && !isExpanded;
+  useEffect2(() => {
+    if (isExpanded) {
+      messagesEndRef.current?.scrollIntoView({ behavior: "auto" });
+      setLastReadMessageCount(messages.length);
+      if (messages.length > 0) {
+        setShowWelcome(false);
+      }
+      inputRef.current?.focus();
+    }
+  }, [messages, isExpanded]);
+  useEffect2(() => {
+    if (isExpanded) {
+      inputRef.current?.focus();
+    }
+  }, [isExpanded]);
+  useEffect2(() => {
+    const handleKeyDown = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "/") {
+        e.preventDefault();
+        if (!isExpanded) {
+          setIsExpanded(true);
+        }
+        inputRef.current?.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isExpanded]);
+  const handleSend = (e) => {
+    e.preventDefault();
+    if (!inputValue.trim()) return;
+    sendMessage(inputValue.trim());
+    setInputValue("");
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+  const handleToggle = () => {
+    const newExpandedState = !isExpanded;
+    setIsExpanded(newExpandedState);
+    try {
+      localStorage.setItem(CHAT_EXPANDED_KEY, JSON.stringify(newExpandedState));
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-[9999]", children: [
+    isExpanded && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-16 right-0 w-[calc(100vw-2rem)] sm:w-[500px] lg:w-[600px] h-[calc(100vh-10rem)] sm:h-[min(600px,calc(100vh-6rem))] lg:h-[min(700px,calc(100vh-6rem))] bg-white rounded-lg shadow-2xl border border-gray-200 flex flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 sm:p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-purple-50 rounded-t-lg", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 sm:space-x-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx3("div", { className: "w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx3("span", { className: "text-white text-base sm:text-lg", children: "\u{1F916}" }) }),
+            /* @__PURE__ */ jsx3("div", { className: "absolute -bottom-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 bg-green-500 rounded-full border-2 border-white" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx3("h3", { className: "font-bold text-gray-900 text-sm sm:text-base", children: "Supernal Intelligence Interface" }),
+            /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-600 hidden sm:block", children: "I'm a TOOL system AI can use to control this site" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: clearMessages,
+              className: "p-1 text-gray-400 hover:text-gray-600 transition-colors",
+              title: "Clear chat",
+              "data-testid": ChatNames.clearButton,
+              children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              onClick: handleToggle,
+              className: "p-1 text-gray-400 hover:text-gray-600 transition-colors",
+              title: "Minimize chat",
+              children: /* @__PURE__ */ jsx3("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-3 sm:p-4 space-y-3", "data-testid": ChatNames.messages, children: [
+        showWelcome && messages.length === 0 && /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-blue-50 to-purple-50 p-3 sm:p-4 rounded-lg border border-blue-200 mb-4", children: [
+          /* @__PURE__ */ jsx3("h4", { className: "font-bold text-gray-900 mb-2 text-xs sm:text-sm", children: "\u{1F44B} Welcome! I'm NOT an AI" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-700 mb-3", children: [
+            "I'm a ",
+            /* @__PURE__ */ jsx3("strong", { children: "tool system" }),
+            " that AI assistants (like Claude, GPT) can use to navigate and control this site. This enables ",
+            /* @__PURE__ */ jsx3("strong", { children: "agentic UX" }),
+            " \u2014 instead of clicking around, you tell an AI what you want, and it uses me to do it."
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "bg-white p-2 sm:p-3 rounded border border-gray-200 mb-3", children: [
+            /* @__PURE__ */ jsx3("p", { className: "text-xs font-medium text-gray-900 mb-2", children: "Try these commands:" }),
+            /* @__PURE__ */ jsx3("div", { className: "space-y-1", children: [
+              { text: "open the docs", desc: "Navigate to documentation" },
+              { text: "show me the story system", desc: "View story system guide" },
+              { text: "go to examples", desc: "Browse code examples" }
+            ].map((cmd) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => {
+                  setInputValue(cmd.text);
+                  setShowWelcome(false);
+                  setTimeout(() => inputRef.current?.focus(), 0);
+                },
+                className: "w-full text-left px-2 py-1.5 rounded hover:bg-blue-50 transition-colors group",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "text-xs font-mono text-blue-700 group-hover:text-blue-900", children: [
+                    '"',
+                    cmd.text,
+                    '"'
+                  ] }),
+                  /* @__PURE__ */ jsx3("div", { className: "text-xs text-gray-500 hidden sm:block", children: cmd.desc })
+                ]
+              },
+              cmd.text
+            )) })
+          ] }),
+          /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-600 italic", children: "Type a command or click a suggestion above to start" })
+        ] }),
+        messages.map((message) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: `inline-block px-3 py-2 rounded-lg max-w-[85%] sm:max-w-xs text-xs sm:text-sm ${message.type === "user" ? "bg-blue-600 text-white ml-auto" : message.type === "ai" ? "bg-gray-200 text-gray-800" : "bg-yellow-100 text-yellow-800 text-xs"}`,
+              "data-testid": `chat-message-${message.type}`,
+              children: message.text
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { className: "text-xs text-gray-400 mt-1 px-1", children: new Date(message.timestamp).toLocaleTimeString() })
+        ] }, message.id)),
+        /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleSend, className: "p-3 sm:p-4 border-t border-gray-200", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              placeholder: "Try: toggle notifications",
+              className: "flex-1 px-3 py-2 text-xs sm:text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800",
+              "data-testid": ChatNames.input
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "submit",
+              disabled: !inputValue.trim(),
+              className: "px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors text-xs sm:text-sm font-medium",
+              "data-testid": ChatNames.sendButton,
+              children: "Execute"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs text-gray-500 hidden sm:block", children: [
+          /* @__PURE__ */ jsx3("strong", { children: "Demo:" }),
+          " Commands execute @Tool methods and update widgets above"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        onClick: handleToggle,
+        className: "absolute bottom-0 right-0 w-12 h-12 sm:w-14 sm:h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all duration-200 flex items-center justify-center",
+        "data-testid": ChatNames.bubble,
+        title: isExpanded ? "Minimize chat" : "Open AI chat",
+        children: isExpanded ? /* @__PURE__ */ jsx3("svg", { className: "w-5 h-5 sm:w-6 sm:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) : /* @__PURE__ */ jsx3("svg", { className: "w-5 h-5 sm:w-6 sm:h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) })
+      }
+    ),
+    hasUnread && /* @__PURE__ */ jsx3("div", { className: "absolute -top-1 -right-1 w-4 h-4 sm:w-5 sm:h-5 bg-red-500 rounded-full flex items-center justify-center animate-pulse", "data-testid": "unread-indicator", children: /* @__PURE__ */ jsx3("span", { className: "text-xs text-white font-bold", children: unreadCount > 9 ? "9+" : unreadCount }) })
+  ] }) });
+};
+
+// src/components/AutoNavigationContext.tsx
+import { useEffect as useEffect4, useState as useState4 } from "react";
+
+// src/hooks/useNavigationGraph.tsx
+import { useEffect as useEffect3, useState as useState3, useCallback as useCallback3, createContext as createContext3, useContext as useContext3 } from "react";
+import {
+  NavigationGraph
+} from "@supernal/interface/browser";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var NavigationContextContext = createContext3("global");
+function NavigationContextProvider({
+  value,
+  children
+}) {
+  const graph = useNavigationGraph();
+  useEffect3(() => {
+    graph.setCurrentContext(value);
+  }, [value, graph]);
+  return /* @__PURE__ */ jsx4(NavigationContextContext.Provider, { value, children });
+}
+function useNavigationGraph() {
+  return NavigationGraph.getInstance();
+}
+function useCurrentContext() {
+  const contextFromProvider = useContext3(NavigationContextContext);
+  const graph = useNavigationGraph();
+  const [graphContext, setGraphContext] = useState3("");
+  useEffect3(() => {
+    const interval = setInterval(() => {
+      const current = graph.getCurrentContext?.() || "";
+      if (current !== graphContext) {
+        setGraphContext(current);
+      }
+    }, 100);
+    return () => clearInterval(interval);
+  }, [graph, graphContext]);
+  return contextFromProvider !== "global" ? contextFromProvider : graphContext;
+}
+function useRegisterTool(toolId, contextId, metadata) {
+  const graph = useNavigationGraph();
+  const currentContext = useCurrentContext();
+  useEffect3(() => {
+    let targetContext = contextId || currentContext;
+    if (!contextId && metadata) {
+      const detection = graph.detectToolContext?.(toolId, metadata);
+      if (detection && detection.confidence > 0.5) {
+        targetContext = detection.contextId;
+      }
+    }
+    graph.registerToolInContext(toolId, targetContext);
+  }, [toolId, contextId, currentContext, metadata, graph]);
+}
+function useNavigationPath(targetContextOrToolId, isToolId = false) {
+  const graph = useNavigationGraph();
+  const currentContext = useCurrentContext();
+  const [path, setPath] = useState3(null);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3();
+  useEffect3(() => {
+    try {
+      let targetContext = targetContextOrToolId;
+      if (isToolId) {
+        const toolContext = graph.getToolContext?.(targetContextOrToolId);
+        if (!toolContext) {
+          setError(`Tool "${targetContextOrToolId}" not found in any context`);
+          setLoading(false);
+          return;
+        }
+        targetContext = toolContext;
+      }
+      const computedPath = graph.computePath?.(currentContext, targetContext);
+      setPath(computedPath);
+      setLoading(false);
+      if (!computedPath) {
+        setError(`No path from "${currentContext}" to "${targetContext}"`);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setLoading(false);
+    }
+  }, [targetContextOrToolId, isToolId, currentContext, graph]);
+  return { path, loading, error };
+}
+function useNavigate() {
+  const graph = useNavigationGraph();
+  const currentContext = useCurrentContext();
+  const [navigating, setNavigating] = useState3(false);
+  const [error, setError] = useState3();
+  const navigateTo = useCallback3(async (targetContextOrToolId, isToolId = false, executeNavigation) => {
+    setNavigating(true);
+    setError(void 0);
+    try {
+      let targetContext = targetContextOrToolId;
+      if (isToolId) {
+        const toolContext = graph.getToolContext?.(targetContextOrToolId);
+        if (!toolContext) {
+          throw new Error(`Tool "${targetContextOrToolId}" not found in any context`);
+        }
+        targetContext = toolContext;
+      }
+      if (currentContext === targetContext) {
+        setNavigating(false);
+        return true;
+      }
+      const path = graph.computePath?.(currentContext, targetContext);
+      if (!path) {
+        throw new Error(`No path from "${currentContext}" to "${targetContext}"`);
+      }
+      for (const step of path.steps) {
+        if (executeNavigation) {
+          await executeNavigation(step.navigationTool);
+        }
+        const changed = await graph.waitForContextChange?.(step.to, 3e3);
+        if (!changed) {
+          throw new Error(`Navigation to "${step.to}" failed - context did not change`);
+        }
+      }
+      setNavigating(false);
+      return true;
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      setError(errorMsg);
+      setNavigating(false);
+      return false;
+    }
+  }, [currentContext, graph]);
+  return { navigateTo, navigating, error };
+}
+function useAllContexts() {
+  const graph = useNavigationGraph();
+  const [contexts, setContexts] = useState3(graph.getAllContexts?.());
+  useEffect3(() => {
+    const interval = setInterval(() => {
+      setContexts(graph.getAllContexts?.());
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [graph]);
+  return contexts;
+}
+
+// src/components/AutoNavigationContext.tsx
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+function AutoNavigationContext({
+  children,
+  routes,
+  onNavigate
+}) {
+  const [pathname, setPathname] = useState4("/");
+  useEffect4(() => {
+    if (typeof window !== "undefined") {
+      setPathname(window.location.pathname);
+    }
+  }, []);
+  const context = routes ? inferContextFromPath(pathname, routes) : null;
+  useEffect4(() => {
+    if (onNavigate && context) {
+      onNavigate(context);
+    }
+  }, [context, onNavigate]);
+  if (!context) {
+    return /* @__PURE__ */ jsx5(Fragment2, { children });
+  }
+  return /* @__PURE__ */ jsx5(NavigationContextProvider, { value: context, children });
+}
+function inferContextFromPath(path, customRoutes) {
+  if (customRoutes) {
+    for (const [name, routePath] of Object.entries(customRoutes)) {
+      if (path === routePath || path.startsWith(routePath + "/")) {
+        return name;
+      }
+    }
+  }
+  const patterns = {
+    "/": "home",
+    "/blog": "blog",
+    "/docs": "docs",
+    "/examples": "examples",
+    "/demo": "demo"
+  };
+  if (patterns[path]) return patterns[path];
+  const sortedPatterns = Object.entries(patterns).sort(
+    (a, b) => b[0].length - a[0].length
+  );
+  for (const [pattern, context] of sortedPatterns) {
+    if (path.startsWith(pattern) && pattern !== "/") {
+      return context;
+    }
+  }
+  return "global";
+}
+
+// src/components/SupernalProvider.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function SupernalProvider({
+  children,
+  theme = "auto",
+  position = "bottom-right",
+  mode = "fuzzy",
+  apiKey,
+  welcomeMessage,
+  routes,
+  disabled = false,
+  onNavigate,
+  onToolExecute
+}) {
+  const shouldRenderChatBubble = !disabled;
+  return /* @__PURE__ */ jsx6(ChatInputProvider, { children: /* @__PURE__ */ jsxs2(ChatProvider, { mode, apiKey, onToolExecute, children: [
+    /* @__PURE__ */ jsx6(AutoNavigationContext, { routes, onNavigate, children }),
+    shouldRenderChatBubble ? /* @__PURE__ */ jsx6(
+      ChatBubble,
+      {
+        theme,
+        position,
+        welcomeMessage
+      }
+    ) : null
+  ] }) });
+}
+
+// src/lib/FuzzyMatcher.ts
+var FuzzyMatcher = class {
+  /**
+   * Find item that best matches the query
+   */
+  static findBest(items, query, getSearchableText) {
+    const lowerQuery = query.toLowerCase().trim();
+    if (!lowerQuery) return null;
+    let match = items.find((item) => {
+      const texts = getSearchableText(item);
+      return texts.some((text) => text.toLowerCase() === lowerQuery);
+    });
+    if (match) return match;
+    match = items.find((item) => {
+      const texts = getSearchableText(item);
+      return texts.some((text) => text.toLowerCase().includes(lowerQuery));
+    });
+    if (match) return match;
+    const queryWords = lowerQuery.split(/\s+/);
+    match = items.find((item) => {
+      const texts = getSearchableText(item);
+      return texts.some((text) => {
+        const lowerText = text.toLowerCase();
+        return queryWords.some((word) => lowerText.includes(word));
+      });
+    });
+    return match || null;
+  }
+  /**
+   * Find all items that match the query (ranked by relevance)
+   */
+  static findAll(items, query, getSearchableText) {
+    const lowerQuery = query.toLowerCase().trim();
+    if (!lowerQuery) return [];
+    const scored = items.map((item) => {
+      const texts = getSearchableText(item);
+      let score = 0;
+      for (const text of texts) {
+        const lowerText = text.toLowerCase();
+        if (lowerText === lowerQuery) {
+          score += 100;
+        }
+        if (lowerText.startsWith(lowerQuery)) {
+          score += 50;
+        }
+        if (lowerText.includes(lowerQuery)) {
+          score += 25;
+        }
+        const queryWords = lowerQuery.split(/\s+/);
+        const matchedWords = queryWords.filter((word) => lowerText.includes(word));
+        score += matchedWords.length * 10;
+      }
+      return { item, score };
+    });
+    return scored.filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).map(({ item }) => item);
+  }
+};
+
+// src/lib/fuzzyMatchTools.ts
+function scoreToolMatch(query, tool) {
+  const lowerQuery = query.toLowerCase().trim();
+  let score = 0;
+  if (tool.examples && Array.isArray(tool.examples)) {
+    for (const example of tool.examples) {
+      if (example && typeof example === "string") {
+        const exampleLower = example.replace(/\{[^}]+\}/g, "").replace(/\s+/g, " ").trim().toLowerCase();
+        if (!exampleLower) {
+          continue;
+        }
+        const queryWords = lowerQuery.split(/\s+/);
+        const exampleWords = exampleLower.split(/\s+/);
+        if (exampleLower === lowerQuery) {
+          score += 20;
+        } else if (exampleLower.startsWith(lowerQuery + " ") || exampleLower.startsWith(lowerQuery)) {
+          score += 15;
+        } else if (queryWords.length > 1 && queryWords.every((qw) => exampleWords.includes(qw))) {
+          score += 12;
+        } else if (lowerQuery.length >= 4 && exampleWords.some((ew) => ew === lowerQuery)) {
+          score += 8;
+        } else if (lowerQuery.length >= 5 && (exampleLower.includes(lowerQuery) || lowerQuery.includes(exampleLower))) {
+          score += 3;
+        }
+      }
+    }
+  }
+  if (tool.description && typeof tool.description === "string") {
+    const descLower = tool.description.toLowerCase();
+    if (descLower.includes(lowerQuery) && lowerQuery.length >= 4) {
+      score += 2;
+    }
+  }
+  if (tool.methodName && typeof tool.methodName === "string") {
+    const methodLower = tool.methodName.toLowerCase();
+    const queryNoSpaces = lowerQuery.replace(/\s+/g, "");
+    if (methodLower === queryNoSpaces) {
+      score += 5;
+    } else if (methodLower.includes(queryNoSpaces) && queryNoSpaces.length >= 4) {
+      score += 2;
+    }
+  }
+  return score;
+}
+function findBestMatch(query, tools) {
+  let bestTool;
+  let bestScore = 0;
+  for (const tool of tools) {
+    const score = scoreToolMatch(query, tool);
+    if (score > bestScore) {
+      bestScore = score;
+      bestTool = tool;
+    }
+  }
+  return {
+    tool: bestTool,
+    score: bestScore,
+    confidence: bestScore > 0 ? Math.min(bestScore / 10, 1) : 0
+  };
+}
+export {
+  AutoNavigationContext,
+  ChatBubble,
+  ChatInputProvider,
+  ChatProvider,
+  DemoAIInterface,
+  FuzzyMatcher,
+  NavigationContextProvider,
+  SupernalProvider,
+  ToolManager,
+  findBestMatch,
+  scoreToolMatch,
+  useAllContexts,
+  useChatContext,
+  useChatInput,
+  useCurrentContext,
+  useNavigate,
+  useNavigationGraph,
+  useNavigationPath,
+  useRegisterTool
+};