@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/components/SEOPanel.tsx

@@ -438,10 +438,10 @@ function Section({
   badge?: React.ReactNode
 }) {
   return (
-    <div className="border border-[var(--border)] rounded-lg overflow-hidden">
+    <div className="overflow-hidden rounded-lg border border-[var(--border)]">
       <button
         onClick={() => onToggle(id)}
-        className="flex items-center justify-between w-full px-4 py-2.5 text-left text-sm font-medium text-[var(--foreground)] hover:bg-[var(--muted)] transition-colors"
+        className="flex w-full items-center justify-between px-4 py-2.5 text-left text-sm font-medium text-[var(--foreground)] transition-colors hover:bg-[var(--muted)]"
       >
         <span className="flex items-center gap-2">
           {icon}
@@ -454,7 +454,7 @@ function Section({
           <ChevronDown className="h-4 w-4 text-[var(--muted-foreground)]" />
         )}
       </button>
-      {expanded && <div className="px-4 pb-4 pt-1">{children}</div>}
+      {expanded && <div className="px-4 pt-1 pb-4">{children}</div>}
     </div>
   )
 }
@@ -472,9 +472,9 @@ function ToggleSwitch({
 }) {
   return (
     <div className="flex items-center justify-between gap-3">
-      <div className="flex-1 min-w-0">
+      <div className="min-w-0 flex-1">
         <label className="text-sm font-medium text-[var(--foreground)]">{label}</label>
-        <p className="text-xs text-[var(--muted-foreground)] mt-0.5">{description}</p>
+        <p className="mt-0.5 text-xs text-[var(--muted-foreground)]">{description}</p>
       </div>
       <button
         type="button"
@@ -484,7 +484,7 @@ function ToggleSwitch({
         className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors ${checked ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'}`}
       >
         <span
-          className={`pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm transition-transform mt-0.5 ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`}
+          className={`pointer-events-none mt-0.5 block h-5 w-5 rounded-full bg-white shadow-sm transition-transform ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`}
         />
       </button>
     </div>
@@ -510,18 +510,18 @@ function InputField({
 }) {
   return (
     <div>
-      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+      <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
         {label}
       </label>
       <input
         type={type}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] placeholder:text-[var(--muted-foreground)]"
+        className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
         placeholder={placeholder}
       />
       {charCount !== undefined && charTarget && (
-        <p className="text-xs mt-1 text-[var(--muted-foreground)]">
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">
           {charCount} chars {charTarget}
         </p>
       )}
@@ -548,18 +548,18 @@ function TextareaField({
 }) {
   return (
     <div>
-      <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+      <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
         {label}
       </label>
       <textarea
         value={value}
         onChange={(e) => onChange(e.target.value)}
         rows={rows}
-        className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] resize-none placeholder:text-[var(--muted-foreground)]"
+        className="w-full resize-none rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
         placeholder={placeholder}
       />
       {charCount !== undefined && charTarget && (
-        <p className="text-xs mt-1 text-[var(--muted-foreground)]">
+        <p className="mt-1 text-xs text-[var(--muted-foreground)]">
           {charCount} chars {charTarget}
         </p>
       )}
@@ -622,24 +622,24 @@ export function SEOPanel({
   return (
     <div className="rounded-lg border border-[var(--border)] bg-[var(--card)]">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
-        <h3 className="font-semibold text-[var(--foreground)] flex items-center gap-2 text-sm">
-          <Search className="w-4 h-4" />
+      <div className="flex items-center justify-between border-b border-[var(--border)] px-4 py-3">
+        <h3 className="flex items-center gap-2 text-sm font-semibold text-[var(--foreground)]">
+          <Search className="h-4 w-4" />
           SEO
         </h3>
         <button
           onClick={() => update({ metaTitle: title, ogTitle: '', ogDescription: '' })}
-          className="text-xs text-[var(--primary)] hover:opacity-80 flex items-center gap-1"
+          className="flex items-center gap-1 text-xs text-[var(--primary)] hover:opacity-80"
         >
-          <RefreshCw className="w-3 h-3" />
+          <RefreshCw className="h-3 w-3" />
           Reset
         </button>
       </div>
 
       {/* Score */}
-      <div className="flex items-center gap-4 px-4 py-3 border-b border-[var(--border)]">
+      <div className="flex items-center gap-4 border-b border-[var(--border)] px-4 py-3">
         <ScoreRing score={score} />
-        <div className="text-xs text-[var(--muted-foreground)] space-y-0.5">
+        <div className="space-y-0.5 text-xs text-[var(--muted-foreground)]">
           <div className="flex items-center gap-1.5">
             <CheckCircle2 className="h-3 w-3 text-green-500" /> {goodCount} passed
           </div>
@@ -653,7 +653,7 @@ export function SEOPanel({
       </div>
 
       {/* Sections */}
-      <div className="p-3 space-y-2">
+      <div className="space-y-2 p-3">
         {/* SEO Analysis */}
         <Section
           id="analysis"
@@ -672,7 +672,7 @@ export function SEOPanel({
               <div key={c.id} className="flex items-start gap-2 py-1">
                 <StatusDot status={c.status} />
                 <div className="min-w-0">
-                  <p className="text-sm text-[var(--foreground)] leading-snug">{c.label}</p>
+                  <p className="text-sm leading-snug text-[var(--foreground)]">{c.label}</p>
                   <p className="text-xs text-[var(--muted-foreground)]">{c.detail}</p>
                 </div>
               </div>
@@ -719,8 +719,8 @@ export function SEOPanel({
             <span
               className={
                 readability.passiveEstimate > 15
-                  ? 'text-amber-500 font-medium'
-                  : 'text-green-500 font-medium'
+                  ? 'font-medium text-amber-500'
+                  : 'font-medium text-green-500'
               }
             >
               {readability.passiveEstimate}%
@@ -781,7 +781,7 @@ export function SEOPanel({
             <div>
               <label
                 id="robots-policy-label"
-                className="mb-1 block text-xs font-medium text-muted-foreground"
+                className="text-muted-foreground mb-1 block text-xs font-medium"
               >
                 Robots Policy
               </label>
@@ -794,21 +794,21 @@ export function SEOPanel({
               >
                 <Select.Trigger
                   aria-labelledby="robots-policy-label"
-                  className="flex w-full items-center justify-between rounded-lg border border-border bg-background px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+                  className="border-border bg-background text-foreground focus:ring-primary flex w-full items-center justify-between rounded-lg border px-3 py-1.5 text-sm focus:ring-2 focus:outline-none"
                 >
                   <Select.Value />
                   <Select.Icon>
-                    <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                    <ChevronDown className="text-muted-foreground h-4 w-4" />
                   </Select.Icon>
                 </Select.Trigger>
                 <Select.Portal>
-                  <Select.Content className="z-50 overflow-hidden rounded-lg border border-border bg-card shadow-md">
+                  <Select.Content className="border-border bg-card z-50 overflow-hidden rounded-lg border shadow-md">
                     <Select.Viewport className="p-1">
                       {ROBOTS_POLICY_OPTIONS.map((option) => (
                         <Select.Item
                           key={option.value}
                           value={option.value}
-                          className="relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-8 pr-3 text-sm text-foreground outline-none hover:bg-muted focus:bg-muted"
+                          className="text-foreground hover:bg-muted focus:bg-muted relative flex cursor-pointer items-center rounded-md py-1.5 pr-3 pl-8 text-sm outline-none select-none"
                         >
                           <Select.ItemIndicator className="absolute left-2 inline-flex items-center">
                             <Check className="h-4 w-4" />
@@ -820,7 +820,7 @@ export function SEOPanel({
                   </Select.Content>
                 </Select.Portal>
               </Select.Root>
-              <p className="mt-1 text-xs text-muted-foreground">
+              <p className="text-muted-foreground mt-1 text-xs">
                 Use inheritance for most pages. Override only when a page needs different
                 index/follow behavior.
               </p>
@@ -836,14 +836,14 @@ export function SEOPanel({
           expanded={expandedSections.includes('preview')}
           onToggle={toggleSection}
         >
-          <div className="rounded-lg border border-[var(--border)] p-3 bg-[var(--background)]">
-            <div className="text-sm text-blue-600 hover:underline cursor-pointer line-clamp-1">
+          <div className="rounded-lg border border-[var(--border)] bg-[var(--background)] p-3">
+            <div className="line-clamp-1 cursor-pointer text-sm text-blue-600 hover:underline">
               {metaTitle || title || 'Page Title'}
             </div>
-            <div className="text-xs text-green-700 mt-1 truncate">
+            <div className="mt-1 truncate text-xs text-green-700">
               {siteUrl}/{slug}
             </div>
-            <div className="text-sm text-[var(--muted-foreground)] mt-1 line-clamp-2">
+            <div className="mt-1 line-clamp-2 text-sm text-[var(--muted-foreground)]">
               {metaDesc ||
                 'Add a meta description to see how this page will appear in search results.'}
             </div>
@@ -880,8 +880,8 @@ export function SEOPanel({
               type="url"
             />
 
-            <div className="border-t border-[var(--border)] pt-3 mt-3">
-              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">
+            <div className="mt-3 border-t border-[var(--border)] pt-3">
+              <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
                 Twitter / X Overrides
               </p>
               <div className="space-y-3">
@@ -910,31 +910,31 @@ export function SEOPanel({
 
             {/* Social preview card */}
             <div className="mt-3">
-              <p className="text-xs font-medium text-[var(--muted-foreground)] mb-2">
+              <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
                 Social Preview
               </p>
-              <div className="rounded-lg border border-[var(--border)] overflow-hidden bg-[var(--muted)]">
+              <div className="overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--muted)]">
                 {seoData.ogImage ? (
-                  <div className="aspect-video bg-[var(--muted)] flex items-center justify-center overflow-hidden">
+                  <div className="flex aspect-video items-center justify-center overflow-hidden bg-[var(--muted)]">
                     <img
                       src={seoData.ogImage}
                       alt="OG preview"
-                      className="w-full h-full object-cover"
+                      className="h-full w-full object-cover"
                     />
                   </div>
                 ) : (
-                  <div className="aspect-video bg-[var(--muted)] flex items-center justify-center text-[var(--muted-foreground)] text-sm">
+                  <div className="flex aspect-video items-center justify-center bg-[var(--muted)] text-sm text-[var(--muted-foreground)]">
                     No OG image set
                   </div>
                 )}
                 <div className="p-3">
-                  <div className="text-sm font-medium text-[var(--foreground)] line-clamp-1">
+                  <div className="line-clamp-1 text-sm font-medium text-[var(--foreground)]">
                     {displayTitle}
                   </div>
-                  <div className="text-xs text-[var(--muted-foreground)] mt-1 line-clamp-2">
+                  <div className="mt-1 line-clamp-2 text-xs text-[var(--muted-foreground)]">
                     {displayDesc.slice(0, 100)}
                   </div>
-                  <div className="text-xs text-[var(--muted-foreground)] mt-1 truncate">
+                  <div className="mt-1 truncate text-xs text-[var(--muted-foreground)]">
                     {siteUrl}
                   </div>
                 </div>
@@ -959,19 +959,19 @@ export function SEOPanel({
               onChange={(v) => update({ isCornerstone: v })}
             />
             {seoData.isCornerstone && (
-              <div className="flex items-center gap-1.5 text-xs text-amber-600 bg-amber-50 rounded-md px-2.5 py-1.5">
+              <div className="flex items-center gap-1.5 rounded-md bg-amber-50 px-2.5 py-1.5 text-xs text-amber-600">
                 <Star className="h-3.5 w-3.5" />
                 Cornerstone content is held to stricter SEO standards
               </div>
             )}
             <div>
-              <label className="block text-xs font-medium text-[var(--muted-foreground)] mb-1">
+              <label className="mb-1 block text-xs font-medium text-[var(--muted-foreground)]">
                 Schema Type
               </label>
               <select
                 value={seoData.schemaType ?? 'Article'}
                 onChange={(e) => update({ schemaType: e.target.value })}
-                className="w-full px-3 py-1.5 text-sm border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+                className="w-full rounded-lg border border-[var(--border)] bg-[var(--background)] px-3 py-1.5 text-sm text-[var(--foreground)] focus:ring-2 focus:ring-[var(--primary)] focus:outline-none"
               >
                 {SCHEMA_TYPES.map((t) => (
                   <option key={t} value={t}>

package/src/components/SEOPerformance.tsx

@@ -27,7 +27,7 @@ function ScoreBadge({ score }: { score: number }) {
   const bg = score >= 80 ? 'bg-green-50' : score >= 60 ? 'bg-amber-50' : 'bg-red-50'
   return (
     <span
-      className={`inline-flex items-center justify-center w-9 h-9 rounded-full text-sm font-semibold ${color} ${bg}`}
+      className={`inline-flex h-9 w-9 items-center justify-center rounded-full text-sm font-semibold ${color} ${bg}`}
     >
       {score}
     </span>
@@ -53,10 +53,10 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
   const visible = topContent.slice(page * perPage, (page + 1) * perPage)
 
   return (
-    <div className="bg-white rounded-lg border border-gray-200">
-      <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+    <div className="rounded-lg border border-gray-200 bg-white">
+      <div className="flex items-center justify-between border-b border-gray-200 p-4">
         <div className="flex items-center gap-2">
-          <Search className="w-4 h-4 text-gray-500" />
+          <Search className="h-4 w-4 text-gray-500" />
           <h2 className="text-sm font-semibold text-gray-900">SEO Performance</h2>
         </div>
         {totalIssues > 0 && (
@@ -66,25 +66,25 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
         )}
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-12 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
-        <div className="lg:col-span-7 p-4">
-          <h3 className="text-sm font-medium text-gray-700 mb-3">Top Performing Content</h3>
+      <div className="grid grid-cols-1 divide-y divide-gray-200 lg:grid-cols-12 lg:divide-x lg:divide-y-0">
+        <div className="p-4 lg:col-span-7">
+          <h3 className="mb-3 text-sm font-medium text-gray-700">Top Performing Content</h3>
           <div className="space-y-2">
             {visible.map((item) => (
               <div key={item.id} className="flex items-center justify-between py-2">
-                <div className="flex-1 min-w-0 mr-3">
-                  <p className="text-sm font-medium text-gray-900 truncate">{item.title}</p>
+                <div className="mr-3 min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-gray-900">{item.title}</p>
                   <p className="text-xs text-gray-500 capitalize">{item.collection}</p>
                 </div>
                 <ScoreBadge score={item.score} />
               </div>
             ))}
             {visible.length === 0 && (
-              <p className="text-sm text-gray-400 py-4 text-center">No published content yet</p>
+              <p className="py-4 text-center text-sm text-gray-400">No published content yet</p>
             )}
           </div>
           {topContent.length > perPage && (
-            <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
+            <div className="mt-3 flex items-center justify-between border-t border-gray-100 pt-3 text-xs text-gray-500">
               <span>
                 Showing {page * perPage + 1}-{Math.min((page + 1) * perPage, topContent.length)} of{' '}
                 {topContent.length}
@@ -93,9 +93,9 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
                 <button
                   onClick={() => setPage(Math.max(0, page - 1))}
                   disabled={page === 0}
-                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+                  className="rounded p-1 hover:bg-gray-100 disabled:opacity-30"
                 >
-                  <ChevronLeft className="w-3.5 h-3.5" />
+                  <ChevronLeft className="h-3.5 w-3.5" />
                 </button>
                 <span>
                   Page {page + 1} of {totalPages}
@@ -103,21 +103,21 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
                 <button
                   onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
                   disabled={page >= totalPages - 1}
-                  className="p-1 rounded hover:bg-gray-100 disabled:opacity-30"
+                  className="rounded p-1 hover:bg-gray-100 disabled:opacity-30"
                 >
-                  <ChevronRight className="w-3.5 h-3.5" />
+                  <ChevronRight className="h-3.5 w-3.5" />
                 </button>
               </div>
             </div>
           )}
         </div>
 
-        <div className="lg:col-span-5 p-4">
-          <h3 className="text-sm font-medium text-gray-700 mb-3">SEO Issues</h3>
+        <div className="p-4 lg:col-span-5">
+          <h3 className="mb-3 text-sm font-medium text-gray-700">SEO Issues</h3>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <FileWarning className="w-4 h-4 text-red-400" />
+                <FileWarning className="h-4 w-4 text-red-400" />
                 <span className="text-sm text-gray-700">Missing meta descriptions</span>
               </div>
               <span className="text-sm font-semibold text-gray-900">
@@ -126,7 +126,7 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <LinkIcon className="w-4 h-4 text-red-400" />
+                <LinkIcon className="h-4 w-4 text-red-400" />
                 <span className="text-sm text-gray-700">Broken internal links</span>
               </div>
               <span className="text-sm font-semibold text-gray-900">
@@ -135,7 +135,7 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <ImageOff className="w-4 h-4 text-red-400" />
+                <ImageOff className="h-4 w-4 text-red-400" />
                 <span className="text-sm text-gray-700">Missing alt text</span>
               </div>
               <span className="text-sm font-semibold text-gray-900">{issues.missingAltText}</span>
@@ -144,7 +144,7 @@ export function SEOPerformance({ onNavigate }: SEOPerformanceProps) {
           {totalIssues > 0 && (
             <button
               onClick={() => onNavigate?.('/seo')}
-              className="mt-4 text-sm text-blue-600 hover:text-blue-700 font-medium"
+              className="mt-4 text-sm font-medium text-blue-600 hover:text-blue-700"
             >
               View All Issues
             </button>

package/src/components/SchedulePublishDialog.tsx

@@ -156,13 +156,13 @@ export function SchedulePublishDialog({
           <div className="space-y-1.5">
             <label className="text-sm font-medium text-gray-700">Publish at</label>
             <div className="relative">
-              <Clock className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+              <Clock className="pointer-events-none absolute top-2.5 left-2.5 h-4 w-4 text-gray-400" />
               <input
                 type="datetime-local"
                 value={publishAt}
                 onChange={(e) => setPublishAt(e.target.value)}
                 min={toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
-                className="w-full rounded-md border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                className="w-full rounded-md border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
               />
             </div>
             <p className="text-xs text-gray-500">
@@ -184,13 +184,13 @@ export function SchedulePublishDialog({
             <div className="space-y-1.5">
               <label className="text-sm font-medium text-gray-700">Unpublish at</label>
               <div className="relative">
-                <Clock className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+                <Clock className="pointer-events-none absolute top-2.5 left-2.5 h-4 w-4 text-gray-400" />
                 <input
                   type="datetime-local"
                   value={unpublishAt}
                   onChange={(e) => setUnpublishAt(e.target.value)}
                   min={publishAt || toLocalDateTimeInput(new Date(Date.now() + 60 * 1000))}
-                  className="w-full rounded-md border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                  className="w-full rounded-md border border-gray-300 bg-white py-2 pr-3 pl-9 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
                 />
               </div>
             </div>

package/src/components/SharePreviewLinkDialog.tsx

@@ -174,7 +174,7 @@ export function SharePreviewLinkDialog({
 
           {previewUrl ? (
             <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-              <label className="text-xs font-medium uppercase tracking-wide text-gray-500">
+              <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
                 Preview URL
               </label>
               <div className="flex items-stretch gap-2">