@actuate-media/cms-admin 0.9.0 → 0.11.0

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

@@ -127,9 +127,9 @@ export function BlockPicker({ open, onClose, onSelect }: BlockPickerProps) {
   return (
     <Dialog.Root open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
       <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50 motion-safe:animate-in motion-safe:fade-in-0" />
+        <Dialog.Overlay className="motion-safe:animate-in motion-safe:fade-in-0 fixed inset-0 z-50 bg-black/50" />
         <Dialog.Content
-          className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-card rounded-xl shadow-2xl border border-border z-50 w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col"
+          className="bg-card border-border fixed top-1/2 left-1/2 z-50 flex max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border shadow-2xl"
           aria-describedby={undefined}
           onEscapeKeyDown={() => {
             if (selectedBlock) {
@@ -182,13 +182,13 @@ function BlockTypeGrid({
   onKeyDown,
 }: BlockTypeGridProps) {
   return (
-    <div className="flex flex-col h-full" onKeyDown={onKeyDown}>
+    <div className="flex h-full flex-col" onKeyDown={onKeyDown}>
       <div className="flex items-center justify-between gap-3 px-5 pt-5 pb-3">
-        <Dialog.Title className="text-lg font-medium text-foreground">Add Block</Dialog.Title>
+        <Dialog.Title className="text-foreground text-lg font-medium">Add Block</Dialog.Title>
         <Dialog.Close asChild>
           <button
             type="button"
-            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} />
@@ -199,7 +199,7 @@ function BlockTypeGrid({
       <div className="px-5 pb-3">
         <div className="relative">
           <Search
-            className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none"
+            className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2"
             size={16}
           />
           <input
@@ -208,7 +208,7 @@ function BlockTypeGrid({
             placeholder="Search blocks..."
             value={search}
             onChange={(e) => onSearchChange(e.target.value)}
-            className="w-full pl-9 pr-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 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
             aria-label="Search block types"
           />
         </div>
@@ -218,7 +218,7 @@ function BlockTypeGrid({
         {filteredBlocks.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-12 text-center">
             <Search size={24} className="text-muted-foreground mb-2" />
-            <p className="text-sm text-muted-foreground">No blocks match &ldquo;{search}&rdquo;</p>
+            <p className="text-muted-foreground text-sm">No blocks match &ldquo;{search}&rdquo;</p>
           </div>
         ) : (
           <div className="grid grid-cols-2 gap-3" role="list" aria-label="Available block types">
@@ -230,15 +230,15 @@ function BlockTypeGrid({
                   type="button"
                   role="listitem"
                   onClick={() => onBlockClick(block)}
-                  className="p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex items-start gap-3 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 items-start gap-3 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
                 >
-                  <div className="shrink-0 w-9 h-9 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-9 w-9 shrink-0 items-center justify-center rounded-md transition-colors">
                     <Icon size={18} />
                   </div>
                   <div className="min-w-0">
-                    <p className="text-sm font-medium text-foreground truncate">{block.label}</p>
+                    <p className="text-foreground truncate text-sm font-medium">{block.label}</p>
                     {block.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">
                         {block.description}
                       </p>
                     )}
@@ -271,24 +271,24 @@ function VariantView({
   const Icon = resolveIcon(block.icon)
 
   return (
-    <div className="flex flex-col h-full" onKeyDown={onKeyDown}>
+    <div className="flex h-full flex-col" onKeyDown={onKeyDown}>
       <div className="flex items-center gap-3 px-5 pt-5 pb-3">
         <button
           type="button"
           onClick={onBack}
-          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="Back to block types"
         >
           <ArrowLeft size={18} />
         </button>
-        <div className="flex items-center gap-2 min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
           <Icon size={18} className="text-foreground shrink-0" />
-          <h2 className="text-lg font-medium text-foreground truncate">{block.label}</h2>
+          <h2 className="text-foreground truncate text-lg font-medium">{block.label}</h2>
         </div>
       </div>
 
       {block.description && (
-        <p className="text-sm text-muted-foreground px-5 pb-3">{block.description}</p>
+        <p className="text-muted-foreground px-5 pb-3 text-sm">{block.description}</p>
       )}
 
       <div className="flex-1 overflow-y-auto px-5 pb-5" ref={variantListRef}>
@@ -300,19 +300,19 @@ function VariantView({
               role="listitem"
               data-variant={variant.name}
               onClick={() => onVariantClick(variant)}
-              className="w-full p-4 border border-border rounded-lg hover:border-primary cursor-pointer transition-colors bg-card text-left flex items-center gap-3 group focus:outline-none focus:ring-2 focus:ring-ring"
+              className="border-border hover:border-primary bg-card group focus:ring-ring flex w-full cursor-pointer items-center gap-3 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none"
             >
-              <div className="flex-1 min-w-0">
+              <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
-                  <p className="text-sm font-medium text-foreground">{variant.label}</p>
+                  <p className="text-foreground text-sm font-medium">{variant.label}</p>
                   {index === 0 && (
-                    <span className="inline-flex items-center gap-1 text-xs text-primary bg-primary/10 px-1.5 py-0.5 rounded">
+                    <span className="text-primary bg-primary/10 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs">
                       <Check size={10} />
                       Default
                     </span>
                   )}
                 </div>
-                <p className="text-xs text-muted-foreground mt-0.5">{variant.description}</p>
+                <p className="text-muted-foreground mt-0.5 text-xs">{variant.description}</p>
               </div>
             </button>
           ))}

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

@@ -25,14 +25,14 @@ export function BottomBar({
 }: BottomBarProps) {
   return (
     <div
-      className="h-10 bg-card border-t border-border flex items-center px-4 gap-4 shrink-0"
+      className="bg-card border-border flex h-10 shrink-0 items-center gap-4 border-t px-4"
       role="toolbar"
       aria-label="Builder actions"
     >
       {/* Add Section */}
       <button
         onClick={onAddSection}
-        className="flex items-center gap-1.5 px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 px-3 py-2 text-sm transition-colors"
         aria-label="Add a new section"
       >
         <Plus size={14} />
@@ -40,27 +40,27 @@ export function BottomBar({
       </button>
 
       {/* Divider */}
-      <div className="w-px h-5 bg-border" />
+      <div className="bg-border h-5 w-px" />
 
       {/* Grid overlay toggle */}
-      <label className="flex items-center gap-2 cursor-pointer">
+      <label className="flex cursor-pointer items-center gap-2">
         <Grid3X3 size={14} className="text-muted-foreground" />
         <Switch.Root
           checked={showGridOverlay}
           onCheckedChange={onToggleGrid}
-          className="w-8 h-[18px] bg-input-background rounded-full relative data-[state=checked]:bg-primary transition-colors"
+          className="bg-input-background data-[state=checked]:bg-primary relative h-[18px] w-8 rounded-full transition-colors"
           aria-label="Toggle grid overlay"
         >
-          <Switch.Thumb className="block w-3.5 h-3.5 bg-background rounded-full shadow-sm transition-transform translate-x-0.5 data-[state=checked]:translate-x-[14px]" />
+          <Switch.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-[14px]" />
         </Switch.Root>
-        <span className="text-xs text-muted-foreground">Grid</span>
+        <span className="text-muted-foreground text-xs">Grid</span>
       </label>
 
       {/* Spacer */}
       <div className="flex-1" />
 
       {/* Zoom / device width display */}
-      <span className="text-xs text-muted-foreground tabular-nums">
+      <span className="text-muted-foreground text-xs tabular-nums">
         {DEVICE_LABELS[deviceMode]}
       </span>
     </div>

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

@@ -59,14 +59,14 @@ export function BuilderToolbar({
 
   return (
     <div
-      className="h-14 bg-card border-b border-border flex items-center px-4 gap-3 shrink-0"
+      className="bg-card border-border flex h-14 shrink-0 items-center gap-3 border-b px-4"
       role="toolbar"
       aria-label="Page builder toolbar"
     >
       {/* Back button */}
       <button
         onClick={() => onNavigate(`/collections/${collectionSlug}`)}
-        className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm transition-colors"
         aria-label={`Back to ${collectionLabel}`}
       >
         <ChevronLeft size={16} />
@@ -74,7 +74,7 @@ export function BuilderToolbar({
       </button>
 
       {/* Divider */}
-      <div className="w-px h-6 bg-border" />
+      <div className="bg-border h-6 w-px" />
 
       {/* Page title */}
       <input
@@ -82,13 +82,13 @@ export function BuilderToolbar({
         value={pageSettings.title}
         onChange={(e) => onTitleChange(e.target.value)}
         placeholder="Untitled Page"
-        className="flex-1 min-w-0 text-sm font-medium text-foreground bg-transparent border-none outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm placeholder:text-muted-foreground"
+        className="text-foreground focus-visible:ring-ring placeholder:text-muted-foreground min-w-0 flex-1 rounded-sm border-none bg-transparent text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
         aria-label="Page title"
       />
 
       {/* Status badge */}
       <span
-        className={`text-xs font-medium px-2 py-0.5 rounded-md whitespace-nowrap ${STATUS_STYLES[status] ?? STATUS_STYLES.DRAFT}`}
+        className={`rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap ${STATUS_STYLES[status] ?? STATUS_STYLES.DRAFT}`}
       >
         {status}
       </span>
@@ -96,21 +96,21 @@ export function BuilderToolbar({
       {/* Unsaved indicator */}
       {dirty && !saving && (
         <span
-          className="w-2 h-2 rounded-full bg-destructive shrink-0"
+          className="bg-destructive h-2 w-2 shrink-0 rounded-full"
           title="Unsaved changes"
           aria-label="Unsaved changes"
         />
       )}
 
       {/* Divider */}
-      <div className="w-px h-6 bg-border" />
+      <div className="bg-border h-6 w-px" />
 
       {/* Undo / Redo */}
       <div className="flex items-center gap-1">
         <button
           onClick={onUndo}
           disabled={!canUndo}
-          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:pointer-events-none transition-colors"
+          className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1.5 transition-colors disabled:pointer-events-none disabled:opacity-30"
           aria-label="Undo"
         >
           <Undo2 size={16} />
@@ -118,7 +118,7 @@ export function BuilderToolbar({
         <button
           onClick={onRedo}
           disabled={!canRedo}
-          className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:pointer-events-none transition-colors"
+          className="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1.5 transition-colors disabled:pointer-events-none disabled:opacity-30"
           aria-label="Redo"
         >
           <Redo2 size={16} />
@@ -126,10 +126,10 @@ export function BuilderToolbar({
       </div>
 
       {/* Divider */}
-      <div className="w-px h-6 bg-border" />
+      <div className="bg-border h-6 w-px" />
 
       {/* Device toggle */}
-      <div className="flex items-center gap-0.5 bg-muted rounded-md p-0.5">
+      <div className="bg-muted flex items-center gap-0.5 rounded-md p-0.5">
         <DeviceButton
           active={deviceMode === 'desktop'}
           onClick={() => onDeviceMode('desktop')}
@@ -154,20 +154,20 @@ export function BuilderToolbar({
       </div>
 
       {/* Divider */}
-      <div className="w-px h-6 bg-border" />
+      <div className="bg-border h-6 w-px" />
 
       {/* AI Generate */}
       {onOpenAI && (
         <>
           <button
             onClick={onOpenAI}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium text-primary bg-primary/10 rounded-md hover:bg-primary/20 transition-colors"
+            className="text-primary bg-primary/10 hover:bg-primary/20 flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors"
             aria-label="Generate page with AI"
           >
             <Sparkles size={14} />
             <span className="hidden sm:inline">AI</span>
           </button>
-          <div className="w-px h-6 bg-border" />
+          <div className="bg-border h-6 w-px" />
         </>
       )}
 
@@ -176,7 +176,7 @@ export function BuilderToolbar({
         <button
           onClick={onSave}
           disabled={saving || !dirty}
-          className="bg-muted text-muted-foreground rounded-md px-3 py-1.5 text-sm font-medium hover:bg-muted/80 disabled:opacity-50 disabled:pointer-events-none transition-colors flex items-center gap-1.5"
+          className="bg-muted text-muted-foreground hover:bg-muted/80 flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50"
         >
           {saving && <Loader2 size={14} className="animate-spin" />}
           {saving ? 'Saving...' : 'Save'}
@@ -184,7 +184,7 @@ export function BuilderToolbar({
         <button
           onClick={onPublish}
           disabled={saving}
-          className="bg-primary text-primary-foreground rounded-md px-3 py-1.5 text-sm font-medium hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none transition-colors"
+          className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50"
         >
           Publish
         </button>
@@ -207,7 +207,7 @@ function DeviceButton({
   return (
     <button
       onClick={onClick}
-      className={`p-1.5 rounded-md transition-colors ${
+      className={`rounded-md p-1.5 transition-colors ${
         active
           ? 'bg-background text-foreground shadow-sm'
           : 'text-muted-foreground hover:text-foreground'

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

@@ -72,19 +72,19 @@ export function ContextPanel({
   }, [activeTab, availableTabs, selectedNode])
 
   return (
-    <div className="w-full h-full bg-card overflow-y-auto">
+    <div className="bg-card h-full w-full overflow-y-auto">
       <Tabs.Root
         value={effectiveTab}
         onValueChange={(value) => onTabChange(value as ContextPanelProps['activeTab'])}
       >
-        <Tabs.List className="flex border-b border-border bg-muted/30">
+        <Tabs.List className="border-border bg-muted/30 flex border-b">
           {availableTabs.map((tab) => {
             const Icon = tab.icon
             return (
               <Tabs.Trigger
                 key={tab.value}
                 value={tab.value}
-                className="flex-1 flex items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-background"
+                className="text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary data-[state=active]:bg-background flex flex-1 items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium transition-colors data-[state=active]:border-b-2"
               >
                 <Icon size={14} />
                 <span>{tab.label}</span>

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

@@ -53,11 +53,11 @@ function getRingStrokeColor(score: number): string {
 function StatusIcon({ status }: { status: BuilderDesignCheck['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" />
   }
 }
 
@@ -69,7 +69,7 @@ function SeverityBadge({ severity }: { severity: DesignSuggestion['severity'] })
   }
 
   return (
-    <span className={`inline-block px-1.5 py-0.5 rounded text-xs font-medium ${classes[severity]}`}>
+    <span className={`inline-block rounded px-1.5 py-0.5 text-xs font-medium ${classes[severity]}`}>
       {severity}
     </span>
   )
@@ -112,7 +112,7 @@ function ScoreRing({ score }: { score: number }) {
           <span className={`text-lg font-medium ${getScoreColor(score, 100)}`}>{score}</span>
         </div>
       </div>
-      <span className="text-xs text-muted-foreground">{getScoreLabel(score)}</span>
+      <span className="text-muted-foreground text-xs">{getScoreLabel(score)}</span>
     </div>
   )
 }
@@ -129,17 +129,17 @@ function CategoryRow({
   const percentage = category.maxScore > 0 ? (category.score / category.maxScore) * 100 : 0
 
   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 flex-col gap-2 hover:bg-muted/50 transition-colors"
+        className="hover:bg-muted/50 flex w-full flex-col gap-2 px-4 py-3 text-left transition-colors"
         onClick={onToggle}
         aria-expanded={expanded}
       >
         <div className="flex items-center justify-between">
-          <span className="text-xs font-medium text-foreground">{category.label}</span>
+          <span className="text-foreground text-xs font-medium">{category.label}</span>
           <div className="flex items-center gap-2">
-            <span className="text-xs text-muted-foreground">
+            <span className="text-muted-foreground text-xs">
               {category.score}/{category.maxScore}
             </span>
             {expanded ? (
@@ -149,7 +149,7 @@ function CategoryRow({
             )}
           </div>
         </div>
-        <div className="w-full h-1.5 rounded-full bg-muted overflow-hidden">
+        <div className="bg-muted h-1.5 w-full overflow-hidden rounded-full">
           <div
             className={`h-full rounded-full transition-all duration-500 ease-out ${getBarColor(category.score, category.maxScore)}`}
             style={{ width: `${percentage}%` }}
@@ -158,13 +158,13 @@ function CategoryRow({
       </button>
 
       {expanded && category.checks.length > 0 && (
-        <div className="px-4 pb-3 flex flex-col gap-2">
+        <div className="flex flex-col gap-2 px-4 pb-3">
           {category.checks.map((check) => (
             <div key={check.id} className="flex items-start gap-2 pl-1">
               <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>
           ))}
@@ -187,16 +187,16 @@ function SuggestionsList({ suggestions }: { suggestions: DesignSuggestion[] }) {
   if (sorted.length === 0) return null
 
   return (
-    <div className="px-4 py-3 border-t border-border">
-      <div className="flex items-center gap-2 mb-3">
+    <div className="border-border border-t px-4 py-3">
+      <div className="mb-3 flex items-center gap-2">
         <Lightbulb size={14} className="text-muted-foreground" />
-        <span className="text-xs font-medium text-foreground">Suggestions</span>
+        <span className="text-foreground text-xs font-medium">Suggestions</span>
       </div>
       <div className="flex flex-col gap-2.5">
         {sorted.map((suggestion) => (
           <div key={suggestion.id} className="flex items-start gap-2">
             <SeverityBadge severity={suggestion.severity} />
-            <span className="text-xs text-muted-foreground leading-relaxed">
+            <span className="text-muted-foreground text-xs leading-relaxed">
               {suggestion.message}
             </span>
           </div>
@@ -218,10 +218,10 @@ export function DesignScorePanel({ tree }: DesignScorePanelProps) {
 
   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">
         <Palette size={32} className="text-muted-foreground mb-3" />
-        <p className="text-sm font-medium text-foreground mb-1">Design Score</p>
-        <p className="text-xs text-muted-foreground">
+        <p className="text-foreground mb-1 text-sm font-medium">Design Score</p>
+        <p className="text-muted-foreground text-xs">
           Add sections to your page to see the design analysis
         </p>
       </div>
@@ -230,7 +230,7 @@ export function DesignScorePanel({ tree }: DesignScorePanelProps) {
 
   return (
     <div className="flex flex-col">
-      <div className="flex flex-col items-center py-5 border-b border-border">
+      <div className="border-border flex flex-col items-center border-b py-5">
         <ScoreRing score={analysis.score} />
       </div>