@promakeai/inspector 1.0.0 → 1.0.3

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

@@ -1,81 +0,0 @@
-.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

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

@@ -1,69 +0,0 @@
-.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

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

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