sonance-brand-mcp 1.3.111 → 1.3.112

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

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import {
   ChevronDown,
   ChevronRight,
@@ -18,16 +18,23 @@ import {
   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 } from "../types";
+import { VisionFocusedElement, ApplyFirstSession, ImageOverride, PublicImageAsset, LogoAsset } from "../types";
 
 // ============================================
 // TYPES
 // ============================================
 
 export interface PropertyEdits {
+  // Content
+  textContent?: string;
   // Layout
   width?: string;
   height?: string;
@@ -39,7 +46,9 @@ export interface PropertyEdits {
   fontWeight?: string;
   lineHeight?: string;
   letterSpacing?: string;
-  color?: string;
+  color?: string;           // Legacy/universal color
+  colorLight?: string;      // Color for light mode only
+  colorDark?: string;       // Color for dark mode only
   // Fill
   backgroundColor?: string;
   // Spacing
@@ -52,13 +61,28 @@ interface PropertiesPanelProps {
   element: VisionFocusedElement | null;
   styles: ComputedStyles | null;
   onPropertyClick?: (property: string, value: string) => void;
-  onSaveChanges?: (edits: PropertyEdits, element: VisionFocusedElement) => 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;
 }
 
@@ -66,24 +90,29 @@ interface SectionProps {
 // SECTION COMPONENT
 // ============================================
 
-function Section({ title, icon, defaultOpen = true, children }: SectionProps) {
+function Section({ title, icon, defaultOpen = true, readOnly = false, children }: SectionProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen);
 
   return (
-    <div className="border-b border-white/10 last:border-b-0">
+    <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-white/5 transition-colors"
+        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-200">
+        <div className="flex items-center gap-1.5 text-[11px] font-medium text-gray-700 dark:text-gray-200">
           {icon}
-          <span>{title}</span>
+          <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-500" />
+            <ChevronDown className="h-3 w-3 text-gray-400 dark:text-gray-500" />
           ) : (
-            <ChevronRight className="h-3 w-3 text-gray-500" />
+            <ChevronRight className="h-3 w-3 text-gray-400 dark:text-gray-500" />
           )}
         </div>
       </button>
@@ -106,6 +135,7 @@ interface EditablePropertyRowProps {
   onEdit?: (key: keyof PropertyEdits, value: string) => void;
   readOnly?: boolean;
   inputType?: "text" | "number" | "color";
+  options?: { label: string; value: string }[];
 }
 
 function EditablePropertyRow({
@@ -118,44 +148,85 @@ function EditablePropertyRow({
   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>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     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={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-white/20"
+            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 ? (
-          <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"
-            )}
-          />
+          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 className="font-mono text-white">
+          <span id="editable-property-row-span-displayvalue" className="font-mono text-gray-600 dark:text-gray-400 cursor-default">
             {displayValue}
           </span>
         )}
-        {unit && <span className="text-gray-500 ml-0.5">{unit}</span>}
+        {unit && <span id="editable-property-row-span-unit" className="text-gray-500 ml-0.5">{unit}</span>}
       </div>
     </div>
   );
@@ -179,41 +250,43 @@ function EditableDimensionGrid({ x, y, width, height, edits, onEdit }: EditableD
   const heightEdited = edits.height !== undefined && edits.height !== `${height}px`;
 
   return (
-    <div className="grid grid-cols-2 gap-1">
+    <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-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 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-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 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(
-        "flex items-center gap-1 px-1.5 py-1 bg-white/5 rounded border",
-        widthEdited ? "border-[#00A3E1]" : "border-white/10"
+        "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"
       )}>
-        <span className="text-[9px] text-gray-500 uppercase w-3">W</span>
+        <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-white flex-1 text-right bg-transparent focus:outline-none"
+          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(
-        "flex items-center gap-1 px-1.5 py-1 bg-white/5 rounded border",
-        heightEdited ? "border-[#00A3E1]" : "border-white/10"
+        "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"
       )}>
-        <span className="text-[9px] text-gray-500 uppercase w-3">H</span>
+        <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-white flex-1 text-right bg-transparent focus:outline-none"
+          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>
@@ -235,36 +308,36 @@ function FillRow({ fill }: FillRowProps) {
     <div className="flex items-center gap-1.5 py-0.5">
       <button
         onClick={() => setVisible(!visible)}
-        className="p-0.5 hover:bg-white/10 rounded"
+        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-500" />
+          <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-600" />
+          <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-white/20 flex-shrink-0"
+            className="w-4 h-4 rounded-sm border border-gray-300 dark: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>
+          <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-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>
+          <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-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 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 className="text-[10px] text-gray-400 flex-1">Image</span>
+          <span id="fill-row-span-image" className="text-[10px] text-gray-500 dark:text-gray-400 flex-1">Image</span>
         </>
       )}
     </div>
@@ -286,20 +359,20 @@ function StrokeRow({ stroke }: StrokeRowProps) {
     <div className="flex items-center gap-1.5 py-0.5">
       <button
         onClick={() => setVisible(!visible)}
-        className="p-0.5 hover:bg-white/10 rounded"
+        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-500" />
+          <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-600" />
+          <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 className="text-[10px] font-mono text-gray-200">{stroke.color}</span>
-      <span className="text-[10px] text-gray-500">{stroke.width}</span>
+      <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>
   );
 }
@@ -308,27 +381,108 @@ function StrokeRow({ stroke }: StrokeRowProps) {
 // MAIN PROPERTIES PANEL
 // ============================================
 
-export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChanges }: PropertiesPanelProps) {
+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
+  // 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?.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;
+    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 when element changes
+  // Capture original inline styles and text content when element changes
   useEffect(() => {
     if (targetElement) {
       setOriginalInlineStyles({
@@ -346,6 +500,8 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
         margin: targetElement.style.margin,
         gap: targetElement.style.gap,
       });
+      // Capture original text content for revert
+      setOriginalTextContent(targetElement.textContent || "");
     }
     // Clear edits when element changes
     setEdits({});
@@ -355,7 +511,12 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
   useEffect(() => {
     if (!targetElement) return;
 
-    // Apply each edited property
+    // 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);
@@ -364,7 +525,14 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
     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;
+    
+    // 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;
@@ -372,17 +540,22 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
 
     // Mark element as having preview
     targetElement.setAttribute('data-sonance-preview', 'true');
-  }, [edits, targetElement]);
+  }, [edits, targetElement, isDarkMode]);
 
   // Handle edit
   const handleEdit = useCallback((key: keyof PropertyEdits, value: string) => {
     setEdits(prev => ({ ...prev, [key]: value }));
   }, []);
 
-  // Handle revert - restore original styles
+  // 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;
@@ -393,7 +566,7 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
 
     // Clear edits
     setEdits({});
-  }, [targetElement, originalInlineStyles]);
+  }, [targetElement, originalInlineStyles, originalTextContent]);
 
   // Handle save - call API to persist changes
   const handleSave = useCallback(async () => {
@@ -401,11 +574,13 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
 
     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)
+      // 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);
     }
@@ -415,10 +590,10 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
   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 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 className="text-[11px] text-gray-400">
+        <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>
@@ -426,35 +601,386 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
   }
 
   return (
-    <div className="text-gray-200 flex flex-col h-full">
+    <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-white/10 bg-white/5">
+        <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 className="text-[11px] font-semibold text-white truncate">
+              <p id="stroke-row-p-elementname" className="text-[11px] font-semibold text-gray-900 dark:text-white truncate">
                 {element.name}
               </p>
               {element.variantId && (
-                <p className="text-[9px] font-mono text-gray-500 truncate">
+                <p id="stroke-row-p-elementvariantidsubs" 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">
+            <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 && (
-            <p className="mt-1.5 text-[10px] text-gray-400 truncate px-0.5">
+          {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"
@@ -487,6 +1013,19 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
               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"
@@ -494,6 +1033,17 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
               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>
@@ -518,6 +1068,20 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
                   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"
@@ -525,6 +1089,15 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
                   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
@@ -533,6 +1106,13 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
                 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"
@@ -540,14 +1120,23 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
                 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"
+                label={`Color (${isDarkMode ? "dark" : "light"} mode)`}
                 value={styles.typography.color}
                 color={styles.typography.color !== "transparent" ? styles.typography.color : undefined}
-                editKey="color"
+                editKey={isDarkMode ? "colorDark" : "colorLight"}
                 edits={edits}
                 onEdit={handleEdit}
+                inputType="color"
               />
             </div>
           </Section>
@@ -559,6 +1148,7 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
             title="Fill"
             icon={<Square className="h-3 w-3" />}
             defaultOpen={true}
+            readOnly
           >
             <div className="space-y-0.5">
               {styles.fills.map((fill, i) => (
@@ -574,6 +1164,7 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
             title="Stroke"
             icon={<Minus className="h-3 w-3" />}
             defaultOpen={true}
+            readOnly
           >
             <div className="space-y-0.5">
               {styles.strokes.map((stroke, i) => (
@@ -589,13 +1180,14 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
             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 className="text-[10px] text-gray-400 capitalize">{effect.type}</span>
-                  <span className="text-[9px] font-mono text-gray-500 truncate flex-1">
+                  <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>
@@ -643,6 +1235,7 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
             title="Flexbox"
             icon={<Palette className="h-3 w-3" />}
             defaultOpen={false}
+            readOnly
           >
             <div className="space-y-0.5">
               <EditablePropertyRow
@@ -667,11 +1260,11 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
 
       {/* 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">
+        <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-white/10 text-gray-300 hover:bg-white/20 disabled:opacity-50 transition-colors"
+            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
@@ -690,6 +1283,63 @@ export function PropertiesPanel({ element, styles, onPropertyClick, onSaveChange
           </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>
   );
 }