fixdog 0.0.1 → 0.0.2

package/dist/inspector-DQEtAjyM.esm.js

@@ -0,0 +1,1129 @@
+import { SourceMapConsumer } from 'source-map-js';
+
+const STYLE_ELEMENT_ID = 'fixdog-sdk-styles';
+const OVERLAY_CLASS = 'fixdog-overlay';
+const TOOLTIP_CLASS = 'fixdog-tooltip';
+const HIGHLIGHT_CLASS = 'fixdog-highlight';
+const SELECTION_CLASS = 'fixdog-selection';
+const SELECTION_BADGE_CLASS = 'fixdog-selection-badge';
+// Selection highlight color (blue, distinct from hover cyan)
+const SELECTION_COLOR = '#3b82f6';
+const baseStyles = (options) => `
+.${OVERLAY_CLASS} {
+  position: fixed;
+  pointer-events: none;
+  border: 2px solid ${options.borderColor};
+  background: rgba(97, 218, 251, 0.08);
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: all 50ms ease-out;
+  z-index: ${options.zIndex};
+}
+
+.${TOOLTIP_CLASS} {
+  position: fixed;
+  pointer-events: none;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #e5f6ff;
+  background: rgba(0, 0, 0, 0.78);
+  border: 1px solid ${options.borderColor};
+  border-radius: 6px;
+  padding: 8px 10px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+  z-index: ${options.zIndex};
+  max-width: 320px;
+  transform: translateY(-4px);
+  transition: opacity 50ms ease-out, transform 50ms ease-out;
+  opacity: 0;
+}
+
+.${TOOLTIP_CLASS} .fixdog-name {
+  display: block;
+  font-weight: 700;
+  color: ${options.borderColor};
+  margin-bottom: 2px;
+}
+
+.${TOOLTIP_CLASS} .fixdog-file {
+  display: block;
+  color: #98c379;
+  word-break: break-all;
+  margin-bottom: 2px;
+}
+
+.${TOOLTIP_CLASS} .fixdog-hint {
+  display: block;
+  color: #c9d1d9;
+  opacity: 0.8;
+}
+
+.${HIGHLIGHT_CLASS} {
+  outline: 2px solid ${options.borderColor};
+  outline-offset: 2px;
+  background: rgba(97, 218, 251, 0.08);
+}
+
+/* Selection highlight - persistent blue border for selected components */
+.${SELECTION_CLASS} {
+  position: fixed;
+  pointer-events: none;
+  border: 2px solid ${SELECTION_COLOR};
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 4px;
+  box-sizing: border-box;
+  z-index: ${options.zIndex - 1};
+}
+
+/* Numbered badge for selected components */
+.${SELECTION_BADGE_CLASS} {
+  position: fixed;
+  pointer-events: none;
+  width: 24px;
+  height: 24px;
+  background: ${SELECTION_COLOR};
+  color: #ffffff;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  z-index: ${options.zIndex + 1};
+}
+`;
+
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+class Overlay {
+    constructor(options) {
+        this.styleEl = null;
+        this.highlight = null;
+        this.tooltip = null;
+        this.mounted = false;
+        this.doc = document;
+        // Multi-selection tracking
+        this.selections = new Map();
+        this.options = options;
+    }
+    mount(doc = document) {
+        if (this.mounted)
+            return;
+        this.mounted = true;
+        this.doc = doc;
+        this.styleEl = doc.getElementById(STYLE_ELEMENT_ID);
+        if (!this.styleEl) {
+            this.styleEl = doc.createElement("style");
+            this.styleEl.id = STYLE_ELEMENT_ID;
+            this.styleEl.textContent = baseStyles(this.options);
+            doc.head.appendChild(this.styleEl);
+        }
+        this.highlight = doc.createElement("div");
+        this.highlight.className = `${OVERLAY_CLASS} ${HIGHLIGHT_CLASS}`;
+        this.tooltip = doc.createElement("div");
+        this.tooltip.className = TOOLTIP_CLASS;
+        doc.body.appendChild(this.highlight);
+        doc.body.appendChild(this.tooltip);
+    }
+    update(element, info) {
+        if (!this.mounted || !this.highlight || !this.tooltip)
+            return;
+        if (!element)
+            return this.hide();
+        const rect = element.getBoundingClientRect();
+        const position = {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height,
+        };
+        this.applyHighlight(position);
+        this.applyTooltip(position, info);
+    }
+    hide() {
+        if (!this.highlight || !this.tooltip)
+            return;
+        this.highlight.style.display = "none";
+        this.tooltip.style.opacity = "0";
+        this.tooltip.style.transform = "translateY(-4px)";
+    }
+    destroy() {
+        if (!this.mounted)
+            return;
+        this.mounted = false;
+        this.hide();
+        this.clearSelections();
+        this.highlight?.remove();
+        this.tooltip?.remove();
+        // Do not remove style tag to allow re-use across mounts within the same page.
+    }
+    // Add a selection highlight with numbered badge
+    addSelection(id, element, componentName) {
+        if (!this.mounted)
+            return;
+        // Remove existing selection with same ID if any
+        this.removeSelection(id);
+        const rect = element.getBoundingClientRect();
+        // Create selection highlight
+        const highlight = this.doc.createElement("div");
+        highlight.className = `${OVERLAY_CLASS} ${SELECTION_CLASS}`;
+        highlight.style.top = `${rect.top}px`;
+        highlight.style.left = `${rect.left}px`;
+        highlight.style.width = `${rect.width}px`;
+        highlight.style.height = `${rect.height}px`;
+        highlight.dataset.selectionId = String(id);
+        // Create numbered badge
+        const badge = this.doc.createElement("div");
+        badge.className = SELECTION_BADGE_CLASS;
+        badge.textContent = String(id);
+        badge.style.top = `${rect.top - 12}px`;
+        badge.style.left = `${rect.left - 12}px`;
+        badge.dataset.selectionId = String(id);
+        this.doc.body.appendChild(highlight);
+        this.doc.body.appendChild(badge);
+        this.selections.set(id, { element, highlight, badge, componentName });
+        // Set up scroll/resize listener for this selection
+        this.updateSelectionPositions();
+    }
+    // Remove a specific selection
+    removeSelection(id) {
+        const selection = this.selections.get(id);
+        if (selection) {
+            selection.highlight.remove();
+            selection.badge.remove();
+            this.selections.delete(id);
+        }
+    }
+    // Clear all selections
+    clearSelections() {
+        this.selections.forEach((selection) => {
+            selection.highlight.remove();
+            selection.badge.remove();
+        });
+        this.selections.clear();
+    }
+    // Update positions of all selection overlays (called on scroll/resize)
+    updateSelectionPositions() {
+        this.selections.forEach((selection, id) => {
+            const rect = selection.element.getBoundingClientRect();
+            selection.highlight.style.top = `${rect.top}px`;
+            selection.highlight.style.left = `${rect.left}px`;
+            selection.highlight.style.width = `${rect.width}px`;
+            selection.highlight.style.height = `${rect.height}px`;
+            selection.badge.style.top = `${rect.top - 12}px`;
+            selection.badge.style.left = `${rect.left - 12}px`;
+        });
+    }
+    // Get all current selections
+    getSelections() {
+        return this.selections;
+    }
+    applyHighlight(pos) {
+        if (!this.highlight)
+            return;
+        this.highlight.style.display = "block";
+        this.highlight.style.top = `${pos.top}px`;
+        this.highlight.style.left = `${pos.left}px`;
+        this.highlight.style.width = `${pos.width}px`;
+        this.highlight.style.height = `${pos.height}px`;
+    }
+    applyTooltip(pos, info) {
+        if (!this.tooltip)
+            return;
+        // const name = info.componentName || "Unknown component";
+        const line = Number.isFinite(info.lineNumber) ? info.lineNumber : "?";
+        const column = Number.isFinite(info.columnNumber)
+            ? `:${info.columnNumber}`
+            : "";
+        const file = info.fileName
+            ? `${info.fileName}:${line}${column}`
+            : "Source not available - ensure dev mode";
+        this.tooltip.innerHTML = `
+      <span class="fixdog-name">${name}</span>
+      <span class="fixdog-file">${file}</span>
+      <span class="fixdog-hint">Click to log • Esc to cancel</span>
+    `;
+        this.tooltip.style.opacity = "1";
+        this.tooltip.style.transform = "translateY(0)";
+        // Positioning
+        this.positionTooltip(pos);
+    }
+    positionTooltip(pos) {
+        if (!this.tooltip)
+            return;
+        const gap = 8;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Measure after ensuring content is set
+        const tooltipRect = this.tooltip.getBoundingClientRect();
+        const preferTop = this.shouldPlaceTop(pos, tooltipRect.height);
+        const top = preferTop
+            ? pos.top - tooltipRect.height - gap
+            : pos.top + pos.height + gap;
+        const left = clamp(pos.left + pos.width / 2 - tooltipRect.width / 2, 8, viewportWidth - tooltipRect.width - 8);
+        this.tooltip.style.top = `${clamp(top, 8, viewportHeight - tooltipRect.height - 8)}px`;
+        this.tooltip.style.left = `${left}px`;
+    }
+    shouldPlaceTop(pos, tooltipHeight) {
+        const spaceAbove = pos.top;
+        const spaceBelow = window.innerHeight - (pos.top + pos.height);
+        const preference = this.options.tooltipPosition;
+        if (preference === "top")
+            return true;
+        if (preference === "bottom")
+            return false;
+        if (spaceAbove >= tooltipHeight + 12)
+            return true;
+        if (spaceBelow >= tooltipHeight + 12)
+            return false;
+        return spaceAbove >= spaceBelow; // fallback to the larger side
+    }
+}
+
+const REACT_FIBER_PROP = "__reactFiber$";
+const REACT_INTERNAL_PROP = "__reactInternalInstance$";
+const REACT_CONTAINER_PROP = "__reactContainer$";
+const STACK_TOP = "react-stack-top-frame";
+const STACK_BOTTOM = "react_stack_bottom_frame";
+// Debug mode - check global flag or set to true for development
+const isDebugEnabled = () => {
+    return globalThis.__FIXDOG_DEBUG__ === true;
+};
+const debugLog = (...args) => {
+    if (isDebugEnabled())
+        console.log("[fixdog-sdk:debug]", ...args);
+};
+const possibleFiberKeys = (node) => {
+    const keys = [];
+    for (const key in node) {
+        if (key.startsWith(REACT_FIBER_PROP) ||
+            key.startsWith(REACT_INTERNAL_PROP) ||
+            key.startsWith(REACT_CONTAINER_PROP)) {
+            keys.push(key);
+        }
+    }
+    return keys;
+};
+const getFiberFromNode = (node) => {
+    let current = node;
+    while (current) {
+        const keys = possibleFiberKeys(current);
+        if (keys.length) {
+            const value = current[keys[0]]; // accessing React internals intentionally
+            if (value?.current)
+                return value.current; // container root form
+            return value;
+        }
+        const root = current.getRootNode();
+        if (root &&
+            root.host &&
+            current !== root.host) {
+            current = root.host;
+            continue;
+        }
+        current = current.parentElement;
+    }
+    return null;
+};
+const unwrapType = (type) => {
+    // handle memo/forwardRef/lazy wrappers
+    if (!type)
+        return type;
+    if (type.render)
+        return type.render; // forwardRef
+    if (type.type)
+        return type.type; // memo wraps actual type
+    if (type._payload && type._payload._result)
+        return type._payload._result; // lazy resolved
+    return type;
+};
+const getComponentName = (fiber, element) => {
+    const rawType = fiber?.type || fiber?.elementType;
+    const unwrapped = unwrapType(rawType);
+    const displayName = unwrapped?.displayName || unwrapped?.name;
+    if (displayName)
+        return displayName;
+    if (fiber?.tag === 5 && element)
+        return element.tagName.toLowerCase();
+    if (fiber?.tag === 7)
+        return "Fragment";
+    if (fiber?.tag === 4)
+        return "Portal";
+    return "AnonymousComponent";
+};
+// Read source from various possible locations
+const readSource = (candidate) => {
+    if (!candidate)
+        return null;
+    // Standard React _debugSource
+    if (candidate._debugSource) {
+        return {
+            fileName: candidate._debugSource.fileName,
+            lineNumber: candidate._debugSource.lineNumber,
+            columnNumber: candidate._debugSource.columnNumber ?? 0,
+        };
+    }
+    // Some bundlers attach __source to the element
+    if (candidate.__source) {
+        return {
+            fileName: candidate.__source.fileName,
+            lineNumber: candidate.__source.lineNumber,
+            columnNumber: candidate.__source.columnNumber ?? 0,
+        };
+    }
+    return null;
+};
+// Check for source info on the component type itself
+const readSourceFromType = (type) => {
+    if (!type)
+        return null;
+    const unwrapped = unwrapType(type);
+    // Some transforms add __source to the function
+    if (unwrapped?.__source) {
+        return {
+            fileName: unwrapped.__source.fileName,
+            lineNumber: unwrapped.__source.lineNumber,
+            columnNumber: unwrapped.__source.columnNumber ?? 0,
+        };
+    }
+    // Check _source (used by some bundlers)
+    if (unwrapped?._source) {
+        return {
+            fileName: unwrapped._source.fileName,
+            lineNumber: unwrapped._source.lineNumber,
+            columnNumber: unwrapped._source.columnNumber ?? 0,
+        };
+    }
+    return null;
+};
+const findDebugSource = (fiber) => {
+    const visited = new Set();
+    let current = fiber;
+    while (current && !visited.has(current)) {
+        visited.add(current);
+        // Check fiber's _debugSource
+        const direct = readSource(current) || readSource(current.alternate);
+        if (direct) {
+            debugLog("Found source via _debugSource on fiber");
+            return direct;
+        }
+        // Check type for source info
+        const typeSource = readSourceFromType(current.type) ||
+            readSourceFromType(current.elementType);
+        if (typeSource) {
+            debugLog("Found source via type");
+            return typeSource;
+        }
+        // Check owner
+        const owner = current._debugOwner;
+        const ownerSource = readSource(owner) || readSource(owner?.alternate);
+        if (ownerSource) {
+            debugLog("Found source via _debugOwner");
+            return ownerSource;
+        }
+        // Check owner's type
+        const ownerTypeSource = readSourceFromType(owner?.type) || readSourceFromType(owner?.elementType);
+        if (ownerTypeSource) {
+            debugLog("Found source via owner type");
+            return ownerTypeSource;
+        }
+        current = current.return || owner;
+    }
+    debugLog("No _debugSource found, will try stack trace");
+    return null;
+};
+const isInternalFrame = (frame) => {
+    const fn = frame.functionName || "";
+    const url = frame.url || "";
+    if (fn.includes(STACK_TOP) || fn.includes(STACK_BOTTOM))
+        return true;
+    if (fn === "exports.jsxDEV" || fn === "jsxDEV" || fn === "jsx")
+        return true;
+    if (url.includes("react-dom"))
+        return true;
+    if (url.includes("react-refresh"))
+        return true;
+    if (url.includes("react.development"))
+        return true;
+    if (url.includes("node_modules/react"))
+        return true;
+    return false;
+};
+// Extended regex to handle various stack trace formats including URLs with special characters
+const FRAME_REGEX = /at\s+(?:(.*?)\s+\()?([^():\s]+(?::[^():\s]+)*):(\d+):(\d+)\)?/;
+// Simpler regex for URL extraction - handles Next.js Turbopack URLs
+const URL_REGEX = /(https?:\/\/[^:\s]+):(\d+):(\d+)/;
+const parseStack = (stack) => {
+    if (!stack)
+        return [];
+    debugLog("Parsing stack:", stack);
+    const results = stack
+        .split("\n")
+        .map((line) => line.trim())
+        .map((line) => {
+        // Try URL regex first (more reliable for complex URLs)
+        const urlMatch = line.match(URL_REGEX);
+        if (urlMatch) {
+            const [, url, lineNum, colNum] = urlMatch;
+            // Extract function name if present
+            const fnMatch = line.match(/at\s+([^\s(]+)/);
+            const fn = fnMatch ? fnMatch[1] : null;
+            return {
+                functionName: fn,
+                url,
+                line: Number(lineNum),
+                column: Number(colNum),
+            };
+        }
+        // Fallback to original regex
+        const match = line.match(FRAME_REGEX);
+        if (!match)
+            return null;
+        const [, fn, url, lineNum, colNum] = match;
+        return {
+            functionName: fn || null,
+            url: url || null,
+            line: lineNum ? Number(lineNum) : null,
+            column: colNum ? Number(colNum) : null,
+        };
+    })
+        .filter((f) => !!f && !!f.url && f.line != null && f.column != null);
+    debugLog("Parsed frames:", results);
+    return results;
+};
+// Generate possible source map URLs for a JS file
+const getSourceMapUrls = (url) => {
+    const urls = [];
+    const withoutQuery = url.split("?")[0];
+    // Standard .map suffix
+    urls.push(`${withoutQuery}.map`);
+    // Next.js Turbopack might use different patterns
+    // Try adding .map before query params
+    if (url.includes("?")) {
+        urls.push(`${withoutQuery}.map${url.slice(url.indexOf("?"))}`);
+    }
+    return urls;
+};
+const sourceMapCache = new Map();
+const failedSourceMaps = new Set();
+const inlineSourceMapCache = new Map();
+// Try to extract inline source map from JS file content
+const extractInlineSourceMap = async (jsUrl) => {
+    if (inlineSourceMapCache.has(jsUrl))
+        return inlineSourceMapCache.get(jsUrl);
+    const promise = (async () => {
+        try {
+            debugLog("Fetching JS file to check for inline source map:", jsUrl);
+            const res = await fetch(jsUrl);
+            if (!res.ok)
+                return null;
+            const text = await res.text();
+            // Look for inline source map (base64 encoded)
+            const inlineMatch = text.match(/\/\/# sourceMappingURL=data:application\/json;(?:charset=utf-8;)?base64,([^\s]+)/);
+            if (inlineMatch) {
+                debugLog("Found inline source map in:", jsUrl);
+                const base64 = inlineMatch[1];
+                const decoded = atob(base64);
+                const map = JSON.parse(decoded);
+                return await new SourceMapConsumer(map);
+            }
+            // Also check for sourceMappingURL comment pointing to a file
+            const urlMatch = text.match(/\/\/# sourceMappingURL=([^\s]+)/);
+            if (urlMatch && !urlMatch[1].startsWith("data:")) {
+                const mapPath = urlMatch[1];
+                // Resolve relative to JS file
+                const baseUrl = jsUrl.substring(0, jsUrl.lastIndexOf("/") + 1);
+                const mapUrl = mapPath.startsWith("http") ? mapPath : baseUrl + mapPath;
+                debugLog("Found sourceMappingURL comment pointing to:", mapUrl);
+                const mapRes = await fetch(mapUrl);
+                if (mapRes.ok) {
+                    const mapText = await mapRes.text();
+                    const map = JSON.parse(mapText);
+                    return await new SourceMapConsumer(map);
+                }
+            }
+            return null;
+        }
+        catch (e) {
+            debugLog("Error extracting inline source map:", e);
+            return null;
+        }
+    })();
+    inlineSourceMapCache.set(jsUrl, promise);
+    return promise;
+};
+const fetchSourceMap = async (jsUrl) => {
+    // Check if we already tried and failed
+    if (failedSourceMaps.has(jsUrl))
+        return null;
+    if (sourceMapCache.has(jsUrl))
+        return sourceMapCache.get(jsUrl);
+    const promise = (async () => {
+        const mapUrls = getSourceMapUrls(jsUrl);
+        // First try standard .map URLs
+        for (const mapUrl of mapUrls) {
+            try {
+                debugLog("Fetching source map:", mapUrl);
+                const res = await fetch(mapUrl);
+                if (!res.ok) {
+                    debugLog("Source map not found at:", mapUrl, res.status);
+                    continue;
+                }
+                const text = await res.text();
+                // Check if it's valid JSON
+                let map;
+                try {
+                    map = JSON.parse(text);
+                }
+                catch {
+                    debugLog("Invalid source map JSON at:", mapUrl);
+                    continue;
+                }
+                debugLog("Source map loaded successfully from:", mapUrl);
+                const consumer = await new SourceMapConsumer(map);
+                return consumer;
+            }
+            catch (e) {
+                debugLog("Error fetching source map:", mapUrl, e);
+                continue;
+            }
+        }
+        // Try inline source map as fallback
+        const inlineConsumer = await extractInlineSourceMap(jsUrl);
+        if (inlineConsumer) {
+            return inlineConsumer;
+        }
+        failedSourceMaps.add(jsUrl);
+        return null;
+    })();
+    sourceMapCache.set(jsUrl, promise);
+    return promise;
+};
+const resolveFromStack = async (fiber) => {
+    // Handle both Error object and string stack
+    let stackString;
+    if (fiber?._debugStack?.stack) {
+        stackString = fiber._debugStack.stack;
+    }
+    else if (typeof fiber?._debugStack === "string") {
+        stackString = fiber._debugStack;
+    }
+    if (!stackString) {
+        debugLog("No stack string found on fiber");
+        return null;
+    }
+    const frames = parseStack(stackString);
+    // Find first non-internal frame (this is the component that created the element)
+    for (const frame of frames) {
+        if (!frame.url || frame.line == null || frame.column == null)
+            continue;
+        if (isInternalFrame(frame)) {
+            debugLog("Skipping internal frame:", frame.functionName);
+            continue;
+        }
+        debugLog("Processing frame:", frame);
+        const consumer = await fetchSourceMap(frame.url);
+        if (!consumer) {
+            debugLog("No source map for:", frame.url);
+            // Even without source map, we can use the bundled location
+            // This at least gives some info for debugging
+            continue;
+        }
+        const original = consumer.originalPositionFor({
+            line: frame.line,
+            column: frame.column,
+        });
+        debugLog("Original position:", original);
+        if (original.source && original.line != null && original.column != null) {
+            // Clean up the source path
+            let fileName = original.source;
+            // Remove webpack/turbopack prefixes
+            fileName = fileName.replace(/^webpack:\/\/[^/]*\//, "");
+            fileName = fileName.replace(/^\[project\]\//, "");
+            fileName = fileName.replace(/^\.\//, "");
+            return {
+                fileName,
+                lineNumber: original.line,
+                columnNumber: original.column,
+            };
+        }
+    }
+    debugLog("Could not resolve source from stack");
+    return null;
+};
+const resolveFromFiber = async (fiber, element) => {
+    if (!fiber)
+        return Promise.resolve(null);
+    const componentName = getComponentName(fiber, element);
+    debugLog("Resolving source for:", componentName);
+    // Try to find source from _debugSource first
+    const immediate = findDebugSource(fiber);
+    if (immediate) {
+        debugLog("Found immediate source:", immediate);
+        return Promise.resolve({
+            componentName,
+            fileName: immediate.fileName,
+            lineNumber: immediate.lineNumber,
+            columnNumber: immediate.columnNumber,
+            fiber,
+            element,
+        });
+    }
+    // Fall back to stack trace parsing
+    const stackSource = await resolveFromStack(fiber);
+    if (stackSource) {
+        debugLog("Found stack source:", stackSource);
+        return {
+            componentName,
+            fileName: stackSource.fileName,
+            lineNumber: stackSource.lineNumber,
+            columnNumber: stackSource.columnNumber,
+            fiber,
+            element,
+        };
+    }
+    // If we have a function name from the component, we can still return useful info
+    debugLog("No source found for:", componentName);
+    return {
+        componentName,
+        fileName: "Source not available - ensure dev build with source maps",
+        lineNumber: 0,
+        columnNumber: 0,
+        fiber,
+        element,
+    };
+};
+const getSourceFromElement = (element) => {
+    if (!element)
+        return Promise.resolve(null);
+    const fiber = getFiberFromNode(element);
+    if (!fiber) {
+        debugLog("No fiber found for element:", element);
+        return Promise.resolve(null);
+    }
+    debugLog("Found fiber for element:", element, fiber);
+    return resolveFromFiber(fiber, element);
+};
+/**
+ * Get the ancestor component chain from a fiber up to the root.
+ * Returns an array of component names, starting from the immediate parent.
+ * e.g., ['Header', 'Layout', 'App'] for a Button inside Header inside Layout inside App
+ */
+const getComponentAncestors = (fiber) => {
+    const ancestors = [];
+    let current = fiber?.return;
+    while (current) {
+        const name = getComponentName(current);
+        if (name && name !== 'AnonymousComponent') {
+            ancestors.push(name);
+        }
+        current = current.return;
+    }
+    return ancestors;
+};
+// Export for debugging purposes
+const enableDebug = () => {
+    globalThis.__FIXDOG_DEBUG__ = true;
+};
+
+/*
+ * fixdog-sdk types
+ * Core interfaces shared across inspector modules.
+ */
+const DEFAULT_SHORTCUT = 'ctrl+shift+x';
+const isProd = typeof process !== 'undefined' &&
+    typeof process.env !== 'undefined' &&
+    process.env.NODE_ENV === 'production';
+const DEFAULT_OPTIONS = {
+    shortcut: DEFAULT_SHORTCUT,
+    useOptionClick: true,
+    enabled: !isProd,
+    zIndex: 999999,
+    borderColor: '#61dafb',
+    tooltipPosition: 'auto',
+    enableSidebar: true,
+    apiEndpoint: 'http://localhost:3000',
+};
+
+const normalize = (token) => token.trim().toLowerCase();
+const tokenToFlags = (tokens) => {
+    const flags = { ctrl: false, meta: false, alt: false, shift: false, key: null };
+    tokens.forEach((token) => {
+        switch (normalize(token)) {
+            case 'ctrl':
+            case 'control':
+                flags.ctrl = true;
+                break;
+            case 'cmd':
+            case 'command':
+            case 'meta':
+                flags.meta = true;
+                break;
+            case 'alt':
+            case 'option':
+                flags.alt = true;
+                break;
+            case 'shift':
+                flags.shift = true;
+                break;
+            default:
+                flags.key = normalize(token);
+        }
+    });
+    return flags;
+};
+const parseShortcut = (shortcut) => {
+    const value = shortcut || DEFAULT_SHORTCUT;
+    return tokenToFlags(value.split('+'));
+};
+const matchesShortcut = (event, shortcut) => {
+    const parsed = parseShortcut(shortcut);
+    const key = event.key?.toLowerCase();
+    return ((!!parsed.key ? key === parsed.key : true) &&
+        event.ctrlKey === parsed.ctrl &&
+        event.metaKey === parsed.meta &&
+        event.altKey === parsed.alt &&
+        event.shiftKey === parsed.shift);
+};
+const isOptionClick = (event, useOptionClick) => {
+    if (!useOptionClick)
+        return false;
+    return event.altKey && event.button === 0; // left click + alt/option
+};
+
+// Dynamic import helper for the isolated sidebar runtime
+// This loads a separate bundle with its own React instance to avoid version conflicts
+async function loadSidebarRuntime() {
+    // Get the URL of the current module and resolve the sidebar bundle path
+    const currentModuleUrl = import.meta.url;
+    const sidebarUrl = new URL("./sidebar-runtime.esm.js", currentModuleUrl).href;
+    try {
+        const module = await import(/* @vite-ignore */ sidebarUrl);
+        return module;
+    }
+    catch (error) {
+        console.error("[fixdog-sdk] Failed to load sidebar runtime:", error);
+        throw error;
+    }
+}
+const message = {
+    noFiber: "[fixdog-sdk] No React fiber found for element.",
+    disabled: "[fixdog-sdk] Inspector disabled (production build)."};
+class Inspector {
+    async findInfoInElementAndAncestors(element) {
+        let current = element;
+        while (current) {
+            const info = await getSourceFromElement(current);
+            if (info)
+                return { element: current, info };
+            current = current.parentElement;
+        }
+        return { element: null, info: null };
+    }
+    async findInfoFromEvent(event) {
+        const path = event.composedPath?.() ?? [];
+        for (const node of path) {
+            if (node instanceof Element) {
+                const found = await this.findInfoInElementAndAncestors(node);
+                if (found.info)
+                    return found;
+            }
+        }
+        const target = event.target;
+        return this.findInfoInElementAndAncestors(target);
+    }
+    constructor(options = {}) {
+        this.state = { active: false, persistent: false };
+        this.lastElement = null;
+        this.lastInfo = null;
+        this.boundMouseMove = (e) => this.handleMouseMove(e);
+        this.boundClick = (e) => this.handleClick(e);
+        this.boundKeyDown = (e) => this.handleKeyDown(e);
+        this.boundScroll = () => this.reposition();
+        this.boundResize = () => this.reposition();
+        this.mounted = false;
+        this.requestId = 0;
+        // Multi-select state
+        this.selectedComponents = [];
+        this.nextComponentId = 1;
+        this.sidebarOpen = false;
+        this.sidebarInitialized = false;
+        this.boundClearSelections = () => this.handleClearSelections();
+        this.boundRemoveComponent = (e) => this.handleRemoveComponent(e);
+        this.options = {
+            ...DEFAULT_OPTIONS,
+            ...options,
+            enabled: typeof options.enabled === "boolean"
+                ? options.enabled
+                : DEFAULT_OPTIONS.enabled,
+        };
+        this.overlayOptions = {
+            zIndex: this.options.zIndex ?? DEFAULT_OPTIONS.zIndex,
+            borderColor: this.options.borderColor ?? DEFAULT_OPTIONS.borderColor,
+            tooltipPosition: this.options.tooltipPosition ?? DEFAULT_OPTIONS.tooltipPosition,
+        };
+        this.overlay = new Overlay(this.overlayOptions);
+        // Initialize sidebar if enabled
+        if (this.options.enableSidebar && !this.sidebarInitialized) {
+            this.initializeSidebar();
+        }
+    }
+    async initializeSidebar() {
+        if (typeof window === "undefined")
+            return;
+        try {
+            // Dynamically load the sidebar runtime which has its own bundled React
+            // This ensures the sidebar works regardless of the host app's React version
+            const { initializeSidebarRuntime } = await loadSidebarRuntime();
+            initializeSidebarRuntime({
+                apiEndpoint: this.options.apiEndpoint ?? DEFAULT_OPTIONS.apiEndpoint,
+            });
+            this.sidebarInitialized = true;
+            console.log("[fixdog-sdk] Sidebar runtime loaded successfully (isolated React)");
+        }
+        catch (error) {
+            console.error("[fixdog-sdk] Failed to initialize sidebar:", error);
+        }
+    }
+    activate() {
+        if (!this.options.enabled) {
+            console.info(message.disabled);
+            return;
+        }
+        if (this.mounted)
+            return;
+        this.mounted = true;
+        this.overlay.mount();
+        window.addEventListener("mousemove", this.boundMouseMove, true);
+        window.addEventListener("click", this.boundClick, true);
+        window.addEventListener("keydown", this.boundKeyDown, true);
+        window.addEventListener("scroll", this.boundScroll, true);
+        window.addEventListener("resize", this.boundResize, true);
+        window.addEventListener("fixdog:clear-selections", this.boundClearSelections);
+        window.addEventListener("fixdog:remove-component", this.boundRemoveComponent);
+        this.state.active = true;
+    }
+    deactivate() {
+        if (!this.mounted)
+            return;
+        window.removeEventListener("mousemove", this.boundMouseMove, true);
+        window.removeEventListener("click", this.boundClick, true);
+        window.removeEventListener("keydown", this.boundKeyDown, true);
+        window.removeEventListener("scroll", this.boundScroll, true);
+        window.removeEventListener("resize", this.boundResize, true);
+        window.removeEventListener("fixdog:clear-selections", this.boundClearSelections);
+        window.removeEventListener("fixdog:remove-component", this.boundRemoveComponent);
+        this.overlay.hide();
+        this.clearSelections();
+        this.lastElement = null;
+        this.lastInfo = null;
+        this.state = { active: false, persistent: false };
+        this.mounted = false;
+    }
+    destroy() {
+        this.deactivate();
+        this.overlay.destroy();
+    }
+    async handleMouseMove(event) {
+        if (!this.state.active || !this.options.enabled)
+            return;
+        const currentId = ++this.requestId;
+        const { element: target, info } = await this.findInfoFromEvent(event);
+        const shouldInspect = this.state.persistent || event.altKey;
+        if (!shouldInspect || !target) {
+            this.overlay.hide();
+            this.lastElement = null;
+            this.lastInfo = null;
+            this.options.onHover?.(null);
+            return;
+        }
+        if (currentId !== this.requestId)
+            return; // stale
+        if (!info) {
+            this.overlay.hide();
+            this.options.onHover?.(null);
+            return;
+        }
+        this.lastElement = target;
+        this.lastInfo = info;
+        this.overlay.update(target, info);
+        this.options.onHover?.(info);
+    }
+    handleClick(event) {
+        if (!this.state.active || !this.options.enabled)
+            return;
+        const shouldHandle = this.state.persistent ||
+            isOptionClick(event, this.options.useOptionClick ?? true);
+        if (!shouldHandle)
+            return;
+        const currentId = ++this.requestId;
+        this.findInfoFromEvent(event).then(({ element: target, info }) => {
+            if (!target)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (currentId !== this.requestId)
+                return; // stale
+            if (!info) {
+                console.warn(message.noFiber);
+                return;
+            }
+            this.lastElement = target;
+            this.lastInfo = info;
+            this.overlay.update(target, info);
+            this.log(info);
+            // Open sidebar with element info
+            if (this.options.enableSidebar) {
+                this.openSidebar(info);
+            }
+            this.options.onClick?.(info);
+        });
+    }
+    createSelectedComponent(info) {
+        const elementInfo = {
+            componentName: info.componentName,
+            filePath: info.fileName,
+            line: info.lineNumber,
+            column: info.columnNumber,
+            componentTree: info.fiber ? getComponentAncestors(info.fiber) : undefined,
+        };
+        // Get bounding box if element is available
+        if (info.element) {
+            const rect = info.element.getBoundingClientRect();
+            elementInfo.box = {
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+            };
+        }
+        // Create editor URL format
+        const editorUrl = `${info.fileName}:${info.lineNumber}:${info.columnNumber}`;
+        // Get next available ID (fills gaps)
+        const id = this.getNextAvailableId();
+        const selectedComponent = {
+            id,
+            editorUrl,
+            elementInfo,
+            elementRef: info.element ?? undefined,
+        };
+        return selectedComponent;
+    }
+    openSidebar(info) {
+        const selectedComponent = this.createSelectedComponent(info);
+        if (!this.sidebarOpen) {
+            // First selection - open sidebar
+            this.selectedComponents = [selectedComponent];
+            this.sidebarOpen = true;
+            // Add selection highlight to overlay (if element exists)
+            if (info.element) {
+                this.overlay.addSelection(selectedComponent.id, info.element, selectedComponent.elementInfo.componentName);
+            }
+            // Dispatch open sidebar event
+            const event = new CustomEvent("fixdog:open-sidebar", {
+                detail: {
+                    editorUrl: selectedComponent.editorUrl,
+                    elementInfo: selectedComponent.elementInfo,
+                    selectedComponent,
+                },
+            });
+            window.dispatchEvent(event);
+        }
+        else {
+            // Sidebar already open - add to selection
+            this.selectedComponents.push(selectedComponent);
+            // Add selection highlight to overlay (if element exists)
+            if (info.element) {
+                this.overlay.addSelection(selectedComponent.id, info.element, selectedComponent.elementInfo.componentName);
+            }
+            // Dispatch add component event
+            const event = new CustomEvent("fixdog:add-component", {
+                detail: {
+                    selectedComponent,
+                },
+            });
+            window.dispatchEvent(event);
+        }
+        // Store selected components globally for reference
+        window.__FIXDOG_SELECTED_COMPONENTS__ = this.selectedComponents;
+    }
+    clearSelections() {
+        this.selectedComponents = [];
+        this.nextComponentId = 1;
+        this.sidebarOpen = false;
+        this.overlay.clearSelections();
+        window.__FIXDOG_SELECTED_COMPONENTS__ = [];
+    }
+    handleClearSelections() {
+        this.clearSelections();
+    }
+    handleRemoveComponent(event) {
+        const { componentId } = event.detail;
+        this.removeSelection(componentId);
+    }
+    // Calculate the next available ID (fill gaps first)
+    getNextAvailableId() {
+        if (this.selectedComponents.length === 0) {
+            return 1;
+        }
+        // Get all current IDs sorted
+        const usedIds = new Set(this.selectedComponents.map((c) => c.id));
+        // Find the first gap starting from 1
+        let nextId = 1;
+        while (usedIds.has(nextId)) {
+            nextId++;
+        }
+        return nextId;
+    }
+    // Public method to remove a specific selection
+    removeSelection(componentId) {
+        this.selectedComponents = this.selectedComponents.filter((c) => c.id !== componentId);
+        this.overlay.removeSelection(componentId);
+        window.__FIXDOG_SELECTED_COMPONENTS__ = this.selectedComponents;
+        // Recalculate next ID to fill gaps
+        this.nextComponentId = this.getNextAvailableId();
+        // If no more selections, close sidebar
+        if (this.selectedComponents.length === 0) {
+            this.sidebarOpen = false;
+            this.nextComponentId = 1;
+        }
+    }
+    handleKeyDown(event) {
+        if (!this.options.enabled)
+            return;
+        if (matchesShortcut(event, this.options.shortcut)) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.togglePersistent();
+            return;
+        }
+        if (event.key === "Escape") {
+            this.state.persistent = false;
+            this.overlay.hide();
+            // Don't clear selections on Escape - let sidebar handle that
+        }
+    }
+    togglePersistent() {
+        this.state.persistent = !this.state.persistent;
+        if (!this.state.persistent) {
+            this.overlay.hide();
+        }
+    }
+    reposition() {
+        if (this.lastElement && this.lastInfo) {
+            this.overlay.update(this.lastElement, this.lastInfo);
+        }
+        // Also update selection positions
+        this.overlay.updateSelectionPositions();
+    }
+    log(info) {
+        const { componentName, fileName, lineNumber } = info;
+        console.log("%c[fixdog-sdk]%c %s %c@ %s:%d", "color: #61dafb; font-weight: bold", "color: #98c379; font-weight: bold", componentName, "color: #888", fileName, lineNumber);
+        console.log(info);
+    }
+}
+
+export { DEFAULT_OPTIONS as D, Inspector as I, enableDebug as e };
+//# sourceMappingURL=inspector-DQEtAjyM.esm.js.map