@promakeai/inspector 0.2.1 → 1.0.0

package/src/components/ImageEditor/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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

@@ -0,0 +1,157 @@
+/**
+ * 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

@@ -0,0 +1,147 @@
+/**
+ * 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

@@ -0,0 +1,182 @@
+/**
+ * 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>
+  );
+}