@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/views/page-builder/AIGenerateDialog.tsx

@@ -210,23 +210,23 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/50" onClick={handleClose} />
-      <div className="relative bg-card rounded-xl shadow-2xl border border-border w-full max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
+      <div className="bg-card border-border relative flex max-h-[85vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border shadow-2xl">
         {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+        <div className="border-border flex items-center justify-between border-b px-6 py-4">
           <div className="flex items-center gap-2.5">
-            <div className="p-1.5 rounded-lg bg-primary/10">
+            <div className="bg-primary/10 rounded-lg p-1.5">
               <Sparkles size={18} className="text-primary" />
             </div>
             <div>
-              <h2 className="text-base font-medium text-foreground">AI Page Generator</h2>
-              <p className="text-xs text-muted-foreground">
+              <h2 className="text-foreground text-base font-medium">AI Page Generator</h2>
+              <p className="text-muted-foreground text-xs">
                 Describe your page and let AI build it
               </p>
             </div>
           </div>
           <button
             onClick={handleClose}
-            className="p-1.5 rounded-md hover:bg-muted transition-colors"
+            className="hover:bg-muted rounded-md p-1.5 transition-colors"
             aria-label="Close"
           >
             <X size={16} className="text-muted-foreground" />
@@ -238,15 +238,15 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
           {phase === 'prompt' && (
             <div className="space-y-5">
               {error && (
-                <div className="flex items-start gap-2.5 p-3 rounded-lg bg-destructive/5 border border-destructive/20">
-                  <AlertTriangle size={16} className="text-destructive shrink-0 mt-0.5" />
-                  <p className="text-sm text-destructive">{error}</p>
+                <div className="bg-destructive/5 border-destructive/20 flex items-start gap-2.5 rounded-lg border p-3">
+                  <AlertTriangle size={16} className="text-destructive mt-0.5 shrink-0" />
+                  <p className="text-destructive text-sm">{error}</p>
                 </div>
               )}
 
               {/* Prompt */}
               <div>
-                <label className="block text-sm font-medium text-foreground mb-1.5">
+                <label className="text-foreground mb-1.5 block text-sm font-medium">
                   Describe your page
                 </label>
                 <textarea
@@ -254,20 +254,20 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                   onChange={(e) => setPrompt(e.target.value)}
                   placeholder="e.g. A landing page for a plumbing company with a hero section, service cards, testimonials, and a contact form"
                   rows={4}
-                  className="w-full px-3 py-2.5 text-sm bg-background border border-border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground placeholder:text-muted-foreground"
+                  className="bg-background border-border focus:ring-primary/40 text-foreground placeholder:text-muted-foreground w-full resize-none rounded-lg border px-3 py-2.5 text-sm focus:ring-2 focus:outline-none"
                   autoFocus
                 />
               </div>
 
               {/* Tone */}
               <div>
-                <label className="block text-sm font-medium text-foreground mb-1.5">Tone</label>
+                <label className="text-foreground mb-1.5 block text-sm font-medium">Tone</label>
                 <div className="flex flex-wrap gap-2">
                   {TONES.map((t) => (
                     <button
                       key={t.value}
                       onClick={() => setTone(t.value)}
-                      className={`px-3 py-1.5 text-xs rounded-full border transition-colors ${
+                      className={`rounded-full border px-3 py-1.5 text-xs transition-colors ${
                         tone === t.value
                           ? 'border-primary bg-primary/10 text-primary'
                           : 'border-border bg-background text-muted-foreground hover:border-primary/40'
@@ -281,18 +281,18 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
 
               {/* Steps */}
               <div>
-                <label className="block text-sm font-medium text-foreground mb-1.5">
+                <label className="text-foreground mb-1.5 block text-sm font-medium">
                   Generation steps
                 </label>
                 <div className="space-y-1.5">
                   {ALL_STEPS.map((step) => (
                     <label
                       key={step.key}
-                      className={`flex items-center gap-3 p-2.5 rounded-lg border transition-colors cursor-pointer ${
+                      className={`flex cursor-pointer items-center gap-3 rounded-lg border p-2.5 transition-colors ${
                         enabledSteps.has(step.key)
                           ? 'border-primary/30 bg-primary/5'
                           : 'border-border bg-background'
-                      } ${step.key === 'structure' ? 'opacity-70 cursor-not-allowed' : 'hover:border-primary/20'}`}
+                      } ${step.key === 'structure' ? 'cursor-not-allowed opacity-70' : 'hover:border-primary/20'}`}
                     >
                       <input
                         type="checkbox"
@@ -302,19 +302,19 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                         className="sr-only"
                       />
                       <div
-                        className={`w-5 h-5 rounded flex items-center justify-center shrink-0 ${
+                        className={`flex h-5 w-5 shrink-0 items-center justify-center rounded ${
                           enabledSteps.has(step.key)
                             ? 'bg-primary text-white'
-                            : 'bg-muted border border-border'
+                            : 'bg-muted border-border border'
                         }`}
                       >
                         {enabledSteps.has(step.key) && <Check size={12} />}
                       </div>
-                      <div className="flex items-center gap-2 flex-1 min-w-0">
+                      <div className="flex min-w-0 flex-1 items-center gap-2">
                         <span className="text-muted-foreground">{step.icon}</span>
                         <div>
-                          <span className="text-sm text-foreground">{step.label}</span>
-                          <span className="text-xs text-muted-foreground ml-2">
+                          <span className="text-foreground text-sm">{step.label}</span>
+                          <span className="text-muted-foreground ml-2 text-xs">
                             {step.description}
                           </span>
                         </div>
@@ -328,55 +328,55 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
               <div>
                 <button
                   onClick={() => setShowContext(!showContext)}
-                  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors"
                 >
                   {showContext ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
                   Business context (optional)
                 </button>
                 {showContext && (
-                  <div className="mt-3 space-y-3 p-4 bg-muted/50 rounded-lg border border-border">
+                  <div className="bg-muted/50 border-border mt-3 space-y-3 rounded-lg border p-4">
                     <div className="grid grid-cols-2 gap-3">
                       <div>
-                        <label className="block text-xs text-muted-foreground mb-1">
+                        <label className="text-muted-foreground mb-1 block text-xs">
                           Business name
                         </label>
                         <input
                           type="text"
                           value={businessName}
                           onChange={(e) => setBusiness(e.target.value)}
-                          className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground"
+                          className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
                         />
                       </div>
                       <div>
-                        <label className="block text-xs text-muted-foreground mb-1">Industry</label>
+                        <label className="text-muted-foreground mb-1 block text-xs">Industry</label>
                         <input
                           type="text"
                           value={industry}
                           onChange={(e) => setIndustry(e.target.value)}
-                          className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground"
+                          className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
                         />
                       </div>
                       <div>
-                        <label className="block text-xs text-muted-foreground mb-1">Phone</label>
+                        <label className="text-muted-foreground mb-1 block text-xs">Phone</label>
                         <input
                           type="text"
                           value={phone}
                           onChange={(e) => setPhone(e.target.value)}
-                          className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground"
+                          className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
                         />
                       </div>
                       <div>
-                        <label className="block text-xs text-muted-foreground mb-1">Address</label>
+                        <label className="text-muted-foreground mb-1 block text-xs">Address</label>
                         <input
                           type="text"
                           value={address}
                           onChange={(e) => setAddress(e.target.value)}
-                          className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground"
+                          className="bg-background border-border focus:ring-primary/40 text-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
                         />
                       </div>
                     </div>
                     <div>
-                      <label className="block text-xs text-muted-foreground mb-1">
+                      <label className="text-muted-foreground mb-1 block text-xs">
                         Services (comma-separated)
                       </label>
                       <input
@@ -384,7 +384,7 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                         value={services}
                         onChange={(e) => setServices(e.target.value)}
                         placeholder="e.g. Web design, SEO, Content marketing"
-                        className="w-full px-2.5 py-1.5 text-sm bg-background border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary/40 text-foreground placeholder:text-muted-foreground"
+                        className="bg-background border-border focus:ring-primary/40 text-foreground placeholder:text-muted-foreground w-full rounded-md border px-2.5 py-1.5 text-sm focus:ring-2 focus:outline-none"
                       />
                     </div>
                   </div>
@@ -394,13 +394,13 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
           )}
 
           {phase === 'generating' && (
-            <div className="py-8 space-y-6">
+            <div className="space-y-6 py-8">
               <div className="text-center">
-                <Loader2 size={32} className="animate-spin text-primary mx-auto mb-3" />
-                <p className="text-sm font-medium text-foreground">
+                <Loader2 size={32} className="text-primary mx-auto mb-3 animate-spin" />
+                <p className="text-foreground text-sm font-medium">
                   {stepMessage || 'Generating...'}
                 </p>
-                <p className="text-xs text-muted-foreground mt-1">This may take 15-30 seconds</p>
+                <p className="text-muted-foreground mt-1 text-xs">This may take 15-30 seconds</p>
               </div>
 
               <div className="space-y-2">
@@ -411,7 +411,7 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                   return (
                     <div
                       key={step.key}
-                      className={`flex items-center gap-3 p-3 rounded-lg border transition-colors ${
+                      className={`flex items-center gap-3 rounded-lg border p-3 transition-colors ${
                         isComplete
                           ? 'border-primary/30 bg-primary/5'
                           : isCurrent
@@ -419,15 +419,15 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                             : 'border-border bg-muted/30'
                       }`}
                     >
-                      <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0">
+                      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
                         {isComplete ? (
-                          <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center">
+                          <div className="bg-primary flex h-6 w-6 items-center justify-center rounded-full">
                             <Check size={12} className="text-white" />
                           </div>
                         ) : isCurrent ? (
-                          <Loader2 size={16} className="animate-spin text-primary" />
+                          <Loader2 size={16} className="text-primary animate-spin" />
                         ) : (
-                          <div className="w-6 h-6 rounded-full bg-muted border border-border" />
+                          <div className="bg-muted border-border h-6 w-6 rounded-full border" />
                         )}
                       </div>
                       <div className="flex items-center gap-2">
@@ -448,13 +448,13 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
           {phase === 'review' && result && (
             <div className="space-y-5">
               {/* Summary */}
-              <div className="flex items-center gap-3 p-4 rounded-lg bg-primary/5 border border-primary/20">
-                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+              <div className="bg-primary/5 border-primary/20 flex items-center gap-3 rounded-lg border p-4">
+                <div className="bg-primary/10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
                   <Sparkles size={18} className="text-primary" />
                 </div>
                 <div>
-                  <p className="text-sm font-medium text-foreground">Page generated successfully</p>
-                  <p className="text-xs text-muted-foreground mt-0.5">
+                  <p className="text-foreground text-sm font-medium">Page generated successfully</p>
+                  <p className="text-muted-foreground mt-0.5 text-xs">
                     {result.totalTokensUsed.toLocaleString()} tokens
                     {' \u00B7 '}
                     {(result.totalDurationMs / 1000).toFixed(1)}s{' \u00B7 '}
@@ -465,7 +465,7 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
 
               {/* Step details */}
               <div className="space-y-2">
-                <h3 className="text-sm font-medium text-foreground">Generation steps</h3>
+                <h3 className="text-foreground text-sm font-medium">Generation steps</h3>
                 {result.steps.map((step) => {
                   const info = ALL_STEPS.find((s) => s.key === step.step)
                   const isExpanded = expandedStep === step.step
@@ -473,18 +473,18 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                   return (
                     <div
                       key={step.step}
-                      className="rounded-lg border border-border overflow-hidden"
+                      className="border-border overflow-hidden rounded-lg border"
                     >
                       <button
                         onClick={() => setExpandedStep(isExpanded ? null : step.step)}
-                        className="w-full flex items-center gap-3 p-3 hover:bg-muted/50 transition-colors text-left"
+                        className="hover:bg-muted/50 flex w-full items-center gap-3 p-3 text-left transition-colors"
                       >
-                        <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center shrink-0">
+                        <div className="bg-primary flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
                           <Check size={12} className="text-white" />
                         </div>
                         <span className="text-muted-foreground">{info?.icon}</span>
-                        <span className="text-sm text-foreground flex-1">{info?.label}</span>
-                        <span className="text-xs text-muted-foreground">
+                        <span className="text-foreground flex-1 text-sm">{info?.label}</span>
+                        <span className="text-muted-foreground text-xs">
                           {(step.metadata.durationMs / 1000).toFixed(1)}s
                         </span>
                         {isExpanded ? (
@@ -494,19 +494,19 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                         )}
                       </button>
                       {isExpanded && (
-                        <div className="px-3 pb-3 border-t border-border pt-2">
+                        <div className="border-border border-t px-3 pt-2 pb-3">
                           <ul className="space-y-1">
                             {step.metadata.changes.map((change, i) => (
                               <li
                                 key={i}
-                                className="flex items-start gap-2 text-xs text-muted-foreground"
+                                className="text-muted-foreground flex items-start gap-2 text-xs"
                               >
-                                <ArrowRight size={10} className="shrink-0 mt-0.5" />
+                                <ArrowRight size={10} className="mt-0.5 shrink-0" />
                                 {change}
                               </li>
                             ))}
                           </ul>
-                          <p className="text-xs text-muted-foreground mt-2">
+                          <p className="text-muted-foreground mt-2 text-xs">
                             Tokens: {step.metadata.tokensUsed.toLocaleString()}
                           </p>
                         </div>
@@ -516,7 +516,7 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                 })}
               </div>
 
-              <p className="text-xs text-muted-foreground">
+              <p className="text-muted-foreground text-xs">
                 Review the generated page in the canvas after accepting. You can always undo to
                 revert.
               </p>
@@ -525,19 +525,19 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
         </div>
 
         {/* Footer */}
-        <div className="px-6 py-4 border-t border-border flex items-center justify-end gap-3">
+        <div className="border-border flex items-center justify-end gap-3 border-t px-6 py-4">
           {phase === 'prompt' && (
             <>
               <button
                 onClick={handleClose}
-                className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                className="text-muted-foreground hover:text-foreground px-4 py-2 text-sm transition-colors"
               >
                 Cancel
               </button>
               <button
                 onClick={handleGenerate}
                 disabled={!prompt.trim()}
-                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                className="bg-primary hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50"
               >
                 <Sparkles size={14} />
                 Generate Page
@@ -548,7 +548,7 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
           {phase === 'generating' && (
             <button
               onClick={handleClose}
-              className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+              className="text-muted-foreground hover:text-foreground px-4 py-2 text-sm transition-colors"
             >
               Cancel
             </button>
@@ -561,13 +561,13 @@ export function AIGenerateDialog({ open, onClose, onAccept }: AIGenerateDialogPr
                   setPhase('prompt')
                   setResult(null)
                 }}
-                className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                className="text-muted-foreground hover:text-foreground px-4 py-2 text-sm transition-colors"
               >
                 Regenerate
               </button>
               <button
                 onClick={handleAccept}
-                className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary/90 transition-colors"
+                className="bg-primary hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
               >
                 <Check size={14} />
                 Accept &amp; Apply

package/src/views/page-builder/BlockEditor.tsx

@@ -64,7 +64,7 @@ export function BlockEditor({
   if (!blockDef) {
     return (
       <div className="p-4">
-        <p className="text-sm text-muted-foreground">
+        <p className="text-muted-foreground text-sm">
           Unknown block type: <code className="text-xs">{node.settings.blockType}</code>
         </p>
       </div>
@@ -72,21 +72,21 @@ export function BlockEditor({
   }
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="p-4 border-b border-border">
+    <div className="flex h-full flex-col">
+      <div className="border-border border-b p-4">
         <div className="flex items-center gap-2">
           <Star size={16} className="text-muted-foreground" />
-          <span className="text-sm font-medium text-foreground flex-1">{blockDef.label}</span>
+          <span className="text-foreground flex-1 text-sm font-medium">{blockDef.label}</span>
           <AIBlockAssist block={node} onUpdateData={(data) => onUpdateBlock(node.id, data)} />
         </div>
         {blockDef.description && (
-          <p className="text-xs text-muted-foreground mt-1">{blockDef.description}</p>
+          <p className="text-muted-foreground mt-1 text-xs">{blockDef.description}</p>
         )}
       </div>
 
       {blockDef.variants.length > 1 && (
-        <div className="p-4 border-b border-border">
-          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
+        <div className="border-border border-b p-4">
+          <p className="text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase">
             Variant
           </p>
           <div className="grid grid-cols-2 gap-1.5">
@@ -95,7 +95,7 @@ export function BlockEditor({
                 key={variant.name}
                 type="button"
                 onClick={() => handleVariantChange(variant.name)}
-                className={`px-2 py-1.5 text-xs rounded-md border transition-colors ${
+                className={`rounded-md border px-2 py-1.5 text-xs transition-colors ${
                   node.settings.variant === variant.name
                     ? 'bg-primary text-primary-foreground border-primary'
                     : 'bg-background border-input text-foreground hover:bg-accent'
@@ -108,8 +108,8 @@ export function BlockEditor({
         </div>
       )}
 
-      <div className="space-y-4 p-4 flex-1">
-        <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2">
+      <div className="flex-1 space-y-4 p-4">
+        <p className="text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase">
           Fields
         </p>
         {Object.entries(blockDef.fields).map(([fieldName, fieldDef]) => (
@@ -123,11 +123,11 @@ export function BlockEditor({
         ))}
       </div>
 
-      <div className="p-4 border-t border-border space-y-2">
+      <div className="border-border space-y-2 border-t p-4">
         <button
           type="button"
           onClick={() => onDuplicateNode(node.id)}
-          className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium bg-background border border-input rounded-md hover:bg-accent transition-colors"
+          className="bg-background border-input hover:bg-accent flex w-full items-center justify-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors"
         >
           <Copy size={14} />
           Duplicate
@@ -136,10 +136,10 @@ export function BlockEditor({
           type="button"
           onClick={handleDelete}
           onBlur={() => setConfirmDelete(false)}
-          className={`w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium rounded-md transition-colors ${
+          className={`flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
             confirmDelete
               ? 'bg-destructive text-destructive-foreground'
-              : 'bg-background border border-destructive text-destructive hover:bg-destructive/10'
+              : 'bg-background border-destructive text-destructive hover:bg-destructive/10 border'
           }`}
         >
           <Trash2 size={14} />
@@ -179,7 +179,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
       return (
         <div>
           <label className={LABEL_CLASS}>{label}</label>
-          <div className="rounded-md border border-input overflow-hidden bg-background">
+          <div className="border-input bg-background overflow-hidden rounded-md border">
             <TipTapEditor
               content={(value as string) ?? ''}
               onChange={(html) => onChange(html)}
@@ -222,14 +222,14 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
     case 'boolean':
       return (
         <div className="flex items-center justify-between">
-          <label className="text-sm font-medium text-foreground">{label}</label>
+          <label className="text-foreground text-sm font-medium">{label}</label>
           <SwitchPrimitive.Root
             checked={!!value}
             onCheckedChange={(checked) => onChange(checked)}
-            className="w-9 h-5 bg-input rounded-full relative data-[state=checked]:bg-primary transition-colors"
+            className="bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors"
             aria-label={label}
           >
-            <SwitchPrimitive.Thumb className="block h-3.5 w-3.5 rounded-full bg-background shadow-sm transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px]" />
+            <SwitchPrimitive.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" />
           </SwitchPrimitive.Root>
         </div>
       )
@@ -332,7 +332,7 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
               type="color"
               value={(value as string) ?? '#000000'}
               onChange={(e) => onChange(e.target.value)}
-              className="h-9 w-9 rounded-md border border-input cursor-pointer"
+              className="border-input h-9 w-9 cursor-pointer rounded-md border"
             />
             <input
               type="text"
@@ -394,15 +394,15 @@ function MediaFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
         <button
           type="button"
           onClick={() => setOpen(true)}
-          className="px-3 py-2 text-xs font-medium bg-accent text-foreground border border-input rounded-md hover:bg-accent/80 transition-colors"
+          className="bg-accent text-foreground border-input hover:bg-accent/80 rounded-md border px-3 py-2 text-xs font-medium transition-colors"
         >
           Browse
         </button>
       </div>
       {url && /\.(png|jpe?g|gif|webp|avif|svg)(\?|$)/i.test(url) && (
-        <div className="mt-2 rounded-md border border-border overflow-hidden bg-muted">
+        <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
           {/* Plain img is fine here; admin only and we don't have next/image in scope. */}
-          <img src={url} alt="" className="w-full h-32 object-contain bg-checkered" />
+          <img src={url} alt="" className="bg-checkered h-32 w-full object-contain" />
         </div>
       )}
       <MediaPickerModal
@@ -460,10 +460,10 @@ function JsonFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
         onChange={(e) => handleChange(e.target.value)}
         rows={6}
         spellCheck={false}
-        className={`${INPUT_CLASS} font-mono text-xs resize-y`}
+        className={`${INPUT_CLASS} resize-y font-mono text-xs`}
       />
       {error && (
-        <p className="mt-1 text-xs text-destructive" role="alert">
+        <p className="text-destructive mt-1 text-xs" role="alert">
           {error}
         </p>
       )}
@@ -510,7 +510,7 @@ function ArrayFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
               type="button"
               onClick={() => removeItem(idx)}
               aria-label={`Remove item ${idx + 1}`}
-              className="px-2 py-2 text-xs text-destructive border border-input rounded-md hover:bg-destructive/10 transition-colors"
+              className="text-destructive border-input hover:bg-destructive/10 rounded-md border px-2 py-2 text-xs transition-colors"
             >
               <Trash2 size={14} />
             </button>
@@ -519,7 +519,7 @@ function ArrayFieldRenderer({ label, value, onChange }: SimpleFieldProps) {
         <button
           type="button"
           onClick={addItem}
-          className="w-full px-3 py-2 text-xs font-medium bg-accent text-foreground border border-input rounded-md hover:bg-accent/80 transition-colors"
+          className="bg-accent text-foreground border-input hover:bg-accent/80 w-full rounded-md border px-3 py-2 text-xs font-medium transition-colors"
         >
           + Add item
         </button>