next-ai-editor 0.1.0

package/dist/AIEditorProvider-Bs9zUVrL.cjs

@@ -0,0 +1,1722 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactSyntaxHighlighter = require("react-syntax-highlighter");
+const prism = require("react-syntax-highlighter/dist/esm/styles/prism");
+const _AIEditorStorage = class _AIEditorStorage {
+  // 5MB
+  /**
+   * Generate storage key from file path and component name
+   * Format: "ai-editor:session:components/Header.tsx#Header"
+   */
+  static getSessionKey(filePath, componentName) {
+    const normalizedPath = filePath.replace(/\\/g, "/");
+    return `${this.STORAGE_PREFIX}${normalizedPath}#${componentName}`;
+  }
+  /**
+   * Save session to localStorage
+   */
+  static saveSession(session) {
+    try {
+      const key = this.getSessionKey(
+        session.sourceLocation.filePath,
+        session.sourceLocation.componentName
+      );
+      if (this.getStorageSize() > this.MAX_STORAGE_SIZE) {
+        console.warn("Storage size exceeded, pruning old sessions...");
+        this.pruneOldSessions(7 * 24 * 60 * 60 * 1e3);
+      }
+      const serialized = JSON.stringify(session);
+      localStorage.setItem(key, serialized);
+      return true;
+    } catch (e) {
+      if (e instanceof Error && e.name === "QuotaExceededError") {
+        console.error("localStorage quota exceeded");
+        this.pruneOldSessions(7 * 24 * 60 * 60 * 1e3);
+        try {
+          const key = this.getSessionKey(
+            session.sourceLocation.filePath,
+            session.sourceLocation.componentName
+          );
+          const serialized = JSON.stringify(session);
+          localStorage.setItem(key, serialized);
+          return true;
+        } catch {
+          return false;
+        }
+      }
+      console.error("Failed to save session:", e);
+      return false;
+    }
+  }
+  /**
+   * Load session by filePath + componentName
+   */
+  static loadSession(filePath, componentName) {
+    try {
+      const key = this.getSessionKey(filePath, componentName);
+      const stored = localStorage.getItem(key);
+      if (!stored) return null;
+      const session = JSON.parse(stored);
+      if (!session.version || !session.sourceLocation || !session.editHistory) {
+        console.warn("Invalid session schema, removing corrupted data");
+        localStorage.removeItem(key);
+        return null;
+      }
+      return session;
+    } catch (e) {
+      console.error("Failed to load session:", e);
+      const key = this.getSessionKey(filePath, componentName);
+      localStorage.removeItem(key);
+      return null;
+    }
+  }
+  /**
+   * Delete specific session
+   */
+  static deleteSession(filePath, componentName) {
+    try {
+      const key = this.getSessionKey(filePath, componentName);
+      localStorage.removeItem(key);
+    } catch (e) {
+      console.error("Failed to delete session:", e);
+    }
+  }
+  /**
+   * Get all session keys
+   */
+  static getAllSessionKeys() {
+    const keys = [];
+    try {
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(this.STORAGE_PREFIX)) {
+          keys.push(key);
+        }
+      }
+    } catch (e) {
+      console.error("Failed to get session keys:", e);
+    }
+    return keys;
+  }
+  /**
+   * Clear all sessions
+   */
+  static clearAllSessions() {
+    try {
+      const keys = this.getAllSessionKeys();
+      keys.forEach((key) => localStorage.removeItem(key));
+      console.log(`Cleared ${keys.length} session(s)`);
+    } catch (e) {
+      console.error("Failed to clear sessions:", e);
+    }
+  }
+  /**
+   * Get total storage usage in bytes
+   */
+  static getStorageSize() {
+    let total = 0;
+    try {
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith(this.STORAGE_PREFIX)) {
+          const value = localStorage.getItem(key);
+          if (value) {
+            total += (key.length + value.length) * 2;
+          }
+        }
+      }
+    } catch (e) {
+      console.error("Failed to calculate storage size:", e);
+    }
+    return total;
+  }
+  /**
+   * Remove sessions older than maxAge milliseconds
+   */
+  static pruneOldSessions(maxAge) {
+    try {
+      const now = Date.now();
+      const keys = this.getAllSessionKeys();
+      keys.forEach((key) => {
+        const value = localStorage.getItem(key);
+        if (!value) return;
+        try {
+          const session = JSON.parse(value);
+          const age = now - session.lastModified;
+          if (age > maxAge) {
+            console.log(`Pruning old session: ${key} (age: ${Math.round(age / (24 * 60 * 60 * 1e3))} days)`);
+            localStorage.removeItem(key);
+          }
+        } catch (e) {
+          console.warn(`Removing corrupted session: ${key}`);
+          localStorage.removeItem(key);
+        }
+      });
+    } catch (e) {
+      console.error("Failed to prune sessions:", e);
+    }
+  }
+  /**
+   * Compute SHA-256 hash of file content using Web Crypto API
+   */
+  static async hashFileContent(content) {
+    try {
+      const encoder = new TextEncoder();
+      const data = encoder.encode(content);
+      const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+      const hashArray = Array.from(new Uint8Array(hashBuffer));
+      const hashHex = hashArray.map((byte) => byte.toString(16).padStart(2, "0")).join("");
+      return hashHex;
+    } catch (e) {
+      console.error("Failed to hash content:", e);
+      return this.simpleHash(content);
+    }
+  }
+  /**
+   * Simple hash fallback (for environments without Web Crypto API)
+   */
+  static simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return hash.toString(16);
+  }
+  /**
+   * Get most recently modified session
+   */
+  static getLastActiveSession() {
+    try {
+      const keys = this.getAllSessionKeys();
+      if (keys.length === 0) return null;
+      let latestSession = null;
+      let latestTime = 0;
+      keys.forEach((key) => {
+        const value = localStorage.getItem(key);
+        if (!value) return;
+        try {
+          const session = JSON.parse(value);
+          if (!session.version || !session.sourceLocation || !session.editHistory) {
+            console.warn(`Skipping invalid session: ${key}`);
+            return;
+          }
+          if (session.lastModified > latestTime) {
+            latestTime = session.lastModified;
+            latestSession = session;
+          }
+        } catch (e) {
+          console.warn(`Skipping corrupted session: ${key}`);
+        }
+      });
+      return latestSession;
+    } catch (e) {
+      console.error("Failed to get last active session:", e);
+      return null;
+    }
+  }
+};
+_AIEditorStorage.STORAGE_PREFIX = "ai-editor:session:";
+_AIEditorStorage.VERSION = "1.0.0";
+_AIEditorStorage.MAX_STORAGE_SIZE = 5 * 1024 * 1024;
+let AIEditorStorage = _AIEditorStorage;
+const ENABLE_SESSION_PERSISTENCE = false;
+const sourceResolutionCache = /* @__PURE__ */ new Map();
+const inflightSourceResolutions = /* @__PURE__ */ new Map();
+function inferComponentNameFromPath(filePath) {
+  const fileName = filePath.split("/").pop() || "";
+  const nameWithoutExt = fileName.replace(/\.(tsx?|jsx?)$/, "");
+  return nameWithoutExt.charAt(0).toUpperCase() + nameWithoutExt.slice(1);
+}
+async function resolveSourceLocation(source) {
+  if (typeof window === "undefined" || process.env.NODE_ENV !== "development") {
+    return null;
+  }
+  if (!source.debugStack) {
+    console.warn("No debugStack available for resolution:", source);
+    return null;
+  }
+  const cacheKey = source.debugStack;
+  const cached = sourceResolutionCache.get(cacheKey);
+  if (cached) {
+    const resolved2 = { ...source, ...cached };
+    if (resolved2.componentName === "Unknown" && resolved2.filePath) {
+      resolved2.componentName = inferComponentNameFromPath(resolved2.filePath);
+    }
+    return resolved2;
+  }
+  let inflight = inflightSourceResolutions.get(cacheKey);
+  if (!inflight) {
+    inflight = fetch("/api/ai-editor/resolve", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ debugStack: cacheKey })
+    }).then(async (res) => {
+      if (!res.ok) {
+        const errorText = await res.text();
+        console.error(
+          `Resolve API error ${res.status}:`,
+          errorText,
+          "for stack:",
+          cacheKey.substring(0, 200)
+        );
+        return inferFilePathFromComponentName(source.componentName);
+      }
+      const data = await res.json();
+      if ((data == null ? void 0 : data.success) && data.filePath && data.lineNumber) {
+        const resolved2 = {
+          filePath: data.filePath,
+          lineNumber: data.lineNumber,
+          columnNumber: typeof data.columnNumber === "number" ? data.columnNumber : source.columnNumber
+        };
+        sourceResolutionCache.set(cacheKey, resolved2);
+        return resolved2;
+      }
+      console.warn("Resolve API returned unsuccessful response:", data);
+      return inferFilePathFromComponentName(source.componentName);
+    }).catch((err) => {
+      console.error("Error calling resolve API:", err);
+      return inferFilePathFromComponentName(source.componentName);
+    }).finally(() => {
+      inflightSourceResolutions.delete(cacheKey);
+    });
+    inflightSourceResolutions.set(cacheKey, inflight);
+  }
+  const resolvedInfo = await inflight;
+  if (!resolvedInfo) return null;
+  const resolved = {
+    ...source,
+    filePath: resolvedInfo.filePath,
+    lineNumber: resolvedInfo.lineNumber,
+    columnNumber: resolvedInfo.columnNumber
+  };
+  if (resolved.componentName === "Unknown" && resolved.filePath) {
+    resolved.componentName = inferComponentNameFromPath(resolved.filePath);
+  }
+  return resolved;
+}
+async function inferFilePathFromComponentName(componentName) {
+  if (!componentName || componentName === "Unknown") return null;
+  const possiblePaths = [
+    `components/${componentName}.tsx`,
+    `components/${componentName}.jsx`,
+    `app/${componentName}.tsx`,
+    `app/${componentName}.jsx`,
+    `src/components/${componentName}.tsx`,
+    `src/components/${componentName}.jsx`
+  ];
+  for (const tryPath of possiblePaths) {
+    try {
+      const response = await fetch(
+        `/api/ai-editor/absolute-path?path=${encodeURIComponent(tryPath)}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success) {
+          console.log(
+            `Inferred file path for ${componentName}: ${tryPath}`
+          );
+          return {
+            filePath: tryPath,
+            lineNumber: 1,
+            columnNumber: 0
+          };
+        }
+      }
+    } catch (err) {
+    }
+  }
+  console.warn(`Could not infer file path for component: ${componentName}`);
+  return null;
+}
+const EditorContext = react.createContext(null);
+function useAIEditor() {
+  const ctx = react.useContext(EditorContext);
+  if (!ctx) throw new Error("useAIEditor must be used within AIEditorProvider");
+  return ctx;
+}
+function getFiberFromElement(element) {
+  const key = Object.keys(element).find(
+    (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
+  );
+  return key ? element[key] : null;
+}
+function getComponentName(fiber) {
+  var _a;
+  if (!fiber) return "Unknown";
+  const type = fiber.type;
+  if (typeof type === "string") return type;
+  if (typeof type === "function")
+    return type.displayName || type.name || "Anonymous";
+  if (type == null ? void 0 : type.displayName) return type.displayName;
+  if ((_a = type == null ? void 0 : type.render) == null ? void 0 : _a.name) return type.render.name;
+  return "Unknown";
+}
+function isUserComponent(fiber) {
+  if (fiber.tag === 5 || fiber.tag === 6 || fiber.tag === 3) return false;
+  const type = fiber.type;
+  if (!type || typeof type === "string") return false;
+  return true;
+}
+function captureElementContext(element, fiber) {
+  const tagName = element.tagName.toLowerCase();
+  let textContent;
+  const directText = Array.from(element.childNodes).filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => {
+    var _a;
+    return (_a = n.textContent) == null ? void 0 : _a.trim();
+  }).filter(Boolean).join(" ");
+  if (directText) {
+    textContent = directText.slice(0, 50);
+  } else if (element.textContent) {
+    textContent = element.textContent.trim().slice(0, 50);
+  }
+  const className = typeof element.className === "string" ? element.className.slice(0, 100) : void 0;
+  const nthOfType = countNthOfType(element, tagName);
+  const key = (fiber == null ? void 0 : fiber.key) ? String(fiber.key) : void 0;
+  const props = extractProps(fiber);
+  return { tagName, textContent, className, key, nthOfType, props };
+}
+function countNthOfType(element, tagName) {
+  let boundary = element.parentElement;
+  while (boundary) {
+    const fiber = getFiberFromElement(boundary);
+    if (fiber && isUserComponent(fiber)) break;
+    boundary = boundary.parentElement;
+  }
+  if (!boundary) boundary = element.parentElement;
+  if (!boundary) return 1;
+  const sameTagElements = [];
+  if (boundary.tagName.toLowerCase() === tagName.toLowerCase()) {
+    sameTagElements.push(boundary);
+  }
+  sameTagElements.push(...Array.from(boundary.querySelectorAll(tagName)));
+  let count = 1;
+  for (const el of sameTagElements) {
+    if (el === element) break;
+    count++;
+  }
+  console.log(
+    `[countNthOfType] tagName=${tagName}, found ${sameTagElements.length} elements (including boundary), this is #${count}`
+  );
+  return count;
+}
+function extractProps(fiber) {
+  if (!fiber) return void 0;
+  const fiberProps = fiber.memoizedProps || fiber.pendingProps;
+  if (!fiberProps || typeof fiberProps !== "object") return void 0;
+  const props = {};
+  const identifyingKeys = [
+    "id",
+    "name",
+    "type",
+    "href",
+    "src",
+    "alt",
+    "role",
+    "aria-label",
+    "data-testid"
+  ];
+  for (const key of identifyingKeys) {
+    if (key in fiberProps && typeof fiberProps[key] === "string") {
+      props[key] = fiberProps[key];
+    }
+  }
+  if (fiberProps.style && typeof fiberProps.style === "object") {
+    props._styleKeys = Object.keys(fiberProps.style).slice(0, 5);
+  }
+  return Object.keys(props).length > 0 ? props : void 0;
+}
+function findSourceFromFiber(fiber) {
+  if (!fiber) return null;
+  let current = fiber;
+  const visited = /* @__PURE__ */ new Set();
+  while (current && !visited.has(current)) {
+    visited.add(current);
+    const sourceData = current._debugSource || extractFromDebugStack(current) || extractFromDebugOwner(current);
+    if (sourceData == null ? void 0 : sourceData.fileName) {
+      const filePath = cleanPath(sourceData.fileName);
+      if (!shouldSkip(filePath)) {
+        let componentFiber = current;
+        while (componentFiber) {
+          if (isUserComponent(componentFiber)) {
+            const componentName = getComponentName(componentFiber);
+            const isNextJSInternal = [
+              "Segment",
+              "Boundary",
+              "Router",
+              "Handler",
+              "Context",
+              "Layout",
+              "Template",
+              "Scroll",
+              "Focus",
+              "Loading",
+              "Error"
+            ].some((pattern) => componentName.includes(pattern));
+            if (!isNextJSInternal) {
+              const rawDebugStack = current._debugStack ? String(current._debugStack.stack || current._debugStack) : void 0;
+              return {
+                filePath,
+                lineNumber: sourceData.lineNumber || 1,
+                columnNumber: sourceData.columnNumber || 0,
+                componentName,
+                debugStack: rawDebugStack
+              };
+            }
+          }
+          componentFiber = componentFiber.return || componentFiber._debugOwner || null;
+        }
+      }
+    }
+    current = current.return || current._debugOwner || null;
+  }
+  return null;
+}
+function extractFromDebugStack(fiber) {
+  const stack = fiber._debugStack;
+  if (!stack) return null;
+  const stackStr = stack.stack || String(stack);
+  const frames = stackStr.split("\n");
+  const skipPatterns = [
+    "node_modules",
+    "SegmentViewNode",
+    "LayoutRouter",
+    "ErrorBoundary",
+    "fakeJSXCallSite"
+  ];
+  for (const frame of frames) {
+    if (skipPatterns.some((p) => frame.includes(p))) continue;
+    const match = frame.match(/at\s+(\w+)\s+\((.+?):(\d+):(\d+)\)?$/);
+    if (match) {
+      const fileName = cleanPath(match[2].replace(/\?[^:]*$/, ""));
+      if (!shouldSkip(fileName)) {
+        return {
+          fileName,
+          lineNumber: parseInt(match[3], 10),
+          columnNumber: parseInt(match[4], 10)
+        };
+      }
+    }
+  }
+  return null;
+}
+function extractFromDebugOwner(fiber) {
+  var _a, _b;
+  const owner = fiber._debugOwner;
+  if (!owner) return null;
+  if ((_a = owner._debugSource) == null ? void 0 : _a.fileName) {
+    return owner._debugSource;
+  }
+  const stack = owner.stack;
+  if (Array.isArray(stack) && ((_b = stack[0]) == null ? void 0 : _b.fileName)) {
+    return stack[0];
+  }
+  return null;
+}
+function cleanPath(p) {
+  let cleaned = p;
+  if (cleaned.startsWith("file://")) {
+    cleaned = cleaned.replace(/^file:\/\//, "");
+  }
+  try {
+    if (cleaned.includes("%")) {
+      cleaned = decodeURIComponent(cleaned);
+    }
+  } catch (e) {
+  }
+  cleaned = cleaned.replace(/^webpack-internal:\/\/\/\([^)]+\)\/\.\//, "").replace(/^webpack-internal:\/\/\/\([^)]+\)\//, "").replace(/^webpack-internal:\/\//, "").replace(/^webpack:\/\/[^/]*\//, "").replace(/^about:\/\/React\/Server\//, "").replace(/^\([^)]+\)\//, "").replace(/^\.\//, "").replace(/\?.*$/, "");
+  return cleaned;
+}
+function shouldSkip(p) {
+  if (!p) return true;
+  return ["node_modules", "next/dist", "react-dom", "ai-editor-provider"].some(
+    (s) => p.includes(s)
+  );
+}
+function getSourceFromElement(element) {
+  let current = element;
+  let fiber = null;
+  while (current && current !== document.body) {
+    fiber = getFiberFromElement(current);
+    if (fiber) break;
+    current = current.parentElement;
+  }
+  if (!fiber) return null;
+  const source = findSourceFromFiber(fiber);
+  if (!source) return null;
+  const elementContext = captureElementContext(element, fiber);
+  return { ...source, elementContext };
+}
+if (typeof window !== "undefined") {
+  window.__getSource = getSourceFromElement;
+}
+function AIEditorProvider({
+  children,
+  theme = "dark"
+}) {
+  const [isEnabled, setEnabled] = react.useState(false);
+  const [selectedSource, setSelectedSource] = react.useState(
+    null
+  );
+  const [selectedDOMElement, setSelectedDOMElement] = react.useState(
+    null
+  );
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [editHistory, setEditHistory] = react.useState([]);
+  const [showStaleWarning, setShowStaleWarning] = react.useState(false);
+  const [staleSession, setStaleSession] = react.useState(null);
+  const [hasActiveSession, setHasActiveSession] = react.useState(false);
+  react.useEffect(() => {
+    const handleKey = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "e") {
+        e.preventDefault();
+        setEnabled((p) => !p);
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, []);
+  react.useEffect(() => {
+    return;
+  }, []);
+  const restoreSession = react.useCallback(async (session) => {
+    const sourceLocation = session.sourceLocation;
+    setSelectedSource(sourceLocation);
+    setEditHistory(session.editHistory);
+    if (sourceLocation.debugStack) {
+      const resolved = await resolveSourceLocation(sourceLocation);
+      if (resolved) {
+        setSelectedSource(resolved);
+      }
+    }
+  }, []);
+  const handleClearSession = react.useCallback(() => {
+    if (selectedSource) {
+      AIEditorStorage.deleteSession(
+        selectedSource.filePath,
+        selectedSource.componentName
+      );
+      setHasActiveSession(false);
+      setSelectedSource(null);
+      setEditHistory([]);
+    }
+  }, [selectedSource]);
+  const submitEdit = react.useCallback(
+    async (suggestion) => {
+      if (!selectedSource)
+        return { success: false, error: "No element selected" };
+      setIsLoading(true);
+      try {
+        const res = await fetch("/api/ai-editor/edit", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            filePath: selectedSource.filePath,
+            lineNumber: selectedSource.lineNumber,
+            componentName: selectedSource.componentName,
+            suggestion,
+            // NEW: Pass element context for precise matching
+            elementContext: selectedSource.elementContext,
+            // Pass debugStack for server-side source map resolution
+            debugStack: selectedSource.debugStack,
+            // Pass edit history for context
+            editHistory: editHistory.map((item) => ({
+              suggestion: item.suggestion,
+              success: item.success
+            }))
+          })
+        });
+        const result = await res.json();
+        const editId = Date.now().toString(36) + Math.random().toString(36).substring(2);
+        const newHistoryItem = {
+          id: editId,
+          suggestion,
+          success: result.success,
+          error: result.error,
+          timestamp: Date.now(),
+          fileSnapshot: result.fileSnapshot,
+          generatedCode: result.generatedCode,
+          modifiedLines: result.modifiedLines
+        };
+        setEditHistory((prev) => [...prev, newHistoryItem]);
+        if (ENABLE_SESSION_PERSISTENCE && selectedSource && result.fileSnapshot) ;
+        return result;
+      } catch (err) {
+        const error = String(err);
+        const editId = Date.now().toString(36) + Math.random().toString(36).substring(2);
+        setEditHistory((prev) => [
+          ...prev,
+          {
+            id: editId,
+            suggestion,
+            success: false,
+            error,
+            timestamp: Date.now()
+          }
+        ]);
+        return { success: false, error };
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [selectedSource, editHistory]
+  );
+  const handleSelect = react.useCallback(
+    (element, source) => {
+      setSelectedDOMElement(element);
+      setSelectedSource(source);
+      setEditHistory([]);
+      resolveSourceLocation(source).then((resolved) => {
+        if (resolved) {
+          setSelectedSource((prev) => prev === source ? resolved : prev);
+        }
+      });
+    },
+    [setSelectedDOMElement, setSelectedSource]
+  );
+  if (process.env.NODE_ENV !== "development") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    EditorContext.Provider,
+    {
+      value: {
+        isEnabled,
+        setEnabled,
+        selectedSource,
+        setSelectedSource,
+        selectedDOMElement,
+        isLoading,
+        setIsLoading,
+        editHistory,
+        setEditHistory,
+        submitEdit
+      },
+      children: [
+        children,
+        isEnabled && /* @__PURE__ */ jsxRuntime.jsx(
+          EditorOverlay,
+          {
+            theme,
+            onSelect: handleSelect,
+            showStaleWarning,
+            staleSession,
+            hasActiveSession,
+            setShowStaleWarning,
+            setStaleSession,
+            setHasActiveSession,
+            restoreSession,
+            handleClearSession
+          }
+        )
+      ]
+    }
+  );
+}
+function EditorOverlay({
+  theme,
+  onSelect,
+  showStaleWarning,
+  staleSession,
+  hasActiveSession,
+  setShowStaleWarning,
+  setStaleSession,
+  setHasActiveSession,
+  restoreSession,
+  handleClearSession
+}) {
+  var _a;
+  const {
+    selectedSource,
+    setSelectedSource,
+    submitEdit,
+    isLoading,
+    setIsLoading,
+    setEnabled,
+    selectedDOMElement,
+    editHistory,
+    setEditHistory
+  } = useAIEditor();
+  const [hoveredSource, setHoveredSource] = react.useState(
+    null
+  );
+  const [hoveredElement, setHoveredElement] = react.useState(null);
+  const [hoveredRect, setHoveredRect] = react.useState(null);
+  const [mousePos, setMousePos] = react.useState({ x: 0, y: 0 });
+  const [isResolvingSource, setIsResolvingSource] = react.useState(false);
+  const [suggestion, setSuggestion] = react.useState("");
+  const [result, setResult] = react.useState(null);
+  const [code, setCode] = react.useState("");
+  const [codeLineStart, setCodeLineStart] = react.useState(1);
+  const [targetStartLine, setTargetStartLine] = react.useState(null);
+  const [targetEndLine, setTargetEndLine] = react.useState(null);
+  const [absolutePath, setAbsolutePath] = react.useState(null);
+  const [parsedComponentName, setParsedComponentName] = react.useState(
+    null
+  );
+  const isDark = theme === "dark";
+  react.useEffect(() => {
+    var _a2, _b, _c, _d;
+    if (selectedSource) {
+      const params = {
+        path: selectedSource.filePath,
+        line: String(selectedSource.lineNumber),
+        tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
+        nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
+        textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
+        className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
+      };
+      if (selectedSource.debugStack) {
+        params.debugStack = selectedSource.debugStack;
+      }
+      fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
+        if (d.success) {
+          console.log("[AI Editor] Read response:", {
+            lineStart: d.lineStart,
+            targetStartLine: d.targetStartLine,
+            targetEndLine: d.targetEndLine,
+            componentName: d.componentName
+          });
+          setCode(d.content);
+          setCodeLineStart(d.lineStart || 1);
+          setTargetStartLine(d.targetStartLine || null);
+          setTargetEndLine(d.targetEndLine || null);
+          if (d.componentName) {
+            setParsedComponentName(d.componentName);
+          }
+        }
+      }).catch(() => {
+        setCode("// Could not load");
+        setCodeLineStart(1);
+        setTargetStartLine(null);
+        setTargetEndLine(null);
+      });
+      fetch(
+        `/api/ai-editor/absolute-path?` + new URLSearchParams({ path: selectedSource.filePath })
+      ).then((r) => r.json()).then((d) => d.success && setAbsolutePath(d.absolutePath)).catch(() => setAbsolutePath(null));
+    } else {
+      setAbsolutePath(null);
+      setParsedComponentName(null);
+    }
+  }, [selectedSource]);
+  react.useEffect(() => {
+    let lastEl = null;
+    let raf;
+    const onMove = (e) => {
+      setMousePos({ x: e.clientX, y: e.clientY });
+      if (selectedSource) return;
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        const el = document.elementFromPoint(e.clientX, e.clientY);
+        if (!el || el.closest(".ai-editor-ui") || el === lastEl) return;
+        lastEl = el;
+        const source = getSourceFromElement(el);
+        if (source) {
+          setHoveredElement(el);
+          setHoveredRect(el.getBoundingClientRect());
+          const isCompiledPath = source.filePath.includes(".next/") || source.filePath.includes("/chunks/") || source.filePath.startsWith("file://") || source.filePath.endsWith(".js") && (source.filePath.includes("/server/") || source.filePath.includes("/static/"));
+          if (isCompiledPath && source.debugStack) {
+            setIsResolvingSource(true);
+            resolveSourceLocation(source).then((resolved) => {
+              setIsResolvingSource(false);
+              if (resolved) {
+                console.log("Resolved source location:", resolved);
+                setHoveredSource(resolved);
+              } else {
+                console.warn(
+                  "Failed to resolve source location for:",
+                  source
+                );
+                setHoveredSource(source);
+              }
+            }).catch((err) => {
+              console.error("Error resolving source location:", err);
+              setIsResolvingSource(false);
+              setHoveredSource(source);
+            });
+          } else if (isCompiledPath && !source.debugStack) {
+            console.warn("Compiled path but no debugStack:", source);
+            setIsResolvingSource(false);
+            setHoveredSource(source);
+          } else {
+            setIsResolvingSource(false);
+            setHoveredSource(source);
+          }
+        } else {
+          setHoveredSource(null);
+          setHoveredElement(null);
+          setHoveredRect(null);
+          setIsResolvingSource(false);
+        }
+      });
+    };
+    const onClick = (e) => {
+      if (e.target.closest(".ai-editor-ui")) return;
+      if (hoveredSource && hoveredElement) {
+        e.preventDefault();
+        e.stopPropagation();
+        onSelect(hoveredElement, hoveredSource);
+        setSuggestion("");
+        setResult(null);
+      }
+    };
+    document.addEventListener("mousemove", onMove, { passive: true });
+    document.addEventListener("click", onClick, true);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("click", onClick, true);
+      cancelAnimationFrame(raf);
+    };
+  }, [hoveredSource, hoveredElement, selectedSource, onSelect]);
+  const handleSubmit = async () => {
+    var _a2, _b, _c, _d;
+    if (!suggestion.trim()) return;
+    const res = await submitEdit(suggestion);
+    setResult(res);
+    if (res.success) {
+      setSuggestion("");
+      if (selectedSource) {
+        const params = {
+          path: selectedSource.filePath,
+          line: String(selectedSource.lineNumber),
+          tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
+          nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
+          textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
+          className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
+        };
+        if (selectedSource.debugStack) {
+          params.debugStack = selectedSource.debugStack;
+        }
+        fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
+          if (d.success) {
+            setCode(d.content);
+            setCodeLineStart(d.lineStart || 1);
+            setTargetStartLine(d.targetStartLine || null);
+            setTargetEndLine(d.targetEndLine || null);
+            if (d.componentName) {
+              setParsedComponentName(d.componentName);
+            }
+          }
+        }).catch(console.error);
+      }
+      setTimeout(() => setResult(null), 3e3);
+    }
+  };
+  const handleUndo = async () => {
+    var _a2, _b, _c, _d;
+    if (editHistory.length === 0 || !selectedSource) return;
+    const lastSuccessfulEdit = [...editHistory].reverse().find((edit) => edit.success && edit.fileSnapshot);
+    if (!lastSuccessfulEdit) {
+      console.warn("No successful edit with snapshot found to undo");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const response = await fetch("/api/ai-editor/undo", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          filePath: selectedSource.filePath,
+          content: lastSuccessfulEdit.fileSnapshot
+        })
+      });
+      const result2 = await response.json();
+      if (!result2.success) {
+        throw new Error(result2.error || "Undo failed");
+      }
+      setEditHistory((prev) => {
+        const lastIndex = prev.lastIndexOf(lastSuccessfulEdit);
+        return prev.filter((_, idx) => idx !== lastIndex);
+      });
+      const params = {
+        path: selectedSource.filePath,
+        line: String(selectedSource.lineNumber),
+        tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
+        nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
+        textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
+        className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
+      };
+      if (selectedSource.debugStack) {
+        params.debugStack = selectedSource.debugStack;
+      }
+      fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
+        if (d.success) {
+          setCode(d.content);
+          setCodeLineStart(d.lineStart || 1);
+          setTargetStartLine(d.targetStartLine || null);
+          setTargetEndLine(d.targetEndLine || null);
+          if (d.componentName) {
+            setParsedComponentName(d.componentName);
+          }
+        }
+      }).catch(console.error);
+      setResult({ success: true, error: void 0 });
+      setTimeout(() => setResult(null), 3e3);
+    } catch (error) {
+      console.error("Undo error:", error);
+      setResult({ success: false, error: String(error) });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleRetry = async (editIndex) => {
+    var _a2, _b, _c, _d;
+    const editToRetry = editHistory[editIndex];
+    if (!editToRetry) return;
+    const res = await submitEdit(editToRetry.suggestion);
+    if (res.success && selectedSource) {
+      const params = {
+        path: selectedSource.filePath,
+        line: String(selectedSource.lineNumber),
+        tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
+        nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
+        textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
+        className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
+      };
+      if (selectedSource.debugStack) {
+        params.debugStack = selectedSource.debugStack;
+      }
+      fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
+        if (d.success) {
+          setCode(d.content);
+          setCodeLineStart(d.lineStart || 1);
+          setTargetStartLine(d.targetStartLine || null);
+          setTargetEndLine(d.targetEndLine || null);
+          if (d.componentName) {
+            setParsedComponentName(d.componentName);
+          }
+        }
+      }).catch(console.error);
+    }
+  };
+  const handleUndoAndRetry = async () => {
+    var _a2, _b, _c, _d;
+    if (editHistory.length === 0 || !selectedSource) return;
+    const lastSuccessfulEdit = [...editHistory].reverse().find((edit) => edit.success && edit.fileSnapshot);
+    if (!lastSuccessfulEdit) {
+      console.warn("No successful edit with snapshot found to undo and retry");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const undoResponse = await fetch("/api/ai-editor/undo", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          filePath: selectedSource.filePath,
+          content: lastSuccessfulEdit.fileSnapshot
+        })
+      });
+      const undoResult = await undoResponse.json();
+      if (!undoResult.success) {
+        throw new Error(undoResult.error || "Undo failed");
+      }
+      setEditHistory((prev) => {
+        const lastIndex = prev.lastIndexOf(lastSuccessfulEdit);
+        return prev.filter((_, idx) => idx !== lastIndex);
+      });
+      const params = {
+        path: selectedSource.filePath,
+        line: String(selectedSource.lineNumber),
+        tagName: ((_a2 = selectedSource.elementContext) == null ? void 0 : _a2.tagName) || "",
+        nthOfType: String(((_b = selectedSource.elementContext) == null ? void 0 : _b.nthOfType) || 0),
+        textContent: ((_c = selectedSource.elementContext) == null ? void 0 : _c.textContent) || "",
+        className: ((_d = selectedSource.elementContext) == null ? void 0 : _d.className) || ""
+      };
+      if (selectedSource.debugStack) {
+        params.debugStack = selectedSource.debugStack;
+      }
+      await fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
+        if (d.success) {
+          setCode(d.content);
+          setCodeLineStart(d.lineStart || 1);
+          setTargetStartLine(d.targetStartLine || null);
+          setTargetEndLine(d.targetEndLine || null);
+          if (d.componentName) {
+            setParsedComponentName(d.componentName);
+          }
+        }
+      }).catch(console.error);
+      setIsLoading(true);
+      const retryResult = await submitEdit(lastSuccessfulEdit.suggestion);
+      if (retryResult.success && selectedSource) {
+        await fetch(`/api/ai-editor/read?` + new URLSearchParams(params)).then((r) => r.json()).then((d) => {
+          if (d.success) {
+            setCode(d.content);
+            setCodeLineStart(d.lineStart || 1);
+            setTargetStartLine(d.targetStartLine || null);
+            setTargetEndLine(d.targetEndLine || null);
+            if (d.componentName) {
+              setParsedComponentName(d.componentName);
+            }
+          }
+        }).catch(console.error);
+      }
+      if (retryResult.success) {
+        setResult({ success: true, error: void 0 });
+      } else {
+        setResult({ success: false, error: retryResult.error });
+      }
+      setTimeout(() => setResult(null), 3e3);
+    } catch (error) {
+      console.error("Undo and retry error:", error);
+      setResult({ success: false, error: String(error) });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleDone = () => {
+    window.location.reload();
+  };
+  const c = {
+    bg: isDark ? "#0d0d14" : "#fff",
+    bgAlt: isDark ? "#16162a" : "#f5f5f5",
+    text: isDark ? "#e4e4e7" : "#18181b",
+    muted: isDark ? "#71717a" : "#a1a1aa",
+    accent: "#818cf8",
+    border: isDark ? "#27273f" : "#e4e4e7",
+    success: "#34d399",
+    error: "#f87171"
+  };
+  const elCtx = selectedSource == null ? void 0 : selectedSource.elementContext;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "ai-editor-ui",
+      style: { fontFamily: "system-ui, sans-serif" },
+      children: [
+        hoveredRect && !selectedSource && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              left: hoveredRect.left - 2,
+              top: hoveredRect.top - 2,
+              width: hoveredRect.width + 4,
+              height: hoveredRect.height + 4,
+              border: `2px solid ${c.accent}`,
+              borderRadius: 6,
+              background: `${c.accent}15`,
+              pointerEvents: "none",
+              zIndex: 99998
+            }
+          }
+        ),
+        hoveredSource && !selectedSource && !isResolvingSource && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              left: Math.min(mousePos.x + 14, window.innerWidth - 340),
+              top: mousePos.y + 14,
+              background: c.bg,
+              color: c.text,
+              border: `1px solid ${c.border}`,
+              borderRadius: 10,
+              padding: "12px 16px",
+              fontSize: 12,
+              fontFamily: "ui-monospace, monospace",
+              zIndex: 99999,
+              boxShadow: `0 8px 30px rgba(0,0,0,${isDark ? 0.5 : 0.15})`,
+              maxWidth: 320,
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    fontWeight: 700,
+                    color: c.accent,
+                    marginBottom: 4,
+                    fontSize: 14
+                  },
+                  children: [
+                    "<",
+                    hoveredSource.componentName,
+                    " />"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: c.muted, fontSize: 11 }, children: [
+                hoveredSource.filePath,
+                ":",
+                hoveredSource.lineNumber
+              ] }),
+              ((_a = hoveredSource.elementContext) == null ? void 0 : _a.textContent) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    color: c.muted,
+                    fontSize: 10,
+                    marginTop: 4,
+                    fontStyle: "italic"
+                  },
+                  children: [
+                    '"',
+                    hoveredSource.elementContext.textContent,
+                    '"'
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        ENABLE_SESSION_PERSISTENCE,
+        selectedSource && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              bottom: 20,
+              right: 20,
+              background: c.bg,
+              color: c.text,
+              borderRadius: 16,
+              padding: 24,
+              width: 560,
+              maxWidth: "calc(100vw - 40px)",
+              maxHeight: "calc(100vh - 40px)",
+              overflowY: "auto",
+              overflowX: "hidden",
+              zIndex: 1e5,
+              boxShadow: `0 24px 80px rgba(0,0,0,${isDark ? 0.6 : 0.25})`,
+              border: `1px solid ${c.border}`
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    marginBottom: 20
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 11,
+                            textTransform: "uppercase",
+                            letterSpacing: 1,
+                            color: c.muted
+                          },
+                          children: "Editing"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 20, fontWeight: 700, color: c.accent }, children: [
+                        "<",
+                        parsedComponentName || selectedSource.componentName,
+                        " />"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 12,
+                            color: c.muted,
+                            fontFamily: "monospace",
+                            marginTop: 4
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsxs(
+                            "a",
+                            {
+                              href: absolutePath ? `cursor://file/${absolutePath}:${selectedSource.lineNumber}` : `cursor://file/${selectedSource.filePath}:${selectedSource.lineNumber}`,
+                              onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                const path = absolutePath || selectedSource.filePath;
+                                const cursorPath = path.startsWith("/") ? path : `/${path}`;
+                                window.location.href = `cursor://file${cursorPath}:${selectedSource.lineNumber}`;
+                              },
+                              style: {
+                                color: c.accent,
+                                textDecoration: "none",
+                                cursor: "pointer",
+                                borderBottom: `1px solid ${c.accent}40`
+                              },
+                              onMouseEnter: (e) => {
+                                e.currentTarget.style.borderBottomColor = c.accent;
+                              },
+                              onMouseLeave: (e) => {
+                                e.currentTarget.style.borderBottomColor = `${c.accent}40`;
+                              },
+                              children: [
+                                selectedSource.filePath,
+                                ":",
+                                selectedSource.lineNumber
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      (elCtx == null ? void 0 : elCtx.textContent) && /* @__PURE__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 11,
+                            color: c.muted,
+                            marginTop: 4,
+                            fontStyle: "italic"
+                          },
+                          children: [
+                            'Element text: "',
+                            elCtx.textContent,
+                            '"'
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: () => setSelectedSource(null),
+                        style: {
+                          width: 36,
+                          height: 36,
+                          borderRadius: 10,
+                          border: "none",
+                          background: c.bgAlt,
+                          color: c.muted,
+                          fontSize: 20,
+                          cursor: "pointer"
+                        },
+                        children: "×"
+                      }
+                    )
+                  ]
+                }
+              ),
+              code && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 11,
+                      fontWeight: 600,
+                      marginBottom: 8,
+                      color: c.muted,
+                      textTransform: "uppercase"
+                    },
+                    children: "Source Preview"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactSyntaxHighlighter.Prism,
+                  {
+                    language: "tsx",
+                    style: isDark ? prism.vscDarkPlus : prism.vs,
+                    showLineNumbers: true,
+                    startingLineNumber: codeLineStart,
+                    customStyle: {
+                      background: c.bgAlt,
+                      borderRadius: 10,
+                      fontSize: 14,
+                      margin: 0,
+                      maxHeight: 180,
+                      overflowX: "auto",
+                      border: `1px solid ${c.border}`
+                    },
+                    lineNumberStyle: {
+                      minWidth: "2.5em",
+                      paddingRight: "1em",
+                      color: c.muted,
+                      textAlign: "right",
+                      userSelect: "none"
+                    },
+                    wrapLines: true,
+                    lineProps: (lineNumber) => {
+                      const isHighlighted = targetStartLine !== null && targetEndLine !== null && lineNumber >= targetStartLine && lineNumber <= targetEndLine;
+                      return {
+                        style: {
+                          backgroundColor: isHighlighted ? isDark ? "rgba(102, 126, 234, 0.15)" : "rgba(147, 197, 253, 0.3)" : "transparent"
+                        }
+                      };
+                    },
+                    children: code
+                  }
+                )
+              ] }),
+              editHistory.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 11,
+                      fontWeight: 600,
+                      marginBottom: 8,
+                      color: c.muted,
+                      textTransform: "uppercase"
+                    },
+                    children: [
+                      "Edit History (",
+                      editHistory.length,
+                      ")"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      background: c.bgAlt,
+                      borderRadius: 10,
+                      border: `1px solid ${c.border}`,
+                      maxHeight: 200,
+                      overflow: "auto"
+                    },
+                    children: editHistory.map((item, idx) => {
+                      const isLastEdit = idx === editHistory.length - 1;
+                      const hasSnapshot = item.success && item.fileSnapshot;
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            padding: "10px 14px",
+                            borderBottom: idx < editHistory.length - 1 ? `1px solid ${c.border}` : "none"
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsxs(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "flex-start",
+                                gap: 8
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs(
+                                    "div",
+                                    {
+                                      style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        marginBottom: 4
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsxRuntime.jsx(
+                                          "span",
+                                          {
+                                            style: {
+                                              color: item.success ? c.success : c.error,
+                                              fontSize: 16
+                                            },
+                                            children: item.success ? "✓" : "✗"
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsxRuntime.jsxs(
+                                          "span",
+                                          {
+                                            style: {
+                                              fontSize: 11,
+                                              color: c.muted
+                                            },
+                                            children: [
+                                              "Edit ",
+                                              idx + 1
+                                            ]
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    "div",
+                                    {
+                                      style: {
+                                        fontSize: 13,
+                                        color: c.text,
+                                        marginLeft: 24
+                                      },
+                                      children: item.suggestion
+                                    }
+                                  ),
+                                  item.error && /* @__PURE__ */ jsxRuntime.jsx(
+                                    "div",
+                                    {
+                                      style: {
+                                        fontSize: 11,
+                                        color: c.error,
+                                        marginLeft: 24,
+                                        marginTop: 4
+                                      },
+                                      children: item.error
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
+                                  isLastEdit && hasSnapshot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(
+                                      "button",
+                                      {
+                                        onClick: handleUndo,
+                                        disabled: isLoading,
+                                        style: {
+                                          padding: "4px 10px",
+                                          fontSize: 11,
+                                          borderRadius: 6,
+                                          border: "none",
+                                          background: isLoading ? c.muted : "#f59e0b",
+                                          color: "#fff",
+                                          fontWeight: 600,
+                                          cursor: isLoading ? "wait" : "pointer",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        title: "Undo this edit",
+                                        onMouseEnter: (e) => {
+                                          if (!isLoading)
+                                            e.currentTarget.style.background = "#d97706";
+                                        },
+                                        onMouseLeave: (e) => {
+                                          if (!isLoading)
+                                            e.currentTarget.style.background = "#f59e0b";
+                                        },
+                                        children: "↶ Undo"
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxRuntime.jsx(
+                                      "button",
+                                      {
+                                        onClick: handleUndoAndRetry,
+                                        disabled: isLoading,
+                                        style: {
+                                          padding: "4px 10px",
+                                          fontSize: 11,
+                                          borderRadius: 6,
+                                          border: "none",
+                                          background: isLoading ? c.muted : "#8b5cf6",
+                                          color: "#fff",
+                                          fontWeight: 600,
+                                          cursor: isLoading ? "wait" : "pointer",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        title: "Undo and retry with AI",
+                                        onMouseEnter: (e) => {
+                                          if (!isLoading)
+                                            e.currentTarget.style.background = "#7c3aed";
+                                        },
+                                        onMouseLeave: (e) => {
+                                          if (!isLoading)
+                                            e.currentTarget.style.background = "#8b5cf6";
+                                        },
+                                        children: "↶↻ Undo & Retry"
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    "button",
+                                    {
+                                      onClick: () => handleRetry(idx),
+                                      disabled: isLoading,
+                                      style: {
+                                        padding: "4px 10px",
+                                        fontSize: 11,
+                                        borderRadius: 6,
+                                        border: "none",
+                                        background: isLoading ? c.muted : c.accent,
+                                        color: "#fff",
+                                        fontWeight: 600,
+                                        cursor: isLoading ? "wait" : "pointer",
+                                        whiteSpace: "nowrap"
+                                      },
+                                      title: "Retry this edit",
+                                      onMouseEnter: (e) => {
+                                        if (!isLoading)
+                                          e.currentTarget.style.background = "#6366f1";
+                                      },
+                                      onMouseLeave: (e) => {
+                                        if (!isLoading)
+                                          e.currentTarget.style.background = c.accent;
+                                      },
+                                      children: "↻ Retry"
+                                    }
+                                  )
+                                ] })
+                              ]
+                            }
+                          )
+                        },
+                        idx
+                      );
+                    })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 11,
+                      fontWeight: 600,
+                      marginBottom: 8,
+                      color: c.muted,
+                      textTransform: "uppercase"
+                    },
+                    children: "Describe Changes"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "textarea",
+                  {
+                    value: suggestion,
+                    onChange: (e) => setSuggestion(e.target.value),
+                    placeholder: `e.g., Make this ${(elCtx == null ? void 0 : elCtx.tagName) || "element"} blue with rounded corners...`,
+                    autoFocus: true,
+                    style: {
+                      width: "100%",
+                      height: 100,
+                      padding: 14,
+                      borderRadius: 10,
+                      border: `1px solid ${c.border}`,
+                      background: c.bgAlt,
+                      color: c.text,
+                      fontSize: 14,
+                      resize: "vertical",
+                      fontFamily: "inherit",
+                      boxSizing: "border-box"
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                        e.preventDefault();
+                        handleSubmit();
+                      }
+                    }
+                  }
+                )
+              ] }),
+              result && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    marginBottom: 20,
+                    padding: 14,
+                    borderRadius: 10,
+                    background: result.success ? `${c.success}15` : `${c.error}15`,
+                    color: result.success ? c.success : c.error,
+                    fontWeight: 500
+                  },
+                  children: result.success ? "✓ Applied!" : `✗ ${result.error}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => setSelectedSource(null),
+                    style: {
+                      flex: "1 1 auto",
+                      padding: "12px 20px",
+                      borderRadius: 10,
+                      border: `1px solid ${c.border}`,
+                      background: "transparent",
+                      color: c.text,
+                      cursor: "pointer"
+                    },
+                    children: "Cancel"
+                  }
+                ),
+                ENABLE_SESSION_PERSISTENCE,
+                editHistory.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handleDone,
+                    style: {
+                      flex: "1 1 auto",
+                      padding: "12px 20px",
+                      borderRadius: 10,
+                      border: `1px solid ${c.success}`,
+                      background: "transparent",
+                      color: c.success,
+                      fontWeight: 600,
+                      cursor: "pointer"
+                    },
+                    children: "Finish & Reload"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handleSubmit,
+                    disabled: isLoading || !suggestion.trim(),
+                    style: {
+                      flex: "2 1 auto",
+                      padding: "12px 20px",
+                      borderRadius: 10,
+                      border: "none",
+                      background: isLoading ? c.muted : c.accent,
+                      color: "#fff",
+                      fontWeight: 600,
+                      cursor: isLoading ? "wait" : "pointer",
+                      opacity: !suggestion.trim() ? 0.5 : 1
+                    },
+                    children: isLoading ? "Applying..." : "Apply Changes ⌘↵"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !selectedSource && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              bottom: 20,
+              right: 20,
+              background: c.bg,
+              color: c.success,
+              padding: "10px 16px",
+              borderRadius: 20,
+              fontSize: 13,
+              fontWeight: 600,
+              zIndex: 99997,
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              border: `1px solid ${c.border}`,
+              boxShadow: `0 4px 20px rgba(0,0,0,${isDark ? 0.4 : 0.1})`
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: c.success
+                  }
+                }
+              ),
+              "AI Editor",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: c.muted, fontSize: 11 }, children: "⌘⇧E" }),
+              ENABLE_SESSION_PERSISTENCE,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => setEnabled(false),
+                  style: {
+                    background: "none",
+                    border: "none",
+                    color: c.muted,
+                    cursor: "pointer"
+                  },
+                  children: "×"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+exports.AIEditorProvider = AIEditorProvider;
+//# sourceMappingURL=AIEditorProvider-Bs9zUVrL.cjs.map