@actuate-media/cms-admin 0.68.0 → 0.69.1

package/src/components/SEOPanel.tsx

@@ -435,7 +435,7 @@ function Section({
     <div className="overflow-hidden rounded-lg border border-[var(--border)]">
       <button
         onClick={() => onToggle(id)}
-        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)]"
+        className="hover:bg-muted flex w-full items-center justify-between px-4 py-2.5 text-left text-sm font-medium text-[var(--foreground)] transition-colors"
       >
         <span className="flex items-center gap-2">
           {icon}
@@ -646,7 +646,7 @@ export function SEOPanel({
           expanded={expandedSections.includes('analysis')}
           onToggle={toggleSection}
           badge={
-            <span className="ml-1 inline-flex items-center rounded-full bg-[var(--muted)] px-2 py-0.5 text-[10px] font-medium text-[var(--muted-foreground)]">
+            <span className="bg-muted ml-1 inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium text-[var(--muted-foreground)]">
               {goodCount}/{checks.length}
             </span>
           }
@@ -673,26 +673,26 @@ export function SEOPanel({
           onToggle={toggleSection}
         >
           <div className="grid grid-cols-2 gap-3">
-            <div className="rounded-lg bg-[var(--muted)] p-2.5">
+            <div className="bg-muted rounded-lg p-2.5">
               <p className="text-xs text-[var(--muted-foreground)]">Flesch Score</p>
               <p className={`text-lg font-medium ${fleschColor}`}>{readability.fleschScore}</p>
               <p className={`text-[10px] ${fleschColor}`}>{fleschLabel}</p>
             </div>
-            <div className="rounded-lg bg-[var(--muted)] p-2.5">
+            <div className="bg-muted rounded-lg p-2.5">
               <p className="text-xs text-[var(--muted-foreground)]">Word Count</p>
               <p className="text-lg font-medium text-[var(--foreground)]">
                 {readability.wordCount}
               </p>
               <p className="text-[10px] text-[var(--muted-foreground)]">words</p>
             </div>
-            <div className="rounded-lg bg-[var(--muted)] p-2.5">
+            <div className="bg-muted rounded-lg p-2.5">
               <p className="text-xs text-[var(--muted-foreground)]">Avg. Sentence</p>
               <p className="text-lg font-medium text-[var(--foreground)]">
                 {readability.avgSentenceLength.toFixed(1)}
               </p>
               <p className="text-[10px] text-[var(--muted-foreground)]">words/sentence</p>
             </div>
-            <div className="rounded-lg bg-[var(--muted)] p-2.5">
+            <div className="bg-muted rounded-lg p-2.5">
               <p className="text-xs text-[var(--muted-foreground)]">Reading Time</p>
               <p className="text-lg font-medium text-[var(--foreground)]">
                 {readability.readingTime}
@@ -907,9 +907,9 @@ export function SEOPanel({
               <p className="mb-2 text-xs font-medium text-[var(--muted-foreground)]">
                 Social Preview
               </p>
-              <div className="overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--muted)]">
+              <div className="bg-muted overflow-hidden rounded-lg border border-[var(--border)]">
                 {seoData.ogImage ? (
-                  <div className="flex aspect-video items-center justify-center overflow-hidden bg-[var(--muted)]">
+                  <div className="bg-muted flex aspect-video items-center justify-center overflow-hidden">
                     <img
                       src={seoData.ogImage}
                       alt="OG preview"
@@ -917,7 +917,7 @@ export function SEOPanel({
                     />
                   </div>
                 ) : (
-                  <div className="flex aspect-video items-center justify-center bg-[var(--muted)] text-sm text-[var(--muted-foreground)]">
+                  <div className="bg-muted flex aspect-video items-center justify-center text-sm text-[var(--muted-foreground)]">
                     No OG image set
                   </div>
                 )}

package/src/components/collections/EntryDetailPane.tsx

@@ -171,7 +171,7 @@ export function EntryDetailPane({
         <button
           type="button"
           onClick={onOpenEditor}
-          className="flex w-full items-center justify-center gap-1.5 rounded-[7px] bg-[var(--acc)] px-3 py-2 text-[13px] font-semibold text-white transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+          className="bg-primary text-primary-foreground flex w-full items-center justify-center gap-1.5 rounded-[7px] px-3 py-2 text-[13px] font-semibold transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
         >
           <ExternalLink size={14} aria-hidden />
           Open full editor

package/src/components/forms/EntriesTable.tsx

@@ -32,6 +32,8 @@ export interface EntriesTableProps {
   onToggleSelect: (id: string) => void
   onOpen: (id: string) => void
   onToggleStar: (entry: FormSubmission) => void
+  /** Entry currently open in the inline detail pane (drives aria-expanded). */
+  activeId?: string | null
   /** Show a Form column (used by the cross-form All Entries inbox). */
   showForm?: boolean
   /** Navigate to a form's submissions when its name is clicked (All Entries). */
@@ -50,6 +52,7 @@ export function EntriesTable({
   onToggleSelect,
   onOpen,
   onToggleStar,
+  activeId = null,
   showForm = false,
   onOpenForm,
   ariaLabel = 'Submissions',
@@ -129,11 +132,17 @@ export function EntriesTable({
                               aria-label="Unread"
                             />
                           )}
-                          <span
-                            className={`text-foreground truncate ${entry.unread ? 'font-medium' : 'font-medium'}`}
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              onOpen(entry.id)
+                            }}
+                            aria-expanded={entry.id === activeId}
+                            className="text-foreground focus-visible:ring-ring truncate rounded text-left font-medium hover:underline focus-visible:ring-2 focus-visible:outline-none"
                           >
                             {name}
-                          </span>
+                          </button>
                         </div>
                         {entry.senderEmail && (
                           <span className="text-muted-foreground block truncate text-xs">

package/src/components/forms/{EntryDetailDrawer.tsx → FormEntryDetailPane.tsx}

@@ -1,10 +1,11 @@
 'use client'
 
 /**
- * Entry detail drawer — shows a single submission rendered against the schema
- * version it was captured with, plus sender, attribution, and per-entry
- * actions (star, archive, mark unread, delete). Opening an unread entry marks
- * it read. Token-only styling; built on the shared `Drawer`.
+ * Form entry detail pane — inline InspectorPane replacement for the old
+ * `EntryDetailDrawer` overlay. Shows a single submission rendered against the
+ * schema version it was captured with, plus sender, attribution, and
+ * per-entry actions (star, archive, mark unread, delete). Opening an unread
+ * entry marks it read. Rendered beside the entries table (400px split pane).
  */
 import { useCallback, useEffect, useState } from 'react'
 import { Archive, ArchiveRestore, Loader2, Mail, Star, Trash2 } from 'lucide-react'
@@ -19,8 +20,16 @@ import {
 } from '../../lib/forms-service.js'
 import { emitFormsChanged } from '../../lib/forms-events.js'
 import { ConfirmDialog } from '../ui/ConfirmDialog.js'
-import { Drawer } from './Drawer.js'
-import { FormsErrorState, btnGhostIcon } from './primitives.js'
+import {
+  InspectorPaneBody,
+  InspectorPaneFooter,
+  InspectorPaneHeader,
+  InspectorPaneSection,
+} from '../ui/InspectorPane.js'
+import { FormsErrorState } from './primitives.js'
+
+const iconBtn =
+  'flex h-7 w-7 shrink-0 items-center justify-center rounded-[6px] text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60'
 
 function formatDateTime(iso: string | null | undefined): string {
   if (!iso) return '—'
@@ -59,25 +68,23 @@ function attributionRows(entry: FormSubmission): AttrRow[] {
   ].filter((r) => r.value)
 }
 
-export interface EntryDetailDrawerProps {
-  entryId: string | null
-  open: boolean
-  onOpenChange: (open: boolean) => void
+export interface FormEntryDetailPaneProps {
+  entryId: string
+  onClose: () => void
   /** Called after a mutation (star/archive/read/delete) so the list refreshes. */
   onChanged?: () => void
   /** Called specifically after a delete so the caller can drop the row/selection. */
   onDeleted?: (id: string) => void
 }
 
-export function EntryDetailDrawer({
+export function FormEntryDetailPane({
   entryId,
-  open,
-  onOpenChange,
+  onClose,
   onChanged,
   onDeleted,
-}: EntryDetailDrawerProps) {
+}: FormEntryDetailPaneProps) {
   const [detail, setDetail] = useState<EntryDetail | null>(null)
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [busy, setBusy] = useState(false)
   const [confirmDelete, setConfirmDelete] = useState(false)
@@ -87,9 +94,8 @@ export function EntryDetailDrawer({
     onChanged?.()
   }, [onChanged])
 
-  // Load the entry (and its schema) when the drawer opens, marking it read.
+  // Load the entry (and its schema) when the pane opens, marking it read.
   useEffect(() => {
-    if (!open || !entryId) return
     let cancelled = false
     setLoading(true)
     setError(null)
@@ -117,11 +123,10 @@ export function EntryDetailDrawer({
     return () => {
       cancelled = true
     }
-  }, [open, entryId, notifyChanged])
+  }, [entryId, notifyChanged])
 
   const mutate = useCallback(
     async (patch: { unread?: boolean; starred?: boolean; archived?: boolean }) => {
-      if (!entryId) return
       setBusy(true)
       const res = await updateEntry(entryId, patch)
       setBusy(false)
@@ -136,7 +141,6 @@ export function EntryDetailDrawer({
   )
 
   const handleDelete = useCallback(async () => {
-    if (!entryId) return
     setBusy(true)
     const res = await deleteEntry(entryId)
     setBusy(false)
@@ -147,8 +151,7 @@ export function EntryDetailDrawer({
     toast.success('Submission deleted')
     notifyChanged()
     onDeleted?.(entryId)
-    onOpenChange(false)
-  }, [entryId, notifyChanged, onDeleted, onOpenChange])
+  }, [entryId, notifyChanged, onDeleted])
 
   const entry = detail?.entry
   const senderName = entry?.senderName || 'Anonymous'
@@ -156,114 +159,122 @@ export function EntryDetailDrawer({
 
   return (
     <>
-      <Drawer
-        open={open}
-        onOpenChange={onOpenChange}
-        title={entry ? `Entry${entry.entryNumber ? ` #${entry.entryNumber}` : ''}` : 'Entry'}
-        description={entry ? formatDateTime(entry.submittedAt) : undefined}
-        headerExtra={
-          entry ? (
-            <>
+      <InspectorPaneHeader onClose={onClose} closeLabel="Close entry details">
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <div className="truncate text-[13.5px] font-semibold text-[var(--txt)]">
+              {entry ? `Entry${entry.entryNumber ? ` #${entry.entryNumber}` : ''}` : 'Entry'}
+            </div>
+            {entry && (
+              <div className="mt-0.5 truncate text-[11.5px] text-[var(--muted)]">
+                {formatDateTime(entry.submittedAt)}
+              </div>
+            )}
+          </div>
+          {entry && (
+            <div className="flex shrink-0 gap-1">
               <button
                 type="button"
-                className={btnGhostIcon}
+                className={iconBtn}
                 aria-pressed={entry.starred}
                 aria-label={entry.starred ? 'Unstar entry' : 'Star entry'}
                 disabled={busy}
                 onClick={() => void mutate({ starred: !entry.starred })}
               >
                 <Star
-                  size={18}
+                  size={16}
                   aria-hidden
-                  className={entry.starred ? 'fill-warning text-warning' : ''}
+                  className={entry.starred ? 'fill-[var(--warn)] text-[var(--warn)]' : ''}
                 />
               </button>
               <button
                 type="button"
-                className={btnGhostIcon}
+                className={iconBtn}
                 aria-pressed={entry.archived}
                 aria-label={entry.archived ? 'Unarchive entry' : 'Archive entry'}
                 disabled={busy}
                 onClick={() => void mutate({ archived: !entry.archived })}
               >
                 {entry.archived ? (
-                  <ArchiveRestore size={18} aria-hidden />
+                  <ArchiveRestore size={16} aria-hidden />
                 ) : (
-                  <Archive size={18} aria-hidden />
+                  <Archive size={16} aria-hidden />
                 )}
               </button>
-            </>
-          ) : undefined
-        }
-        footer={
-          entry ? (
-            <>
-              <button
-                type="button"
-                className="text-destructive hover:bg-destructive/10 focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
-                disabled={busy}
-                onClick={() => setConfirmDelete(true)}
-              >
-                <Trash2 size={16} aria-hidden />
-                Delete
-              </button>
-              <button
-                type="button"
-                className="border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
-                disabled={busy}
-                onClick={() => void mutate({ unread: !entry.unread })}
-              >
-                <Mail size={16} aria-hidden />
-                Mark {entry.unread ? 'read' : 'unread'}
-              </button>
-            </>
-          ) : undefined
-        }
-      >
+            </div>
+          )}
+        </div>
+      </InspectorPaneHeader>
+
+      <InspectorPaneBody>
         {loading ? (
           <div className="flex h-40 items-center justify-center" role="status" aria-live="polite">
-            <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" aria-hidden />
+            <Loader2 className="h-5 w-5 animate-spin text-[var(--muted)]" aria-hidden />
             <span className="sr-only">Loading entry…</span>
           </div>
         ) : error ? (
-          <FormsErrorState message={error} />
+          <div className="px-4 py-3.5">
+            <FormsErrorState message={error} />
+          </div>
         ) : entry ? (
-          <div className="space-y-6">
-            <section className="space-y-1">
-              <h3 className="text-foreground text-sm font-medium">{senderName}</h3>
+          <>
+            <InspectorPaneSection title="Sender">
+              <div className="text-[12.5px] font-medium text-[var(--txt)]">{senderName}</div>
               {entry.senderEmail && (
                 <a
                   href={`mailto:${entry.senderEmail}`}
-                  className="text-primary block text-sm hover:underline"
+                  className="block truncate text-[12px] text-[var(--acc)] hover:underline"
                 >
                   {entry.senderEmail}
                 </a>
               )}
               {entry.senderPhone && (
-                <span className="text-muted-foreground block text-sm">{entry.senderPhone}</span>
+                <div className="text-[12px] text-[var(--sub)]">{entry.senderPhone}</div>
               )}
-            </section>
+            </InspectorPaneSection>
 
             <FieldValues entry={entry} fields={detail.fields} />
 
             {attrRows.length > 0 && (
-              <section>
-                <h4 className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
-                  Attribution
-                </h4>
-                <dl className="divide-border divide-y text-sm">
+              <InspectorPaneSection title="Attribution">
+                <dl>
                   {attrRows.map((row) => (
-                    <div key={row.label} className="flex justify-between gap-4 py-1.5">
-                      <dt className="text-muted-foreground shrink-0">{row.label}</dt>
-                      <dd className="text-foreground min-w-0 truncate text-right">{row.value}</dd>
+                    <div key={row.label} className="flex justify-between gap-4 py-1 text-[12px]">
+                      <dt className="shrink-0 text-[var(--muted)]">{row.label}</dt>
+                      <dd className="min-w-0 truncate text-right text-[var(--sub)]">{row.value}</dd>
                     </div>
                   ))}
                 </dl>
-              </section>
+              </InspectorPaneSection>
             )}
-          </div>
+          </>
         ) : null}
-      </Drawer>
+      </InspectorPaneBody>
+
+      {entry && (
+        <InspectorPaneFooter>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              className="flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-[7px] border border-[var(--bdr)] px-3 py-2 text-[12.5px] font-medium text-[var(--txt)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--bg)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+              disabled={busy}
+              onClick={() => void mutate({ unread: !entry.unread })}
+            >
+              <Mail size={14} aria-hidden />
+              Mark {entry.unread ? 'read' : 'unread'}
+            </button>
+            <button
+              type="button"
+              className="flex shrink-0 items-center justify-center gap-1.5 rounded-[7px] border border-[var(--bdr)] px-3 py-2 text-[12.5px] font-medium text-[var(--err)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--err-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
+              disabled={busy}
+              onClick={() => setConfirmDelete(true)}
+            >
+              <Trash2 size={14} aria-hidden />
+              Delete
+            </button>
+          </div>
+        </InspectorPaneFooter>
+      )}
 
       <ConfirmDialog
         open={confirmDelete}
@@ -288,25 +299,24 @@ function FieldValues({ entry, fields }: { entry: FormSubmission; fields: FormFie
     ? inputFields.map((f) => ({ key: f.key, label: f.label }))
     : Object.keys(entry.data ?? {}).map((k) => ({ key: k, label: k }))
 
-  if (rows.length === 0) {
-    return <p className="text-muted-foreground text-sm">No field data captured.</p>
-  }
-
   return (
-    <section>
-      <h4 className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
-        Submission
-      </h4>
-      <dl className="space-y-3">
-        {rows.map((row) => (
-          <div key={row.key}>
-            <dt className="text-muted-foreground text-xs">{row.label}</dt>
-            <dd className="text-foreground mt-0.5 text-sm wrap-break-word whitespace-pre-wrap">
-              {displayValue(entry.data?.[row.key])}
-            </dd>
-          </div>
-        ))}
-      </dl>
-    </section>
+    <InspectorPaneSection title="Submission">
+      {rows.length === 0 ? (
+        <p className="text-[12px] text-[var(--muted)]">No field data captured.</p>
+      ) : (
+        <dl>
+          {rows.map((row) => (
+            <div key={row.key} className="mb-2.5 last:mb-0">
+              <dt className="text-[10.5px] font-semibold tracking-[0.5px] text-[var(--muted)] uppercase">
+                {row.label}
+              </dt>
+              <dd className="mt-0.5 text-[12.5px] break-words whitespace-pre-wrap text-[var(--txt)]">
+                {displayValue(entry.data?.[row.key])}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      )}
+    </InspectorPaneSection>
   )
 }

package/src/components/forms/FormSchemaPane.tsx

@@ -122,7 +122,7 @@ export function FormSchemaPane({
             <Tabs.Trigger
               key={t.id}
               value={t.id}
-              className="text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary focus-visible:ring-ring -mb-px border-b-2 border-transparent px-2.5 py-2 text-[12.5px] font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none"
+              className="-mb-px border-b-2 border-transparent px-2.5 py-2 text-[12.5px] font-medium whitespace-nowrap text-[var(--sub)] transition-colors hover:text-[var(--txt)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none data-[state=active]:border-[var(--acc)] data-[state=active]:text-[var(--txt)]"
             >
               {t.label}
             </Tabs.Trigger>

package/src/components/script-tags/ScriptTagEditorPane.tsx

@@ -434,7 +434,7 @@ export function ScriptTagEditorPane({ tag, onClose, onChanged }: ScriptTagEditor
           type="button"
           onClick={() => void handleSave()}
           disabled={saving}
-          className="w-full rounded-[7px] bg-[var(--acc)] px-3 py-2 text-[13px] font-semibold text-white transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          className="bg-primary text-primary-foreground w-full rounded-[7px] px-3 py-2 text-[13px] font-semibold transition-colors duration-[var(--motion-fast)] hover:opacity-90 focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         >
           {saving ? 'Saving…' : 'Save Script'}
         </button>