@actuate-media/cms-admin 0.49.0 → 0.49.3

package/src/components/SharePreviewLinkDialog.tsx

@@ -1,9 +1,11 @@
 'use client'
 
-import { useState } from 'react'
+import { useId, useState } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
 import { Check, Copy, Link2, Loader2, Share2, X } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { adminPortalContainer } from '../lib/portal-container.js'
 
 export interface SharePreviewLinkDialogProps {
   collectionSlug: string
@@ -75,6 +77,7 @@ export function SharePreviewLinkDialog({
   const [expiresAt, setExpiresAt] = useState<string>('')
   const [generating, setGenerating] = useState(false)
   const [copied, setCopied] = useState(false)
+  const previewUrlId = useId()
 
   async function generate() {
     setGenerating(true)
@@ -121,107 +124,126 @@ export function SharePreviewLinkDialog({
     }
   }
 
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-      <div className="fixed inset-0 bg-black/40" onClick={onClose} />
-      <div className="relative w-full max-w-lg rounded-lg 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">
-            <Share2 className="h-5 w-5 text-gray-600" />
-            <h2 className="text-lg font-semibold text-gray-900">Share preview link</h2>
+    <Dialog.Root open={open} onOpenChange={(next) => !next && onClose()}>
+      <Dialog.Portal container={adminPortalContainer()}>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40" />
+        <Dialog.Content className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-50 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-4 py-3">
+            <div className="flex items-center gap-2">
+              <Share2 className="text-muted-foreground h-5 w-5" aria-hidden />
+              <Dialog.Title className="text-foreground text-lg font-medium">
+                Share preview link
+              </Dialog.Title>
+            </div>
+            <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-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="space-y-4 px-4 py-4">
-          <p className="text-sm text-gray-600">
-            Generate a signed URL that lets anyone with the link view the current draft of this
-            document — even if it's never been published.
-          </p>
+          <div className="space-y-4 px-4 py-4">
+            <Dialog.Description className="text-muted-foreground text-sm">
+              Generate a signed URL that lets anyone with the link view the current draft of this
+              document — even if it's never been published.
+            </Dialog.Description>
 
-          <div className="space-y-2">
-            <label className="text-sm font-medium text-gray-700">Link lifetime</label>
-            <div className="grid grid-cols-2 gap-2">
-              {TTL_CHOICES.map((choice) => {
-                const selected = ttl === choice.seconds
-                return (
+            <div className="space-y-2">
+              <span className="text-foreground text-sm font-medium">Link lifetime</span>
+              <div className="grid grid-cols-2 gap-2">
+                {TTL_CHOICES.map((choice) => {
+                  const selected = ttl === choice.seconds
+                  return (
+                    <button
+                      key={choice.seconds}
+                      type="button"
+                      aria-pressed={selected}
+                      onClick={() => setTtl(choice.seconds)}
+                      className={`rounded-md border px-3 py-2 text-left text-sm transition-colors ${
+                        selected
+                          ? 'border-primary bg-primary/10 text-foreground'
+                          : 'border-border hover:border-input hover:bg-accent'
+                      }`}
+                    >
+                      <div className="font-medium">{choice.label}</div>
+                      <div className="text-muted-foreground text-xs">{choice.hint}</div>
+                    </button>
+                  )
+                })}
+              </div>
+              <p className="text-muted-foreground text-xs">
+                Preview tokens can't be revoked individually — pick the shortest TTL that fits.
+              </p>
+            </div>
+
+            {previewUrl ? (
+              <div className="border-border bg-muted space-y-2 rounded-lg border p-3">
+                <label
+                  htmlFor={previewUrlId}
+                  className="text-muted-foreground text-xs font-medium tracking-wide uppercase"
+                >
+                  Preview URL
+                </label>
+                <div className="flex items-stretch gap-2">
+                  <input
+                    id={previewUrlId}
+                    readOnly
+                    value={previewUrl}
+                    onFocus={(e) => e.currentTarget.select()}
+                    className="border-input bg-background text-foreground flex-1 rounded-md border px-2 py-1.5 font-mono text-xs"
+                  />
                   <button
-                    key={choice.seconds}
-                    onClick={() => setTtl(choice.seconds)}
-                    className={`rounded-md border px-3 py-2 text-left text-sm transition-colors ${
-                      selected
-                        ? 'border-blue-500 bg-blue-50 text-blue-900'
-                        : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
-                    }`}
+                    type="button"
+                    onClick={copyToClipboard}
+                    className="bg-primary text-primary-foreground inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium hover:opacity-90"
                   >
-                    <div className="font-medium">{choice.label}</div>
-                    <div className="text-xs text-gray-500">{choice.hint}</div>
+                    {copied ? (
+                      <Check className="h-3.5 w-3.5" aria-hidden />
+                    ) : (
+                      <Copy className="h-3.5 w-3.5" aria-hidden />
+                    )}
+                    {copied ? 'Copied' : 'Copy'}
                   </button>
-                )
-              })}
-            </div>
-            <p className="text-xs text-gray-500">
-              Preview tokens can't be revoked individually — pick the shortest TTL that fits.
-            </p>
+                </div>
+                {expiresAt && (
+                  <p className="text-muted-foreground text-xs">
+                    Expires {new Date(expiresAt).toLocaleString()}
+                  </p>
+                )}
+              </div>
+            ) : null}
           </div>
 
-          {previewUrl ? (
-            <div className="space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-              <label className="text-xs font-medium tracking-wide text-gray-500 uppercase">
-                Preview URL
-              </label>
-              <div className="flex items-stretch gap-2">
-                <input
-                  readOnly
-                  value={previewUrl}
-                  onFocus={(e) => e.currentTarget.select()}
-                  className="flex-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 font-mono text-xs"
-                />
-                <button
-                  onClick={copyToClipboard}
-                  className="inline-flex items-center gap-1.5 rounded-md bg-gray-900 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-700"
-                >
-                  {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
-                  {copied ? 'Copied' : 'Copy'}
-                </button>
-              </div>
-              {expiresAt && (
-                <p className="text-xs text-gray-500">
-                  Expires {new Date(expiresAt).toLocaleString()}
-                </p>
+          <div className="border-border flex items-center justify-end gap-2 border-t px-4 py-3">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="text-foreground hover:bg-accent rounded-md px-3 py-1.5 text-sm"
+              >
+                Close
+              </button>
+            </Dialog.Close>
+            <button
+              type="button"
+              onClick={generate}
+              disabled={generating}
+              className="bg-primary text-primary-foreground inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium hover:opacity-90 disabled:opacity-50"
+            >
+              {generating ? (
+                <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+              ) : (
+                <Link2 className="h-4 w-4" aria-hidden />
               )}
-            </div>
-          ) : null}
-        </div>
-
-        <div className="flex items-center justify-end gap-2 border-t border-gray-200 px-4 py-3">
-          <button
-            onClick={onClose}
-            className="rounded-md px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-100"
-          >
-            Close
-          </button>
-          <button
-            onClick={generate}
-            disabled={generating}
-            className="inline-flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
-          >
-            {generating ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Link2 className="h-4 w-4" />
-            )}
-            {previewUrl ? 'Generate new link' : 'Generate link'}
-          </button>
-        </div>
-      </div>
-    </div>
+              {previewUrl ? 'Generate new link' : 'Generate link'}
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   )
 }

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>