@promakeai/inspector 1.0.0 → 1.0.3

package/src/components/StyleEditor/SliderInput.tsx

@@ -1,121 +0,0 @@
-/**
- * SliderInput - Canva-style slider with synchronized number input
- */
-
-import { RotateCcw } from "lucide-react";
-import { useInspectorStore } from "../../store/useInspectorStore";
-
-interface SliderInputProps {
-  label: string;
-  value: string;
-  min: number;
-  max: number;
-  unit?: string;
-  onChange: (value: string) => void;
-  originalValue?: string;
-  onReset?: () => void;
-}
-
-export function SliderInput({
-  label,
-  value,
-  min,
-  max,
-  unit = "px",
-  onChange,
-  originalValue,
-  onReset,
-}: SliderInputProps) {
-  const { theme } = useInspectorStore();
-  const hasChanged = originalValue !== undefined && value !== originalValue;
-  
-  // Parse numeric value from string (e.g., "16px" -> 16)
-  const numericValue = parseFloat(value) || 0;
-
-  const handleSliderChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    const newValue = target.value;
-    onChange(`${newValue}${unit}`);
-  };
-
-  const handleNumberChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    let newValue = parseFloat(target.value) || 0;
-
-    // Clamp value
-    newValue = Math.max(min, Math.min(max, newValue));
-
-    onChange(`${newValue}${unit}`);
-  };
-
-  return (
-    <div style={{ marginBottom: "12px" }}>
-      <label
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: "4px",
-          fontSize: "12px",
-          color: theme.textColor || "#6b7280",
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
-          <span>{label}</span>
-          {hasChanged && onReset && (
-            <button
-              type="button"
-              onClick={onReset}
-              style={{
-                background: "none",
-                border: "none",
-                padding: "2px",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                color: theme.secondaryTextColor || "#9ca3af",
-                opacity: 0.7,
-              }}
-              title="Reset to original"
-              onMouseEnter={(e) => (e.currentTarget.style.opacity = "1")}
-              onMouseLeave={(e) => (e.currentTarget.style.opacity = "0.7")}
-            >
-              <RotateCcw size={12} />
-            </button>
-          )}
-        </div>
-        <input
-          type="number"
-          value={numericValue}
-          onInput={(e) => handleNumberChange(e as unknown as Event)}
-          min={min}
-          max={max}
-          style={{
-            width: "60px",
-            padding: "4px 8px",
-            border: "1px solid #e5e7eb",
-            borderRadius: "4px",
-            textAlign: "right",
-            fontSize: "12px",
-            fontFamily: "monospace",
-          }}
-        />
-      </label>
-      <input
-        type="range"
-        min={min}
-        max={max}
-        value={numericValue}
-        onInput={(e) => handleSliderChange(e as unknown as Event)}
-        style={{
-          width: "100%",
-          height: "6px",
-          background: "#e5e7eb",
-          borderRadius: "3px",
-          outline: "none",
-          cursor: "pointer",
-        }}
-      />
-    </div>
-  );
-}

package/src/components/StyleEditor/SpacingSection.tsx

@@ -1,365 +0,0 @@
-/**
- * SpacingSection - Padding and Margin (Vertical & Horizontal or All Sides)
- */
-
-import { useState, useEffect, useRef } from "react";
-import type { StyleChanges } from "@promakeai/inspector-types";
-import { NumberInput } from "./NumberInput";
-import { SplitSquareVertical, Grid3x3 } from "lucide-react";
-import { useInspectorStore } from "../../store/useInspectorStore";
-import styles from "./shared.module.css";
-
-interface SpacingSectionProps {
-  styles: StyleChanges;
-  onChange: (property: keyof StyleChanges, value: string) => void;
-  originalStyles: StyleChanges;
-  onResetProperty: (property: keyof StyleChanges) => void;
-}
-
-type SpacingMode = "vh" | "all"; // vh = vertical/horizontal, all = all sides
-
-export function SpacingSection({
-  styles: styleValues,
-  onChange,
-  originalStyles,
-  onResetProperty,
-}: SpacingSectionProps) {
-  const { labels, theme } = useInspectorStore();
-  const [paddingMode, setPaddingMode] = useState<SpacingMode>("vh");
-  const [marginMode, setMarginMode] = useState<SpacingMode>("all");
-  
-  const prevPaddingMode = useRef<SpacingMode>("vh");
-  const prevMarginMode = useRef<SpacingMode>("all");
-
-  // Smart auto-fill for padding mode changes
-  useEffect(() => {
-    if (prevPaddingMode.current !== paddingMode) {
-      if (prevPaddingMode.current === "vh" && paddingMode === "all") {
-        // VH → All Sides: vertical → top/bottom, horizontal → left/right
-        const vertical = styleValues.paddingVertical || styleValues.paddingTop || "0px";
-        const horizontal = styleValues.paddingHorizontal || styleValues.paddingLeft || "0px";
-        
-        onChange("paddingTop", vertical);
-        onChange("paddingBottom", vertical);
-        onChange("paddingLeft", horizontal);
-        onChange("paddingRight", horizontal);
-      } else if (prevPaddingMode.current === "all" && paddingMode === "vh") {
-        // All Sides → VH: use top for vertical, left for horizontal (or pick smallest if different)
-        const top = styleValues.paddingTop || "0px";
-        const bottom = styleValues.paddingBottom || "0px";
-        const left = styleValues.paddingLeft || "0px";
-        const right = styleValues.paddingRight || "0px";
-        
-        // Parse values
-        const topVal = parseFloat(top);
-        const bottomVal = parseFloat(bottom);
-        const leftVal = parseFloat(left);
-        const rightVal = parseFloat(right);
-        
-        // Use minimum non-zero value, or the first value
-        const verticalVal = topVal > 0 || bottomVal > 0 ? Math.min(topVal || 999999, bottomVal || 999999) : 0;
-        const horizontalVal = leftVal > 0 || rightVal > 0 ? Math.min(leftVal || 999999, rightVal || 999999) : 0;
-        
-        onChange("paddingVertical", verticalVal > 0 ? `${verticalVal}px` : "0px");
-        onChange("paddingHorizontal", horizontalVal > 0 ? `${horizontalVal}px` : "0px");
-      }
-      prevPaddingMode.current = paddingMode;
-    }
-  }, [paddingMode, styleValues, onChange]);
-
-  // Smart auto-fill for margin mode changes
-  useEffect(() => {
-    if (prevMarginMode.current !== marginMode) {
-      if (prevMarginMode.current === "vh" && marginMode === "all") {
-        // VH → All Sides: vertical → top/bottom, horizontal → left/right
-        const vertical = styleValues.marginVertical || styleValues.marginTop || "0px";
-        const horizontal = styleValues.marginHorizontal || styleValues.marginLeft || "0px";
-        
-        onChange("marginTop", vertical);
-        onChange("marginBottom", vertical);
-        onChange("marginLeft", horizontal);
-        onChange("marginRight", horizontal);
-      } else if (prevMarginMode.current === "all" && marginMode === "vh") {
-        // All Sides → VH: use top for vertical, left for horizontal (or pick smallest if different)
-        const top = styleValues.marginTop || "0px";
-        const bottom = styleValues.marginBottom || "0px";
-        const left = styleValues.marginLeft || "0px";
-        const right = styleValues.marginRight || "0px";
-        
-        // Parse values
-        const topVal = parseFloat(top);
-        const bottomVal = parseFloat(bottom);
-        const leftVal = parseFloat(left);
-        const rightVal = parseFloat(right);
-        
-        // Use minimum non-zero value, or the first value
-        const verticalVal = topVal > 0 || bottomVal > 0 ? Math.min(topVal || 999999, bottomVal || 999999) : 0;
-        const horizontalVal = leftVal > 0 || rightVal > 0 ? Math.min(leftVal || 999999, rightVal || 999999) : 0;
-        
-        onChange("marginVertical", verticalVal > 0 ? `${verticalVal}px` : "0px");
-        onChange("marginHorizontal", horizontalVal > 0 ? `${horizontalVal}px` : "0px");
-      }
-      prevMarginMode.current = marginMode;
-    }
-  }, [marginMode, styleValues, onChange]);
-
-  return (
-    <div className={styles.section}>
-      {/* Padding */}
-      <div>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: "var(--spacing-2)",
-          }}
-        >
-          <div className={styles.sectionTitle} style={{ color: theme.textColor }}>
-            {labels.paddingLabel || "Padding"}
-          </div>
-          <div style={{ display: "flex", gap: "4px" }}>
-            <button
-              type="button"
-              onClick={() => setPaddingMode("vh")}
-              style={{
-                background: "none",
-                border: "none",
-                padding: "4px",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                color: theme.textColor,
-                opacity: paddingMode === "vh" ? 1 : 0.4,
-                fontWeight: paddingMode === "vh" ? "bold" : "normal",
-              }}
-              title="Vertical/Horizontal mode"
-            >
-              <SplitSquareVertical size={16} />
-            </button>
-            <button
-              type="button"
-              onClick={() => setPaddingMode("all")}
-              style={{
-                background: "none",
-                border: "none",
-                padding: "4px",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                color: theme.textColor,
-                opacity: paddingMode === "all" ? 1 : 0.4,
-                fontWeight: paddingMode === "all" ? "bold" : "normal",
-              }}
-              title="All sides mode"
-            >
-              <Grid3x3 size={16} />
-            </button>
-          </div>
-        </div>
-
-        {paddingMode === "vh" ? (
-          <div className={styles.grid2}>
-            <NumberInput
-              label={labels.paddingVerticalLabel || "Vertical"}
-              value={styleValues.paddingVertical}
-              onChange={(value) => onChange("paddingVertical", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.paddingVertical}
-              onReset={() => onResetProperty("paddingVertical")}
-            />
-            <NumberInput
-              label={labels.paddingHorizontalLabel || "Horizontal"}
-              value={styleValues.paddingHorizontal}
-              onChange={(value) => onChange("paddingHorizontal", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.paddingHorizontal}
-              onReset={() => onResetProperty("paddingHorizontal")}
-            />
-          </div>
-        ) : (
-          <div className={styles.grid2}>
-            <NumberInput
-              label="Top"
-              value={styleValues.paddingTop}
-              onChange={(value) => onChange("paddingTop", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.paddingTop}
-              onReset={() => onResetProperty("paddingTop")}
-            />
-            <NumberInput
-              label="Right"
-              value={styleValues.paddingRight}
-              onChange={(value) => onChange("paddingRight", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.paddingRight}
-              onReset={() => onResetProperty("paddingRight")}
-            />
-            <NumberInput
-              label="Bottom"
-              value={styleValues.paddingBottom}
-              onChange={(value) => onChange("paddingBottom", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.paddingBottom}
-              onReset={() => onResetProperty("paddingBottom")}
-            />
-            <NumberInput
-              label="Left"
-              value={styleValues.paddingLeft}
-              onChange={(value) => onChange("paddingLeft", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.paddingLeft}
-              onReset={() => onResetProperty("paddingLeft")}
-            />
-          </div>
-        )}
-      </div>
-
-      {/* Margin */}
-      <div>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: "var(--spacing-2)",
-          }}
-        >
-          <div className={styles.sectionTitle} style={{ color: theme.textColor }}>
-            {labels.marginLabel || "Margin"}
-          </div>
-          <div style={{ display: "flex", gap: "4px" }}>
-            <button
-              type="button"
-              onClick={() => setMarginMode("vh")}
-              style={{
-                background: "none",
-                border: "none",
-                padding: "4px",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                color: theme.textColor,
-                opacity: marginMode === "vh" ? 1 : 0.4,
-                fontWeight: marginMode === "vh" ? "bold" : "normal",
-              }}
-              title="Vertical/Horizontal mode"
-            >
-              <SplitSquareVertical size={16} />
-            </button>
-            <button
-              type="button"
-              onClick={() => setMarginMode("all")}
-              style={{
-                background: "none",
-                border: "none",
-                padding: "4px",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                color: theme.textColor,
-                opacity: marginMode === "all" ? 1 : 0.4,
-                fontWeight: marginMode === "all" ? "bold" : "normal",
-              }}
-              title="All sides mode"
-            >
-              <Grid3x3 size={16} />
-            </button>
-          </div>
-        </div>
-
-        {marginMode === "vh" ? (
-          <div className={styles.grid2}>
-            <NumberInput
-              label={labels.marginVerticalLabel || "Vertical"}
-              value={styleValues.marginVertical}
-              onChange={(value) => onChange("marginVertical", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.marginVertical}
-              onReset={() => onResetProperty("marginVertical")}
-            />
-            <NumberInput
-              label={labels.marginHorizontalLabel || "Horizontal"}
-              value={styleValues.marginHorizontal}
-              onChange={(value) => onChange("marginHorizontal", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.marginHorizontal}
-              onReset={() => onResetProperty("marginHorizontal")}
-            />
-          </div>
-        ) : (
-          <div className={styles.grid2}>
-            <NumberInput
-              label="Top"
-              value={styleValues.marginTop}
-              onChange={(value) => onChange("marginTop", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.marginTop}
-              onReset={() => onResetProperty("marginTop")}
-            />
-            <NumberInput
-              label="Right"
-              value={styleValues.marginRight}
-              onChange={(value) => onChange("marginRight", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.marginRight}
-              onReset={() => onResetProperty("marginRight")}
-            />
-            <NumberInput
-              label="Bottom"
-              value={styleValues.marginBottom}
-              onChange={(value) => onChange("marginBottom", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.marginBottom}
-              onReset={() => onResetProperty("marginBottom")}
-            />
-            <NumberInput
-              label="Left"
-              value={styleValues.marginLeft}
-              onChange={(value) => onChange("marginLeft", value)}
-              min={0}
-              max={500}
-              step={1}
-              unit="px"
-              originalValue={originalStyles.marginLeft}
-              onReset={() => onResetProperty("marginLeft")}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}