@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/views/ScriptTagEditor.tsx

@@ -110,18 +110,18 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
 
   if (loading && !isNew) {
     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>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8 max-w-3xl">
+    <div className="max-w-3xl 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>
         </div>
       )}
 
@@ -129,9 +129,9 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
         <button
           type="button"
           onClick={() => onNavigate?.('/script-tags')}
-          className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors mb-3"
+          className="mb-3 flex items-center gap-1.5 text-sm text-gray-500 transition-colors hover:text-gray-700"
         >
-          <ArrowLeft className="w-4 h-4" />
+          <ArrowLeft className="h-4 w-4" />
           Back to Script Tags
         </button>
         <h1 className="text-2xl font-semibold text-gray-900">
@@ -139,9 +139,9 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
         </h1>
       </div>
 
-      <div className="rounded-lg border border-amber-200 bg-amber-50 p-3 mb-6">
+      <div className="mb-6 rounded-lg border border-amber-200 bg-amber-50 p-3">
         <div className="flex items-start gap-2">
-          <AlertTriangle className="w-4 h-4 text-amber-600 mt-0.5 shrink-0" />
+          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600" />
           <p className="text-sm text-amber-800">
             This code will run on public pages matching the scope below. Only add trusted code from
             verified sources (e.g. Google Analytics, Meta Pixel).
@@ -150,7 +150,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
       </div>
 
       <div className="space-y-6">
-        <div className="rounded-lg border border-gray-200 bg-white p-4 space-y-4">
+        <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-4">
           <div>
             <label className="mb-1 block text-sm font-medium text-gray-700">Name</label>
             <input
@@ -158,7 +158,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g. Google Tag Manager, Facebook Pixel"
-              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"
             />
           </div>
 
@@ -169,7 +169,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
               onChange={(e) => setCode(e.target.value)}
               placeholder="Paste your HTML/JavaScript snippet here..."
               rows={10}
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
               spellCheck={false}
             />
             <p className="mt-1 text-xs text-gray-500">
@@ -178,7 +178,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
           </div>
         </div>
 
-        <div className="rounded-lg border border-gray-200 bg-white p-4 space-y-4">
+        <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-4">
           <h3 className="text-sm font-semibold text-gray-900">Placement & Scope</h3>
 
           <div>
@@ -186,7 +186,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
             <select
               value={placement}
               onChange={(e) => setPlacement(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="head">Head — inside {'<head>'}</option>
               <option value="body_open">Body Open — right after {'<body>'}</option>
@@ -205,7 +205,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
             <select
               value={scope}
               onChange={(e) => setScope(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="site">Entire Website</option>
               <option value="parents">Specific Parent Pages (includes child pages)</option>
@@ -230,14 +230,14 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                     }
                   }}
                   placeholder="/services"
-                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 />
                 <button
                   type="button"
                   onClick={addPath}
-                  className="rounded-lg border border-gray-300 px-3 py-2 text-sm hover:bg-gray-50 transition-colors"
+                  className="rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors hover:bg-gray-50"
                 >
-                  <Plus className="w-4 h-4" />
+                  <Plus className="h-4 w-4" />
                 </button>
               </div>
               {scope === 'parents' && (
@@ -250,7 +250,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                   {targetPaths.map((p) => (
                     <span
                       key={p}
-                      className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs font-mono text-gray-700"
+                      className="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 font-mono text-xs text-gray-700"
                     >
                       {p}
                       <button
@@ -258,7 +258,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                         onClick={() => removePath(p)}
                         className="ml-0.5 text-gray-400 hover:text-gray-600"
                       >
-                        <X className="w-3 h-3" />
+                        <X className="h-3 w-3" />
                       </button>
                     </span>
                   ))}
@@ -275,7 +275,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                 value={priority}
                 onChange={(e) => setPriority(parseInt(e.target.value, 10) || 0)}
                 min={0}
-                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"
               />
               <p className="mt-1 text-xs text-gray-500">
                 Lower numbers load first (e.g. 1 = first, 100 = default)
@@ -328,9 +328,9 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
                   <button
                     type="button"
                     onClick={() => setShowDeleteConfirm(true)}
-                    className="flex items-center gap-1.5 text-sm text-red-600 hover:text-red-700 transition-colors"
+                    className="flex items-center gap-1.5 text-sm text-red-600 transition-colors hover:text-red-700"
                   >
-                    <Trash2 className="w-4 h-4" />
+                    <Trash2 className="h-4 w-4" />
                     Delete
                   </button>
                 )}
@@ -341,7 +341,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
             <button
               type="button"
               onClick={() => onNavigate?.('/script-tags')}
-              className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
+              className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50"
             >
               Cancel
             </button>

package/src/views/ScriptTags.tsx

@@ -72,8 +72,8 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
 
   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>
     )
   }
@@ -82,11 +82,11 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
     <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>
@@ -105,7 +105,7 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
           onClick={() => onNavigate?.('/script-tags/new')}
           className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
         >
-          <Plus className="w-4 h-4" />
+          <Plus className="h-4 w-4" />
           New Tag
         </button>
       </div>
@@ -122,12 +122,12 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
             onClick={() => onNavigate?.('/script-tags/new')}
             className="mt-4 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
           >
-            <Plus className="w-4 h-4" />
+            <Plus className="h-4 w-4" />
             Add Your First Tag
           </button>
         </div>
       ) : (
-        <div className="rounded-lg border border-gray-200 bg-white overflow-hidden">
+        <div className="overflow-hidden rounded-lg border border-gray-200 bg-white">
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-gray-200 bg-gray-50">
@@ -142,7 +142,7 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
               {tags.map((tag) => (
                 <tr
                   key={tag.id}
-                  className="border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors"
+                  className="border-b border-gray-100 transition-colors last:border-0 hover:bg-gray-50"
                 >
                   <td className="px-4 py-3">
                     <button
@@ -161,7 +161,7 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
                     </span>
                   </td>
                   <td className="px-4 py-3 text-gray-600">{scopeLabel(tag)}</td>
-                  <td className="px-4 py-3 text-center text-gray-600 font-mono">{tag.priority}</td>
+                  <td className="px-4 py-3 text-center font-mono text-gray-600">{tag.priority}</td>
                   <td className="px-4 py-3 text-center">
                     <button
                       type="button"