@promakeai/inspector 1.0.0 → 1.0.3

package/src/components/StyleEditor/DisplaySection.tsx

@@ -1,349 +0,0 @@
-/**
- * DisplaySection - Display mode and Opacity
- */
-
-import type { StyleChanges } from "@promakeai/inspector-types";
-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 DisplaySectionProps {
-  styles: StyleChanges;
-  onChange: (property: keyof StyleChanges, value: string) => void;
-  originalStyles: StyleChanges;
-  onResetProperty: (property: keyof StyleChanges) => void;
-}
-
-export function DisplaySection({
-  styles: styleValues,
-  onChange,
-  originalStyles,
-  onResetProperty,
-}: DisplaySectionProps) {
-  const { labels, theme } = useInspectorStore();
-
-  const DISPLAY_MODES = [
-    { label: labels.displayBlock || "Block", value: "block" },
-    { label: labels.displayInline || "Inline", value: "inline" },
-    { label: labels.displayInlineBlock || "Inline Block", value: "inline-block" },
-    { label: labels.displayFlex || "Flex", value: "flex" },
-    { label: labels.displayGrid || "Grid", value: "grid" },
-    { label: labels.displayNone || "None", value: "none" },
-  ];
-
-  const JUSTIFY_CONTENT_OPTIONS = [
-    { label: labels.justifyContentFlexStart || "Flex Start", value: "flex-start" },
-    { label: labels.justifyContentCenter || "Center", value: "center" },
-    { label: labels.justifyContentFlexEnd || "Flex End", value: "flex-end" },
-    { label: labels.justifyContentSpaceBetween || "Space Between", value: "space-between" },
-    { label: labels.justifyContentSpaceAround || "Space Around", value: "space-around" },
-    { label: labels.justifyContentSpaceEvenly || "Space Evenly", value: "space-evenly" },
-  ];
-
-  const ALIGN_ITEMS_OPTIONS = [
-    { label: labels.alignItemsFlexStart || "Flex Start", value: "flex-start" },
-    { label: labels.alignItemsCenter || "Center", value: "center" },
-    { label: labels.alignItemsFlexEnd || "Flex End", value: "flex-end" },
-    { label: labels.alignItemsStretch || "Stretch", value: "stretch" },
-    { label: labels.alignItemsBaseline || "Baseline", value: "baseline" },
-  ];
-
-  const FLEX_DIRECTION_OPTIONS = [
-    { label: labels.flexDirectionRow || "Row", value: "row" },
-    { label: labels.flexDirectionRowReverse || "Row Reverse", value: "row-reverse" },
-    { label: labels.flexDirectionColumn || "Column", value: "column" },
-    { label: labels.flexDirectionColumnReverse || "Column Reverse", value: "column-reverse" },
-  ];
-
-  return (
-    <div className={styles.section}>
-      {/* Display Mode and Opacity - Side by side */}
-      <div className={styles.grid2}>
-        {/* Display Mode */}
-        <div>
-        <div className={styles.labelContainer}>
-          <label className={styles.label} style={{ color: theme.textColor }}>
-            {labels.displayLabel || "Display"}
-          </label>
-          {styleValues.display !== originalStyles.display && (
-            <button
-              type="button"
-              onClick={() => onResetProperty("display")}
-              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.display || "block"}
-            onValueChange={(value) => onChange("display", value)}
-          >
-            <SelectTrigger
-              className={styles.input}
-              style={{
-                backgroundColor: "transparent",
-                color: theme.inputTextColor,
-              }}
-              size="sm"
-            >
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent
-              style={{
-                backgroundColor: theme.backgroundColor,
-                borderColor: theme.borderColor,
-              }}
-            >
-              {DISPLAY_MODES.map((mode) => (
-                <SelectItem
-                  key={mode.value}
-                  value={mode.value}
-                  style={{
-                    color: theme.textColor,
-                  }}
-                >
-                  {mode.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        </div>
-
-        {/* Opacity */}
-        <NumberInput
-          label={labels.opacityLabel || "Opacity"}
-          value={styleValues.opacity}
-          onChange={(value) => onChange("opacity", value)}
-          min={0}
-          max={1}
-          step={0.1}
-          unit=""
-          originalValue={originalStyles.opacity}
-          onReset={() => onResetProperty("opacity")}
-        />
-      </div>
-
-      {/* Flex and Flex Direction - Side by side */}
-      <div className={styles.grid2}>
-        {/* Flex */}
-        <NumberInput
-          label={labels.flexLabel || "Flex"}
-          value={styleValues.flex}
-          onChange={(value) => onChange("flex", value)}
-          min={0}
-          max={100}
-          step={1}
-          unit=""
-          originalValue={originalStyles.flex}
-          onReset={() => onResetProperty("flex")}
-        />
-
-        {/* Flex Direction */}
-        <div>
-          <div className={styles.labelContainer}>
-            <label className={styles.label} style={{ color: theme.textColor }}>
-              {labels.flexDirectionLabel || "Flex Direction"}
-            </label>
-            {styleValues.flexDirection !== originalStyles.flexDirection && (
-              <button
-                type="button"
-                onClick={() => onResetProperty("flexDirection")}
-                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.flexDirection || "row"}
-              onValueChange={(value) => onChange("flexDirection", value)}
-            >
-              <SelectTrigger
-                className={styles.input}
-                style={{
-                  backgroundColor: "transparent",
-                  color: theme.inputTextColor,
-                }}
-                size="sm"
-              >
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent
-                style={{
-                  backgroundColor: theme.backgroundColor,
-                  borderColor: theme.borderColor,
-                }}
-              >
-                {FLEX_DIRECTION_OPTIONS.map((option) => (
-                  <SelectItem
-                    key={option.value}
-                    value={option.value}
-                    style={{
-                      color: theme.textColor,
-                    }}
-                  >
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </div>
-
-      {/* Justify Content and Align Items - Side by side */}
-      <div className={styles.grid2}>
-        {/* Justify Content */}
-        <div>
-          <div className={styles.labelContainer}>
-            <label className={styles.label} style={{ color: theme.textColor }}>
-              {labels.justifyContentLabel || "Justify Content"}
-            </label>
-            {styleValues.justifyContent !== originalStyles.justifyContent && (
-              <button
-                type="button"
-                onClick={() => onResetProperty("justifyContent")}
-                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.justifyContent || "flex-start"}
-              onValueChange={(value) => onChange("justifyContent", value)}
-            >
-              <SelectTrigger
-                className={styles.input}
-                style={{
-                  backgroundColor: "transparent",
-                  color: theme.inputTextColor,
-                }}
-                size="sm"
-              >
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent
-                style={{
-                  backgroundColor: theme.backgroundColor,
-                  borderColor: theme.borderColor,
-                }}
-              >
-                {JUSTIFY_CONTENT_OPTIONS.map((option) => (
-                  <SelectItem
-                    key={option.value}
-                    value={option.value}
-                    style={{
-                      color: theme.textColor,
-                    }}
-                  >
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-
-        {/* Align Items */}
-        <div>
-          <div className={styles.labelContainer}>
-            <label className={styles.label} style={{ color: theme.textColor }}>
-              {labels.alignItemsLabel || "Align Items"}
-            </label>
-            {styleValues.alignItems !== originalStyles.alignItems && (
-              <button
-                type="button"
-                onClick={() => onResetProperty("alignItems")}
-                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.alignItems || "stretch"}
-              onValueChange={(value) => onChange("alignItems", value)}
-            >
-              <SelectTrigger
-                className={styles.input}
-                style={{
-                  backgroundColor: "transparent",
-                  color: theme.inputTextColor,
-                }}
-                size="sm"
-              >
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent
-                style={{
-                  backgroundColor: theme.backgroundColor,
-                  borderColor: theme.borderColor,
-                }}
-              >
-                {ALIGN_ITEMS_OPTIONS.map((option) => (
-                  <SelectItem
-                    key={option.value}
-                    value={option.value}
-                    style={{
-                      color: theme.textColor,
-                    }}
-                  >
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-

package/src/components/StyleEditor/ImageSection.tsx

@@ -1,105 +0,0 @@
-/**
- * ImageSection - Object Fit for image elements
- */
-
-import type { StyleChanges } from "@promakeai/inspector-types";
-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 ImageSectionProps {
-  styles: StyleChanges;
-  onChange: (property: keyof StyleChanges, value: string) => void;
-  originalStyles: StyleChanges;
-  onResetProperty: (property: keyof StyleChanges) => void;
-}
-
-export function ImageSection({
-  styles: styleValues,
-  onChange,
-  originalStyles,
-  onResetProperty,
-}: ImageSectionProps) {
-  const { labels, theme } = useInspectorStore();
-
-  const OBJECT_FIT_OPTIONS = [
-    { label: labels.objectFitFill || "Fill", value: "fill" },
-    { label: labels.objectFitContain || "Contain", value: "contain" },
-    { label: labels.objectFitCover || "Cover", value: "cover" },
-    { label: labels.objectFitNone || "None", value: "none" },
-    { label: labels.objectFitScaleDown || "Scale Down", value: "scale-down" },
-  ];
-
-  return (
-    <div className={styles.section}>
-      {/* Object Fit */}
-      <div>
-        <div className={styles.labelContainer}>
-          <label className={styles.label} style={{ color: theme.textColor }}>
-            {labels.objectFitLabel || "Object Fit"}
-          </label>
-          {styleValues.objectFit !== originalStyles.objectFit && (
-            <button
-              type="button"
-              onClick={() => onResetProperty("objectFit")}
-              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.objectFit || "fill"}
-            onValueChange={(value) => onChange("objectFit", value)}
-          >
-            <SelectTrigger
-              className={styles.input}
-              style={{
-                backgroundColor: "transparent",
-                color: theme.inputTextColor,
-              }}
-              size="sm"
-            >
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent
-              style={{
-                backgroundColor: theme.backgroundColor,
-                borderColor: theme.borderColor,
-              }}
-            >
-              {OBJECT_FIT_OPTIONS.map((option) => (
-                <SelectItem
-                  key={option.value}
-                  value={option.value}
-                  style={{
-                    color: theme.textColor,
-                  }}
-                >
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  );
-}
-

package/src/components/StyleEditor/LayoutSection.tsx

@@ -1,63 +0,0 @@
-/**
- * LayoutSection - Background Color, Height, Width
- */
-
-import type { StyleChanges } from "@promakeai/inspector-types";
-import { ColorPicker } from "./ColorPicker";
-import { NumberInput } from "./NumberInput";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import styles from "./shared.module.css";
-
-interface LayoutSectionProps {
-  styles: StyleChanges;
-  onChange: (property: keyof StyleChanges, value: string) => void;
-  originalStyles: StyleChanges;
-  onResetProperty: (property: keyof StyleChanges) => void;
-}
-
-export function LayoutSection({ 
-  styles: styleValues, 
-  onChange, 
-  originalStyles,
-  onResetProperty 
-}: LayoutSectionProps) {
-  const { labels } = useInspectorStore();
-
-  return (
-    <div className={styles.section}>
-      <ColorPicker
-        label={labels.backgroundColorLabel || "Background Color"}
-        value={styleValues.backgroundColor || "#ffffff"}
-        onChange={(value) => onChange("backgroundColor", value)}
-        originalValue={originalStyles.backgroundColor}
-        onReset={() => onResetProperty("backgroundColor")}
-      />
-
-      <div className={styles.grid2}>
-        <NumberInput
-          label={labels.heightLabel || "Height"}
-          value={styleValues.height}
-          onChange={(value) => onChange("height", value)}
-          min={0}
-          max={2000}
-          step={1}
-          unit="px"
-          originalValue={originalStyles.height}
-          onReset={() => onResetProperty("height")}
-        />
-
-        <NumberInput
-          label={labels.widthLabel || "Width"}
-          value={styleValues.width}
-          onChange={(value) => onChange("width", value)}
-          min={0}
-          max={2000}
-          step={1}
-          unit="px"
-          originalValue={originalStyles.width}
-          onReset={() => onResetProperty("width")}
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/StyleEditor/NumberInput.tsx

@@ -1,138 +0,0 @@
-/**
- * NumberInput - Input with drag-to-adjust handle (Figma-style)
- */
-
-import { useState, useRef, useEffect } from "react";
-import { Input } from "../ui/input";
-import { GripVertical, RotateCcw } from "lucide-react";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import styles from "./shared.module.css";
-
-interface NumberInputProps {
-  label: string;
-  value: string | undefined;
-  onChange: (value: string) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  unit?: string;
-  originalValue?: string;
-  onReset?: () => void;
-}
-
-export function NumberInput({
-  label,
-  value,
-  onChange,
-  min = 0,
-  max = 1000,
-  step = 1,
-  unit = "px",
-  originalValue,
-  onReset,
-}: NumberInputProps) {
-  const { labels, theme } = useInspectorStore();
-  const hasChanged = originalValue !== undefined && value !== originalValue;
-  const [isDragging, setIsDragging] = useState(false);
-  const dragStartX = useRef(0);
-  const dragStartValue = useRef(0);
-  const dragHandleRef = useRef<HTMLDivElement>(null);
-
-  const parseValue = (val: string | undefined): number => {
-    if (!val) return 0;
-    const parsed = parseFloat(val.replace(/[^\d.-]/g, ""));
-    return isNaN(parsed) ? 0 : parsed;
-  };
-
-  const currentValue = parseValue(value);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value);
-  };
-
-  useEffect(() => {
-    if (!isDragging) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = e.clientX - dragStartX.current;
-      const deltaValue = Math.round(deltaX / 2) * step; // 2px movement = 1 step
-      let newValue = dragStartValue.current + deltaValue;
-
-      // Clamp value
-      newValue = Math.max(min, Math.min(max, newValue));
-
-      onChange(`${newValue}${unit}`);
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      document.body.style.cursor = "";
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, step, min, max, unit, onChange]);
-
-  const handleDragStart = (e: React.MouseEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-    dragStartX.current = e.clientX;
-    dragStartValue.current = currentValue;
-    document.body.style.cursor = "ew-resize";
-  };
-
-  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,
-        }}
-      >
-        <Input
-          type="text"
-          value={value || ""}
-          onChange={handleInputChange}
-          className={styles.input}
-          style={{
-            backgroundColor: "transparent",
-            color: theme.inputTextColor,
-          }}
-        />
-        <div
-          ref={dragHandleRef}
-          onMouseDown={handleDragStart}
-          className={styles.dragHandle}
-          style={{
-            color: theme.secondaryTextColor || theme.textColor,
-            opacity: isDragging ? 1 : 0.6,
-          }}
-        >
-          <GripVertical className={styles.dragHandleIcon} />
-        </div>
-      </div>
-    </div>
-  );
-}