sonance-brand-mcp 1.3.110 → 1.3.111

package/dist/assets/dev-tools/components/PropertiesPanel.tsx

@@ -0,0 +1,695 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Eye,
+  EyeOff,
+  Box,
+  Type,
+  Palette,
+  Layers,
+  Grid3X3,
+  Square,
+  CircleDot,
+  Minus,
+  CornerDownRight,
+  RotateCcw,
+  Save,
+  Loader2,
+} from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { ComputedStyles } from "../hooks/useComputedStyles";
+import { VisionFocusedElement } from "../types";
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface PropertyEdits {
+  // Layout
+  width?: string;
+  height?: string;
+  // Appearance
+  opacity?: string;
+  borderRadius?: string;
+  // Typography
+  fontSize?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  color?: string;
+  // Fill
+  backgroundColor?: string;
+  // Spacing
+  padding?: string;
+  margin?: string;
+  gap?: string;
+}
+
+interface PropertiesPanelProps {
+  element: VisionFocusedElement | null;
+  styles: ComputedStyles | null;
+  onPropertyClick?: (property: string, value: string) => void;
+  onSaveChanges?: (edits: PropertyEdits, element: VisionFocusedElement) => void;
+}
+
+interface SectionProps {
+  title: string;
+  icon: React.ReactNode;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+// ============================================
+// SECTION COMPONENT
+// ============================================
+
+function Section({ title, icon, defaultOpen = true, children }: SectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border-b border-white/10 last:border-b-0">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between px-2 py-1.5 hover:bg-white/5 transition-colors"
+      >
+        <div className="flex items-center gap-1.5 text-[11px] font-medium text-gray-200">
+          {icon}
+          <span>{title}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          {isOpen ? (
+            <ChevronDown className="h-3 w-3 text-gray-500" />
+          ) : (
+            <ChevronRight className="h-3 w-3 text-gray-500" />
+          )}
+        </div>
+      </button>
+      {isOpen && <div className="px-2 pb-2">{children}</div>}
+    </div>
+  );
+}
+
+// ============================================
+// EDITABLE PROPERTY ROW
+// ============================================
+
+interface EditablePropertyRowProps {
+  label: string;
+  value: string | number;
+  unit?: string;
+  color?: string;
+  editKey?: keyof PropertyEdits;
+  edits?: PropertyEdits;
+  onEdit?: (key: keyof PropertyEdits, value: string) => void;
+  readOnly?: boolean;
+  inputType?: "text" | "number" | "color";
+}
+
+function EditablePropertyRow({
+  label,
+  value,
+  unit,
+  color,
+  editKey,
+  edits,
+  onEdit,
+  readOnly = false,
+  inputType = "text",
+}: EditablePropertyRowProps) {
+  const isEditable = !readOnly && editKey && edits && onEdit;
+  const editedValue = editKey && edits ? edits[editKey] : undefined;
+  const displayValue = editedValue !== undefined ? editedValue : String(value);
+  const isEdited = editedValue !== undefined && editedValue !== String(value);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isEditable && editKey) {
+      onEdit(editKey, e.target.value);
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-between py-0.5 text-[10px]">
+      <span className="text-gray-400 uppercase tracking-wide">{label}</span>
+      <div className="flex items-center gap-1">
+        {color && (
+          <div
+            className="w-3 h-3 rounded-sm border border-white/20"
+            style={{ backgroundColor: color }}
+          />
+        )}
+        {isEditable ? (
+          <input
+            type={inputType}
+            value={displayValue}
+            onChange={handleChange}
+            className={cn(
+              "w-20 px-1.5 py-0.5 text-right font-mono text-[10px] bg-white/5 border rounded text-white focus:outline-none focus:ring-1 focus:ring-[#00A3E1]",
+              isEdited ? "border-[#00A3E1]" : "border-white/10"
+            )}
+          />
+        ) : (
+          <span className="font-mono text-white">
+            {displayValue}
+          </span>
+        )}
+        {unit && <span className="text-gray-500 ml-0.5">{unit}</span>}
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// EDITABLE DIMENSION GRID
+// ============================================
+
+interface EditableDimensionGridProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  edits: PropertyEdits;
+  onEdit: (key: keyof PropertyEdits, value: string) => void;
+}
+
+function EditableDimensionGrid({ x, y, width, height, edits, onEdit }: EditableDimensionGridProps) {
+  const widthEdited = edits.width !== undefined && edits.width !== `${width}px`;
+  const heightEdited = edits.height !== undefined && edits.height !== `${height}px`;
+
+  return (
+    <div className="grid grid-cols-2 gap-1">
+      {/* X - Read only */}
+      <div className="flex items-center gap-1 px-1.5 py-1 bg-white/5 rounded border border-white/10">
+        <span className="text-[9px] text-gray-500 uppercase w-3">X</span>
+        <span className="text-[10px] font-mono text-white flex-1 text-right">{x}</span>
+      </div>
+      {/* Y - Read only */}
+      <div className="flex items-center gap-1 px-1.5 py-1 bg-white/5 rounded border border-white/10">
+        <span className="text-[9px] text-gray-500 uppercase w-3">Y</span>
+        <span className="text-[10px] font-mono text-white flex-1 text-right">{y}</span>
+      </div>
+      {/* W - Editable */}
+      <div className={cn(
+        "flex items-center gap-1 px-1.5 py-1 bg-white/5 rounded border",
+        widthEdited ? "border-[#00A3E1]" : "border-white/10"
+      )}>
+        <span className="text-[9px] text-gray-500 uppercase w-3">W</span>
+        <input
+          type="text"
+          value={edits.width !== undefined ? edits.width : `${width}px`}
+          onChange={(e) => onEdit("width", e.target.value)}
+          className="text-[10px] font-mono text-white flex-1 text-right bg-transparent focus:outline-none"
+        />
+      </div>
+      {/* H - Editable */}
+      <div className={cn(
+        "flex items-center gap-1 px-1.5 py-1 bg-white/5 rounded border",
+        heightEdited ? "border-[#00A3E1]" : "border-white/10"
+      )}>
+        <span className="text-[9px] text-gray-500 uppercase w-3">H</span>
+        <input
+          type="text"
+          value={edits.height !== undefined ? edits.height : `${height}px`}
+          onChange={(e) => onEdit("height", e.target.value)}
+          className="text-[10px] font-mono text-white flex-1 text-right bg-transparent focus:outline-none"
+        />
+      </div>
+    </div>
+  );
+}
+
+// ============================================
+// FILL ROW (Read-only for now)
+// ============================================
+
+interface FillRowProps {
+  fill: { type: string; color?: string; opacity: number };
+}
+
+function FillRow({ fill }: FillRowProps) {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <div className="flex items-center gap-1.5 py-0.5">
+      <button
+        onClick={() => setVisible(!visible)}
+        className="p-0.5 hover:bg-white/10 rounded"
+      >
+        {visible ? (
+          <Eye className="h-2.5 w-2.5 text-gray-500" />
+        ) : (
+          <EyeOff className="h-2.5 w-2.5 text-gray-600" />
+        )}
+      </button>
+      {fill.type === "solid" && fill.color && (
+        <>
+          <div
+            className="w-4 h-4 rounded-sm border border-white/20 flex-shrink-0"
+            style={{ backgroundColor: fill.color }}
+          />
+          <span className="text-[10px] font-mono text-gray-200 flex-1">{fill.color}</span>
+          <span className="text-[10px] text-gray-500">{Math.round(fill.opacity * 100)}%</span>
+        </>
+      )}
+      {fill.type === "gradient" && (
+        <>
+          <div className="w-4 h-4 rounded-sm border border-white/20 bg-gradient-to-r from-purple-500 to-pink-500 flex-shrink-0" />
+          <span className="text-[10px] text-gray-400 flex-1">Gradient</span>
+        </>
+      )}
+      {fill.type === "image" && (
+        <>
+          <div className="w-4 h-4 rounded-sm border border-white/20 bg-white/10 flex items-center justify-center flex-shrink-0">
+            <Layers className="h-2.5 w-2.5 text-gray-500" />
+          </div>
+          <span className="text-[10px] text-gray-400 flex-1">Image</span>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ============================================
+// STROKE ROW (Read-only for now)
+// ============================================
+
+interface StrokeRowProps {
+  stroke: { color: string; width: string; style: string };
+}
+
+function StrokeRow({ stroke }: StrokeRowProps) {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <div className="flex items-center gap-1.5 py-0.5">
+      <button
+        onClick={() => setVisible(!visible)}
+        className="p-0.5 hover:bg-white/10 rounded"
+      >
+        {visible ? (
+          <Eye className="h-2.5 w-2.5 text-gray-500" />
+        ) : (
+          <EyeOff className="h-2.5 w-2.5 text-gray-600" />
+        )}
+      </button>
+      <div
+        className="w-4 h-4 rounded-sm border-2 flex-shrink-0"
+        style={{ borderColor: stroke.color }}
+      />
+      <span className="text-[10px] font-mono text-gray-200">{stroke.color}</span>
+      <span className="text-[10px] text-gray-500">{stroke.width}</span>
+    </div>
+  );
+}
+
+// ============================================
+// MAIN PROPERTIES PANEL
+// ============================================
+
+export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChanges }: PropertiesPanelProps) {
+  // Edit state
+  const [edits, setEdits] = useState<PropertyEdits>({});
+  const [isSaving, setIsSaving] = useState(false);
+  const [originalInlineStyles, setOriginalInlineStyles] = useState<Record<string, string>>({});
+
+  // Check if there are any changes
+  const hasChanges = useMemo(() => Object.keys(edits).length > 0, [edits]);
+
+  // Get the actual DOM element for live preview
+  const targetElement = useMemo(() => {
+    if (!element?.coordinates) return null;
+    const { x, y, width, height } = element.coordinates;
+    const centerX = x + width / 2;
+    const centerY = y + height / 2;
+    const el = document.elementFromPoint(centerX, centerY);
+    if (el?.closest('[data-sonance-devtools="true"]')) return null;
+    return el as HTMLElement | null;
+  }, [element]);
+
+  // Capture original inline styles when element changes
+  useEffect(() => {
+    if (targetElement) {
+      setOriginalInlineStyles({
+        width: targetElement.style.width,
+        height: targetElement.style.height,
+        opacity: targetElement.style.opacity,
+        borderRadius: targetElement.style.borderRadius,
+        fontSize: targetElement.style.fontSize,
+        fontWeight: targetElement.style.fontWeight,
+        lineHeight: targetElement.style.lineHeight,
+        letterSpacing: targetElement.style.letterSpacing,
+        color: targetElement.style.color,
+        backgroundColor: targetElement.style.backgroundColor,
+        padding: targetElement.style.padding,
+        margin: targetElement.style.margin,
+        gap: targetElement.style.gap,
+      });
+    }
+    // Clear edits when element changes
+    setEdits({});
+  }, [targetElement, element]);
+
+  // Apply live preview when edits change
+  useEffect(() => {
+    if (!targetElement) return;
+
+    // Apply each edited property
+    if (edits.width) targetElement.style.width = edits.width;
+    if (edits.height) targetElement.style.height = edits.height;
+    if (edits.opacity) targetElement.style.opacity = String(parseFloat(edits.opacity) / 100);
+    if (edits.borderRadius) targetElement.style.borderRadius = edits.borderRadius;
+    if (edits.fontSize) targetElement.style.fontSize = edits.fontSize;
+    if (edits.fontWeight) targetElement.style.fontWeight = edits.fontWeight;
+    if (edits.lineHeight) targetElement.style.lineHeight = edits.lineHeight;
+    if (edits.letterSpacing) targetElement.style.letterSpacing = edits.letterSpacing;
+    if (edits.color) targetElement.style.color = edits.color;
+    if (edits.backgroundColor) targetElement.style.backgroundColor = edits.backgroundColor;
+    if (edits.padding) targetElement.style.padding = edits.padding;
+    if (edits.margin) targetElement.style.margin = edits.margin;
+    if (edits.gap) targetElement.style.gap = edits.gap;
+
+    // Mark element as having preview
+    targetElement.setAttribute('data-sonance-preview', 'true');
+  }, [edits, targetElement]);
+
+  // Handle edit
+  const handleEdit = useCallback((key: keyof PropertyEdits, value: string) => {
+    setEdits(prev => ({ ...prev, [key]: value }));
+  }, []);
+
+  // Handle revert - restore original styles
+  const handleRevert = useCallback(() => {
+    if (!targetElement) return;
+
+    // Restore all original inline styles
+    Object.entries(originalInlineStyles).forEach(([key, value]) => {
+      (targetElement.style as unknown as Record<string, string>)[key] = value;
+    });
+
+    // Remove preview marker
+    targetElement.removeAttribute('data-sonance-preview');
+
+    // Clear edits
+    setEdits({});
+  }, [targetElement, originalInlineStyles]);
+
+  // Handle save - call API to persist changes
+  const handleSave = useCallback(async () => {
+    if (!element || !hasChanges) return;
+
+    setIsSaving(true);
+    try {
+      // Call the parent's save handler which will trigger the AI-assisted save
+      onSaveChanges?.(edits, element);
+
+      // Clear edits after initiating save (the parent handles the actual persistence)
+      setEdits({});
+    } finally {
+      setIsSaving(false);
+    }
+  }, [element, edits, hasChanges, onSaveChanges]);
+
+  // Empty state
+  if (!element || !styles) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-center">
+        <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center mb-3">
+          <Box className="h-5 w-5 text-gray-500" />
+        </div>
+        <p className="text-[11px] text-gray-400">
+          Click an element to inspect
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-gray-200 flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto">
+        {/* Header - Element Name */}
+        <div className="px-2 py-2 border-b border-white/10 bg-white/5">
+          <div className="flex items-center gap-1.5">
+            <div className="w-5 h-5 rounded bg-purple-500/20 flex items-center justify-center">
+              <Box className="h-3 w-3 text-purple-400" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-[11px] font-semibold text-white truncate">
+                {element.name}
+              </p>
+              {element.variantId && (
+                <p className="text-[9px] font-mono text-gray-500 truncate">
+                  #{element.variantId.substring(0, 8)}
+                </p>
+              )}
+            </div>
+            <span className="text-[9px] px-1.5 py-0.5 rounded bg-white/10 text-gray-400 uppercase">
+              {styles.tagName}
+            </span>
+          </div>
+          {styles.textContent && (
+            <p className="mt-1.5 text-[10px] text-gray-400 truncate px-0.5">
+              &ldquo;{styles.textContent}&rdquo;
+            </p>
+          )}
+        </div>
+
+        {/* Layout Section - Always shown */}
+        <Section
+          title="Layout"
+          icon={<Grid3X3 className="h-3 w-3" />}
+          defaultOpen={true}
+        >
+          <div className="space-y-2">
+            <EditableDimensionGrid
+              x={styles.geometry.x}
+              y={styles.geometry.y}
+              width={styles.geometry.width}
+              height={styles.geometry.height}
+              edits={edits}
+              onEdit={handleEdit}
+            />
+          </div>
+        </Section>
+
+        {/* Appearance Section - Always shown */}
+        <Section
+          title="Appearance"
+          icon={<CircleDot className="h-3 w-3" />}
+          defaultOpen={true}
+        >
+          <div className="space-y-0.5">
+            <EditablePropertyRow
+              label="Opacity"
+              value={Math.round(styles.opacity)}
+              unit="%"
+              editKey="opacity"
+              edits={edits}
+              onEdit={handleEdit}
+            />
+            <EditablePropertyRow
+              label="Radius"
+              value={styles.borderRadius}
+              editKey="borderRadius"
+              edits={edits}
+              onEdit={handleEdit}
+            />
+          </div>
+        </Section>
+
+        {/* Typography Section - Only for text elements */}
+        {styles.typography && (
+          <Section
+            title="Typography"
+            icon={<Type className="h-3 w-3" />}
+            defaultOpen={true}
+          >
+            <div className="space-y-0.5">
+              <EditablePropertyRow
+                label="Font"
+                value={styles.typography.fontFamily}
+                readOnly
+              />
+              <div className="grid grid-cols-2 gap-x-2">
+                <EditablePropertyRow
+                  label="Size"
+                  value={styles.typography.fontSize}
+                  editKey="fontSize"
+                  edits={edits}
+                  onEdit={handleEdit}
+                />
+                <EditablePropertyRow
+                  label="Weight"
+                  value={styles.typography.fontWeight}
+                  editKey="fontWeight"
+                  edits={edits}
+                  onEdit={handleEdit}
+                />
+              </div>
+              <EditablePropertyRow
+                label="Line H"
+                value={styles.typography.lineHeight}
+                editKey="lineHeight"
+                edits={edits}
+                onEdit={handleEdit}
+              />
+              <EditablePropertyRow
+                label="Letter"
+                value={styles.typography.letterSpacing}
+                editKey="letterSpacing"
+                edits={edits}
+                onEdit={handleEdit}
+              />
+              <EditablePropertyRow
+                label="Color"
+                value={styles.typography.color}
+                color={styles.typography.color !== "transparent" ? styles.typography.color : undefined}
+                editKey="color"
+                edits={edits}
+                onEdit={handleEdit}
+              />
+            </div>
+          </Section>
+        )}
+
+        {/* Fill Section - Only show if has fills */}
+        {styles.fills.length > 0 && (
+          <Section
+            title="Fill"
+            icon={<Square className="h-3 w-3" />}
+            defaultOpen={true}
+          >
+            <div className="space-y-0.5">
+              {styles.fills.map((fill, i) => (
+                <FillRow key={i} fill={fill} />
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {/* Stroke Section - Only show if has strokes */}
+        {styles.strokes.length > 0 && (
+          <Section
+            title="Stroke"
+            icon={<Minus className="h-3 w-3" />}
+            defaultOpen={true}
+          >
+            <div className="space-y-0.5">
+              {styles.strokes.map((stroke, i) => (
+                <StrokeRow key={i} stroke={stroke} />
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {/* Effects Section - Only show if has effects */}
+        {styles.effects.length > 0 && (
+          <Section
+            title="Effects"
+            icon={<Layers className="h-3 w-3" />}
+            defaultOpen={true}
+          >
+            <div className="space-y-0.5">
+              {styles.effects.map((effect, i) => (
+                <div key={i} className="flex items-center gap-1.5 py-0.5">
+                  <Eye className="h-2.5 w-2.5 text-gray-500" />
+                  <span className="text-[10px] text-gray-400 capitalize">{effect.type}</span>
+                  <span className="text-[9px] font-mono text-gray-500 truncate flex-1">
+                    {effect.value.substring(0, 30)}...
+                  </span>
+                </div>
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {/* Spacing Section - Always shown */}
+        <Section
+          title="Spacing"
+          icon={<CornerDownRight className="h-3 w-3" />}
+          defaultOpen={false}
+        >
+          <div className="space-y-0.5">
+            <EditablePropertyRow
+              label="Padding"
+              value={styles.padding}
+              editKey="padding"
+              edits={edits}
+              onEdit={handleEdit}
+            />
+            <EditablePropertyRow
+              label="Margin"
+              value={styles.margin}
+              editKey="margin"
+              edits={edits}
+              onEdit={handleEdit}
+            />
+            {styles.gap !== "normal" && (
+              <EditablePropertyRow
+                label="Gap"
+                value={styles.gap}
+                editKey="gap"
+                edits={edits}
+                onEdit={handleEdit}
+              />
+            )}
+          </div>
+        </Section>
+
+        {/* Flexbox Section - only if flex */}
+        {(styles.display === "flex" || styles.display === "inline-flex") && (
+          <Section
+            title="Flexbox"
+            icon={<Palette className="h-3 w-3" />}
+            defaultOpen={false}
+          >
+            <div className="space-y-0.5">
+              <EditablePropertyRow
+                label="Direction"
+                value={styles.flexDirection}
+                readOnly
+              />
+              <EditablePropertyRow
+                label="Align"
+                value={styles.alignItems}
+                readOnly
+              />
+              <EditablePropertyRow
+                label="Justify"
+                value={styles.justifyContent}
+                readOnly
+              />
+            </div>
+          </Section>
+        )}
+      </div>
+
+      {/* Save/Revert Footer - Only show when there are changes */}
+      {hasChanges && (
+        <div className="sticky bottom-0 px-2 py-2 bg-[#1a1a1a] border-t border-white/10 flex gap-2">
+          <button
+            onClick={handleRevert}
+            disabled={isSaving}
+            className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-[11px] font-medium rounded bg-white/10 text-gray-300 hover:bg-white/20 disabled:opacity-50 transition-colors"
+          >
+            <RotateCcw className="h-3 w-3" />
+            Revert
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-[11px] font-medium rounded bg-[#00A3E1] text-white hover:bg-[#00A3E1]/80 disabled:opacity-50 transition-colors"
+          >
+            {isSaving ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : (
+              <Save className="h-3 w-3" />
+            )}
+            Save Changes
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}