@promakeai/inspector 1.0.0 → 1.0.3

package/src/__tests__/App.test.tsx

@@ -1,373 +0,0 @@
-/**
- * Unit tests for element stack feature
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-describe('Element Stack Feature', () => {
-  describe('getElementsAtPoint', () => {
-    beforeEach(() => {
-      document.body.innerHTML = '';
-    });
-
-    it('should return clicked element as first item', () => {
-      // Create test DOM structure
-      const container = document.createElement('div');
-      container.setAttribute('data-testid', 'container');
-      container.style.width = '200px';
-      container.style.height = '200px';
-      document.body.appendChild(container);
-
-      // Test that we can get the element
-      const result = document.body.querySelector('[data-testid="container"]');
-      
-      expect(result).toBe(container);
-      expect(result?.getAttribute('data-testid')).toBe('container');
-    });
-
-    it('should collect meaningful children with data-dev-id', () => {
-      // Create nested structure with data-dev-id
-      const parent = document.createElement('div');
-      parent.setAttribute('data-testid', 'parent');
-      
-      const childWithDevId = document.createElement('div');
-      childWithDevId.setAttribute('data-dev-id', 'src/Component.tsx:10:5');
-      childWithDevId.setAttribute('data-testid', 'child-with-id');
-      childWithDevId.textContent = 'Component';
-      
-      const childWithoutDevId = document.createElement('div');
-      childWithoutDevId.setAttribute('data-testid', 'child-without-id');
-      childWithoutDevId.textContent = 'Regular div';
-      
-      parent.appendChild(childWithDevId);
-      parent.appendChild(childWithoutDevId);
-      document.body.appendChild(parent);
-
-      // Verify structure
-      expect(parent.children.length).toBe(2);
-      expect(childWithDevId.hasAttribute('data-dev-id')).toBe(true);
-      expect(childWithoutDevId.hasAttribute('data-dev-id')).toBe(false);
-    });
-
-    it('should filter out SVG elements', () => {
-      const container = document.createElement('div');
-      
-      const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svgElement.setAttribute('data-testid', 'svg-element');
-      
-      const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      pathElement.setAttribute('data-testid', 'path-element');
-      
-      svgElement.appendChild(pathElement);
-      container.appendChild(svgElement);
-      document.body.appendChild(container);
-
-      // Verify SVG elements are identified correctly
-      expect(svgElement instanceof SVGElement).toBe(true);
-      expect(pathElement instanceof SVGElement).toBe(true);
-      expect(container instanceof HTMLElement).toBe(true);
-    });
-
-    it('should collect interactive elements (button, input, img)', () => {
-      const container = document.createElement('div');
-      
-      const button = document.createElement('button');
-      button.setAttribute('data-testid', 'button');
-      button.textContent = 'Click me';
-      
-      const input = document.createElement('input');
-      input.setAttribute('data-testid', 'input');
-      
-      const img = document.createElement('img');
-      img.setAttribute('data-testid', 'image');
-      img.src = 'test.jpg';
-      
-      container.appendChild(button);
-      container.appendChild(input);
-      container.appendChild(img);
-      document.body.appendChild(container);
-
-      // Verify interactive elements
-      expect(button.tagName).toBe('BUTTON');
-      expect(input.tagName).toBe('INPUT');
-      expect(img.tagName).toBe('IMG');
-    });
-
-    it('should go 3 levels deep recursively', () => {
-      // Create 4-level deep structure
-      const level1 = document.createElement('div');
-      level1.setAttribute('data-testid', 'level-1');
-      level1.textContent = 'Level 1';
-      
-      const level2 = document.createElement('div');
-      level2.setAttribute('data-testid', 'level-2');
-      level2.textContent = 'Level 2';
-      
-      const level3 = document.createElement('div');
-      level3.setAttribute('data-testid', 'level-3');
-      level3.textContent = 'Level 3';
-      
-      const level4 = document.createElement('div');
-      level4.setAttribute('data-testid', 'level-4');
-      level4.textContent = 'Level 4';
-      
-      level3.appendChild(level4);
-      level2.appendChild(level3);
-      level1.appendChild(level2);
-      document.body.appendChild(level1);
-
-      // Verify nesting
-      expect(level1.querySelector('[data-testid="level-2"]')).toBe(level2);
-      expect(level1.querySelector('[data-testid="level-3"]')).toBe(level3);
-      expect(level1.querySelector('[data-testid="level-4"]')).toBe(level4);
-    });
-
-    it('should prioritize elements with data-dev-id', () => {
-      const container = document.createElement('div');
-      
-      const regularDiv = document.createElement('div');
-      regularDiv.setAttribute('data-testid', 'regular');
-      regularDiv.textContent = 'Regular';
-      
-      const componentDiv = document.createElement('div');
-      componentDiv.setAttribute('data-testid', 'component');
-      componentDiv.setAttribute('data-dev-id', 'src/Component.tsx:5:10');
-      componentDiv.textContent = 'Component';
-      
-      container.appendChild(regularDiv);
-      container.appendChild(componentDiv);
-      document.body.appendChild(container);
-
-      // Get all children with data-dev-id
-      const childrenWithDevId = Array.from(container.children).filter(
-        (c) => c.hasAttribute('data-dev-id')
-      );
-      const childrenWithoutDevId = Array.from(container.children).filter(
-        (c) => !c.hasAttribute('data-dev-id')
-      );
-
-      // Verify prioritization logic
-      expect(childrenWithDevId.length).toBe(1);
-      expect(childrenWithoutDevId.length).toBe(1);
-      expect(childrenWithDevId[0]).toBe(componentDiv);
-    });
-  });
-
-  describe('Element Stack Button Rendering', () => {
-    it('should show buttons only when stack length > 1', () => {
-      const singleElementStack: HTMLElement[] = [document.createElement('div')];
-      const multiElementStack: HTMLElement[] = [
-        document.createElement('div'),
-        document.createElement('span'),
-      ];
-
-      expect(singleElementStack.length).toBe(1);
-      expect(singleElementStack.length > 1).toBe(false);
-      
-      expect(multiElementStack.length).toBe(2);
-      expect(multiElementStack.length > 1).toBe(true);
-    });
-
-    it('should identify selected element correctly', () => {
-      const element1 = document.createElement('div');
-      const element2 = document.createElement('span');
-      const selectedElement = element1;
-
-      expect(element1 === selectedElement).toBe(true);
-      expect(element2 === selectedElement).toBe(false);
-    });
-
-    it('should apply correct styles based on selection', () => {
-      const selectedColor = 'rgb(58, 18, 189)';
-      const unselectedColor = '#ffffff';
-      
-      const isSelected = true;
-      const isNotSelected = false;
-
-      expect(isSelected ? selectedColor : unselectedColor).toBe(selectedColor);
-      expect(isNotSelected ? selectedColor : unselectedColor).toBe(unselectedColor);
-    });
-  });
-
-  describe('Element Name Utilities', () => {
-    it('should map common HTML tags to user-friendly names', () => {
-      const tagToName: Record<string, string> = {
-        div: 'Container',
-        span: 'Text',
-        img: 'Image',
-        button: 'Button',
-        a: 'Link',
-        input: 'Input',
-        textarea: 'TextArea',
-        h1: 'Heading',
-        p: 'Paragraph',
-        section: 'Section',
-      };
-
-      Object.entries(tagToName).forEach(([tag, name]) => {
-        expect(tagToName[tag]).toBe(name);
-      });
-    });
-
-    it('should format element labels correctly', () => {
-      const formatLabel = (displayName: string, tagName: string) => {
-        return `${displayName} (${tagName.toLowerCase()})`;
-      };
-
-      expect(formatLabel('Container', 'DIV')).toBe('Container (div)');
-      expect(formatLabel('Button', 'BUTTON')).toBe('Button (button)');
-      expect(formatLabel('Image', 'IMG')).toBe('Image (img)');
-    });
-
-    it('should handle missing labels gracefully', () => {
-      const getLabel = (key: string, labels?: Record<string, string>, defaultValue?: string) => {
-        return labels?.[key] || defaultValue || 'Element';
-      };
-
-      expect(getLabel('elementContainer', undefined, 'Container')).toBe('Container');
-      expect(getLabel('elementContainer', {}, 'Container')).toBe('Container');
-      expect(getLabel('elementContainer', { elementContainer: 'Custom' }, 'Container')).toBe('Custom');
-    });
-  });
-
-  describe('Element Selection from Stack', () => {
-    it('should update selected element when button is clicked', () => {
-      const element1 = document.createElement('div');
-      const element2 = document.createElement('span');
-      
-      let selectedElement: HTMLElement | null = element1;
-      
-      const selectElement = (el: HTMLElement) => {
-        selectedElement = el;
-      };
-
-      selectElement(element2);
-      expect(selectedElement).toBe(element2);
-    });
-
-    it('should generate element data for selected element', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-dev-id', 'src/Component.tsx:10:5');
-      element.textContent = 'Test content';
-      element.className = 'test-class';
-
-      const elementData = {
-        id: element.getAttribute('data-dev-id'),
-        tagName: element.tagName,
-        className: element.className,
-        textContent: element.textContent?.trim(),
-      };
-
-      expect(elementData.id).toBe('src/Component.tsx:10:5');
-      expect(elementData.tagName).toBe('DIV');
-      expect(elementData.className).toBe('test-class');
-      expect(elementData.textContent).toBe('Test content');
-    });
-
-    it('should handle element selection message', () => {
-      const mockSendMessage = vi.fn();
-      
-      const element = document.createElement('div');
-      const elementData = {
-        id: 'test-id',
-        tagName: 'DIV',
-      };
-
-      mockSendMessage('INSPECTOR_ELEMENT_SELECTED', elementData);
-
-      expect(mockSendMessage).toHaveBeenCalledWith('INSPECTOR_ELEMENT_SELECTED', elementData);
-      expect(mockSendMessage).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('SVG Element Handling', () => {
-    it('should find HTML parent when SVG is clicked', () => {
-      const button = document.createElement('button');
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      
-      svg.appendChild(path);
-      button.appendChild(svg);
-      document.body.appendChild(button);
-
-      // Simulate finding parent
-      let target: Element | null = path;
-      while (target && target instanceof SVGElement) {
-        target = target.parentElement;
-      }
-
-      expect(target).toBe(button);
-      expect(target instanceof HTMLElement).toBe(true);
-    });
-
-    it('should skip SVG elements in child collection', () => {
-      const container = document.createElement('div');
-      const div = document.createElement('div');
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      
-      container.appendChild(div);
-      container.appendChild(svg);
-
-      const htmlChildren = Array.from(container.children).filter(
-        (child) => child instanceof HTMLElement && !(child instanceof SVGElement)
-      );
-
-      expect(htmlChildren.length).toBe(1);
-      expect(htmlChildren[0]).toBe(div);
-    });
-  });
-
-  describe('Meaningful Element Detection', () => {
-    it('should detect elements with data-dev-id as meaningful', () => {
-      const element = document.createElement('div');
-      element.setAttribute('data-dev-id', 'src/Component.tsx:5:10');
-
-      expect(element.hasAttribute('data-dev-id')).toBe(true);
-    });
-
-    it('should detect elements with dimensions as meaningful', () => {
-      const element = document.createElement('div');
-      element.style.width = '100px';
-      element.style.height = '100px';
-      element.style.position = 'absolute';
-      element.style.top = '0';
-      element.style.left = '0';
-      document.body.appendChild(element);
-
-      const rect = element.getBoundingClientRect();
-      const hasDimensions = rect.width > 0 && rect.height > 0;
-
-      // In happy-dom, getBoundingClientRect may not work perfectly, so we check the style
-      const hasStyleDimensions = element.style.width === '100px' && element.style.height === '100px';
-
-      expect(hasDimensions || hasStyleDimensions).toBe(true);
-      document.body.removeChild(element);
-    });
-
-    it('should detect elements with children as meaningful', () => {
-      const parent = document.createElement('div');
-      const child = document.createElement('span');
-      parent.appendChild(child);
-
-      expect(parent.children.length > 0).toBe(true);
-    });
-
-    it('should detect elements with text as meaningful', () => {
-      const element = document.createElement('div');
-      element.textContent = 'Some text content';
-
-      expect(element.textContent && element.textContent.trim().length > 0).toBe(true);
-    });
-
-    it('should detect interactive elements as meaningful', () => {
-      const interactiveTags = ['BUTTON', 'A', 'INPUT', 'IMG', 'VIDEO', 'SELECT', 'TEXTAREA'];
-      
-      interactiveTags.forEach((tag) => {
-        expect(interactiveTags.includes(tag)).toBe(true);
-      });
-    });
-  });
-});
-

package/src/components/Badge.tsx

@@ -1,118 +0,0 @@
-/**
- * Badge component - "Built by Promake" badge
- */
-
-import { useState } from "react";
-import { useInspectorStore } from "../store/useInspectorStore";
-
-interface BadgeProps {
-  visible: boolean;
-}
-
-export function Badge({ visible }: BadgeProps) {
-  const { theme, labels } = useInspectorStore();
-  const [isHovered, setIsHovered] = useState(false);
-  const [isClosed, setIsClosed] = useState(false);
-
-  if (!visible || isClosed) return null;
-
-  const hasUrl = !!labels.badgeUrl;
-
-  return (
-    <div
-      data-inspector-ignore
-      style={{
-        position: "fixed",
-        bottom: "16px",
-        right: "16px",
-        pointerEvents: "all",
-      }}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <div
-        data-inspector-ignore
-        style={{
-          position: "relative",
-          background: `linear-gradient(135deg, ${theme.badgeGradientStart} 0%, ${theme.badgeGradientEnd} 100%)`,
-          color: theme.badgeTextColor,
-          padding: "8px 16px",
-          borderRadius: "24px",
-          fontSize: "13px",
-          fontWeight: 600,
-          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-          cursor: hasUrl ? "pointer" : "default",
-          transition: "all 0.3s ease",
-          fontFamily: "'Satoshi', system-ui, -apple-system, sans-serif",
-          userSelect: "none",
-          transform: isHovered ? "scale(1.02)" : "scale(1)",
-        }}
-        onClick={(e) => {
-          // Prevent opening URL if clicking on close button
-          if ((e.target as HTMLElement).dataset.badgeClose) return;
-          if (hasUrl) {
-            window.open(labels.badgeUrl, "_blank");
-          }
-        }}
-      >
-        {labels.badgeText}
-      </div>
-      {isHovered && (
-        <button
-          data-badge-close
-          data-inspector-ignore
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsClosed(true);
-          }}
-          style={{
-            position: "absolute",
-            top: "-6px",
-            right: "-6px",
-            width: "20px",
-            height: "20px",
-            border: "none",
-            background:
-              theme.badgeTextColor === "#ffffff"
-                ? "rgba(0, 0, 0, 0.7)"
-                : "rgba(255, 255, 255, 0.9)",
-            color: theme.badgeTextColor === "#ffffff" ? "#ffffff" : "#000000",
-            borderRadius: "50%",
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: "14px",
-            fontWeight: 700,
-            lineHeight: 1,
-            transition: "all 0.2s ease",
-            padding: 0,
-            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
-            zIndex: 1,
-          }}
-          onMouseEnter={(e) => {
-            const isDark = theme.badgeTextColor === "#ffffff";
-            (e.currentTarget as HTMLElement).style.background = isDark
-              ? "rgba(0, 0, 0, 0.9)"
-              : "rgba(255, 255, 255, 1)";
-            (e.currentTarget as HTMLElement).style.transform = "scale(1.08)";
-            (e.currentTarget as HTMLElement).style.boxShadow =
-              "0 3px 12px rgba(0, 0, 0, 0.3)";
-          }}
-          onMouseLeave={(e) => {
-            const isDark = theme.badgeTextColor === "#ffffff";
-            (e.currentTarget as HTMLElement).style.background = isDark
-              ? "rgba(0, 0, 0, 0.7)"
-              : "rgba(255, 255, 255, 0.9)";
-            (e.currentTarget as HTMLElement).style.transform = "scale(1)";
-            (e.currentTarget as HTMLElement).style.boxShadow =
-              "0 2px 8px rgba(0, 0, 0, 0.2)";
-          }}
-          aria-label="Close badge"
-        >
-          ×
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/ControlBox/ContentArea.tsx

@@ -1,13 +0,0 @@
-/**
- * ContentArea component - Container for tab content
- */
-
-import { ReactNode } from "react";
-
-interface ContentAreaProps {
-  children: ReactNode;
-}
-
-export function ContentArea({ children }: ContentAreaProps) {
-  return <div className="control-box-content">{children}</div>;
-}

package/src/components/ControlBox/PromptInput.module.css

@@ -1,66 +0,0 @@
-.container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-1);
-}
-
-.inputContainer {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  flex: 1;
-  border-radius: var(--radius-md);
-  padding-right: var(--spacing-1);
-  padding-left: var(--spacing-1);
-  box-shadow: none;
-  height: var(--spacing-9) !important;
-  border: 1px solid;
-}
-
-.input {
-  font-family: "Satoshi", var(--font-family-sans);
-  font-size: var(--text-xs);
-  border: none;
-  box-shadow: none;
-  height: var(--spacing-7) !important;
-  padding-left: var(--spacing-1-5);
-  padding-right: var(--spacing-1-5);
-  flex: 1;
-  min-width: 0;
-}
-
-.input:focus-visible {
-  outline: none;
-  box-shadow: none;
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-.submitButton {
-  height: var(--spacing-7);
-  width: var(--spacing-7);
-  flex-shrink: 0;
-}
-
-.submitIcon {
-  height: var(--spacing-3-5);
-  width: var(--spacing-3-5);
-}
-
-.closeButton {
-  height: var(--spacing-9);
-  width: var(--spacing-9);
-  border-radius: var(--radius-md);
-  flex-shrink: 0;
-}
-
-.closeIcon {
-  height: var(--spacing-4);
-  width: var(--spacing-4);
-}

package/src/components/ControlBox/PromptInput.tsx

@@ -1,104 +0,0 @@
-/**
- * PromptInput component - Always-visible prompt input at bottom
- */
-
-import { useState, useRef, useEffect } from "react";
-import { Input } from "../ui/input";
-import { Button } from "../ui/button";
-import { ArrowUpRight, X } from "lucide-react";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import styles from "./PromptInput.module.css";
-
-interface PromptInputProps {
-  placeholder: string;
-  onSubmit: (prompt: string) => void;
-  onClose: () => void;
-  autoFocus?: boolean;
-}
-
-export function PromptInput({
-  placeholder,
-  onSubmit,
-  onClose,
-  autoFocus = false,
-}: PromptInputProps) {
-  const { theme } = useInspectorStore();
-  const [value, setValue] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [autoFocus]);
-
-  const handleSubmit = () => {
-    if (value.trim()) {
-      onSubmit(value.trim());
-      setValue("");
-    }
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
-  return (
-    <div className={styles.container}>
-      <div
-        className={styles.inputContainer}
-        style={{
-          backgroundColor: theme.inputBackgroundColor,
-          borderColor: theme.inputBorderColor,
-        }}
-      >
-        <Input
-          ref={inputRef}
-          type="text"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          onKeyDown={handleKeyPress}
-          placeholder={placeholder}
-          className={styles.input}
-          style={{
-            backgroundColor: "transparent",
-            color: theme.inputTextColor,
-          }}
-          autoFocus={autoFocus}
-        />
-        <div className={styles.buttons}>
-          <Button
-            onClick={handleSubmit}
-            disabled={!value.trim()}
-            size="icon"
-            className={styles.submitButton}
-            title="Send"
-            style={{
-              backgroundColor: theme.buttonColor,
-              color: theme.buttonTextColor,
-            }}
-          >
-            <ArrowUpRight className={styles.submitIcon} />
-          </Button>
-        </div>
-      </div>
-      <Button
-        onClick={onClose}
-        variant="outline"
-        title="Close"
-        size="icon"
-        className={styles.closeButton}
-        style={{
-          backgroundColor: theme.inputBackgroundColor,
-          borderColor: theme.inputBorderColor,
-          color: theme.textColor,
-        }}
-      >
-        <X className={styles.closeIcon} />
-      </Button>
-    </div>
-  );
-}