@actuate-media/cms-admin 0.9.0 → 0.11.0

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

@@ -8,13 +8,13 @@ export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
 
   if (variant === 'newsletter') {
     return (
-      <div className="rounded-md border border-border p-6 text-center">
-        <Mail size={24} className="mx-auto text-muted-foreground" />
-        <p className="mt-3 text-sm font-medium text-foreground">Newsletter Signup</p>
-        {formId && <p className="mt-1 text-xs text-muted-foreground">Form: {formId}</p>}
+      <div className="border-border rounded-md border p-6 text-center">
+        <Mail size={24} className="text-muted-foreground mx-auto" />
+        <p className="text-foreground mt-3 text-sm font-medium">Newsletter Signup</p>
+        {formId && <p className="text-muted-foreground mt-1 text-xs">Form: {formId}</p>}
         <div className="mx-auto mt-4 flex max-w-xs gap-2">
-          <div className="h-9 flex-1 rounded-md border border-border bg-input-background" />
-          <div className="flex h-9 items-center rounded-md bg-primary px-3">
+          <div className="border-border bg-input-background h-9 flex-1 rounded-md border" />
+          <div className="bg-primary flex h-9 items-center rounded-md px-3">
             <Send size={14} className="text-primary-foreground" />
           </div>
         </div>
@@ -24,20 +24,20 @@ export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
 
   if (variant === 'custom') {
     return (
-      <div className="rounded-md border border-border p-5">
+      <div className="border-border rounded-md border p-5">
         <div className="flex items-center gap-2">
           <FileText size={16} className="text-muted-foreground" />
-          <p className="text-sm font-medium text-foreground">
+          <p className="text-foreground text-sm font-medium">
             {formId ? `Form: ${formId}` : 'Custom Form'}
           </p>
         </div>
         <div className="mt-3 flex flex-col gap-2">
-          <div className="h-8 rounded-md border border-border bg-input-background" />
-          <div className="h-8 rounded-md border border-border bg-input-background" />
-          <div className="h-20 rounded-md border border-border bg-input-background" />
+          <div className="border-border bg-input-background h-8 rounded-md border" />
+          <div className="border-border bg-input-background h-8 rounded-md border" />
+          <div className="border-border bg-input-background h-20 rounded-md border" />
         </div>
         <div className="mt-3">
-          <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">
             Submit
           </span>
         </div>
@@ -46,17 +46,17 @@ export function FormPreview({ data, variant = 'contact' }: BlockPreviewProps) {
   }
 
   return (
-    <div className="rounded-md border border-border p-5">
-      <p className="text-sm font-medium text-foreground">Contact Form</p>
-      {formId && <p className="mt-1 text-xs text-muted-foreground">Form: {formId}</p>}
+    <div className="border-border rounded-md border p-5">
+      <p className="text-foreground text-sm font-medium">Contact Form</p>
+      {formId && <p className="text-muted-foreground mt-1 text-xs">Form: {formId}</p>}
       <div className="mt-3 grid grid-cols-2 gap-2">
-        <div className="h-8 rounded-md border border-border bg-input-background" />
-        <div className="h-8 rounded-md border border-border bg-input-background" />
+        <div className="border-border bg-input-background h-8 rounded-md border" />
+        <div className="border-border bg-input-background h-8 rounded-md border" />
       </div>
-      <div className="mt-2 h-8 rounded-md border border-border bg-input-background" />
-      <div className="mt-2 h-20 rounded-md border border-border bg-input-background" />
+      <div className="border-border bg-input-background mt-2 h-8 rounded-md border" />
+      <div className="border-border bg-input-background mt-2 h-20 rounded-md border" />
       <div className="mt-3">
-        <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">
           Send Message
         </span>
       </div>

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

@@ -17,7 +17,7 @@ export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
 
   const Thumbnail = ({ item, className = '' }: { item: GalleryImage; className?: string }) => (
     <div
-      className={`flex items-center justify-center overflow-hidden rounded-md bg-muted ${className}`}
+      className={`bg-muted flex items-center justify-center overflow-hidden rounded-md ${className}`}
     >
       {item.src ? (
         <img src={item.src} alt={item.alt || ''} className="h-full w-full object-cover" />
@@ -29,7 +29,7 @@ export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
 
   if (variant === 'masonry') {
     return (
-      <div className="rounded-md border border-border p-4">
+      <div className="border-border rounded-md border p-4">
         <div className="columns-3 gap-3 space-y-3">
           {placeholders.map((item, i) => (
             <Thumbnail
@@ -47,14 +47,14 @@ export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
 
   if (variant === 'carousel') {
     return (
-      <div className="overflow-hidden rounded-md border border-border p-4">
+      <div className="border-border overflow-hidden rounded-md border p-4">
         <div className="flex gap-3 overflow-hidden">
           {placeholders.slice(0, 4).map((item, i) => (
             <Thumbnail key={i} item={item} className="aspect-square min-w-[120px] flex-1" />
           ))}
           {placeholders.length > 4 && (
-            <div className="flex min-w-[120px] flex-1 items-center justify-center rounded-md bg-muted">
-              <span className="text-sm text-muted-foreground">+{placeholders.length - 4}</span>
+            <div className="bg-muted flex min-w-[120px] flex-1 items-center justify-center rounded-md">
+              <span className="text-muted-foreground text-sm">+{placeholders.length - 4}</span>
             </div>
           )}
         </div>
@@ -64,19 +64,19 @@ export function GalleryPreview({ data, variant = 'grid' }: BlockPreviewProps) {
 
   if (variant === 'lightbox') {
     return (
-      <div className="rounded-md border border-border p-4">
+      <div className="border-border rounded-md border p-4">
         <div className="grid grid-cols-3 gap-3">
           {placeholders.map((item, i) => (
             <Thumbnail key={i} item={item} className="aspect-square" />
           ))}
         </div>
-        <p className="mt-2 text-center text-xs text-muted-foreground">Click to open lightbox</p>
+        <p className="text-muted-foreground mt-2 text-center text-xs">Click to open lightbox</p>
       </div>
     )
   }
 
   return (
-    <div className="rounded-md border border-border p-4">
+    <div className="border-border rounded-md border p-4">
       <div className="grid grid-cols-3 gap-3">
         {placeholders.map((item, i) => (
           <Thumbnail key={i} item={item} className="aspect-square" />

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

@@ -12,23 +12,23 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
 
   if (variant === 'split-image') {
     return (
-      <div className="flex min-h-[200px] overflow-hidden rounded-md border border-border">
+      <div className="border-border flex min-h-[200px] overflow-hidden rounded-md border">
         <div className="flex flex-1 flex-col justify-center gap-3 p-6">
-          <h2 className="text-2xl font-medium text-foreground">
+          <h2 className="text-foreground text-2xl font-medium">
             {title || <span className="text-muted-foreground">Hero Title</span>}
           </h2>
           {(subtitle || !title) && (
-            <p className="text-sm text-muted-foreground">{subtitle || 'Subtitle text goes here'}</p>
+            <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
           )}
           {ctaText && (
             <div className="mt-2">
-              <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">
                 {ctaText}
               </span>
             </div>
           )}
         </div>
-        <div className="flex flex-1 items-center justify-center bg-muted">
+        <div className="bg-muted flex flex-1 items-center justify-center">
           {image ? (
             <img src={image} alt="" className="h-full w-full object-cover" />
           ) : (
@@ -41,15 +41,15 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
 
   if (variant === 'minimal') {
     return (
-      <div className="flex flex-col items-center gap-3 rounded-md border border-border p-8">
-        <h2 className="text-2xl font-medium text-foreground">
+      <div className="border-border flex flex-col items-center gap-3 rounded-md border p-8">
+        <h2 className="text-foreground text-2xl font-medium">
           {title || <span className="text-muted-foreground">Hero Title</span>}
         </h2>
         {(subtitle || !title) && (
-          <p className="text-sm text-muted-foreground">{subtitle || 'Subtitle text goes here'}</p>
+          <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
         )}
         {ctaText && (
-          <span className="mt-2 inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+          <span className="bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm">
             {ctaText}
           </span>
         )}
@@ -60,27 +60,27 @@ export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
   const isVideo = variant === 'video-bg'
 
   return (
-    <div className="relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border border-border p-8">
+    <div className="border-border relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border p-8">
       {image ? (
         <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
       ) : (
-        <div className="absolute inset-0 bg-muted" />
+        <div className="bg-muted absolute inset-0" />
       )}
-      <div className="absolute inset-0 bg-background" style={{ opacity: overlayOpacity }} />
+      <div className="bg-background absolute inset-0" style={{ opacity: overlayOpacity }} />
       <div className="relative z-10 flex flex-col items-center gap-3 text-center">
         {isVideo && (
-          <div className="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-primary/90">
+          <div className="bg-primary/90 mb-2 flex h-12 w-12 items-center justify-center rounded-full">
             <Play size={20} className="text-primary-foreground" />
           </div>
         )}
-        <h2 className="text-2xl font-medium text-foreground">
+        <h2 className="text-foreground text-2xl font-medium">
           {title || <span className="text-muted-foreground">Hero Title</span>}
         </h2>
         {(subtitle || !title) && (
-          <p className="text-sm text-muted-foreground">{subtitle || 'Subtitle text goes here'}</p>
+          <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
         )}
         {ctaText && (
-          <span className="mt-2 inline-block rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
+          <span className="bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm">
             {ctaText}
           </span>
         )}

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

@@ -13,7 +13,7 @@ export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps
 
   const ImagePlaceholder = ({ className = '' }: { className?: string }) => (
     <div
-      className={`flex items-center justify-center bg-muted ${roundedClass} ${className}`}
+      className={`bg-muted flex items-center justify-center ${roundedClass} ${className}`}
       style={{ aspectRatio }}
     >
       <Image size={32} className="text-muted-foreground" />
@@ -34,7 +34,7 @@ export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps
 
   if (variant === 'side-by-side') {
     return (
-      <div className="grid grid-cols-2 gap-3 rounded-md border border-border p-4">
+      <div className="border-border grid grid-cols-2 gap-3 rounded-md border p-4">
         <ImageElement />
         <ImagePlaceholder />
       </div>
@@ -42,10 +42,10 @@ export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps
   }
 
   return (
-    <figure className="overflow-hidden rounded-md border border-border p-4">
+    <figure className="border-border overflow-hidden rounded-md border p-4">
       <ImageElement />
       {(variant === 'captioned' || caption) && (
-        <figcaption className="mt-2 text-center text-sm text-muted-foreground">
+        <figcaption className="text-muted-foreground mt-2 text-center text-sm">
           {caption || 'Image caption'}
         </figcaption>
       )}

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

@@ -26,17 +26,17 @@ export function TextPreview({ data, variant = 'prose' }: BlockPreviewProps) {
     const col2 = truncatedBody.slice(midpoint)
 
     return (
-      <div className="rounded-md border border-border p-5">
+      <div className="border-border rounded-md border p-5">
         {heading && (
-          <HeadingTag className={`${headingSizeClass} mb-3 font-medium text-foreground`}>
+          <HeadingTag className={`${headingSizeClass} text-foreground mb-3 font-medium`}>
             {heading}
           </HeadingTag>
         )}
         <div className="grid grid-cols-2 gap-4">
-          <p className="text-sm leading-relaxed text-muted-foreground">
+          <p className="text-muted-foreground text-sm leading-relaxed">
             {col1 || 'Column one text content…'}
           </p>
-          <p className="text-sm leading-relaxed text-muted-foreground">
+          <p className="text-muted-foreground text-sm leading-relaxed">
             {col2 || 'Column two text content…'}
           </p>
         </div>
@@ -46,34 +46,34 @@ export function TextPreview({ data, variant = 'prose' }: BlockPreviewProps) {
 
   if (variant === 'with-sidebar') {
     return (
-      <div className="grid grid-cols-[1fr_200px] gap-4 rounded-md border border-border p-5">
+      <div className="border-border grid grid-cols-[1fr_200px] gap-4 rounded-md border p-5">
         <div>
           {heading && (
-            <HeadingTag className={`${headingSizeClass} mb-3 font-medium text-foreground`}>
+            <HeadingTag className={`${headingSizeClass} text-foreground mb-3 font-medium`}>
               {heading}
             </HeadingTag>
           )}
-          <p className="text-sm leading-relaxed text-muted-foreground">
+          <p className="text-muted-foreground text-sm leading-relaxed">
             {truncatedBody || 'Body text content goes here…'}
           </p>
         </div>
-        <aside className="rounded-md bg-muted p-3">
-          <div className="h-3 w-3/4 rounded bg-border" />
-          <div className="mt-2 h-2 w-full rounded bg-border" />
-          <div className="mt-1 h-2 w-2/3 rounded bg-border" />
+        <aside className="bg-muted rounded-md p-3">
+          <div className="bg-border h-3 w-3/4 rounded" />
+          <div className="bg-border mt-2 h-2 w-full rounded" />
+          <div className="bg-border mt-1 h-2 w-2/3 rounded" />
         </aside>
       </div>
     )
   }
 
   return (
-    <div className="rounded-md border border-border p-5">
+    <div className="border-border rounded-md border p-5">
       {heading && (
-        <HeadingTag className={`${headingSizeClass} mb-3 font-medium text-foreground`}>
+        <HeadingTag className={`${headingSizeClass} text-foreground mb-3 font-medium`}>
           {heading}
         </HeadingTag>
       )}
-      <p className="text-sm leading-relaxed text-muted-foreground">
+      <p className="text-muted-foreground text-sm leading-relaxed">
         {truncatedBody || <span className="italic">Body text content goes here…</span>}
       </p>
     </div>

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

@@ -13,21 +13,21 @@ export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
   )
 
   const content = (
-    <div className="relative flex aspect-video items-center justify-center overflow-hidden rounded-md bg-muted">
+    <div className="bg-muted relative flex aspect-video items-center justify-center overflow-hidden rounded-md">
       {poster ? (
         <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
       ) : (
-        <div className="absolute inset-0 bg-card" />
+        <div className="bg-card absolute inset-0" />
       )}
-      <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-primary/90 shadow-sm">
+      <div className="bg-primary/90 relative z-10 flex h-12 w-12 items-center justify-center rounded-full shadow-sm">
         <Play size={20} className="text-primary-foreground" />
       </div>
       {badges.length > 0 && (
-        <div className="absolute bottom-2 right-2 z-10 flex gap-1">
+        <div className="absolute right-2 bottom-2 z-10 flex gap-1">
           {badges.map((badge) => (
             <span
               key={badge}
-              className="rounded bg-background/80 px-1.5 py-0.5 text-xs text-muted-foreground"
+              className="bg-background/80 text-muted-foreground rounded px-1.5 py-0.5 text-xs"
             >
               {badge}
             </span>
@@ -39,15 +39,15 @@ export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
 
   if (variant === 'background') {
     return (
-      <div className="overflow-hidden rounded-md border border-border">
+      <div className="border-border overflow-hidden rounded-md border">
         <div className="relative aspect-[21/9]">
           {poster ? (
             <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
           ) : (
-            <div className="absolute inset-0 bg-card" />
+            <div className="bg-card absolute inset-0" />
           )}
-          <div className="absolute inset-0 flex items-center justify-center bg-background/30">
-            <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary/90 shadow-sm">
+          <div className="bg-background/30 absolute inset-0 flex items-center justify-center">
+            <div className="bg-primary/90 flex h-14 w-14 items-center justify-center rounded-full shadow-sm">
               <Play size={24} className="text-primary-foreground" />
             </div>
           </div>
@@ -58,10 +58,10 @@ export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
 
   if (variant === 'lightbox') {
     return (
-      <div className="rounded-md border border-border p-4">
+      <div className="border-border rounded-md border p-4">
         <div className="mx-auto max-w-sm">
           {content}
-          <p className="mt-2 text-center text-xs text-muted-foreground">
+          <p className="text-muted-foreground mt-2 text-center text-xs">
             Click to play in lightbox
           </p>
         </div>
@@ -69,5 +69,5 @@ export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
     )
   }
 
-  return <div className="rounded-md border border-border p-4">{content}</div>
+  return <div className="border-border rounded-md border p-4">{content}</div>
 }

package/src/views/page-builder/canvas/BlockRenderer.tsx

@@ -37,21 +37,21 @@ export function BlockRenderer({ node, selectedNodeId, onSelectNode }: BlockRende
     <div
       data-node-id={node.id}
       className={`relative min-h-[48px] transition-shadow ${
-        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
+        isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
       }`}
       onClick={handleClick}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
       {(hovered || isSelected) && (
-        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+        <span className="bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium">
           {label}
         </span>
       )}
 
-      <div className="flex items-center justify-center gap-2 p-4 bg-muted/30 border border-dashed border-border rounded-md">
+      <div className="bg-muted/30 border-border flex items-center justify-center gap-2 rounded-md border border-dashed p-4">
         <Icon size={16} className="text-muted-foreground" />
-        <span className="text-sm text-muted-foreground">{label}</span>
+        <span className="text-muted-foreground text-sm">{label}</span>
       </div>
     </div>
   )

package/src/views/page-builder/canvas/BuilderCanvas.tsx

@@ -32,11 +32,11 @@ export function BuilderCanvas({
   }
 
   return (
-    <div className="relative flex-1 overflow-auto bg-muted p-6" onClick={handleCanvasClick}>
+    <div className="bg-muted relative flex-1 overflow-auto p-6" onClick={handleCanvasClick}>
       {showGridOverlay && <GridOverlay deviceMode={deviceMode} />}
 
       <div
-        className={`relative bg-background shadow-sm min-h-full ${DEVICE_CLASSES[deviceMode]}`}
+        className={`bg-background relative min-h-full shadow-sm ${DEVICE_CLASSES[deviceMode]}`}
         onClick={handleCanvasClick}
       >
         {tree.children.map((child) => {
@@ -54,10 +54,10 @@ export function BuilderCanvas({
         })}
 
         {tree.children.length === 0 && (
-          <div className="flex flex-col items-center justify-center min-h-[400px] text-center">
+          <div className="flex min-h-[400px] flex-col items-center justify-center text-center">
             <LayoutGrid size={32} className="text-muted-foreground mb-3" />
-            <p className="text-sm font-medium text-foreground mb-1">No sections yet</p>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-foreground mb-1 text-sm font-medium">No sections yet</p>
+            <p className="text-muted-foreground text-xs">
               Click "Add Section" below to start building your page
             </p>
           </div>
@@ -76,7 +76,7 @@ function GridOverlay({ deviceMode }: { deviceMode: BuilderCanvasProps['deviceMod
       aria-hidden="true"
     >
       <div
-        className={`grid grid-cols-12 gap-4 h-full opacity-[0.08] ${DEVICE_CLASSES[deviceMode]}`}
+        className={`grid h-full grid-cols-12 gap-4 opacity-[0.08] ${DEVICE_CLASSES[deviceMode]}`}
       >
         {Array.from({ length: 12 }).map((_, i) => (
           <div key={i} className="bg-primary h-full rounded-sm" />

package/src/views/page-builder/canvas/ColumnRenderer.tsx

@@ -26,7 +26,7 @@ export function ColumnRenderer({ node, selectedNodeId, onSelectNode }: ColumnRen
     <div
       data-node-id={node.id}
       className={`relative transition-shadow ${
-        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
+        isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
       }`}
       style={{
         gridColumn: `span ${width}`,
@@ -41,13 +41,13 @@ export function ColumnRenderer({ node, selectedNodeId, onSelectNode }: ColumnRen
       onMouseLeave={() => setHovered(false)}
     >
       {(hovered || isSelected) && (
-        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+        <span className="bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium">
           Col {width}
         </span>
       )}
 
       {isEmpty ? (
-        <div className="flex items-center justify-center min-h-[64px] border-2 border-dashed border-border rounded-md text-sm text-muted-foreground">
+        <div className="border-border text-muted-foreground flex min-h-[64px] items-center justify-center rounded-md border-2 border-dashed text-sm">
           Empty column
         </div>
       ) : (

package/src/views/page-builder/canvas/ContainerRenderer.tsx

@@ -32,7 +32,7 @@ export function ContainerRenderer({ node, selectedNodeId, onSelectNode }: Contai
     <div
       data-node-id={node.id}
       className={`relative transition-shadow ${
-        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
+        isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
       }`}
       style={{
         maxWidth,
@@ -47,7 +47,7 @@ export function ContainerRenderer({ node, selectedNodeId, onSelectNode }: Contai
       onMouseLeave={() => setHovered(false)}
     >
       {(hovered || isSelected) && (
-        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+        <span className="bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium">
           Container
         </span>
       )}

package/src/views/page-builder/canvas/RowRenderer.tsx

@@ -32,7 +32,7 @@ export function RowRenderer({ node, selectedNodeId, onSelectNode }: RowRendererP
     <div
       data-node-id={node.id}
       className={`relative transition-shadow ${
-        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
+        isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
       }`}
       onClick={handleClick}
       onMouseEnter={(e) => {
@@ -42,7 +42,7 @@ export function RowRenderer({ node, selectedNodeId, onSelectNode }: RowRendererP
       onMouseLeave={() => setHovered(false)}
     >
       {(hovered || isSelected) && (
-        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+        <span className="bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium">
           Row
         </span>
       )}

package/src/views/page-builder/canvas/SectionRenderer.tsx

@@ -49,7 +49,7 @@ export function SectionRenderer({ node, selectedNodeId, onSelectNode }: SectionR
     <div
       data-node-id={node.id}
       className={`relative w-full transition-shadow ${
-        isSelected ? 'ring-2 ring-primary ring-offset-2' : hovered ? 'ring-1 ring-primary/50' : ''
+        isSelected ? 'ring-primary ring-2 ring-offset-2' : hovered ? 'ring-primary/50 ring-1' : ''
       }`}
       style={backgroundStyle}
       onClick={handleClick}
@@ -60,7 +60,7 @@ export function SectionRenderer({ node, selectedNodeId, onSelectNode }: SectionR
       onMouseLeave={() => setHovered(false)}
     >
       {(hovered || isSelected) && (
-        <span className="absolute -top-2 -left-1 text-xs px-1.5 py-0.5 bg-primary text-primary-foreground rounded font-medium z-10">
+        <span className="bg-primary text-primary-foreground absolute -top-2 -left-1 z-10 rounded px-1.5 py-0.5 text-xs font-medium">
           Section
         </span>
       )}