@dyrected/admin 2.0.1 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @dyrected/admin
 
+## 2.4.0
+
+### Minor Changes
+
+- Infrastructure standardization, MySQL adapter improvements, and SDK robustness testing.
+
+### Patch Changes
+
+- Updated dependencies
+  - @dyrected/core@2.4.0
+  - @dyrected/sdk@2.4.0
+
+## 2.3.0
+
+### Minor Changes
+
+- Standardize database infrastructure and implement field promotion.
+  - **Field Promotion**: Added 'promoted' option to Collection fields to extract JSON data into native SQL columns for indexing and performance.
+  - **Lazy Migrations**: Added 'renameTo' support for seamless field renames without breaking existing data.
+  - **Auto-Seeding**: Standardized 'initialData' seeding logic across all adapters.
+  - **MySQL Adapter**: New robust MySQL adapter implementation.
+  - **Strict Filtering**: Improved query translation parity across all SQL-based adapters.
+
+### Patch Changes
+
+- Updated dependencies
+  - @dyrected/core@2.3.0
+  - @dyrected/sdk@2.3.0
+
 ## 2.0.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dyrected/admin",
-  "version": "2.0.1",
+  "version": "2.4.0",
   "type": "module",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -60,8 +60,8 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.25.76",
-    "@dyrected/core": "^2.1.0",
-    "@dyrected/sdk": "^2.0.0"
+    "@dyrected/core": "^2.4.0",
+    "@dyrected/sdk": "^2.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -76,7 +76,7 @@
     "globals": "^17.5.0",
     "postcss": "^8.5.14",
     "tailwindcss": "^3.4.19",
-    "typescript": "~6.0.2",
+    "typescript": "^5.7.3",
     "typescript-eslint": "^8.58.2",
     "vite": "^8.0.10",
     "vite-plugin-dts": "^5.0.0",

package/scripts/prefix-tailwind-precision.py

@@ -0,0 +1,98 @@
+import os
+import re
+
+EXCLUDED_WORDS = {
+    "default", "ghost", "outline", "secondary", "destructive", "link", "icon",
+    "sm", "md", "lg", "xl", "2xl", "top", "bottom", "left", "right",
+    "expanded", "collapsed", "sidebar", "floating", "inset", "offcanvas", "none",
+    "sidebar_state", "top-right", "asChild", "className", "variant", "size", "side",
+    "true", "false", "item", "index", "key", "id", "name", "type", "value", "variant"
+}
+
+def prefix_single_class(c):
+    if not c or c.startswith(("dy-", "{", "$", "--", "http")):
+        return c
+    
+    if ":" in c:
+        parts = c.split(":")
+        modifiers = parts[:-1]
+        base = parts[-1]
+        
+        new_modifiers = []
+        for m in modifiers:
+            if m.startswith(("group", "peer")):
+                new_modifiers.append(f"dy-{m}")
+            else:
+                new_modifiers.append(m)
+        
+        if base and base not in EXCLUDED_WORDS and not base.startswith("["):
+            base = f"dy-{base}"
+            
+        return ":".join(new_modifiers + [base])
+    else:
+        if c in EXCLUDED_WORDS or c.startswith("["):
+            return c
+        if c.startswith(("group", "peer")):
+            return f"dy-{c}"
+        return f"dy-{c}"
+
+def prefix_classes_in_string(s):
+    if not s: return s
+    return " ".join([prefix_single_class(c) for c in s.split()])
+
+def process_content(content):
+    # 1. className="literal"
+    def class_name_replacer(m):
+        quote = m.group(1)
+        classes = m.group(2)
+        return f'className={quote}{prefix_classes_in_string(classes)}{quote}'
+    content = re.sub(r'className=([\'"])(.*?)\1', class_name_replacer, content)
+    
+    # 2. cn(...)
+    def cn_replacer(m):
+        inner = m.group(1)
+        def inner_string_replacer(sm):
+            quote = sm.group(1)
+            s = sm.group(2)
+            preceding = inner[:sm.start()]
+            # Only exclude if it's a comparison or arrow function
+            if preceding.strip().endswith(("===", "!==", "==", "!=", "=>")):
+                return sm.group(0)
+            
+            return f'{quote}{prefix_classes_in_string(s)}{quote}'
+        new_inner = re.sub(r'([\'"])(.*?)\1', inner_string_replacer, inner)
+        return f'cn({new_inner})'
+    content = re.sub(r'cn\((.*?)\)', cn_replacer, content, flags=re.DOTALL)
+    
+    # 3. cva(...)
+    def cva_replacer(m):
+        inner = m.group(1)
+        def cva_string_replacer(sm):
+            quote = sm.group(1)
+            s = sm.group(2)
+            following = inner[sm.end():]
+            if following.strip().startswith(":"):
+                return sm.group(0)
+            return f'{quote}{prefix_classes_in_string(s)}{quote}'
+        new_inner = re.sub(r'([\'"])(.*?)\1', cva_string_replacer, inner)
+        return f'cva({new_inner})'
+    content = re.sub(r'cva\((.*?)\)', cva_replacer, content, flags=re.DOTALL)
+    
+    return content
+
+def main():
+    src_dir = "packages/admin/src"
+    for root, dirs, files in os.walk(src_dir):
+        for file in files:
+            if file.endswith((".tsx", ".ts")):
+                filepath = os.path.join(root, file)
+                with open(filepath, 'r') as f:
+                    content = f.read()
+                new_content = process_content(content)
+                if new_content != content:
+                    with open(filepath, 'w') as f:
+                        f.write(new_content)
+                    print(f"Updated {filepath}")
+
+if __name__ == "__main__":
+    main()

package/scripts/prefix-tailwind.py

@@ -0,0 +1,67 @@
+import os
+import re
+
+def prefix_classes_in_string(s):
+    # Skip empty strings or strings that already have the prefix
+    if not s or s.startswith("dy-"):
+        return s
+    
+    # Split by whitespace, prefix each class, then rejoin
+    classes = s.split()
+    prefixed = []
+    for c in classes:
+        # Skip variables like {className} or strings that look like CSS variables
+        if c.startswith("{") or c.startswith("$") or c.startswith("--"):
+            prefixed.append(c)
+        # Skip already prefixed
+        elif c.startswith("dy-"):
+            prefixed.append(c)
+        # Prefix everything else (assuming they are tailwind classes)
+        else:
+            prefixed.append(f"dy-{c}")
+    return " ".join(prefixed)
+
+def process_content(content):
+    # 1. Handle className="literal classes"
+    content = re.sub(r'className=([\'"])(.*?)\1', 
+                    lambda m: f'className={m.group(1)}{prefix_classes_in_string(m.group(2))}{m.group(1)}', 
+                    content)
+    
+    # 2. Handle className={cn("literal classes", ...)}
+    # We look for strings inside cn(...)
+    def cn_match(m):
+        # This is a bit rough but works for simple cn calls
+        inner = m.group(1)
+        # Replace string literals inside the cn call
+        new_inner = re.sub(r'([\'"])(.*?)\1', 
+                          lambda sm: f'{sm.group(1)}{prefix_classes_in_string(sm.group(2))}{sm.group(1)}', 
+                          inner)
+        return f'cn({new_inner})'
+    
+    content = re.sub(r'cn\((.*?)\)', cn_match, content, flags=re.DOTALL)
+    
+    # 3. Handle @apply in CSS
+    content = re.sub(r'@apply (.*?);', 
+                    lambda m: f'@apply {prefix_classes_in_string(m.group(1))};', 
+                    content)
+    
+    return content
+
+def main():
+    src_dir = "packages/admin/src"
+    for root, dirs, files in os.walk(src_dir):
+        for file in files:
+            if file.endswith((".tsx", ".ts", ".css")):
+                filepath = os.path.join(root, file)
+                with open(filepath, 'r') as f:
+                    content = f.read()
+                
+                new_content = process_content(content)
+                
+                if new_content != content:
+                    with open(filepath, 'w') as f:
+                        f.write(new_content)
+                    print(f"Updated {filepath}")
+
+if __name__ == "__main__":
+    main()

package/src/components/auth/auth-gate.tsx

@@ -32,10 +32,10 @@ export function AuthGate({ children }: { children: React.ReactNode }) {
 
   if (isLoading) {
     return (
-      <div className="flex h-screen items-center justify-center bg-background">
-        <div className="flex flex-col items-center gap-4">
-          <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-          <p className="text-sm text-muted-foreground animate-pulse">Authenticating...</p>
+      <div className="dy-flex dy-h-screen dy-items-center dy-justify-center dy-bg-background">
+        <div className="dy-flex dy-flex-col dy-items-center dy-gap-4">
+          <div className="dy-h-8 dy-w-8 dy-animate-spin dy-rounded-full dy-border-2 dy-border-primary dy-border-t-transparent" />
+          <p className="dy-text-sm dy-text-muted-foreground dy-animate-pulse">Authenticating...</p>
         </div>
       </div>
     );

package/src/components/error-boundary.tsx

@@ -27,12 +27,12 @@ export class ErrorBoundary extends Component<Props, State> {
   public render() {
     if (this.state.hasError) {
       return this.props.fallback || (
-        <div className="flex-1 flex flex-col items-center justify-center p-12 bg-destructive/5 text-destructive min-h-[400px]">
-          <h2 className="text-xl font-bold mb-2">Something went wrong</h2>
-          <p className="text-sm opacity-80 mb-4">{this.state.error?.message}</p>
+        <div className="dy-flex-1 dy-flex dy-flex-col dy-items-center dy-justify-center dy-p-12 dy-bg-destructive/5 dy-text-destructive dy-min-h-[400px]">
+          <h2 className="dy-text-xl dy-font-bold dy-mb-2">Something went wrong</h2>
+          <p className="dy-text-sm dy-opacity-80 dy-mb-4">{this.state.error?.message}</p>
           <button 
             onClick={() => window.location.reload()}
-            className="px-4 py-2 bg-destructive text-destructive-foreground rounded-md text-sm font-medium hover:bg-destructive/90 transition-colors"
+            className="dy-px-4 dy-py-2 dy-bg-destructive dy-text-destructive-foreground dy-rounded-md dy-text-sm dy-font-medium hover:dy-bg-destructive/90 dy-transition-colors"
           >
             Reload Page
           </button>

package/src/components/forms/fields/block-builder.tsx

@@ -77,33 +77,33 @@ function SortableBlockItem({
   if (!blockConfig) return null
 
   return (
-    <div ref={setNodeRef} style={style} className="relative group left-accent mb-4 py-4 animate-in">
+    <div ref={setNodeRef} style={style} className="dy-relative dy-group dy-left-accent dy-mb-4 dy-py-4 dy-animate-in">
       {/* Header / Drag Handle */}
-      <div className="flex items-center justify-between pb-3">
-        <div className="flex items-center justify-between gap-2">
-          <div {...attributes} {...listeners} className="cursor-grab opacity-20 group-hover:opacity-100 hover:bg-muted p-1 rounded-md transition-all">
-            <GripVertical className="w-3.5 h-3.5 text-muted-foreground" />
+      <div className="dy-flex dy-items-center dy-justify-between dy-pb-3">
+        <div className="dy-flex dy-items-center dy-justify-between dy-gap-2">
+          <div {...attributes} {...listeners} className="dy-cursor-grab dy-opacity-20 dy-group-hover:dy-opacity-100 hover:dy-bg-muted dy-p-1 dy-rounded-md dy-transition-all">
+            <GripVertical className="dy-w-3.5 dy-h-3.5 dy-text-muted-foreground" />
           </div>
-          <span className="font-bold text-xs text-foreground/70 tracking-tight">
+          <span className="dy-font-bold dy-text-xs dy-text-foreground/70 dy-tracking-tight">
             {blockConfig.labels?.singular || blockConfig.slug}
           </span>
-          <span className="text-[10px] text-muted-foreground/40 ml-2 uppercase tracking-widest font-semibold">
+          <span className="dy-text-[10px] dy-text-muted-foreground/40 dy-ml-2 dy-uppercase dy-tracking-widest dy-font-semibold">
             Item {index + 1}
           </span>
         </div>
-        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground/40" onClick={() => setIsExpanded(!isExpanded)}>
-            {isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
+        <div className="dy-flex dy-items-center dy-gap-1 dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity">
+          <Button type="button" variant="ghost" size="icon" className="dy-h-7 dy-w-7 dy-text-muted-foreground/40" onClick={() => setIsExpanded(!isExpanded)}>
+            {isExpanded ? <ChevronUp className="dy-w-3.5 dy-h-3.5" /> : <ChevronDown className="dy-w-3.5 dy-h-3.5" />}
           </Button>
-          <Button type="button" variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground/30 hover:text-destructive hover:bg-destructive/10" onClick={() => remove(index)}>
-            <X className="w-3.5 h-3.5" />
+          <Button type="button" variant="ghost" size="icon" className="dy-h-7 dy-w-7 dy-text-muted-foreground/30 hover:dy-text-destructive hover:dy-bg-destructive/10" onClick={() => remove(index)}>
+            <X className="dy-w-3.5 dy-h-3.5" />
           </Button>
         </div>
       </div>
 
       {/* Content */}
       {isExpanded && (
-        <div className="space-y-6">
+        <div className="dy-space-y-6">
           {blockConfig.fields.map(subField => (
             <FormFieldRenderer
               key={subField.name}
@@ -148,26 +148,26 @@ export function BlockBuilder({ schema, basePath, control, collection }: BlockBui
   }
 
   return (
-    <div className="space-y-4">
-      <div className="flex justify-between items-center pb-2">
+    <div className="dy-space-y-4">
+      <div className="dy-flex dy-justify-between dy-items-center dy-pb-2">
         <div>
-          <h4 className="font-bold text-sm text-foreground tracking-tight">{schema.label}</h4>
+          <h4 className="dy-font-bold dy-text-sm dy-text-foreground dy-tracking-tight">{schema.label}</h4>
           {schema.admin?.description && (
-            <p className="text-[11px] text-muted-foreground/60 italic">{schema.admin.description}</p>
+            <p className="dy-text-[11px] dy-text-muted-foreground/60 dy-italic">{schema.admin.description}</p>
           )}
         </div>
 
         {schema.blocks && schema.blocks.length > 0 && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button type="button" variant="outline" size="sm" className="h-7 text-[11px] rounded-md border-primary/20 hover:bg-primary/5 hover:text-primary">
+              <Button type="button" variant="outline" size="sm" className="dy-h-7 dy-text-[11px] dy-rounded-md dy-border-primary/20 hover:dy-bg-primary/5 hover:dy-text-primary">
                 Add Block
-                <ChevronDown className="w-3 h-3 ml-1.5" />
+                <ChevronDown className="dy-w-3 dy-h-3 dy-ml-1.5" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="rounded-lg border-border/40 shadow-xl">
+            <DropdownMenuContent align="end" className="dy-rounded-lg dy-border-border/40 dy-shadow-xl">
               {schema.blocks.map((block) => (
-                <DropdownMenuItem key={block.slug} onClick={() => handleAddBlock(block)} className="text-[13px] rounded-md focus:bg-primary/5 focus:text-primary transition-colors">
+                <DropdownMenuItem key={block.slug} onClick={() => handleAddBlock(block)} className="dy-text-[13px] dy-rounded-md focus:dy-bg-primary/5 focus:dy-text-primary dy-transition-colors">
                   {block.labels?.singular || block.slug}
                 </DropdownMenuItem>
               ))}
@@ -177,8 +177,8 @@ export function BlockBuilder({ schema, basePath, control, collection }: BlockBui
       </div>
 
       {fields.length === 0 ? (
-        <div className="text-center p-8 border border-dashed border-border/40 rounded-md">
-          <p className="text-[11px] text-muted-foreground/50">No blocks added yet.</p>
+        <div className="dy-text-center dy-p-8 dy-border dy-border-dashed dy-border-border/40 dy-rounded-md">
+          <p className="dy-text-[11px] dy-text-muted-foreground/50">No blocks added yet.</p>
         </div>
       ) : (
         <DndContext
@@ -190,7 +190,7 @@ export function BlockBuilder({ schema, basePath, control, collection }: BlockBui
             items={fields.map(f => f.id)}
             strategy={verticalListSortingStrategy}
           >
-            <div className="pt-2">
+            <div className="dy-pt-2">
               {fields.map((item, index) => (
                 <SortableBlockItem
                   key={item.id}

package/src/components/forms/fields/date-picker.tsx

@@ -21,25 +21,25 @@ export function DatePicker({ value, onChange, label, disabled }: DatePickerProps
   const date = value ? new Date(value) : undefined
 
   return (
-    <div className="flex flex-col gap-2">
-      {label && <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{label}</label>}
+    <div className="dy-flex dy-flex-col dy-gap-2">
+      {label && <label className="dy-text-sm dy-font-medium dy-leading-none dy-peer-disabled:dy-cursor-not-allowed dy-peer-disabled:dy-opacity-70">{label}</label>}
       <Popover open={disabled ? false : undefined}>
         <PopoverTrigger asChild>
           <Button
             variant={"outline"}
             disabled={disabled}
             className={cn(
-              "w-full justify-start text-left font-normal h-11 px-4 bg-white hover:bg-muted/50 border-border/60 shadow-sm transition-all hover:shadow-md",
-              !date && "text-muted-foreground"
+              "dy-w-full dy-justify-start dy-text-left dy-font-normal dy-h-11 dy-px-4 dy-bg-white hover:dy-bg-muted/50 dy-border-border/60 dy-shadow-sm dy-transition-all hover:dy-shadow-md",
+              !date && "dy-text-muted-foreground"
             )}
           >
-            <CalendarIcon className="mr-3 h-4 w-4 text-primary" />
-            <span className="flex-1 truncate">
+            <CalendarIcon className="dy-mr-3 dy-h-4 dy-w-4 dy-text-primary" />
+            <span className="dy-flex-1 dy-truncate">
               {date ? format(date, "PPP") : "Pick a date..."}
             </span>
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0 border-border/50 shadow-2xl rounded-xl" align="start">
+        <PopoverContent className="dy-w-auto dy-p-0 dy-border-border/50 dy-shadow-2xl dy-rounded-xl" align="start">
           <Calendar
             mode="single"
             selected={date}

package/src/components/forms/fields/json-editor.tsx

@@ -44,19 +44,19 @@ export function JsonEditor({ value, onChange, label, disabled }: JsonEditorProps
   }
 
   return (
-    <div className="flex flex-col gap-2">
-      {label && <label className="text-sm font-medium leading-none">{label}</label>}
+    <div className="dy-flex dy-flex-col dy-gap-2">
+      {label && <label className="dy-text-sm dy-font-medium dy-leading-none">{label}</label>}
       <Textarea
         value={internalValue}
         onChange={handleChange}
         disabled={disabled}
         className={cn(
-          "font-mono text-xs min-h-[150px]",
-          error && "border-destructive focus-visible:ring-destructive"
+          "dy-font-mono dy-text-xs dy-min-h-[150px]",
+          error && "dy-border-destructive focus-visible:dy-ring-destructive"
         )}
         placeholder='{ "key": "value" }'
       />
-      {error && <span className="text-xs text-destructive">{error}</span>}
+      {error && <span className="dy-text-xs dy-text-destructive">{error}</span>}
     </div>
   )
 }

package/src/components/forms/fields/media-picker.tsx

@@ -98,70 +98,70 @@ export function MediaPicker({
 
   if (multiple && !isIcon) {
     return (
-      <div className="space-y-4">
+      <div className="dy-space-y-4">
         {label && (
-          <label className="text-sm font-semibold text-foreground/70 tracking-tight leading-none">
+          <label className="dy-text-sm dy-font-semibold dy-text-foreground/70 dy-tracking-tight dy-leading-none">
             {label}
           </label>
         )}
 
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div className="dy-grid dy-grid-cols-2 md:dy-grid-cols-3 lg:dy-grid-cols-4 dy-gap-4">
           <button
             type="button"
             onClick={() => setIsOpen(true)}
-            className="group relative aspect-square rounded-xl border-2 border-dashed border-muted hover:border-primary/40 hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-3 overflow-hidden"
+            className="dy-group dy-relative dy-aspect-square dy-rounded-xl dy-border-2 dy-border-dashed dy-border-muted hover:dy-border-primary/40 hover:dy-bg-primary/5 dy-transition-all dy-flex dy-flex-col dy-items-center dy-justify-center dy-gap-3 dy-overflow-hidden"
           >
-            <div className="absolute inset-0 bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity" />
-            <div className="h-12 w-12 bg-muted rounded-full flex items-center justify-center text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-all shadow-inner">
-              <Plus className="h-6 w-6" />
+            <div className="dy-absolute dy-inset-0 dy-bg-primary/5 dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity" />
+            <div className="dy-h-12 dy-w-12 dy-bg-muted dy-rounded-full dy-flex dy-items-center dy-justify-center dy-text-muted-foreground dy-group-hover:dy-bg-primary/10 dy-group-hover:dy-text-primary dy-transition-all dy-shadow-inner">
+              <Plus className="dy-h-6 dy-w-6" />
             </div>
-            <div className="text-center px-4">
-              <p className="text-[11px] font-bold uppercase tracking-widest text-muted-foreground group-hover:text-primary transition-colors">Add Media</p>
-              <p className="text-[10px] text-muted-foreground/40 mt-1 font-medium group-hover:text-primary/60">Select or upload</p>
+            <div className="dy-text-center dy-px-4">
+              <p className="dy-text-[11px] dy-font-bold dy-uppercase dy-tracking-widest dy-text-muted-foreground dy-group-hover:dy-text-primary dy-transition-colors">Add Media</p>
+              <p className="dy-text-[10px] dy-text-muted-foreground/40 dy-mt-1 dy-font-medium dy-group-hover:dy-text-primary/60">Select or upload</p>
             </div>
           </button>
 
           {selectedValues.map((val, index) => {
             const item = media?.find((m: any) => m.id === val)
             return (
-              <div key={val} className="relative group animate-in zoom-in duration-300">
+              <div key={val} className="dy-relative dy-group dy-animate-in dy-zoom-in dy-duration-300">
                 <div className={cn(
-                  "relative aspect-square rounded-xl overflow-hidden border-2 bg-muted/20 transition-all shadow-sm",
-                  index === 0 ? "border-primary ring-4 ring-primary/10" : "border-border/40 hover:border-border/80"
+                  "dy-relative dy-aspect-square dy-rounded-xl dy-overflow-hidden dy-border-2 dy-bg-muted/20 dy-transition-all dy-shadow-sm",
+                  index === 0 ? "dy-border-primary dy-ring-4 dy-ring-primary/10" : "dy-border-border/40 hover:dy-border-border/80"
                 )}>
                   {item ? (
                     <img
                       src={getPreviewUrl(item)}
                       alt=""
-                      className="w-full h-full object-cover transition-transform group-hover:scale-110"
+                      className="dy-w-full dy-h-full dy-object-cover dy-transition-transform dy-group-hover:dy-scale-110"
                     />
                   ) : (
-                    <div className="w-full h-full animate-pulse bg-muted/50 flex items-center justify-center">
-                      <ImageIcon className="h-6 w-6 text-muted-foreground/20" />
+                    <div className="dy-w-full dy-h-full dy-animate-pulse dy-bg-muted/50 dy-flex dy-items-center dy-justify-center">
+                      <ImageIcon className="dy-h-6 dy-w-6 dy-text-muted-foreground/20" />
                     </div>
                   )}
 
                   {index === 0 && (
-                    <div className="absolute top-0 left-0 w-full text-center z-10 px-3 py-1 bg-primary text-white text-[9px] font-black uppercase tracking-widest shadow-primary/20">
+                    <div className="dy-absolute dy-top-0 dy-left-0 dy-w-full dy-text-center dy-z-10 dy-px-3 dy-py-1 dy-bg-primary dy-text-white dy-text-[9px] dy-font-black dy-uppercase dy-tracking-widest dy-shadow-primary/20">
                       Main Image
                     </div>
                   )}
 
-                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-all flex items-start justify-end backdrop-blur-[2px]">
+                  <div className="dy-absolute dy-inset-0 dy-bg-black/40 dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-all dy-flex dy-items-start dy-justify-end dy-backdrop-blur-[2px]">
                     <Button
                       type="button"
                       variant="outline"
                       size="icon"
-                      className="h-8 w-8 rounded-lg text-destructive bg-destructive-foreground shadow-2xl scale-75 group-hover:scale-100 transition-all"
+                      className="dy-h-8 dy-w-8 dy-rounded-lg dy-text-destructive dy-bg-destructive-foreground dy-shadow-2xl dy-scale-75 dy-group-hover:dy-scale-100 dy-transition-all"
                       onClick={() => toggleValue(val)}
                     >
-                      <Trash2 className="w-5 h-5" />
+                      <Trash2 className="dy-w-5 dy-h-5" />
                     </Button>
                   </div>
 
                   {item && (
-                    <div className="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
-                      <p className="text-[10px] text-white truncate font-medium">{item.filename}</p>
+                    <div className="dy-absolute dy-inset-x-0 dy-bottom-0 dy-p-2 dy-bg-gradient-to-t dy-from-black/60 dy-to-transparent dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity">
+                      <p className="dy-text-[10px] dy-text-white dy-truncate dy-font-medium">{item.filename}</p>
                     </div>
                   )}
                 </div>
@@ -186,41 +186,41 @@ export function MediaPicker({
   return (
     <div className={isIcon ? "" : "space-y-3"}>
       {label && !isIcon && (
-        <label className="text-sm font-semibold text-foreground/70 tracking-tight leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+        <label className="dy-text-sm dy-font-semibold dy-text-foreground/70 dy-tracking-tight dy-leading-none dy-peer-disabled:dy-cursor-not-allowed dy-peer-disabled:dy-opacity-70">
           {label}
         </label>
       )}
 
       <div className={isIcon ? "" : "relative flex items-center gap-2"}>
         {!isIcon && (
-          <div className="relative flex-1 group">
+          <div className="dy-relative dy-flex-1 dy-group">
             <Input
               value={displayValue}
               readOnly
               disabled={disabled}
               placeholder={placeholder || "No media selected"}
-              className="pr-24 bg-muted/30 border-dashed focus-visible:ring-offset-0 focus-visible:ring-1 h-10 rounded-xl"
+              className="dy-pr-24 dy-bg-muted/30 dy-border-dashed focus-visible:dy-ring-offset-0 focus-visible:dy-ring-1 dy-h-10 dy-rounded-xl"
             />
-            <div className="absolute right-1 top-1/2 -translate-y-1/2 flex items-center gap-1 pr-1">
+            <div className="dy-absolute dy-right-1 dy-top-1/2 dy--translate-y-1/2 dy-flex dy-items-center dy-gap-1 dy-pr-1">
               {value && (
                 <Button
                   type="button"
                   variant="ghost"
                   size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-destructive transition-colors rounded-lg"
+                  className="dy-h-7 dy-w-7 dy-text-muted-foreground hover:dy-text-destructive dy-transition-colors dy-rounded-lg"
                   onClick={(e) => {
                     e.preventDefault();
                     onChange(multiple ? [] : "");
                   }}
                 >
-                  <X className="h-4 w-4" />
+                  <X className="dy-h-4 dy-w-4" />
                 </Button>
               )}
               <Button
                 type="button"
                 variant="secondary"
                 size="sm"
-                className="h-8 text-xs font-bold px-3 rounded-lg shadow-sm border border-border/50"
+                className="dy-h-8 dy-text-xs dy-font-bold dy-px-3 dy-rounded-lg dy-shadow-sm dy-border dy-border-border/50"
                 disabled={disabled}
                 onClick={() => setIsOpen(true)}
               >
@@ -231,8 +231,8 @@ export function MediaPicker({
         )}
 
         {isIcon && (
-          <Button variant="ghost" size="sm" className="px-2 h-8 w-8 rounded-lg" disabled={disabled} onClick={() => setIsOpen(true)}>
-            <ImageIcon className="h-4 w-4" />
+          <Button variant="ghost" size="sm" className="dy-px-2 dy-h-8 dy-w-8 dy-rounded-lg" disabled={disabled} onClick={() => setIsOpen(true)}>
+            <ImageIcon className="dy-h-4 dy-w-4" />
           </Button>
         )}
 
@@ -248,33 +248,33 @@ export function MediaPicker({
       </div>
 
       {!isIcon && selectedValues.length > 0 && !multiple && (
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 pt-2">
+        <div className="dy-grid dy-grid-cols-2 sm:dy-grid-cols-3 md:dy-grid-cols-4 lg:dy-grid-cols-5 dy-gap-4 dy-pt-2">
           {selectedValues.map((val) => {
             const item = media?.find((m: any) => m.id === val)
             if (!item) return (
-              <div key={val} className="aspect-square rounded-xl bg-muted/20 animate-pulse border-2 border-dashed border-border/50" />
+              <div key={val} className="dy-aspect-square dy-rounded-xl dy-bg-muted/20 dy-animate-pulse dy-border-2 dy-border-dashed dy-border-border/50" />
             )
             return (
               <div
                 key={val}
-                className="relative aspect-square group rounded-2xl overflow-hidden border-2 border-border/50 hover:border-primary/50 transition-all bg-muted/20 shadow-sm"
+                className="dy-relative dy-aspect-square dy-group dy-rounded-2xl dy-overflow-hidden dy-border-2 dy-border-border/50 hover:dy-border-primary/50 dy-transition-all dy-bg-muted/20 dy-shadow-sm"
               >
                 <img
                   src={getPreviewUrl(item)}
                   alt=""
-                  className="w-full h-full object-cover transition-transform group-hover:scale-110"
+                  className="dy-w-full dy-h-full dy-object-cover dy-transition-transform dy-group-hover:dy-scale-110"
                 />
                 {!disabled && (
                   <button
                     type="button"
                     onClick={() => toggleValue(val)}
-                    className="absolute top-2 right-2 p-1.5 bg-destructive text-destructive-foreground rounded-full opacity-0 group-hover:opacity-100 transition-all hover:scale-110 shadow-lg border-2 border-white"
+                    className="dy-absolute dy-top-2 dy-right-2 dy-p-1.5 dy-bg-destructive dy-text-destructive-foreground dy-rounded-full dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-all hover:dy-scale-110 dy-shadow-lg dy-border-2 dy-border-white"
                   >
-                    <X className="h-3.5 w-3.5" />
+                    <X className="dy-h-3.5 dy-w-3.5" />
                   </button>
                 )}
-                <div className="absolute inset-x-0 bottom-0 p-2 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
-                  <p className="text-[10px] text-white truncate font-medium">{item.filename}</p>
+                <div className="dy-absolute dy-inset-x-0 dy-bottom-0 dy-p-2 dy-bg-gradient-to-t dy-from-black/60 dy-to-transparent dy-opacity-0 dy-group-hover:dy-opacity-100 dy-transition-opacity">
+                  <p className="dy-text-[10px] dy-text-white dy-truncate dy-font-medium">{item.filename}</p>
                 </div>
               </div>
             )