@prenta/admin 1.17.14 → 1.17.16

package/src/router/admin-routes.ts

@@ -12,13 +12,13 @@
  * the `admin-routes` drift test keeps `ADMIN_STATIC_ROUTE_PATTERNS` in sync with
  * the literal `matchRoute('…')` calls in AdminRoot.
  */
-import { SEO_DEEP_PATHS } from '../views/SEO.js'
+import { SEO_DEEP_PATHS } from '../views/seo/seo-routes.js'
 
 /**
  * Every static route pattern `AdminRoot.renderView()` resolves via a literal
  * `matchRoute('…')` call. Dynamic collection routes are derived per-config in
- * {@link collectionRoutePatterns}; the SEO deep paths are added from the view's
- * own {@link SEO_DEEP_PATHS} so the two can't drift.
+ * {@link collectionRoutePatterns}; the SEO deep paths are added from
+ * {@link SEO_DEEP_PATHS} so the two can't drift.
  */
 export const ADMIN_STATIC_ROUTE_PATTERNS: readonly string[] = [
   '/',

package/src/views/CollectionList.tsx

@@ -102,6 +102,25 @@ function facetCellValue(doc: any, facet: FacetDef): string {
   return ''
 }
 
+const SKIPPED_LIST_FIELDS = new Set(['richText', 'blocks', 'json', 'media', 'relationship'])
+
+/** Scalar field names the table and inspector show. Content blobs are not requested. */
+function listPickParam(config: any, slug: string, facets: FacetDef[]): string {
+  const names = new Set<string>(['title', 'slug'])
+  const fields = resolveCollection(config, slug)?.fields
+  if (fields && typeof fields === 'object') {
+    for (const [name, field] of Object.entries(fields) as Array<[string, any]>) {
+      if (!field || field.hidden) continue
+      if (typeof field.type === 'string' && SKIPPED_LIST_FIELDS.has(field.type)) continue
+      if (/^[A-Za-z_][A-Za-z0-9_]*$/.test(name)) names.add(name)
+    }
+  }
+  for (const facet of facets) {
+    if (/^[A-Za-z_][A-Za-z0-9_]*$/.test(facet.name)) names.add(facet.name)
+  }
+  return [...names].slice(0, 32).join(',')
+}
+
 function statusColor(status: string): string {
   switch (status?.toUpperCase()) {
     case 'PUBLISHED':
@@ -183,14 +202,14 @@ export function CollectionList({ collectionSlug, config, onNavigate }: Collectio
   }, [search])
 
   const endpoint = useMemo(() => {
-    let url = `/collections/${collectionSlug}?page=${page}&pageSize=25`
+    let url = `/collections/${collectionSlug}?page=${page}&pageSize=25&pick=${listPickParam(config, collectionSlug, facets)}`
     if (debouncedSearch) url += `&search=${encodeURIComponent(debouncedSearch)}`
     if (sort) url += `&sort=${sort}&order=${order}`
     for (const [field, value] of Object.entries(filters)) {
       if (value) url += `&filter.${encodeURIComponent(field)}=${encodeURIComponent(value)}`
     }
     return url
-  }, [collectionSlug, page, debouncedSearch, sort, order, filters])
+  }, [collectionSlug, page, debouncedSearch, sort, order, filters, config, facets])
 
   const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(endpoint)
   const docs = data?.docs ?? []

package/src/views/SEO.tsx

@@ -37,6 +37,7 @@ import { AuditTab } from './seo/AuditTab.js'
 import { LinksTab } from './seo/LinksTab.js'
 import { ProposalsTab } from './seo/ProposalsTab.js'
 import { AiVisibilityTab } from './seo/AiVisibilityTab.js'
+export { SEO_DEEP_PATHS, seoTabForPath } from './seo/seo-routes.js'
 
 export interface SEOProps {
   onNavigate?: (path: string) => void
@@ -61,54 +62,6 @@ function normalizeTab(tab: string | undefined): TabId {
   return (valid.includes(tab ?? '') ? tab : 'overview') as TabId
 }
 
-/**
- * SEO deep paths the admin router resolves onto the tabbed SEO view — including
- * every path plugin-seo advertises in the sidebar. `matchRoute` is exact, so any
- * of these NOT listed here falls through to the generic 404 (which is exactly
- * how `/seo/link-health` and `/seo/sitemap` used to break).
- */
-export const SEO_DEEP_PATHS = [
-  '/seo/link-health',
-  '/seo/sitemap',
-  '/seo/redirects',
-  '/seo/content',
-  '/seo/canonicals',
-  '/seo/technical',
-  '/seo/links',
-  '/seo/audit',
-  '/seo/proposals',
-  '/seo/ai-visibility',
-  '/seo',
-] as const
-
-/** Map an SEO deep path to the tab it should open, or null if it isn't one. */
-export function seoTabForPath(pathname: string): TabId | null {
-  switch (pathname) {
-    case '/seo/link-health':
-      return 'links'
-    case '/seo/sitemap':
-      return 'technical'
-    case '/seo/redirects':
-      return 'redirects'
-    case '/seo/content':
-    case '/seo/canonicals':
-      return 'content'
-    case '/seo/technical':
-    case '/seo/links':
-      return 'technical'
-    case '/seo/audit':
-      return 'audit'
-    case '/seo/proposals':
-      return 'proposals'
-    case '/seo/ai-visibility':
-      return 'ai-visibility'
-    case '/seo':
-      return 'overview'
-    default:
-      return null
-  }
-}
-
 interface UrlState {
   tab: string | null
   entityType: string | null

package/src/views/Trash.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Loader2, RotateCcw, Trash2 } from 'lucide-react'
 import { toast } from 'sonner'
 import { cmsApi } from '../lib/api.js'
+import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { EmptyState } from '../components/ui/EmptyState.js'
 
 export interface TrashProps {
@@ -84,6 +85,8 @@ export function Trash({ onNavigate, config }: TrashProps) {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [restoringId, setRestoringId] = useState<string | null>(null)
+  const [purgeTarget, setPurgeTarget] = useState<TrashRow | null>(null)
+  const [purgingId, setPurgingId] = useState<string | null>(null)
 
   const load = useCallback(async () => {
     setLoading(true)
@@ -91,7 +94,7 @@ export function Trash({ onNavigate, config }: TrashProps) {
     const results = await Promise.all(
       collections.map(async (slug) => {
         const res = await cmsApi<ListEnvelope>(
-          `/collections/${encodeURIComponent(slug)}?includeDeleted=true&pageSize=50&sort=updatedAt&order=desc`,
+          `/collections/${encodeURIComponent(slug)}?includeDeleted=true&pageSize=50&sort=updatedAt&order=desc&pick=title,slug`,
         )
         if (res.error) return [] as TrashRow[]
         return (res.data?.docs ?? []).map((doc) => asRow(slug, doc))
@@ -135,12 +138,30 @@ export function Trash({ onNavigate, config }: TrashProps) {
     onNavigate(editorPath(row.collection, row.id))
   }
 
+  async function handlePurge(row: TrashRow) {
+    setPurgingId(row.id)
+    const res = await cmsApi(
+      `/collections/${encodeURIComponent(row.collection)}/${encodeURIComponent(row.id)}/purge`,
+      { method: 'POST' },
+    )
+    setPurgingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success(`Permanently deleted "${row.title}"`)
+    setRows((current) =>
+      current.filter((item) => item.id !== row.id || item.collection !== row.collection),
+    )
+  }
+
   return (
     <div className="p-4 pr-8">
       <div className="mb-4">
         <h1 className="text-foreground mb-1">Trash</h1>
         <p className="text-muted-foreground text-sm">
-          Soft-deleted pages and posts stay here for 30 days, then are permanently removed.
+          Soft-deleted pages and posts stay here for 30 days. Restore one, or delete it permanently
+          now.
         </p>
       </div>
 
@@ -181,20 +202,36 @@ export function Trash({ onNavigate, config }: TrashProps) {
                     {formatWhen(row.deletedAt ?? row.updatedAt)}
                   </td>
                   <td className="px-4 py-2.5 text-right">
-                    <button
-                      type="button"
-                      className="text-foreground hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
-                      onClick={() => void handleRestore(row)}
-                      disabled={restoringId === row.id}
-                      aria-label={`Restore ${row.title}`}
-                    >
-                      {restoringId === row.id ? (
-                        <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
-                      ) : (
-                        <RotateCcw className="h-4 w-4" aria-hidden />
-                      )}
-                      Restore
-                    </button>
+                    <div className="flex items-center justify-end gap-2">
+                      <button
+                        type="button"
+                        className="text-foreground hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                        onClick={() => void handleRestore(row)}
+                        disabled={restoringId === row.id || purgingId === row.id}
+                        aria-label={`Restore ${row.title}`}
+                      >
+                        {restoringId === row.id ? (
+                          <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                        ) : (
+                          <RotateCcw className="h-4 w-4" aria-hidden />
+                        )}
+                        Restore
+                      </button>
+                      <button
+                        type="button"
+                        className="text-destructive hover:bg-accent focus-visible:ring-ring inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium focus-visible:ring-2 focus-visible:outline-none disabled:opacity-50"
+                        onClick={() => setPurgeTarget(row)}
+                        disabled={restoringId === row.id || purgingId === row.id}
+                        aria-label={`Delete ${row.title} permanently`}
+                      >
+                        {purgingId === row.id ? (
+                          <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
+                        ) : (
+                          <Trash2 className="h-4 w-4" aria-hidden />
+                        )}
+                        Delete
+                      </button>
+                    </div>
                   </td>
                 </tr>
               ))}
@@ -202,6 +239,21 @@ export function Trash({ onNavigate, config }: TrashProps) {
           </table>
         </div>
       )}
+      <ConfirmDialog
+        open={purgeTarget !== null}
+        onClose={() => setPurgeTarget(null)}
+        onConfirm={() => {
+          if (purgeTarget) void handlePurge(purgeTarget)
+        }}
+        title="Delete permanently?"
+        description={
+          purgeTarget
+            ? `"${purgeTarget.title}" will be removed from the trash and cannot be restored.`
+            : 'This document will be removed from the trash and cannot be restored.'
+        }
+        confirmLabel="Delete permanently"
+        destructive
+      />
     </div>
   )
 }

package/src/views/lazy-views.tsx

@@ -0,0 +1,79 @@
+import { lazy } from 'react'
+import { Skeleton } from '../components/ui/Skeleton.js'
+
+/**
+ * Route-level splits. Each view is a dynamic import so the admin shell
+ * (login, layout, dashboard) does not download the editors up front.
+ * Named exports are adapted to the default export `React.lazy` expects.
+ */
+
+export const CollectionList = lazy(() =>
+  import('./CollectionList.js').then((m) => ({ default: m.CollectionList })),
+)
+export const DocumentEdit = lazy(() =>
+  import('./DocumentEdit.js').then((m) => ({ default: m.DocumentEdit })),
+)
+export const MediaBrowser = lazy(() =>
+  import('./MediaBrowser.js').then((m) => ({ default: m.MediaBrowser })),
+)
+export const Settings = lazy(() => import('./Settings.js').then((m) => ({ default: m.Settings })))
+export const Profile = lazy(() => import('./Profile.js').then((m) => ({ default: m.Profile })))
+export const Forms = lazy(() => import('./Forms.js').then((m) => ({ default: m.Forms })))
+export const FormEditor = lazy(() =>
+  import('./FormEditor.js').then((m) => ({ default: m.FormEditor })),
+)
+export const FormSubmissions = lazy(() =>
+  import('./FormSubmissions.js').then((m) => ({ default: m.FormSubmissions })),
+)
+export const FormEntries = lazy(() =>
+  import('./FormEntries.js').then((m) => ({ default: m.FormEntries })),
+)
+export const FormDeliveries = lazy(() =>
+  import('./FormDeliveries.js').then((m) => ({ default: m.FormDeliveries })),
+)
+export const SEO = lazy(() => import('./SEO.js').then((m) => ({ default: m.SEO })))
+export const ScriptTags = lazy(() =>
+  import('./ScriptTags.js').then((m) => ({ default: m.ScriptTags })),
+)
+export const PageSectionEditor = lazy(() =>
+  import('./page-editor/PageSectionEditor.js').then((m) => ({ default: m.PageSectionEditor })),
+)
+export const Trash = lazy(() => import('./Trash.js').then((m) => ({ default: m.Trash })))
+export const PagesListView = lazy(() =>
+  import('./Pages/PagesListView.js').then((m) => ({ default: m.PagesListView })),
+)
+export const PageTagManager = lazy(() =>
+  import('./Pages/PageTagManager.js').then((m) => ({ default: m.PageTagManager })),
+)
+export const PostsListView = lazy(() =>
+  import('./Posts/PostsListView.js').then((m) => ({ default: m.PostsListView })),
+)
+export const PostTypesView = lazy(() =>
+  import('./Posts/PostTypesView.js').then((m) => ({ default: m.PostTypesView })),
+)
+export const PostTypeEditor = lazy(() =>
+  import('./Posts/PostTypeEditor.js').then((m) => ({ default: m.PostTypeEditor })),
+)
+export const NewPostPicker = lazy(() =>
+  import('./Posts/NewPostPicker.js').then((m) => ({ default: m.NewPostPicker })),
+)
+export const NewPostTypeInstructions = lazy(() =>
+  import('./Posts/NewPostTypeInstructions.js').then((m) => ({
+    default: m.NewPostTypeInstructions,
+  })),
+)
+export const PostSectionEditor = lazy(() =>
+  import('./post-editor/PostSectionEditor.js').then((m) => ({ default: m.PostSectionEditor })),
+)
+export const PostTemplateEditor = lazy(() =>
+  import('./post-editor/PostTemplateEditor.js').then((m) => ({ default: m.PostTemplateEditor })),
+)
+
+export function ViewFallback() {
+  return (
+    <div className="p-6" aria-busy="true" aria-live="polite">
+      <p className="text-muted-foreground text-sm">Loading</p>
+      <Skeleton className="mt-4" />
+    </div>
+  )
+}

package/src/views/seo/seo-routes.ts

@@ -0,0 +1,58 @@
+/**
+ * SEO deep-link table. Kept out of `SEO.tsx` so the admin shell can route
+ * these paths without loading the SEO view.
+ */
+
+const SEO_TAB_IDS = [
+  'overview',
+  'content',
+  'links',
+  'technical',
+  'ai-visibility',
+  'redirects',
+  'audit',
+  'proposals',
+] as const
+
+export type SeoTabId = (typeof SEO_TAB_IDS)[number]
+
+/**
+ * SEO deep paths the admin router resolves onto the tabbed SEO view — including
+ * every path plugin-seo advertises in the sidebar. `matchRoute` is exact, so any
+ * of these NOT listed here falls through to the generic 404.
+ */
+export const SEO_DEEP_PATHS = [
+  '/seo/link-health',
+  '/seo/sitemap',
+  '/seo/redirects',
+  '/seo/content',
+  '/seo/canonicals',
+  '/seo/technical',
+  '/seo/links',
+  '/seo/audit',
+  '/seo/proposals',
+  '/seo/ai-visibility',
+  '/seo',
+] as const
+
+const SEO_TAB_BY_PATH: Record<(typeof SEO_DEEP_PATHS)[number], SeoTabId> = {
+  '/seo/link-health': 'links',
+  '/seo/sitemap': 'technical',
+  '/seo/redirects': 'redirects',
+  '/seo/content': 'content',
+  '/seo/canonicals': 'content',
+  '/seo/technical': 'technical',
+  '/seo/links': 'technical',
+  '/seo/audit': 'audit',
+  '/seo/proposals': 'proposals',
+  '/seo/ai-visibility': 'ai-visibility',
+  '/seo': 'overview',
+}
+
+/** Map an SEO deep path to the tab it should open, or null if it isn't one. */
+export function seoTabForPath(pathname: string): SeoTabId | null {
+  if (Object.prototype.hasOwnProperty.call(SEO_TAB_BY_PATH, pathname)) {
+    return SEO_TAB_BY_PATH[pathname as keyof typeof SEO_TAB_BY_PATH]
+  }
+  return null
+}

package/src/views/settings/AuditLogExportCard.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import { useState } from 'react'
+import { Download } from 'lucide-react'
+import { toast } from 'sonner'
+import { Button } from '../../components/ui/Button.js'
+import { getApiBase } from '../../lib/api.js'
+import { SecurityCard } from './securityPrimitives.js'
+
+export type AuditExportFormat = 'csv' | 'json'
+
+export function auditExportPath(options: {
+  format: AuditExportFormat
+  from: string
+  to: string
+}): string {
+  const params = new URLSearchParams({ format: options.format })
+  if (options.from) params.set('from', options.from)
+  if (options.to) params.set('to', options.to)
+  return `/security/audit-log/export?${params.toString()}`
+}
+
+async function downloadAuditExport(path: string): Promise<{ error?: string; truncated?: boolean }> {
+  let res: Response
+  try {
+    res = await fetch(`${getApiBase()}${path}`, { credentials: 'include' })
+  } catch (err) {
+    return { error: err instanceof Error ? err.message : 'Network error' }
+  }
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string }
+    return { error: body.error || `Export failed (${res.status})` }
+  }
+  const blob = await res.blob()
+  const disposition = res.headers.get('content-disposition') ?? ''
+  const filename = /filename="([^"]+)"/.exec(disposition)?.[1] ?? 'audit-log.csv'
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(url)
+  return { truncated: res.headers.get('x-audit-export-truncated') === 'true' }
+}
+
+/** Admin download of the audit log as CSV or JSON, optionally limited to a date range. */
+export function AuditLogExportCard() {
+  const [from, setFrom] = useState('')
+  const [to, setTo] = useState('')
+  const [pending, setPending] = useState<AuditExportFormat | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  async function exportAs(format: AuditExportFormat) {
+    setPending(format)
+    setError(null)
+    const result = await downloadAuditExport(auditExportPath({ format, from, to }))
+    setPending(null)
+    if (result.error) {
+      setError(result.error)
+      return
+    }
+    if (result.truncated) {
+      toast.success('Export downloaded. It was capped at the newest 10,000 events.')
+      return
+    }
+    toast.success('Audit log exported')
+  }
+
+  return (
+    <SecurityCard
+      title="Audit log export"
+      description="Download recorded security and content events. A date range limits the file. The newest 10,000 matching events are included."
+    >
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(event) => {
+          event.preventDefault()
+          void exportAs('csv')
+        }}
+      >
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <label className="flex min-w-0 flex-1 flex-col gap-1.5 text-sm">
+            <span className="text-foreground font-medium">From</span>
+            <input
+              type="date"
+              value={from}
+              onChange={(event) => setFrom(event.target.value)}
+              className="border-border bg-input-background text-foreground focus-visible:ring-ring min-h-11 rounded-md border px-3 text-sm focus-visible:ring-2 focus-visible:outline-none"
+            />
+          </label>
+          <label className="flex min-w-0 flex-1 flex-col gap-1.5 text-sm">
+            <span className="text-foreground font-medium">To</span>
+            <input
+              type="date"
+              value={to}
+              onChange={(event) => setTo(event.target.value)}
+              className="border-border bg-input-background text-foreground focus-visible:ring-ring min-h-11 rounded-md border px-3 text-sm focus-visible:ring-2 focus-visible:outline-none"
+            />
+          </label>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            type="submit"
+            className="min-h-11"
+            loading={pending === 'csv'}
+            disabled={pending !== null}
+            leftIcon={<Download size={16} aria-hidden />}
+          >
+            Export CSV
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            className="min-h-11"
+            loading={pending === 'json'}
+            disabled={pending !== null}
+            leftIcon={<Download size={16} aria-hidden />}
+            onClick={() => void exportAs('json')}
+          >
+            Export JSON
+          </Button>
+        </div>
+        {error && (
+          <p className="text-destructive text-sm" role="alert">
+            {error}
+          </p>
+        )}
+      </form>
+    </SecurityCard>
+  )
+}

package/src/views/settings/SecurityTab.tsx

@@ -10,6 +10,7 @@ import {
 } from './components.js'
 import { AccessProtectionCard } from './AccessProtectionCard.js'
 import { AuthMfaCard } from './AuthMfaCard.js'
+import { AuditLogExportCard } from './AuditLogExportCard.js'
 import { SecretsAuditCard } from './SecretsAuditCard.js'
 import { SecurityStatusCard } from './SecurityStatusCard.js'
 import { CaptchaStatusCard } from './CaptchaStatusCard.js'
@@ -144,7 +145,8 @@ export function SecurityTab({
         />
       </div>
 
-      <div id="security-audit">
+      <div id="security-audit" className="space-y-4">
+        {canEdit && <AuditLogExportCard />}
         <SecretsAuditCard
           secrets={data.secrets}
           auditEnabled={data.auditEnabled}