@actuate-media/cms-admin 0.10.0 → 0.11.0

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

@@ -86,9 +86,9 @@ export function NodeSettings({
           : 'Column'
 
   return (
-    <div className="flex flex-col h-full">
-      <div className="p-4 border-b border-border">
-        <p className="text-sm font-medium text-foreground">{nodeLabel} Settings</p>
+    <div className="flex h-full flex-col">
+      <div className="border-border border-b p-4">
+        <p className="text-foreground text-sm font-medium">{nodeLabel} Settings</p>
       </div>
 
       <div className="flex-1 overflow-y-auto">
@@ -104,14 +104,14 @@ export function NodeSettings({
         </div>
       </div>
 
-      <div className="p-4 border-t border-border space-y-2">
+      <div className="border-border space-y-2 border-t p-4">
         <p className={SECTION_HEADING_CLASS}>Actions</p>
         <div className="flex gap-2">
           <button
             type="button"
             onClick={() => onMoveNodeUp(node.id)}
             aria-label="Move up"
-            className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm bg-background border border-input rounded-md hover:bg-accent transition-colors"
+            className="bg-background border-input hover:bg-accent flex flex-1 items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-sm transition-colors"
           >
             <ArrowUp size={14} />
             Up
@@ -120,7 +120,7 @@ export function NodeSettings({
             type="button"
             onClick={() => onMoveNodeDown(node.id)}
             aria-label="Move down"
-            className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 text-sm bg-background border border-input rounded-md hover:bg-accent transition-colors"
+            className="bg-background border-input hover:bg-accent flex flex-1 items-center justify-center gap-1.5 rounded-md border px-3 py-2 text-sm transition-colors"
           >
             <ArrowDown size={14} />
             Down
@@ -129,7 +129,7 @@ export function NodeSettings({
         <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
@@ -138,10 +138,10 @@ export function NodeSettings({
           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} />
@@ -172,7 +172,7 @@ function SectionFields({
             type="color"
             value={s.background ?? '#ffffff'}
             onChange={(e) => updateSetting('background', 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"
@@ -230,14 +230,14 @@ function SectionFields({
 
       <p className={SECTION_HEADING_CLASS}>Attributes</p>
       <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-foreground">Visibility</label>
+        <label className="text-foreground text-sm font-medium">Visibility</label>
         <SwitchPrimitive.Root
           checked={s.visibility !== 'hidden'}
           onCheckedChange={(checked) => updateSetting('visibility', checked ? 'visible' : 'hidden')}
-          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="Section visibility"
         >
-          <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>
       <div>
@@ -265,7 +265,7 @@ function SectionFields({
         <button
           type="button"
           onClick={() => onAddRow(node.id)}
-          className="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors"
         >
           <Plus size={14} />
           Add Row
@@ -308,7 +308,7 @@ function ContainerFields({
                 type="button"
                 onClick={() => updateSetting('alignment', align)}
                 aria-label={`Align ${align}`}
-                className={`flex-1 flex items-center justify-center py-2 rounded-md border transition-colors ${
+                className={`flex flex-1 items-center justify-center rounded-md border py-2 transition-colors ${
                   s.alignment === align
                     ? 'bg-primary text-primary-foreground border-primary'
                     : 'bg-background border-input hover:bg-accent'
@@ -373,7 +373,7 @@ function RowFields({
                 type="button"
                 onClick={() => updateSetting('verticalAlign', align)}
                 aria-label={`Align ${align}`}
-                className={`flex-1 flex items-center justify-center py-2 rounded-md border text-xs transition-colors ${
+                className={`flex flex-1 items-center justify-center rounded-md border py-2 text-xs transition-colors ${
                   s.verticalAlign === align
                     ? 'bg-primary text-primary-foreground border-primary'
                     : 'bg-background border-input hover:bg-accent'
@@ -388,25 +388,25 @@ function RowFields({
 
       <p className={SECTION_HEADING_CLASS}>Mobile</p>
       <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-foreground">Reverse on Mobile</label>
+        <label className="text-foreground text-sm font-medium">Reverse on Mobile</label>
         <SwitchPrimitive.Root
           checked={!!s.reverseOnMobile}
           onCheckedChange={(checked) => updateSetting('reverseOnMobile', 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="Reverse column order on mobile"
         >
-          <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>
       <div className="flex items-center justify-between">
-        <label className="text-sm font-medium text-foreground">Wrap on Mobile</label>
+        <label className="text-foreground text-sm font-medium">Wrap on Mobile</label>
         <SwitchPrimitive.Root
           checked={!!s.wrapOnMobile}
           onCheckedChange={(checked) => updateSetting('wrapOnMobile', 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="Wrap columns on mobile"
         >
-          <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>
 
@@ -417,14 +417,14 @@ function RowFields({
             key={preset.label}
             type="button"
             onClick={() => updateSetting('__columnPreset', preset.widths)}
-            className="px-2 py-2 rounded-md border border-input bg-background hover:bg-accent transition-colors"
+            className="border-input bg-background hover:bg-accent rounded-md border px-2 py-2 transition-colors"
           >
-            <div className="flex gap-0.5 h-4">
+            <div className="flex h-4 gap-0.5">
               {preset.widths.map((w, i) => (
                 <div key={i} className="bg-muted-foreground/30 rounded-sm" style={{ flex: w }} />
               ))}
             </div>
-            <p className="text-xs text-muted-foreground mt-1 text-center">
+            <p className="text-muted-foreground mt-1 text-center text-xs">
               {preset.widths.join(' | ')}
             </p>
           </button>
@@ -470,7 +470,7 @@ function ColumnFields({
                 type="button"
                 onClick={() => updateSetting('verticalAlign', align)}
                 aria-label={`Align ${align}`}
-                className={`flex-1 flex items-center justify-center py-2 rounded-md border transition-colors ${
+                className={`flex flex-1 items-center justify-center rounded-md border py-2 transition-colors ${
                   s.verticalAlign === align
                     ? 'bg-primary text-primary-foreground border-primary'
                     : 'bg-background border-input hover:bg-accent'
@@ -499,7 +499,7 @@ function ColumnFields({
             type="color"
             value={s.background ?? '#ffffff'}
             onChange={(e) => updateSetting('background', 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"

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

@@ -184,20 +184,20 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate }:
 
   if (loading) {
     return (
-      <div className="h-full flex items-center justify-center bg-background">
-        <Loader2 className="animate-spin text-muted-foreground" size={24} />
+      <div className="bg-background flex h-full items-center justify-center">
+        <Loader2 className="text-muted-foreground animate-spin" size={24} />
       </div>
     )
   }
 
   if (loadError) {
     return (
-      <div className="h-full flex items-center justify-center bg-background">
-        <div className="flex items-center gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-4 max-w-md">
+      <div className="bg-background flex h-full items-center justify-center">
+        <div className="border-destructive/30 bg-destructive/5 flex max-w-md items-center gap-3 rounded-lg border p-4">
           <AlertTriangle className="text-destructive shrink-0" size={20} />
           <div>
-            <p className="text-sm font-medium text-foreground">Failed to load page</p>
-            <p className="text-sm text-muted-foreground mt-1">{loadError}</p>
+            <p className="text-foreground text-sm font-medium">Failed to load page</p>
+            <p className="text-muted-foreground mt-1 text-sm">{loadError}</p>
           </div>
         </div>
       </div>
@@ -226,7 +226,7 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate }:
 
   return (
     <ErrorBoundary>
-      <div className="h-full flex flex-col bg-background overflow-hidden">
+      <div className="bg-background flex h-full flex-col overflow-hidden">
         <BuilderToolbar
           collectionSlug={collectionSlug}
           pageSettings={pageSettings}
@@ -246,15 +246,15 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate }:
           onOpenAI={() => setAiDialogOpen(true)}
         />
 
-        <div className="flex-1 flex overflow-hidden">
+        <div className="flex flex-1 overflow-hidden">
           {/* Canvas area */}
-          <div className="flex-1 overflow-auto bg-muted">
+          <div className="bg-muted flex-1 overflow-auto">
             <div
               className="mx-auto h-full max-w-full transition-all duration-200"
               style={{ width: canvasWidth }}
             >
               <div
-                className={`h-full bg-background page-builder-canvas-shell ${isConstrained ? 'shadow-lg border-x border-border' : ''}`}
+                className={`bg-background page-builder-canvas-shell h-full ${isConstrained ? 'border-border border-x shadow-lg' : ''}`}
                 style={canvasShellStyle}
               >
                 <BuilderCanvas
@@ -269,7 +269,7 @@ export function PageBuilder({ documentId, collectionSlug, config, onNavigate }:
           </div>
 
           {/* Context panel */}
-          <div className="w-[35%] min-w-[280px] max-w-[420px] border-l border-border bg-card overflow-y-auto">
+          <div className="border-border bg-card w-[35%] max-w-[420px] min-w-[280px] overflow-y-auto border-l">
             <ContextPanel
               activeTab={activeTab}
               onTabChange={setActiveTab}

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

@@ -79,8 +79,8 @@ export function PageSettingsEditor({ settings, onChange }: PageSettingsProps) {
       <p className={SECTION_HEADING_CLASS}>SEO</p>
 
       <div>
-        <div className="flex items-center justify-between mb-1">
-          <label className="text-sm font-medium text-foreground">Meta Title</label>
+        <div className="mb-1 flex items-center justify-between">
+          <label className="text-foreground text-sm font-medium">Meta Title</label>
           <span
             className={`text-xs ${
               metaTitleLength > 60 ? 'text-destructive' : 'text-muted-foreground'
@@ -100,8 +100,8 @@ export function PageSettingsEditor({ settings, onChange }: PageSettingsProps) {
       </div>
 
       <div>
-        <div className="flex items-center justify-between mb-1">
-          <label className="text-sm font-medium text-foreground">Meta Description</label>
+        <div className="mb-1 flex items-center justify-between">
+          <label className="text-foreground text-sm font-medium">Meta Description</label>
           <span
             className={`text-xs ${
               metaDescLength > 160 ? 'text-destructive' : 'text-muted-foreground'

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

@@ -23,7 +23,7 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center p-4" role="status" aria-live="polite">
-        <Loader2 className="h-6 w-6 animate-spin text-primary" />
+        <Loader2 className="text-primary h-6 w-6 animate-spin" />
         <span className="sr-only">Loading page templates</span>
       </div>
     )
@@ -32,13 +32,13 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
   return (
     <div className="p-4 pr-8">
       {error && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-border bg-card p-3">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-muted-foreground" />
-          <span className="flex-1 text-sm text-foreground">{error}</span>
+        <div className="border-border bg-card mb-4 flex items-center gap-3 rounded-lg border p-3">
+          <AlertTriangle className="text-muted-foreground h-5 w-5 shrink-0" />
+          <span className="text-foreground flex-1 text-sm">{error}</span>
           <button
             type="button"
             onClick={refetch}
-            className="rounded-md border border-border px-3 py-1 text-sm text-foreground hover:bg-accent"
+            className="border-border text-foreground hover:bg-accent rounded-md border px-3 py-1 text-sm"
           >
             Retry
           </button>
@@ -47,15 +47,15 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="mb-1 text-2xl font-medium text-foreground">Page Templates</h1>
-          <p className="text-sm text-muted-foreground">
+          <h1 className="text-foreground mb-1 text-2xl font-medium">Page Templates</h1>
+          <p className="text-muted-foreground text-sm">
             {templates.length} saved template{templates.length === 1 ? '' : 's'}
           </p>
         </div>
         <button
           type="button"
           onClick={refetch}
-          className="inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-foreground hover:bg-accent"
+          className="border-border text-foreground hover:bg-accent inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium"
         >
           <RefreshCw className="h-4 w-4" />
           Refresh
@@ -63,16 +63,16 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
       </div>
 
       {templates.length === 0 ? (
-        <div className="rounded-lg border border-border bg-card p-8 text-center">
-          <Layers className="mx-auto mb-3 h-8 w-8 text-muted-foreground" />
-          <h2 className="mb-1 text-lg font-medium text-foreground">No page templates yet</h2>
-          <p className="mb-4 text-sm text-muted-foreground">
+        <div className="border-border bg-card rounded-lg border p-8 text-center">
+          <Layers className="text-muted-foreground mx-auto mb-3 h-8 w-8" />
+          <h2 className="text-foreground mb-1 text-lg font-medium">No page templates yet</h2>
+          <p className="text-muted-foreground mb-4 text-sm">
             Built-in templates are seeded by the CMS when the templates API is available.
           </p>
           <button
             type="button"
             onClick={() => onNavigate?.('/saved-sections')}
-            className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+            className="bg-primary text-primary-foreground rounded-md px-4 py-2 text-sm font-medium hover:opacity-90"
           >
             View Saved Sections
           </button>
@@ -80,23 +80,23 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
       ) : (
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
           {templates.map((template) => (
-            <div key={template.id} className="rounded-lg border border-border bg-card p-4">
+            <div key={template.id} className="border-border bg-card rounded-lg border p-4">
               <div className="mb-3 flex items-start justify-between gap-3">
                 <div>
-                  <h2 className="text-base font-medium text-foreground">
+                  <h2 className="text-foreground text-base font-medium">
                     {template.name ?? 'Untitled template'}
                   </h2>
-                  <p className="mt-1 text-sm text-muted-foreground">
+                  <p className="text-muted-foreground mt-1 text-sm">
                     {template.description ?? 'No description provided.'}
                   </p>
                 </div>
                 {template.builtIn && (
-                  <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                  <span className="bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs">
                     Built-in
                   </span>
                 )}
               </div>
-              <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <div className="text-muted-foreground flex items-center justify-between text-sm">
                 <span>{template.category ?? 'content'}</span>
                 <span>
                   {template.updatedAt ? new Date(template.updatedAt).toLocaleDateString() : ''}

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

@@ -54,11 +54,11 @@ function getScoreLabel(score: number): string {
 function StatusIcon({ status }: { status: BuilderSEOCheck['status'] }) {
   switch (status) {
     case 'good':
-      return <CheckCircle2 size={14} className="text-green-500 shrink-0" />
+      return <CheckCircle2 size={14} className="shrink-0 text-green-500" />
     case 'warning':
-      return <AlertCircle size={14} className="text-amber-500 shrink-0" />
+      return <AlertCircle size={14} className="shrink-0 text-amber-500" />
     case 'error':
-      return <XCircle size={14} className="text-red-500 shrink-0" />
+      return <XCircle size={14} className="shrink-0 text-red-500" />
   }
 }
 
@@ -110,15 +110,15 @@ function ScoreSummary({ checks }: { checks: BuilderSEOCheck[] }) {
     <div className="flex flex-col gap-1">
       <div className="flex items-center gap-1.5">
         <CheckCircle2 size={12} className="text-green-500" />
-        <span className="text-xs text-muted-foreground">{passed} passed</span>
+        <span className="text-muted-foreground text-xs">{passed} passed</span>
       </div>
       <div className="flex items-center gap-1.5">
         <AlertCircle size={12} className="text-amber-500" />
-        <span className="text-xs text-muted-foreground">{warnings} warnings</span>
+        <span className="text-muted-foreground text-xs">{warnings} warnings</span>
       </div>
       <div className="flex items-center gap-1.5">
         <XCircle size={12} className="text-red-500" />
-        <span className="text-xs text-muted-foreground">{errors} issues</span>
+        <span className="text-muted-foreground text-xs">{errors} issues</span>
       </div>
     </div>
   )
@@ -138,16 +138,16 @@ function CollapsibleSection({
   children: React.ReactNode
 }) {
   return (
-    <div className="border-b border-border last:border-b-0">
+    <div className="border-border border-b last:border-b-0">
       <button
         type="button"
-        className="w-full text-left px-4 py-3 flex items-center justify-between hover:bg-muted/50 transition-colors"
+        className="hover:bg-muted/50 flex w-full items-center justify-between px-4 py-3 text-left transition-colors"
         onClick={onToggle}
         aria-expanded={expanded}
       >
         <div className="flex items-center gap-2">
           <Icon size={14} className="text-muted-foreground" />
-          <span className="text-xs font-medium text-foreground">{title}</span>
+          <span className="text-foreground text-xs font-medium">{title}</span>
         </div>
         {expanded ? (
           <ChevronUp size={14} className="text-muted-foreground" />
@@ -167,8 +167,8 @@ function SEOChecksList({ checks }: { checks: BuilderSEOCheck[] }) {
         <div key={check.id} className="flex items-start gap-2">
           <StatusIcon status={check.status} />
           <div className="flex flex-col">
-            <span className="text-xs font-medium text-foreground">{check.label}</span>
-            <span className="text-xs text-muted-foreground">{check.detail}</span>
+            <span className="text-foreground text-xs font-medium">{check.label}</span>
+            <span className="text-muted-foreground text-xs">{check.detail}</span>
           </div>
         </div>
       ))}
@@ -186,48 +186,48 @@ function ReadabilityGrid({ readability }: { readability: BuilderReadabilityResul
 
   return (
     <div className="grid grid-cols-2 gap-3">
-      <div className="bg-muted/50 rounded-md p-3 flex flex-col gap-1">
+      <div className="bg-muted/50 flex flex-col gap-1 rounded-md p-3">
         <div className="flex items-center gap-1.5">
           <BarChart3 size={12} className="text-muted-foreground" />
-          <span className="text-xs text-muted-foreground">Flesch Score</span>
+          <span className="text-muted-foreground text-xs">Flesch Score</span>
         </div>
         <span className={`text-sm font-medium ${getScoreColor(readability.fleschScore)}`}>
           {readability.fleschScore}
         </span>
-        <span className="text-xs text-muted-foreground">{fleschLabel}</span>
+        <span className="text-muted-foreground text-xs">{fleschLabel}</span>
       </div>
 
-      <div className="bg-muted/50 rounded-md p-3 flex flex-col gap-1">
+      <div className="bg-muted/50 flex flex-col gap-1 rounded-md p-3">
         <div className="flex items-center gap-1.5">
           <Type size={12} className="text-muted-foreground" />
-          <span className="text-xs text-muted-foreground">Word Count</span>
+          <span className="text-muted-foreground text-xs">Word Count</span>
         </div>
-        <span className="text-sm font-medium text-foreground">{readability.wordCount}</span>
-        <span className="text-xs text-muted-foreground">
+        <span className="text-foreground text-sm font-medium">{readability.wordCount}</span>
+        <span className="text-muted-foreground text-xs">
           {readability.wordCount >= 300 ? 'Good length' : 'Short'}
         </span>
       </div>
 
-      <div className="bg-muted/50 rounded-md p-3 flex flex-col gap-1">
+      <div className="bg-muted/50 flex flex-col gap-1 rounded-md p-3">
         <div className="flex items-center gap-1.5">
           <FileText size={12} className="text-muted-foreground" />
-          <span className="text-xs text-muted-foreground">Avg Sentence</span>
+          <span className="text-muted-foreground text-xs">Avg Sentence</span>
         </div>
-        <span className="text-sm font-medium text-foreground">
+        <span className="text-foreground text-sm font-medium">
           {readability.avgSentenceLength} words
         </span>
-        <span className="text-xs text-muted-foreground">
+        <span className="text-muted-foreground text-xs">
           {readability.avgSentenceLength <= 20 ? 'Good' : 'Long'}
         </span>
       </div>
 
-      <div className="bg-muted/50 rounded-md p-3 flex flex-col gap-1">
+      <div className="bg-muted/50 flex flex-col gap-1 rounded-md p-3">
         <div className="flex items-center gap-1.5">
           <Clock size={12} className="text-muted-foreground" />
-          <span className="text-xs text-muted-foreground">Reading Time</span>
+          <span className="text-muted-foreground text-xs">Reading Time</span>
         </div>
-        <span className="text-sm font-medium text-foreground">{readability.readingTime} min</span>
-        <span className="text-xs text-muted-foreground">~{readability.wordCount} words</span>
+        <span className="text-foreground text-sm font-medium">{readability.readingTime} min</span>
+        <span className="text-muted-foreground text-xs">~{readability.wordCount} words</span>
       </div>
     </div>
   )
@@ -240,8 +240,8 @@ function PerBlockHints({ hints }: { hints: BuilderSEOCheck[] }) {
         <div key={`${hint.id}-${index}`} className="flex items-start gap-2">
           <StatusIcon status={hint.status} />
           <div className="flex flex-col">
-            <span className="text-xs font-medium text-foreground">{hint.label}</span>
-            <span className="text-xs text-muted-foreground">{hint.detail}</span>
+            <span className="text-foreground text-xs font-medium">{hint.label}</span>
+            <span className="text-muted-foreground text-xs">{hint.detail}</span>
           </div>
         </div>
       ))}
@@ -263,7 +263,7 @@ function BasicSEOFields({
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-1.5">
         <div className="flex items-center justify-between">
-          <label className="text-xs font-medium text-foreground">Meta Title</label>
+          <label className="text-foreground text-xs font-medium">Meta Title</label>
           <span
             className={`text-xs ${metaTitleLength > 60 ? 'text-red-500' : metaTitleLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
           >
@@ -275,13 +275,13 @@ function BasicSEOFields({
           value={pageSettings.metaTitle || ''}
           onChange={(e) => onPageSettingsChange({ metaTitle: e.target.value })}
           placeholder="Page title for search engines"
-          className="w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+          className="bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
         />
       </div>
 
       <div className="flex flex-col gap-1.5">
         <div className="flex items-center justify-between">
-          <label className="text-xs font-medium text-foreground">Meta Description</label>
+          <label className="text-foreground text-xs font-medium">Meta Description</label>
           <span
             className={`text-xs ${metaDescLength > 160 ? 'text-red-500' : metaDescLength > 0 ? 'text-muted-foreground' : 'text-muted-foreground'}`}
           >
@@ -293,18 +293,18 @@ function BasicSEOFields({
           onChange={(e) => onPageSettingsChange({ metaDescription: e.target.value })}
           placeholder="Brief description of the page content"
           rows={3}
-          className="w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary resize-none"
+          className="bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full resize-none rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
         />
       </div>
 
       <div className="flex flex-col gap-1.5">
-        <label className="text-xs font-medium text-foreground">Focus Keyphrase</label>
+        <label className="text-foreground text-xs font-medium">Focus Keyphrase</label>
         <input
           type="text"
           value={pageSettings.focusKeyphrase || ''}
           onChange={(e) => onPageSettingsChange({ focusKeyphrase: e.target.value })}
           placeholder="Primary keyword or phrase"
-          className="w-full px-3 py-2 text-sm bg-input-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+          className="bg-input-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
         />
       </div>
     </div>
@@ -317,12 +317,12 @@ function SearchPreview({ pageSettings }: { pageSettings: PageSettings }) {
   const slug = pageSettings.slug || 'page'
 
   return (
-    <div className="bg-background rounded-md border border-border p-4">
-      <p className="text-xs text-muted-foreground mb-2">Google Search Preview</p>
+    <div className="bg-background border-border rounded-md border p-4">
+      <p className="text-muted-foreground mb-2 text-xs">Google Search Preview</p>
       <div className="flex flex-col gap-1">
-        <p className="text-sm text-primary truncate">{title}</p>
-        <p className="text-xs text-green-600 truncate">example.com/{slug}</p>
-        <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+        <p className="text-primary truncate text-sm">{title}</p>
+        <p className="truncate text-xs text-green-600">example.com/{slug}</p>
+        <p className="text-muted-foreground line-clamp-2 text-xs">{description}</p>
       </div>
     </div>
   )
@@ -333,22 +333,22 @@ function SocialPreview({ pageSettings }: { pageSettings: PageSettings }) {
   const description = pageSettings.metaDescription || 'No description set'
 
   return (
-    <div className="bg-background rounded-md border border-border overflow-hidden">
-      <p className="text-xs text-muted-foreground px-4 pt-3 pb-2">Open Graph Preview</p>
+    <div className="bg-background border-border overflow-hidden rounded-md border">
+      <p className="text-muted-foreground px-4 pt-3 pb-2 text-xs">Open Graph Preview</p>
       {pageSettings.ogImage && (
-        <div className="w-full h-32 bg-muted flex items-center justify-center overflow-hidden">
-          <img src={pageSettings.ogImage} alt="OG preview" className="w-full h-full object-cover" />
+        <div className="bg-muted flex h-32 w-full items-center justify-center overflow-hidden">
+          <img src={pageSettings.ogImage} alt="OG preview" className="h-full w-full object-cover" />
         </div>
       )}
       {!pageSettings.ogImage && (
-        <div className="w-full h-32 bg-muted flex items-center justify-center">
+        <div className="bg-muted flex h-32 w-full items-center justify-center">
           <Globe size={24} className="text-muted-foreground" />
         </div>
       )}
-      <div className="p-3 flex flex-col gap-1">
-        <p className="text-xs text-muted-foreground uppercase">example.com</p>
-        <p className="text-sm font-medium text-foreground truncate">{title}</p>
-        <p className="text-xs text-muted-foreground line-clamp-2">{description}</p>
+      <div className="flex flex-col gap-1 p-3">
+        <p className="text-muted-foreground text-xs uppercase">example.com</p>
+        <p className="text-foreground truncate text-sm font-medium">{title}</p>
+        <p className="text-muted-foreground line-clamp-2 text-xs">{description}</p>
       </div>
     </div>
   )
@@ -380,10 +380,10 @@ export function BuilderSEOPanel({
 
   if (!tree.children || tree.children.length === 0) {
     return (
-      <div className="p-6 flex flex-col items-center justify-center text-center min-h-[200px]">
+      <div className="flex min-h-[200px] flex-col items-center justify-center p-6 text-center">
         <Search size={32} className="text-muted-foreground mb-3" />
-        <p className="text-sm font-medium text-foreground mb-1">SEO Analysis</p>
-        <p className="text-xs text-muted-foreground">
+        <p className="text-foreground mb-1 text-sm font-medium">SEO Analysis</p>
+        <p className="text-muted-foreground text-xs">
           Add content to your page to see SEO analysis
         </p>
       </div>
@@ -392,10 +392,10 @@ export function BuilderSEOPanel({
 
   return (
     <div className="flex flex-col">
-      <div className="flex items-center gap-4 px-4 py-5 border-b border-border">
+      <div className="border-border flex items-center gap-4 border-b px-4 py-5">
         <ScoreRing score={analysis.score} />
         <div className="flex flex-col gap-1">
-          <span className="text-xs font-medium text-foreground">
+          <span className="text-foreground text-xs font-medium">
             {getScoreLabel(analysis.score)}
           </span>
           <ScoreSummary checks={analysis.checks} />