@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/components/LivePreview.tsx

@@ -79,8 +79,8 @@ export function LivePreview({
 
   if (!previewSrc) {
     return (
-      <div className="flex flex-col items-center justify-center h-full bg-gray-50 rounded-lg border border-dashed border-gray-300 p-8">
-        <p className="text-sm text-gray-500 text-center">
+      <div className="flex h-full flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8">
+        <p className="text-center text-sm text-gray-500">
           {!documentId
             ? 'Save the document first to enable preview'
             : 'Configure a preview URL in the collection settings to enable live preview'}
@@ -93,8 +93,8 @@ export function LivePreview({
   }
 
   return (
-    <div className="flex flex-col h-full border-l border-gray-200 bg-white">
-      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 bg-gray-50">
+    <div className="flex h-full flex-col border-l border-gray-200 bg-white">
+      <div className="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-3 py-2">
         <div className="flex items-center gap-1">
           {(
             [
@@ -106,52 +106,52 @@ export function LivePreview({
             <button
               key={vp}
               onClick={() => setViewport(vp)}
-              className={`p-1.5 rounded ${viewport === vp ? 'bg-white shadow-sm text-blue-600' : 'text-gray-400 hover:text-gray-600'}`}
+              className={`rounded p-1.5 ${viewport === vp ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`}
               title={vp}
             >
-              <Icon className="w-4 h-4" />
+              <Icon className="h-4 w-4" />
             </button>
           ))}
         </div>
         <div className="flex items-center gap-1">
           <button
             onClick={handleRefresh}
-            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
             title="Refresh"
           >
-            <RefreshCw className="w-4 h-4" />
+            <RefreshCw className="h-4 w-4" />
           </button>
           <button
             onClick={handleOpenExternal}
-            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
             title="Open in new tab"
           >
-            <ExternalLink className="w-4 h-4" />
+            <ExternalLink className="h-4 w-4" />
           </button>
           <button
             onClick={onClose}
-            className="p-1.5 rounded text-gray-400 hover:text-gray-600"
+            className="rounded p-1.5 text-gray-400 hover:text-gray-600"
             title="Close"
           >
-            <X className="w-4 h-4" />
+            <X className="h-4 w-4" />
           </button>
         </div>
       </div>
 
-      <div className="flex-1 overflow-auto flex justify-center bg-gray-100 p-4">
+      <div className="flex flex-1 justify-center overflow-auto bg-gray-100 p-4">
         <div
           style={{ width: VIEWPORT_WIDTHS[viewport], maxWidth: '100%', transition: 'width 0.3s' }}
           className="relative"
         >
           {loading && (
-            <div className="absolute inset-0 flex items-center justify-center bg-white/80 z-10 rounded-lg">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/80">
+              <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600" />
             </div>
           )}
           <iframe
             ref={iframeRef}
             src={previewSrc}
-            className="w-full h-full bg-white rounded-lg shadow-lg border border-gray-200"
+            className="h-full w-full rounded-lg border border-gray-200 bg-white shadow-lg"
             style={{ minHeight: '600px' }}
             onLoad={() => setLoading(false)}
             title="Page Preview"

package/src/components/LocaleSwitcher.tsx

@@ -15,20 +15,20 @@ export function LocaleSwitcher() {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
         <button
-          className="flex items-center gap-1.5 px-2 py-1.5 text-sm hover:bg-[var(--accent)] rounded-lg transition-colors"
+          className="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-[var(--accent)]"
           aria-label="Switch locale"
         >
-          <Globe className="w-4 h-4 text-[var(--muted-foreground)]" />
-          <span className="hidden sm:inline text-[var(--foreground)] text-sm font-medium">
+          <Globe className="h-4 w-4 text-[var(--muted-foreground)]" />
+          <span className="hidden text-sm font-medium text-[var(--foreground)] sm:inline">
             {activeLabel}
           </span>
-          <ChevronDown className="w-3 h-3 text-[var(--muted-foreground)]" />
+          <ChevronDown className="h-3 w-3 text-[var(--muted-foreground)]" />
         </button>
       </DropdownMenu.Trigger>
 
       <DropdownMenu.Portal>
         <DropdownMenu.Content
-          className="min-w-[160px] bg-[var(--popover)] text-[var(--popover-foreground)] rounded-lg border border-[var(--border)] shadow-lg p-1 z-50"
+          className="z-50 min-w-[160px] rounded-lg border border-[var(--border)] bg-[var(--popover)] p-1 text-[var(--popover-foreground)] shadow-lg"
           align="end"
           sideOffset={5}
         >
@@ -36,10 +36,10 @@ export function LocaleSwitcher() {
             <DropdownMenu.Item
               key={locale.code}
               onSelect={() => setLocale(locale.code)}
-              className="flex items-center justify-between gap-2 px-3 py-2 text-sm hover:bg-[var(--accent)] rounded cursor-pointer outline-none"
+              className="flex cursor-pointer items-center justify-between gap-2 rounded px-3 py-2 text-sm outline-none hover:bg-[var(--accent)]"
             >
               <span>{locale.label}</span>
-              {locale.code === activeLocale && <Check className="w-4 h-4 text-[var(--primary)]" />}
+              {locale.code === activeLocale && <Check className="h-4 w-4 text-[var(--primary)]" />}
             </DropdownMenu.Item>
           ))}
         </DropdownMenu.Content>

package/src/components/MediaPickerModal.tsx

@@ -73,14 +73,14 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="fixed inset-0 bg-black/40" onClick={onClose} />
-      <div className="relative bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col mx-4">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200">
+      <div className="relative mx-4 flex max-h-[80vh] w-full max-w-2xl flex-col rounded-xl bg-white shadow-2xl">
+        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
           <h2 className="text-lg font-semibold text-gray-900">Insert Image</h2>
           <button
             onClick={onClose}
-            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
           >
-            <X className="w-5 h-5 text-gray-500" />
+            <X className="h-5 w-5 text-gray-500" />
           </button>
         </div>
 
@@ -89,7 +89,7 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
             onClick={() => setTab('library')}
             className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
               tab === 'library'
-                ? 'text-blue-600 border-b-2 border-blue-600'
+                ? 'border-b-2 border-blue-600 text-blue-600'
                 : 'text-gray-500 hover:text-gray-700'
             }`}
           >
@@ -99,7 +99,7 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
             onClick={() => setTab('upload')}
             className={`flex-1 px-4 py-2.5 text-sm font-medium transition-colors ${
               tab === 'upload'
-                ? 'text-blue-600 border-b-2 border-blue-600'
+                ? 'border-b-2 border-blue-600 text-blue-600'
                 : 'text-gray-500 hover:text-gray-700'
             }`}
           >
@@ -111,37 +111,37 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
           {tab === 'library' ? (
             <>
               <div className="relative mb-4">
-                <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"
                   value={search}
                   onChange={(e) => setSearch(e.target.value)}
                   placeholder="Search images..."
-                  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>
 
               {loading ? (
                 <div className="flex items-center justify-center py-12">
-                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+                  <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
                 </div>
               ) : imageItems.length === 0 ? (
-                <div className="text-center py-12 text-sm text-gray-500">
+                <div className="py-12 text-center text-sm text-gray-500">
                   No images found. Try uploading one.
                 </div>
               ) : (
-                <div className="grid grid-cols-3 sm:grid-cols-4 gap-3">
+                <div className="grid grid-cols-3 gap-3 sm:grid-cols-4">
                   {imageItems.map((item: MediaItem) => (
                     <button
                       key={item.id}
                       onClick={() => handleSelectItem(item)}
-                      className="group relative aspect-square rounded-lg border-2 border-gray-200 hover:border-blue-500 overflow-hidden bg-gray-100 transition-colors"
+                      className="group relative aspect-square overflow-hidden rounded-lg border-2 border-gray-200 bg-gray-100 transition-colors hover:border-blue-500"
                     >
-                      <div className="w-full h-full flex items-center justify-center">
-                        <ImageIcon className="w-8 h-8 text-gray-300" />
+                      <div className="flex h-full w-full items-center justify-center">
+                        <ImageIcon className="h-8 w-8 text-gray-300" />
                       </div>
-                      <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <p className="text-white text-xs truncate">{item.filename}</p>
+                      <div className="absolute inset-x-0 bottom-0 bg-black/60 p-1.5 opacity-0 transition-opacity group-hover:opacity-100">
+                        <p className="truncate text-xs text-white">{item.filename}</p>
                       </div>
                     </button>
                   ))}
@@ -157,20 +157,20 @@ export function MediaPickerModal({ open, onClose, onSelect, accept }: MediaPicke
                 className="hidden"
                 onChange={(e) => handleUpload(e.target.files)}
               />
-              <div className="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mb-4">
+              <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-50">
                 {uploading ? (
-                  <Loader2 className="w-8 h-8 text-blue-600 animate-spin" />
+                  <Loader2 className="h-8 w-8 animate-spin text-blue-600" />
                 ) : (
-                  <Upload className="w-8 h-8 text-blue-600" />
+                  <Upload className="h-8 w-8 text-blue-600" />
                 )}
               </div>
-              <p className="text-sm text-gray-600 mb-4">
+              <p className="mb-4 text-sm text-gray-600">
                 {uploading ? 'Uploading...' : 'Select an image file to upload'}
               </p>
               {!uploading && (
                 <button
                   onClick={() => fileInputRef.current?.click()}
-                  className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                  className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
                 >
                   Choose File
                 </button>

package/src/components/PresenceIndicator.tsx

@@ -57,7 +57,7 @@ export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicat
       {users.slice(0, 5).map((user, i) => (
         <div
           key={user.userId}
-          className="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-medium ring-2 ring-white"
+          className="flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white"
           style={{ backgroundColor: COLORS[i % COLORS.length] }}
           title={user.name}
         >
@@ -65,7 +65,7 @@ export function PresenceIndicator({ documentId, currentUserId }: PresenceIndicat
         </div>
       ))}
       {users.length > 5 && (
-        <div className="w-7 h-7 rounded-full flex items-center justify-center bg-muted text-muted-foreground text-xs font-medium ring-2 ring-white">
+        <div className="bg-muted text-muted-foreground flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium ring-2 ring-white">
           +{users.length - 5}
         </div>
       )}