@vibecms/cli 0.1.0

package/templates/components/cms/SiteHeader.tsx

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+import { VibeEngine } from '@/lib/cms/engine';
+
+export async function SiteHeader() {
+  const settings = await VibeEngine.read('settings', 'site.json');
+  const links = settings?.navigation || [];
+  const companyName = settings?.legal?.companyName || 'VibeCMS';
+
+  return (
+    <header className="sticky top-0 z-40 w-full backdrop-blur-md bg-white/80 border-b border-neutral-200 transition-colors shadow-sm">
+      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-6">
+        <Link href="/" className="flex items-center gap-2 font-bold tracking-tighter text-lg text-neutral-900 group">
+          <div className="w-4 h-4 rounded bg-indigo-500 group-hover:bg-indigo-600 transition-colors" />
+          {companyName}
+        </Link>
+        <nav className="flex items-center gap-6 text-sm font-medium">
+          {links.map((link: any, idx: number) => (
+             <div key={idx} className="relative group">
+                <Link 
+                  href={link.url} 
+                  className="text-neutral-600 hover:text-neutral-900 transition-colors"
+                >
+                  {link.label}
+                </Link>
+                {/* Visual marker helper for edit mode highlight bindings if needed */}
+                <EditTabIndicator field={`navigation.${idx}.label`} />
+             </div>
+          ))}
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+// Very simple relative binding helper
+function EditTabIndicator({ field }: { field: string }) {
+  return (
+    <span 
+      id={`editor-field-${field}`}
+      className="absolute -inset-2 -z-10 rounded-md pointer-events-none"
+    />
+  );
+}

package/templates/components/cms/VisualWrapper.tsx

@@ -0,0 +1,128 @@
+
+// src/components/cms/VisualWrapper.tsx
+'use client';
+import React, { useEffect, useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { useStore } from '@nanostores/react';
+import { isEditMode, contentDraft, setFocusedField, focusedField, layoutWarnings } from '@/lib/cms/store';
+import { sanitizeHtml } from '@/lib/cms/sanitize';
+
+interface VisualWrapperProps {
+  fieldPath: string;
+  children?: React.ReactNode | ((value: any) => React.ReactNode);
+  className?: string;
+  fallback?: React.ReactNode;
+}
+
+export function VisualWrapper({ fieldPath, children, className = '', fallback }: VisualWrapperProps) {
+  const isEditing = useStore(isEditMode);
+  const draft = useStore(contentDraft);
+  const focus = useStore(focusedField);
+  const [mounted, setMounted] = useState(false);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  const isFocused = focus?.startsWith(fieldPath);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    if (!wrapperRef.current || !isEditing) return;
+
+    // Build the observer to capture Layout Overflows gracefully without exploding the main thread
+    let rafId: number;
+    const observer = new ResizeObserver(() => {
+       cancelAnimationFrame(rafId);
+       rafId = requestAnimationFrame(() => {
+         const el = wrapperRef.current;
+         if (!el) return;
+         
+         const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+         const currentWarning = layoutWarnings.get()[fieldPath];
+         
+         if (isOverflowing && !currentWarning) {
+            layoutWarnings.setKey(fieldPath, true);
+         } else if (!isOverflowing && currentWarning) {
+            layoutWarnings.setKey(fieldPath, false);
+         }
+       });
+    });
+
+    observer.observe(wrapperRef.current);
+    
+    // Also track child additions or stylistic recalculations that might not resize the parent explicitly
+    const mutObserver = new MutationObserver(() => {
+       const el = wrapperRef.current;
+       if (!el) return;
+       const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+       const currentWarning = layoutWarnings.get()[fieldPath];
+       if (isOverflowing !== !!currentWarning) {
+          layoutWarnings.setKey(fieldPath, isOverflowing);
+       }
+    });
+
+    mutObserver.observe(wrapperRef.current, { childList: true, subtree: true, characterData: true });
+
+    return () => {
+       observer.disconnect();
+       mutObserver.disconnect();
+       cancelAnimationFrame(rafId);
+       layoutWarnings.setKey(fieldPath, false); // Cleanup
+    };
+  }, [isEditing, fieldPath]);
+
+  // Read value from drafted store
+  const keys = fieldPath.split('.');
+  let value: any = draft;
+  for (const k of keys) {
+    if (value === undefined || value === null) break;
+    value = value[k];
+  }
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (!isEditing) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setFocusedField(fieldPath);
+  };
+
+  const isEditingStyles = isEditing 
+    ? `cursor-pointer transition-all duration-200 ring-1 rounded relative z-10 block ${isFocused ? 'ring-2 ring-indigo-500 bg-indigo-500/10' : 'ring-transparent hover:ring-indigo-500 hover:bg-indigo-500/10'}`
+    : '';
+
+  // Determine what to render based on children type
+  let content = fallback;
+  if (typeof children === 'function') {
+    content = children(value);
+  } else if (value !== undefined && typeof value !== 'object') {
+    // Overwrite child with primitive value to ensure it updates visually
+    content = value;
+  } else if (children) {
+    content = children;
+  }
+
+  if (!mounted) {
+    // Avoid hydration mismatch by rendering default children on first pass
+    return (
+      <span className={className}>
+        {typeof children === 'function' ? fallback : children}
+      </span>
+    );
+  }
+
+  let finalRender = content;
+  if (typeof content === 'string' && (content.includes('<br') || content.includes('&shy;'))) {
+      finalRender = <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(content) }} />;
+  }
+
+  return (
+    <span 
+      ref={wrapperRef}
+      className={`visual-wrapper ${isEditingStyles} ${className}`}
+      onClick={handleClick}
+      title={isEditing ? `Edit ${fieldPath}` : undefined}
+      data-vibe-path={isEditing ? fieldPath : undefined}
+    >
+      {finalRender}
+    </span>
+  );
+}

package/templates/components/cms/fields/ColorPicker.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger, Button, Label } from '@vibecms/core';
+
+export const BRAND_COLORS = [
+  { name: 'Indigo', value: 'indigo-500', hex: '#6366f1' },
+  { name: 'Violet', value: 'violet-500', hex: '#8b5cf6' },
+  { name: 'Purple', value: 'purple-500', hex: '#a855f7' },
+  { name: 'Fuchsia', value: 'fuchsia-500', hex: '#d946ef' },
+  { name: 'Rose', value: 'rose-500', hex: '#f43f5e' },
+  { name: 'Emerald', value: 'emerald-500', hex: '#10b981' },
+  { name: 'Amber', value: 'amber-500', hex: '#f59e0b' },
+  { name: 'Sky', value: 'sky-500', hex: '#0ea5e9' },
+  { name: 'Slate', value: 'slate-800', hex: '#1e293b' },
+  { name: 'White', value: 'white', hex: '#ffffff' },
+  { name: 'Black', value: 'black', hex: '#000000' },
+  { name: 'Transparent', value: 'transparent', hex: 'transparent' },
+];
+
+export function ColorPicker({ value, onChange, label }: { value: string; onChange: (v: string) => void; label: string }) {
+  const [open, setOpen] = useState(false);
+  const activeColor = BRAND_COLORS.find(c => c.value === value) || BRAND_COLORS[0];
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Label className="text-neutral-500 text-xs font-mono uppercase tracking-wider">{label}</Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger className="w-full">
+          <div 
+            role="button"
+            className="w-full flex items-center justify-between bg-white border border-neutral-300 text-neutral-900 hover:bg-neutral-50 transition-colors p-2.5 rounded-md cursor-pointer text-sm font-medium shadow-sm"
+          >
+            <div className="flex items-center gap-2">
+              <div 
+                className={`w-4 h-4 rounded-full border ${activeColor.value === 'white' ? 'border-neutral-300' : 'border-transparent'}`} 
+                style={{ backgroundColor: activeColor.hex }}
+                title={activeColor.name}
+              />
+              <span className="capitalize">{activeColor.name || value || 'Select Color'}</span>
+            </div>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-56 bg-white border-neutral-200 p-3 shadow-2xl">
+          <div className="grid grid-cols-4 gap-2">
+            {BRAND_COLORS.map((color) => (
+              <button
+                key={color.value}
+                type="button"
+                onClick={() => {
+                  onChange(color.value);
+                  setOpen(false);
+                }}
+                className={`w-10 h-10 rounded-full flex items-center justify-center transition-transform hover:scale-110 border-2 ${value === color.value ? 'border-white scale-110 shadow-[0_0_10px_rgba(255,255,255,0.3)]' : 'border-transparent'}`}
+                style={{ 
+                  backgroundColor: color.hex, 
+                  background: color.value === 'transparent' ? 'repeating-conic-gradient(#333 0% 25%, transparent 0% 50%) 50% / 10px 10px' : color.hex 
+                }}
+                title={color.name}
+              >
+                {value === color.value && color.value !== 'transparent' && color.value !== 'white' && (
+                  <div className="w-2 h-2 bg-white rounded-full opacity-80" />
+                )}
+              </button>
+            ))}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/templates/components/cms/fields/IconPicker.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger, Button, Label, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@vibecms/core';
+import * as LucideIcons from 'lucide-react';
+
+const COMMON_ICONS = [
+  'Zap', 'Shield', 'Star', 'Heart', 'CheckCircle', 'ArrowRight',
+  'TrendingUp', 'Users', 'Target', 'Rocket', 'Settings', 'Code',
+  'Smartphone', 'Laptop', 'Globe', 'Mail', 'Phone', 'MapPin',
+  'Camera', 'Video', 'Music', 'Play', 'Search', 'Menu', 'X',
+  'Facebook', 'Twitter', 'Instagram', 'Linkedin', 'Github'
+] as const;
+
+export function IconPicker({ value, onChange, label }: { value: string; onChange: (v: string) => void; label: string }) {
+  const [open, setOpen] = useState(false);
+  
+  // Safely get the current icon
+  const ActiveIcon = (LucideIcons as any)[value] || LucideIcons.Zap;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Label className="text-neutral-500 text-xs font-mono uppercase tracking-wider">{label}</Label>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger className="w-full">
+          <div 
+            role="button"
+            className="w-full flex items-center justify-between bg-white border border-neutral-300 text-neutral-900 hover:bg-neutral-50 transition-colors p-2.5 rounded-md cursor-pointer text-sm font-medium shadow-sm"
+          >
+            <div className="flex items-center gap-2">
+              <ActiveIcon className="w-4 h-4 text-indigo-500" />
+              <span className="capitalize">{value || 'Select Icon'}</span>
+            </div>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent className="w-64 bg-white border-neutral-200 p-0 shadow-2xl">
+          <Command>
+            <CommandInput placeholder="Search icons..." className="border-none text-neutral-900 placeholder:text-neutral-400" />
+            <CommandList className="max-h-[200px] overflow-y-auto custom-scrollbar">
+              <CommandEmpty>No icons found.</CommandEmpty>
+              <CommandGroup>
+                {COMMON_ICONS.map((iconName) => {
+                  const Icon = (LucideIcons as any)[iconName];
+                  if (!Icon) return null;
+                  return (
+                    <CommandItem
+                      key={iconName}
+                      value={iconName}
+                      onSelect={(currentValue: string) => {
+                        onChange(currentValue === value ? '' : iconName);
+                        setOpen(false);
+                      }}
+                      className="cursor-pointer flex items-center gap-3 text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100 data-[selected=true]:bg-indigo-50 data-[selected=true]:text-indigo-600"
+                    >
+                      <Icon className="w-4 h-4" />
+                      {iconName}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/templates/components/cms/fields/ImageUpload.tsx

@@ -0,0 +1,120 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { VibeEngine } from '@/lib/cms/engine';
+import { UploadCloud, Loader2, Image as ImageIcon } from 'lucide-react';
+import { MediaGallery } from './MediaGallery';
+import { toast } from 'sonner';
+
+interface ImageUploadProps {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+}
+
+export function ImageUpload({ value, onChange, label }: ImageUploadProps) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState<string>('');
+  const [dragActive, setDragActive] = useState(false);
+  const [galleryOpen, setGalleryOpen] = useState(false);
+
+  useEffect(() => {
+    if (value) {
+      if (value.startsWith('http://') || value.startsWith('https://')) {
+         setPreviewUrl(value);
+      } else {
+         VibeEngine.getMediaUrl(value).then(url => {
+            setPreviewUrl(url);
+         });
+      }
+    } else {
+      setPreviewUrl('');
+    }
+  }, [value]);
+
+  const handleUpload = async (file: File) => {
+    if (!file.type.startsWith('image/')) return;
+    setIsUploading(true);
+    try {
+      const result = await VibeEngine.writeMedia(file);
+      // Result might be a string URL or an object with a url property
+      const url = typeof result === 'string' ? result : (result as any).url;
+      onChange(url);
+      toast.success('Media successfully uploaded to Repository');
+    } catch (e: any) {
+      console.error('Upload failed', e);
+      toast.error(e.message || 'Image upload failed.');
+    }
+    setIsUploading(false);
+    setDragActive(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      handleUpload(e.dataTransfer.files[0]);
+    }
+  };
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true);
+    } else if (e.type === 'dragleave') {
+      setDragActive(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-1.5 my-2">
+      <div className="flex items-center justify-between">
+        <span className="text-neutral-500 text-xs font-mono uppercase tracking-wider">{label}</span>
+        <button 
+          onClick={() => setGalleryOpen(true)}
+          className="text-[10px] flex items-center gap-1 bg-neutral-100 hover:bg-neutral-200 text-neutral-600 px-2 py-1 rounded border border-neutral-300 transition-colors shadow-sm"
+        >
+          <ImageIcon className="w-3 h-3" /> Browse Library
+        </button>
+      </div>
+      <div 
+        className={`relative border-2 border-dashed rounded-lg p-4 flex flex-col items-center justify-center transition-colors min-h-[120px] ${dragActive ? 'border-indigo-500 bg-indigo-50' : 'border-neutral-300 bg-neutral-50 hover:bg-neutral-100'}`}
+        onDragEnter={handleDrag}
+        onDragLeave={handleDrag}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+      >
+        <input 
+          type="file" 
+          accept="image/*" 
+          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" 
+          onChange={(e) => {
+             if (e.target.files?.[0]) handleUpload(e.target.files[0]);
+          }}
+        />
+
+        {isUploading ? (
+          <Loader2 className="w-6 h-6 animate-spin text-indigo-400" />
+        ) : previewUrl ? (
+          <div className="flex flex-col items-center gap-2">
+             {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={previewUrl} alt="Preview" className="h-20 w-auto object-cover rounded shadow-md border border-neutral-200" />
+            <span className="text-xs text-neutral-500 truncate max-w-[200px]">{value}</span>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center text-neutral-400 gap-2 pointer-events-none">
+            <UploadCloud className="w-8 h-8" />
+            <span className="text-xs font-medium">Click or Drag Image</span>
+          </div>
+        )}
+      </div>
+
+      <MediaGallery 
+        open={galleryOpen} 
+        onOpenChange={setGalleryOpen} 
+        onSelect={(path) => onChange(path)} 
+      />
+    </div>
+  );
+}

package/templates/components/cms/fields/MediaGallery.tsx

@@ -0,0 +1,176 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@vibecms/core';
+import { Image as ImageIcon, Loader2, Trash2, Edit2, Check, X } from 'lucide-react';
+import { VibeEngine } from '@/lib/cms/engine';
+import { toast } from 'sonner';
+
+export function MediaGallery({ 
+  open, 
+  onOpenChange, 
+  onSelect 
+}: { 
+  open: boolean; 
+  onOpenChange: (open: boolean) => void;
+  onSelect?: (path: string) => void;
+}) {
+  const [images, setImages] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [renamingAsset, setRenamingAsset] = useState<string | null>(null);
+  const [newName, setNewName] = useState('');
+
+  const fetchMedia = async () => {
+    setLoading(true);
+    try {
+      const files = await VibeEngine.listMedia();
+      setImages(files || []);
+    } catch (e: any) {
+      toast.error('Failed to load media: ' + e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      fetchMedia();
+    }
+  }, [open]);
+
+  const handleDelete = async (e: React.MouseEvent, src: string) => {
+    e.stopPropagation();
+    if (!window.confirm('Are you certain you want to delete this asset? This cannot be undone.')) return;
+    
+    try {
+      await VibeEngine.deleteMedia(src);
+      toast.success('Asset deleted successfully');
+      setImages(images.filter(i => i !== src));
+    } catch (err: any) {
+      toast.error('Failed to delete asset: ' + err.message);
+    }
+  };
+
+  const startRename = (e: React.MouseEvent, src: string) => {
+    e.stopPropagation();
+    setRenamingAsset(src);
+    setNewName(src.split('/').pop() || '');
+  };
+
+  const confirmRename = async (e: React.MouseEvent, src: string) => {
+    e.stopPropagation();
+    if (!newName.trim() || src.endsWith(newName)) {
+      setRenamingAsset(null);
+      return;
+    }
+    
+    try {
+      await VibeEngine.renameMedia(src, newName);
+      toast.success('Asset renamed successfully');
+      setRenamingAsset(null);
+      await fetchMedia();
+    } catch (err: any) {
+      toast.error('Failed to rename asset: ' + err.message);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl bg-white border-neutral-200 text-neutral-900 shadow-2xl overflow-hidden flex flex-col max-h-[85vh]">
+        <DialogHeader className="shrink-0 p-6 pb-2">
+          <DialogTitle className="flex items-center gap-2 text-xl font-bold">
+            <ImageIcon className="w-5 h-5 text-indigo-500" />
+            Vibe Media Dashboard
+          </DialogTitle>
+          <DialogDescription className="text-neutral-500">
+            {onSelect 
+              ? 'Select an existing asset from the CMS repository to insert into the page.'
+              : 'Manage, rename, and organize your Git-tracked media assets.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto p-6 pt-2 custom-scrollbar relative min-h-[400px]">
+          {loading ? (
+            <div className="absolute inset-0 flex items-center justify-center bg-white/50 backdrop-blur-sm z-10">
+              <Loader2 className="w-8 h-8 text-indigo-500 animate-spin" />
+            </div>
+          ) : images.length === 0 ? (
+             <div className="flex flex-col h-full items-center justify-center text-neutral-400 gap-4 mt-20">
+                <ImageIcon className="w-12 h-12 opacity-50" />
+                <p>No media files uploaded yet.</p>
+             </div>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+              {images.map(src => {
+                const isRenaming = renamingAsset === src;
+                
+                return (
+                  <div 
+                    key={src} 
+                    onClick={() => {
+                      if (onSelect && !isRenaming) {
+                        onSelect(src);
+                        onOpenChange(false);
+                      }
+                    }}
+                    className={`group relative aspect-square bg-neutral-100 rounded-xl overflow-hidden border transition-all shadow-sm ${onSelect ? 'cursor-pointer hover:border-indigo-400 hover:shadow-md' : 'border-neutral-200'} ${isRenaming ? 'ring-2 ring-indigo-500' : ''}`}
+                  >
+                    <img 
+                      src={src} 
+                      alt="Gallery item"
+                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                    />
+                    
+                    {/* Dark gradient overlay on hover for better visibility of actions */}
+                    <div className="absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" />
+                    
+                    {/* Action buttons (Top Right) */}
+                    {!isRenaming && (
+                      <div className="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 translate-y-[-10px] group-hover:translate-y-0">
+                        <button
+                          onClick={(e) => startRename(e, src)}
+                          className="p-1.5 bg-white/90 backdrop-blur-sm hover:bg-white text-neutral-600 hover:text-indigo-600 rounded-md shadow-sm transition-colors"
+                          title="Rename Asset"
+                        >
+                          <Edit2 className="w-3.5 h-3.5" />
+                        </button>
+                        <button
+                          onClick={(e) => handleDelete(e, src)}
+                          className="p-1.5 bg-white/90 backdrop-blur-sm hover:bg-white text-neutral-600 hover:text-rose-600 rounded-md shadow-sm transition-colors"
+                          title="Delete Asset"
+                        >
+                          <Trash2 className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+                    )}
+
+                    {/* Bottom Label or Renaming Input */}
+                    <div className={`absolute inset-x-0 bottom-0 bg-white/90 backdrop-blur-md border-t border-neutral-200 transition-all ${isRenaming ? 'p-2' : 'p-2 translate-y-full group-hover:translate-y-0'}`}>
+                      {isRenaming ? (
+                        <div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
+                          <input 
+                            autoFocus
+                            value={newName}
+                            onChange={e => setNewName(e.target.value)}
+                            onKeyDown={e => {
+                              if (e.key === 'Enter') confirmRename(e as any, src);
+                              if (e.key === 'Escape') setRenamingAsset(null);
+                            }}
+                            className="w-full bg-white border border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 rounded text-xs p-1 text-neutral-800"
+                          />
+                          <button onClick={(e) => confirmRename(e, src)} className="p-1 text-emerald-600 hover:bg-emerald-50 rounded"><Check className="w-3 h-3" /></button>
+                          <button onClick={() => setRenamingAsset(null)} className="p-1 text-neutral-500 hover:bg-neutral-100 rounded"><X className="w-3 h-3" /></button>
+                        </div>
+                      ) : (
+                        <p className="text-[10px] text-neutral-700 font-medium truncate" title={src.split('/').pop()}>{src.split('/').pop()}</p>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}