@actuate-media/cms-admin 0.10.0 → 0.12.0

package/src/__tests__/layout/primitives.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import { tokens } from '../../layout/primitives/tokens.js'
+import * as primitives from '../../layout/primitives/index.js'
+
+describe('layout primitive tokens', () => {
+  it('exposes the canonical spacing scale', () => {
+    expect(tokens.space['0']).toBe(0)
+    expect(tokens.space['1']).toBe(4)
+    expect(tokens.space['4']).toBe(16)
+    expect(tokens.space['8']).toBe(32)
+  })
+
+  it('exposes the canonical radius scale', () => {
+    expect(tokens.radius.none).toBe(0)
+    expect(tokens.radius.md).toBe(6)
+    expect(tokens.radius.full).toBe(9999)
+  })
+
+  it('exposes the canonical breakpoint scale', () => {
+    expect(tokens.breakpoint.sm).toBe(640)
+    expect(tokens.breakpoint.md).toBe(768)
+    expect(tokens.breakpoint.lg).toBe(1024)
+  })
+})
+
+describe('layout primitives exports', () => {
+  it('re-exports every public primitive', () => {
+    expect(typeof primitives.AdminShell).toBe('function')
+    expect(typeof primitives.PageContainer).toBe('function')
+    expect(typeof primitives.Stack).toBe('function')
+    expect(typeof primitives.Cluster).toBe('function')
+    expect(typeof primitives.Grid).toBe('function')
+    expect(typeof primitives.Split).toBe('function')
+    expect(typeof primitives.Box).toBe('object')
+    expect(typeof primitives.tokens).toBe('object')
+  })
+})

package/src/__tests__/lib/cv.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import { cv } from '../../lib/cv.js'
+
+describe('cv()', () => {
+  const button = cv('inline-flex items-center', {
+    variants: {
+      intent: {
+        primary: 'bg-primary text-white',
+        secondary: 'bg-secondary text-foreground',
+      },
+      size: {
+        sm: 'px-2 py-1 text-xs',
+        md: 'px-4 py-2 text-sm',
+        lg: 'px-6 py-3 text-base',
+      },
+    },
+    defaultVariants: { intent: 'primary', size: 'md' },
+  })
+
+  it('returns the base class and default variant classes when no props supplied', () => {
+    const out = button()
+    expect(out).toContain('inline-flex')
+    expect(out).toContain('bg-primary')
+    expect(out).toContain('text-white')
+    expect(out).toContain('px-4 py-2 text-sm')
+  })
+
+  it('overrides default variants when explicit values are supplied', () => {
+    const out = button({ intent: 'secondary', size: 'sm' })
+    expect(out).toContain('bg-secondary')
+    expect(out).toContain('text-foreground')
+    expect(out).toContain('px-2 py-1 text-xs')
+    expect(out).not.toContain('bg-primary')
+  })
+
+  it('appends the `class` escape hatch', () => {
+    const out = button({ class: 'shadow-md' })
+    expect(out).toContain('shadow-md')
+  })
+
+  it('appends the `className` escape hatch', () => {
+    const out = button({ className: 'rounded-full' })
+    expect(out).toContain('rounded-full')
+  })
+
+  it('applies compound variants when their match criteria are satisfied', () => {
+    const card = cv('rounded-md', {
+      variants: {
+        tone: { neutral: 'bg-gray-100', danger: 'bg-red-100' },
+        emphasis: { low: 'border', high: 'border-2' },
+      },
+      defaultVariants: { tone: 'neutral', emphasis: 'low' },
+      compoundVariants: [{ tone: 'danger', emphasis: 'high', class: 'ring-2 ring-red-500' }],
+    })
+
+    expect(card({ tone: 'danger', emphasis: 'high' })).toContain('ring-2 ring-red-500')
+    expect(card({ tone: 'danger', emphasis: 'low' })).not.toContain('ring-2')
+    expect(card({ tone: 'neutral', emphasis: 'high' })).not.toContain('ring-2')
+  })
+
+  it('applies compound variants with array (any-of) matching', () => {
+    const alert = cv('alert', {
+      variants: {
+        tone: { info: 'bg-blue-50', warn: 'bg-amber-50', danger: 'bg-red-50' },
+      },
+      defaultVariants: { tone: 'info' },
+      compoundVariants: [{ tone: ['warn', 'danger'], class: 'font-medium' }],
+    })
+
+    expect(alert({ tone: 'warn' })).toContain('font-medium')
+    expect(alert({ tone: 'danger' })).toContain('font-medium')
+    expect(alert({ tone: 'info' })).not.toContain('font-medium')
+  })
+})

package/src/assets/actuate-logo.tsx

@@ -0,0 +1,72 @@
+/**
+ * Default Actuate Media brand logo for the admin sidebar (top-left) and the
+ * login screen.
+ *
+ * Source: the official 2021 Actuate Media SVG. The original asset has a
+ * 1000×800 viewBox with a white background polygon and the artwork
+ * concentrated in the middle band — we strip the white polygon so the logo
+ * is transparent on any surface, and crop the viewBox to the actual content
+ * bounds so `h-9 w-auto` renders at a sensible aspect ratio instead of
+ * leaving 60% empty space.
+ *
+ * Integrators override this default via:
+ *   defineConfig({
+ *     admin: { branding: { logo: '/my-logo.svg', name: 'Acme' } }
+ *   })
+ *
+ * Both the sidebar (top-left) and the login screen read from the same
+ * `admin.branding` config so swapping logos is a one-line change.
+ */
+
+import type { ReactElement } from 'react'
+
+export interface BrandLogoProps {
+  /** Tailwind / CSS class applied to the root `<svg>` element. */
+  className?: string
+}
+
+/**
+ * Inline SVG renderer for the official Actuate Media lockup. Transparent
+ * background, scales cleanly at any size, and ships as JSX (no bundler asset
+ * pipeline required — works under Next.js, Vite, Webpack, esbuild, etc.).
+ *
+ * Colour palette is baked into the path fills so the logo stays on-brand
+ * regardless of the surrounding theme:
+ *   - Coral / red `#F05E65` for the "C" mark + ACTUATE wordmark
+ *   - Neutral grey `#818386` for the MEDIA sub-line
+ */
+export function ActuateBrandLogo({ className }: BrandLogoProps): ReactElement {
+  return (
+    <svg
+      viewBox="160 250 730 290"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      role="img"
+      aria-label="Actuate Media"
+      style={{ shapeRendering: 'geometricPrecision' }}
+    >
+      {/* "C" mark: upward arrow + three vertical bars (coral) */}
+      <polygon
+        fill="#F05E65"
+        fillRule="nonzero"
+        points="253,266 167,433 196,433 253,323 309,433 339,433"
+      />
+      <path
+        fill="#F05E65"
+        d="M216 433l16 0 0 59 -16 0 0 -59zm57 0l17 0 0 59 -17 0 0 -59zm-28 0l16 0 0 101 -16 0 0 -101z"
+      />
+      {/* "MEDIA" subtitle (neutral grey) */}
+      <path
+        fill="#818386"
+        fillRule="nonzero"
+        d="M707 447l-12 0 6 -14 6 14zm-241 -11l0 25 6 0 0 -35 -7 0 -11 17 -10 -17 -7 0 0 35 6 0 0 -25 11 17 1 0 11 -17zm70 -10l-26 0 0 35 26 0 0 -5 -20 0 0 -10 20 0 0 -5 -20 0 0 -10 20 0 0 -5zm62 18c0,1 0,3 -1,5 0,1 -1,2 -2,3 -1,1 -3,2 -4,3 -2,1 -3,1 -5,1l-7 0 0 -25 7 0c2,0 3,1 5,1 1,1 3,2 4,3 1,1 2,2 2,4 1,1 1,3 1,5zm7 0c0,-3 -1,-5 -2,-7 -1,-3 -2,-5 -4,-6 -1,-2 -3,-3 -6,-4 -2,-1 -5,-1 -7,-1l-14 0 0 35 14 0c2,0 5,0 7,-1 3,-1 5,-2 6,-4 2,-1 3,-3 4,-5 1,-3 2,-5 2,-7zm36 -18l0 35 6 0 0 -35 -6 0zm63 0l-6 0 -16 35 7 0 3 -8 17 0 4 8 7 0 -16 -35z"
+      />
+      {/* "ACTUATE" main wordmark (coral) */}
+      <path
+        fill="#F05E65"
+        fillRule="nonzero"
+        d="M406 386l-10 -10c-4,3 -7,6 -11,8 -4,2 -8,3 -13,3 -5,0 -8,-1 -12,-2 -3,-2 -6,-4 -9,-7 -2,-3 -4,-6 -6,-10 -1,-3 -2,-7 -2,-12 0,-4 1,-8 2,-11 2,-4 4,-7 6,-10 3,-3 6,-5 9,-7 4,-1 7,-2 12,-2 4,0 9,1 13,3 3,2 7,5 11,8l9 -11c-2,-2 -4,-4 -6,-6 -3,-1 -5,-3 -8,-4 -2,-1 -5,-2 -9,-3 -3,0 -6,-1 -10,-1 -7,0 -13,1 -18,4 -6,2 -10,5 -14,9 -4,4 -7,9 -9,14 -2,6 -4,12 -4,18 0,6 2,12 4,17 2,5 5,10 9,14 4,4 8,7 14,9 5,3 11,4 17,4 4,0 8,0 11,-1 3,-1 6,-2 9,-3 3,-2 5,-3 8,-5 2,-2 5,-4 7,-6zm230 -73l-45 86 16 0 29 -57 29 57 15 0 -44 -86zm197 1l-63 0 0 85 63 0 0 -13 -48 0 0 -23 48 0 0 -14 -48 0 0 -22 48 0 0 -13zm-110 14l27 0 0 -14 -70 0 0 14 28 0 0 71 15 0 0 -71zm-140 -14l-15 0 0 49c0,8 -2,14 -6,18 -4,4 -9,6 -16,6 -7,0 -12,-2 -16,-6 -4,-4 -6,-11 -6,-19l0 -48 -15 0 0 49c0,6 1,12 3,16 2,5 4,9 7,12 3,3 7,6 12,7 4,2 9,3 15,3 5,0 11,-1 15,-3 5,-1 8,-4 12,-7 3,-3 5,-7 7,-12 2,-5 3,-10 3,-17l0 -48zm-118 14l27 0 0 -14 -69 0 0 14 27 0 0 71 15 0 0 -71z"
+      />
+    </svg>
+  )
+}

package/src/components/Breadcrumbs.tsx

@@ -61,29 +61,29 @@ export function Breadcrumbs({ currentPath, onNavigate }: BreadcrumbsProps) {
   return (
     <nav
       aria-label="Breadcrumb"
-      className="flex items-center gap-1 text-sm py-2.5 px-4 bg-white border-b border-gray-200 overflow-x-auto"
+      className="flex items-center gap-1 overflow-x-auto border-b border-gray-200 bg-white px-4 py-2.5 text-sm"
     >
       <button
         type="button"
         onClick={() => onNavigate('/')}
-        className="flex items-center gap-1 text-gray-500 hover:text-blue-600 transition-colors shrink-0"
+        className="flex shrink-0 items-center gap-1 text-gray-500 transition-colors hover:text-blue-600"
       >
-        <Home className="w-3.5 h-3.5" />
+        <Home className="h-3.5 w-3.5" />
         <span className="hidden sm:inline">Dashboard</span>
       </button>
 
       {crumbs.map((crumb, i) => {
         const isLast = i === crumbs.length - 1
         return (
-          <span key={crumb.path} className="flex items-center gap-1 shrink-0">
-            <ChevronRight className="w-3.5 h-3.5 text-gray-400" />
+          <span key={crumb.path} className="flex shrink-0 items-center gap-1">
+            <ChevronRight className="h-3.5 w-3.5 text-gray-400" />
             {isLast ? (
               <span className="font-medium text-gray-900">{crumb.label}</span>
             ) : (
               <button
                 type="button"
                 onClick={() => onNavigate(crumb.path)}
-                className="text-gray-500 hover:text-blue-600 transition-colors"
+                className="text-gray-500 transition-colors hover:text-blue-600"
               >
                 {crumb.label}
               </button>

package/src/components/CommandPalette.tsx

@@ -181,7 +181,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
   return (
     <div
-      className="fixed inset-0 z-50 bg-black/50 flex items-start justify-center pt-[20vh] px-4"
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 px-4 pt-[20vh]"
       onClick={() => {
         onOpenChange(false)
         setSearch('')
@@ -195,7 +195,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
         onClick={(e) => e.stopPropagation()}
       >
         <Command
-          className="bg-white rounded-lg shadow-2xl w-full overflow-hidden"
+          className="w-full overflow-hidden rounded-lg bg-white shadow-2xl"
           onKeyDown={(e) => {
             if (e.key === 'Escape') {
               onOpenChange(false)
@@ -205,17 +205,17 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
           shouldFilter={!hasQuery}
         >
           <div className="flex items-center border-b border-gray-200 px-4">
-            <Search className="w-5 h-5 text-gray-400 mr-3 shrink-0" />
+            <Search className="mr-3 h-5 w-5 shrink-0 text-gray-400" />
             <Command.Input
               value={search}
               onValueChange={setSearch}
               placeholder="Search or jump to..."
-              className="w-full py-4 text-base bg-transparent focus:outline-none placeholder:text-gray-400"
+              className="w-full bg-transparent py-4 text-base placeholder:text-gray-400 focus:outline-none"
             />
             {loading && (
-              <div className="w-4 h-4 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin shrink-0 mr-2" />
+              <div className="mr-2 h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" />
             )}
-            <kbd className="hidden sm:inline-block px-2 py-1 text-xs font-mono bg-gray-100 text-gray-600 rounded shrink-0">
+            <kbd className="hidden shrink-0 rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-600 sm:inline-block">
               ESC
             </kbd>
           </div>
@@ -227,15 +227,15 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
             {!hasQuery && recentItems.length > 0 && (
               <Command.Group heading="Recent" className="px-2 py-2">
-                <div className="text-xs font-medium text-gray-500 mb-2">RECENT</div>
+                <div className="mb-2 text-xs font-medium text-gray-500">RECENT</div>
                 {recentItems.map((item) => (
                   <Command.Item
                     key={`recent-${item.id}`}
                     value={`recent ${item.label}`}
                     onSelect={() => handleSelect(item.path, item)}
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <Clock className="w-4 h-4 text-gray-400" />
+                    <Clock className="h-4 w-4 text-gray-400" />
                     <span>{item.label}</span>
                     <span className="ml-auto text-xs text-gray-400 capitalize">{item.type}</span>
                   </Command.Item>
@@ -245,7 +245,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
             {hasQuery && documents.length > 0 && (
               <Command.Group heading="Documents" className="px-2 py-2">
-                <div className="text-xs font-medium text-gray-500 mb-2">DOCUMENTS</div>
+                <div className="mb-2 text-xs font-medium text-gray-500">DOCUMENTS</div>
                 {documents.map((doc) => (
                   <Command.Item
                     key={`doc-${doc.id}`}
@@ -258,10 +258,10 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         type: 'document',
                       })
                     }
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <FileText className="w-4 h-4 text-gray-500" />
-                    <div className="flex flex-col min-w-0">
+                    <FileText className="h-4 w-4 text-gray-500" />
+                    <div className="flex min-w-0 flex-col">
                       <span className="truncate">{doc.title ?? doc.slug ?? doc.id}</span>
                       <span className="text-xs text-gray-400">
                         {doc.collection} &middot; {doc.status}
@@ -273,8 +273,8 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             )}
 
             {hasQuery && media.length > 0 && (
-              <Command.Group heading="Media" className="px-2 py-2 mt-1">
-                <div className="text-xs font-medium text-gray-500 mb-2">MEDIA</div>
+              <Command.Group heading="Media" className="mt-1 px-2 py-2">
+                <div className="mb-2 text-xs font-medium text-gray-500">MEDIA</div>
                 {media.map((m) => (
                   <Command.Item
                     key={`media-${m.id}`}
@@ -287,10 +287,10 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         type: 'media',
                       })
                     }
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <Image className="w-4 h-4 text-gray-500" />
-                    <div className="flex flex-col min-w-0">
+                    <Image className="h-4 w-4 text-gray-500" />
+                    <div className="flex min-w-0 flex-col">
                       <span className="truncate">{m.filename}</span>
                       <span className="text-xs text-gray-400">{m.mimeType}</span>
                     </div>
@@ -300,8 +300,8 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             )}
 
             {hasQuery && users.length > 0 && (
-              <Command.Group heading="Users" className="px-2 py-2 mt-1">
-                <div className="text-xs font-medium text-gray-500 mb-2">USERS</div>
+              <Command.Group heading="Users" className="mt-1 px-2 py-2">
+                <div className="mb-2 text-xs font-medium text-gray-500">USERS</div>
                 {users.map((u) => (
                   <Command.Item
                     key={`user-${u.id}`}
@@ -314,10 +314,10 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         type: 'user',
                       })
                     }
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <Users className="w-4 h-4 text-gray-500" />
-                    <div className="flex flex-col min-w-0">
+                    <Users className="h-4 w-4 text-gray-500" />
+                    <div className="flex min-w-0 flex-col">
                       <span className="truncate">{u.name}</span>
                       <span className="text-xs text-gray-400">
                         {u.email} &middot; {u.role}
@@ -330,7 +330,7 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
 
             {(!hasQuery || !hasResults) && (
               <Command.Group heading="Navigation" className="px-2 py-2">
-                <div className="text-xs font-medium text-gray-500 mb-2">NAVIGATION</div>
+                <div className="mb-2 text-xs font-medium text-gray-500">NAVIGATION</div>
                 {navigationCommands.map((cmd) => {
                   const Icon = cmd.icon
                   return (
@@ -338,9 +338,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                       key={cmd.id}
                       value={cmd.label}
                       onSelect={() => handleSelect(cmd.action)}
-                      className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                      className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                     >
-                      <Icon className="w-4 h-4 text-gray-500" />
+                      <Icon className="h-4 w-4 text-gray-500" />
                       <span>{cmd.label}</span>
                     </Command.Item>
                   )
@@ -348,8 +348,8 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
               </Command.Group>
             )}
 
-            <Command.Group heading="Actions" className="px-2 py-2 mt-2">
-              <div className="text-xs font-medium text-gray-500 mb-2">ACTIONS</div>
+            <Command.Group heading="Actions" className="mt-2 px-2 py-2">
+              <div className="mb-2 text-xs font-medium text-gray-500">ACTIONS</div>
               {staticActions.map((cmd) => {
                 const Icon = cmd.icon
                 return (
@@ -364,9 +364,9 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
                         type: 'action',
                       })
                     }
-                    className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-100 data-[selected=true]:bg-gray-100"
+                    className="flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 hover:bg-gray-100 data-[selected=true]:bg-gray-100"
                   >
-                    <Icon className="w-4 h-4 text-gray-500" />
+                    <Icon className="h-4 w-4 text-gray-500" />
                     <span>{cmd.label}</span>
                   </Command.Item>
                 )
@@ -374,19 +374,19 @@ export function CommandPalette({ open, onOpenChange, onNavigate }: CommandPalett
             </Command.Group>
           </Command.List>
 
-          <div className="border-t border-gray-200 px-4 py-3 bg-gray-50 flex items-center justify-between text-xs text-gray-500">
+          <div className="flex items-center justify-between border-t border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-500">
             <div className="flex items-center gap-4">
               <span className="flex items-center gap-1">
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
                   ↑
                 </kbd>
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
                   ↓
                 </kbd>
                 to navigate
               </span>
               <span className="flex items-center gap-1">
-                <kbd className="px-1.5 py-0.5 bg-white border border-gray-300 rounded text-[10px]">
+                <kbd className="rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px]">
                   ↵
                 </kbd>
                 to select

package/src/components/ContentOverviewChart.tsx

@@ -20,7 +20,7 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
 
   if (total === 0) {
     return (
-      <div className="flex items-center justify-center h-full text-sm text-gray-400">
+      <div className="flex h-full items-center justify-center text-sm text-gray-400">
         No content yet
       </div>
     )
@@ -28,7 +28,7 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
 
   return (
     <div className="flex items-center gap-6">
-      <div className="w-36 h-36 shrink-0">
+      <div className="h-36 w-36 shrink-0">
         <ResponsiveContainer width="100%" height="100%">
           <PieChart>
             <Pie
@@ -54,7 +54,7 @@ export function ContentOverviewChart({ published, drafts, scheduled }: ContentOv
           return (
             <div key={entry.name} className="flex items-center gap-3">
               <span
-                className="w-2.5 h-2.5 rounded-full shrink-0"
+                className="h-2.5 w-2.5 shrink-0 rounded-full"
                 style={{ backgroundColor: COLORS[idx] }}
               />
               <div className="min-w-0">

package/src/components/ErrorBoundary.tsx

@@ -32,13 +32,13 @@ export class ErrorBoundary extends Component<Props, State> {
       return (
         <div className="flex min-h-[200px] items-center justify-center p-6">
           <div className="text-center">
-            <h2 className="text-lg font-medium text-foreground mb-2">Something went wrong</h2>
-            <p className="text-sm text-muted-foreground mb-4">
+            <h2 className="text-foreground mb-2 text-lg font-medium">Something went wrong</h2>
+            <p className="text-muted-foreground mb-4 text-sm">
               {this.state.error?.message ?? 'An unexpected error occurred'}
             </p>
             <button
               onClick={() => this.setState({ hasError: false, error: null })}
-              className="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-md hover:bg-primary/90 transition-colors"
+              className="text-primary-foreground bg-primary hover:bg-primary/90 rounded-md px-4 py-2 text-sm font-medium transition-colors"
             >
               Try Again
             </button>

package/src/components/FocalPointPicker.tsx

@@ -28,12 +28,12 @@ export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPo
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-2 text-sm font-medium text-[var(--foreground)]">
-        <Crosshair className="w-4 h-4" />
+        <Crosshair className="h-4 w-4" />
         Focal Point
       </div>
       <div
         ref={containerRef}
-        className="relative rounded-lg overflow-hidden border border-[var(--border)] cursor-crosshair select-none"
+        className="relative cursor-crosshair overflow-hidden rounded-lg border border-[var(--border)] select-none"
         style={{ maxHeight: '200px' }}
         onClick={handlePosition}
         onMouseDown={() => setDragging(true)}
@@ -46,11 +46,11 @@ export function FocalPointPicker({ imageUrl, focalX, focalY, onChange }: FocalPo
         <img
           src={imageUrl}
           alt="Focal point preview"
-          className="w-full h-full object-contain"
+          className="h-full w-full object-contain"
           draggable={false}
         />
         <div
-          className="absolute w-6 h-6 -ml-3 -mt-3 rounded-full border-2 border-white shadow-lg bg-blue-500/50 pointer-events-none"
+          className="pointer-events-none absolute -mt-3 -ml-3 h-6 w-6 rounded-full border-2 border-white bg-blue-500/50 shadow-lg"
           style={{ left: `${focalX * 100}%`, top: `${focalY * 100}%` }}
         >
           <div className="absolute inset-1 rounded-full bg-white" />