@ai-me-chat/react 0.0.1

package/dist/index.js

@@ -0,0 +1,1349 @@
+"use client";
+
+// src/context.tsx
+import { createContext, useContext } from "react";
+var AIMeContext = createContext(null);
+function useAIMeContext() {
+  const ctx = useContext(AIMeContext);
+  if (!ctx) {
+    throw new Error("useAIMe must be used within an <AIMeProvider>");
+  }
+  return ctx;
+}
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+function AIMeProvider({ endpoint, headers, children }) {
+  return /* @__PURE__ */ jsx(AIMeContext, { value: { endpoint, headers }, children });
+}
+
+// src/chat.tsx
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useId } from "react";
+
+// src/use-ai-me.ts
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useState, useCallback, useEffect, useRef } from "react";
+var STORAGE_KEY = "ai-me-messages";
+function useAIMe() {
+  const { endpoint, headers } = useAIMeContext();
+  const [input, setInput] = useState("");
+  const initialized = useRef(false);
+  const chat = useChat({
+    transport: new DefaultChatTransport({
+      api: endpoint,
+      headers
+    })
+  });
+  useEffect(() => {
+    if (initialized.current) return;
+    initialized.current = true;
+    try {
+      const stored = sessionStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        if (Array.isArray(parsed) && parsed.length > 0) {
+          chat.setMessages(parsed);
+        }
+      }
+    } catch {
+    }
+  }, []);
+  useEffect(() => {
+    if (!initialized.current) return;
+    try {
+      if (chat.messages.length > 0) {
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(chat.messages));
+      } else {
+        sessionStorage.removeItem(STORAGE_KEY);
+      }
+    } catch {
+    }
+  }, [chat.messages]);
+  const handleInputChange = useCallback(
+    (e) => {
+      setInput(e.target.value);
+    },
+    []
+  );
+  const handleSubmit = useCallback(
+    (e) => {
+      e?.preventDefault();
+      if (!input.trim()) return;
+      chat.sendMessage({ text: input });
+      setInput("");
+    },
+    [input, chat]
+  );
+  const clearMessages = useCallback(() => {
+    chat.setMessages([]);
+    try {
+      sessionStorage.removeItem(STORAGE_KEY);
+    } catch {
+    }
+  }, [chat]);
+  return {
+    /** Conversation messages */
+    messages: chat.messages,
+    /** Current input value */
+    input,
+    /** Set input value */
+    setInput,
+    /** Handle input change */
+    handleInputChange,
+    /** Submit the current message */
+    handleSubmit,
+    /** Send a message directly */
+    sendMessage: chat.sendMessage,
+    /** Chat status: "ready" | "submitted" | "streaming" */
+    status: chat.status,
+    /** Error if any */
+    error: chat.error,
+    /** Stop streaming */
+    stop: chat.stop,
+    /** Set messages */
+    setMessages: chat.setMessages,
+    /** Clear all messages and session storage */
+    clearMessages
+  };
+}
+
+// src/styles.ts
+var defaultThemeVars = {
+  "--ai-me-primary": "#6366f1",
+  "--ai-me-primary-hover": "#4f46e5",
+  "--ai-me-bg": "#ffffff",
+  "--ai-me-bg-secondary": "#f9fafb",
+  "--ai-me-text": "#111827",
+  "--ai-me-text-secondary": "#6b7280",
+  "--ai-me-border": "#e5e7eb",
+  "--ai-me-radius": "12px",
+  "--ai-me-font": "system-ui, -apple-system, sans-serif",
+  "--ai-me-shadow": "0 4px 24px rgba(0, 0, 0, 0.12)"
+};
+function themeToVars(theme) {
+  if (!theme) return {};
+  const vars = {};
+  if (theme.primaryColor) vars["--ai-me-primary"] = theme.primaryColor;
+  if (theme.backgroundColor) vars["--ai-me-bg"] = theme.backgroundColor;
+  if (theme.textColor) vars["--ai-me-text"] = theme.textColor;
+  if (theme.borderRadius) vars["--ai-me-radius"] = theme.borderRadius;
+  if (theme.fontFamily) vars["--ai-me-font"] = theme.fontFamily;
+  return vars;
+}
+
+// src/markdown.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function renderMarkdown(text) {
+  const lines = text.split("\n");
+  const result = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.trimStart().startsWith("```")) {
+      const lang = line.trimStart().slice(3).trim();
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].trimStart().startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++;
+      result.push(
+        /* @__PURE__ */ jsx2(
+          "pre",
+          {
+            style: codeBlockStyle,
+            "data-lang": lang || void 0,
+            children: /* @__PURE__ */ jsx2("code", { children: codeLines.join("\n") })
+          },
+          `code-${result.length}`
+        )
+      );
+      continue;
+    }
+    if (/^[\s]*[-*]\s/.test(line)) {
+      const listItems = [];
+      while (i < lines.length && /^[\s]*[-*]\s/.test(lines[i])) {
+        listItems.push(
+          /* @__PURE__ */ jsx2("li", { style: { marginBottom: 2 }, children: renderInline(lines[i].replace(/^[\s]*[-*]\s/, "")) }, listItems.length)
+        );
+        i++;
+      }
+      result.push(
+        /* @__PURE__ */ jsx2(
+          "ul",
+          {
+            style: { margin: "4px 0", paddingLeft: 20, listStyleType: "disc" },
+            children: listItems
+          },
+          `ul-${result.length}`
+        )
+      );
+      continue;
+    }
+    if (/^[\s]*\d+\.\s/.test(line)) {
+      const listItems = [];
+      while (i < lines.length && /^[\s]*\d+\.\s/.test(lines[i])) {
+        listItems.push(
+          /* @__PURE__ */ jsx2("li", { style: { marginBottom: 2 }, children: renderInline(lines[i].replace(/^[\s]*\d+\.\s/, "")) }, listItems.length)
+        );
+        i++;
+      }
+      result.push(
+        /* @__PURE__ */ jsx2(
+          "ol",
+          {
+            style: { margin: "4px 0", paddingLeft: 20 },
+            children: listItems
+          },
+          `ol-${result.length}`
+        )
+      );
+      continue;
+    }
+    const headingMatch = /^(#{1,6})\s+(.+)$/.exec(line);
+    if (headingMatch) {
+      const level = Math.max(headingMatch[1].length, 3);
+      const fontSize = { 3: 15, 4: 14, 5: 13, 6: 13 }[level] ?? 14;
+      result.push(
+        /* @__PURE__ */ jsx2(
+          "p",
+          {
+            style: { fontWeight: 600, fontSize, margin: "8px 0 4px" },
+            children: renderInline(headingMatch[2])
+          },
+          `h-${result.length}`
+        )
+      );
+      i++;
+      continue;
+    }
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+    result.push(
+      /* @__PURE__ */ jsx2(
+        "span",
+        {
+          style: { display: "block", marginBottom: 2 },
+          children: renderInline(line)
+        },
+        `p-${result.length}`
+      )
+    );
+    i++;
+  }
+  return result;
+}
+function renderInline(text) {
+  const result = [];
+  const pattern = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      result.push(text.slice(lastIndex, match.index));
+    }
+    const token = match[0];
+    if (token.startsWith("`")) {
+      result.push(
+        /* @__PURE__ */ jsx2("code", { style: inlineCodeStyle, children: token.slice(1, -1) }, result.length)
+      );
+    } else if (token.startsWith("**")) {
+      result.push(
+        /* @__PURE__ */ jsx2("strong", { children: token.slice(2, -2) }, result.length)
+      );
+    } else if (token.startsWith("*")) {
+      result.push(/* @__PURE__ */ jsx2("em", { children: token.slice(1, -1) }, result.length));
+    } else if (token.startsWith("[")) {
+      const linkMatch = /\[([^\]]+)\]\(([^)]+)\)/.exec(token);
+      if (linkMatch) {
+        result.push(
+          /* @__PURE__ */ jsx2(
+            "a",
+            {
+              href: linkMatch[2],
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: linkStyle,
+              children: linkMatch[1]
+            },
+            result.length
+          )
+        );
+      }
+    }
+    lastIndex = match.index + token.length;
+  }
+  if (lastIndex < text.length) {
+    result.push(text.slice(lastIndex));
+  }
+  return result;
+}
+var codeBlockStyle = {
+  margin: "6px 0",
+  padding: "10px 12px",
+  borderRadius: 6,
+  backgroundColor: "rgba(0,0,0,0.15)",
+  fontSize: 12,
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  overflow: "auto",
+  whiteSpace: "pre",
+  lineHeight: 1.5
+};
+var inlineCodeStyle = {
+  padding: "1px 5px",
+  borderRadius: 3,
+  backgroundColor: "rgba(0,0,0,0.12)",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  fontSize: "0.9em"
+};
+var linkStyle = {
+  color: "var(--ai-me-primary, #6366f1)",
+  textDecoration: "underline",
+  textUnderlineOffset: "2px"
+};
+
+// src/chat.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var srOnly = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+};
+function AIMeChat({
+  position = "bottom-right",
+  theme,
+  welcomeMessage = "Hi! I can help you navigate and use this app. What would you like to do?",
+  suggestedPrompts,
+  defaultOpen = false,
+  onToggle
+}) {
+  const [open, setOpen] = useState2(defaultOpen);
+  const messagesEndRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const panelRef = useRef2(null);
+  const triggerRef = useRef2(null);
+  const {
+    messages,
+    input,
+    handleInputChange,
+    handleSubmit,
+    status,
+    error,
+    setInput
+  } = useAIMe();
+  const titleId = useId();
+  const messagesId = useId();
+  const isInline = position === "inline";
+  const toggleOpen = useCallback2(() => {
+    const next = !open;
+    setOpen(next);
+    onToggle?.(next);
+  }, [open, onToggle]);
+  useEffect2(() => {
+    function handleKeyDown(e) {
+      if ((e.metaKey || e.ctrlKey) && e.key === ".") {
+        e.preventDefault();
+        toggleOpen();
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleOpen]);
+  useEffect2(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  useEffect2(() => {
+    if (open) {
+      panelRef.current?.focus();
+      setTimeout(() => inputRef.current?.focus(), 0);
+    } else {
+      triggerRef.current?.focus();
+    }
+  }, [open]);
+  useEffect2(() => {
+    if (!open || isInline) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        toggleOpen();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = panel.querySelectorAll(
+        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, isInline, toggleOpen]);
+  const themeVars = {
+    ...defaultThemeVars,
+    ...themeToVars(theme)
+  };
+  const panelStyle = isInline ? {
+    ...themeVars,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: "var(--ai-me-font)",
+    color: "var(--ai-me-text)",
+    backgroundColor: "var(--ai-me-bg)",
+    borderRadius: "var(--ai-me-radius)",
+    border: "1px solid var(--ai-me-border)",
+    overflow: "hidden"
+  } : {
+    ...themeVars,
+    position: "fixed",
+    bottom: 24,
+    ...position === "bottom-right" ? { right: 24 } : { left: 24 },
+    width: 380,
+    maxHeight: "70vh",
+    display: open ? "flex" : "none",
+    flexDirection: "column",
+    fontFamily: "var(--ai-me-font)",
+    color: "var(--ai-me-text)",
+    backgroundColor: "var(--ai-me-bg)",
+    borderRadius: "var(--ai-me-radius)",
+    boxShadow: "var(--ai-me-shadow)",
+    border: "1px solid var(--ai-me-border)",
+    overflow: "hidden",
+    zIndex: 9999
+  };
+  const triggerStyle = {
+    ...themeVars,
+    position: "fixed",
+    bottom: 24,
+    ...position === "bottom-right" ? { right: 24 } : { left: 24 },
+    width: 56,
+    height: 56,
+    borderRadius: "50%",
+    backgroundColor: "var(--ai-me-primary)",
+    color: "#fff",
+    border: "none",
+    cursor: "pointer",
+    display: isInline || open ? "none" : "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxShadow: "var(--ai-me-shadow)",
+    fontSize: 24,
+    zIndex: 9999
+  };
+  const isStreaming = status === "submitted" || status === "streaming";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        ref: triggerRef,
+        onClick: toggleOpen,
+        style: triggerStyle,
+        "aria-label": "Open AI chat",
+        "aria-expanded": open,
+        "aria-controls": isInline ? void 0 : "ai-me-chat-panel",
+        type: "button",
+        children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u{1F4AC}" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: "ai-me-chat-panel",
+        ref: panelRef,
+        style: panelStyle,
+        role: "dialog",
+        "aria-modal": isInline ? void 0 : "true",
+        "aria-labelledby": titleId,
+        "aria-busy": isStreaming,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                padding: "12px 16px",
+                borderBottom: "1px solid var(--ai-me-border)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                backgroundColor: "var(--ai-me-bg-secondary)"
+              },
+              children: [
+                /* @__PURE__ */ jsx3("span", { id: titleId, style: { fontWeight: 600, fontSize: 14 }, children: "AI Assistant" }),
+                !isInline && /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    onClick: toggleOpen,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      fontSize: 18,
+                      color: "var(--ai-me-text-secondary)",
+                      padding: 4,
+                      borderRadius: 4,
+                      // Visible focus indicator without outline:none
+                      outline: "2px solid transparent",
+                      outlineOffset: 2
+                    },
+                    onFocus: (e) => {
+                      e.currentTarget.style.outline = "2px solid var(--ai-me-primary)";
+                    },
+                    onBlur: (e) => {
+                      e.currentTarget.style.outline = "2px solid transparent";
+                    },
+                    "aria-label": "Close chat",
+                    type: "button",
+                    children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2715" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "a",
+            {
+              href: "#ai-me-chat-input",
+              style: {
+                ...srOnly
+                // Reveal on focus so keyboard users can see it
+              },
+              onFocus: (e) => {
+                Object.assign(e.currentTarget.style, {
+                  position: "static",
+                  width: "auto",
+                  height: "auto",
+                  padding: "4px 8px",
+                  margin: 0,
+                  overflow: "visible",
+                  clip: "auto",
+                  whiteSpace: "normal",
+                  backgroundColor: "var(--ai-me-primary)",
+                  color: "#fff",
+                  fontSize: 12,
+                  borderRadius: 4
+                });
+              },
+              onBlur: (e) => {
+                Object.assign(e.currentTarget.style, srOnly);
+              },
+              children: "Skip to message input"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: messagesId,
+              "aria-live": "polite",
+              "aria-label": "Conversation",
+              "aria-relevant": "additions",
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: 16,
+                display: "flex",
+                flexDirection: "column",
+                gap: 12
+              },
+              children: [
+                messages.length === 0 && /* @__PURE__ */ jsxs("div", { style: { color: "var(--ai-me-text-secondary)", fontSize: 14 }, children: [
+                  /* @__PURE__ */ jsx3("p", { children: welcomeMessage }),
+                  suggestedPrompts && suggestedPrompts.length > 0 && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        marginTop: 12,
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 8
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3("p", { style: { margin: "0 0 4px", fontSize: 12, fontWeight: 500 }, children: "Suggested questions:" }),
+                        suggestedPrompts.map((prompt) => /* @__PURE__ */ jsx3(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => {
+                              setInput(prompt);
+                              inputRef.current?.focus();
+                            },
+                            style: {
+                              padding: "8px 12px",
+                              border: "1px solid var(--ai-me-border)",
+                              borderRadius: 8,
+                              background: "var(--ai-me-bg)",
+                              cursor: "pointer",
+                              textAlign: "left",
+                              fontSize: 13,
+                              color: "var(--ai-me-text)",
+                              outline: "2px solid transparent",
+                              outlineOffset: 2
+                            },
+                            onFocus: (e) => {
+                              e.currentTarget.style.outline = "2px solid var(--ai-me-primary)";
+                            },
+                            onBlur: (e) => {
+                              e.currentTarget.style.outline = "2px solid transparent";
+                            },
+                            children: prompt
+                          },
+                          prompt
+                        ))
+                      ]
+                    }
+                  )
+                ] }),
+                messages.map((m) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      alignSelf: m.role === "user" ? "flex-end" : "flex-start",
+                      maxWidth: "85%",
+                      padding: "8px 12px",
+                      borderRadius: 8,
+                      backgroundColor: m.role === "user" ? "var(--ai-me-primary)" : "var(--ai-me-bg-secondary)",
+                      color: m.role === "user" ? "#fff" : "var(--ai-me-text)",
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx3("span", { style: srOnly, children: m.role === "user" ? "You: " : "Assistant: " }),
+                      m.parts.map(
+                        (p, i) => p.type === "text" ? /* @__PURE__ */ jsx3("span", { children: m.role === "assistant" ? renderMarkdown(p.text) : p.text }, i) : null
+                      )
+                    ]
+                  },
+                  m.id
+                )),
+                status === "submitted" && /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    "aria-label": "Assistant is thinking",
+                    style: {
+                      alignSelf: "flex-start",
+                      color: "var(--ai-me-text-secondary)",
+                      fontSize: 13
+                    },
+                    children: /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "Thinking\u2026" })
+                  }
+                ),
+                error && /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    role: "alert",
+                    style: {
+                      padding: "8px 12px",
+                      borderRadius: 8,
+                      backgroundColor: "#fef2f2",
+                      // #dc2626 on #fef2f2 ≈ 5.1:1 — passes AA for normal text
+                      color: "#dc2626",
+                      fontSize: 13,
+                      border: "1px solid #fca5a5"
+                    },
+                    children: "Something went wrong. Please try again."
+                  }
+                ),
+                /* @__PURE__ */ jsx3("div", { ref: messagesEndRef, "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "form",
+            {
+              onSubmit: handleSubmit,
+              style: {
+                padding: "12px 16px",
+                borderTop: "1px solid var(--ai-me-border)",
+                display: "flex",
+                gap: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx3(
+                  "label",
+                  {
+                    htmlFor: "ai-me-chat-input",
+                    style: srOnly,
+                    children: "Message to AI Assistant"
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    id: "ai-me-chat-input",
+                    ref: inputRef,
+                    value: input,
+                    onChange: handleInputChange,
+                    placeholder: "Ask anything\u2026",
+                    disabled: status !== "ready",
+                    "aria-disabled": status !== "ready",
+                    style: {
+                      flex: 1,
+                      padding: "8px 12px",
+                      border: "1px solid var(--ai-me-border)",
+                      borderRadius: 8,
+                      fontSize: 14,
+                      fontFamily: "var(--ai-me-font)",
+                      // Do NOT use outline:none — use outline with transparent color + focus handler
+                      outline: "2px solid transparent",
+                      outlineOffset: 2,
+                      backgroundColor: "var(--ai-me-bg)",
+                      color: "var(--ai-me-text)"
+                    },
+                    onFocus: (e) => {
+                      e.currentTarget.style.outline = "2px solid var(--ai-me-primary)";
+                    },
+                    onBlur: (e) => {
+                      e.currentTarget.style.outline = "2px solid transparent";
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: status !== "ready" || !input.trim(),
+                    "aria-disabled": status !== "ready" || !input.trim(),
+                    style: {
+                      padding: "8px 16px",
+                      backgroundColor: "var(--ai-me-primary)",
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: 8,
+                      cursor: status === "ready" && input.trim() ? "pointer" : "not-allowed",
+                      fontSize: 14,
+                      fontFamily: "var(--ai-me-font)",
+                      opacity: status === "ready" && input.trim() ? 1 : 0.5,
+                      outline: "2px solid transparent",
+                      outlineOffset: 2
+                    },
+                    onFocus: (e) => {
+                      e.currentTarget.style.outline = "2px solid var(--ai-me-primary)";
+                      e.currentTarget.style.outlineOffset = "2px";
+                    },
+                    onBlur: (e) => {
+                      e.currentTarget.style.outline = "2px solid transparent";
+                    },
+                    "aria-label": "Send message",
+                    children: "Send"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/command-palette.tsx
+import { useState as useState3, useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3, useId as useId2 } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultCommands = [
+  {
+    id: "help",
+    label: "Ask AI for help",
+    description: "Get assistance with any task",
+    category: "AI",
+    icon: "\u{1F4A1}",
+    action: "What can you help me with?"
+  },
+  {
+    id: "list-actions",
+    label: "List available actions",
+    description: "Show all API actions the AI can perform",
+    category: "AI",
+    icon: "\u{1F4CB}",
+    action: "What actions can you perform? List them all."
+  },
+  {
+    id: "recent-activity",
+    label: "Show recent activity",
+    description: "Summarize recent actions and changes",
+    category: "AI",
+    icon: "\u{1F550}",
+    action: "What has happened recently? Summarize recent activity."
+  }
+];
+var srOnly2 = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+};
+function AIMeCommandPalette({
+  commands = defaultCommands,
+  theme,
+  shortcut = { key: "k", meta: true },
+  onToggle
+}) {
+  const [open, setOpen] = useState3(false);
+  const [query, setQuery] = useState3("");
+  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const inputRef = useRef3(null);
+  const listRef = useRef3(null);
+  const dialogRef = useRef3(null);
+  const previousFocusRef = useRef3(null);
+  const { sendMessage } = useAIMe();
+  const titleId = useId2();
+  const inputId = useId2();
+  const toggle = useCallback3(
+    (next) => {
+      setOpen(next);
+      setQuery("");
+      setSelectedIndex(0);
+      onToggle?.(next);
+    },
+    [onToggle]
+  );
+  useEffect3(() => {
+    function handleKeyDown2(e) {
+      const metaMatch = shortcut.meta ? e.metaKey : true;
+      const ctrlMatch = shortcut.ctrl ? e.ctrlKey : !shortcut.meta ? e.ctrlKey : true;
+      if ((metaMatch || ctrlMatch) && e.key === shortcut.key) {
+        e.preventDefault();
+        if (!open) {
+          previousFocusRef.current = document.activeElement;
+        }
+        toggle(!open);
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown2);
+    return () => window.removeEventListener("keydown", handleKeyDown2);
+  }, [open, shortcut, toggle]);
+  useEffect3(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 0);
+    } else {
+      if (previousFocusRef.current) {
+        previousFocusRef.current.focus();
+        previousFocusRef.current = null;
+      }
+    }
+  }, [open]);
+  useEffect3(() => {
+    if (!open) return;
+    function handleFocusTrap(e) {
+      if (e.key !== "Tab") return;
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+      const focusable = dialog.querySelectorAll(
+        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+    window.addEventListener("keydown", handleFocusTrap);
+    return () => window.removeEventListener("keydown", handleFocusTrap);
+  }, [open]);
+  const filtered = query.trim() ? commands.filter(
+    (cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()) || cmd.description?.toLowerCase().includes(query.toLowerCase()) || cmd.category?.toLowerCase().includes(query.toLowerCase())
+  ) : commands;
+  useEffect3(() => {
+    if (selectedIndex >= filtered.length) {
+      setSelectedIndex(Math.max(0, filtered.length - 1));
+    }
+  }, [filtered.length, selectedIndex]);
+  useEffect3(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const selected = list.children[selectedIndex];
+    selected?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  function executeCommand(cmd) {
+    toggle(false);
+    if (typeof cmd.action === "string") {
+      sendMessage({ text: cmd.action });
+    } else {
+      cmd.action();
+    }
+  }
+  function handleKeyDown(e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setSelectedIndex((prev) => Math.min(prev + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setSelectedIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filtered[selectedIndex]) {
+        executeCommand(filtered[selectedIndex]);
+      } else if (query.trim()) {
+        toggle(false);
+        sendMessage({ text: query });
+      }
+    } else if (e.key === "Escape") {
+      toggle(false);
+    }
+  }
+  if (!open) return null;
+  const themeVars = {
+    ...defaultThemeVars,
+    ...themeToVars(theme)
+  };
+  const grouped = /* @__PURE__ */ new Map();
+  for (const cmd of filtered) {
+    const cat = cmd.category ?? "Actions";
+    if (!grouped.has(cat)) grouped.set(cat, []);
+    grouped.get(cat).push(cmd);
+  }
+  let flatIndex = 0;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        onClick: () => toggle(false),
+        style: {
+          position: "fixed",
+          inset: 0,
+          backgroundColor: "rgba(0,0,0,0.5)",
+          zIndex: 99998
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: dialogRef,
+        style: {
+          ...themeVars,
+          position: "fixed",
+          top: "20%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: "min(520px, 90vw)",
+          maxHeight: "60vh",
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "var(--ai-me-bg)",
+          borderRadius: "var(--ai-me-radius)",
+          border: "1px solid var(--ai-me-border)",
+          boxShadow: "0 24px 48px rgba(0,0,0,0.3)",
+          overflow: "hidden",
+          zIndex: 99999,
+          fontFamily: "var(--ai-me-font)",
+          color: "var(--ai-me-text)"
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsx4("h2", { id: titleId, style: srOnly2, children: "Command Palette" }),
+          /* @__PURE__ */ jsxs2("div", { style: { padding: "12px 16px", borderBottom: "1px solid var(--ai-me-border)" }, children: [
+            /* @__PURE__ */ jsx4("label", { htmlFor: inputId, style: srOnly2, children: "Search commands or ask AI" }),
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                id: inputId,
+                ref: inputRef,
+                value: query,
+                onChange: (e) => {
+                  setQuery(e.target.value);
+                  setSelectedIndex(0);
+                },
+                onKeyDown: handleKeyDown,
+                placeholder: "Type a command or ask AI...",
+                style: {
+                  width: "100%",
+                  padding: "8px 0",
+                  border: "none",
+                  // Do NOT suppress the outline entirely — use transparent + focus handler
+                  outline: "2px solid transparent",
+                  outlineOffset: 2,
+                  fontSize: 15,
+                  fontFamily: "var(--ai-me-font)",
+                  backgroundColor: "transparent",
+                  color: "var(--ai-me-text)"
+                },
+                onFocus: (e) => {
+                  e.currentTarget.style.outline = "2px solid var(--ai-me-primary)";
+                },
+                onBlur: (e) => {
+                  e.currentTarget.style.outline = "2px solid transparent";
+                },
+                role: "combobox",
+                "aria-expanded": "true",
+                "aria-autocomplete": "list",
+                "aria-controls": "ai-me-cmd-listbox",
+                "aria-activedescendant": filtered[selectedIndex] ? `cmd-${filtered[selectedIndex].id}` : void 0
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              id: "ai-me-cmd-listbox",
+              ref: listRef,
+              style: { overflowY: "auto", padding: "8px 0" },
+              role: "listbox",
+              "aria-label": "Commands",
+              children: [
+                filtered.length === 0 && query.trim() && /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    role: "option",
+                    "aria-selected": "false",
+                    style: {
+                      padding: "16px",
+                      textAlign: "center",
+                      fontSize: 13,
+                      color: "var(--ai-me-text-secondary)"
+                    },
+                    children: [
+                      "Press Enter to ask AI: \u201C",
+                      query,
+                      "\u201D"
+                    ]
+                  }
+                ),
+                Array.from(grouped.entries()).map(([category, items]) => (
+                  // role="group" with aria-label for the category heading
+                  /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": category, children: [
+                    /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          padding: "6px 16px 4px",
+                          fontSize: 11,
+                          fontWeight: 500,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.06em",
+                          color: "var(--ai-me-text-secondary)"
+                        },
+                        children: category
+                      }
+                    ),
+                    items.map((cmd) => {
+                      const idx = flatIndex++;
+                      const isSelected = idx === selectedIndex;
+                      return /* @__PURE__ */ jsxs2(
+                        "div",
+                        {
+                          id: `cmd-${cmd.id}`,
+                          role: "option",
+                          "aria-selected": isSelected,
+                          onClick: () => executeCommand(cmd),
+                          onMouseEnter: () => setSelectedIndex(idx),
+                          tabIndex: isSelected ? 0 : -1,
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              executeCommand(cmd);
+                            }
+                          },
+                          style: {
+                            padding: "8px 16px",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 10,
+                            backgroundColor: isSelected ? "var(--ai-me-bg-secondary)" : "transparent",
+                            outline: "2px solid transparent",
+                            outlineOffset: -2
+                          },
+                          onFocus: (e) => {
+                            e.currentTarget.style.outline = "2px solid var(--ai-me-primary)";
+                          },
+                          onBlur: (e) => {
+                            e.currentTarget.style.outline = "2px solid transparent";
+                          },
+                          children: [
+                            cmd.icon && // Icon is decorative — label comes from cmd.label
+                            /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", style: { fontSize: 16, flexShrink: 0 }, children: cmd.icon }),
+                            /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
+                              /* @__PURE__ */ jsx4("div", { style: { fontSize: 14, fontWeight: 500 }, children: cmd.label }),
+                              cmd.description && /* @__PURE__ */ jsx4(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: 12,
+                                    color: "var(--ai-me-text-secondary)",
+                                    whiteSpace: "nowrap",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis"
+                                  },
+                                  children: cmd.description
+                                }
+                              )
+                            ] })
+                          ]
+                        },
+                        cmd.id
+                      );
+                    })
+                  ] }, category)
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              "aria-hidden": "true",
+              style: {
+                padding: "8px 16px",
+                borderTop: "1px solid var(--ai-me-border)",
+                fontSize: 11,
+                color: "var(--ai-me-text-secondary)",
+                display: "flex",
+                gap: 16
+              },
+              children: [
+                /* @__PURE__ */ jsx4("span", { children: "\u2191\u2193 Navigate" }),
+                /* @__PURE__ */ jsx4("span", { children: "\u21B5 Select" }),
+                /* @__PURE__ */ jsx4("span", { children: "Esc Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/confirm.tsx
+import { useRef as useRef4, useEffect as useEffect4, useId as useId3, useCallback as useCallback4 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function AIMeConfirm({
+  action,
+  description,
+  parameters,
+  onConfirm,
+  onReject
+}) {
+  const dialogRef = useRef4(null);
+  const cancelButtonRef = useRef4(null);
+  const titleId = useId3();
+  const descriptionId = useId3();
+  const handleKeyDown = useCallback4(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onReject();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+      const focusable = dialog.querySelectorAll(
+        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    },
+    [onReject]
+  );
+  useEffect4(() => {
+    const previousFocus = document.activeElement;
+    cancelButtonRef.current?.focus();
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      previousFocus?.focus();
+    };
+  }, [handleKeyDown]);
+  const overlayStyle = {
+    ...defaultThemeVars,
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e4,
+    fontFamily: "var(--ai-me-font)"
+  };
+  const dialogStyle = {
+    backgroundColor: "var(--ai-me-bg)",
+    borderRadius: "var(--ai-me-radius)",
+    padding: 24,
+    maxWidth: 420,
+    width: "90%",
+    boxShadow: "var(--ai-me-shadow)",
+    color: "var(--ai-me-text)"
+  };
+  const focusStyle = {
+    outline: "2px solid transparent",
+    outlineOffset: 2
+  };
+  function applyFocusRing(el) {
+    el.style.outline = "2px solid var(--ai-me-primary)";
+    el.style.outlineOffset = "2px";
+  }
+  function removeFocusRing(el) {
+    el.style.outline = "2px solid transparent";
+    el.style.outlineOffset = "2px";
+  }
+  return (
+    // Overlay is presentational — role and aria go on the inner dialog
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        style: overlayStyle,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) onReject();
+        },
+        "aria-hidden": "false",
+        children: /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            ref: dialogRef,
+            style: dialogStyle,
+            role: "alertdialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": descriptionId,
+            tabIndex: -1,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx5("h3", { id: titleId, style: { margin: "0 0 8px", fontSize: 16 }, children: "Confirm Action" }),
+              /* @__PURE__ */ jsx5("p", { style: { margin: "0 0 4px", fontSize: 14, fontWeight: 600 }, children: action }),
+              /* @__PURE__ */ jsx5(
+                "p",
+                {
+                  id: descriptionId,
+                  style: {
+                    margin: "0 0 16px",
+                    fontSize: 13,
+                    color: "var(--ai-me-text-secondary)"
+                  },
+                  children: description
+                }
+              ),
+              parameters && Object.keys(parameters).length > 0 && /* @__PURE__ */ jsx5(
+                "pre",
+                {
+                  style: {
+                    margin: "0 0 16px",
+                    padding: 12,
+                    backgroundColor: "var(--ai-me-bg-secondary)",
+                    borderRadius: 8,
+                    fontSize: 12,
+                    overflow: "auto",
+                    maxHeight: 200,
+                    border: "1px solid var(--ai-me-border)"
+                  },
+                  children: JSON.stringify(parameters, null, 2)
+                }
+              ),
+              /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    ref: cancelButtonRef,
+                    type: "button",
+                    onClick: onReject,
+                    style: {
+                      padding: "8px 16px",
+                      border: "1px solid var(--ai-me-border)",
+                      borderRadius: 8,
+                      backgroundColor: "var(--ai-me-bg)",
+                      color: "var(--ai-me-text)",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      ...focusStyle
+                    },
+                    onFocus: (e) => applyFocusRing(e.currentTarget),
+                    onBlur: (e) => removeFocusRing(e.currentTarget),
+                    children: "Cancel"
+                  }
+                ),
+                /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onConfirm,
+                    style: {
+                      padding: "8px 16px",
+                      border: "none",
+                      borderRadius: 8,
+                      // #fff on var(--ai-me-primary) = #6366f1 → contrast ≈ 4.6:1 (passes AA)
+                      backgroundColor: "var(--ai-me-primary)",
+                      color: "#fff",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      ...focusStyle
+                    },
+                    onFocus: (e) => applyFocusRing(e.currentTarget),
+                    onBlur: (e) => removeFocusRing(e.currentTarget),
+                    children: "Confirm"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+export {
+  AIMeChat,
+  AIMeCommandPalette,
+  AIMeConfirm,
+  AIMeProvider,
+  renderMarkdown,
+  useAIMe,
+  useAIMeContext
+};
+//# sourceMappingURL=index.js.map