@actuate-media/cms-admin 0.48.0 → 0.49.1

package/src/components/VersionHistory.tsx

@@ -1,9 +1,11 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
 import { X, RotateCcw, Clock, User, Loader2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
 
 interface Version {
   id: string
@@ -38,10 +40,10 @@ function timeAgo(dateStr: string): string {
 }
 
 const CHANGE_TYPE_LABELS: Record<string, { label: string; color: string }> = {
-  CREATE: { label: 'Created', color: 'bg-green-100 text-green-800' },
-  UPDATE: { label: 'Updated', color: 'bg-blue-100 text-blue-800' },
-  DELETE: { label: 'Deleted', color: 'bg-red-100 text-red-800' },
-  RESTORE: { label: 'Restored', color: 'bg-purple-100 text-purple-800' },
+  CREATE: { label: 'Created', color: 'bg-success/15 text-success' },
+  UPDATE: { label: 'Updated', color: 'bg-primary/15 text-primary' },
+  DELETE: { label: 'Deleted', color: 'bg-destructive/15 text-destructive' },
+  RESTORE: { label: 'Restored', color: 'bg-accent text-accent-foreground' },
 }
 
 export function VersionHistory({
@@ -88,91 +90,105 @@ export function VersionHistory({
     setRestoring(null)
   }
 
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex justify-end">
-      <div className="fixed inset-0 bg-black/30" onClick={onClose} />
-      <div className="animate-in slide-in-from-right relative flex w-full max-w-md flex-col bg-white shadow-xl">
-        <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
-          <div className="flex items-center gap-2">
-            <Clock className="h-5 w-5 text-gray-600" />
-            <h2 className="text-lg font-semibold text-gray-900">Version History</h2>
+    <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/30" />
+        <Dialog.Content
+          aria-describedby={undefined}
+          className="bg-card text-card-foreground border-border animate-in slide-in-from-right fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col border-l shadow-xl focus:outline-none"
+        >
+          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+            <div className="flex items-center gap-2">
+              <Clock className="text-muted-foreground h-5 w-5" aria-hidden />
+              <Dialog.Title className="text-foreground text-lg font-medium">
+                Version History
+              </Dialog.Title>
+            </div>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                aria-label="Close version history"
+                className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-lg p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              >
+                <X className="h-5 w-5" aria-hidden />
+              </button>
+            </Dialog.Close>
           </div>
-          <button
-            onClick={onClose}
-            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
-          >
-            <X className="h-5 w-5 text-gray-500" />
-          </button>
-        </div>
 
-        <div className="flex-1 overflow-y-auto">
-          {loading ? (
-            <div className="flex items-center justify-center py-16">
-              <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
-            </div>
-          ) : versions.length === 0 ? (
-            <div className="py-16 text-center text-sm text-gray-500">
-              No version history available
-            </div>
-          ) : (
-            <div className="divide-y divide-gray-100">
-              {versions.map((version, index) => {
-                const typeInfo = CHANGE_TYPE_LABELS[version.changeType] ?? {
-                  label: version.changeType,
-                  color: 'bg-gray-100 text-gray-800',
-                }
-                const isLatest = index === 0
+          <div className="flex-1 overflow-y-auto">
+            {loading ? (
+              <div className="flex items-center justify-center py-16">
+                <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
+              </div>
+            ) : versions.length === 0 ? (
+              <div className="text-muted-foreground py-16 text-center text-sm">
+                No version history available
+              </div>
+            ) : (
+              <div className="divide-border divide-y">
+                {versions.map((version, index) => {
+                  const typeInfo = CHANGE_TYPE_LABELS[version.changeType] ?? {
+                    label: version.changeType,
+                    color: 'bg-muted text-muted-foreground',
+                  }
+                  const isLatest = index === 0
 
-                return (
-                  <div key={version.id} className="px-4 py-3 transition-colors hover:bg-gray-50">
-                    <div className="flex items-start justify-between gap-3">
-                      <div className="min-w-0 flex-1">
-                        <div className="mb-1 flex items-center gap-2">
-                          <span
-                            className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${typeInfo.color}`}
-                          >
-                            {typeInfo.label}
-                          </span>
-                          {isLatest && (
-                            <span className="text-xs font-medium text-gray-400">Current</span>
-                          )}
-                        </div>
-                        <div className="flex items-center gap-3 text-xs text-gray-500">
-                          {version.changedBy && (
-                            <span className="flex items-center gap-1">
-                              <User className="h-3 w-3" />
-                              {version.changedBy.name ?? version.changedBy.email ?? 'Unknown'}
+                  return (
+                    <div
+                      key={version.id}
+                      className="hover:bg-accent/50 px-4 py-3 transition-colors"
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="min-w-0 flex-1">
+                          <div className="mb-1 flex items-center gap-2">
+                            <span
+                              className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${typeInfo.color}`}
+                            >
+                              {typeInfo.label}
+                            </span>
+                            {isLatest && (
+                              <span className="text-muted-foreground text-xs font-medium">
+                                Current
+                              </span>
+                            )}
+                          </div>
+                          <div className="text-muted-foreground flex items-center gap-3 text-xs">
+                            {version.changedBy && (
+                              <span className="flex items-center gap-1">
+                                <User className="h-3 w-3" aria-hidden />
+                                {version.changedBy.name ?? version.changedBy.email ?? 'Unknown'}
+                              </span>
+                            )}
+                            <span title={new Date(version.createdAt).toLocaleString()}>
+                              {timeAgo(version.createdAt)}
                             </span>
-                          )}
-                          <span title={new Date(version.createdAt).toLocaleString()}>
-                            {timeAgo(version.createdAt)}
-                          </span>
+                          </div>
                         </div>
+                        {!isLatest && (
+                          <button
+                            type="button"
+                            onClick={() => handleRestore(version)}
+                            disabled={restoring === version.id}
+                            className="bg-primary/10 text-primary hover:bg-primary/20 flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium transition-colors disabled:opacity-50"
+                          >
+                            {restoring === version.id ? (
+                              <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
+                            ) : (
+                              <RotateCcw className="h-3.5 w-3.5" aria-hidden />
+                            )}
+                            Restore
+                          </button>
+                        )}
                       </div>
-                      {!isLatest && (
-                        <button
-                          onClick={() => handleRestore(version)}
-                          disabled={restoring === version.id}
-                          className="flex items-center gap-1.5 rounded-lg bg-blue-50 px-2.5 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-100 disabled:opacity-50"
-                        >
-                          {restoring === version.id ? (
-                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                          ) : (
-                            <RotateCcw className="h-3.5 w-3.5" />
-                          )}
-                          Restore
-                        </button>
-                      )}
                     </div>
-                  </div>
-                )
-              })}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }

package/src/components/ui/Modal.tsx

@@ -1,6 +1,9 @@
 'use client'
 
-import { useEffect, type ReactNode } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { type ReactNode } from 'react'
+import { adminPortalContainer } from '../../lib/portal-container.js'
 
 export interface ModalProps {
   open: boolean
@@ -8,47 +11,53 @@ export interface ModalProps {
   title: string
   children: ReactNode
   actions?: ReactNode
+  /**
+   * Accessible description for the dialog, announced after the title. Optional —
+   * omit when the body content is self-explanatory.
+   */
+  description?: string
 }
 
-export function Modal({ open, onClose, title, children, actions }: ModalProps) {
-  useEffect(() => {
-    if (!open) return
-
-    function handleKey(e: KeyboardEvent) {
-      if (e.key === 'Escape') onClose()
-    }
-
-    document.addEventListener('keydown', handleKey)
-    return () => document.removeEventListener('keydown', handleKey)
-  }, [open, onClose])
-
-  if (!open) return null
-
+/**
+ * The canonical admin modal. Built on Radix `Dialog`, which provides the
+ * accessibility contract for free: focus is trapped while open and restored to
+ * the trigger on close, Escape and overlay-click dismiss, the surface is
+ * exposed as `role="dialog"` + `aria-modal`, and the title/description are wired
+ * via `aria-labelledby`/`aria-describedby`.
+ *
+ * The portal mounts inside `.actuate-admin` (see `adminPortalContainer`) so the
+ * dialog inherits theme tokens and dark mode instead of rendering unstyled on
+ * `document.body`.
+ */
+export function Modal({ open, onClose, title, children, actions, description }: ModalProps) {
   return (
-    <div className="fixed inset-0 z-[60] flex items-center justify-center">
-      <div className="fixed inset-0 bg-black/50" onClick={onClose} role="presentation" />
-      <div className="relative z-10 w-full max-w-lg rounded-lg border border-[var(--border)] bg-[var(--card)] shadow-xl">
-        <div className="flex items-center justify-between border-b border-[var(--border)] px-6 py-4">
-          <h2 className="text-lg font-semibold">{title}</h2>
-          <button onClick={onClose} className="rounded-md p-1 hover:bg-[var(--accent)]">
-            <svg
-              className="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-        <div className="px-6 py-4">{children}</div>
-        {actions && (
-          <div className="flex justify-end gap-2 border-t border-[var(--border)] px-6 py-4">
-            {actions}
+    <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="fixed inset-0 z-60 bg-black/50" />
+        <Dialog.Content className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-60 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none">
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
+            <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                aria-label="Close dialog"
+                className="text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:ring-ring rounded-md p-1 transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              >
+                <X className="h-4 w-4" aria-hidden />
+              </button>
+            </Dialog.Close>
           </div>
-        )}
-      </div>
-    </div>
+          {description && (
+            <Dialog.Description className="text-muted-foreground px-6 pt-4 text-sm">
+              {description}
+            </Dialog.Description>
+          )}
+          <div className="px-6 py-4">{children}</div>
+          {actions && (
+            <div className="border-border flex justify-end gap-2 border-t px-6 py-4">{actions}</div>
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }

package/src/fields/BlockBuilderField.tsx

@@ -18,6 +18,7 @@ import {
   arrayMove,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import * as Dialog from '@radix-ui/react-dialog'
 import {
   Plus,
   GripVertical,
@@ -33,6 +34,7 @@ import {
   X,
 } from 'lucide-react'
 import { PRESET_BLOCKS, type BlockTypeDefinition } from './block-types.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
 
 const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
   layout: Layout,
@@ -359,19 +361,24 @@ export function BlockBuilderField({
         </button>
       </div>
 
-      {pickerOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-          <div className="w-full max-w-2xl rounded-lg border border-[var(--border)] bg-[var(--card)] shadow-xl">
-            <div className="flex items-center justify-between border-b border-[var(--border)] px-5 py-4">
-              <h3 className="text-base font-semibold">Add Block</h3>
-              <button
-                type="button"
-                onClick={() => setPickerOpen(false)}
-                className="text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
-                aria-label="Close"
-              >
-                <X className="h-5 w-5" />
-              </button>
+      <Dialog.Root open={pickerOpen} onOpenChange={setPickerOpen}>
+        <Dialog.Portal container={adminPortalContainer()}>
+          <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
+          <Dialog.Content
+            aria-describedby={undefined}
+            className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl focus:outline-none"
+          >
+            <div className="border-border flex items-center justify-between border-b px-5 py-4">
+              <Dialog.Title className="text-base font-medium">Add Block</Dialog.Title>
+              <Dialog.Close asChild>
+                <button
+                  type="button"
+                  className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-md p-1 focus-visible:ring-2 focus-visible:outline-none"
+                  aria-label="Close block picker"
+                >
+                  <X className="h-5 w-5" aria-hidden />
+                </button>
+              </Dialog.Close>
             </div>
             <div className="grid grid-cols-2 gap-3 p-5 sm:grid-cols-3">
               {allBlockTypes.map((bt) => {
@@ -381,20 +388,20 @@ export function BlockBuilderField({
                     key={bt.type}
                     type="button"
                     onClick={() => addBlock(bt.type)}
-                    className="flex flex-col items-start gap-1.5 rounded-md border border-[var(--border)] p-3 text-left transition-colors hover:border-[var(--primary)] hover:bg-[var(--accent)]"
+                    className="border-border hover:border-primary hover:bg-accent flex flex-col items-start gap-1.5 rounded-md border p-3 text-left transition-colors"
                   >
-                    {Icon && <Icon className="h-5 w-5 text-[var(--primary)]" />}
+                    {Icon && <Icon className="text-primary h-5 w-5" aria-hidden />}
                     <span className="text-sm font-medium">{bt.label}</span>
-                    <span className="text-xs leading-snug text-[var(--muted-foreground)]">
+                    <span className="text-muted-foreground text-xs leading-snug">
                       {bt.description}
                     </span>
                   </button>
                 )
               })}
             </div>
-          </div>
-        </div>
-      )}
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
 
       {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
     </div>

package/src/index.ts

@@ -1,5 +1,7 @@
 export { AdminRoot } from './AdminRoot.js'
 export type { AdminRootProps } from './AdminRoot.js'
+export { LoginRoot } from './LoginRoot.js'
+export type { LoginRootProps } from './LoginRoot.js'
 
 // Pluggable canvas renderers for custom section types (see `AdminRoot`'s
 // `sectionRenderers` prop). The types structurally mirror

package/src/lib/root-chrome.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import type React from 'react'
+
+/**
+ * Full-viewport overlay style shared by the admin and login mounts so the CMS
+ * UI renders above any consumer page chrome, with its own stacking context.
+ */
+export const ISOLATION_STYLE: React.CSSProperties = {
+  position: 'fixed',
+  inset: '0',
+  zIndex: 50,
+  overflow: 'auto',
+  isolation: 'isolate',
+}
+
+/**
+ * The admin (and its login screens) are private application UI and must never
+ * be indexed. Ensure a `noindex, nofollow` robots meta tag is present while
+ * mounted, as defense-in-depth alongside the server `robots.txt` Disallow
+ * rule. This covers every consumer install (the admin page is typically a
+ * client component that can't export Next.js route metadata).
+ */
+export function useRobotsNoIndex(): void {
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    const prev = document.querySelector<HTMLMetaElement>('meta[name="robots"]')
+    const prevContent = prev?.getAttribute('content') ?? null
+    const meta = prev ?? document.createElement('meta')
+    meta.setAttribute('name', 'robots')
+    meta.setAttribute('content', 'noindex, nofollow')
+    if (!prev) document.head.appendChild(meta)
+    return () => {
+      if (prevContent === null) {
+        meta.remove()
+      } else {
+        meta.setAttribute('content', prevContent)
+      }
+    }
+  }, [])
+}

package/src/views/HiddenLoginNotFound.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+/**
+ * Rendered at the admin mount for signed-out visitors on split-login installs
+ * (`config.admin.loginPath` set). Mimics the framework's default 404 page so
+ * hitting `/admin` reveals nothing — no login form, no admin branding, and no
+ * redirect that would leak the real login location.
+ */
+export function HiddenLoginNotFound() {
+  return (
+    <div
+      style={{
+        fontFamily: 'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#fff',
+        color: '#000',
+        textAlign: 'center',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', lineHeight: '49px' }}>
+        <h1
+          style={{
+            display: 'inline-block',
+            margin: '0 20px 0 0',
+            paddingRight: 23,
+            fontSize: 24,
+            fontWeight: 500,
+            verticalAlign: 'top',
+            borderRight: '1px solid rgba(0, 0, 0, .3)',
+          }}
+        >
+          404
+        </h1>
+        <div style={{ display: 'inline-block' }}>
+          <h2 style={{ margin: 0, fontSize: 14, fontWeight: 400, lineHeight: '49px' }}>
+            This page could not be found.
+          </h2>
+        </div>
+      </div>
+    </div>
+  )
+}