@actuate-media/cms-admin 0.73.0 → 0.74.0

package/src/__tests__/views/portal-container.test.tsx

@@ -3,6 +3,7 @@ import { afterEach, describe, expect, it } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import { ConfirmDangerousSettingDialog } from '../../views/settings/components.js'
 import { adminPortalContainer } from '../../lib/portal-container.js'
+import { ADMIN_ROOT_ATTR } from '../../lib/admin-root-element.js'
 
 /**
  * Regression: theme tokens only exist under `.actuate-admin` (theme.css), so
@@ -24,11 +25,24 @@ describe('adminPortalContainer', () => {
   it('resolves the admin root element', () => {
     const root = document.createElement('div')
     root.className = 'actuate-admin'
+    root.setAttribute(ADMIN_ROOT_ATTR, '')
     document.body.appendChild(root)
     expect(adminPortalContainer()).toBe(root)
     root.remove()
   })
 
+  it('prefers the marked shell when nested inside another .actuate-admin', () => {
+    const outer = document.createElement('div')
+    outer.className = 'actuate-admin'
+    const inner = document.createElement('div')
+    inner.className = 'actuate-admin'
+    inner.setAttribute(ADMIN_ROOT_ATTR, '')
+    outer.appendChild(inner)
+    document.body.appendChild(outer)
+    expect(adminPortalContainer()).toBe(inner)
+    outer.remove()
+  })
+
   it('returns undefined when no admin root is mounted', () => {
     document.querySelectorAll('.actuate-admin').forEach((el) => el.remove())
     expect(adminPortalContainer()).toBeUndefined()

package/src/__tests__/views/redirects-pane.render.test.tsx

@@ -55,6 +55,12 @@ vi.mock('../../lib/seo-service.js', () => ({
   dismissRedirectSuggestion: vi.fn(async () => ({})),
   exportRedirectsCsv: vi.fn(async () => ({ csv: '' })),
   importRedirectsCsv: vi.fn(async () => ({ imported: 0 })),
+  fetchRedirectRecoverySettings: vi.fn(async () => ({
+    aiRerank: false,
+    autoApply: false,
+    autoApplyMinConfidence: 0.85,
+  })),
+  saveRedirectRecoverySettings: vi.fn(async () => ({})),
 }))
 
 vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))

package/src/__tests__/views/seo-content-pane.render.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 
 /**
  * Content SEO tab with the inline editor pane (design split-pane pattern —
@@ -18,6 +18,9 @@ function makeRecord(over: Record<string, unknown> = {}) {
     url: 'https://example.com/',
     canonicalUrl: null,
     metaTitle: 'Home — Example',
+    metaTitlePage: 'Home',
+    siteName: 'Example',
+    titleTemplate: '%page% — %site%',
     metaDescription: 'Welcome to Example.',
     focusKeyword: null,
     keyTakeaway: null,
@@ -54,6 +57,11 @@ const fetchSeoContentRecord = vi.fn(async (entityType: string, entityId: string)
 })
 const updateSeoFields = vi.fn(async (_t: string, _i: string, _p: unknown) => ({}))
 
+vi.mock('@actuate-media/cms-core/client', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@actuate-media/cms-core/client')>()
+  return { ...actual }
+})
+
 vi.mock('../../lib/seo-service.js', () => ({
   fetchSeoContentRecords: () => fetchSeoContentRecords(),
   fetchSeoContentRecord: (t: string, i: string) => fetchSeoContentRecord(t, i),
@@ -99,8 +107,10 @@ describe('Content SEO inline editor pane', () => {
     expect(screen.getByRole('region', { name: 'SEO editor' })).toBeTruthy()
     expect(rowButton.getAttribute('aria-expanded')).toBe('true')
     await waitFor(() => expect(fetchSeoContentRecord).toHaveBeenCalledWith('page', 'p1'))
-    // Loaded field values populate the form.
-    expect(await screen.findByDisplayValue('Home — Example')).toBeTruthy()
+    // Form loads the stored page portion; preview applies the site title template.
+    expect(await screen.findByDisplayValue('Home')).toBeTruthy()
+    const editor = screen.getByRole('region', { name: 'SEO editor' })
+    expect(within(editor).getAllByText('Home — Example').length).toBeGreaterThan(0)
   })
 
   it('toggles the pane closed when the same row is clicked again', async () => {
@@ -118,7 +128,7 @@ describe('Content SEO inline editor pane', () => {
     render(<ContentTab />)
     fireEvent.click(await screen.findByRole('button', { name: /Home/ }))
 
-    const titleInput = await screen.findByDisplayValue('Home — Example')
+    const titleInput = await screen.findByDisplayValue('Home')
     fireEvent.change(titleInput, { target: { value: 'New Meta Title' } })
     fireEvent.click(screen.getByRole('button', { name: 'Save Changes' }))
 

package/src/components/CoauthorResultPopover.tsx

@@ -120,7 +120,7 @@ export function CoauthorResultPopover({
         onClick={(e) => e.stopPropagation()}
         className="bg-card w-full max-w-2xl rounded-lg shadow-2xl outline-none"
       >
-        <div className="border-border flex items-center justify-between border-b px-4 py-3">
+        <div className="border-border flex items-center justify-between border-b px-6 py-4">
           <div className="text-foreground flex items-center gap-2 text-sm font-medium">
             <Sparkles className="text-primary h-4 w-4" aria-hidden />
             <span>AI {coauthorActionLabel(action)}</span>

package/src/components/EditorSeoAside.tsx

@@ -0,0 +1,149 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Search, X } from 'lucide-react'
+import { SeoCharCount } from './seo/SeoCharCount.js'
+import { SeoEditorPane } from './seo/SeoEditorPane.js'
+import { InspectorExpandButton, ResizableAside } from './ui/ResizableAside.js'
+
+const SEO_TITLE_MIN = 30
+const SEO_TITLE_MAX = 60
+const SEO_DESC_MIN = 120
+const SEO_DESC_MAX = 160
+
+const INSPECTOR_SHELL = 'bg-card border-border flex h-full flex-col border-l'
+const LABEL = 'text-foreground mb-1 block text-xs font-medium'
+const INPUT =
+  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export interface EditorSeoAsideProps {
+  entityType: 'page' | 'post'
+  /** Saved document id — when absent, shows a draft-only meta form. */
+  entityId: string | null
+  title: string
+  seoTitle: string
+  seoDescription: string
+  canEdit: boolean
+  onClose: () => void
+  /** Sync basic meta fields on the in-memory editor model (draft flow). */
+  onDraftChange?: (patch: { seoTitle?: string; seoDescription?: string }) => void
+  /** Refetch the editor document after SEO API save (saved flow). */
+  onSaved?: () => void
+}
+
+function DraftSeoForm({
+  title,
+  seoTitle,
+  seoDescription,
+  canEdit,
+  onDraftChange,
+}: Pick<
+  EditorSeoAsideProps,
+  'title' | 'seoTitle' | 'seoDescription' | 'canEdit' | 'onDraftChange'
+>) {
+  return (
+    <div className="flex-1 space-y-4 overflow-y-auto p-4">
+      <p className="border-border bg-muted text-muted-foreground rounded-md border p-4 text-sm">
+        Save a draft first to unlock the full SEO editor — focus keyword, social previews, schema,
+        robots, and AI assists. You can still set a basic title and description below; they are
+        saved with the document.
+      </p>
+      <div>
+        <div className="mb-1 flex items-center justify-between">
+          <label className={`${LABEL} mb-0`} htmlFor="editor-seo-title">
+            SEO title
+          </label>
+          <SeoCharCount value={seoTitle} min={SEO_TITLE_MIN} max={SEO_TITLE_MAX} />
+        </div>
+        <input
+          id="editor-seo-title"
+          className={INPUT}
+          value={seoTitle}
+          disabled={!canEdit}
+          placeholder={title || 'Defaults to the page title'}
+          onChange={(e) => onDraftChange?.({ seoTitle: e.target.value })}
+        />
+      </div>
+      <div>
+        <div className="mb-1 flex items-center justify-between">
+          <label className={`${LABEL} mb-0`} htmlFor="editor-seo-desc">
+            SEO description
+          </label>
+          <SeoCharCount value={seoDescription} min={SEO_DESC_MIN} max={SEO_DESC_MAX} />
+        </div>
+        <textarea
+          id="editor-seo-desc"
+          className={`${INPUT} min-h-[96px] resize-y`}
+          value={seoDescription}
+          disabled={!canEdit}
+          placeholder="Summarize this content for search results (120–160 characters)"
+          onChange={(e) => onDraftChange?.({ seoDescription: e.target.value })}
+        />
+      </div>
+    </div>
+  )
+}
+
+/** Right-side SEO panel for the Page / Post section editors. */
+export function EditorSeoAside({
+  entityType,
+  entityId,
+  title,
+  seoTitle,
+  seoDescription,
+  canEdit,
+  onClose,
+  onDraftChange,
+  onSaved,
+}: EditorSeoAsideProps) {
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [onClose])
+
+  return (
+    <ResizableAside role="dialog" aria-label="SEO settings" className={INSPECTOR_SHELL}>
+      {entityId ? (
+        <SeoEditorPane
+          entityType={entityType}
+          entityId={entityId}
+          onClose={onClose}
+          onSaved={onSaved}
+        />
+      ) : (
+        <>
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
+            <div className="flex min-w-0 items-center gap-2">
+              <Search className="text-muted-foreground h-4 w-4 shrink-0" aria-hidden />
+              <div className="min-w-0">
+                <h2 className="text-foreground truncate text-sm font-medium">SEO</h2>
+                <p className="text-muted-foreground truncate text-xs">{title || 'Untitled'}</p>
+              </div>
+            </div>
+            <div className="flex shrink-0 items-center gap-0.5">
+              <InspectorExpandButton />
+              <button
+                type="button"
+                onClick={onClose}
+                aria-label="Close SEO panel"
+                className="text-muted-foreground hover:text-foreground hover:bg-accent flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7"
+              >
+                <X className="h-4 w-4" aria-hidden />
+              </button>
+            </div>
+          </div>
+          <DraftSeoForm
+            title={title}
+            seoTitle={seoTitle}
+            seoDescription={seoDescription}
+            canEdit={canEdit}
+            onDraftChange={onDraftChange}
+          />
+        </>
+      )}
+    </ResizableAside>
+  )
+}

package/src/components/MediaPickerModal.tsx

@@ -138,7 +138,7 @@ export function MediaPickerModal({
           aria-describedby={undefined}
           className="bg-card text-card-foreground border-border fixed top-1/2 left-1/2 z-70 mx-4 flex max-h-[80vh] w-[calc(100%-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-2xl focus:outline-none"
         >
-          <div className="border-border flex items-center justify-between border-b px-4 py-3">
+          <div className="border-border flex items-center justify-between border-b px-6 py-4">
             <Dialog.Title className="text-foreground text-lg font-medium">
               Insert Image
             </Dialog.Title>

package/src/components/SEOConfigPanel.tsx

@@ -242,7 +242,7 @@ export function SEOConfigPanel() {
 
       {/* Site-wide section */}
       <section className="border-border bg-card rounded-lg border">
-        <header className="border-border flex items-center gap-2 border-b px-4 py-3">
+        <header className="border-border flex items-center gap-2 border-b px-6 py-4">
           <Globe className="text-primary h-4 w-4" />
           <h3 className="text-foreground text-sm font-medium">Site-wide defaults</h3>
         </header>
@@ -333,7 +333,7 @@ export function SEOConfigPanel() {
 
       {/* Per-collection section */}
       <section className="border-border bg-card rounded-lg border">
-        <header className="border-border flex items-center gap-2 border-b px-4 py-3">
+        <header className="border-border flex items-center gap-2 border-b px-6 py-4">
           <FileText className="text-primary h-4 w-4" />
           <h3 className="text-foreground text-sm font-medium">Per-collection defaults</h3>
           <span className="text-muted-foreground text-xs">

package/src/components/SchedulePublishDialog.tsx

@@ -142,7 +142,7 @@ export function SchedulePublishDialog({
       <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-md -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="border-border flex items-center justify-between border-b px-6 py-4">
             <div className="flex items-center gap-2">
               <Calendar className="text-muted-foreground h-5 w-5" aria-hidden />
               <Dialog.Title className="text-foreground text-lg font-medium">

package/src/components/SharePreviewLinkDialog.tsx

@@ -129,7 +129,7 @@ export function SharePreviewLinkDialog({
       <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="border-border flex items-center justify-between border-b px-6 py-4">
             <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">

package/src/components/ThemeProvider.tsx

@@ -8,6 +8,8 @@ import {
 } from '@actuate-media/cms-core/appearance'
 import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react'
 
+import { getAdminRootElement } from '../lib/admin-root-element.js'
+
 /**
  * Admin appearance engine.
  *
@@ -119,7 +121,7 @@ const KEY_MOTION = 'actuate-reduce-motion'
 const KEY_BRAND = 'actuate-admin-brand'
 
 function adminRootEl(): HTMLElement | null {
-  return document.querySelector('.actuate-admin')
+  return getAdminRootElement()
 }
 
 function applyColorMode(resolved: 'light' | 'dark') {

package/src/components/VersionHistory.tsx

@@ -98,7 +98,7 @@ export function VersionHistory({
           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="border-border flex items-center justify-between border-b px-6 py-4">
             <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">

package/src/components/seo/SeoEditorPane.tsx

@@ -7,10 +7,19 @@
  * assists, and `updateSeoFields` save path as the drawer; only the
  * presentation pattern changed.
  */
-import { cloneElement, isValidElement, useEffect, useId, useState, type ReactElement } from 'react'
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type ReactElement,
+} from 'react'
 import { Sparkles, Check, Loader2, Wand2 } from 'lucide-react'
 import { toast } from 'sonner'
 import type { BrandAlignmentScoreResult } from '@actuate-media/cms-core/brand-voice'
+import { resolveRenderedMetaTitle } from '@actuate-media/cms-core/client'
 import {
   fetchSeoContentRecord,
   updateSeoFields,
@@ -148,7 +157,7 @@ export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEdi
         }
         setRecord(rec)
         setForm({
-          metaTitle: rec.metaTitle ?? '',
+          metaTitle: rec.metaTitlePage ?? '',
           metaDescription: rec.metaDescription ?? '',
           canonicalUrl: rec.canonicalUrl ?? '',
           focusKeyword: rec.focusKeyword ?? '',
@@ -182,11 +191,20 @@ export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEdi
         return
       }
       if (result.text) {
-        update({ [field]: result.text } as Partial<SeoFieldPayload>)
+        const targetField =
+          field === 'ogTitle' ? 'metaTitle' : field === 'ogDescription' ? 'metaDescription' : field
+        const patch: Partial<SeoFieldPayload> = { [targetField]: result.text }
+        if (field === 'ogTitle') patch.ogTitle = ''
+        if (field === 'ogDescription') patch.ogDescription = ''
+        update(patch)
         if (result.brandAlignment) {
-          setAiAlignments((prev) => ({ ...prev, [field]: result.brandAlignment }))
+          setAiAlignments((prev) => ({ ...prev, [targetField]: result.brandAlignment }))
         }
-        toast.success('AI suggestion applied — review before saving.')
+        toast.success(
+          field === 'ogTitle' || field === 'ogDescription'
+            ? 'AI suggestion applied to meta tags — OG inherits from meta unless you override.'
+            : 'AI suggestion applied — review before saving.',
+        )
       } else {
         toast.error('No suggestion was returned.')
       }
@@ -256,7 +274,18 @@ export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEdi
     onSaved?.()
   }
 
-  const title = form.metaTitle || record?.title || 'Untitled'
+  const renderedTitle = useMemo(() => {
+    if (!record) return form.metaTitle?.trim() || 'Untitled'
+    return resolveRenderedMetaTitle({
+      metaTitlePage: form.metaTitle,
+      documentTitle: record.title,
+      site: {
+        siteName: record.siteName ?? undefined,
+        titleTemplate: record.titleTemplate ?? undefined,
+      },
+    })
+  }, [form.metaTitle, record])
+
   const desc = form.metaDescription || 'No meta description set. Search engines may generate one.'
   const url = record?.url ?? ''
 
@@ -285,11 +314,11 @@ export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEdi
 
       <InspectorPaneBody>
         {loading ? (
-          <div className="px-4 py-3.5">
+          <div className="px-5 py-4">
             <SeoLoading />
           </div>
         ) : error ? (
-          <div className="px-4 py-3.5">
+          <div className="px-5 py-4">
             <SeoErrorState message={error} />
           </div>
         ) : record ? (
@@ -297,7 +326,7 @@ export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEdi
             <InspectorPaneSection title="Google Preview">
               <div className="rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3">
                 <p className="truncate text-[11.5px] text-[var(--suc)]">{url}</p>
-                <p className="text-[15px] leading-snug text-[var(--acc)]">{title}</p>
+                <p className="text-[15px] leading-snug text-[var(--acc)]">{renderedTitle}</p>
                 <p className="line-clamp-2 text-[12px] text-[var(--sub)]">{desc}</p>
               </div>
             </InspectorPaneSection>
@@ -316,7 +345,7 @@ export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEdi
                   className={inputCls}
                   value={form.metaTitle ?? ''}
                   onChange={(e) => update({ metaTitle: e.target.value })}
-                  placeholder="Page title for search results"
+                  placeholder="Page-specific title (%page% in your site template)"
                 />
               </PaneField>
               <PaneField
@@ -401,10 +430,10 @@ export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEdi
                     {url.replace(/^https?:\/\//, '').split('/')[0]}
                   </p>
                   <p className="truncate text-[12.5px] font-medium text-[var(--txt)]">
-                    {form.ogTitle || title}
+                    {form.ogTitle || renderedTitle}
                   </p>
                   <p className="line-clamp-1 text-[12px] text-[var(--sub)]">
-                    {form.ogDescription || desc}
+                    {form.ogDescription || form.metaDescription || desc}
                   </p>
                 </div>
               </div>

package/src/components/seo/SeoIssueFixPanel.tsx

@@ -321,7 +321,11 @@ export function SeoIssueFixPanel({
       toast.error(res.error)
       return
     }
-    toast.success('Fix applied and issue resolved.')
+    toast.success(
+      suggestion?.fixStrategy === 'fix-link'
+        ? 'Link updated in content and issue resolved.'
+        : 'Redirect created and issue resolved.',
+    )
     onChanged?.()
   }
 
@@ -408,11 +412,15 @@ export function SeoIssueFixPanel({
                     {suggestion.source === 'ai' && !suggestion.aiUnavailable ? (
                       <span className="bg-primary/10 text-primary inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium">
                         <Sparkles className="h-3 w-3" aria-hidden />
-                        AI suggestion
+                        {suggestion.fixStrategy === 'fix-link'
+                          ? 'Fix link in content'
+                          : 'AI suggestion'}
                       </span>
                     ) : suggestion.source === 'deterministic' ? (
                       <span className="bg-muted text-muted-foreground rounded-full px-2.5 py-0.5 text-xs font-medium">
-                        Rule-based fix
+                        {suggestion.fixStrategy === 'fix-link'
+                          ? 'Content link fix'
+                          : 'Rule-based fix'}
                       </span>
                     ) : null}
                   </div>
@@ -483,7 +491,11 @@ export function SeoIssueFixPanel({
                     disabled={busy}
                   >
                     <Check className="h-4 w-4" aria-hidden />
-                    {busy ? 'Applying…' : 'Approve fix'}
+                    {busy
+                      ? 'Applying…'
+                      : suggestion.fixStrategy === 'fix-link'
+                        ? 'Fix link in content'
+                        : 'Approve redirect'}
                   </button>
                 ) : inlineFix && suggestion?.autoFixable && !inlineApplyEnabled ? (
                   <PlanUpgradeCallout feature="seo.inlineApply" upgradeUrl={planInfo?.upgradeUrl} />

package/src/components/seo/primitives.tsx

@@ -153,14 +153,18 @@ export function SectionCard({
           {action}
         </CardHeader>
       )}
-      <CardContent className={title || action ? 'pt-0' : ''}>{children}</CardContent>
+      <CardContent className={title || action ? '' : 'pt-6!'}>{children}</CardContent>
     </Card>
   )
 }
 
 export function SeoLoading({ label = 'Loading…' }: { label?: string }) {
   return (
-    <div className="flex h-64 items-center justify-center" role="status" aria-live="polite">
+    <div
+      className="flex min-h-32 items-center justify-center py-12"
+      role="status"
+      aria-live="polite"
+    >
       <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" aria-hidden />
       <span className="sr-only">{label}</span>
     </div>
@@ -195,7 +199,7 @@ export function SeoEmptyState({
 export function SeoErrorState({ message, onRetry }: { message: string; onRetry?: () => void }) {
   return (
     <div
-      className="border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-3"
+      className="border-destructive/30 bg-destructive/5 flex items-center gap-3 rounded-lg border p-4"
       role="alert"
     >
       <AlertTriangle className="text-destructive h-5 w-5 shrink-0" aria-hidden />

package/src/components/ui/Card.tsx

@@ -10,8 +10,8 @@ const card = cv(
         /** Stat / compact surfaces (`.dstat`). */
         sm: 'px-4 py-3.5',
         /** Simple padded panel (`.dcard-b`). */
-        md: 'px-[18px] py-4',
-        lg: 'px-[18px] py-6',
+        md: 'px-6 py-4',
+        lg: 'px-6 py-6',
       },
       elevation: {
         flat: 'shadow-none',
@@ -55,7 +55,7 @@ export function CardHeader({
 }: HTMLAttributes<HTMLDivElement> & { bordered?: boolean }) {
   return (
     <div
-      className={[bordered ? 'border-b border-[var(--bdr)] px-[18px] py-[14px]' : '', className]
+      className={[bordered ? 'border-b border-[var(--bdr)] px-6 pt-6 pb-4' : '', className]
         .filter(Boolean)
         .join(' ')}
       {...rest}
@@ -96,7 +96,7 @@ export function CardDescription({
 export function CardContent({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={`px-[18px] py-4 text-[length:var(--fs-body)] leading-[1.55] text-[var(--sub)] ${className}`}
+      className={`px-6 pt-4 pb-6 text-[length:var(--fs-body)] leading-[1.55] text-[var(--sub)] ${className}`}
       {...rest}
     >
       {children}
@@ -107,7 +107,7 @@ export function CardContent({ className = '', children, ...rest }: HTMLAttribute
 export function CardFooter({ className = '', children, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={`flex items-center justify-end gap-2 border-t border-[var(--bdr)] px-[18px] py-3 ${className}`}
+      className={`flex items-center justify-end gap-2 border-t border-[var(--bdr)] px-6 py-4 ${className}`}
       {...rest}
     >
       {children}

package/src/components/ui/InspectorPane.tsx

@@ -86,7 +86,7 @@ export function InspectorPaneHeader({
   closeLabel?: string
 }) {
   return (
-    <div className="flex items-start gap-2 border-b border-[var(--bdr)] px-4 py-3.5">
+    <div className="flex items-start gap-2 border-b border-[var(--bdr)] px-5 py-4">
       <div className="min-w-0 flex-1">{children}</div>
       <button
         type="button"
@@ -115,7 +115,7 @@ export function InspectorPaneSection({
   children: ReactNode
 }) {
   return (
-    <div className="border-b border-[var(--bdr)] px-4 py-3.5 last:border-b-0">
+    <div className="border-b border-[var(--bdr)] px-5 py-4 last:border-b-0">
       {title && (
         <div className="mb-2.5 flex items-baseline gap-2">
           <span className="text-[10.5px] font-semibold tracking-[0.6px] text-[var(--muted)] uppercase">
@@ -130,5 +130,5 @@ export function InspectorPaneSection({
 }
 
 export function InspectorPaneFooter({ children }: { children: ReactNode }) {
-  return <div className="border-t border-[var(--bdr)] px-4 py-3.5">{children}</div>
+  return <div className="border-t border-[var(--bdr)] px-5 py-4">{children}</div>
 }

package/src/components/ui/PanelSection.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+/**
+ * Bordered panel with a header divider — Dashboard, modals, and list-heavy views.
+ * Matches Settings/Section card rhythm: `px-6` gutters, `py-4` header, body flush
+ * below the divider with its own padding.
+ */
+export function PanelSection({
+  title,
+  description,
+  action,
+  children,
+  className = '',
+}: {
+  title?: ReactNode
+  description?: ReactNode
+  action?: ReactNode
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <section
+      className={`bg-card border-border overflow-hidden rounded-xl border shadow-sm ${className}`}
+    >
+      {(title || action) && (
+        <header className="border-border flex items-center justify-between gap-3 border-b px-6 py-4">
+          <div className="min-w-0">
+            {title &&
+              (typeof title === 'string' ? (
+                <h2 className="text-foreground text-sm font-medium">{title}</h2>
+              ) : (
+                title
+              ))}
+            {description &&
+              (typeof description === 'string' ? (
+                <p className="text-muted-foreground mt-0.5 text-xs">{description}</p>
+              ) : (
+                description
+              ))}
+          </div>
+          {action}
+        </header>
+      )}
+      {children}
+    </section>
+  )
+}
+
+/** Standard inset for list rows / table bodies inside a {@link PanelSection}. */
+export const PANEL_LIST_ROW_CLASS =
+  'hover:bg-accent/50 focus-visible:bg-accent/50 w-full px-6 py-4 text-left transition-colors'