@actuate-media/cms-admin 0.10.0 → 0.11.0

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

@@ -164,22 +164,22 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
     <div className="p-4 pr-8">
       <div className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-medium text-foreground">Saved Sections</h1>
-          <p className="text-sm text-muted-foreground mt-1">
+          <h1 className="text-foreground text-2xl font-medium">Saved Sections</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
             Reusable sections for the page builder
           </p>
         </div>
         <button
           type="button"
           onClick={() => setViewState({ mode: 'create' })}
-          className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors"
         >
           <Plus size={16} />
           Create Section
         </button>
       </div>
 
-      <div className="mb-4 flex items-center gap-1 border-b border-border">
+      <div className="border-border mb-4 flex items-center gap-1 border-b">
         <CategoryTab
           label="All"
           active={activeCategory === 'all'}
@@ -197,18 +197,18 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
 
       {loading && (
         <div className="flex items-center justify-center py-16">
-          <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+          <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
         </div>
       )}
 
       {error && !loading && (
         <div className="flex flex-col items-center justify-center py-12 text-center">
           <AlertTriangle size={24} className="text-destructive mb-2" />
-          <p className="text-sm text-muted-foreground mb-3">{error}</p>
+          <p className="text-muted-foreground mb-3 text-sm">{error}</p>
           <button
             type="button"
             onClick={fetchSections}
-            className="px-3 py-1.5 text-sm font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors"
+            className="text-foreground border-border hover:bg-accent rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
           >
             Retry
           </button>
@@ -218,8 +218,8 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
       {!loading && !error && filteredSections.length === 0 && (
         <div className="flex flex-col items-center justify-center py-16 text-center">
           <Layers size={32} className="text-muted-foreground mb-3" />
-          <p className="text-sm font-medium text-foreground mb-1">No saved sections</p>
-          <p className="text-xs text-muted-foreground mb-4">
+          <p className="text-foreground mb-1 text-sm font-medium">No saved sections</p>
+          <p className="text-muted-foreground mb-4 text-xs">
             {activeCategory === 'all'
               ? 'Create your first reusable section to get started.'
               : `No sections in the "${activeCategory}" category.`}
@@ -228,7 +228,7 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
             <button
               type="button"
               onClick={() => setViewState({ mode: 'create' })}
-              className="flex items-center gap-2 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
             >
               <Plus size={14} />
               Create Section
@@ -238,29 +238,29 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
       )}
 
       {!loading && !error && filteredSections.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
           {filteredSections.map((section) => (
             <div
               key={section.id}
-              className="border border-border rounded-lg p-4 bg-card hover:border-primary/50 transition-colors"
+              className="border-border bg-card hover:border-primary/50 rounded-lg border p-4 transition-colors"
             >
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0 flex-1">
-                  <p className="text-sm font-medium text-foreground truncate">{section.name}</p>
+                  <p className="text-foreground truncate text-sm font-medium">{section.name}</p>
                   {section.description && (
-                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                    <p className="text-muted-foreground mt-0.5 line-clamp-2 text-xs">
                       {section.description}
                     </p>
                   )}
                 </div>
                 <span
-                  className={`shrink-0 text-xs px-2 py-0.5 rounded-full ${CATEGORY_COLORS[section.category] ?? 'bg-muted text-muted-foreground'}`}
+                  className={`shrink-0 rounded-full px-2 py-0.5 text-xs ${CATEGORY_COLORS[section.category] ?? 'bg-muted text-muted-foreground'}`}
                 >
                   {section.category}
                 </span>
               </div>
 
-              <div className="mt-3 flex items-center gap-4 text-xs text-muted-foreground">
+              <div className="text-muted-foreground mt-3 flex items-center gap-4 text-xs">
                 <span className="flex items-center gap-1">
                   <Hash size={12} />
                   {section.usageCount} use{section.usageCount !== 1 ? 's' : ''}
@@ -277,11 +277,11 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
                 )}
               </div>
 
-              <div className="mt-3 flex items-center gap-1 border-t border-border pt-3">
+              <div className="border-border mt-3 flex items-center gap-1 border-t pt-3">
                 <button
                   type="button"
                   onClick={() => setViewState({ mode: 'edit', section })}
-                  className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-foreground rounded-md hover:bg-accent transition-colors"
+                  className="text-foreground hover:bg-accent flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors"
                   aria-label={`Edit ${section.name}`}
                 >
                   <Edit size={13} />
@@ -290,7 +290,7 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
                 <button
                   type="button"
                   onClick={() => handleDuplicate(section)}
-                  className="flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-foreground rounded-md hover:bg-accent transition-colors"
+                  className="text-foreground hover:bg-accent flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors"
                   aria-label={`Duplicate ${section.name}`}
                 >
                   <Copy size={13} />
@@ -298,18 +298,18 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
                 </button>
                 {deleteConfirmId === section.id ? (
                   <div className="ml-auto flex items-center gap-1">
-                    <span className="text-xs text-destructive mr-1">Delete?</span>
+                    <span className="text-destructive mr-1 text-xs">Delete?</span>
                     <button
                       type="button"
                       onClick={() => handleDelete(section.id)}
-                      className="px-2 py-1 text-xs font-medium text-destructive-foreground bg-destructive rounded-md hover:bg-destructive/90 transition-colors"
+                      className="text-destructive-foreground bg-destructive hover:bg-destructive/90 rounded-md px-2 py-1 text-xs font-medium transition-colors"
                     >
                       Yes
                     </button>
                     <button
                       type="button"
                       onClick={() => setDeleteConfirmId(null)}
-                      className="px-2 py-1 text-xs font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors"
+                      className="text-foreground border-border hover:bg-accent rounded-md border px-2 py-1 text-xs font-medium transition-colors"
                     >
                       No
                     </button>
@@ -318,7 +318,7 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
                   <button
                     type="button"
                     onClick={() => setDeleteConfirmId(section.id)}
-                    className="ml-auto flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-destructive rounded-md hover:bg-destructive/10 transition-colors"
+                    className="text-destructive hover:bg-destructive/10 ml-auto flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors"
                     aria-label={`Delete ${section.name}`}
                   >
                     <Trash2 size={13} />
@@ -345,10 +345,10 @@ function CategoryTab({ label, active, onClick }: CategoryTabProps) {
     <button
       type="button"
       onClick={onClick}
-      className={`px-3 py-2 text-sm transition-colors border-b-2 -mb-px ${
+      className={`-mb-px border-b-2 px-3 py-2 text-sm transition-colors ${
         active
           ? 'border-primary text-foreground font-medium'
-          : 'border-transparent text-muted-foreground hover:text-foreground'
+          : 'text-muted-foreground hover:text-foreground border-transparent'
       }`}
     >
       {label}
@@ -382,20 +382,20 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
         <button
           type="button"
           onClick={onCancel}
-          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-3"
+          className="text-muted-foreground hover:text-foreground mb-3 flex items-center gap-1.5 text-sm transition-colors"
           aria-label="Back to saved sections"
         >
           <ArrowLeft size={16} />
           Back
         </button>
-        <h1 className="text-2xl font-medium text-foreground">
+        <h1 className="text-foreground text-2xl font-medium">
           {initial ? `Edit: ${initial.name}` : 'Create Saved Section'}
         </h1>
       </div>
 
       <form onSubmit={handleSubmit} className="max-w-lg space-y-4">
         <div>
-          <label htmlFor="section-name" className="block text-sm font-medium text-foreground mb-1">
+          <label htmlFor="section-name" className="text-foreground mb-1 block text-sm font-medium">
             Name <span className="text-destructive">*</span>
           </label>
           <input
@@ -405,14 +405,14 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
             onChange={(e) => setName(e.target.value)}
             required
             placeholder="e.g. Hero Banner"
-            className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+            className="bg-background border-input focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
           />
         </div>
 
         <div>
           <label
             htmlFor="section-description"
-            className="block text-sm font-medium text-foreground mb-1"
+            className="text-foreground mb-1 block text-sm font-medium"
           >
             Description
           </label>
@@ -422,14 +422,14 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
             onChange={(e) => setDescription(e.target.value)}
             placeholder="Optional description of this section..."
             rows={3}
-            className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+            className="bg-background border-input focus:ring-ring w-full resize-none rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
           />
         </div>
 
         <div>
           <label
             htmlFor="section-category"
-            className="block text-sm font-medium text-foreground mb-1"
+            className="text-foreground mb-1 block text-sm font-medium"
           >
             Category
           </label>
@@ -437,7 +437,7 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
             id="section-category"
             value={category}
             onChange={(e) => setCategory(e.target.value)}
-            className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+            className="bg-background border-input focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
           >
             {CATEGORIES.map((cat) => (
               <option key={cat} value={cat}>
@@ -448,8 +448,8 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
         </div>
 
         {treeSize !== null && (
-          <div className="rounded-md border border-border bg-muted p-3">
-            <p className="text-xs text-muted-foreground">
+          <div className="border-border bg-muted rounded-md border p-3">
+            <p className="text-muted-foreground text-xs">
               Section tree editing is available in the page builder. Current tree size:{' '}
               {(treeSize / 1024).toFixed(1)} KB
             </p>
@@ -460,7 +460,7 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
           <button
             type="submit"
             disabled={saving || !name.trim()}
-            className="flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="bg-primary text-primary-foreground hover:bg-primary/90 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
           >
             {saving && <Loader2 size={14} className="animate-spin" />}
             {initial ? 'Save Changes' : 'Create Section'}
@@ -469,7 +469,7 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
             type="button"
             onClick={onCancel}
             disabled={saving}
-            className="px-4 py-2 text-sm font-medium text-foreground border border-border rounded-lg hover:bg-accent transition-colors disabled:opacity-50"
+            className="text-foreground border-border hover:bg-accent rounded-lg border px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50"
           >
             Cancel
           </button>

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

@@ -101,18 +101,18 @@ export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
       aria-label="Choose a template"
     >
       <div
-        className="absolute inset-0 bg-black/50 motion-safe:animate-in motion-safe:fade-in-0"
+        className="motion-safe:animate-in motion-safe:fade-in-0 absolute inset-0 bg-black/50"
         onClick={onClose}
         aria-hidden="true"
       />
 
-      <div className="relative z-10 w-full max-w-2xl max-h-[80vh] bg-card rounded-xl shadow-2xl border border-border flex flex-col overflow-hidden">
+      <div className="bg-card border-border relative z-10 flex max-h-[80vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border shadow-2xl">
         <div className="flex items-center justify-between px-5 pt-5 pb-3">
-          <h2 className="text-lg font-medium text-foreground">Choose a Template</h2>
+          <h2 className="text-foreground text-lg font-medium">Choose a Template</h2>
           <button
             type="button"
             onClick={onClose}
-            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+            className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors"
             aria-label="Close"
           >
             <X size={18} />
@@ -122,18 +122,18 @@ export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
         <div className="flex-1 overflow-y-auto px-5 pb-5">
           {loading && (
             <div className="flex items-center justify-center py-16">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+              <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
             </div>
           )}
 
           {error && !loading && (
             <div className="flex flex-col items-center justify-center py-12 text-center">
               <AlertTriangle size={24} className="text-destructive mb-2" />
-              <p className="text-sm text-muted-foreground mb-3">{error}</p>
+              <p className="text-muted-foreground mb-3 text-sm">{error}</p>
               <button
                 type="button"
                 onClick={fetchTemplates}
-                className="px-3 py-1.5 text-sm font-medium text-foreground border border-border rounded-md hover:bg-accent transition-colors"
+                className="text-foreground border-border hover:bg-accent rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
               >
                 Retry
               </button>
@@ -142,7 +142,7 @@ export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
 
           {!loading && !error && (
             <div
-              className="grid grid-cols-2 md:grid-cols-3 gap-3"
+              className="grid grid-cols-2 gap-3 md:grid-cols-3"
               role="list"
               aria-label="Available templates"
             >
@@ -150,13 +150,13 @@ export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
                 type="button"
                 role="listitem"
                 onClick={handleBlankPage}
-                className="p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-ring"
+                className="border-border hover:border-primary bg-card group focus:ring-ring flex cursor-pointer flex-col items-center gap-2 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
               >
-                <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+                <div className="bg-muted text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-10 w-10 items-center justify-center rounded-md transition-colors">
                   <File size={20} />
                 </div>
-                <p className="text-sm font-medium text-foreground text-center">Blank Page</p>
-                <p className="text-xs text-muted-foreground text-center">Start from scratch</p>
+                <p className="text-foreground text-center text-sm font-medium">Blank Page</p>
+                <p className="text-muted-foreground text-center text-xs">Start from scratch</p>
               </button>
 
               {templates.map((template) => {
@@ -169,20 +169,20 @@ export function TemplatePicker({ onSelect, onClose }: TemplatePickerProps) {
                     type="button"
                     role="listitem"
                     onClick={() => handleTemplateSelect(template)}
-                    className="p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-ring"
+                    className="border-border hover:border-primary bg-card group focus:ring-ring flex cursor-pointer flex-col items-center gap-2 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
                   >
-                    <div className="w-10 h-10 rounded-md bg-accent flex items-center justify-center text-foreground group-hover:bg-primary/10 group-hover:text-primary transition-colors">
+                    <div className="bg-accent text-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-10 w-10 items-center justify-center rounded-md transition-colors">
                       <Icon size={20} />
                     </div>
-                    <p className="text-sm font-medium text-foreground text-center truncate w-full">
+                    <p className="text-foreground w-full truncate text-center text-sm font-medium">
                       {template.name}
                     </p>
                     {template.description && (
-                      <p className="text-xs text-muted-foreground text-center line-clamp-2">
+                      <p className="text-muted-foreground line-clamp-2 text-center text-xs">
                         {template.description}
                       </p>
                     )}
-                    <span className={`inline-block text-xs px-2 py-0.5 rounded-full ${badgeColor}`}>
+                    <span className={`inline-block rounded-full px-2 py-0.5 text-xs ${badgeColor}`}>
                       {template.category}
                     </span>
                   </button>

package/src/views/page-builder/block-renderers/CTAPreview.tsx

@@ -8,19 +8,19 @@ export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
   const buttonText = (data.buttonText as string) || ''
 
   const button = (
-    <span className="inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+    <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
       {buttonText || 'Click Here'}
     </span>
   )
 
   if (variant === 'inline') {
     return (
-      <div className="flex items-center justify-between gap-4 rounded-md border border-border p-4">
+      <div className="border-border flex items-center justify-between gap-4 rounded-md border p-4">
         <div className="flex-1">
-          <p className="text-sm font-medium text-foreground">
+          <p className="text-foreground text-sm font-medium">
             {heading || <span className="text-muted-foreground">CTA Heading</span>}
           </p>
-          {body && <p className="mt-1 text-xs text-muted-foreground">{body}</p>}
+          {body && <p className="text-muted-foreground mt-1 text-xs">{body}</p>}
         </div>
         {button}
       </div>
@@ -29,13 +29,13 @@ export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
 
   if (variant === 'floating') {
     return (
-      <div className="mx-auto max-w-md rounded-lg border border-border bg-card p-6 shadow-md">
+      <div className="border-border bg-card mx-auto max-w-md rounded-lg border p-6 shadow-md">
         <div className="text-center">
-          <h3 className="text-lg font-medium text-foreground">
+          <h3 className="text-foreground text-lg font-medium">
             {heading || <span className="text-muted-foreground">CTA Heading</span>}
           </h3>
           {(body || !heading) && (
-            <p className="mt-2 text-sm text-muted-foreground">
+            <p className="text-muted-foreground mt-2 text-sm">
               {body || 'Supporting text for the call to action'}
             </p>
           )}
@@ -47,13 +47,13 @@ export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
 
   if (variant === 'split') {
     return (
-      <div className="flex items-center gap-6 rounded-md border border-border p-6">
+      <div className="border-border flex items-center gap-6 rounded-md border p-6">
         <div className="flex-1">
-          <h3 className="text-lg font-medium text-foreground">
+          <h3 className="text-foreground text-lg font-medium">
             {heading || <span className="text-muted-foreground">CTA Heading</span>}
           </h3>
           {(body || !heading) && (
-            <p className="mt-2 text-sm text-muted-foreground">
+            <p className="text-muted-foreground mt-2 text-sm">
               {body || 'Supporting text for the call to action'}
             </p>
           )}
@@ -64,12 +64,12 @@ export function CTAPreview({ data, variant = 'banner' }: BlockPreviewProps) {
   }
 
   return (
-    <div className="rounded-md border border-border bg-accent p-6 text-center">
-      <h3 className="text-lg font-medium text-foreground">
+    <div className="border-border bg-accent rounded-md border p-6 text-center">
+      <h3 className="text-foreground text-lg font-medium">
         {heading || <span className="text-muted-foreground">CTA Heading</span>}
       </h3>
       {(body || !heading) && (
-        <p className="mt-2 text-sm text-muted-foreground">
+        <p className="text-muted-foreground mt-2 text-sm">
           {body || 'Supporting text for the call to action'}
         </p>
       )}

package/src/views/page-builder/block-renderers/CardsPreview.tsx

@@ -33,14 +33,14 @@ export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
           : 'grid grid-cols-3 gap-3'
 
   return (
-    <div className="rounded-md border border-border p-4">
+    <div className="border-border rounded-md border p-4">
       <div className={gridClass}>
         {placeholderItems.map((item, i) => (
           <div
             key={i}
-            className={`flex flex-col overflow-hidden rounded-md border border-border bg-card ${variant === 'horizontal' ? 'min-w-40' : ''}`}
+            className={`border-border bg-card flex flex-col overflow-hidden rounded-md border ${variant === 'horizontal' ? 'min-w-40' : ''}`}
           >
-            <div className="flex h-20 items-center justify-center bg-muted">
+            <div className="bg-muted flex h-20 items-center justify-center">
               {item.image ? (
                 <img
                   src={item.image}
@@ -52,11 +52,11 @@ export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
               )}
             </div>
             <div className="p-3">
-              <p className="text-sm font-medium text-foreground">
+              <p className="text-foreground text-sm font-medium">
                 {item.title || <span className="text-muted-foreground">Card Title</span>}
               </p>
               {item.description && (
-                <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+                <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
                   {item.description}
                 </p>
               )}

package/src/views/page-builder/block-renderers/CodePreview.tsx

@@ -20,23 +20,23 @@ export function CodePreview({ data, variant = 'embed' }: BlockPreviewProps) {
     )
 
   return (
-    <div className="overflow-hidden rounded-md border border-border">
-      <div className="flex items-center gap-2 border-b border-border bg-card px-3 py-2">
+    <div className="border-border overflow-hidden rounded-md border">
+      <div className="border-border bg-card flex items-center gap-2 border-b px-3 py-2">
         {icon}
-        <span className="text-xs text-muted-foreground">{language || variant}</span>
+        <span className="text-muted-foreground text-xs">{language || variant}</span>
         {sandboxed && (
-          <span className="ml-auto rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+          <span className="bg-muted text-muted-foreground ml-auto rounded px-1.5 py-0.5 text-xs">
             sandboxed
           </span>
         )}
       </div>
       <div className="bg-card p-4">
         {truncated ? (
-          <pre className="overflow-hidden whitespace-pre-wrap font-mono text-xs text-foreground">
+          <pre className="text-foreground overflow-hidden font-mono text-xs whitespace-pre-wrap">
             {truncated}
           </pre>
         ) : (
-          <p className="font-mono text-xs text-muted-foreground italic">
+          <p className="text-muted-foreground font-mono text-xs italic">
             // Code content goes here…
           </p>
         )}

package/src/views/page-builder/block-renderers/FAQPreview.tsx

@@ -29,16 +29,16 @@ export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
     const col2 = placeholderItems.slice(mid)
 
     return (
-      <div className="rounded-md border border-border p-4">
+      <div className="border-border rounded-md border p-4">
         <div className="grid grid-cols-2 gap-4">
           {[col1, col2].map((column, colIdx) => (
             <div key={colIdx} className="flex flex-col gap-3">
               {column.map((item, i) => (
-                <div key={i} className="rounded-md border border-border p-3">
-                  <p className="text-sm font-medium text-foreground">
+                <div key={i} className="border-border rounded-md border p-3">
+                  <p className="text-foreground text-sm font-medium">
                     {item.question || 'Question?'}
                   </p>
-                  <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+                  <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
                     {item.answer || 'Answer text…'}
                   </p>
                 </div>
@@ -52,12 +52,12 @@ export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
 
   if (variant === 'list') {
     return (
-      <div className="rounded-md border border-border p-4">
+      <div className="border-border rounded-md border p-4">
         <div className="flex flex-col gap-3">
           {placeholderItems.map((item, i) => (
-            <div key={i} className="border-b border-border pb-3 last:border-b-0 last:pb-0">
-              <p className="text-sm font-medium text-foreground">{item.question || 'Question?'}</p>
-              <p className="mt-1 text-xs text-muted-foreground line-clamp-2">
+            <div key={i} className="border-border border-b pb-3 last:border-b-0 last:pb-0">
+              <p className="text-foreground text-sm font-medium">{item.question || 'Question?'}</p>
+              <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
                 {item.answer || 'Answer text…'}
               </p>
             </div>
@@ -68,16 +68,16 @@ export function FAQPreview({ data, variant = 'accordion' }: BlockPreviewProps) {
   }
 
   return (
-    <div className="rounded-md border border-border p-4">
+    <div className="border-border rounded-md border p-4">
       <div className="flex flex-col gap-2">
         {placeholderItems.map((item, i) => (
-          <div key={i} className="rounded-md border border-border p-3">
+          <div key={i} className="border-border rounded-md border p-3">
             <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-foreground">{item.question || 'Question?'}</p>
-              <ChevronDown size={14} className="shrink-0 text-muted-foreground" />
+              <p className="text-foreground text-sm font-medium">{item.question || 'Question?'}</p>
+              <ChevronDown size={14} className="text-muted-foreground shrink-0" />
             </div>
             {i === 0 && (
-              <p className="mt-2 text-xs text-muted-foreground">{item.answer || 'Answer text…'}</p>
+              <p className="text-muted-foreground mt-2 text-xs">{item.answer || 'Answer text…'}</p>
             )}
           </div>
         ))}

package/src/views/page-builder/block-renderers/FallbackPreview.tsx

@@ -9,10 +9,10 @@ export interface FallbackPreviewProps {
 
 export function FallbackPreview({ blockType }: FallbackPreviewProps) {
   return (
-    <div className="flex flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border bg-muted/50 p-8">
+    <div className="border-border bg-muted/50 flex flex-col items-center justify-center gap-2 rounded-md border border-dashed p-8">
       <Box size={24} className="text-muted-foreground" />
-      <p className="text-sm font-medium text-muted-foreground">{blockType}</p>
-      <p className="text-xs text-muted-foreground">No preview available</p>
+      <p className="text-muted-foreground text-sm font-medium">{blockType}</p>
+      <p className="text-muted-foreground text-xs">No preview available</p>
     </div>
   )
 }