sonance-brand-mcp 1.3.110 → 1.3.112

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

@@ -0,0 +1,1345 @@
+"use client";
+
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Eye,
+  EyeOff,
+  Box,
+  Type,
+  Palette,
+  Layers,
+  Grid3X3,
+  Square,
+  CircleDot,
+  Minus,
+  CornerDownRight,
+  RotateCcw,
+  Save,
+  Loader2,
+  Pencil,
+  Image as ImageIcon,
+  Upload,
+  Link,
+} from "lucide-react";
+import { useTheme } from "next-themes";
+import { cn } from "../../../lib/utils";
+import { ComputedStyles } from "../hooks/useComputedStyles";
+import { VisionFocusedElement, ApplyFirstSession, ImageOverride, PublicImageAsset, LogoAsset } from "../types";
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface PropertyEdits {
+  // Content
+  textContent?: string;
+  // Layout
+  width?: string;
+  height?: string;
+  // Appearance
+  opacity?: string;
+  borderRadius?: string;
+  // Typography
+  fontSize?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  color?: string;           // Legacy/universal color
+  colorLight?: string;      // Color for light mode only
+  colorDark?: string;       // Color for dark mode only
+  // 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) => Promise<void>;
+  // Text change session props (shown in Details tab for text-only changes)
+  textChangeSession?: ApplyFirstSession | null;
+  onTextChangeAccept?: () => void;
+  onTextChangeRevert?: () => void;
+  // Image editing props
+  imageOverride?: ImageOverride;
+  onImageOverrideChange?: (override: ImageOverride) => void;
+  onSaveImageChanges?: () => void;
+  isImageSaving?: boolean;
+  publicImages?: PublicImageAsset[];
+  publicImagesByFolder?: Record<string, PublicImageAsset[]>;
+  logoAssets?: LogoAsset[];
+  logoAssetsByBrand?: Record<string, LogoAsset[]>;
+  onImageUpload?: (file: File) => Promise<string | null>;
+}
+
+interface SectionProps {
+  title: string;
+  icon: React.ReactNode;
+  defaultOpen?: boolean;
+  readOnly?: boolean;
+  children: React.ReactNode;
+}
+
+// ============================================
+// SECTION COMPONENT
+// ============================================
+
+function Section({ title, icon, defaultOpen = true, readOnly = false, children }: SectionProps) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border-b border-gray-200 dark: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-gray-100 dark:hover:bg-white/5 transition-colors"
+      >
+        <div className="flex items-center gap-1.5 text-[11px] font-medium text-gray-700 dark:text-gray-200">
+          {icon}
+          <span id="section-span-title">{title}</span>
+          {readOnly && (
+            <span id="section-span-readonly" className="text-[8px] px-1 py-0.5 rounded bg-gray-100 dark:bg-white/5 text-gray-500 uppercase tracking-wider">
+              read-only
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          {isOpen ? (
+            <ChevronDown className="h-3 w-3 text-gray-400 dark:text-gray-500" />
+          ) : (
+            <ChevronRight className="h-3 w-3 text-gray-400 dark: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";
+  options?: { label: string; value: string }[];
+}
+
+function EditablePropertyRow({
+  label,
+  value,
+  unit,
+  color,
+  editKey,
+  edits,
+  onEdit,
+  readOnly = false,
+  inputType = "text",
+  options,
+}: 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 | HTMLSelectElement>) => {
+    if (isEditable && editKey) {
+      onEdit(editKey, e.target.value);
+    }
+  };
+
+  return (
+    <div className={cn(
+      "flex items-center justify-between py-0.5 text-[10px] group",
+      isEditable && "hover:bg-gray-100 dark:hover:bg-white/5 rounded px-1 -mx-1"
+    )}>
+      <span id="editable-property-row-span-label" className={cn(
+        "uppercase tracking-wide",
+        isEditable ? "text-gray-500 dark:text-gray-400" : "text-gray-400 dark:text-gray-500"
+      )}>{label}</span>
+      <div className="flex items-center gap-1">
+        {color && (
+          <div
+            className="w-3 h-3 rounded-sm border border-gray-300 dark:border-white/20 relative"
+            style={{ backgroundColor: color }}
+          >
+            {isEditable && inputType === "color" && (
+              <input
+                type="color"
+                value={displayValue.length === 7 ? displayValue : "#000000"}
+                onChange={handleChange}
+                className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
+              />
+            )}
+          </div>
+        )}
+        {isEditable ? (
+          options ? (
+            <div className="relative group/select">
+               <select
+                value={displayValue}
+                onChange={handleChange}
+                className={cn(
+                  "w-20 px-1.5 py-0.5 text-right font-mono text-[10px] bg-gray-100 dark:bg-white/10 border rounded text-gray-800 dark:text-white focus:outline-none focus:ring-1 focus:ring-[#00A3E1] hover:border-[#00A3E1]/50 transition-colors cursor-pointer appearance-none",
+                  isEdited ? "border-[#00A3E1]" : "border-gray-300 dark:border-white/20"
+                )}
+              >
+                {!options.some(o => o.value === displayValue) && (
+                  <option value={displayValue}>{displayValue}</option>
+                )}
+                {options.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : (
+            <>
+              <Pencil className="h-2.5 w-2.5 text-gray-400 dark:text-gray-600 group-hover:text-[#00A3E1] transition-colors" />
+              <input
+                type={inputType === "color" ? "text" : inputType}
+                value={displayValue}
+                onChange={handleChange}
+                className={cn(
+                  "w-20 px-1.5 py-0.5 text-right font-mono text-[10px] bg-gray-100 dark:bg-white/10 border rounded text-gray-800 dark:text-white focus:outline-none focus:ring-1 focus:ring-[#00A3E1] hover:border-[#00A3E1]/50 transition-colors cursor-text",
+                  isEdited ? "border-[#00A3E1]" : "border-gray-300 dark:border-white/20"
+                )}
+              />
+            </>
+          )
+        ) : (
+          <span id="editable-property-row-span-displayvalue" className="font-mono text-gray-600 dark:text-gray-400 cursor-default">
+            {displayValue}
+          </span>
+        )}
+        {unit && <span id="editable-property-row-span-unit" 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 overflow-hidden">
+      {/* X - Read only */}
+      <div className="flex items-center gap-1 px-1.5 py-1 bg-gray-50 dark:bg-white/5 rounded border border-transparent min-w-0 cursor-default">
+        <span id="editable-dimension-grid-span-x" className="text-[9px] text-gray-500 dark:text-gray-600 uppercase flex-shrink-0">X</span>
+        <span id="editable-dimension-grid-span-x" className="text-[10px] font-mono text-gray-600 dark:text-gray-400 text-right truncate flex-1 min-w-0">{x}</span>
+      </div>
+      {/* Y - Read only */}
+      <div className="flex items-center gap-1 px-1.5 py-1 bg-gray-50 dark:bg-white/5 rounded border border-transparent min-w-0 cursor-default">
+        <span id="editable-dimension-grid-span-y" className="text-[9px] text-gray-500 dark:text-gray-600 uppercase flex-shrink-0">Y</span>
+        <span id="editable-dimension-grid-span-y" className="text-[10px] font-mono text-gray-600 dark:text-gray-400 text-right truncate flex-1 min-w-0">{y}</span>
+      </div>
+      {/* W - Editable */}
+      <div className={cn(
+        "group flex items-center gap-1 px-1.5 py-1 bg-gray-100 dark:bg-white/10 rounded border min-w-0 hover:border-[#00A3E1]/50 transition-colors cursor-text",
+        widthEdited ? "border-[#00A3E1]" : "border-gray-300 dark:border-white/20"
+      )}>
+        <Pencil className="h-2 w-2 text-gray-400 dark:text-gray-600 group-hover:text-[#00A3E1] transition-colors flex-shrink-0" />
+        <span id="editable-dimension-grid-span-w" className="text-[9px] text-gray-500 dark:text-gray-400 uppercase flex-shrink-0">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-gray-800 dark:text-white text-right bg-transparent focus:outline-none w-full min-w-0 cursor-text"
+        />
+      </div>
+      {/* H - Editable */}
+      <div className={cn(
+        "group flex items-center gap-1 px-1.5 py-1 bg-gray-100 dark:bg-white/10 rounded border min-w-0 hover:border-[#00A3E1]/50 transition-colors cursor-text",
+        heightEdited ? "border-[#00A3E1]" : "border-gray-300 dark:border-white/20"
+      )}>
+        <Pencil className="h-2 w-2 text-gray-400 dark:text-gray-600 group-hover:text-[#00A3E1] transition-colors flex-shrink-0" />
+        <span id="editable-dimension-grid-span-h" className="text-[9px] text-gray-500 dark:text-gray-400 uppercase flex-shrink-0">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-gray-800 dark:text-white text-right bg-transparent focus:outline-none w-full min-w-0 cursor-text"
+        />
+      </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-gray-100 dark:hover:bg-white/10 rounded"
+      >
+        {visible ? (
+          <Eye className="h-2.5 w-2.5 text-gray-400 dark:text-gray-500" />
+        ) : (
+          <EyeOff className="h-2.5 w-2.5 text-gray-500 dark:text-gray-600" />
+        )}
+      </button>
+      {fill.type === "solid" && fill.color && (
+        <>
+          <div
+            className="w-4 h-4 rounded-sm border border-gray-300 dark:border-white/20 flex-shrink-0"
+            style={{ backgroundColor: fill.color }}
+          />
+          <span id="fill-row-span-fillcolor" className="text-[10px] font-mono text-gray-700 dark:text-gray-200 flex-1">{fill.color}</span>
+          <span id="fill-row-span-mathroundfillopacity" 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-gray-300 dark:border-white/20 bg-gradient-to-r from-purple-500 to-pink-500 flex-shrink-0" />
+          <span id="fill-row-span-gradient" className="text-[10px] text-gray-500 dark:text-gray-400 flex-1">Gradient</span>
+        </>
+      )}
+      {fill.type === "image" && (
+        <>
+          <div className="w-4 h-4 rounded-sm border border-gray-300 dark:border-white/20 bg-gray-100 dark:bg-white/10 flex items-center justify-center flex-shrink-0">
+            <Layers className="h-2.5 w-2.5 text-gray-400 dark:text-gray-500" />
+          </div>
+          <span id="fill-row-span-image" className="text-[10px] text-gray-500 dark: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-gray-100 dark:hover:bg-white/10 rounded"
+      >
+        {visible ? (
+          <Eye className="h-2.5 w-2.5 text-gray-400 dark:text-gray-500" />
+        ) : (
+          <EyeOff className="h-2.5 w-2.5 text-gray-500 dark:text-gray-600" />
+        )}
+      </button>
+      <div
+        className="w-4 h-4 rounded-sm border-2 flex-shrink-0"
+        style={{ borderColor: stroke.color }}
+      />
+      <span id="stroke-row-span-strokecolor" className="text-[10px] font-mono text-gray-700 dark:text-gray-200">{stroke.color}</span>
+      <span id="stroke-row-span-strokewidth" className="text-[10px] text-gray-500">{stroke.width}</span>
+    </div>
+  );
+}
+
+// ============================================
+// MAIN PROPERTIES PANEL
+// ============================================
+
+export function PropertiesPanel({ 
+  element, 
+  styles, 
+  onPropertyClick, 
+  onSaveChanges, 
+  textChangeSession, 
+  onTextChangeAccept, 
+  onTextChangeRevert,
+  imageOverride,
+  onImageOverrideChange,
+  onSaveImageChanges,
+  isImageSaving = false,
+  publicImages = [],
+  publicImagesByFolder = {},
+  logoAssets = [],
+  logoAssetsByBrand = {},
+  onImageUpload,
+}: PropertiesPanelProps) {
+  // Theme detection for mode-specific color changes
+  const { resolvedTheme } = useTheme();
+  const currentTheme = resolvedTheme || "light";
+  const isDarkMode = currentTheme === "dark";
+
+  // Edit state
+  const [edits, setEdits] = useState<PropertyEdits>({});
+  const [isSaving, setIsSaving] = useState(false);
+  const [originalInlineStyles, setOriginalInlineStyles] = useState<Record<string, string>>({});
+  const [originalTextContent, setOriginalTextContent] = useState<string>("");
+  
+  // Image editing state
+  const [customUrl, setCustomUrl] = useState("");
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Check if there are any changes
+  const hasChanges = useMemo(() => Object.keys(edits).length > 0, [edits]);
+
+  // Get the actual DOM element for live preview using multi-strategy approach
+  // This ensures we find the correct element (e.g., styled <span> inside <p>)
+  const targetElement = useMemo(() => {
+    if (!element) return null;
+    
+    // Strategy 1: Find by element ID with styled child detection
+    if (element.elementId) {
+      const byId = document.getElementById(element.elementId);
+      if (byId && !byId.closest('[data-sonance-devtools="true"]')) {
+        // Check for styled child (e.g., span with inline color inside p)
+        const styledChild = byId.querySelector('[style*="color"]') as HTMLElement;
+        if (styledChild) {
+          return styledChild;
+        }
+        return byId;
+      }
+    }
+    
+    // Strategy 2: Find by text content, prioritizing span elements
+    if (element.textContent) {
+      const textToFind = element.textContent.trim();
+      if (textToFind.length > 0) {
+        // Search spans first (often have inline styles)
+        const spanCandidates = document.querySelectorAll('span');
+        for (const el of spanCandidates) {
+          if (el.closest('[data-sonance-devtools="true"]')) continue;
+          const elText = el.textContent?.trim() || '';
+          const compareLength = Math.min(30, textToFind.length);
+          if (elText.startsWith(textToFind.substring(0, compareLength))) {
+            return el as HTMLElement;
+          }
+        }
+        
+        // Fallback to other text elements
+        const candidates = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, label, button, a, td, th, li, div');
+        for (const el of candidates) {
+          if (el.closest('[data-sonance-devtools="true"]')) continue;
+          const elText = el.textContent?.trim() || '';
+          const compareLength = Math.min(30, textToFind.length);
+          if (elText.startsWith(textToFind.substring(0, compareLength))) {
+            // Check for styled span child
+            const styledSpan = el.querySelector('span[style*="color"]') as HTMLElement;
+            if (styledSpan) {
+              return styledSpan;
+            }
+            return el as HTMLElement;
+          }
+        }
+      }
+    }
+    
+    // Strategy 3: Fallback to coordinates (may be stale after scroll)
+    if (element.coordinates) {
+      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;
+    }
+    
+    return null;
+  }, [element]);
+
+  // Capture original inline styles and text content 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,
+      });
+      // Capture original text content for revert
+      setOriginalTextContent(targetElement.textContent || "");
+    }
+    // Clear edits when element changes
+    setEdits({});
+  }, [targetElement, element]);
+
+  // Apply live preview when edits change
+  useEffect(() => {
+    if (!targetElement) return;
+
+    // Apply text content change
+    if (edits.textContent !== undefined) {
+      targetElement.textContent = edits.textContent;
+    }
+
+    // Apply each edited style 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;
+    
+    // Apply theme-specific color: use the color for the current theme mode
+    // This ensures live preview shows the color being edited for the current mode
+    const colorToApply = isDarkMode 
+      ? (edits.colorDark || edits.color)
+      : (edits.colorLight || edits.color);
+    if (colorToApply) targetElement.style.color = colorToApply;
+    
+    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, isDarkMode]);
+
+  // Handle edit
+  const handleEdit = useCallback((key: keyof PropertyEdits, value: string) => {
+    setEdits(prev => ({ ...prev, [key]: value }));
+  }, []);
+
+  // Handle revert - restore original styles and text content
+  const handleRevert = useCallback(() => {
+    if (!targetElement) return;
+
+    // Restore original text content if it was modified
+    if (originalTextContent) {
+      targetElement.textContent = originalTextContent;
+    }
+
+    // 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, originalTextContent]);
+
+  // Handle save - call API to persist changes
+  const handleSave = useCallback(async () => {
+    if (!element || !hasChanges) return;
+
+    setIsSaving(true);
+    try {
+      // Call the parent's save handler and wait for it to complete
+      await onSaveChanges?.(edits, element);
+      // Only clear edits after successful save
+      setEdits({});
+    } catch (error) {
+      console.error("[PropertiesPanel] Save failed:", error);
+      // Keep edits on error so user can retry
+    } 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-gray-100 dark:bg-white/10 flex items-center justify-center mb-3">
+          <Box className="h-5 w-5 text-gray-400 dark:text-gray-500" />
+        </div>
+        <p id="stroke-row-p-click-an-element-to-" className="text-[11px] text-gray-500 dark:text-gray-400">
+          Click an element to inspect
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-gray-700 dark: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-gray-200 dark:border-white/10 bg-gray-50 dark: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 id="stroke-row-p-elementname" className="text-[11px] font-semibold text-gray-900 dark:text-white truncate">
+                {element.name}
+              </p>
+              {element.variantId && (
+                <p id="stroke-row-p-elementvariantidsubs" className="text-[9px] font-mono text-gray-500 truncate">
+                  #{element.variantId.substring(0, 8)}
+                </p>
+              )}
+            </div>
+            <span id="stroke-row-span-stylestagname" className="text-[9px] px-1.5 py-0.5 rounded bg-gray-100 dark:bg-white/10 text-gray-500 dark:text-gray-400 uppercase">
+              {styles.tagName}
+            </span>
+          </div>
+          {styles.textContent && !edits.textContent && (
+            <p id="stroke-row-p-ldquostylestextconte" className="mt-1.5 text-[10px] text-gray-500 dark:text-gray-400 px-0.5">
+              &ldquo;{styles.textContent}&rdquo;
+            </p>
+          )}
+          {edits.textContent && (
+            <p className="mt-1.5 text-[10px] text-[#00A3E1] px-0.5">
+              &ldquo;{edits.textContent}&rdquo;
+            </p>
+          )}
+        </div>
+
+        {/* Content Section - Only for text elements */}
+        {styles.textContent && (
+          <Section
+            title="Content"
+            icon={<Type className="h-3 w-3" />}
+            defaultOpen={true}
+          >
+            <div className="space-y-1">
+              <textarea
+                value={edits.textContent ?? styles.textContent}
+                onChange={(e) => handleEdit("textContent", e.target.value)}
+                className={cn(
+                  "w-full min-h-[60px] p-2 text-[10px] font-mono rounded resize-y",
+                  "bg-gray-50 dark:bg-white/10 border text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-gray-500",
+                  "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]",
+                  edits.textContent !== undefined && edits.textContent !== styles.textContent
+                    ? "border-[#00A3E1]"
+                    : "border-gray-300 dark:border-white/20"
+                )}
+                placeholder="Edit text content..."
+              />
+              {edits.textContent !== undefined && edits.textContent !== styles.textContent && (
+                <p className="text-[9px] text-[#00A3E1] flex items-center gap-1">
+                  <Pencil className="h-2.5 w-2.5" />
+                  Content modified
+                </p>
+              )}
+            </div>
+          </Section>
+        )}
+
+        {/* Image Section - Only for IMG elements */}
+        {styles.tagName.toUpperCase() === "IMG" && (
+          <Section
+            title="Image"
+            icon={<ImageIcon className="h-3 w-3" />}
+            defaultOpen={true}
+          >
+            <div className="space-y-3">
+              {/* Current Source Display */}
+              <div className="space-y-1">
+                <label className="text-[9px] text-gray-500 uppercase tracking-wide">Current Source</label>
+                <div className="text-[10px] font-mono text-gray-400 truncate bg-white/5 px-2 py-1 rounded">
+                  {imageOverride?.src || (targetElement as HTMLImageElement)?.src || "Unknown"}
+                </div>
+              </div>
+
+              {/* No handler connected message */}
+              {!onImageOverrideChange && (
+                <div className="p-2 rounded bg-amber-500/10 border border-amber-500/30">
+                  <p className="text-[10px] text-amber-400">
+                    Image editing requires Vision Mode to be active. Enable Vision Mode to swap, resize, or scale images.
+                  </p>
+                </div>
+              )}
+
+              {/* Brand Logos Dropdown */}
+              {Object.keys(logoAssetsByBrand).length > 0 && onImageOverrideChange && (
+                <div className="space-y-1">
+                  <label className="text-[9px] text-gray-500 uppercase tracking-wide">Brand Logos</label>
+                  <select
+                    value={imageOverride?.src || ""}
+                    onChange={(e) => {
+                      if (e.target.value) {
+                        onImageOverrideChange({ ...imageOverride, src: e.target.value });
+                      }
+                    }}
+                    className={cn(
+                      "w-full h-7 px-2 text-[10px] rounded",
+                      "border border-white/20 bg-white/10 text-white",
+                      "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]"
+                    )}
+                  >
+                    <option value="">-- Select brand logo --</option>
+                    {Object.keys(logoAssetsByBrand).sort().map((brand) => (
+                      <optgroup key={brand} label={brand.charAt(0).toUpperCase() + brand.slice(1)}>
+                        {logoAssetsByBrand[brand].map((asset) => (
+                          <option key={asset.id} value={asset.path}>
+                            {asset.name}
+                          </option>
+                        ))}
+                      </optgroup>
+                    ))}
+                  </select>
+                </div>
+              )}
+
+              {/* Public Folder Images Dropdown */}
+              {Object.keys(publicImagesByFolder).length > 0 && onImageOverrideChange && (
+                <div className="space-y-1">
+                  <label className="text-[9px] text-gray-500 uppercase tracking-wide">Public Images</label>
+                  <select
+                    value={imageOverride?.src || ""}
+                    onChange={(e) => {
+                      if (e.target.value) {
+                        onImageOverrideChange({ ...imageOverride, src: e.target.value });
+                      }
+                    }}
+                    className={cn(
+                      "w-full h-7 px-2 text-[10px] rounded",
+                      "border border-white/20 bg-white/10 text-white",
+                      "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]"
+                    )}
+                  >
+                    <option value="">-- Select from public folder --</option>
+                    {Object.keys(publicImagesByFolder).sort().map((folder) => (
+                      <optgroup key={folder} label={folder === "root" ? "Root" : folder}>
+                        {publicImagesByFolder[folder].map((asset) => (
+                          <option key={asset.id} value={asset.path}>
+                            {asset.name}
+                          </option>
+                        ))}
+                      </optgroup>
+                    ))}
+                  </select>
+                </div>
+              )}
+
+              {/* Custom URL Input */}
+              {onImageOverrideChange && (
+                <div className="space-y-1">
+                  <label className="text-[9px] text-gray-500 uppercase tracking-wide flex items-center gap-1">
+                    <Link className="h-2.5 w-2.5" />
+                    Custom URL
+                  </label>
+                  <div className="flex gap-1">
+                    <input
+                      type="text"
+                      value={customUrl}
+                      onChange={(e) => setCustomUrl(e.target.value)}
+                      placeholder="https://..."
+                      className={cn(
+                        "flex-1 h-7 px-2 text-[10px] font-mono rounded",
+                        "border border-white/20 bg-white/10 text-white placeholder-gray-500",
+                        "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]"
+                      )}
+                    />
+                    <button
+                      onClick={() => {
+                        if (customUrl) {
+                          onImageOverrideChange({ ...imageOverride, src: customUrl });
+                          setCustomUrl("");
+                        }
+                      }}
+                      disabled={!customUrl}
+                      className="px-2 h-7 text-[10px] font-medium rounded bg-[#00A3E1] text-white hover:bg-[#00A3E1]/80 disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      Apply
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Upload Button */}
+              {onImageUpload && onImageOverrideChange && (
+                <div className="space-y-1">
+                  <label className="text-[9px] text-gray-500 uppercase tracking-wide flex items-center gap-1">
+                    <Upload className="h-2.5 w-2.5" />
+                    Upload New Image
+                  </label>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    onChange={async (e) => {
+                      const file = e.target.files?.[0];
+                      if (file && onImageUpload) {
+                        setIsUploading(true);
+                        try {
+                          const uploadedPath = await onImageUpload(file);
+                          if (uploadedPath) {
+                            onImageOverrideChange({ ...imageOverride, src: uploadedPath });
+                          }
+                        } finally {
+                          setIsUploading(false);
+                          if (fileInputRef.current) {
+                            fileInputRef.current.value = "";
+                          }
+                        }
+                      }
+                    }}
+                    className="hidden"
+                  />
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={isUploading}
+                    className={cn(
+                      "w-full flex items-center justify-center gap-1.5 h-7 text-[10px] font-medium rounded",
+                      "border border-dashed border-white/30 bg-white/5 text-gray-300",
+                      "hover:border-[#00A3E1]/50 hover:bg-white/10 transition-colors",
+                      "disabled:opacity-50 disabled:cursor-not-allowed"
+                    )}
+                  >
+                    {isUploading ? (
+                      <>
+                        <Loader2 className="h-3 w-3 animate-spin" />
+                        Uploading...
+                      </>
+                    ) : (
+                      <>
+                        <Upload className="h-3 w-3" />
+                        Choose File
+                      </>
+                    )}
+                  </button>
+                </div>
+              )}
+
+              {/* Dimensions */}
+              {onImageOverrideChange && (
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="space-y-1">
+                    <label className="text-[9px] text-gray-500 uppercase tracking-wide">Width (px)</label>
+                    <input
+                      type="number"
+                      min="10"
+                      max="2000"
+                      value={imageOverride?.width || ""}
+                      placeholder="auto"
+                      onChange={(e) => onImageOverrideChange({ 
+                        ...imageOverride, 
+                        width: e.target.value ? parseInt(e.target.value) : undefined 
+                      })}
+                      className={cn(
+                        "w-full h-7 px-2 text-[10px] font-mono rounded",
+                        "border border-white/20 bg-white/10 text-white placeholder-gray-500",
+                        "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]"
+                      )}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-[9px] text-gray-500 uppercase tracking-wide">Height (px)</label>
+                    <input
+                      type="number"
+                      min="10"
+                      max="2000"
+                      value={imageOverride?.height || ""}
+                      placeholder="auto"
+                      onChange={(e) => onImageOverrideChange({ 
+                        ...imageOverride, 
+                        height: e.target.value ? parseInt(e.target.value) : undefined 
+                      })}
+                      className={cn(
+                        "w-full h-7 px-2 text-[10px] font-mono rounded",
+                        "border border-white/20 bg-white/10 text-white placeholder-gray-500",
+                        "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]"
+                      )}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Scale Slider */}
+              {onImageOverrideChange && (
+                <div className="space-y-1">
+                  <label className="text-[9px] text-gray-500 uppercase tracking-wide">
+                    Scale: {Math.round((imageOverride?.scale || 1) * 100)}%
+                  </label>
+                  <input
+                    type="range"
+                    min="25"
+                    max="200"
+                    value={(imageOverride?.scale || 1) * 100}
+                    onChange={(e) => onImageOverrideChange({ 
+                      ...imageOverride, 
+                      scale: parseInt(e.target.value) / 100 
+                    })}
+                    className="w-full h-2 rounded-lg appearance-none cursor-pointer bg-white/20"
+                  />
+                </div>
+              )}
+
+              {/* Object Fit */}
+              {onImageOverrideChange && (
+                <div className="space-y-1">
+                  <label className="text-[9px] text-gray-500 uppercase tracking-wide">Object Fit</label>
+                  <select
+                    value={imageOverride?.objectFit || ""}
+                    onChange={(e) => onImageOverrideChange({ 
+                      ...imageOverride, 
+                      objectFit: e.target.value as ImageOverride["objectFit"] || undefined 
+                    })}
+                    className={cn(
+                      "w-full h-7 px-2 text-[10px] rounded",
+                      "border border-white/20 bg-white/10 text-white",
+                      "focus:outline-none focus:ring-1 focus:ring-[#00A3E1]"
+                    )}
+                  >
+                    <option value="">-- Auto --</option>
+                    <option value="cover">Cover</option>
+                    <option value="contain">Contain</option>
+                    <option value="fill">Fill</option>
+                    <option value="none">None</option>
+                    <option value="scale-down">Scale Down</option>
+                  </select>
+                </div>
+              )}
+
+              {/* Action Buttons - Show when there are changes */}
+              {onImageOverrideChange && (imageOverride?.src || imageOverride?.width || imageOverride?.height || 
+                (imageOverride?.scale && imageOverride.scale !== 1) || imageOverride?.objectFit) && (
+                <div className="flex gap-2 pt-2 border-t border-white/10">
+                  {/* Reset Button */}
+                  <button
+                    onClick={() => onImageOverrideChange({ reset: true })}
+                    disabled={isImageSaving}
+                    className={cn(
+                      "flex-1 flex items-center justify-center gap-1.5 h-8 text-[10px] font-medium rounded",
+                      "bg-white/10 text-gray-300 hover:bg-white/20 transition-colors",
+                      "disabled:opacity-50 disabled:cursor-not-allowed"
+                    )}
+                  >
+                    <RotateCcw className="h-3 w-3" />
+                    Reset
+                  </button>
+                  
+                  {/* Save Button */}
+                  {onSaveImageChanges && (
+                    <button
+                      onClick={onSaveImageChanges}
+                      disabled={isImageSaving}
+                      className={cn(
+                        "flex-1 flex items-center justify-center gap-1.5 h-8 text-[10px] font-medium rounded",
+                        "bg-[#00A3E1] text-white hover:bg-[#00A3E1]/80 transition-colors",
+                        "disabled:opacity-50 disabled:cursor-not-allowed"
+                      )}
+                    >
+                      {isImageSaving ? (
+                        <>
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                          Saving...
+                        </>
+                      ) : (
+                        <>
+                          <Save className="h-3 w-3" />
+                          Save Changes
+                        </>
+                      )}
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          </Section>
+        )}
+
+        {/* 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}
+              options={[
+                { label: "0%", value: "0" },
+                { label: "10%", value: "10" },
+                { label: "20%", value: "20" },
+                { label: "30%", value: "30" },
+                { label: "40%", value: "40" },
+                { label: "50%", value: "50" },
+                { label: "60%", value: "60" },
+                { label: "70%", value: "70" },
+                { label: "80%", value: "80" },
+                { label: "90%", value: "90" },
+                { label: "100%", value: "100" },
+              ]}
+            />
+            <EditablePropertyRow
+              label="Radius"
+              value={styles.borderRadius}
+              editKey="borderRadius"
+              edits={edits}
+              onEdit={handleEdit}
+              options={[
+                { label: "None (0px)", value: "0px" },
+                { label: "XS (2px)", value: "2px" },
+                { label: "SM (4px)", value: "4px" },
+                { label: "MD (6px)", value: "6px" },
+                { label: "LG (8px)", value: "8px" },
+                { label: "XL (12px)", value: "12px" },
+                { label: "2XL (16px)", value: "16px" },
+                { label: "3XL (24px)", value: "24px" },
+                { label: "Full (9999px)", value: "9999px" },
+              ]}
+            />
+          </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}
+                  options={[
+                    { label: "12px", value: "12px" },
+                    { label: "14px", value: "14px" },
+                    { label: "16px", value: "16px" },
+                    { label: "18px", value: "18px" },
+                    { label: "20px", value: "20px" },
+                    { label: "24px", value: "24px" },
+                    { label: "30px", value: "30px" },
+                    { label: "36px", value: "36px" },
+                    { label: "48px", value: "48px" },
+                    { label: "60px", value: "60px" },
+                    { label: "72px", value: "72px" },
+                    { label: "96px", value: "96px" },
+                  ]}
+                />
+                <EditablePropertyRow
+                  label="Weight"
+                  value={styles.typography.fontWeight}
+                  editKey="fontWeight"
+                  edits={edits}
+                  onEdit={handleEdit}
+                  options={[
+                    { label: "Thin (100)", value: "100" },
+                    { label: "Light (300)", value: "300" },
+                    { label: "Regular (400)", value: "400" },
+                    { label: "Medium (500)", value: "500" },
+                    { label: "Semibold (600)", value: "600" },
+                    { label: "Bold (700)", value: "700" },
+                    { label: "Black (900)", value: "900" },
+                  ]}
+                />
+              </div>
+              <EditablePropertyRow
+                label="Line H"
+                value={styles.typography.lineHeight}
+                editKey="lineHeight"
+                edits={edits}
+                onEdit={handleEdit}
+                options={[
+                  { label: "None (1)", value: "1" },
+                  { label: "Tight (1.25)", value: "1.25" },
+                  { label: "Normal (1.5)", value: "1.5" },
+                  { label: "Relaxed (1.75)", value: "1.75" },
+                  { label: "Loose (2)", value: "2" },
+                ]}
+              />
+              <EditablePropertyRow
+                label="Letter"
+                value={styles.typography.letterSpacing}
+                editKey="letterSpacing"
+                edits={edits}
+                onEdit={handleEdit}
+                options={[
+                  { label: "Tighter (-0.05em)", value: "-0.05em" },
+                  { label: "Tight (-0.025em)", value: "-0.025em" },
+                  { label: "Normal (0)", value: "0" },
+                  { label: "Wide (0.025em)", value: "0.025em" },
+                  { label: "Wider (0.05em)", value: "0.05em" },
+                  { label: "Widest (0.1em)", value: "0.1em" },
+                ]}
+              />
+              <EditablePropertyRow
+                label={`Color (${isDarkMode ? "dark" : "light"} mode)`}
+                value={styles.typography.color}
+                color={styles.typography.color !== "transparent" ? styles.typography.color : undefined}
+                editKey={isDarkMode ? "colorDark" : "colorLight"}
+                edits={edits}
+                onEdit={handleEdit}
+                inputType="color"
+              />
+            </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}
+            readOnly
+          >
+            <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}
+            readOnly
+          >
+            <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}
+            readOnly
+          >
+            <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 id="section-span-effecttype" className="text-[10px] text-gray-400 capitalize">{effect.type}</span>
+                  <span id="section-span-effectvaluesubstring" 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}
+            readOnly
+          >
+            <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-gray-100 dark:bg-[#1a1a1a] border-t border-gray-200 dark: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-gray-200 dark:bg-white/10 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark: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>
+      )}
+
+      {/* Text Change Summary - Shows after text-only changes are saved */}
+      {textChangeSession?.isTextOnlyChange && onTextChangeAccept && onTextChangeRevert && (
+        <div className="sticky bottom-0 px-2 py-2 bg-gray-100 dark:bg-[#1a1a1a] border-t border-gray-200 dark:border-white/10">
+          <div className="rounded-lg bg-green-500/10 border border-green-500/30 p-2 mb-2">
+            <div className="flex items-center gap-2 mb-1">
+              <div className="w-4 h-4 rounded-full bg-green-500/20 flex items-center justify-center">
+                <svg className="w-2.5 h-2.5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <span className="text-[11px] font-medium text-green-400">Text Updated</span>
+            </div>
+            {textChangeSession.modifications[0] && (
+              <>
+                <p className="text-[9px] text-gray-400 font-mono truncate mb-1">
+                  {textChangeSession.modifications[0].filePath}
+                </p>
+                {textChangeSession.modifications[0].diff && (
+                  <div className="text-[9px] font-mono space-y-0.5">
+                    {textChangeSession.modifications[0].diff.split('\n').filter(line =>
+                      line.startsWith('-') && !line.startsWith('---')
+                    ).slice(0, 1).map((line, i) => (
+                      <p key={`old-${i}`} className="text-red-400/80 truncate">
+                        {line}
+                      </p>
+                    ))}
+                    {textChangeSession.modifications[0].diff.split('\n').filter(line =>
+                      line.startsWith('+') && !line.startsWith('+++')
+                    ).slice(0, 1).map((line, i) => (
+                      <p key={`new-${i}`} className="text-green-400/80 truncate">
+                        {line}
+                      </p>
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={onTextChangeRevert}
+              className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-[11px] font-medium rounded bg-gray-200 dark:bg-white/10 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-white/20 transition-colors"
+            >
+              <RotateCcw className="h-3 w-3" />
+              Revert
+            </button>
+            <button
+              onClick={onTextChangeAccept}
+              className="flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-[11px] font-medium rounded bg-green-600 text-white hover:bg-green-600/80 transition-colors"
+            >
+              <Save className="h-3 w-3" />
+              Keep Changes
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}