@keak/sdk 2.0.9 → 2.1.0

package/dist/index.js

@@ -499,116 +499,9 @@ function getSourceConfidence(sourceInfo) {
     }
     return 'low';
 }
-/**
- * Check if an element is part of a dynamically generated list (.map(), .forEach(), etc.)
- *
- * Detection strategy:
- * 1. Check if multiple siblings share the same source location (primary method)
- * 2. This indicates they're generated from the same template (likely a map)
- * 3. Also check if the element is a descendant of an element that's in a map
- *
- * @param element The DOM element to check
- * @returns Object with isInMap (boolean) and reason (string) if detected
- */
-function isElementInDynamicList(element) {
-    // First, check if the element itself is in a map
-    const directCheck = checkElementForMapPattern(element);
-    if (directCheck.isInMap) {
-        return directCheck;
-    }
-    // If not, check if any ancestor is in a map
-    let current = element.parentElement;
-    let depth = 0;
-    const maxDepth = 10; // Limit traversal depth to avoid performance issues
-    while (current && depth < maxDepth) {
-        const ancestorCheck = checkElementForMapPattern(current);
-        if (ancestorCheck.isInMap) {
-            return {
-                isInMap: true,
-                reason: `This element is a child of a dynamically generated list item. ${ancestorCheck.reason}`,
-                siblingCount: ancestorCheck.siblingCount
-            };
-        }
-        current = current.parentElement;
-        depth++;
-    }
-    return { isInMap: false };
-}
-/**
- * Helper function to check if a specific element is part of a map pattern
- */
-function checkElementForMapPattern(element) {
-    const parent = element.parentElement;
-    if (!parent) {
-        return { isInMap: false };
-    }
-    // Get all sibling elements (including the element itself)
-    const siblings = Array.from(parent.children).filter((sibling) => sibling instanceof HTMLElement);
-    // Need at least 2 siblings to detect a pattern
-    if (siblings.length < 2) {
-        return { isInMap: false };
-    }
-    // Get source location for the target element
-    const elementSource = getReactFiberSource(element);
-    // If we can't get source for the element, try data-keak-src attribute
-    let elementSourceKey = null;
-    if (elementSource) {
-        elementSourceKey = `${elementSource.fileName}:${elementSource.lineNumber}`;
-    }
-    else {
-        const keakSrc = element.getAttribute('data-keak-src');
-        if (keakSrc) {
-            // Format is "file:line:column", we use file:line as key
-            const parts = keakSrc.split(':');
-            if (parts.length >= 2) {
-                const fileName = parts.slice(0, -2).join(':'); // Handle Windows paths
-                const lineNumber = parts[parts.length - 2];
-                elementSourceKey = `${fileName}:${lineNumber}`;
-            }
-        }
-    }
-    // If we don't have source info, we can't detect map patterns reliably
-    if (!elementSourceKey) {
-        return { isInMap: false };
-    }
-    // Check how many siblings share the same source location
-    let matchingSiblings = 0;
-    for (const sibling of siblings) {
-        const siblingSource = getReactFiberSource(sibling);
-        let siblingSourceKey = null;
-        if (siblingSource) {
-            siblingSourceKey = `${siblingSource.fileName}:${siblingSource.lineNumber}`;
-        }
-        else {
-            const keakSrc = sibling.getAttribute('data-keak-src');
-            if (keakSrc) {
-                const parts = keakSrc.split(':');
-                if (parts.length >= 2) {
-                    const fileName = parts.slice(0, -2).join(':');
-                    const lineNumber = parts[parts.length - 2];
-                    siblingSourceKey = `${fileName}:${lineNumber}`;
-                }
-            }
-        }
-        if (siblingSourceKey === elementSourceKey) {
-            matchingSiblings++;
-        }
-    }
-    // If 2+ siblings share the same source location, it's likely a map/forEach
-    // We use >= 2 because the element itself counts as one
-    if (matchingSiblings >= 2) {
-        return {
-            isInMap: true,
-            reason: `Multiple elements (${matchingSiblings}) share the same source location, indicating they're generated from a .map() or similar dynamic list pattern`,
-            siblingCount: matchingSiblings
-        };
-    }
-    return { isInMap: false };
-}
 
 const ElementSelector = ({ onElementSelected, onCancel, }) => {
     const [hoveredElement, setHoveredElement] = useState(null);
-    const [mapWarning, setMapWarning] = useState({ show: false, message: "" });
     const highlightRef = useRef(null);
     useEffect(() => {
         const handleMouseMove = (e) => {
@@ -633,27 +526,9 @@ const ElementSelector = ({ onElementSelected, onCancel, }) => {
                 target.closest(".keak-toolbar") ||
                 target.closest(".keak-selector-highlight") ||
                 target.closest(".keak-selector-tooltip") ||
-                target.closest(".keak-selector-instructions") ||
-                target.closest(".keak-map-warning")) {
+                target.closest(".keak-selector-instructions")) {
                 return;
             }
-            // Check if element is inside a dynamic list (.map(), .forEach(), etc.)
-            const mapCheck = isElementInDynamicList(target);
-            if (mapCheck.isInMap) {
-                // Show warning and prevent selection
-                setMapWarning({
-                    show: true,
-                    message: mapCheck.reason || "Element is part of a dynamically generated list",
-                    siblingCount: mapCheck.siblingCount
-                });
-                // Auto-hide warning after 5 seconds
-                setTimeout(() => {
-                    setMapWarning({ show: false, message: "" });
-                }, 5000);
-                return; // Prevent selection
-            }
-            // Clear any existing warning
-            setMapWarning({ show: false, message: "" });
             onElementSelected(target);
         };
         const handleKeyDown = (e) => {
@@ -816,65 +691,7 @@ const ElementSelector = ({ onElementSelected, onCancel, }) => {
         return { selector, text, source, impact };
     };
     const elementInfo = hoveredElement ? getElementInfo(hoveredElement) : null;
-    return (jsxs(Fragment, { children: [jsx("div", { ref: highlightRef, className: "keak-selector-highlight" }), mapWarning.show && (jsx("div", { className: "keak-map-warning", style: {
-                    position: "fixed",
-                    top: "140px",
-                    left: "50%",
-                    transform: "translateX(-50%)",
-                    maxWidth: "500px",
-                    background: "hsl(0 84.2% 60.2%)",
-                    border: "1px solid hsl(0 72.2% 50.6%)",
-                    borderRadius: "8px",
-                    padding: "16px 20px",
-                    boxShadow: "0 10px 30px 0 rgba(0, 0, 0, 0.3)",
-                    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-                    zIndex: 1000000,
-                    color: "white",
-                    animation: "slideDown 0.3s ease-out",
-                }, children: jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" }, children: [jsx("div", { style: {
-                                fontSize: "20px",
-                                lineHeight: "1",
-                                marginTop: "2px",
-                            }, children: "\u26A0\uFE0F" }), jsxs("div", { style: { flex: 1 }, children: [jsx("div", { style: {
-                                        fontSize: "15px",
-                                        fontWeight: 600,
-                                        marginBottom: "8px",
-                                    }, children: "Cannot select element from dynamic list" }), jsx("div", { style: {
-                                        fontSize: "13px",
-                                        lineHeight: "1.5",
-                                        opacity: 0.95,
-                                        marginBottom: "12px",
-                                    }, children: "This element is part of a dynamically generated list (.map(), .forEach(), etc.). Selecting individual items isn't supported because:" }), jsxs("ul", { style: {
-                                        fontSize: "13px",
-                                        lineHeight: "1.6",
-                                        margin: "0 0 12px 0",
-                                        paddingLeft: "20px",
-                                        opacity: 0.95,
-                                        listStyle: "none",
-                                    }, children: [jsxs("li", { style: { position: "relative", paddingLeft: "16px" }, children: [jsx("span", { style: { position: "absolute", left: 0 }, children: "-" }), "The data might come from props or a database"] }), jsxs("li", { style: { position: "relative", paddingLeft: "16px" }, children: [jsx("span", { style: { position: "absolute", left: 0 }, children: "-" }), "Variants would affect all items, not just one"] })] }), jsx("div", { style: {
-                                        fontSize: "13px",
-                                        fontWeight: 600,
-                                        marginTop: "12px",
-                                        paddingTop: "12px",
-                                        borderTop: "1px solid rgba(255, 255, 255, 0.2)",
-                                    }, children: "\uD83D\uDCA1 Alternatives:" }), jsxs("ul", { style: {
-                                        fontSize: "13px",
-                                        lineHeight: "1.6",
-                                        margin: "8px 0 0 0",
-                                        paddingLeft: "20px",
-                                        opacity: 0.95,
-                                        listStyle: "none",
-                                    }, children: [jsxs("li", { style: { position: "relative", paddingLeft: "16px" }, children: [jsx("span", { style: { position: "absolute", left: 0 }, children: "-" }), "Select the parent container to test the entire list"] }), jsxs("li", { style: { position: "relative", paddingLeft: "16px" }, children: [jsx("span", { style: { position: "absolute", left: 0 }, children: "-" }), "Extract list items into a separate component and wrap it in Experiment/Variant"] })] })] }), jsx("button", { onClick: () => setMapWarning({ show: false, message: "" }), style: {
-                                background: "transparent",
-                                border: "none",
-                                color: "white",
-                                cursor: "pointer",
-                                fontSize: "18px",
-                                lineHeight: "1",
-                                padding: "0",
-                                opacity: 0.8,
-                                transition: "opacity 0.2s",
-                            }, onMouseEnter: (e) => (e.currentTarget.style.opacity = "1"), onMouseLeave: (e) => (e.currentTarget.style.opacity = "0.8"), children: "\u00D7" })] }) })), hoveredElement && elementInfo && (jsxs("div", { className: "keak-selector-tooltip", style: {
+    return (jsxs(Fragment, { children: [jsx("div", { ref: highlightRef, className: "keak-selector-highlight" }), hoveredElement && elementInfo && (jsxs("div", { className: "keak-selector-tooltip", style: {
                     position: "fixed",
                     bottom: `${window.innerHeight -
                         hoveredElement.getBoundingClientRect().top +
@@ -1494,19 +1311,6 @@ const KeakToolbar = ({ position = 'bottom-right', theme = 'auto' }) => {
         console.log('[Keak Toolbar] Tag:', element.tagName);
         console.log('[Keak Toolbar] HTML (first 300 chars):', element.outerHTML.substring(0, 300));
         console.log('[Keak Toolbar] All attributes:', Array.from(element.attributes).map(a => `${a.name}="${a.value}"`).join(', '));
-        // Check if element is inside a dynamic list (.map(), .forEach(), etc.)
-        const mapCheck = isElementInDynamicList(element);
-        if (mapCheck.isInMap) {
-            console.log('[Keak Toolbar] ⚠️ Element is part of a dynamic list, preventing selection');
-            console.log('[Keak Toolbar] Reason:', mapCheck.reason);
-            // Show a brief visual feedback
-            element.style.transition = 'all 0.3s';
-            element.style.outline = '3px solid #ef4444';
-            setTimeout(() => { element.style.outline = ''; }, 2000);
-            // Don't proceed with selection
-            setIsSelecting(false);
-            return;
-        }
         setSelectedElement(element);
         setIsSelecting(false);
         updateSelectedHighlight(element);