@promakeai/inspector 1.0.0 → 1.0.3

package/src/components/ImageEditor/index.tsx

@@ -1,84 +0,0 @@
-/**
- * ImageEditor component - Edit/upload images
- */
-
-import { useState } from "react";
-import { useMessageBridge } from "../../hooks/useMessageBridge";
-import { UploadBox } from "./UploadBox";
-import { Button } from "../ui/button";
-import type { SelectedElementData } from "@promakeai/inspector-types";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import styles from "./index.module.css";
-
-interface ImageEditorProps {
-  element: HTMLElement;
-  elementData: SelectedElementData;
-}
-
-export function ImageEditor({ element, elementData }: ImageEditorProps) {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [imageData, setImageData] = useState<string | null>(null);
-  const { sendToParent } = useMessageBridge();
-  const { labels, theme } = useInspectorStore();
-
-  const handleFileSelect = (file: File) => {
-    setSelectedFile(file);
-
-    // Read file as base64
-    const reader = new FileReader();
-    reader.onload = (evt) => {
-      const data = evt.target?.result as string;
-      setImageData(data);
-    };
-    reader.readAsDataURL(file);
-  };
-
-  const handleUpdate = () => {
-    if (!selectedFile || !imageData) return;
-
-    // Update DOM immediately
-    if (element.tagName.toLowerCase() === "img") {
-      (element as HTMLImageElement).src = imageData;
-    } else if (window.getComputedStyle(element).backgroundImage !== "none") {
-      element.style.backgroundImage = `url("${imageData}")`;
-    } else {
-      // Try to find img child
-      const imgChild = element.querySelector("img");
-      if (imgChild) {
-        imgChild.src = imageData;
-      }
-    }
-
-    // Send to parent
-    sendToParent("INSPECTOR_IMAGE_UPDATED", {
-      imageData,
-      imageFile: {
-        name: selectedFile.name,
-        size: selectedFile.size,
-        type: selectedFile.type,
-      },
-      originalImageUrl: elementData.imageUrl,
-      element: elementData,
-    });
-  };
-
-  return (
-    <div className={styles.container}>
-      <UploadBox onFileSelect={handleFileSelect} previewImage={imageData} />
-      <div>
-        <Button
-          onClick={handleUpdate}
-          disabled={!selectedFile}
-          className={styles.button}
-          style={{
-            backgroundColor: theme.buttonColor,
-            color: theme.buttonTextColor,
-            opacity: selectedFile ? 1 : 0.5,
-          }}
-        >
-          {labels.updateImage}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/Overlay.tsx

@@ -1,157 +0,0 @@
-/**
- * Overlay component for highlighting elements
- */
-
-import { useEffect, useState } from "react";
-
-interface OverlayProps {
-  element: HTMLElement | null;
-  selectedElement: HTMLElement | null;
-  showChildBorders?: boolean;
-}
-
-export function Overlay({
-  element,
-  selectedElement,
-  showChildBorders = true,
-}: OverlayProps) {
-  const [rect, setRect] = useState<DOMRect | null>(null);
-  const [childRects, setChildRects] = useState<DOMRect[]>([]);
-  const [isPaused, setIsPaused] = useState(false);
-
-  const activeElement = selectedElement || element;
-
-  useEffect(() => {
-    if (!activeElement) {
-      setRect(null);
-      return;
-    }
-
-    setIsPaused(!!selectedElement);
-
-    // Throttle updates to avoid excessive re-renders
-    let updateTimeout: number | null = null;
-    let lastUpdate = 0;
-    const throttleMs = 16; // ~60fps
-
-    const updateRect = () => {
-      const now = Date.now();
-      const timeSinceLastUpdate = now - lastUpdate;
-
-      if (timeSinceLastUpdate >= throttleMs) {
-        const newRect = activeElement.getBoundingClientRect();
-        setRect(newRect);
-        
-        // Collect direct children rectangles
-        const children = Array.from(activeElement.children) as HTMLElement[];
-        const newChildRects = children
-          .filter(child => !child.closest("[data-inspector-ignore]"))
-          .map(child => child.getBoundingClientRect());
-        setChildRects(newChildRects);
-        
-        lastUpdate = now;
-      } else if (!updateTimeout) {
-        // Schedule update for later
-        updateTimeout = window.setTimeout(() => {
-          const newRect = activeElement.getBoundingClientRect();
-          setRect(newRect);
-          
-          // Collect direct children rectangles
-          const children = Array.from(activeElement.children) as HTMLElement[];
-          const newChildRects = children
-            .filter(child => !child.closest("[data-inspector-ignore]"))
-            .map(child => child.getBoundingClientRect());
-          setChildRects(newChildRects);
-          
-          lastUpdate = Date.now();
-          updateTimeout = null;
-        }, throttleMs - timeSinceLastUpdate);
-      }
-    };
-
-    updateRect();
-
-    // Update on scroll and resize
-    const handleUpdate = () => {
-      updateRect();
-    };
-
-    window.addEventListener("scroll", handleUpdate, true);
-    window.addEventListener("resize", handleUpdate);
-
-    // Use ResizeObserver to track element size changes (for style edits)
-    let resizeObserver: ResizeObserver | null = null;
-    
-    if (typeof ResizeObserver !== "undefined") {
-      resizeObserver = new ResizeObserver(() => {
-        updateRect();
-      });
-      resizeObserver.observe(activeElement);
-    }
-
-    // Use MutationObserver to track attribute and style changes
-    let mutationObserver: MutationObserver | null = null;
-    
-    if (typeof MutationObserver !== "undefined") {
-      mutationObserver = new MutationObserver(() => {
-        updateRect();
-      });
-      mutationObserver.observe(activeElement, {
-        attributes: true,
-        attributeFilter: ["style", "class"],
-        childList: false,
-        subtree: false,
-      });
-    }
-
-    return () => {
-      window.removeEventListener("scroll", handleUpdate, true);
-      window.removeEventListener("resize", handleUpdate);
-      
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-      
-      if (mutationObserver) {
-        mutationObserver.disconnect();
-      }
-      
-      if (updateTimeout) {
-        clearTimeout(updateTimeout);
-      }
-    };
-  }, [activeElement, selectedElement]);
-
-  if (!rect) return null;
-
-  return (
-    <>
-      {/* Main element overlay */}
-      <div
-        className={`inspector-overlay ${isPaused ? "paused" : ""} active`}
-        style={{
-          top: `${rect.top}px`,
-          left: `${rect.left}px`,
-          width: `${rect.width}px`,
-          height: `${rect.height}px`,
-        }}
-      />
-
-
-      {/* Child overlays */}
-      {showChildBorders &&
-        childRects.map((childRect, index) => (
-          <div
-            key={index}
-            className="inspector-overlay-child active"
-            style={{
-              top: `${childRect.top}px`,
-              left: `${childRect.left}px`,
-              width: `${childRect.width}px`,
-              height: `${childRect.height}px`,
-            }}
-          />
-        ))}
-    </>
-  );
-}

package/src/components/StyleEditor/BorderSection.tsx

@@ -1,147 +0,0 @@
-/**
- * BorderSection - Border Radius, Border Width, Border Color
- */
-
-import type { StyleChanges } from "@promakeai/inspector-types";
-import { ColorPicker } from "./ColorPicker";
-import { NumberInput } from "./NumberInput";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
-import { RotateCcw } from "lucide-react";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import styles from "./shared.module.css";
-
-interface BorderSectionProps {
-  styles: StyleChanges;
-  onChange: (property: keyof StyleChanges, value: string) => void;
-  originalStyles: StyleChanges;
-  onResetProperty: (property: keyof StyleChanges) => void;
-}
-
-export function BorderSection({ 
-  styles: styleValues, 
-  onChange, 
-  originalStyles,
-  onResetProperty 
-}: BorderSectionProps) {
-  const { labels, theme } = useInspectorStore();
-
-  const BORDER_STYLES = [
-    { label: labels.borderStyleSolid || "Solid", value: "solid" },
-    { label: labels.borderStyleDashed || "Dashed", value: "dashed" },
-    { label: labels.borderStyleDotted || "Dotted", value: "dotted" },
-    { label: labels.borderStyleDouble || "Double", value: "double" },
-    { label: labels.borderStyleGroove || "Groove", value: "groove" },
-    { label: labels.borderStyleRidge || "Ridge", value: "ridge" },
-    { label: labels.borderStyleInset || "Inset", value: "inset" },
-    { label: labels.borderStyleOutset || "Outset", value: "outset" },
-    { label: labels.borderStyleNone || "None", value: "none" },
-  ];
-
-  return (
-    <div className={styles.section}>
-      <div className={styles.grid2}>
-        <NumberInput
-          label={labels.borderRadiusLabel || "Border Radius"}
-          value={styleValues.borderRadius}
-          onChange={(value) => onChange("borderRadius", value)}
-          min={0}
-          max={400}
-          step={1}
-          unit="px"
-          originalValue={originalStyles.borderRadius}
-          onReset={() => onResetProperty("borderRadius")}
-        />
-
-        <NumberInput
-          label={labels.borderWidthLabel || "Border Width"}
-          value={styleValues.borderWidth}
-          onChange={(value) => onChange("borderWidth", value)}
-          min={0}
-          max={100}
-          step={1}
-          unit="px"
-          originalValue={originalStyles.borderWidth}
-          onReset={() => onResetProperty("borderWidth")}
-        />
-      </div>
-
-      {/* Border Color and Border Style - Side by side */}
-      <div className={styles.grid2}>
-        <ColorPicker
-          label={labels.borderColorLabel || "Border Color"}
-          value={styleValues.borderColor || "#000000"}
-          onChange={(value) => onChange("borderColor", value)}
-          originalValue={originalStyles.borderColor}
-          onReset={() => onResetProperty("borderColor")}
-        />
-
-        {/* Border Style */}
-        <div>
-        <div className={styles.labelContainer}>
-          <label className={styles.label} style={{ color: theme.textColor }}>
-            {labels.borderStyleLabel || "Border Style"}
-          </label>
-          {styleValues.borderStyle !== originalStyles.borderStyle && (
-            <button
-              type="button"
-              onClick={() => onResetProperty("borderStyle")}
-              className={styles.resetIcon}
-              style={{ color: theme.secondaryTextColor }}
-              title="Reset to original"
-            >
-              <RotateCcw size={12} />
-            </button>
-          )}
-        </div>
-        <div
-          className={styles.inputContainer}
-          style={{
-            backgroundColor: theme.inputBackgroundColor,
-            borderColor: theme.inputBorderColor,
-          }}
-        >
-          <Select
-            value={styleValues.borderStyle || "solid"}
-            onValueChange={(value) => onChange("borderStyle", value)}
-          >
-            <SelectTrigger
-              className={styles.input}
-              style={{
-                backgroundColor: "transparent",
-                color: theme.inputTextColor,
-              }}
-              size="sm"
-            >
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent
-              style={{
-                backgroundColor: theme.backgroundColor,
-                borderColor: theme.borderColor,
-              }}
-            >
-              {BORDER_STYLES.map((borderStyle) => (
-                <SelectItem
-                  key={borderStyle.value}
-                  value={borderStyle.value}
-                  style={{
-                    color: theme.textColor,
-                  }}
-                >
-                  {borderStyle.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/StyleEditor/ColorPicker.tsx

@@ -1,182 +0,0 @@
-/**
- * ColorPicker - Simple color picker with react-colorful
- */
-
-import { useMemo, useState } from "react";
-import { Input } from "../ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
-import { RgbaColorPicker } from "react-colorful";
-import { hexToRgba } from "../../utils/colorUtils";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import { RotateCcw } from "lucide-react";
-import styles from "./shared.module.css";
-
-interface ColorPickerProps {
-  label: string;
-  value: string;
-  onChange: (value: string) => void;
-  originalValue?: string;
-  onReset?: () => void;
-}
-
-export function ColorPicker({ label, value, onChange, originalValue, onReset }: ColorPickerProps) {
-  const { theme } = useInspectorStore();
-  const hasChanged = originalValue !== undefined && value !== originalValue;
-  const [hexInput, setHexInput] = useState("");
-  const [isEditingHex, setIsEditingHex] = useState(false);
-
-  // Convert current value to RGBA for react-colorful
-  const rgbaValue = useMemo(() => {
-    if (value === "transparent") return { r: 255, g: 255, b: 255, a: 0 };
-    if (value.startsWith("#")) {
-      const rgba = hexToRgba(value);
-      return rgba || { r: 0, g: 0, b: 0, a: 1 };
-    }
-    if (value.startsWith("rgb")) {
-      const match = value.match(
-        /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
-      );
-      if (match) {
-        return {
-          r: parseInt(match[1]),
-          g: parseInt(match[2]),
-          b: parseInt(match[3]),
-          a: match[4] ? parseFloat(match[4]) : 1,
-        };
-      }
-    }
-    return { r: 0, g: 0, b: 0, a: 1 };
-  }, [value]);
-
-  // Convert to hex for display
-  const displayValue = useMemo(() => {
-    if (value.startsWith("#")) return value;
-    if (value.startsWith("rgb")) {
-      const match = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-      if (match) {
-        const r = parseInt(match[1]);
-        const g = parseInt(match[2]);
-        const b = parseInt(match[3]);
-        return `#${((1 << 24) + (r << 16) + (g << 8) + b)
-          .toString(16)
-          .slice(1)}`;
-      }
-    }
-    return value || "#000000";
-  }, [value]);
-
-  const handleRgbaChange = (newRgba: {
-    r: number;
-    g: number;
-    b: number;
-    a: number;
-  }) => {
-    if (newRgba.a < 1) {
-      onChange(`rgba(${newRgba.r}, ${newRgba.g}, ${newRgba.b}, ${newRgba.a})`);
-    } else {
-      const hex = `#${(
-        (1 << 24) +
-        (newRgba.r << 16) +
-        (newRgba.g << 8) +
-        newRgba.b
-      )
-        .toString(16)
-        .slice(1)}`;
-      onChange(hex);
-    }
-  };
-
-  const handleHexInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const input = e.target.value;
-    setHexInput(input);
-
-    // Validate and update if it's a valid hex color
-    if (/^#[0-9A-Fa-f]{6}$/.test(input)) {
-      onChange(input);
-    }
-  };
-
-  const handleHexInputFocus = () => {
-    setIsEditingHex(true);
-    setHexInput(displayValue);
-  };
-
-  const handleHexInputBlur = () => {
-    setIsEditingHex(false);
-    // Ensure valid hex on blur
-    if (hexInput && /^#[0-9A-Fa-f]{6}$/.test(hexInput)) {
-      onChange(hexInput);
-    }
-  };
-
-  return (
-    <div className={styles.inputField}>
-      <div className={styles.labelContainer}>
-        <label className={styles.label} style={{ color: theme.textColor }}>
-          {label}
-        </label>
-        {hasChanged && onReset && (
-          <button
-            type="button"
-            onClick={onReset}
-            className={styles.resetIcon}
-            style={{ color: theme.secondaryTextColor }}
-            title="Reset to original"
-          >
-            <RotateCcw size={12} />
-          </button>
-        )}
-      </div>
-
-      <div
-        className={styles.inputContainer}
-        style={{
-          backgroundColor: theme.inputBackgroundColor,
-          borderColor: theme.inputBorderColor,
-        }}
-      >
-        {/* Color preview with picker */}
-        <Popover>
-          <PopoverTrigger asChild>
-            <button
-              type="button"
-              className={styles.colorPreview}
-              style={{
-                backgroundColor: value,
-                borderColor: theme.inputBorderColor,
-              }}
-              title="Pick color"
-            />
-          </PopoverTrigger>
-          <PopoverContent 
-            side="top" 
-            align="center"
-            sideOffset={8}
-            style={{ 
-              padding: 'var(--spacing-3)',
-              width: 'auto',
-            }}
-          >
-            <RgbaColorPicker color={rgbaValue} onChange={handleRgbaChange} />
-          </PopoverContent>
-        </Popover>
-
-        {/* Hex input */}
-        <Input
-          type="text"
-          value={isEditingHex ? hexInput : displayValue}
-          onChange={handleHexInputChange}
-          onFocus={handleHexInputFocus}
-          onBlur={handleHexInputBlur}
-          className={styles.input}
-          style={{
-            backgroundColor: "transparent",
-            color: theme.inputTextColor,
-            fontFamily: "monospace",
-          }}
-          placeholder="#000000"
-        />
-      </div>
-    </div>
-  );
-}