@actuate-media/cms-admin 0.9.0 → 0.11.0

package/src/views/SetupWizard.tsx

@@ -69,18 +69,18 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
 
   if (done) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+      <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
         <div className="w-full max-w-md text-center">
-          <div className="mx-auto mb-6 w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
-            <CheckCircle2 className="w-8 h-8 text-green-600" />
+          <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
+            <CheckCircle2 className="h-8 w-8 text-green-600" />
           </div>
-          <h1 className="text-2xl font-bold text-gray-900 mb-2">Setup Complete</h1>
-          <p className="text-gray-600 mb-6">
+          <h1 className="mb-2 text-2xl font-bold text-gray-900">Setup Complete</h1>
+          <p className="mb-6 text-gray-600">
             Your admin account has been created. You can now sign in to manage your content.
           </p>
           <button
             onClick={() => window.location.reload()}
-            className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+            className="w-full rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700"
           >
             Go to Login
           </button>
@@ -90,29 +90,29 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+    <div className="flex min-h-screen items-center justify-center bg-gray-50 px-4">
       <div className="w-full max-w-md">
-        <div className="text-center mb-8">
-          <div className="mx-auto mb-4 w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center">
-            <Shield className="w-7 h-7 text-white" />
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-600">
+            <Shield className="h-7 w-7 text-white" />
           </div>
           <h1 className="text-2xl font-bold text-gray-900">Welcome to {siteName}</h1>
-          <p className="text-gray-600 mt-2">Create your admin account to get started</p>
+          <p className="mt-2 text-gray-600">Create your admin account to get started</p>
         </div>
 
         <form
           onSubmit={handleSubmit}
-          className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5"
+          className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
         >
           {error && (
-            <div className="flex items-start gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
-              <AlertTriangle className="w-5 h-5 text-red-600 mt-0.5 shrink-0" />
+            <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+              <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
               <p className="text-sm text-red-800">{error}</p>
             </div>
           )}
 
           <div>
-            <label htmlFor="setup-name" className="block text-sm font-medium text-gray-700 mb-1.5">
+            <label htmlFor="setup-name" className="mb-1.5 block text-sm font-medium text-gray-700">
               Full Name
             </label>
             <input
@@ -121,7 +121,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="Jane Smith"
-              className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
               required
               autoFocus
               autoComplete="name"
@@ -129,7 +129,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           </div>
 
           <div>
-            <label htmlFor="setup-email" className="block text-sm font-medium text-gray-700 mb-1.5">
+            <label htmlFor="setup-email" className="mb-1.5 block text-sm font-medium text-gray-700">
               Email Address
             </label>
             <input
@@ -138,7 +138,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="admin@example.com"
-              className="w-full px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
               required
               autoComplete="email"
             />
@@ -147,7 +147,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <div>
             <label
               htmlFor="setup-password"
-              className="block text-sm font-medium text-gray-700 mb-1.5"
+              className="mb-1.5 block text-sm font-medium text-gray-700"
             >
               Password
             </label>
@@ -158,7 +158,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 placeholder="Minimum 12 characters"
-                className="w-full px-3 py-2.5 pr-10 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 pr-10 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 required
                 minLength={12}
                 autoComplete="new-password"
@@ -166,16 +166,16 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
               <button
                 type="button"
                 onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                 tabIndex={-1}
               >
-                {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
               </button>
             </div>
             {password && (
               <div className="mt-2">
                 <div className="flex items-center gap-2">
-                  <div className="flex-1 h-1.5 bg-gray-200 rounded-full overflow-hidden">
+                  <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
                     <div
                       className={`h-full rounded-full transition-all ${strength.color}`}
                       style={{ width: `${(strength.score / 6) * 100}%` }}
@@ -190,7 +190,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <div>
             <label
               htmlFor="setup-confirm"
-              className="block text-sm font-medium text-gray-700 mb-1.5"
+              className="mb-1.5 block text-sm font-medium text-gray-700"
             >
               Confirm Password
             </label>
@@ -200,26 +200,26 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
               placeholder="Re-enter your password"
-              className={`w-full px-3 py-2.5 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${
+              className={`w-full rounded-lg border px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none ${
                 confirmPassword && !passwordsMatch ? 'border-red-300' : 'border-gray-300'
               }`}
               required
               autoComplete="new-password"
             />
             {confirmPassword && !passwordsMatch && (
-              <p className="text-xs text-red-600 mt-1">Passwords do not match</p>
+              <p className="mt-1 text-xs text-red-600">Passwords do not match</p>
             )}
           </div>
 
           <button
             type="submit"
             disabled={!canSubmit}
-            className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {submitting ? 'Creating Account...' : 'Create Admin Account'}
           </button>
 
-          <p className="text-xs text-gray-500 text-center">
+          <p className="text-center text-xs text-gray-500">
             This form is only available during initial setup. Once an admin account exists, it will
             be replaced by the login screen.
           </p>

package/src/views/Users.tsx

@@ -82,17 +82,17 @@ export function Users({ onNavigate }: UsersProps) {
       <button
         type="button"
         onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
-        className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors"
+        className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900"
       >
         {label}
         {active ? (
           sortConfig!.direction === 'asc' ? (
-            <ArrowUp className="w-3 h-3" />
+            <ArrowUp className="h-3 w-3" />
           ) : (
-            <ArrowDown className="w-3 h-3" />
+            <ArrowDown className="h-3 w-3" />
           )
         ) : (
-          <ArrowUpDown className="w-3 h-3 text-gray-400" />
+          <ArrowUpDown className="h-3 w-3 text-gray-400" />
         )}
       </button>
     )
@@ -100,8 +100,8 @@ export function Users({ onNavigate }: UsersProps) {
 
   if (loading) {
     return (
-      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
@@ -110,11 +110,11 @@ export function Users({ onNavigate }: UsersProps) {
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
@@ -136,22 +136,22 @@ export function Users({ onNavigate }: UsersProps) {
         </button>
       </div>
 
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
-        <div className="p-3 flex flex-col sm:flex-row gap-3">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+        <div className="flex flex-col gap-3 p-3 sm:flex-row">
           <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
             <input
               type="text"
               placeholder="Search users by name or email..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
           <select
             value={filterRole}
             onChange={(e) => setFilterRole(e.target.value)}
-            className="px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
           >
             <option value="all">All Roles</option>
             <option value="admin">Admin</option>
@@ -164,10 +164,10 @@ export function Users({ onNavigate }: UsersProps) {
 
       {filteredAndSorted.length === 0 && !loading ? (
         <div className="flex flex-col items-center justify-center py-16 text-center">
-          <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
-            <UserPlus className="w-6 h-6 text-gray-400" />
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+            <UserPlus className="h-6 w-6 text-gray-400" />
           </div>
-          <h3 className="text-sm font-medium text-gray-900 mb-1">No users yet</h3>
+          <h3 className="mb-1 text-sm font-medium text-gray-900">No users yet</h3>
           <p className="text-sm text-gray-500">Invite your first user to get started.</p>
         </div>
       ) : (
@@ -261,7 +261,7 @@ export function Users({ onNavigate }: UsersProps) {
       <Dialog.Root open={showInviteDialog} onOpenChange={setShowInviteDialog}>
         <Dialog.Portal>
           <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
-          <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
+          <Dialog.Content className="fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
             <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">
               Invite User
             </Dialog.Title>
@@ -275,7 +275,7 @@ export function Users({ onNavigate }: UsersProps) {
                   value={inviteEmail}
                   onChange={(e) => setInviteEmail(e.target.value)}
                   placeholder="user@example.com"
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   required
                 />
               </div>
@@ -284,7 +284,7 @@ export function Users({ onNavigate }: UsersProps) {
                 <select
                   value={inviteRole}
                   onChange={(e) => setInviteRole(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="viewer">Viewer</option>
                   <option value="editor">Editor</option>

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

@@ -54,7 +54,7 @@ export function AIBlockAssist({
     <button
       onClick={handleGenerate}
       disabled={generating}
-      className="flex items-center gap-1.5 px-2.5 py-1 text-xs text-primary hover:bg-primary/10 rounded-md transition-colors disabled:opacity-50"
+      className="text-primary hover:bg-primary/10 flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs transition-colors disabled:opacity-50"
       title="Generate content with AI"
     >
       {generating ? <Loader2 size={12} className="animate-spin" /> : <Sparkles size={12} />}