@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/views/DocumentEdit.tsx

@@ -298,8 +298,8 @@ export function DocumentEdit({
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center min-h-[300px]">
-        <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
+      <div className="flex min-h-[300px] items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
       </div>
     )
   }
@@ -310,12 +310,12 @@ export function DocumentEdit({
         <div className="flex items-center gap-3">
           <h1 className="text-2xl font-bold">{displayTitle}</h1>
           <span
-            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusColor}`}
+            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor}`}
           >
             {docStatus}
           </span>
           {documentId && <PresenceIndicator documentId={documentId} />}
-          {isDirty && <span className="text-xs text-amber-600 font-medium">Unsaved changes</span>}
+          {isDirty && <span className="text-xs font-medium text-amber-600">Unsaved changes</span>}
         </div>
         <div className="flex items-center gap-2">
           <button
@@ -360,11 +360,11 @@ export function DocumentEdit({
       <div className={showPreview ? 'grid grid-cols-2 gap-6' : ''}>
         <div className="space-y-6">
           {fields.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-center rounded-lg border border-[var(--border)]">
-              <div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
-                <AlertTriangle className="w-6 h-6 text-gray-400" />
+            <div className="flex flex-col items-center justify-center rounded-lg border border-[var(--border)] py-16 text-center">
+              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+                <AlertTriangle className="h-6 w-6 text-gray-400" />
               </div>
-              <h3 className="text-sm font-medium text-gray-900 mb-1">
+              <h3 className="mb-1 text-sm font-medium text-gray-900">
                 Collection schema not found
               </h3>
               <p className="text-sm text-gray-500">No fields are defined for this collection.</p>
@@ -517,7 +517,7 @@ export function DocumentEdit({
               Cancel
             </Button>
             <Button variant="primary" loading={saving} onClick={handleSave} data-shortcut="save">
-              <Save className="h-4 w-4 mr-1.5" />
+              <Save className="mr-1.5 h-4 w-4" />
               {isNew ? 'Create' : 'Save Changes'}
             </Button>
           </div>

package/src/views/ForgotPassword.tsx

@@ -42,25 +42,25 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
   }
 
   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">Reset Password</h1>
-          <p className="text-gray-600 mt-2">
+          <p className="mt-2 text-gray-600">
             {sent
               ? 'Check your inbox for a reset link'
               : "Enter your email and we'll send you a reset link"}
           </p>
         </div>
 
-        <div className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5">
+        <div className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
           {sent ? (
-            <div className="text-center space-y-4">
-              <div className="mx-auto w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
-                <CheckCircle2 className="w-6 h-6 text-green-600" />
+            <div className="space-y-4 text-center">
+              <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                <CheckCircle2 className="h-6 w-6 text-green-600" />
               </div>
               <p className="text-sm text-gray-600">
                 If an account exists for <strong>{email}</strong>, you will receive a password reset
@@ -72,7 +72,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
               <button
                 type="button"
                 onClick={() => onNavigate('/login')}
-                className="w-full py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
+                className="w-full rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700"
               >
                 Back to Sign In
               </button>
@@ -80,8 +80,8 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">
               {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>
               )}
@@ -89,7 +89,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
               <div>
                 <label
                   htmlFor="forgot-email"
-                  className="block text-sm font-medium text-gray-700 mb-1.5"
+                  className="mb-1.5 block text-sm font-medium text-gray-700"
                 >
                   Email Address
                 </label>
@@ -99,7 +99,7 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
                   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
                   autoFocus
                   autoComplete="email"
@@ -109,11 +109,11 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
               <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 flex items-center justify-center gap-2"
+                className="flex w-full items-center justify-center gap-2 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 ? (
                   <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <Loader2 className="h-4 w-4 animate-spin" />
                     Sending...
                   </>
                 ) : (
@@ -127,9 +127,9 @@ export function ForgotPassword({ onNavigate }: ForgotPasswordProps) {
             <button
               type="button"
               onClick={() => onNavigate('/login')}
-              className="w-full flex items-center justify-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+              className="flex w-full items-center justify-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-800"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeft className="h-4 w-4" />
               Back to Sign In
             </button>
           )}

package/src/views/FormEditor.tsx

@@ -174,21 +174,21 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
 
   if (loading) {
     return (
-      <div className="p-4 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-4">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8 max-w-4xl">
+    <div className="max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8">
       {/* Header */}
-      <div className="flex items-center gap-3 mb-6">
+      <div className="mb-6 flex items-center gap-3">
         <button
           onClick={() => onNavigate?.('/forms')}
-          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+          className="rounded-lg p-2 transition-colors hover:bg-gray-100"
         >
-          <ArrowLeft className="w-5 h-5 text-gray-600" />
+          <ArrowLeft className="h-5 w-5 text-gray-600" />
         </button>
         <div className="flex-1">
           <h1 className="text-xl font-semibold text-gray-900">
@@ -198,42 +198,42 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         <button
           onClick={handleSave}
           disabled={saving || !name.trim()}
-          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm disabled:opacity-50"
+          className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
         >
-          {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
           {saving ? 'Saving...' : 'Save'}
         </button>
       </div>
 
       {/* Basic info */}
-      <div className="bg-white rounded-lg border border-gray-200 p-4 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
         <div className="grid gap-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Form Name</label>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Form Name</label>
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g. Contact Form"
-              className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Description</label>
             <input
               type="text"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               placeholder="Brief description of this form"
-              className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Status</label>
             <select
               value={status}
               onChange={(e) => setStatus(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="active">Active</option>
               <option value="inactive">Inactive</option>
@@ -243,16 +243,16 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Fields section */}
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
         <button
           onClick={() => toggleSection('fields')}
-          className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
+          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'fields' ? (
-              <ChevronDown className="w-4 h-4" />
+              <ChevronDown className="h-4 w-4" />
             ) : (
-              <ChevronRight className="w-4 h-4" />
+              <ChevronRight className="h-4 w-4" />
             )}
             <span className="font-medium text-gray-900">Form Fields</span>
             <span className="text-sm text-gray-500">({fields.length})</span>
@@ -260,20 +260,20 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         </button>
         {expandedSection === 'fields' && (
           <div className="border-t border-gray-200 p-4">
-            <div className="flex flex-wrap gap-2 mb-4">
+            <div className="mb-4 flex flex-wrap gap-2">
               {FIELD_TYPES.map((ft) => (
                 <button
                   key={ft.value}
                   onClick={() => addField(ft.value)}
-                  className="flex items-center gap-1 px-3 py-1.5 text-xs border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                  className="flex items-center gap-1 rounded-lg border border-gray-300 px-3 py-1.5 text-xs transition-colors hover:bg-gray-50"
                 >
-                  <Plus className="w-3 h-3" /> {ft.label}
+                  <Plus className="h-3 w-3" /> {ft.label}
                 </button>
               ))}
             </div>
 
             {fields.length === 0 ? (
-              <p className="text-sm text-gray-500 text-center py-6">
+              <p className="py-6 text-center text-sm text-gray-500">
                 Click a field type above to add it to your form.
               </p>
             ) : (
@@ -288,19 +288,19 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       const from = Number(e.dataTransfer.getData('text/plain'))
                       moveField(from, index)
                     }}
-                    className="flex items-center gap-3 p-3 border border-gray-200 rounded-lg bg-gray-50 hover:bg-white transition-colors"
+                    className="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-3 transition-colors hover:bg-white"
                   >
-                    <GripVertical className="w-4 h-4 text-gray-400 cursor-grab shrink-0" />
+                    <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-gray-400" />
                     <input
                       type="text"
                       value={field.label}
                       onChange={(e) => updateField(field.id, { label: e.target.value })}
-                      className="flex-1 px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      className="flex-1 rounded border border-gray-300 px-2 py-1 text-sm focus:ring-1 focus:ring-blue-500 focus:outline-none"
                     />
-                    <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded shrink-0">
+                    <span className="shrink-0 rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-500">
                       {field.type}
                     </span>
-                    <label className="flex items-center gap-1 text-xs text-gray-600 shrink-0">
+                    <label className="flex shrink-0 items-center gap-1 text-xs text-gray-600">
                       <input
                         type="checkbox"
                         checked={field.required}
@@ -311,9 +311,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     </label>
                     <button
                       onClick={() => removeField(field.id)}
-                      className="p-1 text-red-500 hover:bg-red-50 rounded transition-colors shrink-0"
+                      className="shrink-0 rounded p-1 text-red-500 transition-colors hover:bg-red-50"
                     >
-                      <Trash2 className="w-4 h-4" />
+                      <Trash2 className="h-4 w-4" />
                     </button>
                   </div>
                 ))}
@@ -324,20 +324,20 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Confirmation section */}
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
         <button
           onClick={() => toggleSection('confirmation')}
-          className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
+          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'confirmation' ? (
-              <ChevronDown className="w-4 h-4" />
+              <ChevronDown className="h-4 w-4" />
             ) : (
-              <ChevronRight className="w-4 h-4" />
+              <ChevronRight className="h-4 w-4" />
             )}
-            <MessageSquare className="w-4 h-4 text-green-600" />
+            <MessageSquare className="h-4 w-4 text-green-600" />
             <span className="font-medium text-gray-900">Confirmation</span>
-            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
+            <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-500">
               {confirmation.type === 'message' ? 'Show Message' : 'Redirect'}
             </span>
           </div>
@@ -345,12 +345,12 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         {expandedSection === 'confirmation' && (
           <div className="border-t border-gray-200 p-4">
             <div className="mb-4">
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="mb-2 block text-sm font-medium text-gray-700">
                 After submission
               </label>
               <div className="flex gap-3">
                 <label
-                  className="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
+                  className="flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors hover:bg-gray-50"
                   style={{
                     borderColor: confirmation.type === 'message' ? '#2563eb' : '#d1d5db',
                     backgroundColor: confirmation.type === 'message' ? '#eff6ff' : 'transparent',
@@ -364,11 +364,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     onChange={() => setConfirmation((c) => ({ ...c, type: 'message' }))}
                     className="text-blue-600"
                   />
-                  <MessageSquare className="w-4 h-4" />
+                  <MessageSquare className="h-4 w-4" />
                   <span className="text-sm">Show Message</span>
                 </label>
                 <label
-                  className="flex items-center gap-2 px-4 py-2 border rounded-lg cursor-pointer transition-colors hover:bg-gray-50"
+                  className="flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors hover:bg-gray-50"
                   style={{
                     borderColor: confirmation.type === 'redirect' ? '#2563eb' : '#d1d5db',
                     backgroundColor: confirmation.type === 'redirect' ? '#eff6ff' : 'transparent',
@@ -382,7 +382,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     onChange={() => setConfirmation((c) => ({ ...c, type: 'redirect' }))}
                     className="text-blue-600"
                   />
-                  <ExternalLink className="w-4 h-4" />
+                  <ExternalLink className="h-4 w-4" />
                   <span className="text-sm">Redirect to Page</span>
                 </label>
               </div>
@@ -390,21 +390,21 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
 
             {confirmation.type === 'message' ? (
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="mb-1 block text-sm font-medium text-gray-700">
                   Success Message
                 </label>
                 <textarea
                   value={confirmation.message}
                   onChange={(e) => setConfirmation((c) => ({ ...c, message: e.target.value }))}
                   rows={3}
-                  className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   placeholder="Thank you! Your submission has been received."
                 />
               </div>
             ) : (
               <div className="grid gap-3">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
                     Redirect URL
                   </label>
                   <input
@@ -414,11 +414,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       setConfirmation((c) => ({ ...c, redirectUrl: e.target.value }))
                     }
                     placeholder="https://example.com/thank-you"
-                    className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
                 </div>
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
                     Redirect Delay (ms)
                   </label>
                   <input
@@ -429,9 +429,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                     }
                     min={0}
                     step={500}
-                    className="w-32 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-32 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
-                  <p className="text-xs text-gray-500 mt-1">0 = instant redirect</p>
+                  <p className="mt-1 text-xs text-gray-500">0 = instant redirect</p>
                 </div>
               </div>
             )}
@@ -440,21 +440,21 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
       </div>
 
       {/* Analytics section */}
-      <div className="bg-white rounded-lg border border-gray-200 mb-4">
+      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
         <button
           onClick={() => toggleSection('analytics')}
-          className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
+          className="flex w-full items-center justify-between p-4 transition-colors hover:bg-gray-50"
         >
           <div className="flex items-center gap-2">
             {expandedSection === 'analytics' ? (
-              <ChevronDown className="w-4 h-4" />
+              <ChevronDown className="h-4 w-4" />
             ) : (
-              <ChevronRight className="w-4 h-4" />
+              <ChevronRight className="h-4 w-4" />
             )}
-            <BarChart3 className="w-4 h-4 text-purple-600" />
+            <BarChart3 className="h-4 w-4 text-purple-600" />
             <span className="font-medium text-gray-900">GA4 Analytics</span>
             <span
-              className={`text-xs px-2 py-0.5 rounded ${analytics.enabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}
+              className={`rounded px-2 py-0.5 text-xs ${analytics.enabled ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}
             >
               {analytics.enabled ? 'Enabled' : 'Disabled'}
             </span>
@@ -462,15 +462,15 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         </button>
         {expandedSection === 'analytics' && (
           <div className="border-t border-gray-200 p-4">
-            <div className="flex items-center gap-3 mb-4">
-              <label className="relative inline-flex items-center cursor-pointer">
+            <div className="mb-4 flex items-center gap-3">
+              <label className="relative inline-flex cursor-pointer items-center">
                 <input
                   type="checkbox"
                   checked={analytics.enabled}
                   onChange={(e) => setAnalytics((a) => ({ ...a, enabled: e.target.checked }))}
-                  className="sr-only peer"
+                  className="peer sr-only"
                 />
-                <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600" />
+                <div className="peer h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-300 peer-focus:outline-none after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
               </label>
               <span className="text-sm font-medium text-gray-700">
                 Push events to Google Analytics 4
@@ -480,25 +480,25 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
             {analytics.enabled && (
               <div className="grid gap-4 pl-12">
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                  <label className="mb-1 block text-sm font-medium text-gray-700">
                     GA4 Measurement ID
-                    <span className="text-gray-400 font-normal"> (optional)</span>
+                    <span className="font-normal text-gray-400"> (optional)</span>
                   </label>
                   <input
                     type="text"
                     value={analytics.measurementId}
                     onChange={(e) => setAnalytics((a) => ({ ...a, measurementId: e.target.value }))}
                     placeholder="G-XXXXXXXXXX"
-                    className="w-64 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-64 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   />
-                  <p className="text-xs text-gray-500 mt-1">
+                  <p className="mt-1 text-xs text-gray-500">
                     Leave blank to use your site's default GA4 tag
                   </p>
                 </div>
 
                 <div className="grid grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="mb-1 block text-sm font-medium text-gray-700">
                       Submit Event Name
                     </label>
                     <input
@@ -507,11 +507,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       onChange={(e) =>
                         setAnalytics((a) => ({ ...a, submitEventName: e.target.value }))
                       }
-                      className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                     />
                   </div>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                    <label className="mb-1 block text-sm font-medium text-gray-700">
                       Start Event Name
                     </label>
                     <input
@@ -520,13 +520,13 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                       onChange={(e) =>
                         setAnalytics((a) => ({ ...a, startEventName: e.target.value }))
                       }
-                      className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                     />
                   </div>
                 </div>
 
                 <div className="border-t border-gray-200 pt-4">
-                  <div className="flex items-center gap-3 mb-3">
+                  <div className="mb-3 flex items-center gap-3">
                     <input
                       type="checkbox"
                       id="trackConversion"
@@ -542,9 +542,9 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   </div>
 
                   {analytics.trackAsConversion && (
-                    <div className="grid grid-cols-2 gap-4 ml-6">
+                    <div className="ml-6 grid grid-cols-2 gap-4">
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                        <label className="mb-1 block text-sm font-medium text-gray-700">
                           Conversion Value
                         </label>
                         <input
@@ -555,11 +555,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                           }
                           min={0}
                           step={0.01}
-                          className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                         />
                       </div>
                       <div>
-                        <label className="block text-sm font-medium text-gray-700 mb-1">
+                        <label className="mb-1 block text-sm font-medium text-gray-700">
                           Currency
                         </label>
                         <select
@@ -567,7 +567,7 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                           onChange={(e) =>
                             setAnalytics((a) => ({ ...a, conversionCurrency: e.target.value }))
                           }
-                          className="w-full px-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 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                         >
                           <option value="USD">USD</option>
                           <option value="EUR">EUR</option>
@@ -580,12 +580,12 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   )}
                 </div>
 
-                <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <div className="rounded-lg border border-blue-200 bg-blue-50 p-3">
                   <p className="text-xs text-blue-800">
                     <strong>Note:</strong> Your site must have the GA4 snippet or GTM container
                     installed. Actuate pushes events via{' '}
-                    <code className="bg-blue-100 px-1 rounded">gtag()</code> /
-                    <code className="bg-blue-100 px-1 rounded">dataLayer</code> — it does not load
+                    <code className="rounded bg-blue-100 px-1">gtag()</code> /
+                    <code className="rounded bg-blue-100 px-1">dataLayer</code> — it does not load
                     the GA4 script.
                   </p>
                 </div>