@promakeai/inspector 0.2.2 → 1.0.0

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

@@ -0,0 +1,81 @@
+.controlBox {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-3);
+  gap: var(--spacing-2);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: 480px;
+  min-width: 320px;
+  box-sizing: border-box;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  z-index: var(--z-inspector-controlbox);
+}
+
+.tabsContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  /* width: 100%; */
+  gap: var(--spacing-2);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.tabsList {
+  display: flex;
+  align-items: center;
+  height: var(--spacing-9);
+  /* width: 100%; */
+  border-radius: var(--radius-md);
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.tabTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-1-5);
+  height: calc(100% - 2 * var(--spacing-1));
+  margin: var(--spacing-1);
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-family: 'Satoshi', var(--font-family-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  outline: none;
+  background: none;
+  box-sizing: border-box;
+  box-shadow: none;
+}
+
+.tabTrigger:hover {
+  opacity: 0.85;
+}
+
+/* Active tab */
+.tabTrigger[data-active="true"] {
+  box-shadow: none;
+}
+
+.tabContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}

package/src/components/ControlBox/index.tsx

@@ -0,0 +1,409 @@
+/**
+ * ControlBox - Main control interface for inspector
+ * Layout: TOP (tabs) | CONTENT (editors) | BOTTOM (prompt input)
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { PromptInput } from "./PromptInput";
+import { TextEditor } from "../TextEditor";
+import { ImageEditor } from "../ImageEditor";
+import { StyleEditor } from "../StyleEditor";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import type { SelectedElementData } from "@promakeai/inspector-types";
+import { getElementLabel } from "../../utils/elementNames";
+import clsx from "clsx";
+import styles from "./index.module.css";
+
+interface ControlBoxProps {
+  className?: string;
+  element: HTMLElement;
+  elementData: SelectedElementData;
+  activeTab: "text" | "image" | "style" | null;
+  availableTabs: ("text" | "image" | "style")[];
+  onTabChange: (tab: "text" | "image" | "style" | null) => void;
+  onClose: () => void;
+  onPromptSubmit: (prompt: string) => void;
+  elementStack?: HTMLElement[];
+  onElementSelect?: (element: HTMLElement) => void;
+  labels?: Record<string, string>;
+}
+
+// Custom Tab Components
+const TabButton = ({
+  active,
+  onClick,
+  children,
+  theme,
+}: {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+  theme: any;
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={styles.tabTrigger}
+      data-active={active}
+      style={{
+        backgroundColor: active ? theme.tabActiveBg : theme.tabInactiveBg,
+        color: active ? theme.tabActiveColor : theme.tabInactiveColor,
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+export function ControlBox({
+  className,
+  element,
+  elementData,
+  activeTab,
+  availableTabs,
+  onTabChange,
+  onClose,
+  onPromptSubmit,
+  elementStack = [],
+  onElementSelect,
+  labels: customLabels,
+}: ControlBoxProps) {
+  const { theme, labels } = useInspectorStore();
+  const boxRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<{
+    top?: number;
+    bottom?: number;
+    left: number;
+  }>({ left: 0 });
+  const [maxHeight, setMaxHeight] = useState<number>(0);
+  const [anchorPosition, setAnchorPosition] = useState<
+    "above" | "below" | "inside"
+  >("below");
+  const [isPositioned, setIsPositioned] = useState(false);
+
+  const TAB_LABELS = {
+    text: labels.textTabLabel || "Content",
+    image: labels.imageTabLabel || "Image",
+    style: labels.styleTabLabel || "Design",
+  };
+
+  // Reset positioned state and anchor when element changes
+  useEffect(() => {
+    setIsPositioned(false);
+    // Don't reset anchor here - let calculatePosition do it
+  }, [element]);
+
+  // Calculate position based on element
+  useEffect(() => {
+    if (!boxRef.current || !element) return;
+
+    let initialAnchor: "above" | "below" | "inside" | null = null;
+
+    const calculatePosition = (isInitial = false) => {
+      const rect = element.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const padding = 10;
+      const gap = 10;
+      const insidePadding = 16;
+      const minRequiredHeight = 250;
+      const largeElementThreshold = 0.7;
+
+      // Calculate box dimensions
+      const maxWidth = Math.min(600, viewportWidth - padding * 2);
+      const minWidth = Math.min(320, maxWidth);
+      const boxWidth = Math.max(minWidth, Math.min(rect.width, maxWidth));
+
+      // Horizontal position (always calculated)
+      let centerLeft = rect.left + rect.width / 2 - boxWidth / 2;
+      centerLeft = Math.max(
+        padding,
+        Math.min(centerLeft, viewportWidth - boxWidth - padding)
+      );
+
+      // Determine anchor position only on initial calculation
+      if (isInitial || initialAnchor === null) {
+        // Calculate actual visible space
+        const spaceBelow = Math.max(0, viewportHeight - rect.bottom);
+        const spaceAbove = Math.max(0, rect.top);
+
+        // Check element size ratios
+        const elementHeightRatio = rect.height / viewportHeight;
+        const elementWidthRatio = rect.width / viewportWidth;
+
+        // Element is large in both dimensions (e.g., full page, large section)
+        const isLargeInBothDimensions =
+          elementHeightRatio > largeElementThreshold &&
+          elementWidthRatio > largeElementThreshold;
+
+        // Element is wide but short (e.g., navbar, header) - should use outside positioning
+        const isWideButShort =
+          elementWidthRatio > largeElementThreshold &&
+          elementHeightRatio <= largeElementThreshold;
+
+        // Check if element extends beyond viewport (partially visible)
+        const isPartiallyVisible = rect.top < 0 || rect.bottom > viewportHeight;
+
+        // Check if there's insufficient space outside
+        const hasInsufficientSpace =
+          spaceAbove < minRequiredHeight && spaceBelow < minRequiredHeight;
+
+        // Check if there's sufficient space outside (prefer outside for wide but short elements)
+        const hasSufficientSpaceOutside =
+          spaceAbove >= minRequiredHeight || spaceBelow >= minRequiredHeight;
+
+        // Decision logic:
+        // 1. Wide but short elements with space outside -> use outside positioning
+        // 2. Large in both dimensions -> use inside positioning
+        // 3. Tall elements OR partially visible large elements -> use inside if insufficient space
+        if (isWideButShort && hasSufficientSpaceOutside) {
+          // Wide but short (navbar/header): use outside positioning
+          initialAnchor = spaceAbove > spaceBelow ? "above" : "below";
+        } else if (
+          isLargeInBothDimensions ||
+          hasInsufficientSpace ||
+          (isPartiallyVisible && elementHeightRatio > 0.5)
+        ) {
+          // Large element or insufficient space: use inside positioning
+          initialAnchor = "inside";
+        } else {
+          // Normal elements: choose based on available space
+          initialAnchor = spaceAbove > spaceBelow ? "above" : "below";
+        }
+        setAnchorPosition(initialAnchor);
+      }
+
+      // Calculate dynamic max-height based on anchor
+      let calculatedMaxHeight: number;
+      let newPosition: { top?: number; bottom?: number; left: number };
+
+      if (initialAnchor === "inside") {
+        // Position inside the element, but respect viewport boundaries
+        // If element is scrolled partially off screen, start from viewport edge
+        const topPos = Math.max(rect.top + insidePadding, insidePadding);
+
+        // Calculate available height: from topPos to element bottom or viewport bottom
+        const availableBottom = Math.min(
+          rect.bottom - insidePadding,
+          viewportHeight - insidePadding
+        );
+        calculatedMaxHeight = availableBottom - topPos;
+
+        // Horizontal positioning
+        let insideLeft = rect.left + insidePadding;
+
+        // If element is scrolled partially off screen horizontally, start from viewport edge
+        if (rect.left < 0) {
+          insideLeft = insidePadding;
+        }
+
+        // Ensure the box fits within element width and viewport
+        const elementRightEdge = Math.min(rect.right, viewportWidth);
+        const maxBoxWidth = elementRightEdge - insideLeft - insidePadding;
+        const actualBoxWidth = Math.min(boxWidth, maxBoxWidth);
+
+        // Center horizontally within element if there's room
+        const elementVisibleWidth =
+          Math.min(rect.right, viewportWidth) - Math.max(rect.left, 0);
+        if (actualBoxWidth < elementVisibleWidth - insidePadding * 2) {
+          const elementVisibleLeft = Math.max(rect.left, 0);
+          insideLeft =
+            elementVisibleLeft + (elementVisibleWidth - actualBoxWidth) / 2;
+        }
+
+        newPosition = { top: topPos, left: insideLeft };
+
+        // Update box width for inside positioning
+        if (boxRef.current && actualBoxWidth !== boxWidth) {
+          boxRef.current.style.width = `${actualBoxWidth}px`;
+        }
+      } else if (initialAnchor === "above") {
+        // Anchored above: grow upward from element
+        calculatedMaxHeight = rect.top - padding - gap;
+        const bottomPos = viewportHeight - rect.top + gap;
+        newPosition = { bottom: bottomPos, left: centerLeft };
+      } else {
+        // Anchored below: grow downward from element
+        calculatedMaxHeight = viewportHeight - rect.bottom - padding - gap;
+        const topPos = rect.bottom + gap;
+        newPosition = { top: topPos, left: centerLeft };
+      }
+
+      // Ensure minimum height
+      calculatedMaxHeight = Math.max(200, calculatedMaxHeight);
+
+      setMaxHeight(calculatedMaxHeight);
+      setPosition(newPosition);
+
+      // Update box width (for non-inside positioning)
+      if (boxRef.current && initialAnchor !== "inside") {
+        boxRef.current.style.width = `${boxWidth}px`;
+      }
+
+      // Mark as positioned after first calculation
+      if (isInitial) {
+        setIsPositioned(true);
+      }
+    };
+
+    // Initial calculation
+    calculatePosition(true);
+
+    // Update position on scroll/resize (but keep anchor)
+    const handleUpdate = () => calculatePosition(false);
+    window.addEventListener("scroll", handleUpdate, true);
+    window.addEventListener("resize", handleUpdate);
+
+    // Watch for content height changes (e.g., tab switches)
+    const resizeObserver = new ResizeObserver(() => {
+      // Only update if already positioned (avoid flash on initial render)
+      if (initialAnchor !== null) {
+        calculatePosition(false);
+      }
+    });
+    resizeObserver.observe(boxRef.current);
+
+    return () => {
+      window.removeEventListener("scroll", handleUpdate, true);
+      window.removeEventListener("resize", handleUpdate);
+      resizeObserver.disconnect();
+      initialAnchor = null;
+    };
+  }, [element]);
+
+  return (
+    <div
+      ref={boxRef}
+      className={clsx(styles.controlBox, className)}
+      style={{
+        top: position.top !== undefined ? `${position.top}px` : undefined,
+        bottom:
+          position.bottom !== undefined ? `${position.bottom}px` : undefined,
+        left: `${position.left}px`,
+        maxHeight: maxHeight > 0 ? `${maxHeight}px` : undefined,
+        backgroundColor: theme.backgroundColor,
+        opacity: isPositioned ? 1 : 0,
+        transform: isPositioned ? "scale(1)" : "scale(0.95)",
+        transition: "opacity 0.2s ease, transform 0.2s ease",
+      }}
+    >
+      {/* Element name tags - at top of control box */}
+      {(() => {
+        const shouldShow = elementStack.length > 1;
+        console.log("🔘 Element Tags Debug:", {
+          shouldShow,
+          stackLength: elementStack.length,
+          stack: elementStack.map((el) => ({
+            tag: el.tagName,
+            id: el.id,
+            className: el.className,
+            devId: el.getAttribute("data-dev-id"),
+          })),
+          isPositioned,
+        });
+
+        return (
+          shouldShow && (
+            <div
+              className="inspector-element-tags"
+              data-inspector-ignore
+              style={{
+                display: "flex",
+                gap: "4px",
+                overflowX: "auto",
+                overflowY: "hidden",
+                width: "calc(100% + 24px)",
+                marginLeft: "-12px",
+                marginRight: "-12px",
+                marginTop: "-12px",
+                paddingLeft: "12px",
+                paddingRight: "12px",
+                paddingTop: "12px",
+                paddingBottom: "10px",
+                borderBottom: "1px solid rgba(0, 0, 0, 0.05)",
+              }}
+            >
+              {elementStack.map((el, index) => {
+                const labelText = getElementLabel(el, customLabels || labels);
+                const isSelected = el === element; // Check if this element is the currently selected one
+                console.log(`🏷️ Button ${index}:`, labelText, el, {
+                  isSelected,
+                });
+                return (
+                  <button
+                    key={index}
+                    className="inspector-element-tag"
+                    onClick={() => onElementSelect?.(el)}
+                    style={{
+                      background: isSelected ? "rgb(58, 18, 189)" : "#ffffff",
+                      color: isSelected ? "#ffffff" : "#475569",
+                      border: isSelected ? "none" : "1px solid #e2e8f0",
+                      padding: "4px 8px",
+                      borderRadius: "4px",
+                      fontSize: "11px",
+                      fontWeight: "500",
+                      cursor: "pointer",
+                      whiteSpace: "nowrap",
+                      flexShrink: 0,
+                      height: "24px",
+                      display: "flex",
+                      alignItems: "center",
+                      boxShadow: isSelected
+                        ? "0 1px 3px rgba(58, 18, 189, 0.2)"
+                        : "0 1px 2px rgba(0, 0, 0, 0.05)",
+                    }}
+                  >
+                    {String(labelText)}
+                  </button>
+                );
+              })}
+            </div>
+          )
+        );
+      })()}
+
+      <PromptInput
+        placeholder={labels.promptPlaceholder || "Ask AI..."}
+        onSubmit={onPromptSubmit}
+        onClose={onClose}
+        autoFocus={!activeTab}
+      />
+      {/* Custom Tabs */}
+      {availableTabs.length > 0 && activeTab ? (
+        <div className={styles.tabsContainer}>
+          {/* Tab Buttons */}
+          <div
+            className={styles.tabsList}
+            style={{
+              backgroundColor: theme.tabContainerBg,
+            }}
+          >
+            {availableTabs.map((tab) => (
+              <TabButton
+                key={tab}
+                active={activeTab === tab}
+                onClick={() => onTabChange(tab)}
+                theme={theme}
+              >
+                {TAB_LABELS[tab]}
+              </TabButton>
+            ))}
+          </div>
+
+          {/* Tab Content */}
+          <div className={styles.tabContent}>
+            {activeTab === "text" && (
+              <TextEditor element={element} elementData={elementData} />
+            )}
+            {activeTab === "image" && (
+              <ImageEditor element={element} elementData={elementData} />
+            )}
+            {activeTab === "style" && (
+              <StyleEditor element={element} elementData={elementData} />
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/ImageEditor/UploadBox.module.css

@@ -0,0 +1,69 @@
+.hiddenInput {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.uploadBox {
+  min-height: 100px;
+  border: 2px dashed;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+  position: relative;
+  overflow: hidden;
+}
+
+.uploadBox:hover {
+  opacity: 0.9;
+}
+
+.uploadContent {
+  text-align: center;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.uploadIcon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: var(--spacing-2);
+  opacity: 0.5;
+}
+
+.uploadTitle {
+  font-family: "Satoshi", var(--font-family-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+.uploadHint {
+  font-family: "Satoshi", var(--font-family-sans);
+  font-size: var(--text-xs);
+  margin-top: var(--spacing-0_5);
+}
+
+.previewImage {
+  width: 100%;
+  height: auto;
+  max-height: 100px;
+  object-fit: contain;
+  border-radius: var(--radius-lg);
+}

package/src/components/ImageEditor/UploadBox.tsx

@@ -0,0 +1,113 @@
+/**
+ * UploadBox component - Drag & drop image upload
+ */
+
+import { useRef, useState } from "react";
+import { useInspectorStore } from "../../store/useInspectorStore";
+import styles from "./UploadBox.module.css";
+
+interface UploadBoxProps {
+  onFileSelect: (file: File) => void;
+  previewImage: string | null;
+}
+
+export function UploadBox({ onFileSelect, previewImage }: UploadBoxProps) {
+  const { theme, labels } = useInspectorStore();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && file.type.startsWith("image/")) {
+      onFileSelect(file);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+
+    const file = e.dataTransfer?.files[0];
+    if (file && file.type.startsWith("image/")) {
+      onFileSelect(file);
+    }
+  };
+
+  return (
+    <>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+        className={styles.hiddenInput}
+      />
+      <div
+        onClick={handleClick}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        className={styles.uploadBox}
+        style={{
+          borderColor: isDragging ? theme.buttonColor : theme.inputBorderColor,
+          backgroundColor: isDragging
+            ? `${theme.buttonColor}10`
+            : theme.inputBackgroundColor,
+        }}
+      >
+        {!previewImage ? (
+          <div className={styles.uploadContent}>
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              className={styles.uploadIcon}
+              style={{ color: theme.secondaryTextColor }}
+            >
+              <path
+                d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15M17 8L12 3M12 3L7 8M12 3V15"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <div
+              className={styles.uploadTitle}
+              style={{ color: theme.textColor }}
+            >
+              {labels.imageUploadTitle || "Click or drag image"}
+            </div>
+            <div
+              className={styles.uploadHint}
+              style={{ color: theme.secondaryTextColor }}
+            >
+              {labels.imageUploadHint || "Supports: JPG, PNG, GIF"}
+            </div>
+          </div>
+        ) : (
+          <img
+            src={previewImage}
+            alt="Preview"
+            className={styles.previewImage}
+          />
+        )}
+      </div>
+    </>
+  );
+}

package/src/components/ImageEditor/index.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  flex: 1;
+  box-sizing: border-box;
+}
+
+.button {
+  width: 100%;
+}